From 95b7e2ab50bbb964d9a17f2b8514bed24ab6239d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 10:50:52 +0300
Subject: [PATCH 001/374] WIP

---
 frontend/webapp/app/overview/sources/page.tsx |  7 ++-
 frontend/webapp/containers/overview/index.tsx |  1 +
 .../overview/sources/sources.styled.tsx       |  7 +++
 .../containers/overview/sources/sources.tsx   | 51 +++++++++++++++++++
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 frontend/webapp/containers/overview/sources/sources.styled.tsx
 create mode 100644 frontend/webapp/containers/overview/sources/sources.tsx

diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx
index 42e001585..454db1e18 100644
--- a/frontend/webapp/app/overview/sources/page.tsx
+++ b/frontend/webapp/app/overview/sources/page.tsx
@@ -1,6 +1,11 @@
 "use client";
+import { SourcesContainer } from "@/containers/overview";
 import React from "react";
 
 export default function SourcesOverviewPage() {
-  return <div>SourcesOverviewPage</div>;
+  return (
+    <>
+      <SourcesContainer />
+    </>
+  );
 }
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 0bd20bd08..2a26e3504 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -1,2 +1,3 @@
 export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
+export { SourcesContainer } from "./sources/sources";
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
new file mode 100644
index 000000000..4c8ff6466
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const SourcesContainerWrapper = styled.div`
+  height: 100vh;
+  width: 100%;
+  overflow-y: scroll;
+`;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
new file mode 100644
index 000000000..7124c8208
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -0,0 +1,51 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { KeyvalLoader } from "@/design.system";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
+import { OverviewHeader } from "@/components/overview";
+import { useNotification } from "@/hooks";
+import { SourcesContainerWrapper } from "./sources.styled";
+
+export function SourcesContainer() {
+  const { show, Notification } = useNotification();
+
+  const {
+    data: sources,
+    refetch,
+    isLoading,
+  } = useQuery([QUERIES.API_SOURCES], getSources);
+
+  useEffect(() => {
+    console.log({ sources });
+  }, [sources]);
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    refetch();
+
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  if (isLoading) {
+    return <KeyvalLoader />;
+  }
+
+  return (
+    <SourcesContainerWrapper>
+      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <Notification />
+    </SourcesContainerWrapper>
+  );
+}

From 3f0700a90cdd81b24a269cde73c8f6c401765944 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 12:38:53 +0300
Subject: [PATCH 002/374] WIP

---
 .../containers/overview/sources/sources.tsx   | 29 ++-----------------
 1 file changed, 2 insertions(+), 27 deletions(-)

diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 7124c8208..541fb8d21 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,43 +1,19 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { KeyvalLoader } from "@/design.system";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
 import { OverviewHeader } from "@/components/overview";
-import { useNotification } from "@/hooks";
 import { SourcesContainerWrapper } from "./sources.styled";
 
 export function SourcesContainer() {
-  const { show, Notification } = useNotification();
-
   const {
     data: sources,
     refetch,
     isLoading,
   } = useQuery([QUERIES.API_SOURCES], getSources);
 
-  useEffect(() => {
-    console.log({ sources });
-  }, [sources]);
-
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    refetch();
-
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
   if (isLoading) {
     return <KeyvalLoader />;
   }
@@ -45,7 +21,6 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <Notification />
     </SourcesContainerWrapper>
   );
 }

From 9e4a5ace4946cc0f8ff97a066461f18285321c39 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 13:46:02 +0300
Subject: [PATCH 003/374] source manage card

---
 frontend/webapp/assets/images/index.tsx       |  1 +
 .../images/sources.card/sources.card.tsx      |  6 +++
 frontend/webapp/components/overview/index.tsx |  1 +
 .../sources.manage.card.tsx                   | 49 +++++++++++++++++++
 .../sources.manage.list.tsx                   | 24 +++++++++
 .../sources.manage.styled.tsx                 | 38 ++++++++++++++
 .../setup/sources/source.card/source.card.tsx |  6 +--
 .../containers/overview/sources/sources.tsx   |  4 +-
 frontend/webapp/styles/global.tsx             |  5 ++
 frontend/webapp/types/sources.tsx             | 11 +++++
 10 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 frontend/webapp/assets/images/index.tsx
 create mode 100644 frontend/webapp/assets/images/sources.card/sources.card.tsx
 create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
 create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
 create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
 create mode 100644 frontend/webapp/styles/global.tsx
 create mode 100644 frontend/webapp/types/sources.tsx

diff --git a/frontend/webapp/assets/images/index.tsx b/frontend/webapp/assets/images/index.tsx
new file mode 100644
index 000000000..9e85a0357
--- /dev/null
+++ b/frontend/webapp/assets/images/index.tsx
@@ -0,0 +1 @@
+export { SOURCES_LOGOS } from "./sources.card/sources.card";
diff --git a/frontend/webapp/assets/images/sources.card/sources.card.tsx b/frontend/webapp/assets/images/sources.card/sources.card.tsx
new file mode 100644
index 000000000..d2f593fb7
--- /dev/null
+++ b/frontend/webapp/assets/images/sources.card/sources.card.tsx
@@ -0,0 +1,6 @@
+export const SOURCES_LOGOS = {
+  java: "https://odigos-sources.s3.amazonaws.com/java.svg",
+  go: "https://odigos-sources.s3.amazonaws.com/go.svg",
+  javascript: "https://odigos-sources.s3.amazonaws.com/nodejs.svg",
+  python: "https://odigos-sources.s3.amazonaws.com/python.svg",
+};
diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index 8e1f401d6..799574495 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -1,3 +1,4 @@
 export { OverviewHeader } from "./overview.header/overview.header";
 export { ManageDestination } from "./destination/manage.destination/manage.destination";
 export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list";
+export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list";
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
new file mode 100644
index 000000000..dbd8fe628
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system";
+import { CardWrapper } from "./sources.manage.styled";
+import theme from "@/styles/palette";
+import { KIND_COLORS } from "@/styles/global";
+import { SOURCES_LOGOS } from "@/assets/images";
+import { ManagedSource } from "@/types/sources";
+
+const TEXT_STYLE: React.CSSProperties = {
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  width: 224,
+  textAlign: "center",
+};
+const LOGO_STYLE: React.CSSProperties = {
+  padding: 4,
+  backgroundColor: theme.colors.white,
+};
+
+interface SourceManagedCardProps {
+  item: ManagedSource | null;
+}
+const DEPLOYMENT = "Deployment";
+export default function SourceManagedCard({
+  item = null,
+}: SourceManagedCardProps) {
+  return (
+    <CardWrapper>
+      <KeyvalImage
+        src={SOURCES_LOGOS[item?.languages[0].language || ""]}
+        width={56}
+        height={56}
+        style={LOGO_STYLE}
+        alt="source-logo"
+      />
+      <KeyvalText size={18} weight={700} style={TEXT_STYLE}>
+        {item?.name}
+      </KeyvalText>
+      <KeyvalTag
+        title={"item.kind"}
+        color={KIND_COLORS[item?.kind || DEPLOYMENT]}
+      />
+      <KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
+        {item?.namespace}
+      </KeyvalText>
+    </CardWrapper>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
new file mode 100644
index 000000000..9d7b4bded
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled";
+import Empty from "@/assets/images/empty-list.svg";
+import SourceManagedCard from "./sources.manage.card";
+
+export function SourcesManagedList({ data = [1, 1, 1, 1] }) {
+  function renderDestinations() {
+    return data.map((source: any) => <SourceManagedCard />);
+  }
+
+  return (
+    <>
+      <ManagedListWrapper>
+        {data?.length === 0 ? (
+          <EmptyListWrapper>
+            <Empty />
+          </EmptyListWrapper>
+        ) : (
+          renderDestinations()
+        )}
+      </ManagedListWrapper>
+    </>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
new file mode 100644
index 000000000..cb4f81c3a
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -0,0 +1,38 @@
+import { styled } from "styled-components";
+
+export const CardWrapper = styled.div`
+  display: flex;
+  width: 272px;
+  height: 152px;
+  padding-top: 32px;
+  padding-bottom: 24px;
+  border-radius: 24px;
+  border: 1px solid var(--dark-mode-dark-3, #203548);
+  background: var(--dark-mode-dark-1, #07111a);
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+  cursor: pointer;
+  &:hover {
+    background: var(--dark-mode-dark-1, #07111a81);
+  }
+`;
+
+export const EmptyListWrapper = styled.div`
+  width: 100%;
+  margin-top: 130px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ManagedListWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  overflow-y: scroll;
+  padding: 0px 36px;
+  padding-bottom: 50px;
+  margin-top: 88px;
+`;
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
index 7f36f2877..2aa3dc664 100644
--- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx
+++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
@@ -12,11 +12,7 @@ import {
 } from "./source.card.styled";
 import Logo from "assets/logos/code-sandbox-logo.svg";
 import { SETUP } from "@/utils/constants";
-
-const KIND_COLORS = {
-  deployment: "#203548",
-  DaemonSet: "#033869",
-};
+import { KIND_COLORS } from "@/styles/global";
 
 const TEXT_STYLE = {
   textOverflow: "ellipsis",
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 541fb8d21..9164e2704 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -4,7 +4,7 @@ import { KeyvalLoader } from "@/design.system";
 import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
-import { OverviewHeader } from "@/components/overview";
+import { OverviewHeader, SourcesManagedList } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
 
 export function SourcesContainer() {
@@ -17,10 +17,12 @@ export function SourcesContainer() {
   if (isLoading) {
     return <KeyvalLoader />;
   }
+  console.log({ sources });
 
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <SourcesManagedList />
     </SourcesContainerWrapper>
   );
 }
diff --git a/frontend/webapp/styles/global.tsx b/frontend/webapp/styles/global.tsx
new file mode 100644
index 000000000..67bd1e72b
--- /dev/null
+++ b/frontend/webapp/styles/global.tsx
@@ -0,0 +1,5 @@
+export const KIND_COLORS = {
+  deployment: "#203548",
+  Deployment: "#203548",
+  DaemonSet: "#033869",
+};
diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx
new file mode 100644
index 000000000..53f44fe6e
--- /dev/null
+++ b/frontend/webapp/types/sources.tsx
@@ -0,0 +1,11 @@
+export interface ManagedSource {
+  kind: string;
+  name: string;
+  namespace: string;
+  languages: [
+    {
+      container_name: string;
+      language: string;
+    }
+  ];
+}

From 0c4b42edc4b76f289d7d2c7851ebc38576c6deb1 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 13:57:20 +0300
Subject: [PATCH 004/374] fixed pr comments

---
 frontend/webapp/assets/images/sources.card/sources.card.tsx  | 1 +
 .../sources/sources.manage.list/sources.manage.card.tsx      | 4 ++--
 .../components/setup/sources/source.card/source.card.tsx     | 5 ++++-
 frontend/webapp/styles/global.tsx                            | 4 ++--
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/assets/images/sources.card/sources.card.tsx b/frontend/webapp/assets/images/sources.card/sources.card.tsx
index d2f593fb7..2316a3529 100644
--- a/frontend/webapp/assets/images/sources.card/sources.card.tsx
+++ b/frontend/webapp/assets/images/sources.card/sources.card.tsx
@@ -3,4 +3,5 @@ export const SOURCES_LOGOS = {
   go: "https://odigos-sources.s3.amazonaws.com/go.svg",
   javascript: "https://odigos-sources.s3.amazonaws.com/nodejs.svg",
   python: "https://odigos-sources.s3.amazonaws.com/python.svg",
+  dotnet: "https://odigos-sources.s3.amazonaws.com/dotnet.svg",
 };
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
index dbd8fe628..d22c3e18e 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -21,7 +21,7 @@ const LOGO_STYLE: React.CSSProperties = {
 interface SourceManagedCardProps {
   item: ManagedSource | null;
 }
-const DEPLOYMENT = "Deployment";
+const DEPLOYMENT = "deployment";
 export default function SourceManagedCard({
   item = null,
 }: SourceManagedCardProps) {
@@ -39,7 +39,7 @@ export default function SourceManagedCard({
       </KeyvalText>
       <KeyvalTag
         title={"item.kind"}
-        color={KIND_COLORS[item?.kind || DEPLOYMENT]}
+        color={KIND_COLORS[item?.kind.toLowerCase() || DEPLOYMENT]}
       />
       <KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
         {item?.namespace}
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
index 2aa3dc664..e61fb01c6 100644
--- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx
+++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
@@ -33,7 +33,10 @@ export function SourceCard({ item, onClick, focus }: any) {
             {item.name}
           </KeyvalText>
         </ApplicationNameWrapper>
-        <KeyvalTag title={item.kind} color={KIND_COLORS[item.kind]} />
+        <KeyvalTag
+          title={item.kind}
+          color={KIND_COLORS[item.kind].toLowerCase()}
+        />
         <KeyvalText size={14} weight={400}>
           {`${item?.instances} ${SETUP.RUNNING_INSTANCES}`}
         </KeyvalText>
diff --git a/frontend/webapp/styles/global.tsx b/frontend/webapp/styles/global.tsx
index 67bd1e72b..74df89a53 100644
--- a/frontend/webapp/styles/global.tsx
+++ b/frontend/webapp/styles/global.tsx
@@ -1,5 +1,5 @@
 export const KIND_COLORS = {
   deployment: "#203548",
-  Deployment: "#203548",
-  DaemonSet: "#033869",
+  daemonSet: "#033869",
+  statefulset: "#0F2C3F",
 };

From d5fe6309cc3c1cc944629ddff242bd21eac54034 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 14:00:43 +0300
Subject: [PATCH 005/374] fixed pr comments

---
 .../sources/sources.manage.list/sources.manage.card.tsx     | 6 +++---
 frontend/webapp/containers/overview/sources/sources.tsx     | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
index d22c3e18e..c59ebf307 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -19,11 +19,11 @@ const LOGO_STYLE: React.CSSProperties = {
 };
 
 interface SourceManagedCardProps {
-  item: ManagedSource | null;
+  item: ManagedSource;
 }
 const DEPLOYMENT = "deployment";
 export default function SourceManagedCard({
-  item = null,
+  item = {} as ManagedSource,
 }: SourceManagedCardProps) {
   return (
     <CardWrapper>
@@ -38,7 +38,7 @@ export default function SourceManagedCard({
         {item?.name}
       </KeyvalText>
       <KeyvalTag
-        title={"item.kind"}
+        title={item?.kind || ""}
         color={KIND_COLORS[item?.kind.toLowerCase() || DEPLOYMENT]}
       />
       <KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 9164e2704..146e2849c 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -17,7 +17,6 @@ export function SourcesContainer() {
   if (isLoading) {
     return <KeyvalLoader />;
   }
-  console.log({ sources });
 
   return (
     <SourcesContainerWrapper>

From 55043486a3dec9bcf2fba8d26e9e3be7eea1192c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 14:33:49 +0300
Subject: [PATCH 006/374] sources list display

---
 .../sources.manage.card.tsx                   |  4 +-
 .../sources.manage.list.tsx                   | 43 ++++++++++++-------
 .../sources.manage.styled.tsx                 | 15 ++++---
 .../overview/sources/sources.styled.tsx       |  2 +-
 .../containers/overview/sources/sources.tsx   |  2 +-
 5 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
index c59ebf307..09327bf95 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -28,7 +28,7 @@ export default function SourceManagedCard({
   return (
     <CardWrapper>
       <KeyvalImage
-        src={SOURCES_LOGOS[item?.languages[0].language || ""]}
+        src={SOURCES_LOGOS[item?.languages?.[0].language || ""]}
         width={56}
         height={56}
         style={LOGO_STYLE}
@@ -39,7 +39,7 @@ export default function SourceManagedCard({
       </KeyvalText>
       <KeyvalTag
         title={item?.kind || ""}
-        color={KIND_COLORS[item?.kind.toLowerCase() || DEPLOYMENT]}
+        color={KIND_COLORS[item?.kind?.toLowerCase() || DEPLOYMENT]}
       />
       <KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
         {item?.namespace}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
index 9d7b4bded..143798d1d 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -1,24 +1,35 @@
 import React from "react";
-import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled";
+import {
+  ManagedListWrapper,
+  EmptyListWrapper,
+  ManagedContainer,
+} from "./sources.manage.styled";
 import Empty from "@/assets/images/empty-list.svg";
 import SourceManagedCard from "./sources.manage.card";
+import { ManagedSource } from "@/types/sources";
+import { KeyvalText } from "@/design.system";
+import { OVERVIEW } from "@/utils/constants";
 
-export function SourcesManagedList({ data = [1, 1, 1, 1] }) {
-  function renderDestinations() {
-    return data.map((source: any) => <SourceManagedCard />);
+interface SourcesManagedListProps {
+  data: ManagedSource[];
+}
+
+export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
+  function renderSources() {
+    return data.map((source: ManagedSource) => (
+      <SourceManagedCard item={source} />
+    ));
   }
 
-  return (
-    <>
-      <ManagedListWrapper>
-        {data?.length === 0 ? (
-          <EmptyListWrapper>
-            <Empty />
-          </EmptyListWrapper>
-        ) : (
-          renderDestinations()
-        )}
-      </ManagedListWrapper>
-    </>
+  return data?.length === 0 ? (
+    <EmptyListWrapper>
+      <Empty />
+    </EmptyListWrapper>
+  ) : (
+    <ManagedContainer>
+      <KeyvalText>{`${data.length} ${OVERVIEW.MENU.SOURCES}`}</KeyvalText>
+      <br />
+      <ManagedListWrapper>{renderSources()}</ManagedListWrapper>
+    </ManagedContainer>
   );
 }
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index cb4f81c3a..12350c2a4 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -12,10 +12,10 @@ export const CardWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 10px;
-  cursor: pointer;
+  /* cursor: pointer;
   &:hover {
     background: var(--dark-mode-dark-1, #07111a81);
-  }
+  } */
 `;
 
 export const EmptyListWrapper = styled.div`
@@ -27,12 +27,17 @@ export const EmptyListWrapper = styled.div`
 `;
 
 export const ManagedListWrapper = styled.div`
-  width: 100%;
+  height: 80%;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
+  padding: 0 36px 0 0;
   overflow-y: scroll;
+`;
+
+export const ManagedContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  margin-top: 120px;
   padding: 0px 36px;
-  padding-bottom: 50px;
-  margin-top: 88px;
 `;
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
index 4c8ff6466..c361682ec 100644
--- a/frontend/webapp/containers/overview/sources/sources.styled.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -3,5 +3,5 @@ import styled from "styled-components";
 export const SourcesContainerWrapper = styled.div`
   height: 100vh;
   width: 100%;
-  overflow-y: scroll;
+  overflow: hidden;
 `;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 146e2849c..784be7026 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -21,7 +21,7 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <SourcesManagedList />
+      <SourcesManagedList data={sources} />
     </SourcesContainerWrapper>
   );
 }

From ae80c0a3abf1c0cf597ea4ef49898ac2dd0055ac Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 14:54:49 +0300
Subject: [PATCH 007/374] change image url to cloud front

---
 .../assets/images/sources.card/sources.card.tsx      | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/assets/images/sources.card/sources.card.tsx b/frontend/webapp/assets/images/sources.card/sources.card.tsx
index 2316a3529..6cbc10d4c 100644
--- a/frontend/webapp/assets/images/sources.card/sources.card.tsx
+++ b/frontend/webapp/assets/images/sources.card/sources.card.tsx
@@ -1,7 +1,9 @@
+const BASE_URL = "https://d1n7d4xz7fr8b4.cloudfront.net/";
+
 export const SOURCES_LOGOS = {
-  java: "https://odigos-sources.s3.amazonaws.com/java.svg",
-  go: "https://odigos-sources.s3.amazonaws.com/go.svg",
-  javascript: "https://odigos-sources.s3.amazonaws.com/nodejs.svg",
-  python: "https://odigos-sources.s3.amazonaws.com/python.svg",
-  dotnet: "https://odigos-sources.s3.amazonaws.com/dotnet.svg",
+  java: `${BASE_URL}java.svg`,
+  go: `${BASE_URL}go.svg`,
+  javascript: `${BASE_URL}nodejs.svg`,
+  python: `${BASE_URL}python.svg`,
+  dotnet: `${BASE_URL}dotnet.svg`,
 };

From 79f2c537aff57792f29c1d74ee3b51253c7950d8 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 15:24:09 +0300
Subject: [PATCH 008/374] fixed pr comments

---
 frontend/webapp/assets/images/index.tsx                       | 2 +-
 frontend/webapp/assets/images/sources.card/sources.card.tsx   | 2 +-
 .../sources/sources.manage.list/sources.manage.card.tsx       | 4 ++--
 .../sources/sources.manage.list/sources.manage.list.tsx       | 2 +-
 .../components/setup/sources/source.card/source.card.tsx      | 2 +-
 frontend/webapp/styles/global.tsx                             | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/webapp/assets/images/index.tsx b/frontend/webapp/assets/images/index.tsx
index 9e85a0357..7f87c490b 100644
--- a/frontend/webapp/assets/images/index.tsx
+++ b/frontend/webapp/assets/images/index.tsx
@@ -1 +1 @@
-export { SOURCES_LOGOS } from "./sources.card/sources.card";
+export { LANGUAGES_LOGOS } from "./sources.card/sources.card";
diff --git a/frontend/webapp/assets/images/sources.card/sources.card.tsx b/frontend/webapp/assets/images/sources.card/sources.card.tsx
index 6cbc10d4c..ac83faf6f 100644
--- a/frontend/webapp/assets/images/sources.card/sources.card.tsx
+++ b/frontend/webapp/assets/images/sources.card/sources.card.tsx
@@ -1,6 +1,6 @@
 const BASE_URL = "https://d1n7d4xz7fr8b4.cloudfront.net/";
 
-export const SOURCES_LOGOS = {
+export const LANGUAGES_LOGOS = {
   java: `${BASE_URL}java.svg`,
   go: `${BASE_URL}go.svg`,
   javascript: `${BASE_URL}nodejs.svg`,
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
index 09327bf95..1aa8f559b 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -3,7 +3,7 @@ import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system";
 import { CardWrapper } from "./sources.manage.styled";
 import theme from "@/styles/palette";
 import { KIND_COLORS } from "@/styles/global";
-import { SOURCES_LOGOS } from "@/assets/images";
+import { LANGUAGES_LOGOS } from "@/assets/images";
 import { ManagedSource } from "@/types/sources";
 
 const TEXT_STYLE: React.CSSProperties = {
@@ -28,7 +28,7 @@ export default function SourceManagedCard({
   return (
     <CardWrapper>
       <KeyvalImage
-        src={SOURCES_LOGOS[item?.languages?.[0].language || ""]}
+        src={LANGUAGES_LOGOS[item?.languages?.[0].language || ""]}
         width={56}
         height={56}
         style={LOGO_STYLE}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
index 143798d1d..fa63eda5a 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -21,7 +21,7 @@ export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
     ));
   }
 
-  return data?.length === 0 ? (
+  return data.length === 0 ? (
     <EmptyListWrapper>
       <Empty />
     </EmptyListWrapper>
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
index e61fb01c6..44e56dd19 100644
--- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx
+++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
@@ -35,7 +35,7 @@ export function SourceCard({ item, onClick, focus }: any) {
         </ApplicationNameWrapper>
         <KeyvalTag
           title={item.kind}
-          color={KIND_COLORS[item.kind].toLowerCase()}
+          color={KIND_COLORS[item.kind.toLowerCase()]}
         />
         <KeyvalText size={14} weight={400}>
           {`${item?.instances} ${SETUP.RUNNING_INSTANCES}`}
diff --git a/frontend/webapp/styles/global.tsx b/frontend/webapp/styles/global.tsx
index 74df89a53..1f138e123 100644
--- a/frontend/webapp/styles/global.tsx
+++ b/frontend/webapp/styles/global.tsx
@@ -1,5 +1,5 @@
 export const KIND_COLORS = {
   deployment: "#203548",
-  daemonSet: "#033869",
+  daemonset: "#033869",
   statefulset: "#0F2C3F",
 };

From 5fffc40d44a40588873cc390eb8cca6099cfb3bb Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 16:03:56 +0300
Subject: [PATCH 009/374] add new action menu

---
 frontend/webapp/components/overview/index.tsx |  1 +
 .../sources.action.menu.styled.tsx            | 12 +++++++++
 .../action.menu/sources.action.menu.tsx       | 25 +++++++++++++++++++
 .../sources.manage.styled.tsx                 |  3 +--
 .../overview/sources/sources.styled.tsx       |  4 +++
 .../containers/overview/sources/sources.tsx   | 12 +++++++--
 frontend/webapp/utils/constants/string.tsx    |  1 +
 7 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
 create mode 100644 frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx

diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index 799574495..d6c9f8384 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -2,3 +2,4 @@ export { OverviewHeader } from "./overview.header/overview.header";
 export { ManageDestination } from "./destination/manage.destination/manage.destination";
 export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list";
 export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list";
+export { SourcesActionMenu } from "./sources/action.menu/sources.action.menu";
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
new file mode 100644
index 000000000..9d6007d42
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const SourcesMenuWrapper = styled.div`
+  width: 100%;
+  height: 68px;
+  padding-top: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const InputsWrapper = styled.div``;
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
new file mode 100644
index 000000000..2f373f499
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import {
+  InputsWrapper,
+  SourcesMenuWrapper,
+} from "./sources.action.menu.styled";
+import { KeyvalButton, KeyvalText } from "@/design.system";
+import { Plus } from "@/assets/icons/overview";
+import { OVERVIEW } from "@/utils/constants";
+import theme from "@/styles/palette";
+const BUTTON_STYLES = { gap: 10, height: 40 };
+export function SourcesActionMenu() {
+  return (
+    <SourcesMenuWrapper>
+      <InputsWrapper>
+        <Plus />
+      </InputsWrapper>
+      <KeyvalButton style={BUTTON_STYLES}>
+        <Plus />
+        <KeyvalText size={16} weight={700} color={theme.text.dark_button}>
+          {OVERVIEW.ADD_NEW_SOURCE}
+        </KeyvalText>
+      </KeyvalButton>
+    </SourcesMenuWrapper>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index 12350c2a4..ffbdffed2 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -27,7 +27,7 @@ export const EmptyListWrapper = styled.div`
 `;
 
 export const ManagedListWrapper = styled.div`
-  height: 80%;
+  height: 75%;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
@@ -38,6 +38,5 @@ export const ManagedListWrapper = styled.div`
 export const ManagedContainer = styled.div`
   width: 100%;
   height: 100%;
-  margin-top: 120px;
   padding: 0px 36px;
 `;
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
index c361682ec..d65459093 100644
--- a/frontend/webapp/containers/overview/sources/sources.styled.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -5,3 +5,7 @@ export const SourcesContainerWrapper = styled.div`
   width: 100%;
   overflow: hidden;
 `;
+
+export const MenuWrapper = styled.div`
+  padding: 0 32px;
+`;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 784be7026..256c57981 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -4,8 +4,12 @@ import { KeyvalLoader } from "@/design.system";
 import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
-import { OverviewHeader, SourcesManagedList } from "@/components/overview";
-import { SourcesContainerWrapper } from "./sources.styled";
+import {
+  OverviewHeader,
+  SourcesActionMenu,
+  SourcesManagedList,
+} from "@/components/overview";
+import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled";
 
 export function SourcesContainer() {
   const {
@@ -21,6 +25,10 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <MenuWrapper>
+        <SourcesActionMenu />
+      </MenuWrapper>
+
       <SourcesManagedList data={sources} />
     </SourcesContainerWrapper>
   );
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index b16b6a9eb..8591b7e1a 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -62,6 +62,7 @@ export const OVERVIEW = {
     SOURCES: "Sources",
     DESTINATIONS: "Destinations",
   },
+  ADD_NEW_SOURCE: "Add New Source",
   ADD_NEW_DESTINATION: "Add New Destination",
   DESTINATION_UPDATE_SUCCESS: "Destination updated successfully",
   DESTINATION_CREATED_SUCCESS: "Destination created successfully",

From 18cd5c427a5c29f2d22d0cfaf08e0e9f770203d2 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 17:25:10 +0300
Subject: [PATCH 010/374] on add btn click

---
 .../sources.action.menu.styled.tsx            |  3 +--
 .../action.menu/sources.action.menu.tsx       | 12 ++++-----
 .../overview/sources/new.source.flow.tsx      | 27 +++++++++++++++++++
 .../overview/sources/sources.styled.tsx       | 14 ++++++++++
 .../containers/overview/sources/sources.tsx   | 24 ++++++++++++-----
 5 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 frontend/webapp/containers/overview/sources/new.source.flow.tsx

diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index 9d6007d42..610dedddb 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -2,10 +2,9 @@ import styled from "styled-components";
 
 export const SourcesMenuWrapper = styled.div`
   width: 100%;
-  height: 68px;
+  margin-top: 32px;
   padding-top: 88px;
   display: flex;
-  align-items: center;
   justify-content: space-between;
 `;
 
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
index 2f373f499..7d13296f9 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
@@ -7,14 +7,14 @@ import { KeyvalButton, KeyvalText } from "@/design.system";
 import { Plus } from "@/assets/icons/overview";
 import { OVERVIEW } from "@/utils/constants";
 import theme from "@/styles/palette";
-const BUTTON_STYLES = { gap: 10, height: 40 };
-export function SourcesActionMenu() {
+
+const BUTTON_STYLES = { gap: 10, height: 36 };
+
+export function SourcesActionMenu({ onAddClick }) {
   return (
     <SourcesMenuWrapper>
-      <InputsWrapper>
-        <Plus />
-      </InputsWrapper>
-      <KeyvalButton style={BUTTON_STYLES}>
+      <InputsWrapper></InputsWrapper>
+      <KeyvalButton onClick={onAddClick} style={BUTTON_STYLES}>
         <Plus />
         <KeyvalText size={16} weight={700} color={theme.text.dark_button}>
           {OVERVIEW.ADD_NEW_SOURCE}
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
new file mode 100644
index 000000000..79657962d
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { useSectionData } from "@/hooks";
+import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled";
+import { SourcesSection } from "@/containers/setup/sources/sources.section";
+import { KeyvalButton, KeyvalText } from "@/design.system";
+import theme from "@/styles/palette";
+import { SETUP } from "@/utils/constants";
+
+export function NewSourceFlow() {
+  const { sectionData, setSectionData, totalSelected } = useSectionData({});
+  return (
+    <SourcesSectionWrapper>
+      <ButtonWrapper>
+        <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
+        <KeyvalButton style={{ width: 110 }}>
+          <KeyvalText weight={600} color={theme.text.dark_button}>
+            Connect
+          </KeyvalText>
+        </KeyvalButton>
+      </ButtonWrapper>
+      <SourcesSection
+        sectionData={sectionData}
+        setSectionData={setSectionData}
+      />
+    </SourcesSectionWrapper>
+  );
+}
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
index d65459093..c3fa07df0 100644
--- a/frontend/webapp/containers/overview/sources/sources.styled.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -9,3 +9,17 @@ export const SourcesContainerWrapper = styled.div`
 export const MenuWrapper = styled.div`
   padding: 0 32px;
 `;
+
+export const SourcesSectionWrapper = styled(MenuWrapper)`
+  margin-top: 88px;
+  position: relative;
+`;
+
+export const ButtonWrapper = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  right: 32px;
+  top: 40px;
+`;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 256c57981..1849c2c33 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { KeyvalLoader } from "@/design.system";
 import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
@@ -10,14 +10,21 @@ import {
   SourcesManagedList,
 } from "@/components/overview";
 import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled";
+import { NewSourceFlow } from "./new.source.flow";
 
 export function SourcesContainer() {
+  const [newFlow, setNewFlow] = useState(false);
+
   const {
     data: sources,
     refetch,
     isLoading,
   } = useQuery([QUERIES.API_SOURCES], getSources);
 
+  function renderNewSourceFlow() {
+    return <NewSourceFlow />;
+  }
+
   if (isLoading) {
     return <KeyvalLoader />;
   }
@@ -25,11 +32,16 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <MenuWrapper>
-        <SourcesActionMenu />
-      </MenuWrapper>
-
-      <SourcesManagedList data={sources} />
+      {newFlow ? (
+        renderNewSourceFlow()
+      ) : (
+        <>
+          <MenuWrapper>
+            <SourcesActionMenu onAddClick={() => setNewFlow(true)} />
+          </MenuWrapper>
+          <SourcesManagedList data={sources} />
+        </>
+      )}
     </SourcesContainerWrapper>
   );
 }

From ab642bdbe3c4b4eeed1ac9442365f2ed0a56a81d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 30 Jul 2023 17:30:19 +0300
Subject: [PATCH 011/374] WIP

---
 .../overview/sources/new.source.flow.tsx      |  1 +
 .../containers/overview/sources/sources.tsx   | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index 79657962d..c77035124 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -8,6 +8,7 @@ import { SETUP } from "@/utils/constants";
 
 export function NewSourceFlow() {
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
+
   return (
     <SourcesSectionWrapper>
       <ButtonWrapper>
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 1849c2c33..2d3af77cb 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -13,7 +13,7 @@ import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled";
 import { NewSourceFlow } from "./new.source.flow";
 
 export function SourcesContainer() {
-  const [newFlow, setNewFlow] = useState(false);
+  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false);
 
   const {
     data: sources,
@@ -25,6 +25,17 @@ export function SourcesContainer() {
     return <NewSourceFlow />;
   }
 
+  function renderSources() {
+    return (
+      <>
+        <MenuWrapper>
+          <SourcesActionMenu onAddClick={() => setDisplayNewSourceFlow(true)} />
+        </MenuWrapper>
+        <SourcesManagedList data={sources} />
+      </>
+    );
+  }
+
   if (isLoading) {
     return <KeyvalLoader />;
   }
@@ -32,16 +43,7 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      {newFlow ? (
-        renderNewSourceFlow()
-      ) : (
-        <>
-          <MenuWrapper>
-            <SourcesActionMenu onAddClick={() => setNewFlow(true)} />
-          </MenuWrapper>
-          <SourcesManagedList data={sources} />
-        </>
-      )}
+      {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
     </SourcesContainerWrapper>
   );
 }

From 64c31c44236c0a8b9e0c0e9c88761fbc0cab26db Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 10:04:00 +0300
Subject: [PATCH 012/374] restructe source filter option

---
 .../action.sources.options.tsx                | 45 +++++++++++
 .../filter.sources.options.tsx                | 32 ++++++++
 .../sources.option.menu.styled.tsx            |  4 +
 .../sources.option.menu.tsx                   | 76 ++++---------------
 .../overview/sources/new.source.flow.tsx      | 27 ++++++-
 5 files changed, 120 insertions(+), 64 deletions(-)
 create mode 100644 frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx
 create mode 100644 frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx

diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx
new file mode 100644
index 000000000..41df23b50
--- /dev/null
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import { CheckboxWrapper, SwitcherWrapper } from "./sources.option.menu.styled";
+import { KeyvalCheckbox, KeyvalSwitch, KeyvalTooltip } from "@/design.system";
+import { SETUP } from "@/utils/constants";
+
+export function ActionSourcesOptions({
+  onSelectAllChange,
+  selectedApplications,
+  currentNamespace,
+  onFutureApplyChange,
+}: any) {
+  const [checked, setChecked] = useState(false);
+  const [toggle, setToggle] = useState(false);
+
+  useEffect(() => {
+    setToggle(selectedApplications[currentNamespace?.name]?.selected_all);
+    setChecked(selectedApplications[currentNamespace?.name]?.future_selected);
+  }, [currentNamespace, selectedApplications]);
+
+  const handleToggleChange = () => {
+    onSelectAllChange(!toggle);
+    setToggle(!toggle);
+  };
+
+  return (
+    <>
+      <SwitcherWrapper>
+        <KeyvalSwitch
+          label={SETUP.MENU.SELECT_ALL}
+          toggle={toggle}
+          handleToggleChange={handleToggleChange}
+        />
+      </SwitcherWrapper>
+      <CheckboxWrapper>
+        <KeyvalCheckbox
+          label={SETUP.MENU.FUTURE_APPLY}
+          value={checked}
+          onChange={() => onFutureApplyChange(!checked)}
+          disabled={!toggle}
+        />
+        <KeyvalTooltip content={SETUP.MENU.TOOLTIP} />
+      </CheckboxWrapper>
+    </>
+  );
+}
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
new file mode 100644
index 000000000..d39fa2e7a
--- /dev/null
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { DropdownWrapper } from "./sources.option.menu.styled";
+import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from "@/design.system";
+import { SETUP } from "@/utils/constants";
+
+export function FilterSourcesOptions({
+  setCurrentItem,
+  data,
+  searchFilter,
+  setSearchFilter,
+}: any) {
+  function handleDropDownChange(item: any) {
+    setCurrentItem({ id: item?.id, name: item.label });
+  }
+
+  return (
+    <>
+      <KeyvalSearchInput
+        value={searchFilter}
+        onChange={(e) => setSearchFilter(e.target.value)}
+      />
+      <DropdownWrapper>
+        <KeyvalText size={14}>{SETUP.MENU.NAMESPACES}</KeyvalText>
+        <KeyvalDropDown
+          value={data[0]}
+          data={data}
+          onChange={handleDropDownChange}
+        />
+      </DropdownWrapper>
+    </>
+  );
+}
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
index ea3d424b1..8add463bc 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
@@ -5,6 +5,10 @@ export const SourcesOptionMenuWrapper = styled.section`
   align-items: center;
   gap: 24px;
   padding: 40px 0 0 0;
+  @media screen and (max-width: 1400px) {
+    flex-wrap: wrap;
+    width: 90%;
+  }
 `;
 
 export const DropdownWrapper = styled.div`
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx
index 090e3b7e8..978a69c40 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx
@@ -1,19 +1,7 @@
-import React, { useEffect, useState } from "react";
-import {
-  DropdownWrapper,
-  SourcesOptionMenuWrapper,
-  CheckboxWrapper,
-  SwitcherWrapper,
-} from "./sources.option.menu.styled";
-import {
-  KeyvalCheckbox,
-  KeyvalDropDown,
-  KeyvalSearchInput,
-  KeyvalSwitch,
-  KeyvalText,
-  KeyvalTooltip,
-} from "@/design.system";
-import { SETUP } from "@/utils/constants";
+import React from "react";
+import { SourcesOptionMenuWrapper } from "./sources.option.menu.styled";
+import { FilterSourcesOptions } from "./filter.sources.options";
+import { ActionSourcesOptions } from "./action.sources.options";
 
 export function SourcesOptionMenu({
   setCurrentItem,
@@ -25,54 +13,20 @@ export function SourcesOptionMenu({
   currentNamespace,
   onFutureApplyChange,
 }: any) {
-  const [checked, setChecked] = useState(false);
-  const [toggle, setToggle] = useState(false);
-
-  useEffect(() => {
-    setToggle(selectedApplications[currentNamespace?.name]?.selected_all);
-    setChecked(selectedApplications[currentNamespace?.name]?.future_selected);
-  }, [currentNamespace, selectedApplications]);
-
-  const handleToggleChange = () => {
-    onSelectAllChange(!toggle);
-    setToggle(!toggle);
-  };
-
-  function handleDropDownChange(item: any) {
-    setCurrentItem({ id: item?.id, name: item.label });
-  }
-
   return (
     <SourcesOptionMenuWrapper>
-      <KeyvalSearchInput
-        value={searchFilter}
-        onChange={(e) => setSearchFilter(e.target.value)}
+      <FilterSourcesOptions
+        setCurrentItem={setCurrentItem}
+        data={data}
+        searchFilter={searchFilter}
+        setSearchFilter={setSearchFilter}
+      />
+      <ActionSourcesOptions
+        currentNamespace={currentNamespace}
+        onSelectAllChange={onSelectAllChange}
+        selectedApplications={selectedApplications}
+        onFutureApplyChange={onFutureApplyChange}
       />
-
-      <DropdownWrapper>
-        <KeyvalText size={14}>{SETUP.MENU.NAMESPACES}</KeyvalText>
-        <KeyvalDropDown
-          value={data[0]}
-          data={data}
-          onChange={handleDropDownChange}
-        />
-      </DropdownWrapper>
-      <SwitcherWrapper>
-        <KeyvalSwitch
-          label={SETUP.MENU.SELECT_ALL}
-          toggle={toggle}
-          handleToggleChange={handleToggleChange}
-        />
-      </SwitcherWrapper>
-      <CheckboxWrapper>
-        <KeyvalCheckbox
-          label={SETUP.MENU.FUTURE_APPLY}
-          value={checked}
-          onChange={() => onFutureApplyChange(!checked)}
-          disabled={!toggle}
-        />
-        <KeyvalTooltip content={SETUP.MENU.TOOLTIP} />
-      </CheckboxWrapper>
     </SourcesOptionMenuWrapper>
   );
 }
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index c77035124..a43290b5e 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -1,19 +1,39 @@
 import React from "react";
-import { useSectionData } from "@/hooks";
+import { useNotification, useSectionData } from "@/hooks";
 import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled";
 import { SourcesSection } from "@/containers/setup/sources/sources.section";
 import { KeyvalButton, KeyvalText } from "@/design.system";
 import theme from "@/styles/palette";
-import { SETUP } from "@/utils/constants";
+import { NOTIFICATION, SETUP } from "@/utils/constants";
+import { useMutation } from "react-query";
+import { setNamespaces } from "@/services";
 
 export function NewSourceFlow() {
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
+  const { mutate } = useMutation((body) => setNamespaces(body));
+  const { show, Notification } = useNotification();
+
+  function handleNewSource() {
+    mutate(sectionData, {
+      onSuccess: () => {
+        setSectionData({});
+      },
+      onError: ({ response }) => {
+        const message = response?.data?.message || SETUP.ERROR;
+        console.log({ response });
+        show({
+          type: NOTIFICATION.ERROR,
+          message,
+        });
+      },
+    });
+  }
 
   return (
     <SourcesSectionWrapper>
       <ButtonWrapper>
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
-        <KeyvalButton style={{ width: 110 }}>
+        <KeyvalButton onClick={handleNewSource} style={{ width: 110 }}>
           <KeyvalText weight={600} color={theme.text.dark_button}>
             Connect
           </KeyvalText>
@@ -23,6 +43,7 @@ export function NewSourceFlow() {
         sectionData={sectionData}
         setSectionData={setSectionData}
       />
+      <Notification />
     </SourcesSectionWrapper>
   );
 }

From 419228952ded21b560939783bef3419e44296a52 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 11:19:08 +0300
Subject: [PATCH 013/374] filters

---
 .../sources.action.menu.styled.tsx            |  7 +-
 .../action.menu/sources.action.menu.tsx       | 18 ++++-
 .../filter.sources.options.tsx                |  9 ++-
 .../sources.option.menu.styled.tsx            |  7 ++
 .../overview/sources/manage.sources.tsx       | 78 +++++++++++++++++++
 .../containers/overview/sources/sources.tsx   | 33 ++------
 .../design.system/drop.down/drop.down.tsx     |  4 +
 7 files changed, 121 insertions(+), 35 deletions(-)
 create mode 100644 frontend/webapp/containers/overview/sources/manage.sources.tsx

diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index 610dedddb..dbf2e0d97 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -2,10 +2,13 @@ import styled from "styled-components";
 
 export const SourcesMenuWrapper = styled.div`
   width: 100%;
-  margin-top: 32px;
+  margin: 32px 0;
   padding-top: 88px;
   display: flex;
   justify-content: space-between;
 `;
 
-export const InputsWrapper = styled.div``;
+export const InputsWrapper = styled.div`
+  display: flex;
+  gap: 16px;
+`;
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
index 7d13296f9..bc1b0faa8 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
@@ -7,13 +7,27 @@ import { KeyvalButton, KeyvalText } from "@/design.system";
 import { Plus } from "@/assets/icons/overview";
 import { OVERVIEW } from "@/utils/constants";
 import theme from "@/styles/palette";
+import { FilterSourcesOptions } from "@/components/setup/sources/sources.option.menu/filter.sources.options";
 
 const BUTTON_STYLES = { gap: 10, height: 36 };
 
-export function SourcesActionMenu({ onAddClick }) {
+export function SourcesActionMenu({
+  onAddClick,
+  setCurrentItem,
+  data = [],
+  searchFilter,
+  setSearchFilter,
+}) {
   return (
     <SourcesMenuWrapper>
-      <InputsWrapper></InputsWrapper>
+      <InputsWrapper>
+        <FilterSourcesOptions
+          data={data}
+          setCurrentItem={setCurrentItem}
+          searchFilter={searchFilter}
+          setSearchFilter={setSearchFilter}
+        />
+      </InputsWrapper>
       <KeyvalButton onClick={onAddClick} style={BUTTON_STYLES}>
         <Plus />
         <KeyvalText size={16} weight={700} color={theme.text.dark_button}>
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
index d39fa2e7a..9b5934c2b 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
@@ -1,5 +1,8 @@
 import React from "react";
-import { DropdownWrapper } from "./sources.option.menu.styled";
+import {
+  DropdownWrapper,
+  FilterMenuWrapper,
+} from "./sources.option.menu.styled";
 import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from "@/design.system";
 import { SETUP } from "@/utils/constants";
 
@@ -14,7 +17,7 @@ export function FilterSourcesOptions({
   }
 
   return (
-    <>
+    <FilterMenuWrapper>
       <KeyvalSearchInput
         value={searchFilter}
         onChange={(e) => setSearchFilter(e.target.value)}
@@ -27,6 +30,6 @@ export function FilterSourcesOptions({
           onChange={handleDropDownChange}
         />
       </DropdownWrapper>
-    </>
+    </FilterMenuWrapper>
   );
 }
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
index 8add463bc..33ae15b5f 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
@@ -5,6 +5,13 @@ export const SourcesOptionMenuWrapper = styled.section`
   align-items: center;
   gap: 24px;
   padding: 40px 0 0 0;
+`;
+
+export const FilterMenuWrapper = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+
   @media screen and (max-width: 1400px) {
     flex-wrap: wrap;
     width: 90%;
diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx
new file mode 100644
index 000000000..85fbef48e
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx
@@ -0,0 +1,78 @@
+"use client";
+import React, { useEffect, useMemo, useState } from "react";
+import { KeyvalLoader } from "@/design.system";
+import { QUERIES } from "@/utils/constants";
+import { useQuery } from "react-query";
+import { getNamespaces, getSources } from "@/services";
+import { SourcesActionMenu, SourcesManagedList } from "@/components/overview";
+import { MenuWrapper } from "./sources.styled";
+import { ManagedSource } from "@/types/sources";
+
+export function ManageSources({ setDisplayNewSourceFlow }) {
+  const [searchFilter, setSearchFilter] = useState<string>("");
+  const [currentNamespace, setCurrentNamespace] = useState<any>(null);
+
+  const { data: namespaces } = useQuery(
+    [QUERIES.API_NAMESPACES],
+    getNamespaces
+  );
+
+  useEffect(() => {
+    setSearchFilter("");
+  }, [currentNamespace]);
+
+  const namespacesList = useMemo(
+    () =>
+      namespaces?.namespaces?.map((item: any, index: number) => ({
+        id: index,
+        label: item.name,
+      })),
+    [namespaces]
+  );
+
+  const {
+    data: sources,
+    refetch,
+    isLoading,
+  } = useQuery([QUERIES.API_SOURCES], getSources);
+
+  function filterByNamespace() {
+    return currentNamespace
+      ? sources?.filter(
+          (item: ManagedSource) => item.namespace === currentNamespace.name
+        )
+      : sources;
+  }
+
+  function filterBySearchQuery(data) {
+    return searchFilter
+      ? data?.filter((item: ManagedSource) =>
+          item.name.toLowerCase().includes(searchFilter.toLowerCase())
+        )
+      : data;
+  }
+
+  function filterSources() {
+    let data = filterByNamespace();
+    return filterBySearchQuery(data);
+  }
+
+  if (isLoading) {
+    return <KeyvalLoader />;
+  }
+
+  return (
+    <>
+      <MenuWrapper>
+        <SourcesActionMenu
+          searchFilter={searchFilter}
+          setSearchFilter={setSearchFilter}
+          data={namespacesList}
+          onAddClick={() => setDisplayNewSourceFlow(true)}
+          setCurrentItem={setCurrentNamespace}
+        />
+      </MenuWrapper>
+      <SourcesManagedList data={filterSources()} />
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 2d3af77cb..d48cacf72 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,43 +1,20 @@
 "use client";
 import React, { useState } from "react";
-import { KeyvalLoader } from "@/design.system";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
-import { useQuery } from "react-query";
-import { getSources } from "@/services";
-import {
-  OverviewHeader,
-  SourcesActionMenu,
-  SourcesManagedList,
-} from "@/components/overview";
-import { SourcesContainerWrapper, MenuWrapper } from "./sources.styled";
+import { OVERVIEW } from "@/utils/constants";
+import { OverviewHeader } from "@/components/overview";
+import { SourcesContainerWrapper } from "./sources.styled";
 import { NewSourceFlow } from "./new.source.flow";
+import { ManageSources } from "./manage.sources";
 
 export function SourcesContainer() {
   const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false);
 
-  const {
-    data: sources,
-    refetch,
-    isLoading,
-  } = useQuery([QUERIES.API_SOURCES], getSources);
-
   function renderNewSourceFlow() {
     return <NewSourceFlow />;
   }
 
   function renderSources() {
-    return (
-      <>
-        <MenuWrapper>
-          <SourcesActionMenu onAddClick={() => setDisplayNewSourceFlow(true)} />
-        </MenuWrapper>
-        <SourcesManagedList data={sources} />
-      </>
-    );
-  }
-
-  if (isLoading) {
-    return <KeyvalLoader />;
+    return <ManageSources setDisplayNewSourceFlow={setDisplayNewSourceFlow} />;
   }
 
   return (
diff --git a/frontend/webapp/design.system/drop.down/drop.down.tsx b/frontend/webapp/design.system/drop.down/drop.down.tsx
index 78cf1bb68..201b176b4 100644
--- a/frontend/webapp/design.system/drop.down/drop.down.tsx
+++ b/frontend/webapp/design.system/drop.down/drop.down.tsx
@@ -44,6 +44,10 @@ export function KeyvalDropDown({
 
   const containerRef = useRef<any>(null);
 
+  useEffect(() => {
+    value && setSelectedItem(value);
+  }, [value]);
+
   useEffect(() => {
     document.addEventListener("click", handleClickOutside, true);
     return () => {

From 1006d4436a6f5ea65e293a1066baff3bf5bdf04b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 11:50:14 +0300
Subject: [PATCH 014/374] WIP

---
 .../destination.list.styled.tsx               |  1 -
 .../overview.header/overview.header.tsx       | 27 ++++++++++++++-----
 .../sources.action.menu.styled.tsx            |  1 -
 .../destination/destination.styled.tsx        |  1 -
 .../overview/overview/overview.styled.tsx     |  1 -
 .../overview/sources/new.source.flow.tsx      |  4 +--
 .../overview/sources/sources.styled.tsx       |  1 -
 frontend/webapp/utils/constants/string.tsx    |  1 +
 8 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index 2ed90d51b..c06fdca16 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -15,7 +15,6 @@ export const MenuWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 20px 36px;
-  margin-top: 88px;
 `;
 
 export const CardWrapper = styled.div`
diff --git a/frontend/webapp/components/overview/overview.header/overview.header.tsx b/frontend/webapp/components/overview/overview.header/overview.header.tsx
index aa0f9d3ff..a515ec21f 100644
--- a/frontend/webapp/components/overview/overview.header/overview.header.tsx
+++ b/frontend/webapp/components/overview/overview.header/overview.header.tsx
@@ -1,27 +1,42 @@
 import React from "react";
 import styled from "styled-components";
 import { KeyvalText } from "@/design.system";
+import { Back } from "@/assets/icons/overview";
+import { SETUP } from "@/utils/constants";
 
 export interface OverviewHeaderProps {
   title?: string;
-  onClick?: any;
+  onBackClick?: any;
   isDisabled?: boolean;
 }
 
 const OverviewHeaderContainer = styled.div`
-  position: fixed;
   display: flex;
+  flex-direction: column;
   width: 100%;
-  height: 88px;
-  align-items: center;
-  padding: 0 24px;
+  padding: 24px;
   border-bottom: 2px solid rgba(255, 255, 255, 0.08);
   background: ${({ theme }) => theme.colors.light_dark};
 `;
 
-export function OverviewHeader({ title }: OverviewHeaderProps) {
+const BackButtonWrapper = styled.div`
+  display: flex;
+  margin-bottom: 8px;
+  cursor: pointer;
+  p {
+    cursor: pointer !important;
+  }
+`;
+
+export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) {
   return (
     <OverviewHeaderContainer>
+      {onBackClick && (
+        <BackButtonWrapper onClick={onBackClick}>
+          <Back width={14} />
+          <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+        </BackButtonWrapper>
+      )}
       <KeyvalText size={32} weight={700}>
         {title}
       </KeyvalText>
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index dbf2e0d97..ee4c046ad 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 export const SourcesMenuWrapper = styled.div`
   width: 100%;
   margin: 32px 0;
-  padding-top: 88px;
   display: flex;
   justify-content: space-between;
 `;
diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx
index 7933933c5..fd3764d16 100644
--- a/frontend/webapp/containers/overview/destination/destination.styled.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx
@@ -8,7 +8,6 @@ export const DestinationContainerWrapper = styled.div`
 
 export const NewDestinationContainer = styled.div`
   padding: 20px 36px;
-  margin-top: 88px;
 `;
 
 export const ManageDestinationWrapper = styled.div`
diff --git a/frontend/webapp/containers/overview/overview/overview.styled.tsx b/frontend/webapp/containers/overview/overview/overview.styled.tsx
index 59d7a09d1..c152e7642 100644
--- a/frontend/webapp/containers/overview/overview/overview.styled.tsx
+++ b/frontend/webapp/containers/overview/overview/overview.styled.tsx
@@ -3,5 +3,4 @@ import styled from "styled-components";
 export const OverviewDataFlowWrapper = styled.div`
   width: 100%;
   height: 100%;
-  margin-top: 88px;
 `;
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index a43290b5e..77f763455 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -4,7 +4,7 @@ import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled";
 import { SourcesSection } from "@/containers/setup/sources/sources.section";
 import { KeyvalButton, KeyvalText } from "@/design.system";
 import theme from "@/styles/palette";
-import { NOTIFICATION, SETUP } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
 import { useMutation } from "react-query";
 import { setNamespaces } from "@/services";
 
@@ -35,7 +35,7 @@ export function NewSourceFlow() {
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
         <KeyvalButton onClick={handleNewSource} style={{ width: 110 }}>
           <KeyvalText weight={600} color={theme.text.dark_button}>
-            Connect
+            {OVERVIEW.CONNECT}
           </KeyvalText>
         </KeyvalButton>
       </ButtonWrapper>
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
index c3fa07df0..d07f83647 100644
--- a/frontend/webapp/containers/overview/sources/sources.styled.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -11,7 +11,6 @@ export const MenuWrapper = styled.div`
 `;
 
 export const SourcesSectionWrapper = styled(MenuWrapper)`
-  margin-top: 88px;
   position: relative;
 `;
 
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index 8591b7e1a..eb57020dd 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -74,6 +74,7 @@ export const OVERVIEW = {
   DELETE_MODAL_SUBTITLE:
     "This action cannot be undone. This will permanently delete the destination and all associated data.",
   DELETE_BUTTON: "I want to delete this destination",
+  CONNECT: "Connect",
 };
 
 export const NOTIFICATION = {

From 537aa7528d89a41c57f6bf53d2f72de720c1931f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 13:08:58 +0300
Subject: [PATCH 015/374] new back button

---
 .../manage.destination/manage.destination.tsx | 12 ++++++-----
 .../destination/new.destination.flow.tsx      | 20 ++++++++++---------
 .../containers/overview/sources/sources.tsx   |  7 ++++++-
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
index 6a1c0ecdd..d129dea5f 100644
--- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
@@ -11,7 +11,7 @@ import FormDangerZone from "./form.danger.zone";
 interface ManageDestinationProps {
   destinationType: DestinationType;
   selectedDestination: any;
-  onBackClick: () => void;
+  onBackClick?: () => void;
   onSubmit: (data: any) => void;
   onDelete?: () => void;
 }
@@ -34,10 +34,12 @@ export function ManageDestination({
 }: ManageDestinationProps) {
   return (
     <>
-      <BackButtonWrapper onClick={onBackClick}>
-        <Back width={14} />
-        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
-      </BackButtonWrapper>
+      {onBackClick && (
+        <BackButtonWrapper onClick={onBackClick}>
+          <Back width={14} />
+          <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+        </BackButtonWrapper>
+      )}
       <ManageDestinationHeader data={selectedDestination} />
       <CreateConnectionForm
         fields={destinationType?.fields}
diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
index 6a213f539..a2f674271 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -49,10 +49,6 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
         destinationType={destinationType}
         selectedDestination={sectionData}
         onSubmit={onSubmit}
-        onBackClick={() => {
-          setManaged(false);
-          setSectionData(null);
-        }}
       />
     );
   }
@@ -60,10 +56,6 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
   function renderSelectNewDestination() {
     return (
       <>
-        <BackButtonWrapper onClick={onBackClick}>
-          <Back width={14} />
-          <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
-        </BackButtonWrapper>
         <DestinationSection
           sectionData={sectionData}
           setSectionData={(data) => {
@@ -77,7 +69,17 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
 
   return (
     <>
-      <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
+      <OverviewHeader
+        title={OVERVIEW.MENU.DESTINATIONS}
+        onBackClick={
+          managed && sectionData
+            ? () => {
+                setManaged(false);
+                setSectionData(null);
+              }
+            : onBackClick
+        }
+      />
       <NewDestinationContainer>
         {managed && sectionData
           ? renderNewDestinationForm()
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index d48cacf72..58bc728b3 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -19,7 +19,12 @@ export function SourcesContainer() {
 
   return (
     <SourcesContainerWrapper>
-      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <OverviewHeader
+        title={OVERVIEW.MENU.SOURCES}
+        onBackClick={
+          displayNewSourceFlow ? () => setDisplayNewSourceFlow(false) : null
+        }
+      />
       {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
     </SourcesContainerWrapper>
   );

From ab32b46a5db9e8662c4dc012fd475117fa04fa07 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 13:13:30 +0300
Subject: [PATCH 016/374] WIP

---
 .../destination/new.destination.flow.tsx      | 31 +++++++------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
index a2f674271..7a75a32c0 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -1,24 +1,13 @@
 "use client";
 import React, { useState } from "react";
-import { KeyvalText } from "@/design.system";
-import { OVERVIEW, QUERIES, SETUP } from "@/utils/constants";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import { getDestination, setDestination } from "@/services";
 import { ManageDestination, OverviewHeader } from "@/components/overview";
 import { useSectionData } from "@/hooks";
 import { DestinationSection } from "@/containers/setup/destination/destination.section";
 import { NewDestinationContainer } from "./destination.styled";
-import { Back } from "@/assets/icons/overview";
-import { styled } from "styled-components";
 
-const BackButtonWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  p {
-    cursor: pointer !important;
-  }
-`;
 export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
   const { sectionData, setSectionData } = useSectionData(null);
   const [managed, setManaged] = useState<any>(null);
@@ -43,6 +32,15 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
     });
   }
 
+  function handleBackPress() {
+    if (managed && sectionData) {
+      setManaged(false);
+      setSectionData(null);
+      return;
+    }
+    onBackClick();
+  }
+
   function renderNewDestinationForm() {
     return (
       <ManageDestination
@@ -71,14 +69,7 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
     <>
       <OverviewHeader
         title={OVERVIEW.MENU.DESTINATIONS}
-        onBackClick={
-          managed && sectionData
-            ? () => {
-                setManaged(false);
-                setSectionData(null);
-              }
-            : onBackClick
-        }
+        onBackClick={handleBackPress}
       />
       <NewDestinationContainer>
         {managed && sectionData

From 0d97d64ce65629635b2778d553c8b91beced8431 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 13:52:09 +0300
Subject: [PATCH 017/374] filter instromented apps

---
 .../overview/sources/new.source.flow.tsx      |  1 -
 .../setup/sources/sources.section.tsx         | 20 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index 77f763455..eddcbbe8b 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -20,7 +20,6 @@ export function NewSourceFlow() {
       },
       onError: ({ response }) => {
         const message = response?.data?.message || SETUP.ERROR;
-        console.log({ response });
         show({
           type: NOTIFICATION.ERROR,
           message,
diff --git a/frontend/webapp/containers/setup/sources/sources.section.tsx b/frontend/webapp/containers/setup/sources/sources.section.tsx
index b765fd13c..2328b61c2 100644
--- a/frontend/webapp/containers/setup/sources/sources.section.tsx
+++ b/frontend/webapp/containers/setup/sources/sources.section.tsx
@@ -37,19 +37,25 @@ export function SourcesSection({ sectionData, setSectionData }: any) {
       });
   }, [isError]);
 
-  const namespacesList = useMemo(() => {
-    return data?.namespaces?.map((item: any, index: number) => {
-      return { id: index, label: item.name };
-    });
-  }, [data]);
+  const namespacesList = useMemo(
+    () =>
+      data?.namespaces?.map((item: any, index: number) => ({
+        id: index,
+        label: item.name,
+      })),
+    [data]
+  );
 
   const sourceData = useMemo(() => {
-    const namespace = sectionData[currentNamespace?.name];
-    return searchFilter
+    let namespace = sectionData[currentNamespace?.name];
+    //filter by search query
+    namespace = searchFilter
       ? namespace?.objects.filter((item: any) =>
           item.name.toLowerCase().includes(searchFilter.toLowerCase())
         )
       : namespace?.objects;
+    //remove instrumented applications
+    return namespace?.filter((item: any) => !item.instrumentation_effective);
   }, [searchFilter, currentNamespace, sectionData]);
 
   async function onNameSpaceChange() {

From f38568b3cacbbbb2b551ce27028fe990d107097b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 14:43:05 +0300
Subject: [PATCH 018/374] WIP

---
 frontend/webapp/app/page.tsx                       |  3 +--
 .../overview/sources/new.source.flow.tsx           |  6 ++----
 .../webapp/containers/overview/sources/sources.tsx | 14 ++++++++++++--
 frontend/webapp/utils/constants/string.tsx         |  3 +++
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index 1b259b2ed..20d26031b 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -4,7 +4,6 @@ import { useEffect } from "react";
 import { getConfig } from "@/services/config";
 import { useRouter } from "next/navigation";
 import { ROUTES, CONFIG, QUERIES } from "@/utils/constants";
-import { KeyvalLoader } from "@/design.system";
 
 export default function App() {
   const router = useRouter();
@@ -16,7 +15,6 @@ export default function App() {
 
   function renderCurrentPage() {
     const { installation } = data;
-
     const state =
       installation === CONFIG.APPS_SELECTED
         ? `?state=${CONFIG.APPS_SELECTED}`
@@ -25,6 +23,7 @@ export default function App() {
       case CONFIG.NEW:
       case CONFIG.APPS_SELECTED:
         router.push(`${ROUTES.SETUP}${state}`);
+        break;
       case CONFIG.FINISHED:
         router.push(ROUTES.OVERVIEW);
     }
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index eddcbbe8b..dfaacb325 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -8,16 +8,14 @@ import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
 import { useMutation } from "react-query";
 import { setNamespaces } from "@/services";
 
-export function NewSourceFlow() {
+export function NewSourceFlow({ onSuccess }) {
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
   const { mutate } = useMutation((body) => setNamespaces(body));
   const { show, Notification } = useNotification();
 
   function handleNewSource() {
     mutate(sectionData, {
-      onSuccess: () => {
-        setSectionData({});
-      },
+      onSuccess,
       onError: ({ response }) => {
         const message = response?.data?.message || SETUP.ERROR;
         show({
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 58bc728b3..7b90707b0 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,16 +1,25 @@
 "use client";
 import React, { useState } from "react";
-import { OVERVIEW } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
 import { NewSourceFlow } from "./new.source.flow";
 import { ManageSources } from "./manage.sources";
+import { useNotification } from "@/hooks";
 
 export function SourcesContainer() {
   const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false);
+  const { show, Notification } = useNotification();
+  function onNewSourceSuccess() {
+    setDisplayNewSourceFlow(false);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
+    });
+  }
 
   function renderNewSourceFlow() {
-    return <NewSourceFlow />;
+    return <NewSourceFlow onSuccess={onNewSourceSuccess} />;
   }
 
   function renderSources() {
@@ -26,6 +35,7 @@ export function SourcesContainer() {
         }
       />
       {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
+      <Notification />
     </SourcesContainerWrapper>
   );
 }
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index eb57020dd..53903e8c5 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -67,6 +67,9 @@ export const OVERVIEW = {
   DESTINATION_UPDATE_SUCCESS: "Destination updated successfully",
   DESTINATION_CREATED_SUCCESS: "Destination created successfully",
   DESTINATION_DELETED_SUCCESS: "Destination deleted successfully",
+  SOURCE_UPDATE_SUCCESS: "Source updated successfully",
+  SOURCE_CREATED_SUCCESS: "Source created successfully",
+  SOURCE_DELETED_SUCCESS: "Source deleted successfully",
   MANAGE: "Manage",
   DELETE: "Delete",
   DELETE_DESTINATION: "Delete Destination",

From d57d024c149a2056393f97eb705e9ecde0208f4c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 16:07:12 +0300
Subject: [PATCH 019/374] WIP

---
 .../overview/sources/manage.sources.tsx       | 23 ++++++++++---------
 .../overview/sources/new.source.flow.tsx      | 23 ++++++++++++++++---
 .../containers/overview/sources/sources.tsx   | 19 ++++++++++++---
 .../setup/setup.section/setup.section.tsx     |  5 +++-
 frontend/webapp/services/sources.tsx          |  3 ++-
 frontend/webapp/types/sources.tsx             | 16 +++++++++++++
 6 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx
index 85fbef48e..affc022ba 100644
--- a/frontend/webapp/containers/overview/sources/manage.sources.tsx
+++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx
@@ -8,15 +8,22 @@ import { SourcesActionMenu, SourcesManagedList } from "@/components/overview";
 import { MenuWrapper } from "./sources.styled";
 import { ManagedSource } from "@/types/sources";
 
-export function ManageSources({ setDisplayNewSourceFlow }) {
+const DEFAULT_FILTER = { name: "default" };
+
+export function ManageSources({ setDisplayNewSourceFlow, sources }) {
   const [searchFilter, setSearchFilter] = useState<string>("");
-  const [currentNamespace, setCurrentNamespace] = useState<any>(null);
+  const [currentNamespace, setCurrentNamespace] = useState<any>(DEFAULT_FILTER);
 
   const { data: namespaces } = useQuery(
     [QUERIES.API_NAMESPACES],
     getNamespaces
   );
 
+  // const { data: sources, isLoading } = useQuery(
+  //   [QUERIES.API_SOURCES],
+  //   getSources
+  // );
+  // console.log({ sources });
   useEffect(() => {
     setSearchFilter("");
   }, [currentNamespace]);
@@ -30,12 +37,6 @@ export function ManageSources({ setDisplayNewSourceFlow }) {
     [namespaces]
   );
 
-  const {
-    data: sources,
-    refetch,
-    isLoading,
-  } = useQuery([QUERIES.API_SOURCES], getSources);
-
   function filterByNamespace() {
     return currentNamespace
       ? sources?.filter(
@@ -57,9 +58,9 @@ export function ManageSources({ setDisplayNewSourceFlow }) {
     return filterBySearchQuery(data);
   }
 
-  if (isLoading) {
-    return <KeyvalLoader />;
-  }
+  // if (isLoading) {
+  //   return <KeyvalLoader />;
+  // }
 
   return (
     <>
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index dfaacb325..4e1212738 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -7,14 +7,31 @@ import theme from "@/styles/palette";
 import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
 import { useMutation } from "react-query";
 import { setNamespaces } from "@/services";
+import { SelectedSources } from "@/types/sources";
 
-export function NewSourceFlow({ onSuccess }) {
+export function NewSourceFlow({ onSuccess, sources }) {
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
-  const { mutate } = useMutation((body) => setNamespaces(body));
+  const { mutate } = useMutation((body: SelectedSources) =>
+    setNamespaces(body)
+  );
   const { show, Notification } = useNotification();
 
   function handleNewSource() {
-    mutate(sectionData, {
+    const newData: SelectedSources = {};
+
+    for (const key in sectionData) {
+      newData[key] = {
+        ...sectionData[key],
+        objects: sectionData[key].objects.map((item) => ({
+          ...item,
+          selected:
+            item?.selected ||
+            sources.some((source) => source.name === item.name),
+        })),
+      };
+    }
+
+    mutate(newData, {
       onSuccess,
       onError: ({ response }) => {
         const message = response?.data?.message || SETUP.ERROR;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 7b90707b0..ff89b21c1 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,15 +1,23 @@
 "use client";
 import React, { useState } from "react";
-import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
 import { NewSourceFlow } from "./new.source.flow";
 import { ManageSources } from "./manage.sources";
 import { useNotification } from "@/hooks";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
 
 export function SourcesContainer() {
   const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false);
   const { show, Notification } = useNotification();
+
+  const { data: sources, isLoading } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+
   function onNewSourceSuccess() {
     setDisplayNewSourceFlow(false);
     show({
@@ -19,11 +27,16 @@ export function SourcesContainer() {
   }
 
   function renderNewSourceFlow() {
-    return <NewSourceFlow onSuccess={onNewSourceSuccess} />;
+    return <NewSourceFlow onSuccess={onNewSourceSuccess} sources={sources} />;
   }
 
   function renderSources() {
-    return <ManageSources setDisplayNewSourceFlow={setDisplayNewSourceFlow} />;
+    return (
+      <ManageSources
+        setDisplayNewSourceFlow={setDisplayNewSourceFlow}
+        sources={sources}
+      />
+    );
   }
 
   return (
diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
index c50a2581f..53da583c3 100644
--- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx
+++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
@@ -18,6 +18,7 @@ import { STEPS, Step } from "./utils";
 import { setNamespaces } from "@/services";
 import { useSearchParams } from "next/navigation";
 import { useMutation } from "react-query";
+import { SelectedSources } from "@/types/sources";
 
 const STATE = "state";
 
@@ -30,7 +31,9 @@ const sectionComponents = {
 export function SetupSection() {
   const [currentStep, setCurrentStep] = useState<Step>(STEPS[0]);
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
-  const { mutate } = useMutation((body) => setNamespaces(body));
+  const { mutate } = useMutation((body: SelectedSources) =>
+    setNamespaces(body)
+  );
   const { show, Notification } = useNotification();
 
   const searchParams = useSearchParams();
diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx
index 3f6f32148..eb50b72a2 100644
--- a/frontend/webapp/services/sources.tsx
+++ b/frontend/webapp/services/sources.tsx
@@ -1,5 +1,6 @@
 import { API } from "@/utils/constants";
 import { get, post } from "./api";
+import { SelectedSources } from "@/types/sources";
 
 export async function getNamespaces() {
   return await get(API.NAMESPACES);
@@ -9,7 +10,7 @@ export async function getApplication(id: string) {
   return await get(`${API.APPLICATIONS}/${id}`);
 }
 
-export async function setNamespaces(body: any) {
+export async function setNamespaces(body: SelectedSources): Promise<void> {
   return await post(API.NAMESPACES, body);
 }
 
diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx
index 53f44fe6e..dac37b7eb 100644
--- a/frontend/webapp/types/sources.tsx
+++ b/frontend/webapp/types/sources.tsx
@@ -9,3 +9,19 @@ export interface ManagedSource {
     }
   ];
 }
+
+export interface SelectedSources {
+  [key: string]: {
+    objects: {
+      name: string;
+      selected: boolean;
+      kind: string;
+      app_instrumentation_labeled: boolean | null;
+      ns_instrumentation_labeled: boolean | null;
+      instrumentation_effective: boolean | null;
+      instances: number;
+    };
+    selected_all: boolean;
+    future_selected: boolean;
+  };
+}

From 6b1a81268633fe59112bd458f41d83521a102ff1 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 16:14:26 +0300
Subject: [PATCH 020/374] WIP

---
 .../overview/sources/manage.sources.tsx       | 23 ++++++-------------
 frontend/webapp/types/sources.tsx             |  6 +++++
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx
index affc022ba..af0e0daa9 100644
--- a/frontend/webapp/containers/overview/sources/manage.sources.tsx
+++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx
@@ -1,36 +1,31 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
-import { KeyvalLoader } from "@/design.system";
 import { QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
-import { getNamespaces, getSources } from "@/services";
+import { getNamespaces } from "@/services";
 import { SourcesActionMenu, SourcesManagedList } from "@/components/overview";
 import { MenuWrapper } from "./sources.styled";
-import { ManagedSource } from "@/types/sources";
+import { ManagedSource, Namespace } from "@/types/sources";
 
-const DEFAULT_FILTER = { name: "default" };
+const DEFAULT_FILTER = { name: "default", selected: false, totalApps: 0 };
 
 export function ManageSources({ setDisplayNewSourceFlow, sources }) {
   const [searchFilter, setSearchFilter] = useState<string>("");
-  const [currentNamespace, setCurrentNamespace] = useState<any>(DEFAULT_FILTER);
+  const [currentNamespace, setCurrentNamespace] =
+    useState<Namespace>(DEFAULT_FILTER);
 
   const { data: namespaces } = useQuery(
     [QUERIES.API_NAMESPACES],
     getNamespaces
   );
 
-  // const { data: sources, isLoading } = useQuery(
-  //   [QUERIES.API_SOURCES],
-  //   getSources
-  // );
-  // console.log({ sources });
   useEffect(() => {
     setSearchFilter("");
   }, [currentNamespace]);
 
   const namespacesList = useMemo(
     () =>
-      namespaces?.namespaces?.map((item: any, index: number) => ({
+      namespaces?.namespaces?.map((item: Namespace, index: number) => ({
         id: index,
         label: item.name,
       })),
@@ -45,7 +40,7 @@ export function ManageSources({ setDisplayNewSourceFlow, sources }) {
       : sources;
   }
 
-  function filterBySearchQuery(data) {
+  function filterBySearchQuery(data: ManagedSource[]) {
     return searchFilter
       ? data?.filter((item: ManagedSource) =>
           item.name.toLowerCase().includes(searchFilter.toLowerCase())
@@ -58,10 +53,6 @@ export function ManageSources({ setDisplayNewSourceFlow, sources }) {
     return filterBySearchQuery(data);
   }
 
-  // if (isLoading) {
-  //   return <KeyvalLoader />;
-  // }
-
   return (
     <>
       <MenuWrapper>
diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx
index dac37b7eb..7906c4733 100644
--- a/frontend/webapp/types/sources.tsx
+++ b/frontend/webapp/types/sources.tsx
@@ -10,6 +10,12 @@ export interface ManagedSource {
   ];
 }
 
+export interface Namespace {
+  name: string;
+  selected: boolean;
+  totalApps: number;
+}
+
 export interface SelectedSources {
   [key: string]: {
     objects: {

From d6e9f6fc570c4c42bce8f4ddf2974c6ac2274e0e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 16:21:58 +0300
Subject: [PATCH 021/374] WIP

---
 .../sources.option.menu/filter.sources.options.tsx       | 4 ++--
 .../sources.option.menu/sources.option.menu.styled.tsx   | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
index 9b5934c2b..def2c8da1 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
@@ -17,7 +17,7 @@ export function FilterSourcesOptions({
   }
 
   return (
-    <FilterMenuWrapper>
+    <>
       <KeyvalSearchInput
         value={searchFilter}
         onChange={(e) => setSearchFilter(e.target.value)}
@@ -30,6 +30,6 @@ export function FilterSourcesOptions({
           onChange={handleDropDownChange}
         />
       </DropdownWrapper>
-    </FilterMenuWrapper>
+    </>
   );
 }
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
index 33ae15b5f..7befad872 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
@@ -5,17 +5,16 @@ export const SourcesOptionMenuWrapper = styled.section`
   align-items: center;
   gap: 24px;
   padding: 40px 0 0 0;
+  @media screen and (max-width: 1500px) {
+    flex-wrap: wrap;
+    width: 70%;
+  }
 `;
 
 export const FilterMenuWrapper = styled.div`
   display: flex;
   gap: 16px;
   align-items: center;
-
-  @media screen and (max-width: 1400px) {
-    flex-wrap: wrap;
-    width: 90%;
-  }
 `;
 
 export const DropdownWrapper = styled.div`

From 7c655a0eb479abd92d7334aaf15d46ff98f31ea4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 31 Jul 2023 16:24:36 +0300
Subject: [PATCH 022/374] WIP

---
 .../sources/sources.manage.list/sources.manage.styled.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index ffbdffed2..3fd4cad8d 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -27,7 +27,7 @@ export const EmptyListWrapper = styled.div`
 `;
 
 export const ManagedListWrapper = styled.div`
-  height: 75%;
+  max-height: 72%;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;

From fbe55040b8a88c25de699b78865802963603a4f7 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 11:37:34 +0300
Subject: [PATCH 023/374] WIP

---
 frontend/webapp/app/layout.tsx                | 17 +++++++------
 .../sources.manage.list.tsx                   |  2 +-
 .../filter.sources.options.tsx                |  5 +---
 .../sources.option.menu.styled.tsx            |  6 -----
 .../containers/overview/sources/sources.tsx   | 24 ++++++++++++++++---
 frontend/webapp/design.system/image/image.tsx |  2 ++
 6 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index efe4c8326..3b6d45a7a 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -11,21 +11,20 @@ const LAYOUT_STYLE: React.CSSProperties = {
   width: "100vw",
   height: "100vh",
 };
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 10000,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 10000,
-        refetchOnWindowFocus: false,
-      },
-    },
-  });
-
   return (
     <html lang="en">
       <QueryClientProvider client={queryClient}>
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
index fa63eda5a..b5a82fad5 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -17,7 +17,7 @@ interface SourcesManagedListProps {
 export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
   function renderSources() {
     return data.map((source: ManagedSource) => (
-      <SourceManagedCard item={source} />
+      <SourceManagedCard key={source?.name} item={source} />
     ));
   }
 
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
index def2c8da1..d39fa2e7a 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-import {
-  DropdownWrapper,
-  FilterMenuWrapper,
-} from "./sources.option.menu.styled";
+import { DropdownWrapper } from "./sources.option.menu.styled";
 import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from "@/design.system";
 import { SETUP } from "@/utils/constants";
 
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
index 7befad872..256d9c55e 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
@@ -11,12 +11,6 @@ export const SourcesOptionMenuWrapper = styled.section`
   }
 `;
 
-export const FilterMenuWrapper = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-`;
-
 export const DropdownWrapper = styled.div`
   display: flex;
   position: inherit;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index ff89b21c1..c23a8447d 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
@@ -10,14 +10,32 @@ import { useQuery } from "react-query";
 import { getSources } from "@/services";
 
 export function SourcesContainer() {
-  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false);
+  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState<
+    boolean | null
+  >(null);
   const { show, Notification } = useNotification();
 
-  const { data: sources, isLoading } = useQuery(
+  const { data: sources, refetch } = useQuery(
     [QUERIES.API_SOURCES],
     getSources
   );
 
+  useEffect(() => {
+    refetchSources();
+  }, [displayNewSourceFlow]);
+
+  useEffect(() => {
+    console.log({ sources });
+  }, [sources]);
+
+  async function refetchSources() {
+    if (displayNewSourceFlow !== null && displayNewSourceFlow === false) {
+      setTimeout(async () => {
+        refetch();
+      }, 1000);
+    }
+  }
+
   function onNewSourceSuccess() {
     setDisplayNewSourceFlow(false);
     show({
diff --git a/frontend/webapp/design.system/image/image.tsx b/frontend/webapp/design.system/image/image.tsx
index 1a7b30cf7..31be01ccf 100644
--- a/frontend/webapp/design.system/image/image.tsx
+++ b/frontend/webapp/design.system/image/image.tsx
@@ -27,6 +27,8 @@ export function KeyvalImage({
       width={width}
       height={height}
       style={{ ...IMAGE_STYLE, ...style }}
+      placeholder={"empty"}
+      blurDataURL={src}
     />
   );
 }

From 8a93e8a72ffe9c18ded5a4c7e3bd636cf6699955 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 11:47:14 +0300
Subject: [PATCH 024/374] fixed pr comments

---
 frontend/webapp/app/layout.tsx                  | 17 +++++++++--------
 .../containers/overview/sources/sources.tsx     |  4 ----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 3b6d45a7a..efe4c8326 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -11,20 +11,21 @@ const LAYOUT_STYLE: React.CSSProperties = {
   width: "100vw",
   height: "100vh",
 };
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 10000,
-      refetchOnWindowFocus: false,
-    },
-  },
-});
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 10000,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+
   return (
     <html lang="en">
       <QueryClientProvider client={queryClient}>
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index c23a8447d..b78b57200 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -24,10 +24,6 @@ export function SourcesContainer() {
     refetchSources();
   }, [displayNewSourceFlow]);
 
-  useEffect(() => {
-    console.log({ sources });
-  }, [sources]);
-
   async function refetchSources() {
     if (displayNewSourceFlow !== null && displayNewSourceFlow === false) {
       setTimeout(async () => {

From d9958c808f1936243d22b1057c0d3ac040ee6224 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 13:02:56 +0300
Subject: [PATCH 025/374] fixed pr comments

---
 .../sources.option.menu.styled.tsx            |  5 ++--
 .../overview/sources/new.source.flow.tsx      | 29 +++++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
index 256d9c55e..88d0a54b4 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
@@ -5,9 +5,9 @@ export const SourcesOptionMenuWrapper = styled.section`
   align-items: center;
   gap: 24px;
   padding: 40px 0 0 0;
-  @media screen and (max-width: 1500px) {
+  @media screen and (max-width: 1600px) {
     flex-wrap: wrap;
-    width: 70%;
+    width: 74%;
   }
 `;
 
@@ -27,5 +27,4 @@ export const CheckboxWrapper = styled.div`
 
 export const SwitcherWrapper = styled.div`
   min-width: 90px;
-  margin-left: 24px;
 `;
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index 4e1212738..5152767ba 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -16,22 +16,24 @@ export function NewSourceFlow({ onSuccess, sources }) {
   );
   const { show, Notification } = useNotification();
 
-  function handleNewSource() {
-    const newData: SelectedSources = {};
+  function updateSectionDataWithSources() {
+    const sourceNamesSet = new Set(sources.map((source) => source.name));
+    const updatedSectionData: SelectedSources = {};
 
     for (const key in sectionData) {
-      newData[key] = {
-        ...sectionData[key],
-        objects: sectionData[key].objects.map((item) => ({
-          ...item,
-          selected:
-            item?.selected ||
-            sources.some((source) => source.name === item.name),
-        })),
+      const { objects, ...rest } = sectionData[key];
+      const updatedObjects = objects.map((item) => ({
+        ...item,
+        selected: item?.selected || sourceNamesSet.has(item.name),
+      }));
+
+      updatedSectionData[key] = {
+        ...rest,
+        objects: updatedObjects,
       };
     }
 
-    mutate(newData, {
+    mutate(updatedSectionData, {
       onSuccess,
       onError: ({ response }) => {
         const message = response?.data?.message || SETUP.ERROR;
@@ -47,7 +49,10 @@ export function NewSourceFlow({ onSuccess, sources }) {
     <SourcesSectionWrapper>
       <ButtonWrapper>
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
-        <KeyvalButton onClick={handleNewSource} style={{ width: 110 }}>
+        <KeyvalButton
+          onClick={updateSectionDataWithSources}
+          style={{ width: 110 }}
+        >
           <KeyvalText weight={600} color={theme.text.dark_button}>
             {OVERVIEW.CONNECT}
           </KeyvalText>

From 89dc8ae6d3d155ccbea13f7b42d3c8436bcb70b8 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Tue, 1 Aug 2023 13:06:37 +0300
Subject: [PATCH 026/374] Task 158 back button (#360)

---
 .../destination.list.styled.tsx               |  1 -
 .../manage.destination/manage.destination.tsx | 12 ++++---
 .../overview.header/overview.header.tsx       | 27 ++++++++++----
 .../sources.action.menu.styled.tsx            |  1 -
 .../destination/destination.styled.tsx        |  1 -
 .../destination/new.destination.flow.tsx      | 35 ++++++++-----------
 .../overview/overview/overview.styled.tsx     |  1 -
 .../overview/sources/new.source.flow.tsx      |  4 +--
 .../overview/sources/sources.styled.tsx       |  1 -
 .../containers/overview/sources/sources.tsx   |  7 +++-
 frontend/webapp/utils/constants/string.tsx    |  1 +
 11 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index 2ed90d51b..c06fdca16 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -15,7 +15,6 @@ export const MenuWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 20px 36px;
-  margin-top: 88px;
 `;
 
 export const CardWrapper = styled.div`
diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
index 6a1c0ecdd..d129dea5f 100644
--- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
@@ -11,7 +11,7 @@ import FormDangerZone from "./form.danger.zone";
 interface ManageDestinationProps {
   destinationType: DestinationType;
   selectedDestination: any;
-  onBackClick: () => void;
+  onBackClick?: () => void;
   onSubmit: (data: any) => void;
   onDelete?: () => void;
 }
@@ -34,10 +34,12 @@ export function ManageDestination({
 }: ManageDestinationProps) {
   return (
     <>
-      <BackButtonWrapper onClick={onBackClick}>
-        <Back width={14} />
-        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
-      </BackButtonWrapper>
+      {onBackClick && (
+        <BackButtonWrapper onClick={onBackClick}>
+          <Back width={14} />
+          <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+        </BackButtonWrapper>
+      )}
       <ManageDestinationHeader data={selectedDestination} />
       <CreateConnectionForm
         fields={destinationType?.fields}
diff --git a/frontend/webapp/components/overview/overview.header/overview.header.tsx b/frontend/webapp/components/overview/overview.header/overview.header.tsx
index aa0f9d3ff..a515ec21f 100644
--- a/frontend/webapp/components/overview/overview.header/overview.header.tsx
+++ b/frontend/webapp/components/overview/overview.header/overview.header.tsx
@@ -1,27 +1,42 @@
 import React from "react";
 import styled from "styled-components";
 import { KeyvalText } from "@/design.system";
+import { Back } from "@/assets/icons/overview";
+import { SETUP } from "@/utils/constants";
 
 export interface OverviewHeaderProps {
   title?: string;
-  onClick?: any;
+  onBackClick?: any;
   isDisabled?: boolean;
 }
 
 const OverviewHeaderContainer = styled.div`
-  position: fixed;
   display: flex;
+  flex-direction: column;
   width: 100%;
-  height: 88px;
-  align-items: center;
-  padding: 0 24px;
+  padding: 24px;
   border-bottom: 2px solid rgba(255, 255, 255, 0.08);
   background: ${({ theme }) => theme.colors.light_dark};
 `;
 
-export function OverviewHeader({ title }: OverviewHeaderProps) {
+const BackButtonWrapper = styled.div`
+  display: flex;
+  margin-bottom: 8px;
+  cursor: pointer;
+  p {
+    cursor: pointer !important;
+  }
+`;
+
+export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) {
   return (
     <OverviewHeaderContainer>
+      {onBackClick && (
+        <BackButtonWrapper onClick={onBackClick}>
+          <Back width={14} />
+          <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+        </BackButtonWrapper>
+      )}
       <KeyvalText size={32} weight={700}>
         {title}
       </KeyvalText>
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index dbf2e0d97..ee4c046ad 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 export const SourcesMenuWrapper = styled.div`
   width: 100%;
   margin: 32px 0;
-  padding-top: 88px;
   display: flex;
   justify-content: space-between;
 `;
diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx
index 7933933c5..fd3764d16 100644
--- a/frontend/webapp/containers/overview/destination/destination.styled.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx
@@ -8,7 +8,6 @@ export const DestinationContainerWrapper = styled.div`
 
 export const NewDestinationContainer = styled.div`
   padding: 20px 36px;
-  margin-top: 88px;
 `;
 
 export const ManageDestinationWrapper = styled.div`
diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
index 6a213f539..7a75a32c0 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -1,24 +1,13 @@
 "use client";
 import React, { useState } from "react";
-import { KeyvalText } from "@/design.system";
-import { OVERVIEW, QUERIES, SETUP } from "@/utils/constants";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import { getDestination, setDestination } from "@/services";
 import { ManageDestination, OverviewHeader } from "@/components/overview";
 import { useSectionData } from "@/hooks";
 import { DestinationSection } from "@/containers/setup/destination/destination.section";
 import { NewDestinationContainer } from "./destination.styled";
-import { Back } from "@/assets/icons/overview";
-import { styled } from "styled-components";
 
-const BackButtonWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  p {
-    cursor: pointer !important;
-  }
-`;
 export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
   const { sectionData, setSectionData } = useSectionData(null);
   const [managed, setManaged] = useState<any>(null);
@@ -43,16 +32,21 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
     });
   }
 
+  function handleBackPress() {
+    if (managed && sectionData) {
+      setManaged(false);
+      setSectionData(null);
+      return;
+    }
+    onBackClick();
+  }
+
   function renderNewDestinationForm() {
     return (
       <ManageDestination
         destinationType={destinationType}
         selectedDestination={sectionData}
         onSubmit={onSubmit}
-        onBackClick={() => {
-          setManaged(false);
-          setSectionData(null);
-        }}
       />
     );
   }
@@ -60,10 +54,6 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
   function renderSelectNewDestination() {
     return (
       <>
-        <BackButtonWrapper onClick={onBackClick}>
-          <Back width={14} />
-          <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
-        </BackButtonWrapper>
         <DestinationSection
           sectionData={sectionData}
           setSectionData={(data) => {
@@ -77,7 +67,10 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
 
   return (
     <>
-      <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
+      <OverviewHeader
+        title={OVERVIEW.MENU.DESTINATIONS}
+        onBackClick={handleBackPress}
+      />
       <NewDestinationContainer>
         {managed && sectionData
           ? renderNewDestinationForm()
diff --git a/frontend/webapp/containers/overview/overview/overview.styled.tsx b/frontend/webapp/containers/overview/overview/overview.styled.tsx
index 59d7a09d1..c152e7642 100644
--- a/frontend/webapp/containers/overview/overview/overview.styled.tsx
+++ b/frontend/webapp/containers/overview/overview/overview.styled.tsx
@@ -3,5 +3,4 @@ import styled from "styled-components";
 export const OverviewDataFlowWrapper = styled.div`
   width: 100%;
   height: 100%;
-  margin-top: 88px;
 `;
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index a43290b5e..77f763455 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -4,7 +4,7 @@ import { SourcesSectionWrapper, ButtonWrapper } from "./sources.styled";
 import { SourcesSection } from "@/containers/setup/sources/sources.section";
 import { KeyvalButton, KeyvalText } from "@/design.system";
 import theme from "@/styles/palette";
-import { NOTIFICATION, SETUP } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
 import { useMutation } from "react-query";
 import { setNamespaces } from "@/services";
 
@@ -35,7 +35,7 @@ export function NewSourceFlow() {
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
         <KeyvalButton onClick={handleNewSource} style={{ width: 110 }}>
           <KeyvalText weight={600} color={theme.text.dark_button}>
-            Connect
+            {OVERVIEW.CONNECT}
           </KeyvalText>
         </KeyvalButton>
       </ButtonWrapper>
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
index c3fa07df0..d07f83647 100644
--- a/frontend/webapp/containers/overview/sources/sources.styled.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -11,7 +11,6 @@ export const MenuWrapper = styled.div`
 `;
 
 export const SourcesSectionWrapper = styled(MenuWrapper)`
-  margin-top: 88px;
   position: relative;
 `;
 
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index d48cacf72..58bc728b3 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -19,7 +19,12 @@ export function SourcesContainer() {
 
   return (
     <SourcesContainerWrapper>
-      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <OverviewHeader
+        title={OVERVIEW.MENU.SOURCES}
+        onBackClick={
+          displayNewSourceFlow ? () => setDisplayNewSourceFlow(false) : null
+        }
+      />
       {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
     </SourcesContainerWrapper>
   );
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index 8591b7e1a..eb57020dd 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -74,6 +74,7 @@ export const OVERVIEW = {
   DELETE_MODAL_SUBTITLE:
     "This action cannot be undone. This will permanently delete the destination and all associated data.",
   DELETE_BUTTON: "I want to delete this destination",
+  CONNECT: "Connect",
 };
 
 export const NOTIFICATION = {

From 5d5bf9be22cb878886b6cc8b714542961fd2d8e6 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 13:08:08 +0300
Subject: [PATCH 027/374] fixed pr comments

---
 frontend/webapp/containers/setup/sources/sources.section.tsx | 4 ++--
 frontend/webapp/design.system/image/image.tsx                | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/webapp/containers/setup/sources/sources.section.tsx b/frontend/webapp/containers/setup/sources/sources.section.tsx
index 2328b61c2..6eb6af810 100644
--- a/frontend/webapp/containers/setup/sources/sources.section.tsx
+++ b/frontend/webapp/containers/setup/sources/sources.section.tsx
@@ -3,7 +3,7 @@ import { SourcesList, SourcesOptionMenu } from "@/components/setup";
 import { getApplication, getNamespaces } from "@/services";
 import { LoaderWrapper } from "./sources.section.styled";
 import { useQuery } from "react-query";
-import { QUERIES } from "@/utils/constants";
+import { NOTIFICATION, QUERIES } from "@/utils/constants";
 import { KeyvalLoader } from "@/design.system";
 import { useNotification } from "@/hooks";
 
@@ -32,7 +32,7 @@ export function SourcesSection({ sectionData, setSectionData }: any) {
   useEffect(() => {
     isError &&
       show({
-        type: "error",
+        type: NOTIFICATION.ERROR,
         message: error,
       });
   }, [isError]);
diff --git a/frontend/webapp/design.system/image/image.tsx b/frontend/webapp/design.system/image/image.tsx
index 31be01ccf..1a7b30cf7 100644
--- a/frontend/webapp/design.system/image/image.tsx
+++ b/frontend/webapp/design.system/image/image.tsx
@@ -27,8 +27,6 @@ export function KeyvalImage({
       width={width}
       height={height}
       style={{ ...IMAGE_STYLE, ...style }}
-      placeholder={"empty"}
-      blurDataURL={src}
     />
   );
 }

From a13161436c53eb03b734c190919b0fc6255c5ac1 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 14:02:08 +0300
Subject: [PATCH 028/374] fixed pr comments

---
 .../overview/sources/action.menu/sources.action.menu.styled.tsx | 1 +
 frontend/webapp/containers/overview/sources/sources.tsx         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index ee4c046ad..146df0a97 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -4,6 +4,7 @@ export const SourcesMenuWrapper = styled.div`
   width: 100%;
   margin: 32px 0;
   display: flex;
+  align-items: center;
   justify-content: space-between;
 `;
 
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index b78b57200..fa2191caf 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -25,7 +25,7 @@ export function SourcesContainer() {
   }, [displayNewSourceFlow]);
 
   async function refetchSources() {
-    if (displayNewSourceFlow !== null && displayNewSourceFlow === false) {
+    if (displayNewSourceFlow === false) {
       setTimeout(async () => {
         refetch();
       }, 1000);

From 180fd5de2c348f212d4ece09f7c03da39c545b0b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 14:13:48 +0300
Subject: [PATCH 029/374] hide checkboxs

---
 .../create.connection.form.tsx                | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
index c5cfd3bc7..fb3bf5bf3 100644
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
+++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
@@ -134,19 +134,21 @@ export function CreateConnectionForm({
           ? SETUP.UPDATE_CONNECTION
           : SETUP.CREATE_CONNECTION}
       </KeyvalText>
-      <ConnectionMonitorsWrapper>
-        <KeyvalText size={14}>{SETUP.CONNECTION_MONITORS}</KeyvalText>
-        <CheckboxWrapper>
-          {selectedMonitors.map((checkbox) => (
-            <KeyvalCheckbox
-              key={checkbox?.id}
-              value={checkbox?.checked}
-              onChange={() => handleCheckboxChange(checkbox?.id)}
-              label={checkbox?.label}
-            />
-          ))}
-        </CheckboxWrapper>
-      </ConnectionMonitorsWrapper>
+      {selectedMonitors?.length > 1 && (
+        <ConnectionMonitorsWrapper>
+          <KeyvalText size={14}>{SETUP.CONNECTION_MONITORS}</KeyvalText>
+          <CheckboxWrapper>
+            {selectedMonitors.map((checkbox) => (
+              <KeyvalCheckbox
+                key={checkbox?.id}
+                value={checkbox?.checked}
+                onChange={() => handleCheckboxChange(checkbox?.id)}
+                label={checkbox?.label}
+              />
+            ))}
+          </CheckboxWrapper>
+        </ConnectionMonitorsWrapper>
+      )}
       <FieldWrapper>
         <KeyvalInput
           style={{ height: 36 }}

From d4d52118d584ad5d83eede6054b5b63bd9139f71 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 16:38:09 +0300
Subject: [PATCH 030/374] WIP

---
 .../manage.destination.header.tsx                   |  6 +-----
 .../create.connection.form.tsx                      | 13 +++++++++----
 .../sources/source.card/source.card.styled.tsx      |  9 ++++++---
 .../setup/sources/source.card/source.card.tsx       | 12 +++++++-----
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
index e38dff4e7..59bc496cd 100644
--- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
@@ -26,9 +26,7 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageDestinationHeader({
-  data: { image_url, display_name, type },
-}) {
+export function ManageDestinationHeader({ data: { image_url, display_name } }) {
   return (
     <ManageDestinationHeaderWrapper>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
@@ -36,8 +34,6 @@ export function ManageDestinationHeader({
         <KeyvalText size={24} weight={700}>
           {display_name}
         </KeyvalText>
-
-        <KeyvalText size={20}>{type}</KeyvalText>
       </TextWrapper>
     </ManageDestinationHeaderWrapper>
   );
diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
index fb3bf5bf3..107063fd8 100644
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
+++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
@@ -105,11 +105,16 @@ export function CreateConnectionForm({
   }
 
   function isFormValid() {
-    const dynamicFieldsValues = Object.values(dynamicFields);
+    const areDynamicFieldsFilled = Object.values(dynamicFields).every(
+      (field) => field
+    );
+
+    const isFieldLengthMatching =
+      (fields?.length ?? 0) ===
+      (dynamicFields ? Object.keys(dynamicFields).length : 0);
+
     const isValid =
-      !!destinationName &&
-      dynamicFieldsValues.every((field: Field) => field) &&
-      dynamicFieldsValues.length === fields?.length;
+      !!destinationName && areDynamicFieldsFilled && isFieldLengthMatching;
 
     setIsCreateButtonDisabled(!isValid);
   }
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
index 5ea1ad3e9..9ef556c81 100644
--- a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
+++ b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
@@ -11,7 +11,7 @@ export const SourceCardWrapper = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: 14px;
+  /* gap: 14px; */
   cursor: pointer;
   .p {
     cursor: pointer !important;
@@ -19,7 +19,10 @@ export const SourceCardWrapper = styled.div`
 `;
 
 export const ApplicationNameWrapper = styled.div`
-  display: inline-block;
-  text-overflow: ellipsis;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
   max-width: 224px;
 `;
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
index 44e56dd19..f5628250c 100644
--- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx
+++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
@@ -15,9 +15,7 @@ import { SETUP } from "@/utils/constants";
 import { KIND_COLORS } from "@/styles/global";
 
 const TEXT_STYLE = {
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  overflow: "hidden",
+  overflowWrap: "break-word",
 };
 
 export function SourceCard({ item, onClick, focus }: any) {
@@ -29,8 +27,12 @@ export function SourceCard({ item, onClick, focus }: any) {
       <SourceCardWrapper onClick={onClick}>
         <Logo />
         <ApplicationNameWrapper>
-          <KeyvalText size={20} weight={700} style={TEXT_STYLE}>
-            {item.name}
+          <KeyvalText
+            size={item?.name?.length > 20 ? 16 : 20}
+            weight={700}
+            style={TEXT_STYLE}
+          >
+            {item?.name}
           </KeyvalText>
         </ApplicationNameWrapper>
         <KeyvalTag

From 61fc2fc20e91b41626ccf0f532d39c96480218da Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 16:43:31 +0300
Subject: [PATCH 031/374] WIP

---
 .../destination.card/destination.card.styled.tsx     |  4 +++-
 .../destination.card/destination.card.tsx            |  5 ++---
 .../setup/sources/source.card/source.card.styled.tsx |  9 +++------
 .../setup/sources/source.card/source.card.tsx        | 12 +++++-------
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
index a2854b3bd..17e6a2a89 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
@@ -10,7 +10,9 @@ export const DestinationCardWrapper = styled.div`
 `;
 
 export const ApplicationNameWrapper = styled.div`
-  display: inline-block;
+  display: flex;
+  align-items: center;
   text-overflow: ellipsis;
   max-width: 224px;
+  height: 40px;
 `;
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 b36bf93f5..316f81939 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -8,9 +8,8 @@ import {
 } from "./destination.card.styled";
 
 const TEXT_STYLE: React.CSSProperties = {
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  overflow: "hidden",
+  overflowWrap: "break-word",
+  textAlign: "center",
 };
 const LOGO_STYLE: React.CSSProperties = { padding: 4, backgroundColor: "#fff" };
 const TAP_STYLE: React.CSSProperties = { padding: "4px 8px", gap: 4 };
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
index 9ef556c81..5ea1ad3e9 100644
--- a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
+++ b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
@@ -11,7 +11,7 @@ export const SourceCardWrapper = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
-  /* gap: 14px; */
+  gap: 14px;
   cursor: pointer;
   .p {
     cursor: pointer !important;
@@ -19,10 +19,7 @@ export const SourceCardWrapper = styled.div`
 `;
 
 export const ApplicationNameWrapper = styled.div`
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  height: 60px;
+  display: inline-block;
+  text-overflow: ellipsis;
   max-width: 224px;
 `;
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
index f5628250c..44e56dd19 100644
--- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx
+++ b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
@@ -15,7 +15,9 @@ import { SETUP } from "@/utils/constants";
 import { KIND_COLORS } from "@/styles/global";
 
 const TEXT_STYLE = {
-  overflowWrap: "break-word",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
 };
 
 export function SourceCard({ item, onClick, focus }: any) {
@@ -27,12 +29,8 @@ export function SourceCard({ item, onClick, focus }: any) {
       <SourceCardWrapper onClick={onClick}>
         <Logo />
         <ApplicationNameWrapper>
-          <KeyvalText
-            size={item?.name?.length > 20 ? 16 : 20}
-            weight={700}
-            style={TEXT_STYLE}
-          >
-            {item?.name}
+          <KeyvalText size={20} weight={700} style={TEXT_STYLE}>
+            {item.name}
           </KeyvalText>
         </ApplicationNameWrapper>
         <KeyvalTag

From 49f6983969bab74949bdfe3c285a6f9d8be5fe73 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 16:58:10 +0300
Subject: [PATCH 032/374] fixed pr comments

---
 .../sources.option.menu/sources.option.menu.styled.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
index 88d0a54b4..0c05c9c59 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
@@ -5,9 +5,9 @@ export const SourcesOptionMenuWrapper = styled.section`
   align-items: center;
   gap: 24px;
   padding: 40px 0 0 0;
-  @media screen and (max-width: 1600px) {
-    flex-wrap: wrap;
-    width: 74%;
+  flex-wrap: wrap;
+  @media screen and (max-width: 1650px) {
+    width: 85%;
   }
 `;
 

From b1f12e7626d63998d651d5fb40c865cefa63038e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 17:39:13 +0300
Subject: [PATCH 033/374] remove scrollbars

---
 .../destination.list.styled.tsx                |  1 -
 .../overview.header/overview.header.tsx        | 18 +++++++++++++-----
 .../destination.list.styled.tsx                |  6 +++++-
 .../destination/destination.styled.tsx         |  9 +++++++--
 .../destination/destination.section.styled.tsx |  1 -
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index c06fdca16..006130e5d 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -5,7 +5,6 @@ export const ManagedListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
-  overflow-y: scroll;
   padding: 0px 36px;
   padding-bottom: 50px;
 `;
diff --git a/frontend/webapp/components/overview/overview.header/overview.header.tsx b/frontend/webapp/components/overview/overview.header/overview.header.tsx
index a515ec21f..c492495c2 100644
--- a/frontend/webapp/components/overview/overview.header/overview.header.tsx
+++ b/frontend/webapp/components/overview/overview.header/overview.header.tsx
@@ -14,20 +14,26 @@ const OverviewHeaderContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 24px;
   border-bottom: 2px solid rgba(255, 255, 255, 0.08);
   background: ${({ theme }) => theme.colors.light_dark};
 `;
 
 const BackButtonWrapper = styled.div`
   display: flex;
-  margin-bottom: 8px;
+  margin: 24px;
+  margin-bottom: 0;
   cursor: pointer;
   p {
     cursor: pointer !important;
   }
 `;
 
+const TextWrapper = styled.div`
+  margin-top: 24px;
+  margin-left: 24px;
+  margin-bottom: 24px;
+`;
+
 export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) {
   return (
     <OverviewHeaderContainer>
@@ -37,9 +43,11 @@ export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) {
           <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
         </BackButtonWrapper>
       )}
-      <KeyvalText size={32} weight={700}>
-        {title}
-      </KeyvalText>
+      <TextWrapper>
+        <KeyvalText size={32} weight={700}>
+          {title}
+        </KeyvalText>
+      </TextWrapper>
     </OverviewHeaderContainer>
   );
 }
diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
index 5895538c2..5657d2d96 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -13,7 +13,11 @@ export const DestinationListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
-  overflow-y: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 `;
 
 export const EmptyListWrapper = styled.div`
diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx
index fd3764d16..2c038975e 100644
--- a/frontend/webapp/containers/overview/destination/destination.styled.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx
@@ -2,8 +2,13 @@ import styled from "styled-components";
 
 export const DestinationContainerWrapper = styled.div`
   height: 100vh;
-  width: 100%;
-  overflow-y: scroll;
+  /* width: 100%; */
+  overflow-y: hidden;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 `;
 
 export const NewDestinationContainer = styled.div`
diff --git a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
index 78f97cbdd..000d3870c 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
@@ -6,7 +6,6 @@ export const DestinationListContainer = styled.div`
   padding-bottom: 300px;
   margin-top: 24px;
   overflow: scroll;
-  scrollbar-width: none;
 `;
 
 export const EmptyListWrapper = styled.div`

From f81d618aec261934f1d77de7cbee0deaf962a9bc Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 1 Aug 2023 17:43:08 +0300
Subject: [PATCH 034/374] WIP

---
 .../destination/destination.list/destination.list.styled.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index 006130e5d..f172a32f9 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -1,7 +1,6 @@
 import { styled } from "styled-components";
 
 export const ManagedListWrapper = styled.div`
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;

From 5e68cdd9895b34406c38a7530d79c8e5eb70243e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 09:49:00 +0300
Subject: [PATCH 035/374] added quick help

---
 .../manage.destination/manage.destination.tsx | 50 ++++++++++++++-----
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
index d129dea5f..51fd8d3cb 100644
--- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { styled } from "styled-components";
 import { Back } from "@/assets/icons/overview";
-import { CreateConnectionForm } from "@/components/setup";
+import { CreateConnectionForm, QuickHelp } from "@/components/setup";
 import { KeyvalText } from "@/design.system";
 import { SETUP } from "@/utils/constants";
 import { ManageDestinationHeader } from "../manage.destination.header/manage.destination.header";
@@ -25,6 +25,13 @@ const BackButtonWrapper = styled.div`
   }
 `;
 
+const CreateConnectionWrapper = styled.div`
+  display: flex;
+  gap: 200px;
+  overflow: scroll;
+  scrollbar-width: none;
+`;
+
 export function ManageDestination({
   destinationType,
   selectedDestination,
@@ -32,6 +39,18 @@ export function ManageDestination({
   onSubmit,
   onDelete,
 }: ManageDestinationProps) {
+  const videoList = useMemo(
+    () =>
+      destinationType?.fields
+        ?.filter((field) => field?.video_url)
+        ?.map((field) => ({
+          name: field.display_name,
+          src: field.video_url,
+          thumbnail_url: field.thumbnail_url,
+        })),
+    [destinationType]
+  );
+
   return (
     <>
       {onBackClick && (
@@ -41,17 +60,22 @@ export function ManageDestination({
         </BackButtonWrapper>
       )}
       <ManageDestinationHeader data={selectedDestination} />
-      <CreateConnectionForm
-        fields={destinationType?.fields}
-        destinationNameValue={selectedDestination?.name}
-        dynamicFieldsValues={selectedDestination?.fields}
-        checkboxValues={selectedDestination?.signals}
-        supportedSignals={selectedDestination?.supported_signals}
-        onSubmit={(data) => onSubmit(data)}
-      />
-      {onDelete && (
-        <FormDangerZone onDelete={onDelete} data={selectedDestination} />
-      )}
+      <CreateConnectionWrapper>
+        <div>
+          <CreateConnectionForm
+            fields={destinationType?.fields}
+            destinationNameValue={selectedDestination?.name}
+            dynamicFieldsValues={selectedDestination?.fields}
+            checkboxValues={selectedDestination?.signals}
+            supportedSignals={selectedDestination?.supported_signals}
+            onSubmit={(data) => onSubmit(data)}
+          />
+          {onDelete && (
+            <FormDangerZone onDelete={onDelete} data={selectedDestination} />
+          )}
+        </div>
+        {videoList?.length > 0 && <QuickHelp data={videoList} />}
+      </CreateConnectionWrapper>
     </>
   );
 }

From 32bec3d7a30429404ff3d737ae65ed5fd7fc40de Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 09:56:41 +0300
Subject: [PATCH 036/374] WIP

---
 .../destination/destination.list/destination.list.styled.tsx | 4 ++--
 .../containers/overview/destination/destination.styled.tsx   | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
index 5657d2d96..1515a8416 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -16,8 +16,8 @@ export const DestinationListWrapper = styled.div`
   ::-webkit-scrollbar {
     display: none;
   }
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 `;
 
 export const EmptyListWrapper = styled.div`
diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx
index 2c038975e..cac5196dd 100644
--- a/frontend/webapp/containers/overview/destination/destination.styled.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx
@@ -2,13 +2,12 @@ import styled from "styled-components";
 
 export const DestinationContainerWrapper = styled.div`
   height: 100vh;
-  /* width: 100%; */
   overflow-y: hidden;
   ::-webkit-scrollbar {
     display: none;
   }
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 `;
 
 export const NewDestinationContainer = styled.div`

From f91d3576199f6494faf9e2d11e736dace2be9c0f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 10:54:12 +0300
Subject: [PATCH 037/374] create destinaion flow match url

---
 .../app/overview/destinations/create/page.tsx | 36 +++++++++++++++++++
 .../manage.destination/manage.destination.tsx |  1 +
 .../webapp/components/side.menu/menu/menu.tsx |  3 +-
 .../overview/destination/destination.tsx      | 27 ++++----------
 4 files changed, 46 insertions(+), 21 deletions(-)
 create mode 100644 frontend/webapp/app/overview/destinations/create/page.tsx

diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
new file mode 100644
index 000000000..3a0cf9a91
--- /dev/null
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -0,0 +1,36 @@
+"use client";
+import React from "react";
+import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
+import { useNotification } from "@/hooks";
+import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow";
+import { useRouter } from "next/navigation";
+
+export default function CreateDestinationPage() {
+  const { show, Notification } = useNotification();
+  const router = useRouter();
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  return (
+    <div>
+      <NewDestinationFlow
+        onSuccess={onSuccess}
+        onError={onError}
+        onBackClick={() => router.back()}
+      />
+      <Notification />
+    </div>
+  );
+}
diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
index 51fd8d3cb..32e3321de 100644
--- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
@@ -28,6 +28,7 @@ const BackButtonWrapper = styled.div`
 const CreateConnectionWrapper = styled.div`
   display: flex;
   gap: 200px;
+  height: 530px;
   overflow: scroll;
   scrollbar-width: none;
 `;
diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx
index 8f83912ec..e17eb8022 100644
--- a/frontend/webapp/components/side.menu/menu/menu.tsx
+++ b/frontend/webapp/components/side.menu/menu/menu.tsx
@@ -35,8 +35,9 @@ export function Menu() {
   }
 
   function handleMenuItemClick(item) {
+    if (!item) return;
     setCurrentMenuItem(item);
-    router.push(item?.navigate);
+    router?.push(item?.navigate);
   }
 
   function renderMenuItemsList() {
diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
index 162b174a6..3dbf5ed33 100644
--- a/frontend/webapp/containers/overview/destination/destination.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -6,14 +6,13 @@ import { useQuery } from "react-query";
 import { getDestinations } from "@/services";
 import { OverviewHeader, DestinationsManagedList } from "@/components/overview";
 import { DestinationContainerWrapper } from "./destination.styled";
-import { NewDestinationFlow } from "./new.destination.flow";
 import { UpdateDestinationFlow } from "./update.destination.flow";
 import { useNotification } from "@/hooks";
+import { useRouter } from "next/navigation";
 
 export function DestinationContainer() {
   const [selectedDestination, setSelectedDestination] = useState<any>(null);
-  const [displayNewDestination, setDisplayNewDestination] =
-    useState<boolean>(false);
+
   const { show, Notification } = useNotification();
   const {
     isLoading: destinationLoading,
@@ -21,10 +20,12 @@ export function DestinationContainer() {
     refetch,
   } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
 
+  const router = useRouter();
+
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
     refetch();
     setSelectedDestination(null);
-    setDisplayNewDestination(false);
+    router.push("destinations");
     show({
       type: NOTIFICATION.SUCCESS,
       message,
@@ -39,18 +40,6 @@ export function DestinationContainer() {
     });
   }
 
-  function renderNewDestinationFlow() {
-    return (
-      <NewDestinationFlow
-        onSuccess={onSuccess}
-        onError={onError}
-        onBackClick={() => {
-          setDisplayNewDestination(false);
-        }}
-      />
-    );
-  }
-
   function renderUpdateDestinationFlow() {
     return (
       <UpdateDestinationFlow
@@ -69,7 +58,7 @@ export function DestinationContainer() {
         <DestinationsManagedList
           data={destinationList}
           onItemClick={setSelectedDestination}
-          onMenuButtonClick={() => setDisplayNewDestination(true)}
+          onMenuButtonClick={() => router.push("destinations/create")}
         />
       </>
     );
@@ -81,9 +70,7 @@ export function DestinationContainer() {
 
   return (
     <DestinationContainerWrapper>
-      {displayNewDestination
-        ? renderNewDestinationFlow()
-        : selectedDestination
+      {selectedDestination
         ? renderUpdateDestinationFlow()
         : renderDestinationList()}
       <Notification />

From f0e6d64791921a76a5488c67679cda32b281e260 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 11:49:53 +0300
Subject: [PATCH 038/374] new dest flow

---
 .../destinations/create/[id]/page.tsx         | 87 +++++++++++++++++++
 .../app/overview/destinations/create/page.tsx | 10 +--
 .../app/overview/destinations/manage/page.tsx | 43 +++++++++
 .../webapp/app/overview/destinations/page.tsx | 15 +++-
 .../destination/destination.styled.tsx        | 10 ---
 .../overview/destination/destination.tsx      | 28 ++----
 .../destination/new.destination.flow.tsx      | 59 ++++---------
 7 files changed, 168 insertions(+), 84 deletions(-)
 create mode 100644 frontend/webapp/app/overview/destinations/create/[id]/page.tsx
 create mode 100644 frontend/webapp/app/overview/destinations/manage/page.tsx

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
new file mode 100644
index 000000000..db9aa3786
--- /dev/null
+++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -0,0 +1,87 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
+import { useMutation, useQuery } from "react-query";
+import {
+  getDestination,
+  getDestinationsTypes,
+  setDestination,
+} from "@/services";
+import { ManageDestination, OverviewHeader } from "@/components/overview";
+import { useSectionData } from "@/hooks";
+import { useRouter, useSearchParams } from "next/navigation";
+import { styled } from "styled-components";
+
+const NewDestinationContainer = styled.div`
+  padding: 20px 36px;
+`;
+
+export default function NewDestinationFlow({ onSuccess, onError }) {
+  const { sectionData, setSectionData } = useSectionData(null);
+  const searchParams = useSearchParams();
+  const { data: destinationType } = useQuery(
+    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
+    () => getDestination(sectionData?.type),
+    {
+      enabled: !!sectionData,
+    }
+  );
+
+  const { isLoading, data } = useQuery(
+    [QUERIES.API_DESTINATION_TYPES],
+    getDestinationsTypes
+  );
+
+  const { mutate } = useMutation((body) => setDestination(body));
+  const router = useRouter();
+
+  useEffect(() => {
+    const search = searchParams.get("dest");
+    let currentData = null;
+    data?.categories.forEach((item) => {
+      const filterItem = item.items.filter((dest) => dest?.type === search);
+      if (filterItem.length) {
+        currentData = filterItem[0];
+      }
+    });
+    setSectionData(currentData);
+  }, [data]);
+
+  function onSubmit(newDestination) {
+    const destination = {
+      ...newDestination,
+      type: sectionData.type,
+    };
+
+    mutate(destination, {
+      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
+      onError,
+    });
+  }
+
+  function handleBackPress() {
+    router.back();
+  }
+
+  if (isLoading) {
+    return;
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.DESTINATIONS}
+        onBackClick={handleBackPress}
+      />
+      {destinationType && sectionData && (
+        <NewDestinationContainer>
+          <ManageDestination
+            destinationType={destinationType}
+            selectedDestination={sectionData}
+            onSubmit={onSubmit}
+          />
+        </NewDestinationContainer>
+      )}
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
index 3a0cf9a91..a6e4964b5 100644
--- a/frontend/webapp/app/overview/destinations/create/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -24,13 +24,9 @@ export default function CreateDestinationPage() {
   }
 
   return (
-    <div>
-      <NewDestinationFlow
-        onSuccess={onSuccess}
-        onError={onError}
-        onBackClick={() => router.back()}
-      />
+    <>
+      <NewDestinationFlow onSuccess={onSuccess} onError={onError} />
       <Notification />
-    </div>
+    </>
   );
 }
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
new file mode 100644
index 000000000..1fb2b1cc7
--- /dev/null
+++ b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -0,0 +1,43 @@
+"use client";
+import React, { useState } from "react";
+import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
+import { useNotification } from "@/hooks";
+import { useRouter } from "next/navigation";
+import { UpdateDestinationFlow } from "@/containers/overview/destination/update.destination.flow";
+
+export function ManageDestinationPage() {
+  const [selectedDestination, setSelectedDestination] = useState<any>(null);
+
+  const { show, Notification } = useNotification();
+
+  const router = useRouter();
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    setSelectedDestination(null);
+    router.push("destinations");
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  return (
+    <>
+      <UpdateDestinationFlow
+        selectedDestination={selectedDestination}
+        setSelectedDestination={setSelectedDestination}
+        onSuccess={onSuccess}
+        onError={onError}
+      />
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx
index 7056885ed..bb83b2d78 100644
--- a/frontend/webapp/app/overview/destinations/page.tsx
+++ b/frontend/webapp/app/overview/destinations/page.tsx
@@ -1,11 +1,22 @@
 "use client";
 import { DestinationContainer } from "@/containers/overview";
 import React from "react";
+import { styled } from "styled-components";
+
+const DestinationContainerWrapper = styled.div`
+  height: 100vh;
+  overflow-y: hidden;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+`;
 
 export default function DestinationDashboardPage() {
   return (
-    <>
+    <DestinationContainerWrapper>
       <DestinationContainer />
-    </>
+    </DestinationContainerWrapper>
   );
 }
diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx
index cac5196dd..008ad16f7 100644
--- a/frontend/webapp/containers/overview/destination/destination.styled.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx
@@ -1,15 +1,5 @@
 import styled from "styled-components";
 
-export const DestinationContainerWrapper = styled.div`
-  height: 100vh;
-  overflow-y: hidden;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-`;
-
 export const NewDestinationContainer = styled.div`
   padding: 20px 36px;
 `;
diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
index 3dbf5ed33..4b86c417d 100644
--- a/frontend/webapp/containers/overview/destination/destination.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -1,18 +1,14 @@
 "use client";
-import React, { useState } from "react";
+import React from "react";
 import { KeyvalLoader } from "@/design.system";
 import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getDestinations } from "@/services";
 import { OverviewHeader, DestinationsManagedList } from "@/components/overview";
-import { DestinationContainerWrapper } from "./destination.styled";
-import { UpdateDestinationFlow } from "./update.destination.flow";
 import { useNotification } from "@/hooks";
 import { useRouter } from "next/navigation";
 
 export function DestinationContainer() {
-  const [selectedDestination, setSelectedDestination] = useState<any>(null);
-
   const { show, Notification } = useNotification();
   const {
     isLoading: destinationLoading,
@@ -24,7 +20,6 @@ export function DestinationContainer() {
 
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
     refetch();
-    setSelectedDestination(null);
     router.push("destinations");
     show({
       type: NOTIFICATION.SUCCESS,
@@ -40,24 +35,13 @@ export function DestinationContainer() {
     });
   }
 
-  function renderUpdateDestinationFlow() {
-    return (
-      <UpdateDestinationFlow
-        selectedDestination={selectedDestination}
-        setSelectedDestination={setSelectedDestination}
-        onSuccess={onSuccess}
-        onError={onError}
-      />
-    );
-  }
-
   function renderDestinationList() {
     return (
       <>
         <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
         <DestinationsManagedList
           data={destinationList}
-          onItemClick={setSelectedDestination}
+          onItemClick={() => {}}
           onMenuButtonClick={() => router.push("destinations/create")}
         />
       </>
@@ -69,11 +53,9 @@ export function DestinationContainer() {
   }
 
   return (
-    <DestinationContainerWrapper>
-      {selectedDestination
-        ? renderUpdateDestinationFlow()
-        : renderDestinationList()}
+    <>
+      {renderDestinationList()}
       <Notification />
-    </DestinationContainerWrapper>
+    </>
   );
 }
diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
index 7a75a32c0..a8e1315cd 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -1,24 +1,19 @@
 "use client";
-import React, { useState } from "react";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
-import { useMutation, useQuery } from "react-query";
-import { getDestination, setDestination } from "@/services";
-import { ManageDestination, OverviewHeader } from "@/components/overview";
+import React from "react";
+import { OVERVIEW } from "@/utils/constants";
+import { useMutation } from "react-query";
+import { setDestination } from "@/services";
+import { OverviewHeader } from "@/components/overview";
 import { useSectionData } from "@/hooks";
 import { DestinationSection } from "@/containers/setup/destination/destination.section";
 import { NewDestinationContainer } from "./destination.styled";
+import { useRouter } from "next/navigation";
 
-export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
+export function NewDestinationFlow({ onSuccess, onError }) {
   const { sectionData, setSectionData } = useSectionData(null);
-  const [managed, setManaged] = useState<any>(null);
-  const { data: destinationType } = useQuery(
-    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
-    () => getDestination(sectionData?.type),
-    {
-      enabled: !!sectionData,
-    }
-  );
+
   const { mutate } = useMutation((body) => setDestination(body));
+  const router = useRouter();
 
   function onSubmit(newDestination) {
     const destination = {
@@ -33,35 +28,17 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
   }
 
   function handleBackPress() {
-    if (managed && sectionData) {
-      setManaged(false);
-      setSectionData(null);
-      return;
-    }
-    onBackClick();
-  }
-
-  function renderNewDestinationForm() {
-    return (
-      <ManageDestination
-        destinationType={destinationType}
-        selectedDestination={sectionData}
-        onSubmit={onSubmit}
-      />
-    );
+    router.back();
   }
 
   function renderSelectNewDestination() {
     return (
-      <>
-        <DestinationSection
-          sectionData={sectionData}
-          setSectionData={(data) => {
-            setSectionData(data);
-            setManaged(true);
-          }}
-        />
-      </>
+      <DestinationSection
+        sectionData={sectionData}
+        setSectionData={(data) => {
+          router.push(`/overview/destinations/create/manage?dest=${data.type}`);
+        }}
+      />
     );
   }
 
@@ -72,9 +49,7 @@ export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
         onBackClick={handleBackPress}
       />
       <NewDestinationContainer>
-        {managed && sectionData
-          ? renderNewDestinationForm()
-          : renderSelectNewDestination()}
+        {renderSelectNewDestination()}
       </NewDestinationContainer>
     </>
   );

From 0a30a2330c762e380639e8e67e3ad5156948d4e2 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 13:36:47 +0300
Subject: [PATCH 039/374] manage dest flow

---
 .../app/overview/destinations/create/page.tsx |  3 +-
 .../app/overview/destinations/manage/page.tsx | 56 +++++++++++++------
 .../overview/destination/destination.tsx      | 30 +++-------
 .../destination/new.destination.flow.tsx      | 20 +++----
 .../destination/update.destination.flow.tsx   |  8 ++-
 .../notification/notification.tsx             | 21 ++++---
 .../notification/portal.notification.tsx      | 46 +++++++++++++++
 7 files changed, 121 insertions(+), 63 deletions(-)
 create mode 100644 frontend/webapp/design.system/notification/portal.notification.tsx

diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
index a6e4964b5..83b9316b3 100644
--- a/frontend/webapp/app/overview/destinations/create/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect } from "react";
 import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
 import { useNotification } from "@/hooks";
 import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow";
@@ -8,6 +8,7 @@ import { useRouter } from "next/navigation";
 export default function CreateDestinationPage() {
   const { show, Notification } = useNotification();
   const router = useRouter();
+
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
     show({
       type: NOTIFICATION.SUCCESS,
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
index 1fb2b1cc7..6f0456d9b 100644
--- a/frontend/webapp/app/overview/destinations/manage/page.tsx
+++ b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -1,20 +1,37 @@
 "use client";
-import React, { useState } from "react";
-import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
+import React, { useEffect, useState } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { useNotification } from "@/hooks";
-import { useRouter } from "next/navigation";
-import { UpdateDestinationFlow } from "@/containers/overview/destination/update.destination.flow";
+import { useRouter, useSearchParams } from "next/navigation";
+import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
+import { getDestinations } from "@/services";
+import { useQuery } from "react-query";
 
-export function ManageDestinationPage() {
+export default function ManageDestinationPage() {
   const [selectedDestination, setSelectedDestination] = useState<any>(null);
 
   const { show, Notification } = useNotification();
-
+  const {
+    isLoading: destinationLoading,
+    data: destinationList,
+    refetch,
+  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
   const router = useRouter();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const search = searchParams.get("dest");
+    const currentDestination = destinationList?.filter(
+      (item) => item?.id === search
+    );
+    if (currentDestination?.length) {
+      setSelectedDestination(currentDestination[0]);
+    }
+  }, [searchParams, destinationList]);
 
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    setSelectedDestination(null);
-    router.push("destinations");
+    router.back();
+    refetch();
     show({
       type: NOTIFICATION.SUCCESS,
       message,
@@ -29,15 +46,20 @@ export function ManageDestinationPage() {
     });
   }
 
+  if (destinationLoading) {
+    return;
+  }
+
   return (
-    <>
-      <UpdateDestinationFlow
-        selectedDestination={selectedDestination}
-        setSelectedDestination={setSelectedDestination}
-        onSuccess={onSuccess}
-        onError={onError}
-      />
-      <Notification />
-    </>
+    selectedDestination && (
+      <>
+        <UpdateDestinationFlow
+          selectedDestination={selectedDestination}
+          onSuccess={onSuccess}
+          onError={onError}
+        />
+        <Notification />
+      </>
+    )
   );
 }
diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
index 4b86c417d..946c0ba33 100644
--- a/frontend/webapp/containers/overview/destination/destination.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -10,38 +10,22 @@ import { useRouter } from "next/navigation";
 
 export function DestinationContainer() {
   const { show, Notification } = useNotification();
-  const {
-    isLoading: destinationLoading,
-    data: destinationList,
-    refetch,
-  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
+  const { isLoading: destinationLoading, data: destinationList } = useQuery(
+    [QUERIES.API_DESTINATIONS],
+    getDestinations
+  );
 
   const router = useRouter();
 
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    refetch();
-    router.push("destinations");
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
   function renderDestinationList() {
     return (
       <>
         <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
         <DestinationsManagedList
           data={destinationList}
-          onItemClick={() => {}}
+          onItemClick={({ id }) =>
+            router.push(`destinations/manage?dest=${id}`)
+          }
           onMenuButtonClick={() => router.push("destinations/create")}
         />
       </>
diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
index a8e1315cd..cb89ac339 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -15,17 +15,17 @@ export function NewDestinationFlow({ onSuccess, onError }) {
   const { mutate } = useMutation((body) => setDestination(body));
   const router = useRouter();
 
-  function onSubmit(newDestination) {
-    const destination = {
-      ...newDestination,
-      type: sectionData.type,
-    };
+  // function onSubmit(newDestination) {
+  //   const destination = {
+  //     ...newDestination,
+  //     type: sectionData.type,
+  //   };
 
-    mutate(destination, {
-      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
-      onError,
-    });
-  }
+  //   mutate(destination, {
+  //     onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
+  //     onError,
+  //   });
+  // }
 
   function handleBackPress() {
     router.back();
diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
index 8eb710a29..d95fe7ac4 100644
--- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
@@ -7,13 +7,15 @@ import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
 import { deleteDestination } from "@/services/destinations";
 import { ManageDestinationWrapper } from "./destination.styled";
+import { useRouter } from "next/navigation";
 
-export function UpdateDestinationFlow({
+export default function UpdateDestinationFlow({
   selectedDestination,
-  setSelectedDestination,
   onSuccess,
   onError,
 }) {
+  const router = useRouter();
+
   const manageData = useMemo(() => {
     return {
       ...selectedDestination,
@@ -60,7 +62,7 @@ export function UpdateDestinationFlow({
   ) : (
     <ManageDestinationWrapper>
       <ManageDestination
-        onBackClick={() => setSelectedDestination(null)}
+        onBackClick={() => router.back()}
         destinationType={destinationType}
         selectedDestination={manageData}
         onSubmit={onSubmit}
diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx
index a8d53e169..bd8af8ad0 100644
--- a/frontend/webapp/design.system/notification/notification.tsx
+++ b/frontend/webapp/design.system/notification/notification.tsx
@@ -7,6 +7,7 @@ import { KeyvalText } from "../text/text";
 import CloseIcon from "@/assets/icons/X-blue.svg";
 import SuccessIcon from "@/assets/icons/success-notification.svg";
 import ErrorIcon from "@/assets/icons/error-notification.svg";
+import PortalNotification from "./portal.notification";
 interface KeyvalNotificationProps {
   type: "success" | "error" | "warning" | "info";
   message: string;
@@ -47,14 +48,16 @@ export function KeyvalNotification({
   }
 
   return (
-    <NotificationContainer>
-      <StyledNotification style={getNotificationStyle()}>
-        {getIcon()}
-        <KeyvalText weight={500} size={14}>
-          {message}
-        </KeyvalText>
-        <CloseIcon onClick={onClose} />
-      </StyledNotification>
-    </NotificationContainer>
+    <PortalNotification wrapperId="notification-portal">
+      <NotificationContainer>
+        <StyledNotification style={getNotificationStyle()}>
+          {getIcon()}
+          <KeyvalText weight={500} size={14}>
+            {message}
+          </KeyvalText>
+          <CloseIcon onClick={onClose} />
+        </StyledNotification>
+      </NotificationContainer>
+    </PortalNotification>
   );
 }
diff --git a/frontend/webapp/design.system/notification/portal.notification.tsx b/frontend/webapp/design.system/notification/portal.notification.tsx
new file mode 100644
index 000000000..d220c0fa8
--- /dev/null
+++ b/frontend/webapp/design.system/notification/portal.notification.tsx
@@ -0,0 +1,46 @@
+import { useState, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+
+interface Props {
+  children: JSX.Element;
+  wrapperId: string;
+}
+
+const PortalNotification = ({ children, wrapperId }: Props) => {
+  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
+
+  useLayoutEffect(() => {
+    let element = document.getElementById(wrapperId) as HTMLElement;
+    let portalCreated = false;
+    // if element is not found with wrapperId or wrapperId is not provided,
+    // create and append to body
+    if (!element) {
+      element = createWrapperAndAppendToBody(wrapperId);
+      portalCreated = true;
+    }
+
+    setPortalElement(element);
+
+    // cleaning up the portal element
+    return () => {
+      // delete the programatically created element
+      if (portalCreated && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    };
+  }, [wrapperId]);
+
+  const createWrapperAndAppendToBody = (elementId: string) => {
+    const element = document.createElement("div");
+    element.setAttribute("id", elementId);
+    document.body.appendChild(element);
+    return element;
+  };
+
+  // portalElement state will be null on the very first render.
+  if (!portalElement) return null;
+
+  return createPortal(children, portalElement);
+};
+
+export default PortalNotification;

From 71e52b79f47ec88503c3395612d7c7f15ec971de Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 13:47:25 +0300
Subject: [PATCH 040/374] fixed pr comments

---
 .../destinations/create/[id]/page.tsx         | 26 ++++++++++++++----
 .../app/overview/destinations/create/page.tsx | 26 ++----------------
 .../app/overview/destinations/manage/page.tsx |  5 ++--
 .../overview/destination/destination.tsx      | 27 +++++--------------
 .../destination/new.destination.flow.tsx      | 16 +----------
 5 files changed, 33 insertions(+), 67 deletions(-)

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
index db9aa3786..beea208f5 100644
--- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
+import React, { useEffect } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import {
   getDestination,
@@ -8,7 +8,7 @@ import {
   setDestination,
 } from "@/services";
 import { ManageDestination, OverviewHeader } from "@/components/overview";
-import { useSectionData } from "@/hooks";
+import { useNotification, useSectionData } from "@/hooks";
 import { useRouter, useSearchParams } from "next/navigation";
 import { styled } from "styled-components";
 
@@ -16,7 +16,7 @@ const NewDestinationContainer = styled.div`
   padding: 20px 36px;
 `;
 
-export default function NewDestinationFlow({ onSuccess, onError }) {
+export default function NewDestinationFlow() {
   const { sectionData, setSectionData } = useSectionData(null);
   const searchParams = useSearchParams();
   const { data: destinationType } = useQuery(
@@ -31,7 +31,7 @@ export default function NewDestinationFlow({ onSuccess, onError }) {
     [QUERIES.API_DESTINATION_TYPES],
     getDestinationsTypes
   );
-
+  const { show, Notification } = useNotification();
   const { mutate } = useMutation((body) => setDestination(body));
   const router = useRouter();
 
@@ -47,6 +47,21 @@ export default function NewDestinationFlow({ onSuccess, onError }) {
     setSectionData(currentData);
   }, [data]);
 
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
   function onSubmit(newDestination) {
     const destination = {
       ...newDestination,
@@ -82,6 +97,7 @@ export default function NewDestinationFlow({ onSuccess, onError }) {
           />
         </NewDestinationContainer>
       )}
+      <Notification />
     </>
   );
 }
diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
index 83b9316b3..c50719655 100644
--- a/frontend/webapp/app/overview/destinations/create/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -1,33 +1,11 @@
 "use client";
-import React, { useEffect } from "react";
-import { NOTIFICATION, OVERVIEW } from "@/utils/constants";
-import { useNotification } from "@/hooks";
+import React from "react";
 import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow";
-import { useRouter } from "next/navigation";
 
 export default function CreateDestinationPage() {
-  const { show, Notification } = useNotification();
-  const router = useRouter();
-
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
   return (
     <>
-      <NewDestinationFlow onSuccess={onSuccess} onError={onError} />
-      <Notification />
+      <NewDestinationFlow />
     </>
   );
 }
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
index 6f0456d9b..1a1b99b7b 100644
--- a/frontend/webapp/app/overview/destinations/manage/page.tsx
+++ b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { useNotification } from "@/hooks";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
 import { getDestinations } from "@/services";
 import { useQuery } from "react-query";
@@ -16,7 +16,7 @@ export default function ManageDestinationPage() {
     data: destinationList,
     refetch,
   } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
-  const router = useRouter();
+
   const searchParams = useSearchParams();
 
   useEffect(() => {
@@ -30,7 +30,6 @@ export default function ManageDestinationPage() {
   }, [searchParams, destinationList]);
 
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    router.back();
     refetch();
     show({
       type: NOTIFICATION.SUCCESS,
diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
index 946c0ba33..1b0361712 100644
--- a/frontend/webapp/containers/overview/destination/destination.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -1,15 +1,13 @@
 "use client";
 import React from "react";
 import { KeyvalLoader } from "@/design.system";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getDestinations } from "@/services";
 import { OverviewHeader, DestinationsManagedList } from "@/components/overview";
-import { useNotification } from "@/hooks";
 import { useRouter } from "next/navigation";
 
 export function DestinationContainer() {
-  const { show, Notification } = useNotification();
   const { isLoading: destinationLoading, data: destinationList } = useQuery(
     [QUERIES.API_DESTINATIONS],
     getDestinations
@@ -17,29 +15,18 @@ export function DestinationContainer() {
 
   const router = useRouter();
 
-  function renderDestinationList() {
-    return (
-      <>
-        <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
-        <DestinationsManagedList
-          data={destinationList}
-          onItemClick={({ id }) =>
-            router.push(`destinations/manage?dest=${id}`)
-          }
-          onMenuButtonClick={() => router.push("destinations/create")}
-        />
-      </>
-    );
-  }
-
   if (destinationLoading) {
     return <KeyvalLoader />;
   }
 
   return (
     <>
-      {renderDestinationList()}
-      <Notification />
+      <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
+      <DestinationsManagedList
+        data={destinationList}
+        onItemClick={({ id }) => router.push(`destinations/manage?dest=${id}`)}
+        onMenuButtonClick={() => router.push("destinations/create")}
+      />
     </>
   );
 }
diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
index cb89ac339..2f48b1a05 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -9,24 +9,10 @@ import { DestinationSection } from "@/containers/setup/destination/destination.s
 import { NewDestinationContainer } from "./destination.styled";
 import { useRouter } from "next/navigation";
 
-export function NewDestinationFlow({ onSuccess, onError }) {
+export function NewDestinationFlow() {
   const { sectionData, setSectionData } = useSectionData(null);
-
-  const { mutate } = useMutation((body) => setDestination(body));
   const router = useRouter();
 
-  // function onSubmit(newDestination) {
-  //   const destination = {
-  //     ...newDestination,
-  //     type: sectionData.type,
-  //   };
-
-  //   mutate(destination, {
-  //     onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
-  //     onError,
-  //   });
-  // }
-
   function handleBackPress() {
     router.back();
   }

From 55cae09ab350ae6f8220e7d8f409c91152784e9f Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Wed, 2 Aug 2023 13:47:47 +0300
Subject: [PATCH 041/374] Overview sources (#364)

---
 frontend/webapp/app/page.tsx                  |  3 +-
 .../destination.list.styled.tsx               |  2 -
 .../manage.destination.header.tsx             |  6 +--
 .../manage.destination/manage.destination.tsx | 50 ++++++++++++++-----
 .../overview.header/overview.header.tsx       | 18 +++++--
 .../sources.action.menu.styled.tsx            |  1 +
 .../sources.manage.list.tsx                   |  2 +-
 .../sources.manage.styled.tsx                 |  2 +-
 .../create.connection.form.tsx                | 41 ++++++++-------
 .../destination.card.styled.tsx               |  4 +-
 .../destination.card/destination.card.tsx     |  5 +-
 .../destination.list.styled.tsx               |  6 ++-
 .../filter.sources.options.tsx                |  9 ++--
 .../sources.option.menu.styled.tsx            | 14 ++----
 .../destination/destination.styled.tsx        |  8 ++-
 .../overview/sources/manage.sources.tsx       | 26 ++++------
 .../overview/sources/new.source.flow.tsx      | 37 ++++++++++----
 .../containers/overview/sources/sources.tsx   | 47 +++++++++++++++--
 .../destination.section.styled.tsx            |  1 -
 .../setup/setup.section/setup.section.tsx     |  5 +-
 .../setup/sources/sources.section.tsx         | 24 +++++----
 frontend/webapp/services/sources.tsx          |  3 +-
 frontend/webapp/types/sources.tsx             | 22 ++++++++
 frontend/webapp/utils/constants/string.tsx    |  3 ++
 24 files changed, 226 insertions(+), 113 deletions(-)

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index 1b259b2ed..20d26031b 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -4,7 +4,6 @@ import { useEffect } from "react";
 import { getConfig } from "@/services/config";
 import { useRouter } from "next/navigation";
 import { ROUTES, CONFIG, QUERIES } from "@/utils/constants";
-import { KeyvalLoader } from "@/design.system";
 
 export default function App() {
   const router = useRouter();
@@ -16,7 +15,6 @@ export default function App() {
 
   function renderCurrentPage() {
     const { installation } = data;
-
     const state =
       installation === CONFIG.APPS_SELECTED
         ? `?state=${CONFIG.APPS_SELECTED}`
@@ -25,6 +23,7 @@ export default function App() {
       case CONFIG.NEW:
       case CONFIG.APPS_SELECTED:
         router.push(`${ROUTES.SETUP}${state}`);
+        break;
       case CONFIG.FINISHED:
         router.push(ROUTES.OVERVIEW);
     }
diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index c06fdca16..f172a32f9 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -1,11 +1,9 @@
 import { styled } from "styled-components";
 
 export const ManagedListWrapper = styled.div`
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
-  overflow-y: scroll;
   padding: 0px 36px;
   padding-bottom: 50px;
 `;
diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
index e38dff4e7..59bc496cd 100644
--- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
@@ -26,9 +26,7 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageDestinationHeader({
-  data: { image_url, display_name, type },
-}) {
+export function ManageDestinationHeader({ data: { image_url, display_name } }) {
   return (
     <ManageDestinationHeaderWrapper>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
@@ -36,8 +34,6 @@ export function ManageDestinationHeader({
         <KeyvalText size={24} weight={700}>
           {display_name}
         </KeyvalText>
-
-        <KeyvalText size={20}>{type}</KeyvalText>
       </TextWrapper>
     </ManageDestinationHeaderWrapper>
   );
diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
index d129dea5f..51fd8d3cb 100644
--- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { styled } from "styled-components";
 import { Back } from "@/assets/icons/overview";
-import { CreateConnectionForm } from "@/components/setup";
+import { CreateConnectionForm, QuickHelp } from "@/components/setup";
 import { KeyvalText } from "@/design.system";
 import { SETUP } from "@/utils/constants";
 import { ManageDestinationHeader } from "../manage.destination.header/manage.destination.header";
@@ -25,6 +25,13 @@ const BackButtonWrapper = styled.div`
   }
 `;
 
+const CreateConnectionWrapper = styled.div`
+  display: flex;
+  gap: 200px;
+  overflow: scroll;
+  scrollbar-width: none;
+`;
+
 export function ManageDestination({
   destinationType,
   selectedDestination,
@@ -32,6 +39,18 @@ export function ManageDestination({
   onSubmit,
   onDelete,
 }: ManageDestinationProps) {
+  const videoList = useMemo(
+    () =>
+      destinationType?.fields
+        ?.filter((field) => field?.video_url)
+        ?.map((field) => ({
+          name: field.display_name,
+          src: field.video_url,
+          thumbnail_url: field.thumbnail_url,
+        })),
+    [destinationType]
+  );
+
   return (
     <>
       {onBackClick && (
@@ -41,17 +60,22 @@ export function ManageDestination({
         </BackButtonWrapper>
       )}
       <ManageDestinationHeader data={selectedDestination} />
-      <CreateConnectionForm
-        fields={destinationType?.fields}
-        destinationNameValue={selectedDestination?.name}
-        dynamicFieldsValues={selectedDestination?.fields}
-        checkboxValues={selectedDestination?.signals}
-        supportedSignals={selectedDestination?.supported_signals}
-        onSubmit={(data) => onSubmit(data)}
-      />
-      {onDelete && (
-        <FormDangerZone onDelete={onDelete} data={selectedDestination} />
-      )}
+      <CreateConnectionWrapper>
+        <div>
+          <CreateConnectionForm
+            fields={destinationType?.fields}
+            destinationNameValue={selectedDestination?.name}
+            dynamicFieldsValues={selectedDestination?.fields}
+            checkboxValues={selectedDestination?.signals}
+            supportedSignals={selectedDestination?.supported_signals}
+            onSubmit={(data) => onSubmit(data)}
+          />
+          {onDelete && (
+            <FormDangerZone onDelete={onDelete} data={selectedDestination} />
+          )}
+        </div>
+        {videoList?.length > 0 && <QuickHelp data={videoList} />}
+      </CreateConnectionWrapper>
     </>
   );
 }
diff --git a/frontend/webapp/components/overview/overview.header/overview.header.tsx b/frontend/webapp/components/overview/overview.header/overview.header.tsx
index a515ec21f..c492495c2 100644
--- a/frontend/webapp/components/overview/overview.header/overview.header.tsx
+++ b/frontend/webapp/components/overview/overview.header/overview.header.tsx
@@ -14,20 +14,26 @@ const OverviewHeaderContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 24px;
   border-bottom: 2px solid rgba(255, 255, 255, 0.08);
   background: ${({ theme }) => theme.colors.light_dark};
 `;
 
 const BackButtonWrapper = styled.div`
   display: flex;
-  margin-bottom: 8px;
+  margin: 24px;
+  margin-bottom: 0;
   cursor: pointer;
   p {
     cursor: pointer !important;
   }
 `;
 
+const TextWrapper = styled.div`
+  margin-top: 24px;
+  margin-left: 24px;
+  margin-bottom: 24px;
+`;
+
 export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) {
   return (
     <OverviewHeaderContainer>
@@ -37,9 +43,11 @@ export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) {
           <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
         </BackButtonWrapper>
       )}
-      <KeyvalText size={32} weight={700}>
-        {title}
-      </KeyvalText>
+      <TextWrapper>
+        <KeyvalText size={32} weight={700}>
+          {title}
+        </KeyvalText>
+      </TextWrapper>
     </OverviewHeaderContainer>
   );
 }
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index ee4c046ad..146df0a97 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -4,6 +4,7 @@ export const SourcesMenuWrapper = styled.div`
   width: 100%;
   margin: 32px 0;
   display: flex;
+  align-items: center;
   justify-content: space-between;
 `;
 
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
index fa63eda5a..b5a82fad5 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -17,7 +17,7 @@ interface SourcesManagedListProps {
 export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
   function renderSources() {
     return data.map((source: ManagedSource) => (
-      <SourceManagedCard item={source} />
+      <SourceManagedCard key={source?.name} item={source} />
     ));
   }
 
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index ffbdffed2..3fd4cad8d 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -27,7 +27,7 @@ export const EmptyListWrapper = styled.div`
 `;
 
 export const ManagedListWrapper = styled.div`
-  height: 75%;
+  max-height: 72%;
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
index c5cfd3bc7..107063fd8 100644
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
+++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
@@ -105,11 +105,16 @@ export function CreateConnectionForm({
   }
 
   function isFormValid() {
-    const dynamicFieldsValues = Object.values(dynamicFields);
+    const areDynamicFieldsFilled = Object.values(dynamicFields).every(
+      (field) => field
+    );
+
+    const isFieldLengthMatching =
+      (fields?.length ?? 0) ===
+      (dynamicFields ? Object.keys(dynamicFields).length : 0);
+
     const isValid =
-      !!destinationName &&
-      dynamicFieldsValues.every((field: Field) => field) &&
-      dynamicFieldsValues.length === fields?.length;
+      !!destinationName && areDynamicFieldsFilled && isFieldLengthMatching;
 
     setIsCreateButtonDisabled(!isValid);
   }
@@ -134,19 +139,21 @@ export function CreateConnectionForm({
           ? SETUP.UPDATE_CONNECTION
           : SETUP.CREATE_CONNECTION}
       </KeyvalText>
-      <ConnectionMonitorsWrapper>
-        <KeyvalText size={14}>{SETUP.CONNECTION_MONITORS}</KeyvalText>
-        <CheckboxWrapper>
-          {selectedMonitors.map((checkbox) => (
-            <KeyvalCheckbox
-              key={checkbox?.id}
-              value={checkbox?.checked}
-              onChange={() => handleCheckboxChange(checkbox?.id)}
-              label={checkbox?.label}
-            />
-          ))}
-        </CheckboxWrapper>
-      </ConnectionMonitorsWrapper>
+      {selectedMonitors?.length > 1 && (
+        <ConnectionMonitorsWrapper>
+          <KeyvalText size={14}>{SETUP.CONNECTION_MONITORS}</KeyvalText>
+          <CheckboxWrapper>
+            {selectedMonitors.map((checkbox) => (
+              <KeyvalCheckbox
+                key={checkbox?.id}
+                value={checkbox?.checked}
+                onChange={() => handleCheckboxChange(checkbox?.id)}
+                label={checkbox?.label}
+              />
+            ))}
+          </CheckboxWrapper>
+        </ConnectionMonitorsWrapper>
+      )}
       <FieldWrapper>
         <KeyvalInput
           style={{ height: 36 }}
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
index a2854b3bd..17e6a2a89 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
@@ -10,7 +10,9 @@ export const DestinationCardWrapper = styled.div`
 `;
 
 export const ApplicationNameWrapper = styled.div`
-  display: inline-block;
+  display: flex;
+  align-items: center;
   text-overflow: ellipsis;
   max-width: 224px;
+  height: 40px;
 `;
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 b36bf93f5..316f81939 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -8,9 +8,8 @@ import {
 } from "./destination.card.styled";
 
 const TEXT_STYLE: React.CSSProperties = {
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  overflow: "hidden",
+  overflowWrap: "break-word",
+  textAlign: "center",
 };
 const LOGO_STYLE: React.CSSProperties = { padding: 4, backgroundColor: "#fff" };
 const TAP_STYLE: React.CSSProperties = { padding: "4px 8px", gap: 4 };
diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
index 5895538c2..1515a8416 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -13,7 +13,11 @@ export const DestinationListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
-  overflow-y: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 `;
 
 export const EmptyListWrapper = styled.div`
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
index 9b5934c2b..d39fa2e7a 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-import {
-  DropdownWrapper,
-  FilterMenuWrapper,
-} from "./sources.option.menu.styled";
+import { DropdownWrapper } from "./sources.option.menu.styled";
 import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from "@/design.system";
 import { SETUP } from "@/utils/constants";
 
@@ -17,7 +14,7 @@ export function FilterSourcesOptions({
   }
 
   return (
-    <FilterMenuWrapper>
+    <>
       <KeyvalSearchInput
         value={searchFilter}
         onChange={(e) => setSearchFilter(e.target.value)}
@@ -30,6 +27,6 @@ export function FilterSourcesOptions({
           onChange={handleDropDownChange}
         />
       </DropdownWrapper>
-    </FilterMenuWrapper>
+    </>
   );
 }
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
index 33ae15b5f..0c05c9c59 100644
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
@@ -5,16 +5,9 @@ export const SourcesOptionMenuWrapper = styled.section`
   align-items: center;
   gap: 24px;
   padding: 40px 0 0 0;
-`;
-
-export const FilterMenuWrapper = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-
-  @media screen and (max-width: 1400px) {
-    flex-wrap: wrap;
-    width: 90%;
+  flex-wrap: wrap;
+  @media screen and (max-width: 1650px) {
+    width: 85%;
   }
 `;
 
@@ -34,5 +27,4 @@ export const CheckboxWrapper = styled.div`
 
 export const SwitcherWrapper = styled.div`
   min-width: 90px;
-  margin-left: 24px;
 `;
diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx
index fd3764d16..cac5196dd 100644
--- a/frontend/webapp/containers/overview/destination/destination.styled.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx
@@ -2,8 +2,12 @@ import styled from "styled-components";
 
 export const DestinationContainerWrapper = styled.div`
   height: 100vh;
-  width: 100%;
-  overflow-y: scroll;
+  overflow-y: hidden;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 `;
 
 export const NewDestinationContainer = styled.div`
diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx
index 85fbef48e..af0e0daa9 100644
--- a/frontend/webapp/containers/overview/sources/manage.sources.tsx
+++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx
@@ -1,16 +1,18 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
-import { KeyvalLoader } from "@/design.system";
 import { QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
-import { getNamespaces, getSources } from "@/services";
+import { getNamespaces } from "@/services";
 import { SourcesActionMenu, SourcesManagedList } from "@/components/overview";
 import { MenuWrapper } from "./sources.styled";
-import { ManagedSource } from "@/types/sources";
+import { ManagedSource, Namespace } from "@/types/sources";
 
-export function ManageSources({ setDisplayNewSourceFlow }) {
+const DEFAULT_FILTER = { name: "default", selected: false, totalApps: 0 };
+
+export function ManageSources({ setDisplayNewSourceFlow, sources }) {
   const [searchFilter, setSearchFilter] = useState<string>("");
-  const [currentNamespace, setCurrentNamespace] = useState<any>(null);
+  const [currentNamespace, setCurrentNamespace] =
+    useState<Namespace>(DEFAULT_FILTER);
 
   const { data: namespaces } = useQuery(
     [QUERIES.API_NAMESPACES],
@@ -23,19 +25,13 @@ export function ManageSources({ setDisplayNewSourceFlow }) {
 
   const namespacesList = useMemo(
     () =>
-      namespaces?.namespaces?.map((item: any, index: number) => ({
+      namespaces?.namespaces?.map((item: Namespace, index: number) => ({
         id: index,
         label: item.name,
       })),
     [namespaces]
   );
 
-  const {
-    data: sources,
-    refetch,
-    isLoading,
-  } = useQuery([QUERIES.API_SOURCES], getSources);
-
   function filterByNamespace() {
     return currentNamespace
       ? sources?.filter(
@@ -44,7 +40,7 @@ export function ManageSources({ setDisplayNewSourceFlow }) {
       : sources;
   }
 
-  function filterBySearchQuery(data) {
+  function filterBySearchQuery(data: ManagedSource[]) {
     return searchFilter
       ? data?.filter((item: ManagedSource) =>
           item.name.toLowerCase().includes(searchFilter.toLowerCase())
@@ -57,10 +53,6 @@ export function ManageSources({ setDisplayNewSourceFlow }) {
     return filterBySearchQuery(data);
   }
 
-  if (isLoading) {
-    return <KeyvalLoader />;
-  }
-
   return (
     <>
       <MenuWrapper>
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index 77f763455..5152767ba 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -7,20 +7,36 @@ import theme from "@/styles/palette";
 import { NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
 import { useMutation } from "react-query";
 import { setNamespaces } from "@/services";
+import { SelectedSources } from "@/types/sources";
 
-export function NewSourceFlow() {
+export function NewSourceFlow({ onSuccess, sources }) {
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
-  const { mutate } = useMutation((body) => setNamespaces(body));
+  const { mutate } = useMutation((body: SelectedSources) =>
+    setNamespaces(body)
+  );
   const { show, Notification } = useNotification();
 
-  function handleNewSource() {
-    mutate(sectionData, {
-      onSuccess: () => {
-        setSectionData({});
-      },
+  function updateSectionDataWithSources() {
+    const sourceNamesSet = new Set(sources.map((source) => source.name));
+    const updatedSectionData: SelectedSources = {};
+
+    for (const key in sectionData) {
+      const { objects, ...rest } = sectionData[key];
+      const updatedObjects = objects.map((item) => ({
+        ...item,
+        selected: item?.selected || sourceNamesSet.has(item.name),
+      }));
+
+      updatedSectionData[key] = {
+        ...rest,
+        objects: updatedObjects,
+      };
+    }
+
+    mutate(updatedSectionData, {
+      onSuccess,
       onError: ({ response }) => {
         const message = response?.data?.message || SETUP.ERROR;
-        console.log({ response });
         show({
           type: NOTIFICATION.ERROR,
           message,
@@ -33,7 +49,10 @@ export function NewSourceFlow() {
     <SourcesSectionWrapper>
       <ButtonWrapper>
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
-        <KeyvalButton onClick={handleNewSource} style={{ width: 110 }}>
+        <KeyvalButton
+          onClick={updateSectionDataWithSources}
+          style={{ width: 110 }}
+        >
           <KeyvalText weight={600} color={theme.text.dark_button}>
             {OVERVIEW.CONNECT}
           </KeyvalText>
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index 58bc728b3..fa2191caf 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,20 +1,56 @@
 "use client";
-import React, { useState } from "react";
-import { OVERVIEW } from "@/utils/constants";
+import React, { useEffect, useState } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
 import { NewSourceFlow } from "./new.source.flow";
 import { ManageSources } from "./manage.sources";
+import { useNotification } from "@/hooks";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
 
 export function SourcesContainer() {
-  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState(false);
+  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState<
+    boolean | null
+  >(null);
+  const { show, Notification } = useNotification();
+
+  const { data: sources, refetch } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+
+  useEffect(() => {
+    refetchSources();
+  }, [displayNewSourceFlow]);
+
+  async function refetchSources() {
+    if (displayNewSourceFlow === false) {
+      setTimeout(async () => {
+        refetch();
+      }, 1000);
+    }
+  }
+
+  function onNewSourceSuccess() {
+    setDisplayNewSourceFlow(false);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
+    });
+  }
 
   function renderNewSourceFlow() {
-    return <NewSourceFlow />;
+    return <NewSourceFlow onSuccess={onNewSourceSuccess} sources={sources} />;
   }
 
   function renderSources() {
-    return <ManageSources setDisplayNewSourceFlow={setDisplayNewSourceFlow} />;
+    return (
+      <ManageSources
+        setDisplayNewSourceFlow={setDisplayNewSourceFlow}
+        sources={sources}
+      />
+    );
   }
 
   return (
@@ -26,6 +62,7 @@ export function SourcesContainer() {
         }
       />
       {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
+      <Notification />
     </SourcesContainerWrapper>
   );
 }
diff --git a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
index 78f97cbdd..000d3870c 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
@@ -6,7 +6,6 @@ export const DestinationListContainer = styled.div`
   padding-bottom: 300px;
   margin-top: 24px;
   overflow: scroll;
-  scrollbar-width: none;
 `;
 
 export const EmptyListWrapper = styled.div`
diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
index c50a2581f..53da583c3 100644
--- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx
+++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
@@ -18,6 +18,7 @@ import { STEPS, Step } from "./utils";
 import { setNamespaces } from "@/services";
 import { useSearchParams } from "next/navigation";
 import { useMutation } from "react-query";
+import { SelectedSources } from "@/types/sources";
 
 const STATE = "state";
 
@@ -30,7 +31,9 @@ const sectionComponents = {
 export function SetupSection() {
   const [currentStep, setCurrentStep] = useState<Step>(STEPS[0]);
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
-  const { mutate } = useMutation((body) => setNamespaces(body));
+  const { mutate } = useMutation((body: SelectedSources) =>
+    setNamespaces(body)
+  );
   const { show, Notification } = useNotification();
 
   const searchParams = useSearchParams();
diff --git a/frontend/webapp/containers/setup/sources/sources.section.tsx b/frontend/webapp/containers/setup/sources/sources.section.tsx
index b765fd13c..6eb6af810 100644
--- a/frontend/webapp/containers/setup/sources/sources.section.tsx
+++ b/frontend/webapp/containers/setup/sources/sources.section.tsx
@@ -3,7 +3,7 @@ import { SourcesList, SourcesOptionMenu } from "@/components/setup";
 import { getApplication, getNamespaces } from "@/services";
 import { LoaderWrapper } from "./sources.section.styled";
 import { useQuery } from "react-query";
-import { QUERIES } from "@/utils/constants";
+import { NOTIFICATION, QUERIES } from "@/utils/constants";
 import { KeyvalLoader } from "@/design.system";
 import { useNotification } from "@/hooks";
 
@@ -32,24 +32,30 @@ export function SourcesSection({ sectionData, setSectionData }: any) {
   useEffect(() => {
     isError &&
       show({
-        type: "error",
+        type: NOTIFICATION.ERROR,
         message: error,
       });
   }, [isError]);
 
-  const namespacesList = useMemo(() => {
-    return data?.namespaces?.map((item: any, index: number) => {
-      return { id: index, label: item.name };
-    });
-  }, [data]);
+  const namespacesList = useMemo(
+    () =>
+      data?.namespaces?.map((item: any, index: number) => ({
+        id: index,
+        label: item.name,
+      })),
+    [data]
+  );
 
   const sourceData = useMemo(() => {
-    const namespace = sectionData[currentNamespace?.name];
-    return searchFilter
+    let namespace = sectionData[currentNamespace?.name];
+    //filter by search query
+    namespace = searchFilter
       ? namespace?.objects.filter((item: any) =>
           item.name.toLowerCase().includes(searchFilter.toLowerCase())
         )
       : namespace?.objects;
+    //remove instrumented applications
+    return namespace?.filter((item: any) => !item.instrumentation_effective);
   }, [searchFilter, currentNamespace, sectionData]);
 
   async function onNameSpaceChange() {
diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx
index 3f6f32148..eb50b72a2 100644
--- a/frontend/webapp/services/sources.tsx
+++ b/frontend/webapp/services/sources.tsx
@@ -1,5 +1,6 @@
 import { API } from "@/utils/constants";
 import { get, post } from "./api";
+import { SelectedSources } from "@/types/sources";
 
 export async function getNamespaces() {
   return await get(API.NAMESPACES);
@@ -9,7 +10,7 @@ export async function getApplication(id: string) {
   return await get(`${API.APPLICATIONS}/${id}`);
 }
 
-export async function setNamespaces(body: any) {
+export async function setNamespaces(body: SelectedSources): Promise<void> {
   return await post(API.NAMESPACES, body);
 }
 
diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx
index 53f44fe6e..7906c4733 100644
--- a/frontend/webapp/types/sources.tsx
+++ b/frontend/webapp/types/sources.tsx
@@ -9,3 +9,25 @@ export interface ManagedSource {
     }
   ];
 }
+
+export interface Namespace {
+  name: string;
+  selected: boolean;
+  totalApps: number;
+}
+
+export interface SelectedSources {
+  [key: string]: {
+    objects: {
+      name: string;
+      selected: boolean;
+      kind: string;
+      app_instrumentation_labeled: boolean | null;
+      ns_instrumentation_labeled: boolean | null;
+      instrumentation_effective: boolean | null;
+      instances: number;
+    };
+    selected_all: boolean;
+    future_selected: boolean;
+  };
+}
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index eb57020dd..53903e8c5 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -67,6 +67,9 @@ export const OVERVIEW = {
   DESTINATION_UPDATE_SUCCESS: "Destination updated successfully",
   DESTINATION_CREATED_SUCCESS: "Destination created successfully",
   DESTINATION_DELETED_SUCCESS: "Destination deleted successfully",
+  SOURCE_UPDATE_SUCCESS: "Source updated successfully",
+  SOURCE_CREATED_SUCCESS: "Source created successfully",
+  SOURCE_DELETED_SUCCESS: "Source deleted successfully",
   MANAGE: "Manage",
   DELETE: "Delete",
   DELETE_DESTINATION: "Delete Destination",

From 60a61ee0fbf8b5d4898fda3c7bdeb9f3d2b1c99c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 14:26:19 +0300
Subject: [PATCH 042/374] WIP

---
 .../destinations/create/[id]/page.tsx         | 10 ++++--
 .../app/overview/destinations/manage/page.tsx | 34 ++++++++++---------
 .../manage.destination/manage.destination.tsx |  6 ++--
 .../overview/destination/destination.tsx      |  8 +++--
 .../destination/new.destination.flow.tsx      | 29 ++++------------
 .../setup/destination/destination.section.tsx |  7 ++--
 frontend/webapp/utils/constants/routes.tsx    |  3 ++
 7 files changed, 45 insertions(+), 52 deletions(-)

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
index beea208f5..9a0269686 100644
--- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -12,6 +12,8 @@ import { useNotification, useSectionData } from "@/hooks";
 import { useRouter, useSearchParams } from "next/navigation";
 import { styled } from "styled-components";
 
+const DEST = "dest";
+
 const NewDestinationContainer = styled.div`
   padding: 20px 36px;
 `;
@@ -35,8 +37,10 @@ export default function NewDestinationFlow() {
   const { mutate } = useMutation((body) => setDestination(body));
   const router = useRouter();
 
-  useEffect(() => {
-    const search = searchParams.get("dest");
+  useEffect(onPageLoad, [data]);
+
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
     let currentData = null;
     data?.categories.forEach((item) => {
       const filterItem = item.items.filter((dest) => dest?.type === search);
@@ -45,7 +49,7 @@ export default function NewDestinationFlow() {
       }
     });
     setSectionData(currentData);
-  }, [data]);
+  }
 
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
     show({
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
index 1a1b99b7b..2b20da8cd 100644
--- a/frontend/webapp/app/overview/destinations/manage/page.tsx
+++ b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -7,10 +7,12 @@ import UpdateDestinationFlow from "@/containers/overview/destination/update.dest
 import { getDestinations } from "@/services";
 import { useQuery } from "react-query";
 
+const DEST = "dest";
+
 export default function ManageDestinationPage() {
   const [selectedDestination, setSelectedDestination] = useState<any>(null);
-
   const { show, Notification } = useNotification();
+
   const {
     isLoading: destinationLoading,
     data: destinationList,
@@ -19,15 +21,17 @@ export default function ManageDestinationPage() {
 
   const searchParams = useSearchParams();
 
-  useEffect(() => {
-    const search = searchParams.get("dest");
+  useEffect(onPageLoad, [searchParams, destinationList]);
+
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
     const currentDestination = destinationList?.filter(
-      (item) => item?.id === search
+      ({ id }) => id === search
     );
     if (currentDestination?.length) {
       setSelectedDestination(currentDestination[0]);
     }
-  }, [searchParams, destinationList]);
+  }
 
   function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
     refetch();
@@ -45,20 +49,18 @@ export default function ManageDestinationPage() {
     });
   }
 
-  if (destinationLoading) {
+  if (destinationLoading || !selectedDestination) {
     return;
   }
 
   return (
-    selectedDestination && (
-      <>
-        <UpdateDestinationFlow
-          selectedDestination={selectedDestination}
-          onSuccess={onSuccess}
-          onError={onError}
-        />
-        <Notification />
-      </>
-    )
+    <>
+      <UpdateDestinationFlow
+        selectedDestination={selectedDestination}
+        onSuccess={onSuccess}
+        onError={onError}
+      />
+      <Notification />
+    </>
   );
 }
diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
index 32e3321de..839e5e635 100644
--- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
@@ -25,10 +25,10 @@ const BackButtonWrapper = styled.div`
   }
 `;
 
-const CreateConnectionWrapper = styled.div`
+const CreateConnectionWrapper = styled.div<{ expand: boolean | undefined }>`
   display: flex;
   gap: 200px;
-  height: 530px;
+  height: ${({ expand }) => (expand ? 630 : 530)}px;
   overflow: scroll;
   scrollbar-width: none;
 `;
@@ -61,7 +61,7 @@ export function ManageDestination({
         </BackButtonWrapper>
       )}
       <ManageDestinationHeader data={selectedDestination} />
-      <CreateConnectionWrapper>
+      <CreateConnectionWrapper expand={!!onDelete || false}>
         <div>
           <CreateConnectionForm
             fields={destinationType?.fields}
diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
index 1b0361712..8ed985640 100644
--- a/frontend/webapp/containers/overview/destination/destination.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { KeyvalLoader } from "@/design.system";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
+import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getDestinations } from "@/services";
 import { OverviewHeader, DestinationsManagedList } from "@/components/overview";
@@ -24,8 +24,10 @@ export function DestinationContainer() {
       <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
       <DestinationsManagedList
         data={destinationList}
-        onItemClick={({ id }) => router.push(`destinations/manage?dest=${id}`)}
-        onMenuButtonClick={() => router.push("destinations/create")}
+        onItemClick={({ id }) =>
+          router.push(`${ROUTES.UPDATE_DESTINATION}${id}`)
+        }
+        onMenuButtonClick={() => router.push(ROUTES.CREATE_DESTINATION)}
       />
     </>
   );
diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
index 2f48b1a05..27c0dddc7 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -1,41 +1,26 @@
 "use client";
 import React from "react";
-import { OVERVIEW } from "@/utils/constants";
-import { useMutation } from "react-query";
-import { setDestination } from "@/services";
+import { OVERVIEW, ROUTES } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
-import { useSectionData } from "@/hooks";
 import { DestinationSection } from "@/containers/setup/destination/destination.section";
 import { NewDestinationContainer } from "./destination.styled";
 import { useRouter } from "next/navigation";
 
 export function NewDestinationFlow() {
-  const { sectionData, setSectionData } = useSectionData(null);
   const router = useRouter();
 
-  function handleBackPress() {
-    router.back();
-  }
-
-  function renderSelectNewDestination() {
-    return (
-      <DestinationSection
-        sectionData={sectionData}
-        setSectionData={(data) => {
-          router.push(`/overview/destinations/create/manage?dest=${data.type}`);
-        }}
-      />
-    );
-  }
-
   return (
     <>
       <OverviewHeader
         title={OVERVIEW.MENU.DESTINATIONS}
-        onBackClick={handleBackPress}
+        onBackClick={() => router.back()}
       />
       <NewDestinationContainer>
-        {renderSelectNewDestination()}
+        <DestinationSection
+          setSectionData={(data) => {
+            router.push(`${ROUTES.MANAGE_DESTINATION}${data.type}`);
+          }}
+        />
       </NewDestinationContainer>
     </>
   );
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index e8dd0a051..a7e4440c6 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useQuery } from "react-query";
-import { QUERIES, SETUP } from "@/utils/constants";
+import { NOTIFICATION, QUERIES, SETUP } from "@/utils/constants";
 import { MONITORING_OPTIONS } from "@/components/setup/destination/utils";
 import { DestinationList, DestinationOptionMenu } from "@/components/setup";
 import Empty from "@/assets/images/empty-list.svg";
@@ -20,12 +20,10 @@ import { useNotification } from "@/hooks";
 import { getDestinationsTypes } from "@/services";
 
 type DestinationSectionProps = {
-  sectionData: any;
   setSectionData: (data: any) => void;
 };
 
 export function DestinationSection({
-  sectionData,
   setSectionData,
 }: DestinationSectionProps) {
   const [searchFilter, setSearchFilter] = useState<string>("");
@@ -42,7 +40,7 @@ export function DestinationSection({
   useEffect(() => {
     isError &&
       show({
-        type: "error",
+        type: NOTIFICATION.ERROR,
         message: error,
       });
   }, [isError]);
@@ -72,7 +70,6 @@ export function DestinationSection({
           <DestinationList
             key={category.name}
             data={category}
-            sectionData={sectionData}
             onItemClick={(item: any) => setSectionData(item)}
           />
         )
diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx
index a27e3f561..571975b38 100644
--- a/frontend/webapp/utils/constants/routes.tsx
+++ b/frontend/webapp/utils/constants/routes.tsx
@@ -4,4 +4,7 @@ export const ROUTES = {
   SOURCES: "/overview/sources",
   DESTINATIONS: "/overview/destinations",
   NEW_DESTINATION: "/setup?state=destinations",
+  MANAGE_DESTINATION: "/overview/destinations/create/manage?dest=",
+  UPDATE_DESTINATION: "destinations/manage?dest=",
+  CREATE_DESTINATION: "destinations/create",
 };

From c44837e17f314678bdd4d146cc9720717f4ad890 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 14:35:39 +0300
Subject: [PATCH 043/374] WIP

---
 .../webapp/components/side.menu/menu/menu.tsx     | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx
index e17eb8022..bbef40e4b 100644
--- a/frontend/webapp/components/side.menu/menu/menu.tsx
+++ b/frontend/webapp/components/side.menu/menu/menu.tsx
@@ -4,7 +4,7 @@ import { MenuContainer, LogoWrapper, MenuItemsWrapper } from "./menu.styled";
 import { KeyvalText } from "@/design.system";
 import MenuItem from "../menu.item/menu.item";
 import { useRouter } from "next/navigation";
-import { OVERVIEW } from "@/utils/constants";
+import { OVERVIEW, ROUTES } from "@/utils/constants";
 import { MENU_ITEMS } from "./items";
 
 export interface MenuItem {
@@ -26,12 +26,13 @@ export function Menu() {
   useEffect(onLoad, []);
 
   function onLoad() {
-    const currentItem = MENU_ITEMS.find((item) => {
-      return item.navigate === window.location.pathname;
-    });
-    if (currentItem?.id !== currentMenuItem.id) {
-      handleMenuItemClick(currentItem);
-    }
+    const currentItem = MENU_ITEMS.find(
+      ({ navigate }) =>
+        navigate !== ROUTES.OVERVIEW &&
+        window.location.pathname.includes(navigate)
+    );
+
+    currentItem && setCurrentMenuItem(currentItem);
   }
 
   function handleMenuItemClick(item) {

From 924cee2c18d612f7348f49b3511e1977e3e4a642 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 15:27:34 +0300
Subject: [PATCH 044/374] fixed pr comments

---
 .../destinations/create/[id]/page.tsx         | 28 ++++++-----
 .../app/overview/destinations/create/page.tsx |  8 +---
 .../app/overview/destinations/manage/page.tsx |  3 +-
 .../webapp/components/side.menu/menu/menu.tsx |  3 +-
 frontend/webapp/containers/overview/index.tsx |  1 +
 .../notification/notification.tsx             | 22 ++++-----
 .../notification/portal.notification.tsx      | 46 -------------------
 7 files changed, 32 insertions(+), 79 deletions(-)
 delete mode 100644 frontend/webapp/design.system/notification/portal.notification.tsx

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
index 9a0269686..f4082de12 100644
--- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -20,7 +20,11 @@ const NewDestinationContainer = styled.div`
 
 export default function NewDestinationFlow() {
   const { sectionData, setSectionData } = useSectionData(null);
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation((body) => setDestination(body));
   const searchParams = useSearchParams();
+  const router = useRouter();
+
   const { data: destinationType } = useQuery(
     [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
     () => getDestination(sectionData?.type),
@@ -29,25 +33,29 @@ export default function NewDestinationFlow() {
     }
   );
 
-  const { isLoading, data } = useQuery(
+  const { data: destinationsList } = useQuery(
     [QUERIES.API_DESTINATION_TYPES],
     getDestinationsTypes
   );
-  const { show, Notification } = useNotification();
-  const { mutate } = useMutation((body) => setDestination(body));
-  const router = useRouter();
 
-  useEffect(onPageLoad, [data]);
+  useEffect(onPageLoad, [destinationsList]);
 
   function onPageLoad() {
     const search = searchParams.get(DEST);
+    if (!destinationsList || !search) return;
+
     let currentData = null;
-    data?.categories.forEach((item) => {
-      const filterItem = item.items.filter((dest) => dest?.type === search);
+
+    for (const category of destinationsList.categories) {
+      if (currentData) {
+        break;
+      }
+      const filterItem = category.items.filter(({ type }) => type === search);
       if (filterItem.length) {
         currentData = filterItem[0];
       }
-    });
+    }
+
     setSectionData(currentData);
   }
 
@@ -82,10 +90,6 @@ export default function NewDestinationFlow() {
     router.back();
   }
 
-  if (isLoading) {
-    return;
-  }
-
   return (
     <>
       <OverviewHeader
diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
index c50719655..3b9a92b41 100644
--- a/frontend/webapp/app/overview/destinations/create/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -1,11 +1,7 @@
 "use client";
 import React from "react";
-import { NewDestinationFlow } from "@/containers/overview/destination/new.destination.flow";
+import { NewDestinationFlow } from "@/containers/overview";
 
 export default function CreateDestinationPage() {
-  return (
-    <>
-      <NewDestinationFlow />
-    </>
-  );
+  return <NewDestinationFlow />;
 }
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
index 2b20da8cd..cd92c828f 100644
--- a/frontend/webapp/app/overview/destinations/manage/page.tsx
+++ b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -6,6 +6,7 @@ import { useSearchParams } from "next/navigation";
 import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
 import { getDestinations } from "@/services";
 import { useQuery } from "react-query";
+import { KeyvalLoader } from "@/design.system";
 
 const DEST = "dest";
 
@@ -50,7 +51,7 @@ export default function ManageDestinationPage() {
   }
 
   if (destinationLoading || !selectedDestination) {
-    return;
+    return <KeyvalLoader />;
   }
 
   return (
diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx
index bbef40e4b..814885343 100644
--- a/frontend/webapp/components/side.menu/menu/menu.tsx
+++ b/frontend/webapp/components/side.menu/menu/menu.tsx
@@ -36,9 +36,8 @@ export function Menu() {
   }
 
   function handleMenuItemClick(item) {
-    if (!item) return;
     setCurrentMenuItem(item);
-    router?.push(item?.navigate);
+    router.push(item?.navigate);
   }
 
   function renderMenuItemsList() {
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 2a26e3504..e7895d4e4 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -1,3 +1,4 @@
 export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
 export { SourcesContainer } from "./sources/sources";
+export { NewDestinationFlow } from "./destination/new.destination.flow";
diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx
index bd8af8ad0..c0352b40e 100644
--- a/frontend/webapp/design.system/notification/notification.tsx
+++ b/frontend/webapp/design.system/notification/notification.tsx
@@ -7,7 +7,7 @@ import { KeyvalText } from "../text/text";
 import CloseIcon from "@/assets/icons/X-blue.svg";
 import SuccessIcon from "@/assets/icons/success-notification.svg";
 import ErrorIcon from "@/assets/icons/error-notification.svg";
-import PortalNotification from "./portal.notification";
+
 interface KeyvalNotificationProps {
   type: "success" | "error" | "warning" | "info";
   message: string;
@@ -48,16 +48,14 @@ export function KeyvalNotification({
   }
 
   return (
-    <PortalNotification wrapperId="notification-portal">
-      <NotificationContainer>
-        <StyledNotification style={getNotificationStyle()}>
-          {getIcon()}
-          <KeyvalText weight={500} size={14}>
-            {message}
-          </KeyvalText>
-          <CloseIcon onClick={onClose} />
-        </StyledNotification>
-      </NotificationContainer>
-    </PortalNotification>
+    <NotificationContainer>
+      <StyledNotification style={getNotificationStyle()}>
+        {getIcon()}
+        <KeyvalText weight={500} size={14}>
+          {message}
+        </KeyvalText>
+        <CloseIcon onClick={onClose} />
+      </StyledNotification>
+    </NotificationContainer>
   );
 }
diff --git a/frontend/webapp/design.system/notification/portal.notification.tsx b/frontend/webapp/design.system/notification/portal.notification.tsx
deleted file mode 100644
index d220c0fa8..000000000
--- a/frontend/webapp/design.system/notification/portal.notification.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useState, useLayoutEffect } from "react";
-import { createPortal } from "react-dom";
-
-interface Props {
-  children: JSX.Element;
-  wrapperId: string;
-}
-
-const PortalNotification = ({ children, wrapperId }: Props) => {
-  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
-
-  useLayoutEffect(() => {
-    let element = document.getElementById(wrapperId) as HTMLElement;
-    let portalCreated = false;
-    // if element is not found with wrapperId or wrapperId is not provided,
-    // create and append to body
-    if (!element) {
-      element = createWrapperAndAppendToBody(wrapperId);
-      portalCreated = true;
-    }
-
-    setPortalElement(element);
-
-    // cleaning up the portal element
-    return () => {
-      // delete the programatically created element
-      if (portalCreated && element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-    };
-  }, [wrapperId]);
-
-  const createWrapperAndAppendToBody = (elementId: string) => {
-    const element = document.createElement("div");
-    element.setAttribute("id", elementId);
-    document.body.appendChild(element);
-    return element;
-  };
-
-  // portalElement state will be null on the very first render.
-  if (!portalElement) return null;
-
-  return createPortal(children, portalElement);
-};
-
-export default PortalNotification;

From 004ca63fbd8fddeaf9ac5de0a23dab7e1af714ac Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 16:25:12 +0300
Subject: [PATCH 045/374] restruce file system

---
 .../app/overview/sources/create/page.tsx      | 33 ++++++++++
 .../app/overview/sources/manage/page.tsx      | 10 +++
 frontend/webapp/app/overview/sources/page.tsx |  6 +-
 .../overview/sources/manage.sources.tsx       |  4 +-
 .../containers/overview/sources/sources.tsx   | 62 +++----------------
 frontend/webapp/utils/constants/routes.tsx    |  1 +
 6 files changed, 56 insertions(+), 60 deletions(-)
 create mode 100644 frontend/webapp/app/overview/sources/create/page.tsx
 create mode 100644 frontend/webapp/app/overview/sources/manage/page.tsx

diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx
new file mode 100644
index 000000000..617b81251
--- /dev/null
+++ b/frontend/webapp/app/overview/sources/create/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+import React from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OverviewHeader } from "@/components/overview";
+import { useNotification } from "@/hooks";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
+import { NewSourceFlow } from "@/containers/overview/sources/new.source.flow";
+import { useRouter } from "next/navigation";
+
+export default function CreateNewSourcesPage() {
+  const { show, Notification } = useNotification();
+  const router = useRouter();
+  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
+
+  function onNewSourceSuccess() {
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
+    });
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.SOURCES}
+        onBackClick={() => router.back()}
+      />
+      <NewSourceFlow onSuccess={onNewSourceSuccess} sources={sources} />
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
new file mode 100644
index 000000000..7eef5dc57
--- /dev/null
+++ b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+import React from "react";
+
+export default function ManageSourcePage() {
+  return (
+    <>
+      <div>ManageSourcePage</div>
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx
index 454db1e18..77d0c32f2 100644
--- a/frontend/webapp/app/overview/sources/page.tsx
+++ b/frontend/webapp/app/overview/sources/page.tsx
@@ -3,9 +3,5 @@ import { SourcesContainer } from "@/containers/overview";
 import React from "react";
 
 export default function SourcesOverviewPage() {
-  return (
-    <>
-      <SourcesContainer />
-    </>
-  );
+  return <SourcesContainer />;
 }
diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx
index af0e0daa9..1b3339cac 100644
--- a/frontend/webapp/containers/overview/sources/manage.sources.tsx
+++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx
@@ -9,7 +9,7 @@ import { ManagedSource, Namespace } from "@/types/sources";
 
 const DEFAULT_FILTER = { name: "default", selected: false, totalApps: 0 };
 
-export function ManageSources({ setDisplayNewSourceFlow, sources }) {
+export function ManageSources({ onAddClick, sources }) {
   const [searchFilter, setSearchFilter] = useState<string>("");
   const [currentNamespace, setCurrentNamespace] =
     useState<Namespace>(DEFAULT_FILTER);
@@ -60,7 +60,7 @@ export function ManageSources({ setDisplayNewSourceFlow, sources }) {
           searchFilter={searchFilter}
           setSearchFilter={setSearchFilter}
           data={namespacesList}
-          onAddClick={() => setDisplayNewSourceFlow(true)}
+          onAddClick={onAddClick}
           setCurrentItem={setCurrentNamespace}
         />
       </MenuWrapper>
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index fa2191caf..1eed8288a 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,68 +1,24 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import React from "react";
+import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
-import { NewSourceFlow } from "./new.source.flow";
 import { ManageSources } from "./manage.sources";
-import { useNotification } from "@/hooks";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
+import { useRouter } from "next/navigation";
 
 export function SourcesContainer() {
-  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState<
-    boolean | null
-  >(null);
-  const { show, Notification } = useNotification();
-
-  const { data: sources, refetch } = useQuery(
-    [QUERIES.API_SOURCES],
-    getSources
-  );
-
-  useEffect(() => {
-    refetchSources();
-  }, [displayNewSourceFlow]);
-
-  async function refetchSources() {
-    if (displayNewSourceFlow === false) {
-      setTimeout(async () => {
-        refetch();
-      }, 1000);
-    }
-  }
-
-  function onNewSourceSuccess() {
-    setDisplayNewSourceFlow(false);
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
-    });
-  }
-
-  function renderNewSourceFlow() {
-    return <NewSourceFlow onSuccess={onNewSourceSuccess} sources={sources} />;
-  }
-
-  function renderSources() {
-    return (
-      <ManageSources
-        setDisplayNewSourceFlow={setDisplayNewSourceFlow}
-        sources={sources}
-      />
-    );
-  }
+  const router = useRouter();
+  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
 
   return (
     <SourcesContainerWrapper>
-      <OverviewHeader
-        title={OVERVIEW.MENU.SOURCES}
-        onBackClick={
-          displayNewSourceFlow ? () => setDisplayNewSourceFlow(false) : null
-        }
+      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <ManageSources
+        onAddClick={() => router.push(ROUTES.CREATE_SOURCE)}
+        sources={sources}
       />
-      {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
-      <Notification />
     </SourcesContainerWrapper>
   );
 }
diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx
index 571975b38..b51803d47 100644
--- a/frontend/webapp/utils/constants/routes.tsx
+++ b/frontend/webapp/utils/constants/routes.tsx
@@ -7,4 +7,5 @@ export const ROUTES = {
   MANAGE_DESTINATION: "/overview/destinations/create/manage?dest=",
   UPDATE_DESTINATION: "destinations/manage?dest=",
   CREATE_DESTINATION: "destinations/create",
+  CREATE_SOURCE: "/overview/sources/create",
 };

From cf77635bdb6725fe41ee49050c93bdf26f723166 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 16:36:49 +0300
Subject: [PATCH 046/374] wip

---
 .../app/overview/sources/manage/page.tsx      | 22 +++++++++++++++++--
 .../sources.manage.card.tsx                   |  4 +++-
 .../sources.manage.list.tsx                   | 12 ++++++++--
 .../sources.manage.styled.tsx                 |  4 ++--
 frontend/webapp/utils/constants/routes.tsx    |  1 +
 5 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
index 7eef5dc57..39a5e7dc4 100644
--- a/frontend/webapp/app/overview/sources/manage/page.tsx
+++ b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -1,10 +1,28 @@
 "use client";
-import React from "react";
+import { getSources } from "@/services";
+import { QUERIES } from "@/utils/constants";
+import { useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { useQuery } from "react-query";
+
+const SOURCE = "source";
 
 export default function ManageSourcePage() {
+  const [currentSource, setCurrentSource] = useState(null);
+  const searchParams = useSearchParams();
+
+  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
+
+  useEffect(onPageLoad, [sources]);
+  function onPageLoad() {
+    const search = searchParams.get(SOURCE);
+    const source = sources?.find((item) => item.name === search);
+    source && setCurrentSource(source);
+  }
+
   return (
     <>
-      <div>ManageSourcePage</div>
+      <div>{currentSource?.name}</div>
     </>
   );
 }
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
index 1aa8f559b..a2a695f41 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -20,13 +20,15 @@ const LOGO_STYLE: React.CSSProperties = {
 
 interface SourceManagedCardProps {
   item: ManagedSource;
+  onClick?: () => void;
 }
 const DEPLOYMENT = "deployment";
 export default function SourceManagedCard({
   item = {} as ManagedSource,
+  onClick,
 }: SourceManagedCardProps) {
   return (
-    <CardWrapper>
+    <CardWrapper onClick={onClick}>
       <KeyvalImage
         src={LANGUAGES_LOGOS[item?.languages?.[0].language || ""]}
         width={56}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
index b5a82fad5..dff5f790f 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -8,16 +8,24 @@ import Empty from "@/assets/images/empty-list.svg";
 import SourceManagedCard from "./sources.manage.card";
 import { ManagedSource } from "@/types/sources";
 import { KeyvalText } from "@/design.system";
-import { OVERVIEW } from "@/utils/constants";
+import { OVERVIEW, ROUTES } from "@/utils/constants";
+import { useRouter } from "next/navigation";
 
 interface SourcesManagedListProps {
   data: ManagedSource[];
 }
 
 export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
+  const router = useRouter();
   function renderSources() {
     return data.map((source: ManagedSource) => (
-      <SourceManagedCard key={source?.name} item={source} />
+      <SourceManagedCard
+        key={source?.name}
+        item={source}
+        onClick={() =>
+          router.push(`${ROUTES.MANAGE_SOURCE}?source=${source?.name}`)
+        }
+      />
     ));
   }
 
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index 3fd4cad8d..9a36b4efa 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -12,10 +12,10 @@ export const CardWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 10px;
-  /* cursor: pointer;
+  cursor: pointer;
   &:hover {
     background: var(--dark-mode-dark-1, #07111a81);
-  } */
+  }
 `;
 
 export const EmptyListWrapper = styled.div`
diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx
index b51803d47..6a074d899 100644
--- a/frontend/webapp/utils/constants/routes.tsx
+++ b/frontend/webapp/utils/constants/routes.tsx
@@ -8,4 +8,5 @@ export const ROUTES = {
   UPDATE_DESTINATION: "destinations/manage?dest=",
   CREATE_DESTINATION: "destinations/create",
   CREATE_SOURCE: "/overview/sources/create",
+  MANAGE_SOURCE: "/overview/sources/manage",
 };

From 4616dcfa419eaf7dab69778f04d536a5883afeab Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 2 Aug 2023 17:55:36 +0300
Subject: [PATCH 047/374] add pen icon and danger zone

---
 .../app/overview/sources/manage/page.tsx      | 42 ++++++++++--
 .../app/overview/sources/manage/styled.tsx    | 14 ++++
 .../webapp/assets/icons/overview/index.tsx    |  3 +-
 frontend/webapp/assets/icons/overview/pen.svg |  3 +
 frontend/webapp/components/overview/index.tsx |  1 +
 .../sources/delete.source/delete.source.tsx   | 67 +++++++++++++++++++
 .../manage.source.header.tsx                  | 61 +++++++++++++++++
 frontend/webapp/utils/constants/string.tsx    |  5 ++
 8 files changed, 188 insertions(+), 8 deletions(-)
 create mode 100644 frontend/webapp/app/overview/sources/manage/styled.tsx
 create mode 100644 frontend/webapp/assets/icons/overview/pen.svg
 create mode 100644 frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
 create mode 100644 frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx

diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
index 39a5e7dc4..66ade9994 100644
--- a/frontend/webapp/app/overview/sources/manage/page.tsx
+++ b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -1,19 +1,29 @@
 "use client";
+import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
 import { getSources } from "@/services";
-import { QUERIES } from "@/utils/constants";
-import { useSearchParams } from "next/navigation";
+import { QUERIES, SETUP } from "@/utils/constants";
+import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { useQuery } from "react-query";
+import { ManageSourcePageContainer, BackButtonWrapper } from "./styled";
+import { LANGUAGES_LOGOS } from "@/assets/images";
+import { Back } from "@/assets/icons/overview";
+import { KeyvalText } from "@/design.system";
+import { ManagedSource } from "@/types/sources";
+import { DeleteSource } from "@/components/overview";
 
 const SOURCE = "source";
 
 export default function ManageSourcePage() {
-  const [currentSource, setCurrentSource] = useState(null);
+  const [currentSource, setCurrentSource] = useState<ManagedSource | null>(
+    null
+  );
   const searchParams = useSearchParams();
-
+  const router = useRouter();
   const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
 
   useEffect(onPageLoad, [sources]);
+
   function onPageLoad() {
     const search = searchParams.get(SOURCE);
     const source = sources?.find((item) => item.name === search);
@@ -21,8 +31,26 @@ export default function ManageSourcePage() {
   }
 
   return (
-    <>
-      <div>{currentSource?.name}</div>
-    </>
+    <ManageSourcePageContainer>
+      <BackButtonWrapper onClick={() => router.back()}>
+        <Back width={14} />
+        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+      </BackButtonWrapper>
+      {currentSource && (
+        <ManageSourceHeader
+          display_name={currentSource?.name}
+          image_url={
+            LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+          }
+        />
+      )}
+      <DeleteSource
+        onDelete={() => {}}
+        name={currentSource?.name}
+        image_url={
+          LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+        }
+      />
+    </ManageSourcePageContainer>
   );
 }
diff --git a/frontend/webapp/app/overview/sources/manage/styled.tsx b/frontend/webapp/app/overview/sources/manage/styled.tsx
new file mode 100644
index 000000000..0f67fc4e6
--- /dev/null
+++ b/frontend/webapp/app/overview/sources/manage/styled.tsx
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const ManageSourcePageContainer = styled.div`
+  padding: 32px;
+`;
+
+export const BackButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  p {
+    cursor: pointer !important;
+  }
+`;
diff --git a/frontend/webapp/assets/icons/overview/index.tsx b/frontend/webapp/assets/icons/overview/index.tsx
index f9254c49d..68481e5ca 100644
--- a/frontend/webapp/assets/icons/overview/index.tsx
+++ b/frontend/webapp/assets/icons/overview/index.tsx
@@ -1,6 +1,7 @@
 import KeyvalMiddleware from "./middleware.svg";
 import Folder from "./folder.svg";
 import Plus from "./plus.svg";
+import Pen from "./pen.svg";
 import Back from "./back.svg";
 
-export { KeyvalMiddleware, Folder, Plus, Back };
+export { KeyvalMiddleware, Folder, Plus, Back, Pen };
diff --git a/frontend/webapp/assets/icons/overview/pen.svg b/frontend/webapp/assets/icons/overview/pen.svg
new file mode 100644
index 000000000..03494bea2
--- /dev/null
+++ b/frontend/webapp/assets/icons/overview/pen.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2069 3.58561L9.41438 0.792486C9.32152 0.699603 9.21127 0.625923 9.08993 0.575654C8.96859 0.525385 8.83853 0.499512 8.70719 0.499512C8.57585 0.499512 8.4458 0.525385 8.32446 0.575654C8.20312 0.625923 8.09287 0.699603 8 0.792486L0.29313 8.49999C0.199867 8.59251 0.125926 8.70265 0.0756045 8.824C0.025283 8.94535 -0.000414649 9.07549 5.05934e-06 9.20686V12C5.05934e-06 12.2652 0.105362 12.5196 0.292898 12.7071C0.480435 12.8946 0.734789 13 1.00001 13H3.79313C3.9245 13.0004 4.05464 12.9747 4.17599 12.9244C4.29735 12.8741 4.40748 12.8001 4.50001 12.7069L12.2069 4.99999C12.2998 4.90712 12.3734 4.79687 12.4237 4.67553C12.474 4.55419 12.4999 4.42414 12.4999 4.2928C12.4999 4.16146 12.474 4.0314 12.4237 3.91006C12.3734 3.78872 12.2998 3.67847 12.2069 3.58561ZM10 5.79249L7.20688 2.99999L8.70688 1.49999L11.5 4.29249L10 5.79249Z" fill="#CCD0D2"/>
+</svg>
diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index d6c9f8384..d231bd943 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -3,3 +3,4 @@ export { ManageDestination } from "./destination/manage.destination/manage.desti
 export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list";
 export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list";
 export { SourcesActionMenu } from "./sources/action.menu/sources.action.menu";
+export { DeleteSource } from "./sources/delete.source/delete.source";
diff --git a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
new file mode 100644
index 000000000..173a17bde
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { styled } from "styled-components";
+import { ConnectionsIcons } from "@/components/setup";
+import { DangerZone, KeyvalModal, KeyvalText } from "@/design.system";
+import { ModalPositionX, ModalPositionY } from "@/design.system/modal/types";
+import theme from "@/styles/palette";
+import { OVERVIEW } from "@/utils/constants";
+
+const FieldWrapper = styled.div`
+  margin-top: 32px;
+  width: 348px;
+`;
+
+const IMAGE_STYLE = { border: "solid 1px #ededed" };
+export function DeleteSource({
+  onDelete,
+  name,
+  image_url,
+}: {
+  onDelete: () => void;
+  name: string | undefined;
+  image_url: string;
+}) {
+  const [showModal, setShowModal] = useState(false);
+
+  const modalConfig = {
+    title: OVERVIEW.DELETE_SOURCE,
+    showHeader: true,
+    showOverlay: true,
+    positionX: ModalPositionX.center,
+    positionY: ModalPositionY.center,
+    padding: "20px",
+    footer: {
+      primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE,
+      primaryBtnAction: () => {
+        setShowModal(false);
+      },
+    },
+  };
+
+  return (
+    <>
+      <FieldWrapper>
+        <DangerZone
+          title={OVERVIEW.SOURCE_DANGER_ZONE_TITLE}
+          subTitle={OVERVIEW.SOURCE_DANGER_ZONE_SUBTITLE}
+          btnText={OVERVIEW.DELETE}
+          onClick={() => setShowModal(true)}
+        />
+      </FieldWrapper>
+      {showModal && (
+        <KeyvalModal
+          show={showModal}
+          closeModal={() => setShowModal(false)}
+          config={modalConfig}
+        >
+          <br />
+          <ConnectionsIcons icon={image_url} imageStyle={IMAGE_STYLE} />
+          <br />
+          <KeyvalText color={theme.text.primary} size={20} weight={600}>
+            {`${OVERVIEW.DELETE} ${name}`}
+          </KeyvalText>
+        </KeyvalModal>
+      )}
+    </>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
new file mode 100644
index 000000000..136f44552
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { KeyvalImage, KeyvalText, KeyvalTooltip } from "@/design.system";
+import { Pen } from "@/assets/icons/overview";
+
+const ManageSourceHeaderWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 104px;
+  align-items: center;
+  border-radius: 25px;
+  margin: 24px 0;
+  background: radial-gradient(
+      78.09% 72.18% at 100% -0%,
+      rgba(150, 242, 255, 0.4) 0%,
+      rgba(150, 242, 255, 0) 61.91%
+    ),
+    linear-gradient(180deg, #2e4c55 0%, #303355 100%);
+`;
+
+const TextWrapper = styled.div`
+  margin-left: 12px;
+  margin-right: 12px;
+`;
+
+const EditIconWrapper = styled.div`
+  width: 20px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  :hover {
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+const IMAGE_STYLE: React.CSSProperties = {
+  backgroundColor: "#fff",
+  padding: 4,
+  marginRight: 16,
+  marginLeft: 16,
+};
+
+export function ManageSourceHeader({ image_url, display_name }) {
+  const [showEditInput, setShowEditInput] = useState(true);
+  return (
+    <ManageSourceHeaderWrapper>
+      <KeyvalImage src={image_url} style={IMAGE_STYLE} />
+      <TextWrapper>
+        <KeyvalText size={24} weight={700}>
+          {display_name}
+        </KeyvalText>
+      </TextWrapper>
+      {showEditInput ? (
+        <EditIconWrapper onClick={() => setShowEditInput(false)}>
+          <Pen width={16} height={16} />
+        </EditIconWrapper>
+      ) : null}
+    </ManageSourceHeaderWrapper>
+  );
+}
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index 53903e8c5..b2537973d 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -73,10 +73,15 @@ export const OVERVIEW = {
   MANAGE: "Manage",
   DELETE: "Delete",
   DELETE_DESTINATION: "Delete Destination",
+  DELETE_SOURCE: "Delete Source",
+  SOURCE_DANGER_ZONE_TITLE: "Delete this source",
+  SOURCE_DANGER_ZONE_SUBTITLE:
+    "This action cannot be undone. This will permanently delete the source and all associated data.",
   DELETE_MODAL_TITLE: "Delete this destination",
   DELETE_MODAL_SUBTITLE:
     "This action cannot be undone. This will permanently delete the destination and all associated data.",
   DELETE_BUTTON: "I want to delete this destination",
+  CONFIRM_SOURCE_DELETE: "I want to delete this source",
   CONNECT: "Connect",
 };
 

From 5d85d7cc6ba50666ac47472f09cd980f1e224bf4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 10:57:52 +0300
Subject: [PATCH 048/374] manage delete source

---
 .../app/overview/sources/create/page.tsx      |  9 +++-
 .../app/overview/sources/manage/page.tsx      | 53 +++++++++++++++++--
 .../sources/delete.source/delete.source.tsx   |  1 +
 .../overview/sources/new.source.flow.tsx      |  6 ++-
 frontend/webapp/services/sources.tsx          | 12 ++++-
 5 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx
index 617b81251..9c83bfc82 100644
--- a/frontend/webapp/app/overview/sources/create/page.tsx
+++ b/frontend/webapp/app/overview/sources/create/page.tsx
@@ -11,9 +11,16 @@ import { useRouter } from "next/navigation";
 export default function CreateNewSourcesPage() {
   const { show, Notification } = useNotification();
   const router = useRouter();
-  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
+  const { data: sources, refetch } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
 
   function onNewSourceSuccess() {
+    setTimeout(() => {
+      router.back();
+      refetch();
+    }, 1000);
     show({
       type: NOTIFICATION.SUCCESS,
       message: OVERVIEW.SOURCE_CREATED_SUCCESS,
diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
index 66ade9994..cd5eef166 100644
--- a/frontend/webapp/app/overview/sources/manage/page.tsx
+++ b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -1,16 +1,24 @@
 "use client";
 import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
 import { getSources } from "@/services";
-import { QUERIES, SETUP } from "@/utils/constants";
+import {
+  NOTIFICATION,
+  OVERVIEW,
+  QUERIES,
+  ROUTES,
+  SETUP,
+} from "@/utils/constants";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { useQuery } from "react-query";
+import { useMutation, useQuery } from "react-query";
 import { ManageSourcePageContainer, BackButtonWrapper } from "./styled";
 import { LANGUAGES_LOGOS } from "@/assets/images";
 import { Back } from "@/assets/icons/overview";
 import { KeyvalText } from "@/design.system";
 import { ManagedSource } from "@/types/sources";
 import { DeleteSource } from "@/components/overview";
+import { deleteSource } from "@/services/sources";
+import { useNotification } from "@/hooks";
 
 const SOURCE = "source";
 
@@ -20,8 +28,18 @@ export default function ManageSourcePage() {
   );
   const searchParams = useSearchParams();
   const router = useRouter();
-  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
-
+  const { data: sources, refetch } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation(() =>
+    deleteSource(
+      currentSource?.namespace || "",
+      currentSource?.kind || "",
+      currentSource?.name || ""
+    )
+  );
   useEffect(onPageLoad, [sources]);
 
   function onPageLoad() {
@@ -29,6 +47,30 @@ export default function ManageSourcePage() {
     const source = sources?.find((item) => item.name === search);
     source && setCurrentSource(source);
   }
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  function onSuccess() {
+    setTimeout(() => {
+      router.back();
+      refetch();
+    }, 1000);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_DELETED_SUCCESS,
+    });
+  }
+  function onDelete() {
+    mutate(undefined, {
+      onSuccess,
+      onError,
+    });
+  }
 
   return (
     <ManageSourcePageContainer>
@@ -45,12 +87,13 @@ export default function ManageSourcePage() {
         />
       )}
       <DeleteSource
-        onDelete={() => {}}
+        onDelete={onDelete}
         name={currentSource?.name}
         image_url={
           LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
         }
       />
+      <Notification />
     </ManageSourcePageContainer>
   );
 }
diff --git a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
index 173a17bde..2520989cd 100644
--- a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
+++ b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
@@ -34,6 +34,7 @@ export function DeleteSource({
       primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE,
       primaryBtnAction: () => {
         setShowModal(false);
+        onDelete();
       },
     },
   };
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index 5152767ba..3b5468b9a 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -17,7 +17,9 @@ export function NewSourceFlow({ onSuccess, sources }) {
   const { show, Notification } = useNotification();
 
   function updateSectionDataWithSources() {
-    const sourceNamesSet = new Set(sources.map((source) => source.name));
+    const sourceNamesSet = new Set(
+      sources.map((source: SelectedSources) => source.name)
+    );
     const updatedSectionData: SelectedSources = {};
 
     for (const key in sectionData) {
@@ -50,6 +52,7 @@ export function NewSourceFlow({ onSuccess, sources }) {
       <ButtonWrapper>
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
         <KeyvalButton
+          disabled={totalSelected === 0}
           onClick={updateSectionDataWithSources}
           style={{ width: 110 }}
         >
@@ -58,6 +61,7 @@ export function NewSourceFlow({ onSuccess, sources }) {
           </KeyvalText>
         </KeyvalButton>
       </ButtonWrapper>
+
       <SourcesSection
         sectionData={sectionData}
         setSectionData={setSectionData}
diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx
index eb50b72a2..fc7fd5050 100644
--- a/frontend/webapp/services/sources.tsx
+++ b/frontend/webapp/services/sources.tsx
@@ -1,5 +1,5 @@
 import { API } from "@/utils/constants";
-import { get, post } from "./api";
+import { get, post, httpDelete } from "./api";
 import { SelectedSources } from "@/types/sources";
 
 export async function getNamespaces() {
@@ -17,3 +17,13 @@ export async function setNamespaces(body: SelectedSources): Promise<void> {
 export async function getSources() {
   return await get(API.SOURCES);
 }
+
+export async function deleteSource(
+  namespace: string,
+  kind: string,
+  name: string
+) {
+  return await httpDelete(
+    `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`
+  );
+}

From b655e1842d534da9a28138d449dcc51734d50f46 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 13:50:08 +0300
Subject: [PATCH 049/374] WIP

---
 .../app/overview/sources/manage/page.tsx      |  6 +-
 .../app/overview/sources/manage/styled.tsx    |  1 +
 .../manage.source.header.tsx                  | 67 +++++++++++++++----
 .../setup/destination/destination.section.tsx |  3 +
 frontend/webapp/design.system/index.tsx       |  1 +
 .../design.system/input/action.input.tsx      | 42 ++++++++++++
 .../design.system/input/input.styled.tsx      | 19 ++++++
 frontend/webapp/utils/constants/index.tsx     |  2 +-
 frontend/webapp/utils/constants/string.tsx    |  4 ++
 9 files changed, 130 insertions(+), 15 deletions(-)
 create mode 100644 frontend/webapp/design.system/input/action.input.tsx

diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
index cd5eef166..a8de98f08 100644
--- a/frontend/webapp/app/overview/sources/manage/page.tsx
+++ b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -42,6 +42,10 @@ export default function ManageSourcePage() {
   );
   useEffect(onPageLoad, [sources]);
 
+  useEffect(() => {
+    console.log({ currentSource });
+  }, [currentSource]);
+
   function onPageLoad() {
     const search = searchParams.get(SOURCE);
     const source = sources?.find((item) => item.name === search);
@@ -80,7 +84,7 @@ export default function ManageSourcePage() {
       </BackButtonWrapper>
       {currentSource && (
         <ManageSourceHeader
-          display_name={currentSource?.name}
+          name={currentSource?.name}
           image_url={
             LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
           }
diff --git a/frontend/webapp/app/overview/sources/manage/styled.tsx b/frontend/webapp/app/overview/sources/manage/styled.tsx
index 0f67fc4e6..4face21f0 100644
--- a/frontend/webapp/app/overview/sources/manage/styled.tsx
+++ b/frontend/webapp/app/overview/sources/manage/styled.tsx
@@ -6,6 +6,7 @@ export const ManageSourcePageContainer = styled.div`
 
 export const BackButtonWrapper = styled.div`
   display: flex;
+  width: fit-content;
   align-items: center;
   cursor: pointer;
   p {
diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
index 136f44552..a8cbcbfec 100644
--- a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
+++ b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
@@ -1,11 +1,18 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import styled from "styled-components";
-import { KeyvalImage, KeyvalText, KeyvalTooltip } from "@/design.system";
+import {
+  KeyvalActionInput,
+  KeyvalImage,
+  KeyvalText,
+  KeyvalTooltip,
+} from "@/design.system";
 import { Pen } from "@/assets/icons/overview";
+import { useOnClickOutside } from "@/hooks";
 
 const ManageSourceHeaderWrapper = styled.div`
   display: flex;
   width: 100%;
+  min-width: 686px;
   height: 104px;
   align-items: center;
   border-radius: 25px;
@@ -34,6 +41,12 @@ const EditIconWrapper = styled.div`
     fill: ${({ theme }) => theme.colors.secondary};
   }
 `;
+
+const ActionInputWrapper = styled.div`
+  width: 80%;
+  height: 49px;
+`;
+
 const IMAGE_STYLE: React.CSSProperties = {
   backgroundColor: "#fff",
   padding: 4,
@@ -41,21 +54,49 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageSourceHeader({ image_url, display_name }) {
+export function ManageSourceHeader({ image_url, name }) {
   const [showEditInput, setShowEditInput] = useState(true);
+  const [inputValue, setInputValue] = useState(name);
+  const containerRef = useRef(null);
+  const handleClickOutside = () => {
+    !showEditInput && handleSave();
+  };
+
+  useOnClickOutside(containerRef, handleClickOutside);
+
+  function handleSave() {
+    setShowEditInput(true);
+  }
+
+  function handleInputChange(value) {
+    setInputValue(value);
+  }
+
   return (
-    <ManageSourceHeaderWrapper>
+    <ManageSourceHeaderWrapper ref={containerRef}>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
-      <TextWrapper>
-        <KeyvalText size={24} weight={700}>
-          {display_name}
-        </KeyvalText>
-      </TextWrapper>
+
       {showEditInput ? (
-        <EditIconWrapper onClick={() => setShowEditInput(false)}>
-          <Pen width={16} height={16} />
-        </EditIconWrapper>
-      ) : null}
+        <>
+          <TextWrapper>
+            <KeyvalText size={24} weight={700}>
+              {name}
+            </KeyvalText>
+          </TextWrapper>
+
+          <EditIconWrapper onClick={() => setShowEditInput(false)}>
+            <Pen width={16} height={16} />
+          </EditIconWrapper>
+        </>
+      ) : (
+        <ActionInputWrapper>
+          <KeyvalActionInput
+            value={inputValue}
+            onChange={(e) => handleInputChange(e)}
+            onAction={handleSave}
+          />
+        </ActionInputWrapper>
+      )}
     </ManageSourceHeaderWrapper>
   );
 }
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index a7e4440c6..854edd779 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -20,10 +20,12 @@ import { useNotification } from "@/hooks";
 import { getDestinationsTypes } from "@/services";
 
 type DestinationSectionProps = {
+  sectionData?: any;
   setSectionData: (data: any) => void;
 };
 
 export function DestinationSection({
+  sectionData,
   setSectionData,
 }: DestinationSectionProps) {
   const [searchFilter, setSearchFilter] = useState<string>("");
@@ -68,6 +70,7 @@ export function DestinationSection({
       return (
         displayItem && (
           <DestinationList
+            sectionData={sectionData}
             key={category.name}
             data={category}
             onItemClick={(item: any) => setSectionData(item)}
diff --git a/frontend/webapp/design.system/index.tsx b/frontend/webapp/design.system/index.tsx
index 7885d1a19..c1b3be3ce 100644
--- a/frontend/webapp/design.system/index.tsx
+++ b/frontend/webapp/design.system/index.tsx
@@ -15,6 +15,7 @@ export { KeyvalLink } from "./link/link";
 export { KeyvalTooltip } from "./tooltip/tooltip";
 export { KeyvalImage } from "./image/image";
 export { KeyvalInput } from "./input/input";
+export { KeyvalActionInput } from "./input/action.input";
 export { KeyvalVideo } from "./video/video";
 export { KeyvalLoader } from "./loader/loader";
 export { KeyvalNotification } from "./notification/notification";
diff --git a/frontend/webapp/design.system/input/action.input.tsx b/frontend/webapp/design.system/input/action.input.tsx
new file mode 100644
index 000000000..4bede03d6
--- /dev/null
+++ b/frontend/webapp/design.system/input/action.input.tsx
@@ -0,0 +1,42 @@
+import React, { ChangeEvent } from "react";
+import { StyledActionInputContainer, StyledActionInput } from "./input.styled";
+import { KeyvalButton } from "../button/button";
+import { KeyvalText } from "../text/text";
+import theme from "@/styles/palette";
+import { ACTION } from "@/utils/constants";
+
+interface InputProps {
+  value: string;
+  onAction: () => void;
+  onChange: (value: string) => void;
+  type?: string;
+  style?: React.CSSProperties;
+}
+
+export function KeyvalActionInput({
+  value,
+  onChange,
+  style = {},
+}: InputProps): JSX.Element {
+  function handleChange(event: ChangeEvent<HTMLInputElement>): void {
+    onChange(event.target.value);
+  }
+
+  return (
+    <>
+      <StyledActionInputContainer style={{ ...style }}>
+        <StyledActionInput
+          value={value}
+          onChange={handleChange}
+          autoComplete="off"
+        />
+
+        <KeyvalButton>
+          <KeyvalText size={14} weight={500} color={theme.text.dark_button}>
+            {ACTION.SAVE}
+          </KeyvalText>
+        </KeyvalButton>
+      </StyledActionInputContainer>
+    </>
+  );
+}
diff --git a/frontend/webapp/design.system/input/input.styled.tsx b/frontend/webapp/design.system/input/input.styled.tsx
index 25b200005..bff06430f 100644
--- a/frontend/webapp/design.system/input/input.styled.tsx
+++ b/frontend/webapp/design.system/input/input.styled.tsx
@@ -32,6 +32,19 @@ export const StyledInputContainer = styled.div<ActiveProps>`
   }
 `;
 
+export const StyledActionInputContainer = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: 0px 12px;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 4px;
+  border: ${({ theme }) => `1px solid ${theme.colors.secondary}`};
+`;
+
 export const StyledInput = styled.input`
   background: transparent;
   border: none;
@@ -40,6 +53,12 @@ export const StyledInput = styled.input`
   color: ${({ theme }) => theme.text.white};
 `;
 
+export const StyledActionInput = styled(StyledInput)`
+  color: var(--dark-mode-white, #fff);
+  font-family: Inter;
+  font-size: 24px;
+`;
+
 export const LabelWrapper = styled.div`
   margin-bottom: 8px;
 `;
diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx
index 11dd91a8d..90fdf2c71 100644
--- a/frontend/webapp/utils/constants/index.tsx
+++ b/frontend/webapp/utils/constants/index.tsx
@@ -1,4 +1,4 @@
 export { ROUTES } from "./routes";
 export { CONFIG } from "./config";
-export { SETUP, OVERVIEW, NOTIFICATION } from "./string";
+export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string";
 export { API, QUERIES } from "./urls";
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index b2537973d..3227c2b95 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -85,6 +85,10 @@ export const OVERVIEW = {
   CONNECT: "Connect",
 };
 
+export const ACTION = {
+  SAVE: "Save",
+};
+
 export const NOTIFICATION = {
   ERROR: "error",
   SUCCESS: "success",

From 592be7e741cc8cf6fd4750a4322512cad0f896e9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 13:55:35 +0300
Subject: [PATCH 050/374] WIP

---
 .../sources/action.menu/sources.action.menu.styled.tsx    | 1 +
 .../overview/sources/action.menu/sources.action.menu.tsx  | 2 +-
 .../sources/manage.source.header/manage.source.header.tsx | 8 +-------
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index 146df0a97..3c0c8b9bb 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -10,5 +10,6 @@ export const SourcesMenuWrapper = styled.div`
 
 export const InputsWrapper = styled.div`
   display: flex;
+  flex-wrap: wrap;
   gap: 16px;
 `;
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
index bc1b0faa8..947f13c33 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
@@ -9,7 +9,7 @@ import { OVERVIEW } from "@/utils/constants";
 import theme from "@/styles/palette";
 import { FilterSourcesOptions } from "@/components/setup/sources/sources.option.menu/filter.sources.options";
 
-const BUTTON_STYLES = { gap: 10, height: 36 };
+const BUTTON_STYLES = { gap: 10, height: 36, width: 200 };
 
 export function SourcesActionMenu({
   onAddClick,
diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
index a8cbcbfec..5fbcec042 100644
--- a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
+++ b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
@@ -1,11 +1,6 @@
 import React, { useRef, useState } from "react";
 import styled from "styled-components";
-import {
-  KeyvalActionInput,
-  KeyvalImage,
-  KeyvalText,
-  KeyvalTooltip,
-} from "@/design.system";
+import { KeyvalActionInput, KeyvalImage, KeyvalText } from "@/design.system";
 import { Pen } from "@/assets/icons/overview";
 import { useOnClickOutside } from "@/hooks";
 
@@ -75,7 +70,6 @@ export function ManageSourceHeader({ image_url, name }) {
   return (
     <ManageSourceHeaderWrapper ref={containerRef}>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
-
       {showEditInput ? (
         <>
           <TextWrapper>

From ef93cc648ee98979ac4b4f747c10fbf713692bd4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 15:32:56 +0300
Subject: [PATCH 051/374] WIP

---
 frontend/webapp/app/layout.tsx                   |   4 ++++
 frontend/webapp/app/overview/layout.tsx          |   6 +++++-
 frontend/webapp/assets/logos/logo.png            | Bin 0 -> 3528 bytes
 .../webapp/design.system/text/text.styled.tsx    |   2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/assets/logos/logo.png

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index efe4c8326..050b0c95c 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import theme from "@/styles/palette";
 import { QueryClient, QueryClientProvider } from "react-query";
+import Head from "next/head";
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -30,6 +31,9 @@ export default function RootLayout({
     <html lang="en">
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
+          <Head>
+            <title>Odigos</title>
+          </Head>
           <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
             {children}
           </body>
diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx
index dc76e1c7f..2159907df 100644
--- a/frontend/webapp/app/overview/layout.tsx
+++ b/frontend/webapp/app/overview/layout.tsx
@@ -1,6 +1,7 @@
-"use client";
+// "use client";
 import { Menu } from "@/components/side.menu";
 import theme from "@/styles/palette";
+import { Metadata } from "next";
 import React from "react";
 
 const LAYOUT_STYLE = {
@@ -14,6 +15,9 @@ const CHILDREN_STYLE = {
   width: "100%",
   height: "93%",
 };
+export const metadata: Metadata = {
+  title: "Odigos",
+};
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/frontend/webapp/assets/logos/logo.png b/frontend/webapp/assets/logos/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..5caa468e0ebc565ab66104a95d8f4b649015dd52
GIT binary patch
literal 3528
zcmd6qX*k>I7Ql5{s+J)#LbYnW%t#|*TD@aQTVkuC1`)BRMeMXCYHhVNiM_Q}F^$qC
zg6O|eJDr3<%fwPjEVYZRK@nBC>2p8d`|&>a!+Xwo&UxPV{cz6to%bbOv9pwxP?8W4
z5s|jGLj5ixatJ0|dg5Y2&oot=D)eVsqb@o{A6gxEAbJpr+jxo2?#YjUw`(l`>FcNg
zD_++0*Ky<1ZsAx7(`36y&_<2j1LQTjqOF>h>QY8d=n+T%c=6L8E_+K#zD}3jdh*XZ
zx0A|Ax9aG9IId$Ump^WOIavSKg$d4$h5dtt%{$lWy#Ua>6DwE{2ucO@3kR`;1SgRP
zyQo7}DB!jeO47>w|5G8I#ezF~k9Ko7Ya5@-WYRquVUy^(Nk+()M11&{=AE7)>UzFS
zepOD-y5}znXn4i}Cu{tMpxNlW&S5zRET^^lblhs81E5+&9B~UPfeSXdOBcn0_1KSM
z;|Tn1g7CyA5dVa|82*8c_EGt2ZkfCWbw&^g7!Rja{(&|l4{M+Qy7aZhMMpmWwqQpf
zaBJBrPt?8g%Hw_0%D$t0PS7y&=lmjm^&@AaenWOz6+~tYs(0pm;CzFpaa`r#%LY7a
zZpyxQe}p4{H|m9JKwQkhNA_P-1LxHNvUhXDTBSE4I-*{&G+BwU?j%p!%>;sm%|tPh
z!}jO|_drKm0QaL!%~Tl6xsz93R<7mzE`X);>BU@rkLL8F^HqYxgL!^!OgtkZeN$u>
zoF9e2lHoI*k9LheR{m(m<+Btl#?%9|kXSm^L|2lqq8LVqy%$jL>g$S(#6GoBo0yUG
zO7vR|%{Vr(?iCkZMc#?oi^n3ilnK-E<@^pl*QLcFfuG9gxv!FdQN1hPo9yLrdf^c@
z33HR|fN?A3znjcW-0f^t`4$@W!V-(<j#=2?Vp?y^8g*KfLH`OB+=;*1=fW}|4r#>|
zmX{DSV~=%4gbO5-%+KP$0q>mCuX6e>tCTATq#JeXzonpOGTt04-LZ7+3laKQJpB;X
z$vkfds$xX**$(%i={p<-Ll|h@Y#c&Ee~#Gxd%!CpYD?lZc@@Mf#J@U>L`u>h6gYQh
zqurJ2JT}rDgqs`LkdizXFz;hmoQPjHezh>DmE|+{+R$LI-48eEGgkjH0%;cia3gKE
zj<L)v$+=usIYIy*g>+DFa7nad5#=@g*R{W<HyVwuxTW>|eW~jgU*J?g{R`cJgq(l2
zt-h8B3-!GYD&5u4UC8q^{KzFtr#9FE+xs>X+34QiXnC8iu6E&R{A6(M_+a<eNo4=Q
zM=>5yVxXTnJ7C9TfXwEka0xz~*e=Dqx+2rD5)d3~lIweT+<n^G!LMvJJ|$#wlOlSv
z`|Ug1y9sZ%I$6F8=VVq+q{mI4fTB<N^Dq_BF`rEjjat=f9AqXQ#8XSZ?k}`l86~@&
z_)sLZzE^mCX2s9%&1g$$<8Is*sprpH1Fsr3*TZ=6Y-sPnr;VQC70nC>595t4pL;dG
zu>+YYy#@_wE@|`INQ2234K=A;e6Ie7V_8qA(X5lB?ZS#W_lm5*Da7Y?x%e?9{p^8?
z3r*fps30;^vOycGEDK-Ez(-m&dGDcu#F&y5mVlpC)6^R214I^H@E9MW#!KRn&@w~?
zKpShK?kT*ID|CG!p)*Me96LZx7XHQ>kORSGX*tYPH871SlyWo)qJo(^RvrXTxd7;B
zdJbL&bhJDNtpKqLP0vYqX=1d)VYZSgPyJW6k{(Z8gKgR*B-$>Nr+%0{Z7^+KN`frQ
z!S}3yk(_9@HpM(>+FXSQxeA8YJ-{OnJRFn=A=ow*{DX}PWTv{x!Yb^V79Zf*$9WV<
ziunRFH9!vLXVFw3#>UMvQybN=!N++xISMNe4DV3GZly%CQ}Aq~X_f^lbwUolh5{B%
zc++T#xze<`EUX_??E{AO%T@cx!TQ0~J|NgjHP1g)u}+pvTrI4VO%qoW>tx@=RmV!D
zL=RmA6i@QHZ2`s8yl!hi(U{k54oo#5JC{da%SZ&FB#{-FyoRl{+_y^Xq)1fLL`!(+
zmZ9xK<}z#jB(xF)8)@5K9qSgdqHH)I=tQ-KZA}^w+VF4SKj6=lCQfn}kb-(RuvcG~
zXp*x0*Qcw#{Gowz8>1-WD?h6I=5#99Q{#b<q<M3W&nzQObOPs9;x}LX5F9vMCX-t=
zu6T=%$iL6(mb#{n70RN<&(zf91X)_gj+ddUw@JjuIvs4Y8a6%JO!t_=ax}g0o(e(#
z@fz_%q>Z*+-a?V}mC5J#3Kr6K-cEGR_k2h4)_s`FmBP{UDi+uaIuy~T>i<dg4m7Yh
zGmSlr)>!<_sNWT|ogZ|jk3~-x%uv_s*K6$4fGQ&nlbe3S-|~~(>1mVCvyS#@r@}$i
zTlev2AuZeQ77N_oJdD=Kgx4O((rO_vjQx?G*r(@F)XMk1?G}C!7RIYYNEUg>4DSQ!
z0}-FOCT_O1=$~W60x`#*m3KHyq2Yo&e7lyq>Vlzh^BJ7HTgcj$=JM{1h?i9}ZDH4M
ziJu^Pvk)AQ#~>9tIk#&B&EtrHztL+$CcbD1({(e_B5n*bu493#jJPGP0;ZGep9Y+t
zy;j!K_8!yRWc@wS9bB;@w=g-FSalzLI*P*bCOO+tSW`sjP@zq9Rz{_ANzNXq)IgGR
zvCt+uj|*+$kRB1TL>j6gLIOxbdL+maaj1p_2_VW}6qX|WdntyI<O%B7tqcqu#HO5M
zk_}L)Fl}_288D)cV`-vN3&GH}6g=Wr9P11bQVfPxSObe`7`7-I$7ParNf1X3^t&W{
z#4wZWDhJcjLI(>Y!8jIL4u%Co_bvz<3nOeSRs)lal!Jw8ptlO~JQtj~7$q5#O~y+X
zV6wCE(pi}7LSeIFzBj7~ouWl?M$jo16lXO$#gF0)qT|F-)E{uHEFv0*W66@xrb3&9
zR>z4_a+5Iawv?f(I8g?ec1jM4DaC&wV%q0X)T2y^Q7{driPl51M}NSHJ_OT_%R%47
zQqCU6i4JIBmF1uXNH+I2<|5%cqa=ika#Tg@8BvDbM6KSfjsIGwuS-w*2&Q$E6RLCS
zI|+<~Tl6HF1~y&%Z_bSWxo`DVIQjX~7|LU8!Yv9&MXF0%qD&li7BRXgNc=v`RXmPB
zEil@784?h{`)TBOKk1?G-0R_<Pa5~T?;4#_6rFv`WnEu;zgc{bi{7+HIz*jGwD-P2
ziA<%sOu~;Uc>VmU?)%Kgch0G0UFycOAjt-`??4_6H_O{BM(rG=d_2$i0|$e;SVVhq
zd$+w;m@+P9DR}c#z}4Zh)e0q?jwbb`B{p_`biH}>60dJ_AM&m|+pIFUG~hVR65E^U
z8E+5xaZP)kTwjUro~HTbZlucerF*6~5O><rX$JJ#@ed_=MNi?aMTAT0b6lUX-~Le4
z={%c|C(g|JHmPt>)~1OwobAf<8q5dxm7z`g$=<M2BQD<JkdmOpuP(!}GL1R<ScG~&
ztZhqlcxmyx6Wqd8(ko1X#$M<|?XS>)#|3HL%3g-pKl~!f;>Q|wdcUp2b)60Y^1MvO
z_xxuDkK~gEbtcAU9!u%>`ajF;w^;7rUUG{ttJUy&{@!%61c~U#MY%t@)^bLwbbsa9
z`d3eDuFU(^{bYpcPj0H}QLX$hVUpJrG%8&Z!s99@NkdC3Zh^mBLR%2HA8J>1r#@E;
z>KMi&`*x@KqcY|eW9wsRPyYJM+~17t%rCKs?m#02j{goPalJS55)Q#W=v_y5da9*O
zu^i4o{XOlQjS4;yF|f7Cb8K>S(`4zv#;YZ`wAmg$xq!MSoS?qH(<M!|6IhE-gQ~h_
z2B_huY_fd&8)aC9L1=JZ35uf?RgvU?ey)yH)6$^HzFoz={w(BfIb;Y0ZHic1!N@$n
zJ<7`cQ%FP`+n0t%^w1W%|7ZdIRPjra{3ho03mq(7Ns+*kR4_Yds75)4PKVA8DKkzA
zvbWa??OT@>wB*;n?QT>>+SqgBu_yR*@QG6)$oN@Zw7cp<;vnN-leKZzCBZ2W9RirT
z4|Hm@;g+HwOFz%D4OaRleBmL8jV3R#CLF630?A)V_l+Qne3L)8*`jnA2qi|dGNwl=
z7Y@C+_7fqTS$wkRnVrlA8fZ6PMuTW0!}6P+ybHH?CtXXX%)Y5xMG!2SItF@Y+;@iN
vBNrLP(uUXz$Pzv2{|xp22K@h7Eb&ky`=OYt{R?T~4^70{+zwS`>Yem2(BH`^

literal 0
HcmV?d00001

diff --git a/frontend/webapp/design.system/text/text.styled.tsx b/frontend/webapp/design.system/text/text.styled.tsx
index f400cfe94..a68573fc4 100644
--- a/frontend/webapp/design.system/text/text.styled.tsx
+++ b/frontend/webapp/design.system/text/text.styled.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const TextWrapper = styled.p`
   color: ${({ theme }) => theme.text.white};
   margin: 0;
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme }) => theme.font_family.primary}, sans-serif;
   font-size: 16px;
   font-weight: 400;
 `;

From 9e322bf127d10dc67479184aac94982ef6f20ab9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 15:33:13 +0300
Subject: [PATCH 052/374] WIP

---
 frontend/webapp/assets/logos/logo.png | Bin 3528 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 frontend/webapp/assets/logos/logo.png

diff --git a/frontend/webapp/assets/logos/logo.png b/frontend/webapp/assets/logos/logo.png
deleted file mode 100644
index 5caa468e0ebc565ab66104a95d8f4b649015dd52..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3528
zcmd6qX*k>I7Ql5{s+J)#LbYnW%t#|*TD@aQTVkuC1`)BRMeMXCYHhVNiM_Q}F^$qC
zg6O|eJDr3<%fwPjEVYZRK@nBC>2p8d`|&>a!+Xwo&UxPV{cz6to%bbOv9pwxP?8W4
z5s|jGLj5ixatJ0|dg5Y2&oot=D)eVsqb@o{A6gxEAbJpr+jxo2?#YjUw`(l`>FcNg
zD_++0*Ky<1ZsAx7(`36y&_<2j1LQTjqOF>h>QY8d=n+T%c=6L8E_+K#zD}3jdh*XZ
zx0A|Ax9aG9IId$Ump^WOIavSKg$d4$h5dtt%{$lWy#Ua>6DwE{2ucO@3kR`;1SgRP
zyQo7}DB!jeO47>w|5G8I#ezF~k9Ko7Ya5@-WYRquVUy^(Nk+()M11&{=AE7)>UzFS
zepOD-y5}znXn4i}Cu{tMpxNlW&S5zRET^^lblhs81E5+&9B~UPfeSXdOBcn0_1KSM
z;|Tn1g7CyA5dVa|82*8c_EGt2ZkfCWbw&^g7!Rja{(&|l4{M+Qy7aZhMMpmWwqQpf
zaBJBrPt?8g%Hw_0%D$t0PS7y&=lmjm^&@AaenWOz6+~tYs(0pm;CzFpaa`r#%LY7a
zZpyxQe}p4{H|m9JKwQkhNA_P-1LxHNvUhXDTBSE4I-*{&G+BwU?j%p!%>;sm%|tPh
z!}jO|_drKm0QaL!%~Tl6xsz93R<7mzE`X);>BU@rkLL8F^HqYxgL!^!OgtkZeN$u>
zoF9e2lHoI*k9LheR{m(m<+Btl#?%9|kXSm^L|2lqq8LVqy%$jL>g$S(#6GoBo0yUG
zO7vR|%{Vr(?iCkZMc#?oi^n3ilnK-E<@^pl*QLcFfuG9gxv!FdQN1hPo9yLrdf^c@
z33HR|fN?A3znjcW-0f^t`4$@W!V-(<j#=2?Vp?y^8g*KfLH`OB+=;*1=fW}|4r#>|
zmX{DSV~=%4gbO5-%+KP$0q>mCuX6e>tCTATq#JeXzonpOGTt04-LZ7+3laKQJpB;X
z$vkfds$xX**$(%i={p<-Ll|h@Y#c&Ee~#Gxd%!CpYD?lZc@@Mf#J@U>L`u>h6gYQh
zqurJ2JT}rDgqs`LkdizXFz;hmoQPjHezh>DmE|+{+R$LI-48eEGgkjH0%;cia3gKE
zj<L)v$+=usIYIy*g>+DFa7nad5#=@g*R{W<HyVwuxTW>|eW~jgU*J?g{R`cJgq(l2
zt-h8B3-!GYD&5u4UC8q^{KzFtr#9FE+xs>X+34QiXnC8iu6E&R{A6(M_+a<eNo4=Q
zM=>5yVxXTnJ7C9TfXwEka0xz~*e=Dqx+2rD5)d3~lIweT+<n^G!LMvJJ|$#wlOlSv
z`|Ug1y9sZ%I$6F8=VVq+q{mI4fTB<N^Dq_BF`rEjjat=f9AqXQ#8XSZ?k}`l86~@&
z_)sLZzE^mCX2s9%&1g$$<8Is*sprpH1Fsr3*TZ=6Y-sPnr;VQC70nC>595t4pL;dG
zu>+YYy#@_wE@|`INQ2234K=A;e6Ie7V_8qA(X5lB?ZS#W_lm5*Da7Y?x%e?9{p^8?
z3r*fps30;^vOycGEDK-Ez(-m&dGDcu#F&y5mVlpC)6^R214I^H@E9MW#!KRn&@w~?
zKpShK?kT*ID|CG!p)*Me96LZx7XHQ>kORSGX*tYPH871SlyWo)qJo(^RvrXTxd7;B
zdJbL&bhJDNtpKqLP0vYqX=1d)VYZSgPyJW6k{(Z8gKgR*B-$>Nr+%0{Z7^+KN`frQ
z!S}3yk(_9@HpM(>+FXSQxeA8YJ-{OnJRFn=A=ow*{DX}PWTv{x!Yb^V79Zf*$9WV<
ziunRFH9!vLXVFw3#>UMvQybN=!N++xISMNe4DV3GZly%CQ}Aq~X_f^lbwUolh5{B%
zc++T#xze<`EUX_??E{AO%T@cx!TQ0~J|NgjHP1g)u}+pvTrI4VO%qoW>tx@=RmV!D
zL=RmA6i@QHZ2`s8yl!hi(U{k54oo#5JC{da%SZ&FB#{-FyoRl{+_y^Xq)1fLL`!(+
zmZ9xK<}z#jB(xF)8)@5K9qSgdqHH)I=tQ-KZA}^w+VF4SKj6=lCQfn}kb-(RuvcG~
zXp*x0*Qcw#{Gowz8>1-WD?h6I=5#99Q{#b<q<M3W&nzQObOPs9;x}LX5F9vMCX-t=
zu6T=%$iL6(mb#{n70RN<&(zf91X)_gj+ddUw@JjuIvs4Y8a6%JO!t_=ax}g0o(e(#
z@fz_%q>Z*+-a?V}mC5J#3Kr6K-cEGR_k2h4)_s`FmBP{UDi+uaIuy~T>i<dg4m7Yh
zGmSlr)>!<_sNWT|ogZ|jk3~-x%uv_s*K6$4fGQ&nlbe3S-|~~(>1mVCvyS#@r@}$i
zTlev2AuZeQ77N_oJdD=Kgx4O((rO_vjQx?G*r(@F)XMk1?G}C!7RIYYNEUg>4DSQ!
z0}-FOCT_O1=$~W60x`#*m3KHyq2Yo&e7lyq>Vlzh^BJ7HTgcj$=JM{1h?i9}ZDH4M
ziJu^Pvk)AQ#~>9tIk#&B&EtrHztL+$CcbD1({(e_B5n*bu493#jJPGP0;ZGep9Y+t
zy;j!K_8!yRWc@wS9bB;@w=g-FSalzLI*P*bCOO+tSW`sjP@zq9Rz{_ANzNXq)IgGR
zvCt+uj|*+$kRB1TL>j6gLIOxbdL+maaj1p_2_VW}6qX|WdntyI<O%B7tqcqu#HO5M
zk_}L)Fl}_288D)cV`-vN3&GH}6g=Wr9P11bQVfPxSObe`7`7-I$7ParNf1X3^t&W{
z#4wZWDhJcjLI(>Y!8jIL4u%Co_bvz<3nOeSRs)lal!Jw8ptlO~JQtj~7$q5#O~y+X
zV6wCE(pi}7LSeIFzBj7~ouWl?M$jo16lXO$#gF0)qT|F-)E{uHEFv0*W66@xrb3&9
zR>z4_a+5Iawv?f(I8g?ec1jM4DaC&wV%q0X)T2y^Q7{driPl51M}NSHJ_OT_%R%47
zQqCU6i4JIBmF1uXNH+I2<|5%cqa=ika#Tg@8BvDbM6KSfjsIGwuS-w*2&Q$E6RLCS
zI|+<~Tl6HF1~y&%Z_bSWxo`DVIQjX~7|LU8!Yv9&MXF0%qD&li7BRXgNc=v`RXmPB
zEil@784?h{`)TBOKk1?G-0R_<Pa5~T?;4#_6rFv`WnEu;zgc{bi{7+HIz*jGwD-P2
ziA<%sOu~;Uc>VmU?)%Kgch0G0UFycOAjt-`??4_6H_O{BM(rG=d_2$i0|$e;SVVhq
zd$+w;m@+P9DR}c#z}4Zh)e0q?jwbb`B{p_`biH}>60dJ_AM&m|+pIFUG~hVR65E^U
z8E+5xaZP)kTwjUro~HTbZlucerF*6~5O><rX$JJ#@ed_=MNi?aMTAT0b6lUX-~Le4
z={%c|C(g|JHmPt>)~1OwobAf<8q5dxm7z`g$=<M2BQD<JkdmOpuP(!}GL1R<ScG~&
ztZhqlcxmyx6Wqd8(ko1X#$M<|?XS>)#|3HL%3g-pKl~!f;>Q|wdcUp2b)60Y^1MvO
z_xxuDkK~gEbtcAU9!u%>`ajF;w^;7rUUG{ttJUy&{@!%61c~U#MY%t@)^bLwbbsa9
z`d3eDuFU(^{bYpcPj0H}QLX$hVUpJrG%8&Z!s99@NkdC3Zh^mBLR%2HA8J>1r#@E;
z>KMi&`*x@KqcY|eW9wsRPyYJM+~17t%rCKs?m#02j{goPalJS55)Q#W=v_y5da9*O
zu^i4o{XOlQjS4;yF|f7Cb8K>S(`4zv#;YZ`wAmg$xq!MSoS?qH(<M!|6IhE-gQ~h_
z2B_huY_fd&8)aC9L1=JZ35uf?RgvU?ey)yH)6$^HzFoz={w(BfIb;Y0ZHic1!N@$n
zJ<7`cQ%FP`+n0t%^w1W%|7ZdIRPjra{3ho03mq(7Ns+*kR4_Yds75)4PKVA8DKkzA
zvbWa??OT@>wB*;n?QT>>+SqgBu_yR*@QG6)$oN@Zw7cp<;vnN-leKZzCBZ2W9RirT
z4|Hm@;g+HwOFz%D4OaRleBmL8jV3R#CLF630?A)V_l+Qne3L)8*`jnA2qi|dGNwl=
z7Y@C+_7fqTS$wkRnVrlA8fZ6PMuTW0!}6P+ybHH?CtXXX%)Y5xMG!2SItF@Y+;@iN
vBNrLP(uUXz$Pzv2{|xp22K@h7Eb&ky`=OYt{R?T~4^70{+zwS`>Yem2(BH`^


From 5ad8d1d33948a7f52620530bfb75a532086dee74 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 15:46:00 +0300
Subject: [PATCH 053/374] WIP

---
 frontend/webapp/design.system/drop.down/drop.down.styled.tsx    | 2 +-
 frontend/webapp/design.system/input/input.styled.tsx            | 2 +-
 .../webapp/design.system/search.input/search.input.styled.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx
index fccd64123..49282f3d6 100644
--- a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx
+++ b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx
@@ -32,7 +32,7 @@ export const DropdownHeader = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.text.white};
   font-size: 14px;
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme }) => theme.font_family.primary}, sans-serif;
   font-weight: 400;
 `;
 
diff --git a/frontend/webapp/design.system/input/input.styled.tsx b/frontend/webapp/design.system/input/input.styled.tsx
index bff06430f..808fdeffe 100644
--- a/frontend/webapp/design.system/input/input.styled.tsx
+++ b/frontend/webapp/design.system/input/input.styled.tsx
@@ -55,7 +55,7 @@ export const StyledInput = styled.input`
 
 export const StyledActionInput = styled(StyledInput)`
   color: var(--dark-mode-white, #fff);
-  font-family: Inter;
+  font-family: Inter, sans-serif;
   font-size: 24px;
 `;
 
diff --git a/frontend/webapp/design.system/search.input/search.input.styled.tsx b/frontend/webapp/design.system/search.input/search.input.styled.tsx
index f99e986d9..39ee4f362 100644
--- a/frontend/webapp/design.system/search.input/search.input.styled.tsx
+++ b/frontend/webapp/design.system/search.input/search.input.styled.tsx
@@ -29,7 +29,7 @@ export const StyledSearchInput = styled.input<ActiveProps>`
   color: ${({ active, theme }) =>
     `${active ? theme.colors.white : theme.text.grey}`};
   font-size: 14px;
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme }) => theme.font_family.primary}, sans-serif;
   font-weight: 400;
   &:focus {
     color: ${({ theme }) => `solid 1px ${theme.colors.white}`};

From 26033f71afd6e313c722132a58a22aa99f78ae9e Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Thu, 3 Aug 2023 15:52:44 +0300
Subject: [PATCH 054/374] Task 165 manage source (#368)

---
 frontend/webapp/app/layout.tsx                |   4 +
 .../destinations/create/[id]/page.tsx         | 111 ++++++++++++++++++
 .../app/overview/destinations/create/page.tsx |   7 ++
 .../app/overview/destinations/manage/page.tsx |  67 +++++++++++
 .../webapp/app/overview/destinations/page.tsx |  15 ++-
 frontend/webapp/app/overview/layout.tsx       |   6 +-
 .../app/overview/sources/create/page.tsx      |  40 +++++++
 .../app/overview/sources/manage/page.tsx      | 103 ++++++++++++++++
 .../app/overview/sources/manage/styled.tsx    |  15 +++
 frontend/webapp/app/overview/sources/page.tsx |   6 +-
 .../webapp/assets/icons/overview/index.tsx    |   3 +-
 frontend/webapp/assets/icons/overview/pen.svg |   3 +
 .../manage.destination/manage.destination.tsx |   6 +-
 frontend/webapp/components/overview/index.tsx |   1 +
 .../sources.action.menu.styled.tsx            |   1 +
 .../action.menu/sources.action.menu.tsx       |   2 +-
 .../sources/delete.source/delete.source.tsx   |  68 +++++++++++
 .../manage.source.header.tsx                  |  96 +++++++++++++++
 .../sources.manage.card.tsx                   |   4 +-
 .../sources.manage.list.tsx                   |  12 +-
 .../sources.manage.styled.tsx                 |   4 +-
 .../webapp/components/side.menu/menu/menu.tsx |  15 +--
 .../destination/destination.styled.tsx        |  10 --
 .../overview/destination/destination.tsx      |  94 +++------------
 .../destination/new.destination.flow.tsx      |  78 ++----------
 .../destination/update.destination.flow.tsx   |   8 +-
 frontend/webapp/containers/overview/index.tsx |   1 +
 .../overview/sources/manage.sources.tsx       |   4 +-
 .../overview/sources/new.source.flow.tsx      |   6 +-
 .../containers/overview/sources/sources.tsx   |  62 ++--------
 .../setup/destination/destination.section.tsx |   8 +-
 .../drop.down/drop.down.styled.tsx            |   2 +-
 frontend/webapp/design.system/index.tsx       |   1 +
 .../design.system/input/action.input.tsx      |  42 +++++++
 .../design.system/input/input.styled.tsx      |  19 +++
 .../notification/notification.tsx             |   1 +
 .../search.input/search.input.styled.tsx      |   2 +-
 .../webapp/design.system/text/text.styled.tsx |   2 +-
 frontend/webapp/services/sources.tsx          |  12 +-
 frontend/webapp/utils/constants/index.tsx     |   2 +-
 frontend/webapp/utils/constants/routes.tsx    |   5 +
 frontend/webapp/utils/constants/string.tsx    |   9 ++
 42 files changed, 713 insertions(+), 244 deletions(-)
 create mode 100644 frontend/webapp/app/overview/destinations/create/[id]/page.tsx
 create mode 100644 frontend/webapp/app/overview/destinations/create/page.tsx
 create mode 100644 frontend/webapp/app/overview/destinations/manage/page.tsx
 create mode 100644 frontend/webapp/app/overview/sources/create/page.tsx
 create mode 100644 frontend/webapp/app/overview/sources/manage/page.tsx
 create mode 100644 frontend/webapp/app/overview/sources/manage/styled.tsx
 create mode 100644 frontend/webapp/assets/icons/overview/pen.svg
 create mode 100644 frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
 create mode 100644 frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
 create mode 100644 frontend/webapp/design.system/input/action.input.tsx

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index efe4c8326..050b0c95c 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import theme from "@/styles/palette";
 import { QueryClient, QueryClientProvider } from "react-query";
+import Head from "next/head";
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -30,6 +31,9 @@ export default function RootLayout({
     <html lang="en">
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
+          <Head>
+            <title>Odigos</title>
+          </Head>
           <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
             {children}
           </body>
diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
new file mode 100644
index 000000000..f4082de12
--- /dev/null
+++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -0,0 +1,111 @@
+"use client";
+import React, { useEffect } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { useMutation, useQuery } from "react-query";
+import {
+  getDestination,
+  getDestinationsTypes,
+  setDestination,
+} from "@/services";
+import { ManageDestination, OverviewHeader } from "@/components/overview";
+import { useNotification, useSectionData } from "@/hooks";
+import { useRouter, useSearchParams } from "next/navigation";
+import { styled } from "styled-components";
+
+const DEST = "dest";
+
+const NewDestinationContainer = styled.div`
+  padding: 20px 36px;
+`;
+
+export default function NewDestinationFlow() {
+  const { sectionData, setSectionData } = useSectionData(null);
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation((body) => setDestination(body));
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const { data: destinationType } = useQuery(
+    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
+    () => getDestination(sectionData?.type),
+    {
+      enabled: !!sectionData,
+    }
+  );
+
+  const { data: destinationsList } = useQuery(
+    [QUERIES.API_DESTINATION_TYPES],
+    getDestinationsTypes
+  );
+
+  useEffect(onPageLoad, [destinationsList]);
+
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
+    if (!destinationsList || !search) return;
+
+    let currentData = null;
+
+    for (const category of destinationsList.categories) {
+      if (currentData) {
+        break;
+      }
+      const filterItem = category.items.filter(({ type }) => type === search);
+      if (filterItem.length) {
+        currentData = filterItem[0];
+      }
+    }
+
+    setSectionData(currentData);
+  }
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  function onSubmit(newDestination) {
+    const destination = {
+      ...newDestination,
+      type: sectionData.type,
+    };
+
+    mutate(destination, {
+      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
+      onError,
+    });
+  }
+
+  function handleBackPress() {
+    router.back();
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.DESTINATIONS}
+        onBackClick={handleBackPress}
+      />
+      {destinationType && sectionData && (
+        <NewDestinationContainer>
+          <ManageDestination
+            destinationType={destinationType}
+            selectedDestination={sectionData}
+            onSubmit={onSubmit}
+          />
+        </NewDestinationContainer>
+      )}
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
new file mode 100644
index 000000000..3b9a92b41
--- /dev/null
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import { NewDestinationFlow } from "@/containers/overview";
+
+export default function CreateDestinationPage() {
+  return <NewDestinationFlow />;
+}
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
new file mode 100644
index 000000000..cd92c828f
--- /dev/null
+++ b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -0,0 +1,67 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { useNotification } from "@/hooks";
+import { useSearchParams } from "next/navigation";
+import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
+import { getDestinations } from "@/services";
+import { useQuery } from "react-query";
+import { KeyvalLoader } from "@/design.system";
+
+const DEST = "dest";
+
+export default function ManageDestinationPage() {
+  const [selectedDestination, setSelectedDestination] = useState<any>(null);
+  const { show, Notification } = useNotification();
+
+  const {
+    isLoading: destinationLoading,
+    data: destinationList,
+    refetch,
+  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
+
+  const searchParams = useSearchParams();
+
+  useEffect(onPageLoad, [searchParams, destinationList]);
+
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
+    const currentDestination = destinationList?.filter(
+      ({ id }) => id === search
+    );
+    if (currentDestination?.length) {
+      setSelectedDestination(currentDestination[0]);
+    }
+  }
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    refetch();
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  if (destinationLoading || !selectedDestination) {
+    return <KeyvalLoader />;
+  }
+
+  return (
+    <>
+      <UpdateDestinationFlow
+        selectedDestination={selectedDestination}
+        onSuccess={onSuccess}
+        onError={onError}
+      />
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx
index 7056885ed..bb83b2d78 100644
--- a/frontend/webapp/app/overview/destinations/page.tsx
+++ b/frontend/webapp/app/overview/destinations/page.tsx
@@ -1,11 +1,22 @@
 "use client";
 import { DestinationContainer } from "@/containers/overview";
 import React from "react";
+import { styled } from "styled-components";
+
+const DestinationContainerWrapper = styled.div`
+  height: 100vh;
+  overflow-y: hidden;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+`;
 
 export default function DestinationDashboardPage() {
   return (
-    <>
+    <DestinationContainerWrapper>
       <DestinationContainer />
-    </>
+    </DestinationContainerWrapper>
   );
 }
diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx
index dc76e1c7f..2159907df 100644
--- a/frontend/webapp/app/overview/layout.tsx
+++ b/frontend/webapp/app/overview/layout.tsx
@@ -1,6 +1,7 @@
-"use client";
+// "use client";
 import { Menu } from "@/components/side.menu";
 import theme from "@/styles/palette";
+import { Metadata } from "next";
 import React from "react";
 
 const LAYOUT_STYLE = {
@@ -14,6 +15,9 @@ const CHILDREN_STYLE = {
   width: "100%",
   height: "93%",
 };
+export const metadata: Metadata = {
+  title: "Odigos",
+};
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx
new file mode 100644
index 000000000..9c83bfc82
--- /dev/null
+++ b/frontend/webapp/app/overview/sources/create/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OverviewHeader } from "@/components/overview";
+import { useNotification } from "@/hooks";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
+import { NewSourceFlow } from "@/containers/overview/sources/new.source.flow";
+import { useRouter } from "next/navigation";
+
+export default function CreateNewSourcesPage() {
+  const { show, Notification } = useNotification();
+  const router = useRouter();
+  const { data: sources, refetch } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+
+  function onNewSourceSuccess() {
+    setTimeout(() => {
+      router.back();
+      refetch();
+    }, 1000);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
+    });
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.SOURCES}
+        onBackClick={() => router.back()}
+      />
+      <NewSourceFlow onSuccess={onNewSourceSuccess} sources={sources} />
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
new file mode 100644
index 000000000..a8de98f08
--- /dev/null
+++ b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -0,0 +1,103 @@
+"use client";
+import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
+import { getSources } from "@/services";
+import {
+  NOTIFICATION,
+  OVERVIEW,
+  QUERIES,
+  ROUTES,
+  SETUP,
+} from "@/utils/constants";
+import { useRouter, useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { useMutation, useQuery } from "react-query";
+import { ManageSourcePageContainer, BackButtonWrapper } from "./styled";
+import { LANGUAGES_LOGOS } from "@/assets/images";
+import { Back } from "@/assets/icons/overview";
+import { KeyvalText } from "@/design.system";
+import { ManagedSource } from "@/types/sources";
+import { DeleteSource } from "@/components/overview";
+import { deleteSource } from "@/services/sources";
+import { useNotification } from "@/hooks";
+
+const SOURCE = "source";
+
+export default function ManageSourcePage() {
+  const [currentSource, setCurrentSource] = useState<ManagedSource | null>(
+    null
+  );
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { data: sources, refetch } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation(() =>
+    deleteSource(
+      currentSource?.namespace || "",
+      currentSource?.kind || "",
+      currentSource?.name || ""
+    )
+  );
+  useEffect(onPageLoad, [sources]);
+
+  useEffect(() => {
+    console.log({ currentSource });
+  }, [currentSource]);
+
+  function onPageLoad() {
+    const search = searchParams.get(SOURCE);
+    const source = sources?.find((item) => item.name === search);
+    source && setCurrentSource(source);
+  }
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  function onSuccess() {
+    setTimeout(() => {
+      router.back();
+      refetch();
+    }, 1000);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_DELETED_SUCCESS,
+    });
+  }
+  function onDelete() {
+    mutate(undefined, {
+      onSuccess,
+      onError,
+    });
+  }
+
+  return (
+    <ManageSourcePageContainer>
+      <BackButtonWrapper onClick={() => router.back()}>
+        <Back width={14} />
+        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+      </BackButtonWrapper>
+      {currentSource && (
+        <ManageSourceHeader
+          name={currentSource?.name}
+          image_url={
+            LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+          }
+        />
+      )}
+      <DeleteSource
+        onDelete={onDelete}
+        name={currentSource?.name}
+        image_url={
+          LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+        }
+      />
+      <Notification />
+    </ManageSourcePageContainer>
+  );
+}
diff --git a/frontend/webapp/app/overview/sources/manage/styled.tsx b/frontend/webapp/app/overview/sources/manage/styled.tsx
new file mode 100644
index 000000000..4face21f0
--- /dev/null
+++ b/frontend/webapp/app/overview/sources/manage/styled.tsx
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const ManageSourcePageContainer = styled.div`
+  padding: 32px;
+`;
+
+export const BackButtonWrapper = styled.div`
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  cursor: pointer;
+  p {
+    cursor: pointer !important;
+  }
+`;
diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx
index 454db1e18..77d0c32f2 100644
--- a/frontend/webapp/app/overview/sources/page.tsx
+++ b/frontend/webapp/app/overview/sources/page.tsx
@@ -3,9 +3,5 @@ import { SourcesContainer } from "@/containers/overview";
 import React from "react";
 
 export default function SourcesOverviewPage() {
-  return (
-    <>
-      <SourcesContainer />
-    </>
-  );
+  return <SourcesContainer />;
 }
diff --git a/frontend/webapp/assets/icons/overview/index.tsx b/frontend/webapp/assets/icons/overview/index.tsx
index f9254c49d..68481e5ca 100644
--- a/frontend/webapp/assets/icons/overview/index.tsx
+++ b/frontend/webapp/assets/icons/overview/index.tsx
@@ -1,6 +1,7 @@
 import KeyvalMiddleware from "./middleware.svg";
 import Folder from "./folder.svg";
 import Plus from "./plus.svg";
+import Pen from "./pen.svg";
 import Back from "./back.svg";
 
-export { KeyvalMiddleware, Folder, Plus, Back };
+export { KeyvalMiddleware, Folder, Plus, Back, Pen };
diff --git a/frontend/webapp/assets/icons/overview/pen.svg b/frontend/webapp/assets/icons/overview/pen.svg
new file mode 100644
index 000000000..03494bea2
--- /dev/null
+++ b/frontend/webapp/assets/icons/overview/pen.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2069 3.58561L9.41438 0.792486C9.32152 0.699603 9.21127 0.625923 9.08993 0.575654C8.96859 0.525385 8.83853 0.499512 8.70719 0.499512C8.57585 0.499512 8.4458 0.525385 8.32446 0.575654C8.20312 0.625923 8.09287 0.699603 8 0.792486L0.29313 8.49999C0.199867 8.59251 0.125926 8.70265 0.0756045 8.824C0.025283 8.94535 -0.000414649 9.07549 5.05934e-06 9.20686V12C5.05934e-06 12.2652 0.105362 12.5196 0.292898 12.7071C0.480435 12.8946 0.734789 13 1.00001 13H3.79313C3.9245 13.0004 4.05464 12.9747 4.17599 12.9244C4.29735 12.8741 4.40748 12.8001 4.50001 12.7069L12.2069 4.99999C12.2998 4.90712 12.3734 4.79687 12.4237 4.67553C12.474 4.55419 12.4999 4.42414 12.4999 4.2928C12.4999 4.16146 12.474 4.0314 12.4237 3.91006C12.3734 3.78872 12.2998 3.67847 12.2069 3.58561ZM10 5.79249L7.20688 2.99999L8.70688 1.49999L11.5 4.29249L10 5.79249Z" fill="#CCD0D2"/>
+</svg>
diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
index 51fd8d3cb..5dc79074a 100644
--- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
@@ -25,9 +25,10 @@ const BackButtonWrapper = styled.div`
   }
 `;
 
-const CreateConnectionWrapper = styled.div`
+const CreateConnectionWrapper = styled.div<{ expand: boolean | undefined }>`
   display: flex;
   gap: 200px;
+  height: ${({ expand }) => (expand ? 630 : 530)}px;
   overflow: scroll;
   scrollbar-width: none;
 `;
@@ -60,7 +61,8 @@ export function ManageDestination({
         </BackButtonWrapper>
       )}
       <ManageDestinationHeader data={selectedDestination} />
-      <CreateConnectionWrapper>
+      <CreateConnectionWrapper expand={!!onDelete || false}>
+
         <div>
           <CreateConnectionForm
             fields={destinationType?.fields}
diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index d6c9f8384..d231bd943 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -3,3 +3,4 @@ export { ManageDestination } from "./destination/manage.destination/manage.desti
 export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list";
 export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list";
 export { SourcesActionMenu } from "./sources/action.menu/sources.action.menu";
+export { DeleteSource } from "./sources/delete.source/delete.source";
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
index 146df0a97..3c0c8b9bb 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.styled.tsx
@@ -10,5 +10,6 @@ export const SourcesMenuWrapper = styled.div`
 
 export const InputsWrapper = styled.div`
   display: flex;
+  flex-wrap: wrap;
   gap: 16px;
 `;
diff --git a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
index bc1b0faa8..947f13c33 100644
--- a/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
+++ b/frontend/webapp/components/overview/sources/action.menu/sources.action.menu.tsx
@@ -9,7 +9,7 @@ import { OVERVIEW } from "@/utils/constants";
 import theme from "@/styles/palette";
 import { FilterSourcesOptions } from "@/components/setup/sources/sources.option.menu/filter.sources.options";
 
-const BUTTON_STYLES = { gap: 10, height: 36 };
+const BUTTON_STYLES = { gap: 10, height: 36, width: 200 };
 
 export function SourcesActionMenu({
   onAddClick,
diff --git a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
new file mode 100644
index 000000000..2520989cd
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { styled } from "styled-components";
+import { ConnectionsIcons } from "@/components/setup";
+import { DangerZone, KeyvalModal, KeyvalText } from "@/design.system";
+import { ModalPositionX, ModalPositionY } from "@/design.system/modal/types";
+import theme from "@/styles/palette";
+import { OVERVIEW } from "@/utils/constants";
+
+const FieldWrapper = styled.div`
+  margin-top: 32px;
+  width: 348px;
+`;
+
+const IMAGE_STYLE = { border: "solid 1px #ededed" };
+export function DeleteSource({
+  onDelete,
+  name,
+  image_url,
+}: {
+  onDelete: () => void;
+  name: string | undefined;
+  image_url: string;
+}) {
+  const [showModal, setShowModal] = useState(false);
+
+  const modalConfig = {
+    title: OVERVIEW.DELETE_SOURCE,
+    showHeader: true,
+    showOverlay: true,
+    positionX: ModalPositionX.center,
+    positionY: ModalPositionY.center,
+    padding: "20px",
+    footer: {
+      primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE,
+      primaryBtnAction: () => {
+        setShowModal(false);
+        onDelete();
+      },
+    },
+  };
+
+  return (
+    <>
+      <FieldWrapper>
+        <DangerZone
+          title={OVERVIEW.SOURCE_DANGER_ZONE_TITLE}
+          subTitle={OVERVIEW.SOURCE_DANGER_ZONE_SUBTITLE}
+          btnText={OVERVIEW.DELETE}
+          onClick={() => setShowModal(true)}
+        />
+      </FieldWrapper>
+      {showModal && (
+        <KeyvalModal
+          show={showModal}
+          closeModal={() => setShowModal(false)}
+          config={modalConfig}
+        >
+          <br />
+          <ConnectionsIcons icon={image_url} imageStyle={IMAGE_STYLE} />
+          <br />
+          <KeyvalText color={theme.text.primary} size={20} weight={600}>
+            {`${OVERVIEW.DELETE} ${name}`}
+          </KeyvalText>
+        </KeyvalModal>
+      )}
+    </>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
new file mode 100644
index 000000000..5fbcec042
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
@@ -0,0 +1,96 @@
+import React, { useRef, useState } from "react";
+import styled from "styled-components";
+import { KeyvalActionInput, KeyvalImage, KeyvalText } from "@/design.system";
+import { Pen } from "@/assets/icons/overview";
+import { useOnClickOutside } from "@/hooks";
+
+const ManageSourceHeaderWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  min-width: 686px;
+  height: 104px;
+  align-items: center;
+  border-radius: 25px;
+  margin: 24px 0;
+  background: radial-gradient(
+      78.09% 72.18% at 100% -0%,
+      rgba(150, 242, 255, 0.4) 0%,
+      rgba(150, 242, 255, 0) 61.91%
+    ),
+    linear-gradient(180deg, #2e4c55 0%, #303355 100%);
+`;
+
+const TextWrapper = styled.div`
+  margin-left: 12px;
+  margin-right: 12px;
+`;
+
+const EditIconWrapper = styled.div`
+  width: 20px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  :hover {
+    cursor: pointer;
+    fill: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const ActionInputWrapper = styled.div`
+  width: 80%;
+  height: 49px;
+`;
+
+const IMAGE_STYLE: React.CSSProperties = {
+  backgroundColor: "#fff",
+  padding: 4,
+  marginRight: 16,
+  marginLeft: 16,
+};
+
+export function ManageSourceHeader({ image_url, name }) {
+  const [showEditInput, setShowEditInput] = useState(true);
+  const [inputValue, setInputValue] = useState(name);
+  const containerRef = useRef(null);
+  const handleClickOutside = () => {
+    !showEditInput && handleSave();
+  };
+
+  useOnClickOutside(containerRef, handleClickOutside);
+
+  function handleSave() {
+    setShowEditInput(true);
+  }
+
+  function handleInputChange(value) {
+    setInputValue(value);
+  }
+
+  return (
+    <ManageSourceHeaderWrapper ref={containerRef}>
+      <KeyvalImage src={image_url} style={IMAGE_STYLE} />
+      {showEditInput ? (
+        <>
+          <TextWrapper>
+            <KeyvalText size={24} weight={700}>
+              {name}
+            </KeyvalText>
+          </TextWrapper>
+
+          <EditIconWrapper onClick={() => setShowEditInput(false)}>
+            <Pen width={16} height={16} />
+          </EditIconWrapper>
+        </>
+      ) : (
+        <ActionInputWrapper>
+          <KeyvalActionInput
+            value={inputValue}
+            onChange={(e) => handleInputChange(e)}
+            onAction={handleSave}
+          />
+        </ActionInputWrapper>
+      )}
+    </ManageSourceHeaderWrapper>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
index 1aa8f559b..a2a695f41 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -20,13 +20,15 @@ const LOGO_STYLE: React.CSSProperties = {
 
 interface SourceManagedCardProps {
   item: ManagedSource;
+  onClick?: () => void;
 }
 const DEPLOYMENT = "deployment";
 export default function SourceManagedCard({
   item = {} as ManagedSource,
+  onClick,
 }: SourceManagedCardProps) {
   return (
-    <CardWrapper>
+    <CardWrapper onClick={onClick}>
       <KeyvalImage
         src={LANGUAGES_LOGOS[item?.languages?.[0].language || ""]}
         width={56}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
index b5a82fad5..dff5f790f 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -8,16 +8,24 @@ import Empty from "@/assets/images/empty-list.svg";
 import SourceManagedCard from "./sources.manage.card";
 import { ManagedSource } from "@/types/sources";
 import { KeyvalText } from "@/design.system";
-import { OVERVIEW } from "@/utils/constants";
+import { OVERVIEW, ROUTES } from "@/utils/constants";
+import { useRouter } from "next/navigation";
 
 interface SourcesManagedListProps {
   data: ManagedSource[];
 }
 
 export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
+  const router = useRouter();
   function renderSources() {
     return data.map((source: ManagedSource) => (
-      <SourceManagedCard key={source?.name} item={source} />
+      <SourceManagedCard
+        key={source?.name}
+        item={source}
+        onClick={() =>
+          router.push(`${ROUTES.MANAGE_SOURCE}?source=${source?.name}`)
+        }
+      />
     ));
   }
 
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index 3fd4cad8d..9a36b4efa 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -12,10 +12,10 @@ export const CardWrapper = styled.div`
   align-items: center;
   flex-direction: column;
   gap: 10px;
-  /* cursor: pointer;
+  cursor: pointer;
   &:hover {
     background: var(--dark-mode-dark-1, #07111a81);
-  } */
+  }
 `;
 
 export const EmptyListWrapper = styled.div`
diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx
index 8f83912ec..814885343 100644
--- a/frontend/webapp/components/side.menu/menu/menu.tsx
+++ b/frontend/webapp/components/side.menu/menu/menu.tsx
@@ -4,7 +4,7 @@ import { MenuContainer, LogoWrapper, MenuItemsWrapper } from "./menu.styled";
 import { KeyvalText } from "@/design.system";
 import MenuItem from "../menu.item/menu.item";
 import { useRouter } from "next/navigation";
-import { OVERVIEW } from "@/utils/constants";
+import { OVERVIEW, ROUTES } from "@/utils/constants";
 import { MENU_ITEMS } from "./items";
 
 export interface MenuItem {
@@ -26,12 +26,13 @@ export function Menu() {
   useEffect(onLoad, []);
 
   function onLoad() {
-    const currentItem = MENU_ITEMS.find((item) => {
-      return item.navigate === window.location.pathname;
-    });
-    if (currentItem?.id !== currentMenuItem.id) {
-      handleMenuItemClick(currentItem);
-    }
+    const currentItem = MENU_ITEMS.find(
+      ({ navigate }) =>
+        navigate !== ROUTES.OVERVIEW &&
+        window.location.pathname.includes(navigate)
+    );
+
+    currentItem && setCurrentMenuItem(currentItem);
   }
 
   function handleMenuItemClick(item) {
diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destination/destination.styled.tsx
index cac5196dd..008ad16f7 100644
--- a/frontend/webapp/containers/overview/destination/destination.styled.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.styled.tsx
@@ -1,15 +1,5 @@
 import styled from "styled-components";
 
-export const DestinationContainerWrapper = styled.div`
-  height: 100vh;
-  overflow-y: hidden;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-`;
-
 export const NewDestinationContainer = styled.div`
   padding: 20px 36px;
 `;
diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
index 162b174a6..8ed985640 100644
--- a/frontend/webapp/containers/overview/destination/destination.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -1,92 +1,34 @@
 "use client";
-import React, { useState } from "react";
+import React from "react";
 import { KeyvalLoader } from "@/design.system";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getDestinations } from "@/services";
 import { OverviewHeader, DestinationsManagedList } from "@/components/overview";
-import { DestinationContainerWrapper } from "./destination.styled";
-import { NewDestinationFlow } from "./new.destination.flow";
-import { UpdateDestinationFlow } from "./update.destination.flow";
-import { useNotification } from "@/hooks";
+import { useRouter } from "next/navigation";
 
 export function DestinationContainer() {
-  const [selectedDestination, setSelectedDestination] = useState<any>(null);
-  const [displayNewDestination, setDisplayNewDestination] =
-    useState<boolean>(false);
-  const { show, Notification } = useNotification();
-  const {
-    isLoading: destinationLoading,
-    data: destinationList,
-    refetch,
-  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
-
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    refetch();
-    setSelectedDestination(null);
-    setDisplayNewDestination(false);
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
-  function renderNewDestinationFlow() {
-    return (
-      <NewDestinationFlow
-        onSuccess={onSuccess}
-        onError={onError}
-        onBackClick={() => {
-          setDisplayNewDestination(false);
-        }}
-      />
-    );
-  }
-
-  function renderUpdateDestinationFlow() {
-    return (
-      <UpdateDestinationFlow
-        selectedDestination={selectedDestination}
-        setSelectedDestination={setSelectedDestination}
-        onSuccess={onSuccess}
-        onError={onError}
-      />
-    );
-  }
+  const { isLoading: destinationLoading, data: destinationList } = useQuery(
+    [QUERIES.API_DESTINATIONS],
+    getDestinations
+  );
 
-  function renderDestinationList() {
-    return (
-      <>
-        <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
-        <DestinationsManagedList
-          data={destinationList}
-          onItemClick={setSelectedDestination}
-          onMenuButtonClick={() => setDisplayNewDestination(true)}
-        />
-      </>
-    );
-  }
+  const router = useRouter();
 
   if (destinationLoading) {
     return <KeyvalLoader />;
   }
 
   return (
-    <DestinationContainerWrapper>
-      {displayNewDestination
-        ? renderNewDestinationFlow()
-        : selectedDestination
-        ? renderUpdateDestinationFlow()
-        : renderDestinationList()}
-      <Notification />
-    </DestinationContainerWrapper>
+    <>
+      <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
+      <DestinationsManagedList
+        data={destinationList}
+        onItemClick={({ id }) =>
+          router.push(`${ROUTES.UPDATE_DESTINATION}${id}`)
+        }
+        onMenuButtonClick={() => router.push(ROUTES.CREATE_DESTINATION)}
+      />
+    </>
   );
 }
diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
index 7a75a32c0..27c0dddc7 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
@@ -1,80 +1,26 @@
 "use client";
-import React, { useState } from "react";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
-import { useMutation, useQuery } from "react-query";
-import { getDestination, setDestination } from "@/services";
-import { ManageDestination, OverviewHeader } from "@/components/overview";
-import { useSectionData } from "@/hooks";
+import React from "react";
+import { OVERVIEW, ROUTES } from "@/utils/constants";
+import { OverviewHeader } from "@/components/overview";
 import { DestinationSection } from "@/containers/setup/destination/destination.section";
 import { NewDestinationContainer } from "./destination.styled";
+import { useRouter } from "next/navigation";
 
-export function NewDestinationFlow({ onBackClick, onSuccess, onError }) {
-  const { sectionData, setSectionData } = useSectionData(null);
-  const [managed, setManaged] = useState<any>(null);
-  const { data: destinationType } = useQuery(
-    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
-    () => getDestination(sectionData?.type),
-    {
-      enabled: !!sectionData,
-    }
-  );
-  const { mutate } = useMutation((body) => setDestination(body));
-
-  function onSubmit(newDestination) {
-    const destination = {
-      ...newDestination,
-      type: sectionData.type,
-    };
-
-    mutate(destination, {
-      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
-      onError,
-    });
-  }
-
-  function handleBackPress() {
-    if (managed && sectionData) {
-      setManaged(false);
-      setSectionData(null);
-      return;
-    }
-    onBackClick();
-  }
-
-  function renderNewDestinationForm() {
-    return (
-      <ManageDestination
-        destinationType={destinationType}
-        selectedDestination={sectionData}
-        onSubmit={onSubmit}
-      />
-    );
-  }
-
-  function renderSelectNewDestination() {
-    return (
-      <>
-        <DestinationSection
-          sectionData={sectionData}
-          setSectionData={(data) => {
-            setSectionData(data);
-            setManaged(true);
-          }}
-        />
-      </>
-    );
-  }
+export function NewDestinationFlow() {
+  const router = useRouter();
 
   return (
     <>
       <OverviewHeader
         title={OVERVIEW.MENU.DESTINATIONS}
-        onBackClick={handleBackPress}
+        onBackClick={() => router.back()}
       />
       <NewDestinationContainer>
-        {managed && sectionData
-          ? renderNewDestinationForm()
-          : renderSelectNewDestination()}
+        <DestinationSection
+          setSectionData={(data) => {
+            router.push(`${ROUTES.MANAGE_DESTINATION}${data.type}`);
+          }}
+        />
       </NewDestinationContainer>
     </>
   );
diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
index 8eb710a29..d95fe7ac4 100644
--- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
@@ -7,13 +7,15 @@ import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
 import { deleteDestination } from "@/services/destinations";
 import { ManageDestinationWrapper } from "./destination.styled";
+import { useRouter } from "next/navigation";
 
-export function UpdateDestinationFlow({
+export default function UpdateDestinationFlow({
   selectedDestination,
-  setSelectedDestination,
   onSuccess,
   onError,
 }) {
+  const router = useRouter();
+
   const manageData = useMemo(() => {
     return {
       ...selectedDestination,
@@ -60,7 +62,7 @@ export function UpdateDestinationFlow({
   ) : (
     <ManageDestinationWrapper>
       <ManageDestination
-        onBackClick={() => setSelectedDestination(null)}
+        onBackClick={() => router.back()}
         destinationType={destinationType}
         selectedDestination={manageData}
         onSubmit={onSubmit}
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 2a26e3504..e7895d4e4 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -1,3 +1,4 @@
 export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
 export { SourcesContainer } from "./sources/sources";
+export { NewDestinationFlow } from "./destination/new.destination.flow";
diff --git a/frontend/webapp/containers/overview/sources/manage.sources.tsx b/frontend/webapp/containers/overview/sources/manage.sources.tsx
index af0e0daa9..1b3339cac 100644
--- a/frontend/webapp/containers/overview/sources/manage.sources.tsx
+++ b/frontend/webapp/containers/overview/sources/manage.sources.tsx
@@ -9,7 +9,7 @@ import { ManagedSource, Namespace } from "@/types/sources";
 
 const DEFAULT_FILTER = { name: "default", selected: false, totalApps: 0 };
 
-export function ManageSources({ setDisplayNewSourceFlow, sources }) {
+export function ManageSources({ onAddClick, sources }) {
   const [searchFilter, setSearchFilter] = useState<string>("");
   const [currentNamespace, setCurrentNamespace] =
     useState<Namespace>(DEFAULT_FILTER);
@@ -60,7 +60,7 @@ export function ManageSources({ setDisplayNewSourceFlow, sources }) {
           searchFilter={searchFilter}
           setSearchFilter={setSearchFilter}
           data={namespacesList}
-          onAddClick={() => setDisplayNewSourceFlow(true)}
+          onAddClick={onAddClick}
           setCurrentItem={setCurrentNamespace}
         />
       </MenuWrapper>
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index 5152767ba..3b5468b9a 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -17,7 +17,9 @@ export function NewSourceFlow({ onSuccess, sources }) {
   const { show, Notification } = useNotification();
 
   function updateSectionDataWithSources() {
-    const sourceNamesSet = new Set(sources.map((source) => source.name));
+    const sourceNamesSet = new Set(
+      sources.map((source: SelectedSources) => source.name)
+    );
     const updatedSectionData: SelectedSources = {};
 
     for (const key in sectionData) {
@@ -50,6 +52,7 @@ export function NewSourceFlow({ onSuccess, sources }) {
       <ButtonWrapper>
         <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
         <KeyvalButton
+          disabled={totalSelected === 0}
           onClick={updateSectionDataWithSources}
           style={{ width: 110 }}
         >
@@ -58,6 +61,7 @@ export function NewSourceFlow({ onSuccess, sources }) {
           </KeyvalText>
         </KeyvalButton>
       </ButtonWrapper>
+
       <SourcesSection
         sectionData={sectionData}
         setSectionData={setSectionData}
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
index fa2191caf..1eed8288a 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -1,68 +1,24 @@
 "use client";
-import React, { useEffect, useState } from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import React from "react";
+import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
-import { NewSourceFlow } from "./new.source.flow";
 import { ManageSources } from "./manage.sources";
-import { useNotification } from "@/hooks";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
+import { useRouter } from "next/navigation";
 
 export function SourcesContainer() {
-  const [displayNewSourceFlow, setDisplayNewSourceFlow] = useState<
-    boolean | null
-  >(null);
-  const { show, Notification } = useNotification();
-
-  const { data: sources, refetch } = useQuery(
-    [QUERIES.API_SOURCES],
-    getSources
-  );
-
-  useEffect(() => {
-    refetchSources();
-  }, [displayNewSourceFlow]);
-
-  async function refetchSources() {
-    if (displayNewSourceFlow === false) {
-      setTimeout(async () => {
-        refetch();
-      }, 1000);
-    }
-  }
-
-  function onNewSourceSuccess() {
-    setDisplayNewSourceFlow(false);
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
-    });
-  }
-
-  function renderNewSourceFlow() {
-    return <NewSourceFlow onSuccess={onNewSourceSuccess} sources={sources} />;
-  }
-
-  function renderSources() {
-    return (
-      <ManageSources
-        setDisplayNewSourceFlow={setDisplayNewSourceFlow}
-        sources={sources}
-      />
-    );
-  }
+  const router = useRouter();
+  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
 
   return (
     <SourcesContainerWrapper>
-      <OverviewHeader
-        title={OVERVIEW.MENU.SOURCES}
-        onBackClick={
-          displayNewSourceFlow ? () => setDisplayNewSourceFlow(false) : null
-        }
+      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <ManageSources
+        onAddClick={() => router.push(ROUTES.CREATE_SOURCE)}
+        sources={sources}
       />
-      {displayNewSourceFlow ? renderNewSourceFlow() : renderSources()}
-      <Notification />
     </SourcesContainerWrapper>
   );
 }
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index e8dd0a051..854edd779 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useQuery } from "react-query";
-import { QUERIES, SETUP } from "@/utils/constants";
+import { NOTIFICATION, QUERIES, SETUP } from "@/utils/constants";
 import { MONITORING_OPTIONS } from "@/components/setup/destination/utils";
 import { DestinationList, DestinationOptionMenu } from "@/components/setup";
 import Empty from "@/assets/images/empty-list.svg";
@@ -20,7 +20,7 @@ import { useNotification } from "@/hooks";
 import { getDestinationsTypes } from "@/services";
 
 type DestinationSectionProps = {
-  sectionData: any;
+  sectionData?: any;
   setSectionData: (data: any) => void;
 };
 
@@ -42,7 +42,7 @@ export function DestinationSection({
   useEffect(() => {
     isError &&
       show({
-        type: "error",
+        type: NOTIFICATION.ERROR,
         message: error,
       });
   }, [isError]);
@@ -70,9 +70,9 @@ export function DestinationSection({
       return (
         displayItem && (
           <DestinationList
+            sectionData={sectionData}
             key={category.name}
             data={category}
-            sectionData={sectionData}
             onItemClick={(item: any) => setSectionData(item)}
           />
         )
diff --git a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx
index fccd64123..49282f3d6 100644
--- a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx
+++ b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx
@@ -32,7 +32,7 @@ export const DropdownHeader = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.text.white};
   font-size: 14px;
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme }) => theme.font_family.primary}, sans-serif;
   font-weight: 400;
 `;
 
diff --git a/frontend/webapp/design.system/index.tsx b/frontend/webapp/design.system/index.tsx
index 7885d1a19..c1b3be3ce 100644
--- a/frontend/webapp/design.system/index.tsx
+++ b/frontend/webapp/design.system/index.tsx
@@ -15,6 +15,7 @@ export { KeyvalLink } from "./link/link";
 export { KeyvalTooltip } from "./tooltip/tooltip";
 export { KeyvalImage } from "./image/image";
 export { KeyvalInput } from "./input/input";
+export { KeyvalActionInput } from "./input/action.input";
 export { KeyvalVideo } from "./video/video";
 export { KeyvalLoader } from "./loader/loader";
 export { KeyvalNotification } from "./notification/notification";
diff --git a/frontend/webapp/design.system/input/action.input.tsx b/frontend/webapp/design.system/input/action.input.tsx
new file mode 100644
index 000000000..4bede03d6
--- /dev/null
+++ b/frontend/webapp/design.system/input/action.input.tsx
@@ -0,0 +1,42 @@
+import React, { ChangeEvent } from "react";
+import { StyledActionInputContainer, StyledActionInput } from "./input.styled";
+import { KeyvalButton } from "../button/button";
+import { KeyvalText } from "../text/text";
+import theme from "@/styles/palette";
+import { ACTION } from "@/utils/constants";
+
+interface InputProps {
+  value: string;
+  onAction: () => void;
+  onChange: (value: string) => void;
+  type?: string;
+  style?: React.CSSProperties;
+}
+
+export function KeyvalActionInput({
+  value,
+  onChange,
+  style = {},
+}: InputProps): JSX.Element {
+  function handleChange(event: ChangeEvent<HTMLInputElement>): void {
+    onChange(event.target.value);
+  }
+
+  return (
+    <>
+      <StyledActionInputContainer style={{ ...style }}>
+        <StyledActionInput
+          value={value}
+          onChange={handleChange}
+          autoComplete="off"
+        />
+
+        <KeyvalButton>
+          <KeyvalText size={14} weight={500} color={theme.text.dark_button}>
+            {ACTION.SAVE}
+          </KeyvalText>
+        </KeyvalButton>
+      </StyledActionInputContainer>
+    </>
+  );
+}
diff --git a/frontend/webapp/design.system/input/input.styled.tsx b/frontend/webapp/design.system/input/input.styled.tsx
index 25b200005..808fdeffe 100644
--- a/frontend/webapp/design.system/input/input.styled.tsx
+++ b/frontend/webapp/design.system/input/input.styled.tsx
@@ -32,6 +32,19 @@ export const StyledInputContainer = styled.div<ActiveProps>`
   }
 `;
 
+export const StyledActionInputContainer = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: 0px 12px;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 4px;
+  border: ${({ theme }) => `1px solid ${theme.colors.secondary}`};
+`;
+
 export const StyledInput = styled.input`
   background: transparent;
   border: none;
@@ -40,6 +53,12 @@ export const StyledInput = styled.input`
   color: ${({ theme }) => theme.text.white};
 `;
 
+export const StyledActionInput = styled(StyledInput)`
+  color: var(--dark-mode-white, #fff);
+  font-family: Inter, sans-serif;
+  font-size: 24px;
+`;
+
 export const LabelWrapper = styled.div`
   margin-bottom: 8px;
 `;
diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx
index a8d53e169..c0352b40e 100644
--- a/frontend/webapp/design.system/notification/notification.tsx
+++ b/frontend/webapp/design.system/notification/notification.tsx
@@ -7,6 +7,7 @@ import { KeyvalText } from "../text/text";
 import CloseIcon from "@/assets/icons/X-blue.svg";
 import SuccessIcon from "@/assets/icons/success-notification.svg";
 import ErrorIcon from "@/assets/icons/error-notification.svg";
+
 interface KeyvalNotificationProps {
   type: "success" | "error" | "warning" | "info";
   message: string;
diff --git a/frontend/webapp/design.system/search.input/search.input.styled.tsx b/frontend/webapp/design.system/search.input/search.input.styled.tsx
index f99e986d9..39ee4f362 100644
--- a/frontend/webapp/design.system/search.input/search.input.styled.tsx
+++ b/frontend/webapp/design.system/search.input/search.input.styled.tsx
@@ -29,7 +29,7 @@ export const StyledSearchInput = styled.input<ActiveProps>`
   color: ${({ active, theme }) =>
     `${active ? theme.colors.white : theme.text.grey}`};
   font-size: 14px;
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme }) => theme.font_family.primary}, sans-serif;
   font-weight: 400;
   &:focus {
     color: ${({ theme }) => `solid 1px ${theme.colors.white}`};
diff --git a/frontend/webapp/design.system/text/text.styled.tsx b/frontend/webapp/design.system/text/text.styled.tsx
index f400cfe94..a68573fc4 100644
--- a/frontend/webapp/design.system/text/text.styled.tsx
+++ b/frontend/webapp/design.system/text/text.styled.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const TextWrapper = styled.p`
   color: ${({ theme }) => theme.text.white};
   margin: 0;
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme }) => theme.font_family.primary}, sans-serif;
   font-size: 16px;
   font-weight: 400;
 `;
diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx
index eb50b72a2..fc7fd5050 100644
--- a/frontend/webapp/services/sources.tsx
+++ b/frontend/webapp/services/sources.tsx
@@ -1,5 +1,5 @@
 import { API } from "@/utils/constants";
-import { get, post } from "./api";
+import { get, post, httpDelete } from "./api";
 import { SelectedSources } from "@/types/sources";
 
 export async function getNamespaces() {
@@ -17,3 +17,13 @@ export async function setNamespaces(body: SelectedSources): Promise<void> {
 export async function getSources() {
   return await get(API.SOURCES);
 }
+
+export async function deleteSource(
+  namespace: string,
+  kind: string,
+  name: string
+) {
+  return await httpDelete(
+    `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`
+  );
+}
diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx
index 11dd91a8d..90fdf2c71 100644
--- a/frontend/webapp/utils/constants/index.tsx
+++ b/frontend/webapp/utils/constants/index.tsx
@@ -1,4 +1,4 @@
 export { ROUTES } from "./routes";
 export { CONFIG } from "./config";
-export { SETUP, OVERVIEW, NOTIFICATION } from "./string";
+export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string";
 export { API, QUERIES } from "./urls";
diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx
index a27e3f561..6a074d899 100644
--- a/frontend/webapp/utils/constants/routes.tsx
+++ b/frontend/webapp/utils/constants/routes.tsx
@@ -4,4 +4,9 @@ export const ROUTES = {
   SOURCES: "/overview/sources",
   DESTINATIONS: "/overview/destinations",
   NEW_DESTINATION: "/setup?state=destinations",
+  MANAGE_DESTINATION: "/overview/destinations/create/manage?dest=",
+  UPDATE_DESTINATION: "destinations/manage?dest=",
+  CREATE_DESTINATION: "destinations/create",
+  CREATE_SOURCE: "/overview/sources/create",
+  MANAGE_SOURCE: "/overview/sources/manage",
 };
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index 53903e8c5..3227c2b95 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -73,13 +73,22 @@ export const OVERVIEW = {
   MANAGE: "Manage",
   DELETE: "Delete",
   DELETE_DESTINATION: "Delete Destination",
+  DELETE_SOURCE: "Delete Source",
+  SOURCE_DANGER_ZONE_TITLE: "Delete this source",
+  SOURCE_DANGER_ZONE_SUBTITLE:
+    "This action cannot be undone. This will permanently delete the source and all associated data.",
   DELETE_MODAL_TITLE: "Delete this destination",
   DELETE_MODAL_SUBTITLE:
     "This action cannot be undone. This will permanently delete the destination and all associated data.",
   DELETE_BUTTON: "I want to delete this destination",
+  CONFIRM_SOURCE_DELETE: "I want to delete this source",
   CONNECT: "Connect",
 };
 
+export const ACTION = {
+  SAVE: "Save",
+};
+
 export const NOTIFICATION = {
   ERROR: "error",
   SUCCESS: "success",

From 4e02ce6da11d1abd5572fc93bf1391c476c9590e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 16:28:38 +0300
Subject: [PATCH 055/374] WIP

---
 frontend/webapp/app/layout.tsx             | 5 +----
 frontend/webapp/app/overview/layout.tsx    | 7 ++-----
 frontend/webapp/app/setup/layout.tsx       | 8 ++++++++
 frontend/webapp/utils/constants/config.tsx | 5 +++++
 frontend/webapp/utils/constants/index.tsx  | 2 +-
 5 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 frontend/webapp/app/setup/layout.tsx

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 050b0c95c..33abda923 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import theme from "@/styles/palette";
 import { QueryClient, QueryClientProvider } from "react-query";
-import Head from "next/head";
+import { Metadata } from "next";
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -31,9 +31,6 @@ export default function RootLayout({
     <html lang="en">
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
-          <Head>
-            <title>Odigos</title>
-          </Head>
           <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
             {children}
           </body>
diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx
index 2159907df..ba1d6a895 100644
--- a/frontend/webapp/app/overview/layout.tsx
+++ b/frontend/webapp/app/overview/layout.tsx
@@ -1,6 +1,6 @@
-// "use client";
 import { Menu } from "@/components/side.menu";
 import theme from "@/styles/palette";
+import { METADATA } from "@/utils/constants";
 import { Metadata } from "next";
 import React from "react";
 
@@ -15,10 +15,7 @@ const CHILDREN_STYLE = {
   width: "100%",
   height: "93%",
 };
-export const metadata: Metadata = {
-  title: "Odigos",
-};
-
+export const metadata: Metadata = METADATA;
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div style={LAYOUT_STYLE}>
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
new file mode 100644
index 000000000..a4ee950c2
--- /dev/null
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -0,0 +1,8 @@
+import { METADATA } from "@/utils/constants";
+import { Metadata } from "next";
+
+export const metadata: Metadata = METADATA;
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}
diff --git a/frontend/webapp/utils/constants/config.tsx b/frontend/webapp/utils/constants/config.tsx
index f3aebd36f..0cda26a5d 100644
--- a/frontend/webapp/utils/constants/config.tsx
+++ b/frontend/webapp/utils/constants/config.tsx
@@ -3,3 +3,8 @@ export const CONFIG = {
   APPS_SELECTED: "APPS_SELECTED",
   FINISHED: "FINISHED",
 };
+
+export const METADATA = {
+  title: "Odigos",
+  icons: "https://d2q89wckrml3k4.cloudfront.net/logo.png",
+};
diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx
index 90fdf2c71..253c82b8a 100644
--- a/frontend/webapp/utils/constants/index.tsx
+++ b/frontend/webapp/utils/constants/index.tsx
@@ -1,4 +1,4 @@
 export { ROUTES } from "./routes";
-export { CONFIG } from "./config";
+export { CONFIG, METADATA } from "./config";
 export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string";
 export { API, QUERIES } from "./urls";

From b49275e5e804180dd1abf5dffff82f06efccad44 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 16:33:40 +0300
Subject: [PATCH 056/374] delete files

---
 frontend/webapp/app/layout.tsx     |   1 -
 frontend/webapp/public/favicon.ico | Bin 25931 -> 0 bytes
 frontend/webapp/public/next.svg    |   1 -
 frontend/webapp/public/vercel.svg  |   1 -
 4 files changed, 3 deletions(-)
 delete mode 100644 frontend/webapp/public/favicon.ico
 delete mode 100644 frontend/webapp/public/next.svg
 delete mode 100644 frontend/webapp/public/vercel.svg

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 33abda923..efe4c8326 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import theme from "@/styles/palette";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { Metadata } from "next";
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
diff --git a/frontend/webapp/public/favicon.ico b/frontend/webapp/public/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

diff --git a/frontend/webapp/public/next.svg b/frontend/webapp/public/next.svg
deleted file mode 100644
index 5174b28c5..000000000
--- a/frontend/webapp/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/vercel.svg b/frontend/webapp/public/vercel.svg
deleted file mode 100644
index d2f842227..000000000
--- a/frontend/webapp/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file

From beb029fa1b6e188c3789baa232645fd49525ed23 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 16:45:47 +0300
Subject: [PATCH 057/374] WIP

---
 frontend/webapp/containers/overview/overview/overview.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/containers/overview/overview/overview.tsx b/frontend/webapp/containers/overview/overview/overview.tsx
index 4be89af7f..04a979706 100644
--- a/frontend/webapp/containers/overview/overview/overview.tsx
+++ b/frontend/webapp/containers/overview/overview/overview.tsx
@@ -47,7 +47,9 @@ export function OverviewContainer() {
         containerHeight,
         destinations,
         "destination",
-        DESTINATION_NODE_HEIGHT,
+        destinations?.length > 1
+          ? DESTINATION_NODE_HEIGHT
+          : NAMESPACE_NODE_HEIGHT,
         DESTINATION_NODE_POSITION
       ),
     [destinations, containerHeight]

From 4c2847220a06aabfc0410105af75160631640742 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 16:52:40 +0300
Subject: [PATCH 058/374] move page logic to container

---
 .../destinations/create/[id]/page.tsx         | 112 +-----------------
 .../destination/new.destination.form.tsx      | 111 +++++++++++++++++
 frontend/webapp/containers/overview/index.tsx |   1 +
 3 files changed, 116 insertions(+), 108 deletions(-)
 create mode 100644 frontend/webapp/containers/overview/destination/new.destination.form.tsx

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
index f4082de12..3f30557fc 100644
--- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -1,111 +1,7 @@
 "use client";
-import React, { useEffect } from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
-import { useMutation, useQuery } from "react-query";
-import {
-  getDestination,
-  getDestinationsTypes,
-  setDestination,
-} from "@/services";
-import { ManageDestination, OverviewHeader } from "@/components/overview";
-import { useNotification, useSectionData } from "@/hooks";
-import { useRouter, useSearchParams } from "next/navigation";
-import { styled } from "styled-components";
+import React from "react";
+import { NewDestinationForm } from "@/containers/overview";
 
-const DEST = "dest";
-
-const NewDestinationContainer = styled.div`
-  padding: 20px 36px;
-`;
-
-export default function NewDestinationFlow() {
-  const { sectionData, setSectionData } = useSectionData(null);
-  const { show, Notification } = useNotification();
-  const { mutate } = useMutation((body) => setDestination(body));
-  const searchParams = useSearchParams();
-  const router = useRouter();
-
-  const { data: destinationType } = useQuery(
-    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
-    () => getDestination(sectionData?.type),
-    {
-      enabled: !!sectionData,
-    }
-  );
-
-  const { data: destinationsList } = useQuery(
-    [QUERIES.API_DESTINATION_TYPES],
-    getDestinationsTypes
-  );
-
-  useEffect(onPageLoad, [destinationsList]);
-
-  function onPageLoad() {
-    const search = searchParams.get(DEST);
-    if (!destinationsList || !search) return;
-
-    let currentData = null;
-
-    for (const category of destinationsList.categories) {
-      if (currentData) {
-        break;
-      }
-      const filterItem = category.items.filter(({ type }) => type === search);
-      if (filterItem.length) {
-        currentData = filterItem[0];
-      }
-    }
-
-    setSectionData(currentData);
-  }
-
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
-  function onSubmit(newDestination) {
-    const destination = {
-      ...newDestination,
-      type: sectionData.type,
-    };
-
-    mutate(destination, {
-      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
-      onError,
-    });
-  }
-
-  function handleBackPress() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        title={OVERVIEW.MENU.DESTINATIONS}
-        onBackClick={handleBackPress}
-      />
-      {destinationType && sectionData && (
-        <NewDestinationContainer>
-          <ManageDestination
-            destinationType={destinationType}
-            selectedDestination={sectionData}
-            onSubmit={onSubmit}
-          />
-        </NewDestinationContainer>
-      )}
-      <Notification />
-    </>
-  );
+export default function CreateNewDestinationPage() {
+  return <NewDestinationForm />;
 }
diff --git a/frontend/webapp/containers/overview/destination/new.destination.form.tsx b/frontend/webapp/containers/overview/destination/new.destination.form.tsx
new file mode 100644
index 000000000..c88928126
--- /dev/null
+++ b/frontend/webapp/containers/overview/destination/new.destination.form.tsx
@@ -0,0 +1,111 @@
+"use client";
+import React, { useEffect } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { useMutation, useQuery } from "react-query";
+import {
+  getDestination,
+  getDestinationsTypes,
+  setDestination,
+} from "@/services";
+import { ManageDestination, OverviewHeader } from "@/components/overview";
+import { useNotification, useSectionData } from "@/hooks";
+import { useRouter, useSearchParams } from "next/navigation";
+import { styled } from "styled-components";
+
+const DEST = "dest";
+
+const NewDestinationContainer = styled.div`
+  padding: 20px 36px;
+`;
+
+export function NewDestinationForm() {
+  const { sectionData, setSectionData } = useSectionData(null);
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation((body) => setDestination(body));
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const { data: destinationType } = useQuery(
+    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
+    () => getDestination(sectionData?.type),
+    {
+      enabled: !!sectionData,
+    }
+  );
+
+  const { data: destinationsList } = useQuery(
+    [QUERIES.API_DESTINATION_TYPES],
+    getDestinationsTypes
+  );
+
+  useEffect(onPageLoad, [destinationsList]);
+
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
+    if (!destinationsList || !search) return;
+
+    let currentData = null;
+
+    for (const category of destinationsList.categories) {
+      if (currentData) {
+        break;
+      }
+      const filterItem = category.items.filter(({ type }) => type === search);
+      if (filterItem.length) {
+        currentData = filterItem[0];
+      }
+    }
+
+    setSectionData(currentData);
+  }
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  function onSubmit(newDestination) {
+    const destination = {
+      ...newDestination,
+      type: sectionData.type,
+    };
+
+    mutate(destination, {
+      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
+      onError,
+    });
+  }
+
+  function handleBackPress() {
+    router.back();
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.DESTINATIONS}
+        onBackClick={handleBackPress}
+      />
+      {destinationType && sectionData && (
+        <NewDestinationContainer>
+          <ManageDestination
+            destinationType={destinationType}
+            selectedDestination={sectionData}
+            onSubmit={onSubmit}
+          />
+        </NewDestinationContainer>
+      )}
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index e7895d4e4..15c133c5d 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -2,3 +2,4 @@ export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
 export { SourcesContainer } from "./sources/sources";
 export { NewDestinationFlow } from "./destination/new.destination.flow";
+export { NewDestinationForm } from "./destination/new.destination.form";

From 5eb73615dcb46fe09d0bf881e695db1fdc31cb7e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 16:59:19 +0300
Subject: [PATCH 059/374] move page logic to container

---
 .../destinations/create/[id]/page.tsx         |  2 -
 .../app/overview/destinations/create/page.tsx |  2 -
 .../app/overview/destinations/manage/page.tsx | 66 +------------------
 .../destination/update.destination.flow.tsx   | 60 ++++++++++++++---
 frontend/webapp/containers/overview/index.tsx |  1 +
 5 files changed, 54 insertions(+), 77 deletions(-)

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
index 3f30557fc..0a4722ee6 100644
--- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-import React from "react";
 import { NewDestinationForm } from "@/containers/overview";
 
 export default function CreateNewDestinationPage() {
diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
index 3b9a92b41..3ec5946ca 100644
--- a/frontend/webapp/app/overview/destinations/create/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-import React from "react";
 import { NewDestinationFlow } from "@/containers/overview";
 
 export default function CreateDestinationPage() {
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
index cd92c828f..ebe6d6220 100644
--- a/frontend/webapp/app/overview/destinations/manage/page.tsx
+++ b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -1,67 +1,5 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
-import { useNotification } from "@/hooks";
-import { useSearchParams } from "next/navigation";
-import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
-import { getDestinations } from "@/services";
-import { useQuery } from "react-query";
-import { KeyvalLoader } from "@/design.system";
-
-const DEST = "dest";
+import { UpdateDestinationFlow } from "@/containers/overview";
 
 export default function ManageDestinationPage() {
-  const [selectedDestination, setSelectedDestination] = useState<any>(null);
-  const { show, Notification } = useNotification();
-
-  const {
-    isLoading: destinationLoading,
-    data: destinationList,
-    refetch,
-  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
-
-  const searchParams = useSearchParams();
-
-  useEffect(onPageLoad, [searchParams, destinationList]);
-
-  function onPageLoad() {
-    const search = searchParams.get(DEST);
-    const currentDestination = destinationList?.filter(
-      ({ id }) => id === search
-    );
-    if (currentDestination?.length) {
-      setSelectedDestination(currentDestination[0]);
-    }
-  }
-
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    refetch();
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
-  if (destinationLoading || !selectedDestination) {
-    return <KeyvalLoader />;
-  }
-
-  return (
-    <>
-      <UpdateDestinationFlow
-        selectedDestination={selectedDestination}
-        onSuccess={onSuccess}
-        onError={onError}
-      />
-      <Notification />
-    </>
-  );
+  return <UpdateDestinationFlow />;
 }
diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
index d95fe7ac4..cc06ab91b 100644
--- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
@@ -1,20 +1,22 @@
 "use client";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { KeyvalLoader } from "@/design.system";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
-import { deleteDestination } from "@/services/destinations";
+import { deleteDestination, getDestinations } from "@/services/destinations";
 import { ManageDestinationWrapper } from "./destination.styled";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useNotification } from "@/hooks";
+const DEST = "dest";
+
+export function UpdateDestinationFlow({}) {
+  const [selectedDestination, setSelectedDestination] = useState<any>(null);
 
-export default function UpdateDestinationFlow({
-  selectedDestination,
-  onSuccess,
-  onError,
-}) {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const { show, Notification } = useNotification();
 
   const manageData = useMemo(() => {
     return {
@@ -22,6 +24,7 @@ export default function UpdateDestinationFlow({
       ...selectedDestination?.destination_type,
     };
   }, [selectedDestination]);
+
   const { isLoading: destinationTypeLoading, data: destinationType } = useQuery(
     [QUERIES.API_DESTINATION_TYPE, selectedDestination?.type],
     () => getDestination(selectedDestination?.type),
@@ -30,6 +33,12 @@ export default function UpdateDestinationFlow({
     }
   );
 
+  const {
+    isLoading: destinationLoading,
+    data: destinationList,
+    refetch,
+  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
+
   const { mutate: handleUpdateDestination } = useMutation((body) =>
     updateDestination(body, selectedDestination?.id)
   );
@@ -38,6 +47,8 @@ export default function UpdateDestinationFlow({
     deleteDestination(selectedDestination?.id)
   );
 
+  useEffect(onPageLoad, [searchParams, destinationList]);
+
   function onDelete() {
     handleDeleteDestination(selectedDestination.id, {
       onSuccess: () => onSuccess(OVERVIEW.DESTINATION_DELETED_SUCCESS),
@@ -57,6 +68,36 @@ export default function UpdateDestinationFlow({
     });
   }
 
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
+    const currentDestination = destinationList?.filter(
+      ({ id }) => id === search
+    );
+    if (currentDestination?.length) {
+      setSelectedDestination(currentDestination[0]);
+    }
+  }
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    refetch();
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  if (destinationLoading || !selectedDestination) {
+    return <KeyvalLoader />;
+  }
+
   return destinationTypeLoading ? (
     <KeyvalLoader />
   ) : (
@@ -68,6 +109,7 @@ export default function UpdateDestinationFlow({
         onSubmit={onSubmit}
         onDelete={onDelete}
       />
+      <Notification />
     </ManageDestinationWrapper>
   );
 }
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 15c133c5d..dc0b77e01 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -3,3 +3,4 @@ export { DestinationContainer } from "./destination/destination";
 export { SourcesContainer } from "./sources/sources";
 export { NewDestinationFlow } from "./destination/new.destination.flow";
 export { NewDestinationForm } from "./destination/new.destination.form";
+export { UpdateDestinationFlow } from "./destination/update.destination.flow";

From 5fe763a44a6f506eeb8107e1e5d417a7f826b074 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 17:00:39 +0300
Subject: [PATCH 060/374] WIP

---
 frontend/webapp/app/overview/destinations/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx
index bb83b2d78..09f95a0aa 100644
--- a/frontend/webapp/app/overview/destinations/page.tsx
+++ b/frontend/webapp/app/overview/destinations/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { DestinationContainer } from "@/containers/overview";
-import React from "react";
 import { styled } from "styled-components";
 
 const DestinationContainerWrapper = styled.div`

From bfb54d8888c7b9ee314e41527a620f6c0392e920 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Thu, 3 Aug 2023 17:46:21 +0300
Subject: [PATCH 061/374] Task 168 refactor (#370)

---
 .../destinations/create/[id]/page.tsx         | 112 +-----------------
 .../app/overview/destinations/create/page.tsx |   2 -
 .../app/overview/destinations/manage/page.tsx |  66 +----------
 .../webapp/app/overview/destinations/page.tsx |   1 -
 frontend/webapp/app/overview/layout.tsx       |   7 +-
 frontend/webapp/app/setup/layout.tsx          |   8 ++
 .../destination/new.destination.form.tsx      | 111 +++++++++++++++++
 .../destination/update.destination.flow.tsx   |  60 ++++++++--
 frontend/webapp/containers/overview/index.tsx |   3 +
 .../containers/overview/overview/overview.tsx |   4 +-
 frontend/webapp/public/favicon.ico            | Bin 25931 -> 0 bytes
 frontend/webapp/public/next.svg               |   1 -
 frontend/webapp/public/vercel.svg             |   1 -
 frontend/webapp/utils/constants/config.tsx    |   5 +
 frontend/webapp/utils/constants/index.tsx     |   2 +-
 15 files changed, 190 insertions(+), 193 deletions(-)
 create mode 100644 frontend/webapp/app/setup/layout.tsx
 create mode 100644 frontend/webapp/containers/overview/destination/new.destination.form.tsx
 delete mode 100644 frontend/webapp/public/favicon.ico
 delete mode 100644 frontend/webapp/public/next.svg
 delete mode 100644 frontend/webapp/public/vercel.svg

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
index f4082de12..0a4722ee6 100644
--- a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/[id]/page.tsx
@@ -1,111 +1,5 @@
-"use client";
-import React, { useEffect } from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
-import { useMutation, useQuery } from "react-query";
-import {
-  getDestination,
-  getDestinationsTypes,
-  setDestination,
-} from "@/services";
-import { ManageDestination, OverviewHeader } from "@/components/overview";
-import { useNotification, useSectionData } from "@/hooks";
-import { useRouter, useSearchParams } from "next/navigation";
-import { styled } from "styled-components";
+import { NewDestinationForm } from "@/containers/overview";
 
-const DEST = "dest";
-
-const NewDestinationContainer = styled.div`
-  padding: 20px 36px;
-`;
-
-export default function NewDestinationFlow() {
-  const { sectionData, setSectionData } = useSectionData(null);
-  const { show, Notification } = useNotification();
-  const { mutate } = useMutation((body) => setDestination(body));
-  const searchParams = useSearchParams();
-  const router = useRouter();
-
-  const { data: destinationType } = useQuery(
-    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
-    () => getDestination(sectionData?.type),
-    {
-      enabled: !!sectionData,
-    }
-  );
-
-  const { data: destinationsList } = useQuery(
-    [QUERIES.API_DESTINATION_TYPES],
-    getDestinationsTypes
-  );
-
-  useEffect(onPageLoad, [destinationsList]);
-
-  function onPageLoad() {
-    const search = searchParams.get(DEST);
-    if (!destinationsList || !search) return;
-
-    let currentData = null;
-
-    for (const category of destinationsList.categories) {
-      if (currentData) {
-        break;
-      }
-      const filterItem = category.items.filter(({ type }) => type === search);
-      if (filterItem.length) {
-        currentData = filterItem[0];
-      }
-    }
-
-    setSectionData(currentData);
-  }
-
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
-  function onSubmit(newDestination) {
-    const destination = {
-      ...newDestination,
-      type: sectionData.type,
-    };
-
-    mutate(destination, {
-      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
-      onError,
-    });
-  }
-
-  function handleBackPress() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        title={OVERVIEW.MENU.DESTINATIONS}
-        onBackClick={handleBackPress}
-      />
-      {destinationType && sectionData && (
-        <NewDestinationContainer>
-          <ManageDestination
-            destinationType={destinationType}
-            selectedDestination={sectionData}
-            onSubmit={onSubmit}
-          />
-        </NewDestinationContainer>
-      )}
-      <Notification />
-    </>
-  );
+export default function CreateNewDestinationPage() {
+  return <NewDestinationForm />;
 }
diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
index 3b9a92b41..3ec5946ca 100644
--- a/frontend/webapp/app/overview/destinations/create/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-import React from "react";
 import { NewDestinationFlow } from "@/containers/overview";
 
 export default function CreateDestinationPage() {
diff --git a/frontend/webapp/app/overview/destinations/manage/page.tsx b/frontend/webapp/app/overview/destinations/manage/page.tsx
index cd92c828f..ebe6d6220 100644
--- a/frontend/webapp/app/overview/destinations/manage/page.tsx
+++ b/frontend/webapp/app/overview/destinations/manage/page.tsx
@@ -1,67 +1,5 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
-import { useNotification } from "@/hooks";
-import { useSearchParams } from "next/navigation";
-import UpdateDestinationFlow from "@/containers/overview/destination/update.destination.flow";
-import { getDestinations } from "@/services";
-import { useQuery } from "react-query";
-import { KeyvalLoader } from "@/design.system";
-
-const DEST = "dest";
+import { UpdateDestinationFlow } from "@/containers/overview";
 
 export default function ManageDestinationPage() {
-  const [selectedDestination, setSelectedDestination] = useState<any>(null);
-  const { show, Notification } = useNotification();
-
-  const {
-    isLoading: destinationLoading,
-    data: destinationList,
-    refetch,
-  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
-
-  const searchParams = useSearchParams();
-
-  useEffect(onPageLoad, [searchParams, destinationList]);
-
-  function onPageLoad() {
-    const search = searchParams.get(DEST);
-    const currentDestination = destinationList?.filter(
-      ({ id }) => id === search
-    );
-    if (currentDestination?.length) {
-      setSelectedDestination(currentDestination[0]);
-    }
-  }
-
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    refetch();
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
-  if (destinationLoading || !selectedDestination) {
-    return <KeyvalLoader />;
-  }
-
-  return (
-    <>
-      <UpdateDestinationFlow
-        selectedDestination={selectedDestination}
-        onSuccess={onSuccess}
-        onError={onError}
-      />
-      <Notification />
-    </>
-  );
+  return <UpdateDestinationFlow />;
 }
diff --git a/frontend/webapp/app/overview/destinations/page.tsx b/frontend/webapp/app/overview/destinations/page.tsx
index bb83b2d78..09f95a0aa 100644
--- a/frontend/webapp/app/overview/destinations/page.tsx
+++ b/frontend/webapp/app/overview/destinations/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { DestinationContainer } from "@/containers/overview";
-import React from "react";
 import { styled } from "styled-components";
 
 const DestinationContainerWrapper = styled.div`
diff --git a/frontend/webapp/app/overview/layout.tsx b/frontend/webapp/app/overview/layout.tsx
index 2159907df..64ff4dd3b 100644
--- a/frontend/webapp/app/overview/layout.tsx
+++ b/frontend/webapp/app/overview/layout.tsx
@@ -1,6 +1,6 @@
-// "use client";
 import { Menu } from "@/components/side.menu";
 import theme from "@/styles/palette";
+import { METADATA } from "@/utils/constants";
 import { Metadata } from "next";
 import React from "react";
 
@@ -15,9 +15,8 @@ const CHILDREN_STYLE = {
   width: "100%",
   height: "93%",
 };
-export const metadata: Metadata = {
-  title: "Odigos",
-};
+
+export const metadata: Metadata = METADATA;
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
new file mode 100644
index 000000000..a4ee950c2
--- /dev/null
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -0,0 +1,8 @@
+import { METADATA } from "@/utils/constants";
+import { Metadata } from "next";
+
+export const metadata: Metadata = METADATA;
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}
diff --git a/frontend/webapp/containers/overview/destination/new.destination.form.tsx b/frontend/webapp/containers/overview/destination/new.destination.form.tsx
new file mode 100644
index 000000000..c88928126
--- /dev/null
+++ b/frontend/webapp/containers/overview/destination/new.destination.form.tsx
@@ -0,0 +1,111 @@
+"use client";
+import React, { useEffect } from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { useMutation, useQuery } from "react-query";
+import {
+  getDestination,
+  getDestinationsTypes,
+  setDestination,
+} from "@/services";
+import { ManageDestination, OverviewHeader } from "@/components/overview";
+import { useNotification, useSectionData } from "@/hooks";
+import { useRouter, useSearchParams } from "next/navigation";
+import { styled } from "styled-components";
+
+const DEST = "dest";
+
+const NewDestinationContainer = styled.div`
+  padding: 20px 36px;
+`;
+
+export function NewDestinationForm() {
+  const { sectionData, setSectionData } = useSectionData(null);
+  const { show, Notification } = useNotification();
+  const { mutate } = useMutation((body) => setDestination(body));
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const { data: destinationType } = useQuery(
+    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
+    () => getDestination(sectionData?.type),
+    {
+      enabled: !!sectionData,
+    }
+  );
+
+  const { data: destinationsList } = useQuery(
+    [QUERIES.API_DESTINATION_TYPES],
+    getDestinationsTypes
+  );
+
+  useEffect(onPageLoad, [destinationsList]);
+
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
+    if (!destinationsList || !search) return;
+
+    let currentData = null;
+
+    for (const category of destinationsList.categories) {
+      if (currentData) {
+        break;
+      }
+      const filterItem = category.items.filter(({ type }) => type === search);
+      if (filterItem.length) {
+        currentData = filterItem[0];
+      }
+    }
+
+    setSectionData(currentData);
+  }
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  function onSubmit(newDestination) {
+    const destination = {
+      ...newDestination,
+      type: sectionData.type,
+    };
+
+    mutate(destination, {
+      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
+      onError,
+    });
+  }
+
+  function handleBackPress() {
+    router.back();
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.DESTINATIONS}
+        onBackClick={handleBackPress}
+      />
+      {destinationType && sectionData && (
+        <NewDestinationContainer>
+          <ManageDestination
+            destinationType={destinationType}
+            selectedDestination={sectionData}
+            onSubmit={onSubmit}
+          />
+        </NewDestinationContainer>
+      )}
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
index d95fe7ac4..66259fe3e 100644
--- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
@@ -1,20 +1,22 @@
 "use client";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { KeyvalLoader } from "@/design.system";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
-import { deleteDestination } from "@/services/destinations";
+import { deleteDestination, getDestinations } from "@/services/destinations";
 import { ManageDestinationWrapper } from "./destination.styled";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useNotification } from "@/hooks";
+const DEST = "dest";
+
+export function UpdateDestinationFlow() {
+  const [selectedDestination, setSelectedDestination] = useState<any>(null);
 
-export default function UpdateDestinationFlow({
-  selectedDestination,
-  onSuccess,
-  onError,
-}) {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const { show, Notification } = useNotification();
 
   const manageData = useMemo(() => {
     return {
@@ -22,6 +24,7 @@ export default function UpdateDestinationFlow({
       ...selectedDestination?.destination_type,
     };
   }, [selectedDestination]);
+
   const { isLoading: destinationTypeLoading, data: destinationType } = useQuery(
     [QUERIES.API_DESTINATION_TYPE, selectedDestination?.type],
     () => getDestination(selectedDestination?.type),
@@ -30,6 +33,12 @@ export default function UpdateDestinationFlow({
     }
   );
 
+  const {
+    isLoading: destinationLoading,
+    data: destinationList,
+    refetch,
+  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
+
   const { mutate: handleUpdateDestination } = useMutation((body) =>
     updateDestination(body, selectedDestination?.id)
   );
@@ -38,6 +47,8 @@ export default function UpdateDestinationFlow({
     deleteDestination(selectedDestination?.id)
   );
 
+  useEffect(onPageLoad, [searchParams, destinationList]);
+
   function onDelete() {
     handleDeleteDestination(selectedDestination.id, {
       onSuccess: () => onSuccess(OVERVIEW.DESTINATION_DELETED_SUCCESS),
@@ -57,6 +68,36 @@ export default function UpdateDestinationFlow({
     });
   }
 
+  function onPageLoad() {
+    const search = searchParams.get(DEST);
+    const currentDestination = destinationList?.filter(
+      ({ id }) => id === search
+    );
+    if (currentDestination?.length) {
+      setSelectedDestination(currentDestination[0]);
+    }
+  }
+
+  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+    refetch();
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message,
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  if (destinationLoading || !selectedDestination) {
+    return <KeyvalLoader />;
+  }
+
   return destinationTypeLoading ? (
     <KeyvalLoader />
   ) : (
@@ -68,6 +109,7 @@ export default function UpdateDestinationFlow({
         onSubmit={onSubmit}
         onDelete={onDelete}
       />
+      <Notification />
     </ManageDestinationWrapper>
   );
 }
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index e7895d4e4..9c57b45c8 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -2,3 +2,6 @@ export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
 export { SourcesContainer } from "./sources/sources";
 export { NewDestinationFlow } from "./destination/new.destination.flow";
+export { NewDestinationForm } from "./destination/new.destination.form";
+export { UpdateDestinationFlow } from "./destination/update.destination.flow";
+
diff --git a/frontend/webapp/containers/overview/overview/overview.tsx b/frontend/webapp/containers/overview/overview/overview.tsx
index 4be89af7f..04a979706 100644
--- a/frontend/webapp/containers/overview/overview/overview.tsx
+++ b/frontend/webapp/containers/overview/overview/overview.tsx
@@ -47,7 +47,9 @@ export function OverviewContainer() {
         containerHeight,
         destinations,
         "destination",
-        DESTINATION_NODE_HEIGHT,
+        destinations?.length > 1
+          ? DESTINATION_NODE_HEIGHT
+          : NAMESPACE_NODE_HEIGHT,
         DESTINATION_NODE_POSITION
       ),
     [destinations, containerHeight]
diff --git a/frontend/webapp/public/favicon.ico b/frontend/webapp/public/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

diff --git a/frontend/webapp/public/next.svg b/frontend/webapp/public/next.svg
deleted file mode 100644
index 5174b28c5..000000000
--- a/frontend/webapp/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/vercel.svg b/frontend/webapp/public/vercel.svg
deleted file mode 100644
index d2f842227..000000000
--- a/frontend/webapp/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/frontend/webapp/utils/constants/config.tsx b/frontend/webapp/utils/constants/config.tsx
index f3aebd36f..0cda26a5d 100644
--- a/frontend/webapp/utils/constants/config.tsx
+++ b/frontend/webapp/utils/constants/config.tsx
@@ -3,3 +3,8 @@ export const CONFIG = {
   APPS_SELECTED: "APPS_SELECTED",
   FINISHED: "FINISHED",
 };
+
+export const METADATA = {
+  title: "Odigos",
+  icons: "https://d2q89wckrml3k4.cloudfront.net/logo.png",
+};
diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx
index 90fdf2c71..253c82b8a 100644
--- a/frontend/webapp/utils/constants/index.tsx
+++ b/frontend/webapp/utils/constants/index.tsx
@@ -1,4 +1,4 @@
 export { ROUTES } from "./routes";
-export { CONFIG } from "./config";
+export { CONFIG, METADATA } from "./config";
 export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string";
 export { API, QUERIES } from "./urls";

From f15d28d7181c338b51642014e09eacac88014078 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 3 Aug 2023 17:57:55 +0300
Subject: [PATCH 062/374] WIP

---
 frontend/webapp/app/layout.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 050b0c95c..efe4c8326 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import theme from "@/styles/palette";
 import { QueryClient, QueryClientProvider } from "react-query";
-import Head from "next/head";
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -31,9 +30,6 @@ export default function RootLayout({
     <html lang="en">
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
-          <Head>
-            <title>Odigos</title>
-          </Head>
           <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
             {children}
           </body>

From c9d170e31e6b0a25bce15c2c51c5f6ea9c4baddf Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 6 Aug 2023 21:04:35 +0300
Subject: [PATCH 063/374] edit resource name

---
 .../app/overview/sources/manage/page.tsx      | 104 ++++++++++++------
 .../app/overview/sources/manage/styled.tsx    |  12 ++
 .../manage.source.header.tsx                  |  70 +-----------
 .../sources.manage.list.tsx                   |   4 +-
 .../design.system/input/action.input.tsx      |   3 +-
 frontend/webapp/services/api.tsx              |   4 +
 frontend/webapp/services/sources.tsx          |  20 +++-
 frontend/webapp/types/sources.tsx             |   1 +
 frontend/webapp/utils/constants/string.tsx    |   1 +
 9 files changed, 118 insertions(+), 101 deletions(-)

diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
index a8de98f08..6d47bf8d4 100644
--- a/frontend/webapp/app/overview/sources/manage/page.tsx
+++ b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -1,56 +1,80 @@
 "use client";
 import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
-import { getSources } from "@/services";
-import {
-  NOTIFICATION,
-  OVERVIEW,
-  QUERIES,
-  ROUTES,
-  SETUP,
-} from "@/utils/constants";
+import { ACTION, NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { useMutation, useQuery } from "react-query";
-import { ManageSourcePageContainer, BackButtonWrapper } from "./styled";
+import { useMutation } from "react-query";
+import {
+  ManageSourcePageContainer,
+  BackButtonWrapper,
+  FieldWrapper,
+  ButtonWrapper,
+} from "./styled";
 import { LANGUAGES_LOGOS } from "@/assets/images";
 import { Back } from "@/assets/icons/overview";
-import { KeyvalText } from "@/design.system";
-import { ManagedSource } from "@/types/sources";
+import {
+  KeyvalButton,
+  KeyvalInput,
+  KeyvalLoader,
+  KeyvalText,
+} from "@/design.system";
 import { DeleteSource } from "@/components/overview";
-import { deleteSource } from "@/services/sources";
+import { deleteSource, getSource, patchSources } from "@/services/sources";
 import { useNotification } from "@/hooks";
-
-const SOURCE = "source";
+import theme from "@/styles/palette";
+import { ManagedSource } from "@/types/sources";
 
 export default function ManageSourcePage() {
-  const [currentSource, setCurrentSource] = useState<ManagedSource | null>(
-    null
-  );
+  const [inputValue, setInputValue] = useState("");
+  const [currentSource, setCurrentSource] = useState<ManagedSource>();
   const searchParams = useSearchParams();
   const router = useRouter();
-  const { data: sources, refetch } = useQuery(
-    [QUERIES.API_SOURCES],
-    getSources
-  );
+
   const { show, Notification } = useNotification();
-  const { mutate } = useMutation(() =>
+  const { mutate: handleDeleteSource } = useMutation(() =>
     deleteSource(
       currentSource?.namespace || "",
       currentSource?.kind || "",
       currentSource?.name || ""
     )
   );
-  useEffect(onPageLoad, [sources]);
+
+  const { mutate: editSource } = useMutation(() =>
+    patchSources(
+      currentSource?.namespace || "",
+      currentSource?.kind || "",
+      currentSource?.name || "",
+      { reported_name: inputValue }
+    )
+  );
+  useEffect(() => {
+    onPageLoad();
+  }, [searchParams]);
 
   useEffect(() => {
-    console.log({ currentSource });
+    setInputValue(currentSource?.reported_name || "");
   }, [currentSource]);
 
-  function onPageLoad() {
-    const search = searchParams.get(SOURCE);
-    const source = sources?.find((item) => item.name === search);
-    source && setCurrentSource(source);
+  async function onPageLoad() {
+    const name = searchParams.get("name") || "";
+    const kind = searchParams.get("kind") || "";
+    const namespace = searchParams.get("namespace") || "";
+
+    const currentSource = await getSource(namespace, kind, name);
+    setCurrentSource(currentSource);
+  }
+
+  function onSaveClick(newName) {
+    editSource(newName, {
+      onError,
+      onSuccess: () =>
+        show({
+          type: NOTIFICATION.SUCCESS,
+          message: OVERVIEW.SOURCE_UPDATE_SUCCESS,
+        }),
+    });
   }
+
   function onError({ response }) {
     const message = response?.data?.message;
     show({
@@ -62,7 +86,6 @@ export default function ManageSourcePage() {
   function onSuccess() {
     setTimeout(() => {
       router.back();
-      refetch();
     }, 1000);
     show({
       type: NOTIFICATION.SUCCESS,
@@ -70,12 +93,16 @@ export default function ManageSourcePage() {
     });
   }
   function onDelete() {
-    mutate(undefined, {
+    handleDeleteSource(undefined, {
       onSuccess,
       onError,
     });
   }
 
+  if (!currentSource) {
+    return <KeyvalLoader />;
+  }
+
   return (
     <ManageSourcePageContainer>
       <BackButtonWrapper onClick={() => router.back()}>
@@ -84,12 +111,25 @@ export default function ManageSourcePage() {
       </BackButtonWrapper>
       {currentSource && (
         <ManageSourceHeader
-          name={currentSource?.name}
           image_url={
             LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
           }
         />
       )}
+      <FieldWrapper>
+        <KeyvalInput
+          label={OVERVIEW.REPORTED_NAME}
+          value={inputValue}
+          onChange={(e) => setInputValue(e)}
+        />
+      </FieldWrapper>
+      <ButtonWrapper>
+        <KeyvalButton disabled={!inputValue} onClick={onSaveClick}>
+          <KeyvalText color={theme.colors.dark_blue} size={14} weight={600}>
+            {ACTION.SAVE}
+          </KeyvalText>
+        </KeyvalButton>
+      </ButtonWrapper>
       <DeleteSource
         onDelete={onDelete}
         name={currentSource?.name}
diff --git a/frontend/webapp/app/overview/sources/manage/styled.tsx b/frontend/webapp/app/overview/sources/manage/styled.tsx
index 4face21f0..052d736b0 100644
--- a/frontend/webapp/app/overview/sources/manage/styled.tsx
+++ b/frontend/webapp/app/overview/sources/manage/styled.tsx
@@ -13,3 +13,15 @@ export const BackButtonWrapper = styled.div`
     cursor: pointer !important;
   }
 `;
+
+export const FieldWrapper = styled.div`
+  height: 36px;
+  width: 348px;
+  margin-bottom: 64px;
+`;
+
+export const ButtonWrapper = styled.div`
+  margin-top: 48px;
+  height: 36px;
+  width: 362px;
+`;
diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
index 5fbcec042..c34bf95a5 100644
--- a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
+++ b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
@@ -1,8 +1,6 @@
-import React, { useRef, useState } from "react";
+import React from "react";
 import styled from "styled-components";
-import { KeyvalActionInput, KeyvalImage, KeyvalText } from "@/design.system";
-import { Pen } from "@/assets/icons/overview";
-import { useOnClickOutside } from "@/hooks";
+import { KeyvalImage } from "@/design.system";
 
 const ManageSourceHeaderWrapper = styled.div`
   display: flex;
@@ -20,28 +18,6 @@ const ManageSourceHeaderWrapper = styled.div`
     linear-gradient(180deg, #2e4c55 0%, #303355 100%);
 `;
 
-const TextWrapper = styled.div`
-  margin-left: 12px;
-  margin-right: 12px;
-`;
-
-const EditIconWrapper = styled.div`
-  width: 20px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-
-  :hover {
-    cursor: pointer;
-    fill: ${({ theme }) => theme.colors.secondary};
-  }
-`;
-
-const ActionInputWrapper = styled.div`
-  width: 80%;
-  height: 49px;
-`;
-
 const IMAGE_STYLE: React.CSSProperties = {
   backgroundColor: "#fff",
   padding: 4,
@@ -49,48 +25,10 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageSourceHeader({ image_url, name }) {
-  const [showEditInput, setShowEditInput] = useState(true);
-  const [inputValue, setInputValue] = useState(name);
-  const containerRef = useRef(null);
-  const handleClickOutside = () => {
-    !showEditInput && handleSave();
-  };
-
-  useOnClickOutside(containerRef, handleClickOutside);
-
-  function handleSave() {
-    setShowEditInput(true);
-  }
-
-  function handleInputChange(value) {
-    setInputValue(value);
-  }
-
+export function ManageSourceHeader({ image_url }) {
   return (
-    <ManageSourceHeaderWrapper ref={containerRef}>
+    <ManageSourceHeaderWrapper>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
-      {showEditInput ? (
-        <>
-          <TextWrapper>
-            <KeyvalText size={24} weight={700}>
-              {name}
-            </KeyvalText>
-          </TextWrapper>
-
-          <EditIconWrapper onClick={() => setShowEditInput(false)}>
-            <Pen width={16} height={16} />
-          </EditIconWrapper>
-        </>
-      ) : (
-        <ActionInputWrapper>
-          <KeyvalActionInput
-            value={inputValue}
-            onChange={(e) => handleInputChange(e)}
-            onAction={handleSave}
-          />
-        </ActionInputWrapper>
-      )}
     </ManageSourceHeaderWrapper>
   );
 }
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
index dff5f790f..30515591f 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -23,7 +23,9 @@ export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
         key={source?.name}
         item={source}
         onClick={() =>
-          router.push(`${ROUTES.MANAGE_SOURCE}?source=${source?.name}`)
+          router.push(
+            `${ROUTES.MANAGE_SOURCE}?name=${source?.name}&kind=${source?.kind}&namespace=${source?.namespace}`
+          )
         }
       />
     ));
diff --git a/frontend/webapp/design.system/input/action.input.tsx b/frontend/webapp/design.system/input/action.input.tsx
index 4bede03d6..308468194 100644
--- a/frontend/webapp/design.system/input/action.input.tsx
+++ b/frontend/webapp/design.system/input/action.input.tsx
@@ -17,6 +17,7 @@ export function KeyvalActionInput({
   value,
   onChange,
   style = {},
+  onAction,
 }: InputProps): JSX.Element {
   function handleChange(event: ChangeEvent<HTMLInputElement>): void {
     onChange(event.target.value);
@@ -31,7 +32,7 @@ export function KeyvalActionInput({
           autoComplete="off"
         />
 
-        <KeyvalButton>
+        <KeyvalButton onClick={onAction}>
           <KeyvalText size={14} weight={500} color={theme.text.dark_button}>
             {ACTION.SAVE}
           </KeyvalText>
diff --git a/frontend/webapp/services/api.tsx b/frontend/webapp/services/api.tsx
index d30c758c3..354663e64 100644
--- a/frontend/webapp/services/api.tsx
+++ b/frontend/webapp/services/api.tsx
@@ -30,3 +30,7 @@ export async function httpDelete(url: string) {
     return data;
   }
 }
+
+export async function patch(url: string, body: any) {
+  await axios.patch(url, body);
+}
diff --git a/frontend/webapp/services/sources.tsx b/frontend/webapp/services/sources.tsx
index fc7fd5050..87e0aedf7 100644
--- a/frontend/webapp/services/sources.tsx
+++ b/frontend/webapp/services/sources.tsx
@@ -1,5 +1,5 @@
 import { API } from "@/utils/constants";
-import { get, post, httpDelete } from "./api";
+import { get, post, httpDelete, patch } from "./api";
 import { SelectedSources } from "@/types/sources";
 
 export async function getNamespaces() {
@@ -18,6 +18,12 @@ export async function getSources() {
   return await get(API.SOURCES);
 }
 
+export async function getSource(namespace: string, kind: string, name: string) {
+  return await get(
+    `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`
+  );
+}
+
 export async function deleteSource(
   namespace: string,
   kind: string,
@@ -27,3 +33,15 @@ export async function deleteSource(
     `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`
   );
 }
+
+export async function patchSources(
+  namespace: string,
+  kind: string,
+  name: string,
+  body: any
+) {
+  patch(
+    `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`,
+    body
+  );
+}
diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx
index 7906c4733..b52c0cea0 100644
--- a/frontend/webapp/types/sources.tsx
+++ b/frontend/webapp/types/sources.tsx
@@ -2,6 +2,7 @@ export interface ManagedSource {
   kind: string;
   name: string;
   namespace: string;
+  reported_name?: string;
   languages: [
     {
       container_name: string;
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index 3227c2b95..f5070b409 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -83,6 +83,7 @@ export const OVERVIEW = {
   DELETE_BUTTON: "I want to delete this destination",
   CONFIRM_SOURCE_DELETE: "I want to delete this source",
   CONNECT: "Connect",
+  REPORTED_NAME: "Reported Name",
 };
 
 export const ACTION = {

From 3b8983c51787cd46bc648248191da2eeaa9cf370 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 6 Aug 2023 21:17:43 +0300
Subject: [PATCH 064/374] refactor sources|

---
 .../app/overview/sources/create/page.tsx      |  39 +----
 .../app/overview/sources/manage/page.tsx      | 143 +----------------
 frontend/webapp/containers/overview/index.tsx |   3 +-
 .../overview/sources/new.source.flow.tsx      |   2 +-
 .../sources/sources.list.container.tsx        |  40 +++++
 .../overview/sources/sources.styled.tsx       |  26 +++
 .../overview/sources/update.source.form.tsx   | 149 ++++++++++++++++++
 7 files changed, 223 insertions(+), 179 deletions(-)
 create mode 100644 frontend/webapp/containers/overview/sources/sources.list.container.tsx
 create mode 100644 frontend/webapp/containers/overview/sources/update.source.form.tsx

diff --git a/frontend/webapp/app/overview/sources/create/page.tsx b/frontend/webapp/app/overview/sources/create/page.tsx
index 9c83bfc82..5267b45b7 100644
--- a/frontend/webapp/app/overview/sources/create/page.tsx
+++ b/frontend/webapp/app/overview/sources/create/page.tsx
@@ -1,40 +1,5 @@
-"use client";
-import React from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
-import { OverviewHeader } from "@/components/overview";
-import { useNotification } from "@/hooks";
-import { useQuery } from "react-query";
-import { getSources } from "@/services";
-import { NewSourceFlow } from "@/containers/overview/sources/new.source.flow";
-import { useRouter } from "next/navigation";
+import { SourcesListContainer } from "@/containers/overview";
 
 export default function CreateNewSourcesPage() {
-  const { show, Notification } = useNotification();
-  const router = useRouter();
-  const { data: sources, refetch } = useQuery(
-    [QUERIES.API_SOURCES],
-    getSources
-  );
-
-  function onNewSourceSuccess() {
-    setTimeout(() => {
-      router.back();
-      refetch();
-    }, 1000);
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
-    });
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        title={OVERVIEW.MENU.SOURCES}
-        onBackClick={() => router.back()}
-      />
-      <NewSourceFlow onSuccess={onNewSourceSuccess} sources={sources} />
-      <Notification />
-    </>
-  );
+  return <SourcesListContainer />;
 }
diff --git a/frontend/webapp/app/overview/sources/manage/page.tsx b/frontend/webapp/app/overview/sources/manage/page.tsx
index 6d47bf8d4..386d1629f 100644
--- a/frontend/webapp/app/overview/sources/manage/page.tsx
+++ b/frontend/webapp/app/overview/sources/manage/page.tsx
@@ -1,143 +1,6 @@
-"use client";
-import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
-import { ACTION, NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
-import { useRouter, useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
-import { useMutation } from "react-query";
-import {
-  ManageSourcePageContainer,
-  BackButtonWrapper,
-  FieldWrapper,
-  ButtonWrapper,
-} from "./styled";
-import { LANGUAGES_LOGOS } from "@/assets/images";
-import { Back } from "@/assets/icons/overview";
-import {
-  KeyvalButton,
-  KeyvalInput,
-  KeyvalLoader,
-  KeyvalText,
-} from "@/design.system";
-import { DeleteSource } from "@/components/overview";
-import { deleteSource, getSource, patchSources } from "@/services/sources";
-import { useNotification } from "@/hooks";
-import theme from "@/styles/palette";
-import { ManagedSource } from "@/types/sources";
+import React from "react";
+import { UpdateSourceForm } from "@/containers/overview";
 
 export default function ManageSourcePage() {
-  const [inputValue, setInputValue] = useState("");
-  const [currentSource, setCurrentSource] = useState<ManagedSource>();
-  const searchParams = useSearchParams();
-  const router = useRouter();
-
-  const { show, Notification } = useNotification();
-  const { mutate: handleDeleteSource } = useMutation(() =>
-    deleteSource(
-      currentSource?.namespace || "",
-      currentSource?.kind || "",
-      currentSource?.name || ""
-    )
-  );
-
-  const { mutate: editSource } = useMutation(() =>
-    patchSources(
-      currentSource?.namespace || "",
-      currentSource?.kind || "",
-      currentSource?.name || "",
-      { reported_name: inputValue }
-    )
-  );
-  useEffect(() => {
-    onPageLoad();
-  }, [searchParams]);
-
-  useEffect(() => {
-    setInputValue(currentSource?.reported_name || "");
-  }, [currentSource]);
-
-  async function onPageLoad() {
-    const name = searchParams.get("name") || "";
-    const kind = searchParams.get("kind") || "";
-    const namespace = searchParams.get("namespace") || "";
-
-    const currentSource = await getSource(namespace, kind, name);
-    setCurrentSource(currentSource);
-  }
-
-  function onSaveClick(newName) {
-    editSource(newName, {
-      onError,
-      onSuccess: () =>
-        show({
-          type: NOTIFICATION.SUCCESS,
-          message: OVERVIEW.SOURCE_UPDATE_SUCCESS,
-        }),
-    });
-  }
-
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
-  function onSuccess() {
-    setTimeout(() => {
-      router.back();
-    }, 1000);
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message: OVERVIEW.SOURCE_DELETED_SUCCESS,
-    });
-  }
-  function onDelete() {
-    handleDeleteSource(undefined, {
-      onSuccess,
-      onError,
-    });
-  }
-
-  if (!currentSource) {
-    return <KeyvalLoader />;
-  }
-
-  return (
-    <ManageSourcePageContainer>
-      <BackButtonWrapper onClick={() => router.back()}>
-        <Back width={14} />
-        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
-      </BackButtonWrapper>
-      {currentSource && (
-        <ManageSourceHeader
-          image_url={
-            LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
-          }
-        />
-      )}
-      <FieldWrapper>
-        <KeyvalInput
-          label={OVERVIEW.REPORTED_NAME}
-          value={inputValue}
-          onChange={(e) => setInputValue(e)}
-        />
-      </FieldWrapper>
-      <ButtonWrapper>
-        <KeyvalButton disabled={!inputValue} onClick={onSaveClick}>
-          <KeyvalText color={theme.colors.dark_blue} size={14} weight={600}>
-            {ACTION.SAVE}
-          </KeyvalText>
-        </KeyvalButton>
-      </ButtonWrapper>
-      <DeleteSource
-        onDelete={onDelete}
-        name={currentSource?.name}
-        image_url={
-          LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
-        }
-      />
-      <Notification />
-    </ManageSourcePageContainer>
-  );
+  return <UpdateSourceForm />;
 }
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 9c57b45c8..61a3731ef 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -4,4 +4,5 @@ export { SourcesContainer } from "./sources/sources";
 export { NewDestinationFlow } from "./destination/new.destination.flow";
 export { NewDestinationForm } from "./destination/new.destination.form";
 export { UpdateDestinationFlow } from "./destination/update.destination.flow";
-
+export { UpdateSourceForm } from "./sources/update.source.form";
+export { SourcesListContainer } from "./sources/sources.list.container";
diff --git a/frontend/webapp/containers/overview/sources/new.source.flow.tsx b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
index 3b5468b9a..3c0dd61a0 100644
--- a/frontend/webapp/containers/overview/sources/new.source.flow.tsx
+++ b/frontend/webapp/containers/overview/sources/new.source.flow.tsx
@@ -9,7 +9,7 @@ import { useMutation } from "react-query";
 import { setNamespaces } from "@/services";
 import { SelectedSources } from "@/types/sources";
 
-export function NewSourceFlow({ onSuccess, sources }) {
+export function NewSourcesList({ onSuccess, sources }) {
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
   const { mutate } = useMutation((body: SelectedSources) =>
     setNamespaces(body)
diff --git a/frontend/webapp/containers/overview/sources/sources.list.container.tsx b/frontend/webapp/containers/overview/sources/sources.list.container.tsx
new file mode 100644
index 000000000..6d87ff086
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/sources.list.container.tsx
@@ -0,0 +1,40 @@
+"use client";
+import React from "react";
+import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { OverviewHeader } from "@/components/overview";
+import { useNotification } from "@/hooks";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
+import { NewSourcesList } from "@/containers/overview/sources/new.source.flow";
+import { useRouter } from "next/navigation";
+
+export function SourcesListContainer() {
+  const { show, Notification } = useNotification();
+  const router = useRouter();
+  const { data: sources, refetch } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+
+  function onNewSourceSuccess() {
+    setTimeout(() => {
+      router.back();
+      refetch();
+    }, 1000);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
+    });
+  }
+
+  return (
+    <>
+      <OverviewHeader
+        title={OVERVIEW.MENU.SOURCES}
+        onBackClick={() => router.back()}
+      />
+      <NewSourcesList onSuccess={onNewSourceSuccess} sources={sources} />
+      <Notification />
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/overview/sources/sources.styled.tsx b/frontend/webapp/containers/overview/sources/sources.styled.tsx
index d07f83647..705f4b2e7 100644
--- a/frontend/webapp/containers/overview/sources/sources.styled.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.styled.tsx
@@ -22,3 +22,29 @@ export const ButtonWrapper = styled.div`
   right: 32px;
   top: 40px;
 `;
+
+export const ManageSourcePageContainer = styled.div`
+  padding: 32px;
+`;
+
+export const BackButtonWrapper = styled.div`
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  cursor: pointer;
+  p {
+    cursor: pointer !important;
+  }
+`;
+
+export const FieldWrapper = styled.div`
+  height: 36px;
+  width: 348px;
+  margin-bottom: 64px;
+`;
+
+export const SaveSourceButtonWrapper = styled.div`
+  margin-top: 48px;
+  height: 36px;
+  width: 362px;
+`;
diff --git a/frontend/webapp/containers/overview/sources/update.source.form.tsx b/frontend/webapp/containers/overview/sources/update.source.form.tsx
new file mode 100644
index 000000000..e563177c7
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/update.source.form.tsx
@@ -0,0 +1,149 @@
+"use client";
+import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
+import { ACTION, NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
+import { useRouter, useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { useMutation } from "react-query";
+import {
+  ManageSourcePageContainer,
+  BackButtonWrapper,
+  FieldWrapper,
+  SaveSourceButtonWrapper,
+} from "./sources.styled";
+import { LANGUAGES_LOGOS } from "@/assets/images";
+import { Back } from "@/assets/icons/overview";
+import {
+  KeyvalButton,
+  KeyvalInput,
+  KeyvalLoader,
+  KeyvalText,
+} from "@/design.system";
+import { DeleteSource } from "@/components/overview";
+import { deleteSource, getSource, patchSources } from "@/services/sources";
+import { useNotification } from "@/hooks";
+import theme from "@/styles/palette";
+import { ManagedSource } from "@/types/sources";
+
+const NAME = "name";
+const KIND = "kind";
+const NAMESPACE = "namespace";
+
+export function UpdateSourceForm() {
+  const [inputValue, setInputValue] = useState("");
+  const [currentSource, setCurrentSource] = useState<ManagedSource>();
+
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { show, Notification } = useNotification();
+
+  const { mutate: handleDeleteSource } = useMutation(() =>
+    deleteSource(
+      currentSource?.namespace || "",
+      currentSource?.kind || "",
+      currentSource?.name || ""
+    )
+  );
+
+  const { mutate: editSource } = useMutation(() =>
+    patchSources(
+      currentSource?.namespace || "",
+      currentSource?.kind || "",
+      currentSource?.name || "",
+      { reported_name: inputValue }
+    )
+  );
+  useEffect(() => {
+    onPageLoad();
+  }, [searchParams]);
+
+  useEffect(() => {
+    setInputValue(currentSource?.reported_name || "");
+  }, [currentSource]);
+
+  async function onPageLoad() {
+    const name = searchParams.get(NAME) || "";
+    const kind = searchParams.get(KIND) || "";
+    const namespace = searchParams.get(NAMESPACE) || "";
+
+    const currentSource = await getSource(namespace, kind, name);
+    setCurrentSource(currentSource);
+  }
+
+  function onSaveClick(newName) {
+    editSource(newName, {
+      onError,
+      onSuccess: () =>
+        show({
+          type: NOTIFICATION.SUCCESS,
+          message: OVERVIEW.SOURCE_UPDATE_SUCCESS,
+        }),
+    });
+  }
+
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
+
+  function onSuccess() {
+    setTimeout(() => {
+      router.back();
+    }, 1000);
+    show({
+      type: NOTIFICATION.SUCCESS,
+      message: OVERVIEW.SOURCE_DELETED_SUCCESS,
+    });
+  }
+
+  function onDelete() {
+    handleDeleteSource(undefined, {
+      onSuccess,
+      onError,
+    });
+  }
+
+  if (!currentSource) {
+    return <KeyvalLoader />;
+  }
+
+  return (
+    <ManageSourcePageContainer>
+      <BackButtonWrapper onClick={() => router.back()}>
+        <Back width={14} />
+        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
+      </BackButtonWrapper>
+      {currentSource && (
+        <ManageSourceHeader
+          image_url={
+            LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+          }
+        />
+      )}
+      <FieldWrapper>
+        <KeyvalInput
+          label={OVERVIEW.REPORTED_NAME}
+          value={inputValue}
+          onChange={(e) => setInputValue(e)}
+        />
+      </FieldWrapper>
+      <SaveSourceButtonWrapper>
+        <KeyvalButton disabled={!inputValue} onClick={onSaveClick}>
+          <KeyvalText color={theme.colors.dark_blue} size={14} weight={600}>
+            {ACTION.SAVE}
+          </KeyvalText>
+        </KeyvalButton>
+      </SaveSourceButtonWrapper>
+      <DeleteSource
+        onDelete={onDelete}
+        name={currentSource?.name}
+        image_url={
+          LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
+        }
+      />
+      <Notification />
+    </ManageSourcePageContainer>
+  );
+}

From 0dbc53da9be6a13c501b7c98aaf62fdb8e6162d0 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 09:21:22 +0300
Subject: [PATCH 065/374] change files names

---
 frontend/webapp/app/overview/destinations/create/page.tsx     | 4 ++--
 .../{new.destination.flow.tsx => new.destination.list.tsx}    | 2 +-
 frontend/webapp/containers/overview/index.tsx                 | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename frontend/webapp/containers/overview/destination/{new.destination.flow.tsx => new.destination.list.tsx} (95%)

diff --git a/frontend/webapp/app/overview/destinations/create/page.tsx b/frontend/webapp/app/overview/destinations/create/page.tsx
index 3ec5946ca..516b69bf0 100644
--- a/frontend/webapp/app/overview/destinations/create/page.tsx
+++ b/frontend/webapp/app/overview/destinations/create/page.tsx
@@ -1,5 +1,5 @@
-import { NewDestinationFlow } from "@/containers/overview";
+import { NewDestinationList } from "@/containers/overview";
 
 export default function CreateDestinationPage() {
-  return <NewDestinationFlow />;
+  return <NewDestinationList />;
 }
diff --git a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx b/frontend/webapp/containers/overview/destination/new.destination.list.tsx
similarity index 95%
rename from frontend/webapp/containers/overview/destination/new.destination.flow.tsx
rename to frontend/webapp/containers/overview/destination/new.destination.list.tsx
index 27c0dddc7..3f8821ed7 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/new.destination.list.tsx
@@ -6,7 +6,7 @@ import { DestinationSection } from "@/containers/setup/destination/destination.s
 import { NewDestinationContainer } from "./destination.styled";
 import { useRouter } from "next/navigation";
 
-export function NewDestinationFlow() {
+export function NewDestinationList() {
   const router = useRouter();
 
   return (
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 61a3731ef..6fe210b98 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -1,7 +1,7 @@
 export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
 export { SourcesContainer } from "./sources/sources";
-export { NewDestinationFlow } from "./destination/new.destination.flow";
+export { NewDestinationList } from "./destination/new.destination.list";
 export { NewDestinationForm } from "./destination/new.destination.form";
 export { UpdateDestinationFlow } from "./destination/update.destination.flow";
 export { UpdateSourceForm } from "./sources/update.source.form";

From bb9c9d51b1156b748af4110fb2a956393c96065a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 09:33:39 +0300
Subject: [PATCH 066/374] change files names

---
 frontend/webapp/app/overview/sources/page.tsx                 | 4 ++--
 frontend/webapp/containers/overview/index.tsx                 | 2 +-
 .../sources/{sources.tsx => instrumented.sources.tsx}         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename frontend/webapp/containers/overview/sources/{sources.tsx => instrumented.sources.tsx} (93%)

diff --git a/frontend/webapp/app/overview/sources/page.tsx b/frontend/webapp/app/overview/sources/page.tsx
index 77d0c32f2..07a0ac7cb 100644
--- a/frontend/webapp/app/overview/sources/page.tsx
+++ b/frontend/webapp/app/overview/sources/page.tsx
@@ -1,7 +1,7 @@
 "use client";
-import { SourcesContainer } from "@/containers/overview";
+import { InstrumentedSourcesContainer } from "@/containers/overview";
 import React from "react";
 
 export default function SourcesOverviewPage() {
-  return <SourcesContainer />;
+  return <InstrumentedSourcesContainer />;
 }
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 6fe210b98..60d3d1c17 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -1,6 +1,6 @@
 export { OverviewContainer } from "./overview/overview";
 export { DestinationContainer } from "./destination/destination";
-export { SourcesContainer } from "./sources/sources";
+export { InstrumentedSourcesContainer } from "./sources/instrumented.sources";
 export { NewDestinationList } from "./destination/new.destination.list";
 export { NewDestinationForm } from "./destination/new.destination.form";
 export { UpdateDestinationFlow } from "./destination/update.destination.flow";
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
similarity index 93%
rename from frontend/webapp/containers/overview/sources/sources.tsx
rename to frontend/webapp/containers/overview/sources/instrumented.sources.tsx
index 1eed8288a..17c7ecdbe 100644
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
@@ -8,7 +8,7 @@ import { useQuery } from "react-query";
 import { getSources } from "@/services";
 import { useRouter } from "next/navigation";
 
-export function SourcesContainer() {
+export function InstrumentedSourcesContainer() {
   const router = useRouter();
   const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
 

From c2e13cd3d22d72d42c5724e9ffb9eee627907e34 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 09:51:17 +0300
Subject: [PATCH 067/374] delete dest fixed

---
 .../overview/destination/destination.tsx      | 24 ++++++++++++++++---
 .../destination/update.destination.flow.tsx   |  4 ++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
index 8ed985640..2c7aab1f4 100644
--- a/frontend/webapp/containers/overview/destination/destination.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -1,11 +1,12 @@
 "use client";
-import React from "react";
+import React, { useEffect } from "react";
 import { KeyvalLoader } from "@/design.system";
-import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getDestinations } from "@/services";
 import { OverviewHeader, DestinationsManagedList } from "@/components/overview";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useNotification } from "@/hooks";
 
 export function DestinationContainer() {
   const { isLoading: destinationLoading, data: destinationList } = useQuery(
@@ -13,8 +14,24 @@ export function DestinationContainer() {
     getDestinations
   );
 
+  const searchParams = useSearchParams();
+  const { show, Notification } = useNotification();
+
   const router = useRouter();
 
+  useEffect(onPageLoad, [searchParams, destinationList]);
+
+  function onPageLoad() {
+    const status = searchParams.get("status");
+    if (status === "deleted") {
+      show({
+        type: NOTIFICATION.SUCCESS,
+        message: OVERVIEW.DESTINATION_DELETED_SUCCESS,
+      });
+      router.push(ROUTES.DESTINATIONS);
+    }
+  }
+
   if (destinationLoading) {
     return <KeyvalLoader />;
   }
@@ -29,6 +46,7 @@ export function DestinationContainer() {
         }
         onMenuButtonClick={() => router.push(ROUTES.CREATE_DESTINATION)}
       />
+      <Notification />
     </>
   );
 }
diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
index 66259fe3e..2f0bfa0be 100644
--- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
 import { KeyvalLoader } from "@/design.system";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
@@ -51,7 +51,7 @@ export function UpdateDestinationFlow() {
 
   function onDelete() {
     handleDeleteDestination(selectedDestination.id, {
-      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_DELETED_SUCCESS),
+      onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=deleted`),
       onError,
     });
   }

From 61183a4cec9aefe21bde1596b9ddf34fbd603abe Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 10:02:00 +0300
Subject: [PATCH 068/374] WIP

---
 .../overview/destination/destination.tsx      | 22 +++++++----
 .../overview/sources/instrumented.sources.tsx | 33 ++++++++++++++--
 .../overview/sources/update.source.form.tsx   | 39 ++++++++-----------
 frontend/webapp/utils/constants/index.tsx     |  2 +-
 frontend/webapp/utils/constants/string.tsx    |  5 +++
 5 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destination/destination.tsx
index 2c7aab1f4..f8020223d 100644
--- a/frontend/webapp/containers/overview/destination/destination.tsx
+++ b/frontend/webapp/containers/overview/destination/destination.tsx
@@ -1,7 +1,13 @@
 "use client";
 import React, { useEffect } from "react";
 import { KeyvalLoader } from "@/design.system";
-import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
+import {
+  NOTIFICATION,
+  OVERVIEW,
+  PARAMS,
+  QUERIES,
+  ROUTES,
+} from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getDestinations } from "@/services";
 import { OverviewHeader, DestinationsManagedList } from "@/components/overview";
@@ -9,10 +15,11 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useNotification } from "@/hooks";
 
 export function DestinationContainer() {
-  const { isLoading: destinationLoading, data: destinationList } = useQuery(
-    [QUERIES.API_DESTINATIONS],
-    getDestinations
-  );
+  const {
+    isLoading: destinationLoading,
+    data: destinationList,
+    refetch: refetchDestinations,
+  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
 
   const searchParams = useSearchParams();
   const { show, Notification } = useNotification();
@@ -22,8 +29,9 @@ export function DestinationContainer() {
   useEffect(onPageLoad, [searchParams, destinationList]);
 
   function onPageLoad() {
-    const status = searchParams.get("status");
-    if (status === "deleted") {
+    const status = searchParams.get(PARAMS.STATUS);
+    if (status === PARAMS.DELETED) {
+      refetchDestinations();
       show({
         type: NOTIFICATION.SUCCESS,
         message: OVERVIEW.DESTINATION_DELETED_SUCCESS,
diff --git a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
index 17c7ecdbe..03ec2695f 100644
--- a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
+++ b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
@@ -1,17 +1,41 @@
 "use client";
-import React from "react";
-import { OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
+import React, { useEffect } from "react";
+import {
+  NOTIFICATION,
+  OVERVIEW,
+  PARAMS,
+  QUERIES,
+  ROUTES,
+} from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
 import { ManageSources } from "./manage.sources";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useNotification } from "@/hooks";
 
 export function InstrumentedSourcesContainer() {
   const router = useRouter();
-  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
+  const searchParams = useSearchParams();
+  const { show, Notification } = useNotification();
+  const { data: sources, refetch: refetchSources } = useQuery(
+    [QUERIES.API_SOURCES],
+    getSources
+  );
+  useEffect(onPageLoad, [searchParams]);
 
+  function onPageLoad() {
+    const status = searchParams.get(PARAMS.STATUS);
+    if (status === PARAMS.DELETED) {
+      refetchSources();
+      show({
+        type: NOTIFICATION.SUCCESS,
+        message: OVERVIEW.SOURCE_DELETED_SUCCESS,
+      });
+      router.push(ROUTES.SOURCES);
+    }
+  }
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
@@ -19,6 +43,7 @@ export function InstrumentedSourcesContainer() {
         onAddClick={() => router.push(ROUTES.CREATE_SOURCE)}
         sources={sources}
       />
+      <Notification />
     </SourcesContainerWrapper>
   );
 }
diff --git a/frontend/webapp/containers/overview/sources/update.source.form.tsx b/frontend/webapp/containers/overview/sources/update.source.form.tsx
index e563177c7..19d67bed5 100644
--- a/frontend/webapp/containers/overview/sources/update.source.form.tsx
+++ b/frontend/webapp/containers/overview/sources/update.source.form.tsx
@@ -1,6 +1,12 @@
 "use client";
 import { ManageSourceHeader } from "@/components/overview/sources/manage.source.header/manage.source.header";
-import { ACTION, NOTIFICATION, OVERVIEW, SETUP } from "@/utils/constants";
+import {
+  ACTION,
+  NOTIFICATION,
+  OVERVIEW,
+  ROUTES,
+  SETUP,
+} from "@/utils/constants";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { useMutation } from "react-query";
@@ -68,6 +74,13 @@ export function UpdateSourceForm() {
     const currentSource = await getSource(namespace, kind, name);
     setCurrentSource(currentSource);
   }
+  function onError({ response }) {
+    const message = response?.data?.message;
+    show({
+      type: NOTIFICATION.ERROR,
+      message,
+    });
+  }
 
   function onSaveClick(newName) {
     editSource(newName, {
@@ -80,27 +93,9 @@ export function UpdateSourceForm() {
     });
   }
 
-  function onError({ response }) {
-    const message = response?.data?.message;
-    show({
-      type: NOTIFICATION.ERROR,
-      message,
-    });
-  }
-
-  function onSuccess() {
-    setTimeout(() => {
-      router.back();
-    }, 1000);
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message: OVERVIEW.SOURCE_DELETED_SUCCESS,
-    });
-  }
-
-  function onDelete() {
+  function onSourceDelete() {
     handleDeleteSource(undefined, {
-      onSuccess,
+      onSuccess: () => router.push(`${ROUTES.SOURCES}?status=deleted`),
       onError,
     });
   }
@@ -137,7 +132,7 @@ export function UpdateSourceForm() {
         </KeyvalButton>
       </SaveSourceButtonWrapper>
       <DeleteSource
-        onDelete={onDelete}
+        onDelete={onSourceDelete}
         name={currentSource?.name}
         image_url={
           LANGUAGES_LOGOS[currentSource?.languages?.[0].language || ""]
diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx
index 253c82b8a..562353d2e 100644
--- a/frontend/webapp/utils/constants/index.tsx
+++ b/frontend/webapp/utils/constants/index.tsx
@@ -1,4 +1,4 @@
 export { ROUTES } from "./routes";
 export { CONFIG, METADATA } from "./config";
-export { SETUP, OVERVIEW, NOTIFICATION, ACTION } from "./string";
+export { SETUP, OVERVIEW, NOTIFICATION, ACTION, PARAMS } from "./string";
 export { API, QUERIES } from "./urls";
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index f5070b409..5d6fa690a 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -94,3 +94,8 @@ export const NOTIFICATION = {
   ERROR: "error",
   SUCCESS: "success",
 };
+
+export const PARAMS = {
+  STATUS: "status",
+  DELETED: "deleted",
+};

From c374b8e9295107b337d3b137fab86f315b3b648e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 10:15:11 +0300
Subject: [PATCH 069/374] refactor services

---
 frontend/webapp/services/api.tsx | 28 ++++++++--------------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/frontend/webapp/services/api.tsx b/frontend/webapp/services/api.tsx
index 354663e64..326084fd4 100644
--- a/frontend/webapp/services/api.tsx
+++ b/frontend/webapp/services/api.tsx
@@ -7,30 +7,18 @@ export async function get(url: string) {
   }
 }
 
-export async function post(url: string, body: any) {
-  const { data, status } = await axios.post(url, body);
-
-  if (status === 200) {
-    return data;
-  }
+export function post(url: string, body: any) {
+  axios.post(url, body);
 }
 
-export async function put(url: string, body: any) {
-  const { data, status } = await axios.put(url, body);
-
-  if (status === 200) {
-    return data;
-  }
+export function put(url: string, body: any) {
+  axios.put(url, body);
 }
 
-export async function httpDelete(url: string) {
-  const { data, status } = await axios.delete(url);
-
-  if (status === 200) {
-    return data;
-  }
+export function httpDelete(url: string) {
+  axios.delete(url);
 }
 
-export async function patch(url: string, body: any) {
-  await axios.patch(url, body);
+export function patch(url: string, body: any) {
+  axios.patch(url, body);
 }

From f1618a5be5bb0418c800f0e586cbf7ba3516762e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 14:21:43 +0300
Subject: [PATCH 070/374] WIP

---
 .../overview/destination/update.destination.flow.tsx          | 4 ++--
 frontend/webapp/services/api.tsx                              | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
index 2f0bfa0be..4addddb1d 100644
--- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
@@ -63,7 +63,7 @@ export function UpdateDestinationFlow() {
     };
 
     handleUpdateDestination(newDestinations, {
-      onSuccess,
+      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_UPDATE_SUCCESS),
       onError,
     });
   }
@@ -78,7 +78,7 @@ export function UpdateDestinationFlow() {
     }
   }
 
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
+  function onSuccess(message: string) {
     refetch();
     show({
       type: NOTIFICATION.SUCCESS,
diff --git a/frontend/webapp/services/api.tsx b/frontend/webapp/services/api.tsx
index 990b1f888..326084fd4 100644
--- a/frontend/webapp/services/api.tsx
+++ b/frontend/webapp/services/api.tsx
@@ -22,7 +22,3 @@ export function httpDelete(url: string) {
 export function patch(url: string, body: any) {
   axios.patch(url, body);
 }
-
-export async function patch(url: string, body: any) {
-  await axios.patch(url, body);
-}

From fd269a6e8059ccd9f0f2fe0d69bc2d39491521b9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 14:58:27 +0300
Subject: [PATCH 071/374] change file names

---
 .../overview/destinations/create/{[id] => form}/page.tsx  | 0
 .../destinations.styled.tsx}                              | 0
 .../destination.tsx => destinations/destinations.tsx}     | 0
 .../new.destination.form.tsx                              | 0
 .../new.destination.list.tsx                              | 2 +-
 .../update.destination.flow.tsx                           | 2 +-
 frontend/webapp/containers/overview/index.tsx             | 8 ++++----
 frontend/webapp/utils/constants/routes.tsx                | 2 +-
 8 files changed, 7 insertions(+), 7 deletions(-)
 rename frontend/webapp/app/overview/destinations/create/{[id] => form}/page.tsx (100%)
 rename frontend/webapp/containers/overview/{destination/destination.styled.tsx => destinations/destinations.styled.tsx} (100%)
 rename frontend/webapp/containers/overview/{destination/destination.tsx => destinations/destinations.tsx} (100%)
 rename frontend/webapp/containers/overview/{destination => destinations}/new.destination.form.tsx (100%)
 rename frontend/webapp/containers/overview/{destination => destinations}/new.destination.list.tsx (91%)
 rename frontend/webapp/containers/overview/{destination => destinations}/update.destination.flow.tsx (97%)

diff --git a/frontend/webapp/app/overview/destinations/create/[id]/page.tsx b/frontend/webapp/app/overview/destinations/create/form/page.tsx
similarity index 100%
rename from frontend/webapp/app/overview/destinations/create/[id]/page.tsx
rename to frontend/webapp/app/overview/destinations/create/form/page.tsx
diff --git a/frontend/webapp/containers/overview/destination/destination.styled.tsx b/frontend/webapp/containers/overview/destinations/destinations.styled.tsx
similarity index 100%
rename from frontend/webapp/containers/overview/destination/destination.styled.tsx
rename to frontend/webapp/containers/overview/destinations/destinations.styled.tsx
diff --git a/frontend/webapp/containers/overview/destination/destination.tsx b/frontend/webapp/containers/overview/destinations/destinations.tsx
similarity index 100%
rename from frontend/webapp/containers/overview/destination/destination.tsx
rename to frontend/webapp/containers/overview/destinations/destinations.tsx
diff --git a/frontend/webapp/containers/overview/destination/new.destination.form.tsx b/frontend/webapp/containers/overview/destinations/new.destination.form.tsx
similarity index 100%
rename from frontend/webapp/containers/overview/destination/new.destination.form.tsx
rename to frontend/webapp/containers/overview/destinations/new.destination.form.tsx
diff --git a/frontend/webapp/containers/overview/destination/new.destination.list.tsx b/frontend/webapp/containers/overview/destinations/new.destination.list.tsx
similarity index 91%
rename from frontend/webapp/containers/overview/destination/new.destination.list.tsx
rename to frontend/webapp/containers/overview/destinations/new.destination.list.tsx
index 3f8821ed7..4482533f5 100644
--- a/frontend/webapp/containers/overview/destination/new.destination.list.tsx
+++ b/frontend/webapp/containers/overview/destinations/new.destination.list.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { OVERVIEW, ROUTES } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { DestinationSection } from "@/containers/setup/destination/destination.section";
-import { NewDestinationContainer } from "./destination.styled";
+import { NewDestinationContainer } from "./destinations.styled";
 import { useRouter } from "next/navigation";
 
 export function NewDestinationList() {
diff --git a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx b/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx
similarity index 97%
rename from frontend/webapp/containers/overview/destination/update.destination.flow.tsx
rename to frontend/webapp/containers/overview/destinations/update.destination.flow.tsx
index 4addddb1d..1bb1a5221 100644
--- a/frontend/webapp/containers/overview/destination/update.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx
@@ -6,7 +6,7 @@ import { useMutation, useQuery } from "react-query";
 import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
 import { deleteDestination, getDestinations } from "@/services/destinations";
-import { ManageDestinationWrapper } from "./destination.styled";
+import { ManageDestinationWrapper } from "./destinations.styled";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useNotification } from "@/hooks";
 const DEST = "dest";
diff --git a/frontend/webapp/containers/overview/index.tsx b/frontend/webapp/containers/overview/index.tsx
index 60d3d1c17..27cff2fb1 100644
--- a/frontend/webapp/containers/overview/index.tsx
+++ b/frontend/webapp/containers/overview/index.tsx
@@ -1,8 +1,8 @@
 export { OverviewContainer } from "./overview/overview";
-export { DestinationContainer } from "./destination/destination";
+export { DestinationContainer } from "./destinations/destinations";
 export { InstrumentedSourcesContainer } from "./sources/instrumented.sources";
-export { NewDestinationList } from "./destination/new.destination.list";
-export { NewDestinationForm } from "./destination/new.destination.form";
-export { UpdateDestinationFlow } from "./destination/update.destination.flow";
+export { NewDestinationList } from "./destinations/new.destination.list";
+export { NewDestinationForm } from "./destinations/new.destination.form";
+export { UpdateDestinationFlow } from "./destinations/update.destination.flow";
 export { UpdateSourceForm } from "./sources/update.source.form";
 export { SourcesListContainer } from "./sources/sources.list.container";
diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx
index 6a074d899..13cbccc12 100644
--- a/frontend/webapp/utils/constants/routes.tsx
+++ b/frontend/webapp/utils/constants/routes.tsx
@@ -4,7 +4,7 @@ export const ROUTES = {
   SOURCES: "/overview/sources",
   DESTINATIONS: "/overview/destinations",
   NEW_DESTINATION: "/setup?state=destinations",
-  MANAGE_DESTINATION: "/overview/destinations/create/manage?dest=",
+  MANAGE_DESTINATION: "/overview/destinations/create/form?dest=",
   UPDATE_DESTINATION: "destinations/manage?dest=",
   CREATE_DESTINATION: "destinations/create",
   CREATE_SOURCE: "/overview/sources/create",

From 8769e675ae3c65d1779fed9b46ce0903fec5740c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 15:11:39 +0300
Subject: [PATCH 072/374] WIP

---
 .../overview/sources/instrumented.sources.tsx | 19 ++++++++++++++++---
 .../sources/sources.list.container.tsx        | 16 ++++------------
 .../overview/sources/update.source.form.tsx   |  6 +-----
 frontend/webapp/utils/constants/string.tsx    |  2 ++
 4 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
index 03ec2695f..495f370cb 100644
--- a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
+++ b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
@@ -25,15 +25,28 @@ export function InstrumentedSourcesContainer() {
   );
   useEffect(onPageLoad, [searchParams]);
 
+  function getMessage(status: string) {
+    switch (status) {
+      case PARAMS.DELETED:
+        return OVERVIEW.SOURCE_DELETED_SUCCESS;
+      case PARAMS.CREATED:
+        return OVERVIEW.SOURCE_CREATED_SUCCESS;
+      case PARAMS.UPDATED:
+        return OVERVIEW.SOURCE_UPDATE_SUCCESS;
+      default:
+        return "";
+    }
+  }
+
   function onPageLoad() {
     const status = searchParams.get(PARAMS.STATUS);
-    if (status === PARAMS.DELETED) {
+    if (status) {
       refetchSources();
       show({
         type: NOTIFICATION.SUCCESS,
-        message: OVERVIEW.SOURCE_DELETED_SUCCESS,
+        message: getMessage(status),
       });
-      router.push(ROUTES.SOURCES);
+      router.replace(ROUTES.SOURCES);
     }
   }
   return (
diff --git a/frontend/webapp/containers/overview/sources/sources.list.container.tsx b/frontend/webapp/containers/overview/sources/sources.list.container.tsx
index 6d87ff086..7729cf345 100644
--- a/frontend/webapp/containers/overview/sources/sources.list.container.tsx
+++ b/frontend/webapp/containers/overview/sources/sources.list.container.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
 import { OverviewHeader } from "@/components/overview";
 import { useNotification } from "@/hooks";
 import { useQuery } from "react-query";
@@ -9,22 +9,14 @@ import { NewSourcesList } from "@/containers/overview/sources/new.source.flow";
 import { useRouter } from "next/navigation";
 
 export function SourcesListContainer() {
-  const { show, Notification } = useNotification();
+  const { Notification } = useNotification();
   const router = useRouter();
-  const { data: sources, refetch } = useQuery(
-    [QUERIES.API_SOURCES],
-    getSources
-  );
+  const { data: sources } = useQuery([QUERIES.API_SOURCES], getSources);
 
   function onNewSourceSuccess() {
     setTimeout(() => {
-      router.back();
-      refetch();
+      router.push(`${ROUTES.SOURCES}?status=created`);
     }, 1000);
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message: OVERVIEW.SOURCE_CREATED_SUCCESS,
-    });
   }
 
   return (
diff --git a/frontend/webapp/containers/overview/sources/update.source.form.tsx b/frontend/webapp/containers/overview/sources/update.source.form.tsx
index 19d67bed5..a7d94cc2f 100644
--- a/frontend/webapp/containers/overview/sources/update.source.form.tsx
+++ b/frontend/webapp/containers/overview/sources/update.source.form.tsx
@@ -85,11 +85,7 @@ export function UpdateSourceForm() {
   function onSaveClick(newName) {
     editSource(newName, {
       onError,
-      onSuccess: () =>
-        show({
-          type: NOTIFICATION.SUCCESS,
-          message: OVERVIEW.SOURCE_UPDATE_SUCCESS,
-        }),
+      onSuccess: () => router.push(`${ROUTES.SOURCES}?status=updated`),
     });
   }
 
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index 5d6fa690a..ec8a22441 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -98,4 +98,6 @@ export const NOTIFICATION = {
 export const PARAMS = {
   STATUS: "status",
   DELETED: "deleted",
+  CREATED: "created",
+  UPDATED: "updated",
 };

From f5220c5c688ec622583cdd4e407089774f198063 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Aug 2023 15:38:31 +0300
Subject: [PATCH 073/374] WIP

---
 .../overview/destinations/destinations.tsx    | 19 ++++++++++++++++---
 .../destinations/new.destination.form.tsx     | 11 ++---------
 .../destinations/update.destination.flow.tsx  | 12 ++----------
 .../overview/sources/instrumented.sources.tsx |  1 +
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/frontend/webapp/containers/overview/destinations/destinations.tsx b/frontend/webapp/containers/overview/destinations/destinations.tsx
index f8020223d..ca8a967eb 100644
--- a/frontend/webapp/containers/overview/destinations/destinations.tsx
+++ b/frontend/webapp/containers/overview/destinations/destinations.tsx
@@ -28,15 +28,28 @@ export function DestinationContainer() {
 
   useEffect(onPageLoad, [searchParams, destinationList]);
 
+  function getMessage(status: string) {
+    switch (status) {
+      case PARAMS.DELETED:
+        return OVERVIEW.DESTINATION_DELETED_SUCCESS;
+      case PARAMS.CREATED:
+        return OVERVIEW.DESTINATION_CREATED_SUCCESS;
+      case PARAMS.UPDATED:
+        return OVERVIEW.DESTINATION_UPDATE_SUCCESS;
+      default:
+        return "";
+    }
+  }
+
   function onPageLoad() {
     const status = searchParams.get(PARAMS.STATUS);
-    if (status === PARAMS.DELETED) {
+    if (status) {
       refetchDestinations();
       show({
         type: NOTIFICATION.SUCCESS,
-        message: OVERVIEW.DESTINATION_DELETED_SUCCESS,
+        message: getMessage(status),
       });
-      router.push(ROUTES.DESTINATIONS);
+      router.replace(ROUTES.DESTINATIONS);
     }
   }
 
diff --git a/frontend/webapp/containers/overview/destinations/new.destination.form.tsx b/frontend/webapp/containers/overview/destinations/new.destination.form.tsx
index c88928126..2a0ad1b82 100644
--- a/frontend/webapp/containers/overview/destinations/new.destination.form.tsx
+++ b/frontend/webapp/containers/overview/destinations/new.destination.form.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect } from "react";
-import { NOTIFICATION, OVERVIEW, QUERIES } from "@/utils/constants";
+import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import {
   getDestination,
@@ -59,13 +59,6 @@ export function NewDestinationForm() {
     setSectionData(currentData);
   }
 
-  function onSuccess(message = OVERVIEW.DESTINATION_UPDATE_SUCCESS) {
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
   function onError({ response }) {
     const message = response?.data?.message;
     show({
@@ -81,7 +74,7 @@ export function NewDestinationForm() {
     };
 
     mutate(destination, {
-      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_CREATED_SUCCESS),
+      onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=created`),
       onError,
     });
   }
diff --git a/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx b/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx
index 1bb1a5221..d4b9ac1c8 100644
--- a/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx
+++ b/frontend/webapp/containers/overview/destinations/update.destination.flow.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
 import { KeyvalLoader } from "@/design.system";
-import { NOTIFICATION, OVERVIEW, QUERIES, ROUTES } from "@/utils/constants";
+import { NOTIFICATION, QUERIES, ROUTES } from "@/utils/constants";
 import { useMutation, useQuery } from "react-query";
 import { getDestination, updateDestination } from "@/services";
 import { ManageDestination } from "@/components/overview";
@@ -63,7 +63,7 @@ export function UpdateDestinationFlow() {
     };
 
     handleUpdateDestination(newDestinations, {
-      onSuccess: () => onSuccess(OVERVIEW.DESTINATION_UPDATE_SUCCESS),
+      onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=updated`),
       onError,
     });
   }
@@ -78,14 +78,6 @@ export function UpdateDestinationFlow() {
     }
   }
 
-  function onSuccess(message: string) {
-    refetch();
-    show({
-      type: NOTIFICATION.SUCCESS,
-      message,
-    });
-  }
-
   function onError({ response }) {
     const message = response?.data?.message;
     show({
diff --git a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
index 495f370cb..4ff1e9384 100644
--- a/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
+++ b/frontend/webapp/containers/overview/sources/instrumented.sources.tsx
@@ -49,6 +49,7 @@ export function InstrumentedSourcesContainer() {
       router.replace(ROUTES.SOURCES);
     }
   }
+
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />

From 7626088416a3880e83d440c0c274171461dd431f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 8 Aug 2023 11:01:43 +0300
Subject: [PATCH 074/374] add contact button

---
 frontend/webapp/assets/icons/social/index.tsx |  4 ++
 .../webapp/assets/icons/social/slack-grey.svg |  7 +++
 frontend/webapp/assets/icons/social/slack.svg | 10 ++++
 .../side.menu/contact.us/contact.us.tsx       | 48 +++++++++++++++++++
 .../components/side.menu/menu/menu.styled.tsx |  5 ++
 .../webapp/components/side.menu/menu/menu.tsx | 11 ++++-
 frontend/webapp/utils/constants/string.tsx    |  1 +
 frontend/webapp/utils/constants/urls.tsx      |  5 +-
 8 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/assets/icons/social/index.tsx
 create mode 100644 frontend/webapp/assets/icons/social/slack-grey.svg
 create mode 100644 frontend/webapp/assets/icons/social/slack.svg
 create mode 100644 frontend/webapp/components/side.menu/contact.us/contact.us.tsx

diff --git a/frontend/webapp/assets/icons/social/index.tsx b/frontend/webapp/assets/icons/social/index.tsx
new file mode 100644
index 000000000..d868090ae
--- /dev/null
+++ b/frontend/webapp/assets/icons/social/index.tsx
@@ -0,0 +1,4 @@
+import Slack from "./slack.svg";
+import SlackGrey from "./slack-grey.svg";
+
+export { SlackGrey, Slack };
diff --git a/frontend/webapp/assets/icons/social/slack-grey.svg b/frontend/webapp/assets/icons/social/slack-grey.svg
new file mode 100644
index 000000000..dfb76ae07
--- /dev/null
+++ b/frontend/webapp/assets/icons/social/slack-grey.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g fill-rule="evenodd" clip-rule="evenodd"> <path fill="#8b92a6" d="M2.471 11.318a1.474 1.474 0 001.47-1.471v-1.47h-1.47A1.474 1.474 0 001 9.846c.001.811.659 1.469 1.47 1.47zm3.682-2.942a1.474 1.474 0 00-1.47 1.471v3.683c.002.811.66 1.468 1.47 1.47a1.474 1.474 0 001.47-1.47V9.846a1.474 1.474 0 00-1.47-1.47z"/> <path fill="#8b92a6" d="M4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 006.154 1a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47H2.47A1.474 1.474 0 001 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 001.47-1.47z"/> <path fill="#8b92a6" d="M9.847 7.624a1.474 1.474 0 001.47-1.47V2.47A1.474 1.474 0 009.848 1a1.474 1.474 0 00-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47zm3.682-2.941a1.474 1.474 0 00-1.47 1.47v1.47h1.47A1.474 1.474 0 0015 6.154a1.474 1.474 0 00-1.47-1.47z"/> <path fill="#8b92a6" d="M8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0015 9.848a1.474 1.474 0 00-1.47-1.47H9.847a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 001.47-1.47z"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/frontend/webapp/assets/icons/social/slack.svg b/frontend/webapp/assets/icons/social/slack.svg
new file mode 100644
index 000000000..ff256fd4d
--- /dev/null
+++ b/frontend/webapp/assets/icons/social/slack.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+
<g fill-rule="evenodd" clip-rule="evenodd">
+
<path fill="#E01E5A" d="M2.471 11.318a1.474 1.474 0 001.47-1.471v-1.47h-1.47A1.474 1.474 0 001 9.846c.001.811.659 1.469 1.47 1.47zm3.682-2.942a1.474 1.474 0 00-1.47 1.471v3.683c.002.811.66 1.468 1.47 1.47a1.474 1.474 0 001.47-1.47V9.846a1.474 1.474 0 00-1.47-1.47z"/>
+
<path fill="#36C5F0" d="M4.683 2.471c.001.811.659 1.469 1.47 1.47h1.47v-1.47A1.474 1.474 0 006.154 1a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47H2.47A1.474 1.474 0 001 6.153c.002.812.66 1.469 1.47 1.47h3.684a1.474 1.474 0 001.47-1.47z"/>
+
<path fill="#2EB67D" d="M9.847 7.624a1.474 1.474 0 001.47-1.47V2.47A1.474 1.474 0 009.848 1a1.474 1.474 0 00-1.47 1.47v3.684c.002.81.659 1.468 1.47 1.47zm3.682-2.941a1.474 1.474 0 00-1.47 1.47v1.47h1.47A1.474 1.474 0 0015 6.154a1.474 1.474 0 00-1.47-1.47z"/>
+
<path fill="#ECB22E" d="M8.377 9.847c.002.811.659 1.469 1.47 1.47h3.683A1.474 1.474 0 0015 9.848a1.474 1.474 0 00-1.47-1.47H9.847a1.474 1.474 0 00-1.47 1.47zm2.94 3.682a1.474 1.474 0 00-1.47-1.47h-1.47v1.47c.002.812.659 1.469 1.47 1.47a1.474 1.474 0 001.47-1.47z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/frontend/webapp/components/side.menu/contact.us/contact.us.tsx b/frontend/webapp/components/side.menu/contact.us/contact.us.tsx
new file mode 100644
index 000000000..d33165ecd
--- /dev/null
+++ b/frontend/webapp/components/side.menu/contact.us/contact.us.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Slack, SlackGrey } from "@/assets/icons/social";
+import { KeyvalText } from "@/design.system";
+import { SLACK_INVITE_LINK } from "@/utils/constants/urls";
+import { styled } from "styled-components";
+import { ACTION } from "@/utils/constants";
+
+const ContactUsContainer = styled.div`
+  display: flex;
+  padding: 0px 16px;
+  height: 48px;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  border-radius: 10px;
+  p {
+    color: #8b92a6;
+  }
+  .icon-lock {
+    display: none;
+  }
+  &:hover {
+    p {
+      color: ${({ theme }) => theme.colors.white};
+    }
+    .icon-unlock {
+      display: none;
+    }
+
+    .icon-lock {
+      display: block;
+    }
+  }
+`;
+
+export default function ContactUsButton() {
+  function handleContactUsClick() {
+    window.open(SLACK_INVITE_LINK, "_blank");
+  }
+
+  return (
+    <ContactUsContainer onClick={handleContactUsClick}>
+      <Slack width={24} height={24} className="icon-lock" />
+      <SlackGrey width={24} height={24} className="icon-unlock" />
+      <KeyvalText size={14}>{ACTION.CONTACT_US}</KeyvalText>
+    </ContactUsContainer>
+  );
+}
diff --git a/frontend/webapp/components/side.menu/menu/menu.styled.tsx b/frontend/webapp/components/side.menu/menu/menu.styled.tsx
index 06e515012..e3c1700c6 100644
--- a/frontend/webapp/components/side.menu/menu/menu.styled.tsx
+++ b/frontend/webapp/components/side.menu/menu/menu.styled.tsx
@@ -14,3 +14,8 @@ export const LogoWrapper = styled.div`
 export const MenuItemsWrapper = styled.div`
   padding: 16px 9px;
 `;
+
+export const ContactUsWrapper = styled(MenuItemsWrapper)`
+  position: absolute;
+  bottom: 5%;
+`;
diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx
index 814885343..9cc7cd324 100644
--- a/frontend/webapp/components/side.menu/menu/menu.tsx
+++ b/frontend/webapp/components/side.menu/menu/menu.tsx
@@ -1,11 +1,17 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { MenuContainer, LogoWrapper, MenuItemsWrapper } from "./menu.styled";
+import {
+  MenuContainer,
+  LogoWrapper,
+  MenuItemsWrapper,
+  ContactUsWrapper,
+} from "./menu.styled";
 import { KeyvalText } from "@/design.system";
 import MenuItem from "../menu.item/menu.item";
 import { useRouter } from "next/navigation";
 import { OVERVIEW, ROUTES } from "@/utils/constants";
 import { MENU_ITEMS } from "./items";
+import ContactUsButton from "../contact.us/contact.us";
 
 export interface MenuItem {
   id: number;
@@ -59,6 +65,9 @@ export function Menu() {
         </KeyvalText>
       </LogoWrapper>
       <MenuItemsWrapper>{renderMenuItemsList()}</MenuItemsWrapper>
+      <ContactUsWrapper>
+        <ContactUsButton />
+      </ContactUsWrapper>
     </MenuContainer>
   );
 }
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index ec8a22441..653500b2a 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -88,6 +88,7 @@ export const OVERVIEW = {
 
 export const ACTION = {
   SAVE: "Save",
+  CONTACT_US: "Contact Us",
 };
 
 export const NOTIFICATION = {
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index a22b00441..584f320f7 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -22,4 +22,7 @@ const QUERIES = {
   API_DESTINATION_TYPES: "apiDestinationTypes",
 };
 
-export { API, QUERIES };
+const SLACK_INVITE_LINK =
+  "https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email";
+
+export { API, QUERIES, SLACK_INVITE_LINK };

From 52f92f08b580eca075d36fa9cb903a8790fb2fa8 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 9 Aug 2023 17:11:06 +0300
Subject: [PATCH 075/374] fixed setup source and destinations list wrapping

---
 .../destination.list/destination.list.styled.tsx | 11 +++++++++--
 .../sources/sources.list/sources.list.styled.tsx | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
index 1515a8416..fcc749e55 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -10,14 +10,21 @@ export const DestinationTypeTitleWrapper = styled.div`
 
 export const DestinationListWrapper = styled.div`
   width: 100%;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   ::-webkit-scrollbar {
     display: none;
   }
   -ms-overflow-style: none;
   scrollbar-width: none;
+
+  @media screen and (max-width: 1500px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media screen and (max-width: 1150px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 `;
 
 export const EmptyListWrapper = styled.div`
diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
index 4e9eab0e3..8dae05be3 100644
--- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
@@ -21,11 +21,23 @@ export const SourcesListWrapper = styled.div`
   width: 100%;
   height: 400px;
   padding-bottom: 300px;
-  display: flex;
-  flex-wrap: wrap;
   gap: 24px;
   overflow-y: scroll;
   scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media screen and (max-width: 1500px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media screen and (max-width: 1150px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 `;
 
 export const EmptyListWrapper = styled.div`

From 6095f4db72e665f0b340bfa00655d7e715d3bdee Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 9 Aug 2023 17:21:39 +0300
Subject: [PATCH 076/374] manage destination list set up

---
 .../destination.list/destination.list.styled.tsx | 16 ++++++++++++++--
 .../destination.list/destination.list.styled.tsx |  5 ++++-
 .../sources/sources.list/sources.list.styled.tsx |  6 +++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index f172a32f9..ceb5afeb1 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -1,11 +1,23 @@
 import { styled } from "styled-components";
 
 export const ManagedListWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 24px;
   padding: 0px 36px;
   padding-bottom: 50px;
+  grid-template-columns: repeat(4, 1fr);
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  @media screen and (max-width: 1850px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media screen and (max-width: 1450px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 `;
 
 export const MenuWrapper = styled.div`
diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
index fcc749e55..3521015e3 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -11,13 +11,16 @@ export const DestinationTypeTitleWrapper = styled.div`
 export const DestinationListWrapper = styled.div`
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   gap: 24px;
   ::-webkit-scrollbar {
     display: none;
   }
   -ms-overflow-style: none;
   scrollbar-width: none;
+  @media screen and (max-width: 1750px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 
   @media screen and (max-width: 1500px) {
     grid-template-columns: repeat(3, 1fr);
diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
index 8dae05be3..6cd703561 100644
--- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
@@ -27,11 +27,15 @@ export const SourcesListWrapper = styled.div`
   -ms-overflow-style: none;
 
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(5, 1fr);
   ::-webkit-scrollbar {
     display: none;
   }
 
+  @media screen and (max-width: 1750px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
   @media screen and (max-width: 1500px) {
     grid-template-columns: repeat(3, 1fr);
   }

From 960f16df2d1e926cb9af2c2ecbe7542b9d960cec Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 09:37:45 +0300
Subject: [PATCH 077/374] remove unused code

---
 .../destination.card/destination.card.styled.tsx       |  5 +++++
 .../destination/destination.card/destination.card.tsx  |  4 +---
 .../destination/destination.list/destination.list.tsx  |  1 -
 .../setup/destination/destination.section.tsx          |  9 ++++++++-
 .../containers/setup/setup.header/setup.header.tsx     |  2 +-
 .../containers/setup/setup.section/setup.section.tsx   | 10 +++++++---
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
index 17e6a2a89..b0ab56a32 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
@@ -7,6 +7,11 @@ export const DestinationCardWrapper = styled.div`
   flex-direction: column;
   gap: 14px;
   cursor: pointer;
+  border: 1px solid transparent;
+  &:hover {
+    border-radius: 24px;
+    border: ${({ theme }) => `1px solid  ${theme.colors.secondary}`};
+  }
 `;
 
 export const ApplicationNameWrapper = styled.div`
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 316f81939..851127e45 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -27,13 +27,11 @@ type Destination = {
 type DestinationCardProps = {
   item: Destination;
   onClick: () => void;
-  focus: boolean;
 };
 
 export function DestinationCard({
   item: { supported_signals, image_url, display_name },
   onClick,
-  focus,
 }: DestinationCardProps) {
   const monitors = useMemo(() => {
     return Object.entries(supported_signals).reduce((acc, [key, value]) => {
@@ -50,7 +48,7 @@ export function DestinationCard({
   }, [JSON.stringify(supported_signals)]);
 
   return (
-    <KeyvalCard focus={focus}>
+    <KeyvalCard>
       <DestinationCardWrapper onClick={onClick}>
         <KeyvalImage
           src={image_url}
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 4c1a981fd..e32d6f515 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
@@ -18,7 +18,6 @@ export function DestinationList({
         key={index}
         item={item}
         onClick={() => onItemClick(item)}
-        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 854edd779..41e3c8a72 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -22,11 +22,13 @@ import { getDestinationsTypes } from "@/services";
 type DestinationSectionProps = {
   sectionData?: any;
   setSectionData: (data: any) => void;
+  onNext?: () => void;
 };
 
 export function DestinationSection({
   sectionData,
   setSectionData,
+  onNext,
 }: DestinationSectionProps) {
   const [searchFilter, setSearchFilter] = useState<string>("");
   const [dropdownData, setDropdownData] = useState<any>(null);
@@ -47,6 +49,11 @@ export function DestinationSection({
       });
   }, [isError]);
 
+  function onItemSelect(item) {
+    setSectionData(item);
+    onNext && onNext();
+  }
+
   function renderDestinationLists() {
     sortDestinationList(data);
     const list = filterDataByMonitorsOption(
@@ -73,7 +80,7 @@ export function DestinationSection({
             sectionData={sectionData}
             key={category.name}
             data={category}
-            onItemClick={(item: any) => setSectionData(item)}
+            onItemClick={(item: any) => onItemSelect(item)}
           />
         )
       );
diff --git a/frontend/webapp/containers/setup/setup.header/setup.header.tsx b/frontend/webapp/containers/setup/setup.header/setup.header.tsx
index 6155e889a..f7ca31104 100644
--- a/frontend/webapp/containers/setup/setup.header/setup.header.tsx
+++ b/frontend/webapp/containers/setup/setup.header/setup.header.tsx
@@ -80,7 +80,7 @@ export function SetupHeader({
               <KeyvalText>{SETUP.SELECTED}</KeyvalText>
             </TotalSelectedWrapper>
           )}
-        {currentStep?.id !== SETUP.STEPS.ID.CREATE_CONNECTION && (
+        {currentStep?.id === SETUP.STEPS.ID.CHOOSE_SOURCE && (
           <KeyvalButton
             disabled={totalSelected === 0}
             onClick={onNextClick}
diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
index 3c422b937..5b45368ba 100644
--- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx
+++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
@@ -17,7 +17,7 @@ import { setNamespaces } from "@/services";
 import { useSearchParams } from "next/navigation";
 import { useMutation } from "react-query";
 import { SelectedSources } from "@/types/sources";
-import { RightArrow } from "@/assets/icons/app";
+import { WhiteArrow } from "@/assets/icons/app";
 
 const STATE = "state";
 
@@ -52,7 +52,11 @@ export function SetupSection() {
   function renderCurrentSection() {
     const Component = sectionComponents[currentStep?.id];
     return Component ? (
-      <Component sectionData={sectionData} setSectionData={setSectionData} />
+      <Component
+        sectionData={sectionData}
+        setSectionData={setSectionData}
+        onNext={onNextClick}
+      />
     ) : null;
   }
 
@@ -110,7 +114,7 @@ export function SetupSection() {
       <SetupSectionContainer>
         {currentStep.index !== 1 && (
           <BackButtonWrapper onClick={onBackClick}>
-            <RightArrow />
+            <WhiteArrow />
             <KeyvalText size={14} weight={600}>
               {SETUP.BACK}
             </KeyvalText>

From d62193bfa07f6c75803c057c800b52d85543cba3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 10:22:30 +0300
Subject: [PATCH 078/374] fixed repeat numbers

---
 .../destination.list/destination.list.styled.tsx           | 5 +----
 .../destination/destination.list/destination.list.tsx      | 3 +++
 .../setup/sources/sources.list/sources.list.styled.tsx     | 5 +++--
 .../components/setup/sources/sources.list/sources.list.tsx | 7 +++++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
index 3521015e3..fcc749e55 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -11,16 +11,13 @@ export const DestinationTypeTitleWrapper = styled.div`
 export const DestinationListWrapper = styled.div`
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   ::-webkit-scrollbar {
     display: none;
   }
   -ms-overflow-style: none;
   scrollbar-width: none;
-  @media screen and (max-width: 1750px) {
-    grid-template-columns: repeat(4, 1fr);
-  }
 
   @media screen and (max-width: 1500px) {
     grid-template-columns: repeat(3, 1fr);
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 4c1a981fd..fa6eb6d14 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
@@ -6,6 +6,7 @@ import {
   DestinationTypeTitleWrapper,
 } from "./destination.list.styled";
 import { capitalizeFirstLetter } from "@/utils/functions";
+import { ROUTES } from "@/utils/constants";
 
 export function DestinationList({
   data: { items, name },
@@ -22,6 +23,8 @@ export function DestinationList({
       />
     ));
   }
+  // const getNumberOfItemsRepeated = () =>
+  //   window.location.pathname.includes(ROUTES.CREATE_DESTINATION) ? 5 : 4;
 
   return items?.length ? (
     <>
diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
index 6cd703561..39d6b8fe9 100644
--- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
@@ -17,7 +17,7 @@ export const SourcesTitleWrapper = styled.div`
   margin: 24px 0;
 `;
 
-export const SourcesListWrapper = styled.div`
+export const SourcesListWrapper = styled.div<{ repeat: number }>`
   width: 100%;
   height: 400px;
   padding-bottom: 300px;
@@ -27,7 +27,8 @@ export const SourcesListWrapper = styled.div`
   -ms-overflow-style: none;
 
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`};
+
   ::-webkit-scrollbar {
     display: none;
   }
diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx
index 1bd2192e1..f50df7ed0 100644
--- a/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx
+++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx
@@ -7,7 +7,7 @@ import {
 } from "./sources.list.styled";
 import { SourceCard } from "../source.card/source.card";
 import { KeyvalLink, KeyvalText } from "@/design.system";
-import { SETUP } from "@/utils/constants";
+import { ROUTES, SETUP } from "@/utils/constants";
 import Empty from "@/assets/images/empty-list.svg";
 
 export function SourcesList({
@@ -37,13 +37,16 @@ export function SourcesList({
 
   const isListEmpty = () => data?.length === 0;
 
+  const getNumberOfItemsRepeated = () =>
+    window.location.pathname.includes(ROUTES.CREATE_SOURCE) ? 5 : 4;
+
   return !data ? null : (
     <SourcesListContainer>
       <SourcesTitleWrapper>
         <KeyvalText>{`${data?.length} ${SETUP.APPLICATIONS}`}</KeyvalText>
         <KeyvalLink onClick={onClearClick} value={SETUP.CLEAR_SELECTION} />
       </SourcesTitleWrapper>
-      <SourcesListWrapper>
+      <SourcesListWrapper repeat={getNumberOfItemsRepeated()}>
         {isListEmpty() ? (
           <EmptyListWrapper>
             <Empty />

From ac1b8f98600780787a0c2d50c59f88c1856d88cb Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 10:24:00 +0300
Subject: [PATCH 079/374] remove comments

---
 .../setup/destination/destination.list/destination.list.tsx     | 2 --
 1 file changed, 2 deletions(-)

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 fa6eb6d14..7f84d463b 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
@@ -23,8 +23,6 @@ export function DestinationList({
       />
     ));
   }
-  // const getNumberOfItemsRepeated = () =>
-  //   window.location.pathname.includes(ROUTES.CREATE_DESTINATION) ? 5 : 4;
 
   return items?.length ? (
     <>

From 883d21b02db6b7c0a953ead336f43c75866ae9f8 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 10:34:22 +0300
Subject: [PATCH 080/374] WIP

---
 go.work.sum | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/go.work.sum b/go.work.sum
index d1575bbee..f4405e992 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -244,6 +244,7 @@ github.com/alecthomas/units v0.0.0-20190924025748-f65c72e2690d/go.mod h1:rBZYJk5
 github.com/alecthomas/units v0.0.0-20211218093645-b94a6e3cc137/go.mod h1:OMCwj8VM1Kc9e19TLln2VL61YJF0x1XFtfdL4JdbSyE=
 github.com/antlr/antlr4/runtime/Go/antlr v1.4.10/go.mod h1:F7bn7fEU90QkQ3tnmaTx3LTKLEDqnwWODIYppRQ5hnY=
 github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5/go.mod h1:wHh0iHkYZB8zMSxRWpUBQtwG5a7fFgvEO+odwuTv2gs=
+github.com/benbjohnson/clock v1.3.0/go.mod h1:J11/hYXuz8f4ySSvYwY0FKfm+ezbsZBKZxNJlLklBHA=
 github.com/blang/semver/v4 v4.0.0/go.mod h1:IbckMUScFkM3pff0VJDNKRiT6TG/YpiHIM2yvyW5YoQ=
 github.com/buger/jsonparser v1.1.1/go.mod h1:6RYKKt7H4d4+iWqouImQ9R2FZql3VbhNgx27UK13J/0=
 github.com/cenkalti/backoff/v4 v4.1.3/go.mod h1:scbssz8iZGpm3xbr14ovlUdkxfGXNInqkPWOWmG2CLw=
@@ -293,8 +294,6 @@ github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730053900-d53d
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730062110-e61bd9fd998e/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730063239-1359423cb703/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730071335-e3ae9a524206/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
-github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730104422-ed0d5aa81b08 h1:pbl9g6FIHZrGQzcRU/Yt6g3WIqAbqbsXK728ztyJRYk=
-github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230730104422-ed0d5aa81b08/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
 github.com/emicklei/go-restful v0.0.0-20170410110728-ff4f55a20633 h1:H2pdYOb3KQ1/YsqVWoWNLQO+fusocsw354rqGTZtAgw=
 github.com/emicklei/go-restful/v3 v3.8.0/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry+4bhvbpWn3mrbc=
 github.com/emicklei/go-restful/v3 v3.10.2 h1:hIovbnmBTLjHXkqEBUz3HGpXZdM7ZrE9fJIZIqlJLqE=
@@ -425,7 +424,9 @@ go.opentelemetry.io/otel/trace v1.10.0/go.mod h1:Sij3YYczqAdz+EhmGhE6TpTxUO5/F/A
 go.opentelemetry.io/proto/otlp v1.0.0 h1:T0TX0tmXU8a3CbNXzEKGeU5mIVOdf0oykP+u2lIVU/I=
 go.opentelemetry.io/proto/otlp v1.0.0/go.mod h1:Sy6pihPLfYHkr3NkUbEhGHFhINUSI/v80hjKIs5JXpM=
 go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A=
+go.uber.org/goleak v1.2.0/go.mod h1:XJYK+MuIchqpmGmUSAzotztawfKvYLUIgg7guXrwVUo=
 go.uber.org/goleak v1.2.1/go.mod h1:qlT2yGI9QafXHhZZLxlSuNsMw3FFLxBr+tBRlmO1xH4=
+go.uber.org/multierr v1.10.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
 go.uber.org/zap v1.19.0/go.mod h1:xg/QME4nWcxGxrpdeYfq7UvYrLh66cuVKdrbD1XF/NI=
 golang.org/x/arch v0.4.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=

From d6f4127aa2df23f80c84f7ff8cef5b3f75dead75 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 10:40:27 +0300
Subject: [PATCH 081/374] focus on hover

---
 .../destination.list/destination.list.styled.tsx     |  2 +-
 .../sources.manage.list/sources.manage.styled.tsx    |  3 ++-
 .../destination.list/destination.list.styled.tsx     |  7 +++++--
 .../destination.list/destination.list.tsx            | 12 ++++++------
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index ceb5afeb1..7df255f83 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -42,7 +42,7 @@ export const CardWrapper = styled.div`
   flex-direction: column;
   cursor: pointer;
   &:hover {
-    background: var(--dark-mode-dark-1, #07111a81);
+    border: ${({ theme }) => `1px solid  ${theme.colors.secondary}`};
   }
 `;
 
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index 9a36b4efa..5666538c4 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -13,8 +13,9 @@ export const CardWrapper = styled.div`
   flex-direction: column;
   gap: 10px;
   cursor: pointer;
+
   &:hover {
-    background: var(--dark-mode-dark-1, #07111a81);
+    border: ${({ theme }) => `1px solid  ${theme.colors.secondary}`};
   }
 `;
 
diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
index fcc749e55..8802d0155 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -8,16 +8,19 @@ export const DestinationTypeTitleWrapper = styled.div`
   margin: 24px 0;
 `;
 
-export const DestinationListWrapper = styled.div`
+export const DestinationListWrapper = styled.div<{ repeat: number }>`
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`};
   gap: 24px;
   ::-webkit-scrollbar {
     display: none;
   }
   -ms-overflow-style: none;
   scrollbar-width: none;
+  @media screen and (max-width: 1700px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 
   @media screen and (max-width: 1500px) {
     grid-template-columns: repeat(3, 1fr);
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 f92d799e5..8f838552c 100644
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
+++ b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
@@ -8,11 +8,7 @@ import {
 import { capitalizeFirstLetter } from "@/utils/functions";
 import { ROUTES } from "@/utils/constants";
 
-export function DestinationList({
-  data: { items, name },
-  onItemClick,
-  sectionData,
-}: any) {
+export function DestinationList({ data: { items, name }, onItemClick }: any) {
   function renderList() {
     return items?.map((item: any, index: number) => (
       <DestinationCard
@@ -22,6 +18,8 @@ export function DestinationList({
       />
     ));
   }
+  const getNumberOfItemsRepeated = () =>
+    window.location.pathname.includes(ROUTES.CREATE_DESTINATION) ? 5 : 4;
 
   return items?.length ? (
     <>
@@ -30,7 +28,9 @@ export function DestinationList({
           name
         )}`}</KeyvalText>
       </DestinationTypeTitleWrapper>
-      <DestinationListWrapper>{renderList()}</DestinationListWrapper>
+      <DestinationListWrapper repeat={getNumberOfItemsRepeated()}>
+        {renderList()}
+      </DestinationListWrapper>
     </>
   ) : null;
 }

From 7c0e27a2556c71e317efaa24e038518a1667a837 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 10:46:31 +0300
Subject: [PATCH 082/374] types

---
 .../setup/destination/destination.section.tsx | 21 ++++++++++++++-----
 .../setup/setup.section/setup.section.tsx     |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index 41e3c8a72..18952e541 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -19,16 +19,27 @@ import { KeyvalLoader } from "@/design.system";
 import { useNotification } from "@/hooks";
 import { getDestinationsTypes } from "@/services";
 
+interface DestinationTypes {
+  image_url: string;
+  display_name: string;
+  supported_signals: {
+    [key: string]: {
+      supported: boolean;
+    };
+  };
+  type: string;
+}
+
 type DestinationSectionProps = {
   sectionData?: any;
   setSectionData: (data: any) => void;
-  onNext?: () => void;
+  onSelectItem?: () => void;
 };
 
 export function DestinationSection({
   sectionData,
   setSectionData,
-  onNext,
+  onSelectItem,
 }: DestinationSectionProps) {
   const [searchFilter, setSearchFilter] = useState<string>("");
   const [dropdownData, setDropdownData] = useState<any>(null);
@@ -49,9 +60,9 @@ export function DestinationSection({
       });
   }, [isError]);
 
-  function onItemSelect(item) {
+  function handleSelectItem(item: DestinationTypes) {
     setSectionData(item);
-    onNext && onNext();
+    onSelectItem && onSelectItem();
   }
 
   function renderDestinationLists() {
@@ -80,7 +91,7 @@ export function DestinationSection({
             sectionData={sectionData}
             key={category.name}
             data={category}
-            onItemClick={(item: any) => onItemSelect(item)}
+            onItemClick={(item: DestinationTypes) => handleSelectItem(item)}
           />
         )
       );
diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
index 5b45368ba..c0578d1e3 100644
--- a/frontend/webapp/containers/setup/setup.section/setup.section.tsx
+++ b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
@@ -55,7 +55,7 @@ export function SetupSection() {
       <Component
         sectionData={sectionData}
         setSectionData={setSectionData}
-        onNext={onNextClick}
+        onSelectItem={onNextClick}
       />
     ) : null;
   }

From d2ae59648a7b3dcae0fa54c2bb8289c68bb14e25 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 11:10:10 +0300
Subject: [PATCH 083/374] fixed focus issue

---
 frontend/webapp/design.system/card/card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/design.system/card/card.tsx b/frontend/webapp/design.system/card/card.tsx
index 9867a5ae3..9d8110c75 100644
--- a/frontend/webapp/design.system/card/card.tsx
+++ b/frontend/webapp/design.system/card/card.tsx
@@ -5,5 +5,5 @@ interface CardProps {
   focus?: any;
 }
 export function KeyvalCard(props: CardProps) {
-  return <Card>{props.children}</Card>;
+  return <Card {...props}>{props.children}</Card>;
 }

From 0d38d2a1c51bd630a81a3d3ba58483e5bdde0ea1 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 11:27:23 +0300
Subject: [PATCH 084/374] remove scroll bar on firefox

---
 .../destination.list/destination.list.styled.tsx            | 6 +++++-
 .../setup/destination/destination.section.styled.tsx        | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index 7df255f83..23b90c4b2 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -2,10 +2,12 @@ import { styled } from "styled-components";
 
 export const ManagedListWrapper = styled.div`
   display: grid;
-  gap: 24px;
+  grid-gap: 24px;
+
   padding: 0px 36px;
   padding-bottom: 50px;
   grid-template-columns: repeat(4, 1fr);
+  overflow-y: scroll;
   ::-webkit-scrollbar {
     display: none;
   }
@@ -17,6 +19,7 @@ export const ManagedListWrapper = styled.div`
   }
   @media screen and (max-width: 1450px) {
     grid-template-columns: repeat(2, 1fr);
+    height: 75%;
   }
 `;
 
@@ -30,6 +33,7 @@ export const MenuWrapper = styled.div`
 export const CardWrapper = styled.div`
   display: flex;
   width: 366px;
+  height: 190px;
   padding-top: 32px;
   padding-bottom: 24px;
   flex-direction: column;
diff --git a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
index 000d3870c..8e6409f0f 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
@@ -6,6 +6,11 @@ export const DestinationListContainer = styled.div`
   padding-bottom: 300px;
   margin-top: 24px;
   overflow: scroll;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 `;
 
 export const EmptyListWrapper = styled.div`

From 0a35b8c750fde1ae1f99bf663dabc6ed67fd766d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 11:46:28 +0300
Subject: [PATCH 085/374] fixed focus issue

---
 .../setup/sources/sources.list/sources.list.styled.tsx         | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
index 39d6b8fe9..100317447 100644
--- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
+++ b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
@@ -25,7 +25,6 @@ export const SourcesListWrapper = styled.div<{ repeat: number }>`
   overflow-y: scroll;
   scrollbar-width: none;
   -ms-overflow-style: none;
-
   display: grid;
   grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`};
 
@@ -46,7 +45,7 @@ export const SourcesListWrapper = styled.div<{ repeat: number }>`
 `;
 
 export const EmptyListWrapper = styled.div`
-  width: 100%;
+  width: 1168px;
   display: flex;
   justify-content: center;
   align-items: center;

From fec0da92ee103a93b63188ccac9071a84be35a3a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 13:26:52 +0300
Subject: [PATCH 086/374] WIP

---
 .../destination.list.styled.tsx               |  1 -
 .../sources.manage.styled.tsx                 | 25 +++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
index 23b90c4b2..a161d7f17 100644
--- a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
+++ b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -3,7 +3,6 @@ import { styled } from "styled-components";
 export const ManagedListWrapper = styled.div`
   display: grid;
   grid-gap: 24px;
-
   padding: 0px 36px;
   padding-bottom: 50px;
   grid-template-columns: repeat(4, 1fr);
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index 5666538c4..8ac4100ab 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -28,12 +28,27 @@ export const EmptyListWrapper = styled.div`
 `;
 
 export const ManagedListWrapper = styled.div`
-  max-height: 72%;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  height: 680px;
   gap: 24px;
-  padding: 0 36px 0 0;
-  overflow-y: scroll;
+  overflow: scroll;
+  grid-template-columns: repeat(5, 1fr);
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  @media screen and (max-width: 1800px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  @media screen and (max-width: 1500px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media screen and (max-width: 1200px) {
+    grid-template-columns: repeat(2, 1fr);
+    height: 650px;
+  }
 `;
 
 export const ManagedContainer = styled.div`

From 41f1d1d49843753300f07b1f770a38afc215ebbc Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 13:34:32 +0300
Subject: [PATCH 087/374] WIP

---
 .../containers/overview/destinations/destinations.styled.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/webapp/containers/overview/destinations/destinations.styled.tsx b/frontend/webapp/containers/overview/destinations/destinations.styled.tsx
index 008ad16f7..993600da7 100644
--- a/frontend/webapp/containers/overview/destinations/destinations.styled.tsx
+++ b/frontend/webapp/containers/overview/destinations/destinations.styled.tsx
@@ -2,6 +2,11 @@ import styled from "styled-components";
 
 export const NewDestinationContainer = styled.div`
   padding: 20px 36px;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 `;
 
 export const ManageDestinationWrapper = styled.div`

From 41d9ec0a606c3e795bce18a6824dcfb3813a441a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 10 Aug 2023 13:55:30 +0300
Subject: [PATCH 088/374] WIP

---
 .../sources/sources.manage.list/sources.manage.styled.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
index 8ac4100ab..eef639f38 100644
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -29,7 +29,6 @@ export const EmptyListWrapper = styled.div`
 
 export const ManagedListWrapper = styled.div`
   display: grid;
-  height: 680px;
   gap: 24px;
   overflow: scroll;
   grid-template-columns: repeat(5, 1fr);
@@ -44,6 +43,7 @@ export const ManagedListWrapper = styled.div`
   }
   @media screen and (max-width: 1500px) {
     grid-template-columns: repeat(3, 1fr);
+    height: 680px;
   }
   @media screen and (max-width: 1200px) {
     grid-template-columns: repeat(2, 1fr);

From eccae083b7d35861624b8eaec5993cd346321ae9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 24 Aug 2023 17:01:38 +0300
Subject: [PATCH 089/374] WIP

---
 go.work.sum | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/go.work.sum b/go.work.sum
index 44d7b8b51..0cbb2f727 100644
--- a/go.work.sum
+++ b/go.work.sum
@@ -243,6 +243,7 @@ github.com/alecthomas/kingpin/v2 v2.3.2/go.mod h1:0gyi0zQnjuFk8xrkNKamJoyUo382HR
 github.com/alecthomas/units v0.0.0-20190924025748-f65c72e2690d/go.mod h1:rBZYJk541a8SKzHPHnH3zbiI+7dagKZ0cgpgrD7Fyho=
 github.com/alecthomas/units v0.0.0-20211218093645-b94a6e3cc137/go.mod h1:OMCwj8VM1Kc9e19TLln2VL61YJF0x1XFtfdL4JdbSyE=
 github.com/antlr/antlr4/runtime/Go/antlr v1.4.10/go.mod h1:F7bn7fEU90QkQ3tnmaTx3LTKLEDqnwWODIYppRQ5hnY=
+github.com/antlr/antlr4/runtime/Go/antlr/v4 v4.0.0-20230305170008-8188dc5388df/go.mod h1:pSwJ0fSY5KhvocuWSx4fz3BA8OrA1bQn+K1Eli3BRwM=
 github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5/go.mod h1:wHh0iHkYZB8zMSxRWpUBQtwG5a7fFgvEO+odwuTv2gs=
 github.com/benbjohnson/clock v1.3.0/go.mod h1:J11/hYXuz8f4ySSvYwY0FKfm+ezbsZBKZxNJlLklBHA=
 github.com/blang/semver/v4 v4.0.0/go.mod h1:IbckMUScFkM3pff0VJDNKRiT6TG/YpiHIM2yvyW5YoQ=
@@ -257,8 +258,11 @@ github.com/cncf/udpa/go v0.0.0-20220112060539-c52dc94e7fbe/go.mod h1:6pvJx4me5XP
 github.com/cncf/xds/go v0.0.0-20211001041855-01bcc9b48dfe/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs=
 github.com/cncf/xds/go v0.0.0-20230607035331-e9ce68804cb4/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs=
 github.com/coreos/go-semver v0.3.0/go.mod h1:nnelYz7RCh+5ahJtPPxZlU+153eP4D4r3EedlOD2RNk=
+github.com/coreos/go-semver v0.3.1/go.mod h1:irMmmIw/7yzSRPWryHsK7EYSg09caPQL03VsM8rvUec=
 github.com/coreos/go-systemd/v22 v22.4.0/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc=
+github.com/coreos/go-systemd/v22 v22.5.0/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc=
 github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230725113008-4107208bd0e5/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230725115644-40990f7e3c2a/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
 github.com/edenfed/opentelemetry-go-instrumentation-1 v0.0.0-20230725120751-70c2c88605dd/go.mod h1:SYl3vHPGHMCOfF2bbeRBvtVafzEm5HHHsZc4mS02oyo=
@@ -317,12 +321,14 @@ github.com/go-openapi/swag v0.22.4/go.mod h1:UzaqsxGiab7freDnrUUra0MwWfN/q7tE4j+
 github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572/go.mod h1:9Pwr4B2jHnOSGXyyzV8ROjYa2ojvAY6HCGYYfMoC3Ls=
 github.com/godbus/dbus/v5 v5.0.4/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
 github.com/golang-jwt/jwt/v4 v4.4.2/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
+github.com/golang-jwt/jwt/v4 v4.5.0/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
 github.com/golang/glog v1.1.1 h1:jxpi2eWoU84wbX9iIEyAeeoac3FLuifZpY9tcNUD9kw=
 github.com/golang/glog v1.1.1/go.mod h1:zR+okUeTbrL6EL3xHUDxZuEtGv04p5shwip1+mL/rLQ=
 github.com/golang/snappy v0.0.3/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
 github.com/golang/snappy v0.0.4/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
 github.com/google/btree v1.0.1/go.mod h1:xXMiIv4Fb/0kKde4SpL7qlzvu5cMJDRkFDxJfI9uaxA=
 github.com/google/cel-go v0.12.6/go.mod h1:Jk7ljRzLBhkmiAwBoUxB1sZSCVBAzkqPF25olK/iRDw=
+github.com/google/cel-go v0.16.0/go.mod h1:HXZKzB0LXqer5lHHgfWAnlYwJaQBDKMjxjulNQzhwhY=
 github.com/google/gnostic v0.6.9 h1:ZK/5VhkoX835RikCHpSUJV9a+S3e1zLh59YnyWeBW+0=
 github.com/google/gnostic v0.6.9/go.mod h1:Nm8234We1lq6iB9OmlgNv3nH91XLLVZHCDayfA3xq+E=
 github.com/google/go-cmp v0.5.3/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
@@ -368,18 +374,13 @@ github.com/opentracing/opentracing-go v1.1.0/go.mod h1:UkNAQd3GIcIGf0SeVgPpRdFSt
 github.com/prometheus/client_golang v1.11.0/go.mod h1:Z6t4BnS23TR94PD6BsDNk8yVqroYurpAkEiz0P2BEV0=
 github.com/prometheus/client_golang v1.12.1/go.mod h1:3Z9XVyYiZYEO+YQWt3RD2R3jrbd179Rt297l4aS6nDY=
 github.com/prometheus/client_golang v1.14.0/go.mod h1:8vpkKitgIVNcqrRBWh1C4TIUQgYNtG/XQE4E/Zae36Y=
-github.com/prometheus/client_golang v1.16.0 h1:yk/hx9hDbrGHovbci4BY+pRMfSuuat626eFsHb7tmT8=
-github.com/prometheus/client_golang v1.16.0/go.mod h1:Zsulrv/L9oM40tJ7T815tM89lFEugiJ9HzIqaAx4LKc=
 github.com/prometheus/client_model v0.3.0/go.mod h1:LDGWKZIo7rky3hgvBe+caln+Dr3dPggB5dvjtD7w9+w=
 github.com/prometheus/common v0.26.0/go.mod h1:M7rCNAaPfAosfx8veZJCuw84e35h3Cfd9VFqTh1DIvc=
 github.com/prometheus/common v0.32.1/go.mod h1:vu+V0TpY+O6vW9J44gczi3Ap/oXXR10b+M/gUGO4Hls=
 github.com/prometheus/common v0.37.0/go.mod h1:phzohg0JFMnBEFGxTDbfu3QyL5GI8gTQJFhYO5B3mfA=
-github.com/prometheus/common v0.44.0 h1:+5BrQJwiBB9xsMygAB3TNvpQKOwlkc25LbISbrdOOfY=
-github.com/prometheus/common v0.44.0/go.mod h1:ofAIvZbQ1e/nugmZGz4/qCb9Ap1VoSTIO7x0VV9VvuY=
 github.com/prometheus/procfs v0.6.0/go.mod h1:cz+aTbrPOrUb4q7XlbU9ygM+/jj0fzG6c1xBZuNvfVA=
 github.com/prometheus/procfs v0.7.3/go.mod h1:cz+aTbrPOrUb4q7XlbU9ygM+/jj0fzG6c1xBZuNvfVA=
 github.com/prometheus/procfs v0.8.0/go.mod h1:z7EfXMXOkbkqb9IINtpCn86r/to3BnA0uaxHdg830/4=
-github.com/prometheus/procfs v0.10.1/go.mod h1:nwNm2aOCAYw8uTR/9bWRREkZFxAUcWzPHWJq+XBB/FM=
 github.com/prometheus/procfs v0.11.0 h1:5EAgkfkMl659uZPbe9AS2N68a7Cc1TJbPEuGzFuRbyk=
 github.com/prometheus/procfs v0.11.0/go.mod h1:nwNm2aOCAYw8uTR/9bWRREkZFxAUcWzPHWJq+XBB/FM=
 github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
@@ -400,13 +401,21 @@ github.com/xhit/go-str2duration/v2 v2.1.0/go.mod h1:ohY8p+0f07DiV6Em5LKB0s2YpLtX
 github.com/xiang90/probing v0.0.0-20190116061207-43a291ad63a2/go.mod h1:UETIi67q53MR2AWcXfiuqkDkRtnGDLqkBTpCHuJHxtU=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 go.etcd.io/bbolt v1.3.6/go.mod h1:qXsaaIqmgQH0T+OPdb99Bf+PKfBBQVAdyD6TY9G8XM4=
+go.etcd.io/bbolt v1.3.7/go.mod h1:N9Mkw9X8x5fupy0IKsmuqVtoGDyxsaDlbk4Rd05IAQw=
 go.etcd.io/etcd/api/v3 v3.5.7/go.mod h1:9qew1gCdDDLu+VwmeG+iFpL+QlpHTo7iubavdVDgCAA=
+go.etcd.io/etcd/api/v3 v3.5.9/go.mod h1:uyAal843mC8uUVSLWz6eHa/d971iDGnCRpmKd2Z+X8k=
 go.etcd.io/etcd/client/pkg/v3 v3.5.7/go.mod h1:o0Abi1MK86iad3YrWhgUsbGx1pmTS+hrORWc2CamuhY=
+go.etcd.io/etcd/client/pkg/v3 v3.5.9/go.mod h1:y+CzeSmkMpWN2Jyu1npecjB9BBnABxGM4pN8cGuJeL4=
 go.etcd.io/etcd/client/v2 v2.305.7/go.mod h1:GQGT5Z3TBuAQGvgPfhR7VPySu/SudxmEkRq9BgzFU6s=
+go.etcd.io/etcd/client/v2 v2.305.9/go.mod h1:0NBdNx9wbxtEQLwAQtrDHwx58m02vXpDcgSYI2seohQ=
 go.etcd.io/etcd/client/v3 v3.5.7/go.mod h1:sOWmj9DZUMyAngS7QQwCyAXXAL6WhgTOPLNS/NabQgw=
+go.etcd.io/etcd/client/v3 v3.5.9/go.mod h1:i/Eo5LrZ5IKqpbtpPDuaUnDOUv471oDg8cjQaUr2MbA=
 go.etcd.io/etcd/pkg/v3 v3.5.7/go.mod h1:kcOfWt3Ov9zgYdOiJ/o1Y9zFfLhQjylTgL4Lru8opRo=
+go.etcd.io/etcd/pkg/v3 v3.5.9/go.mod h1:BZl0SAShQFk0IpLWR78T/+pyt8AruMHhTNNX73hkNVY=
 go.etcd.io/etcd/raft/v3 v3.5.7/go.mod h1:TflkAb/8Uy6JFBxcRaH2Fr6Slm9mCPVdI2efzxY96yU=
+go.etcd.io/etcd/raft/v3 v3.5.9/go.mod h1:WnFkqzFdZua4LVlVXQEGhmooLeyS7mqzS4Pf4BCVqXg=
 go.etcd.io/etcd/server/v3 v3.5.7/go.mod h1:gxBgT84issUVBRpZ3XkW1T55NjOb4vZZRI4wVvNhf4A=
+go.etcd.io/etcd/server/v3 v3.5.9/go.mod h1:GgI1fQClQCFIzuVjlvdbMxNbnISt90gdfYyqiAIt65g=
 go.opencensus.io v0.24.0/go.mod h1:vNK8G9p7aAivkbmorf4v+7Hgx+Zs0yY+0fOtgBfjQKo=
 go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.35.0/go.mod h1:h8TWwRAhQpOd0aM5nYsRD8+flnkj+526GEIVlarH7eY=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.35.1/go.mod h1:9NiG9I2aHTKkcxqCILhjtyNA1QEiCjdBACv4IvrFQ+c=
@@ -419,6 +428,7 @@ go.opentelemetry.io/otel/sdk v1.10.0/go.mod h1:vO06iKzD5baltJz1zarxMCNHFpUlUiOy4
 go.opentelemetry.io/otel/trace v1.10.0/go.mod h1:Sij3YYczqAdz+EhmGhE6TpTxUO5/F/AzrK+kxfGqySM=
 go.opentelemetry.io/proto/otlp v1.0.0 h1:T0TX0tmXU8a3CbNXzEKGeU5mIVOdf0oykP+u2lIVU/I=
 go.opentelemetry.io/proto/otlp v1.0.0/go.mod h1:Sy6pihPLfYHkr3NkUbEhGHFhINUSI/v80hjKIs5JXpM=
+go.uber.org/atomic v1.10.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0=
 go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A=
 go.uber.org/goleak v1.2.0/go.mod h1:XJYK+MuIchqpmGmUSAzotztawfKvYLUIgg7guXrwVUo=
 go.uber.org/goleak v1.2.1/go.mod h1:qlT2yGI9QafXHhZZLxlSuNsMw3FFLxBr+tBRlmO1xH4=
@@ -431,6 +441,7 @@ golang.org/x/crypto v0.1.0/go.mod h1:RecgLatLF4+eUMCP1PoPZQb+cVrJcOPbHkTkbkB9sbw
 golang.org/x/crypto v0.9.0/go.mod h1:yrmDGqONDYtNj3tH8X9dzUun2m2lzPa9ngI6/RUPGR0=
 golang.org/x/crypto v0.11.0 h1:6Ewdq3tDic1mg5xRO4milcWCfMVQhI4NkqWWvqejpuA=
 golang.org/x/crypto v0.11.0/go.mod h1:xgJhtzW8F9jGdVFWZESrid1U1bjeNy4zgy5cRr/CIio=
+golang.org/x/exp v0.0.0-20220722155223-a9213eeb770e/go.mod h1:Kr81I6Kryrl9sr8s2FK3vxD90NdsKWRuOIl2O4CvYbA=
 golang.org/x/exp v0.0.0-20230713183714-613f0c0eb8a1 h1:MGwJjxBy0HJshjDNfLsYO8xppfqWlA5ZT9OhtUUhTNw=
 golang.org/x/exp v0.0.0-20230713183714-613f0c0eb8a1/go.mod h1:FXUEEKJgO7OQYeo8N01OfiKP8RXMtf6e8aTskBGqWdc=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
@@ -448,8 +459,12 @@ golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug
 golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.8.0/go.mod h1:QVkue5JL9kW//ek3r6jTKnTFis1tRmNAW2P1shuFdJc=
 golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns=
+golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
+golang.org/x/net v0.12.0/go.mod h1:zEVYFnQC7m/vmpQFELhcD1EWkZlX69l4oqgmer6hfKA=
 golang.org/x/oauth2 v0.0.0-20210514164344-f6687ab2804c/go.mod h1:KelEdhl1UZF7XfJ4dDtk6s++YSgaE7mD/BuKKDLBl4A=
+golang.org/x/oauth2 v0.5.0/go.mod h1:9/XBHVqLaWO3/BRHs5jbpYCnOZVjj5V0ndyaAM7KB4I=
 golang.org/x/oauth2 v0.6.0/go.mod h1:ycmewcwgD4Rpr3eZJLSB4Kyyljb3qDh40vJ8STE5HKw=
+golang.org/x/oauth2 v0.7.0/go.mod h1:hPLQkd9LyjfXTiRohC/41GhcFqxisoUQ99sCUOHO9x4=
 golang.org/x/oauth2 v0.10.0 h1:zHCpF2Khkwy4mMB4bv0U37YtJdTGW8jI0glAApi0Kh8=
 golang.org/x/oauth2 v0.10.0/go.mod h1:kTpgurOux7LqtuxjuyZa4Gj2gdezIt/jQtGnNFfypQI=
 golang.org/x/sync v0.0.0-20201207232520-09787c993a3a/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -471,9 +486,11 @@ golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.6.0/go.mod h1:m6U89DPEgQRMq3DNkDClhWw02AUbt2daBVO4cn4Hv9U=
+golang.org/x/term v0.8.0/go.mod h1:xPskH00ivmX89bAKVGSKKtLOWNx2+17Eiy94tnKShWo=
 golang.org/x/text v0.3.8/go.mod h1:E6s5w1FMmriuDzIBO73fBruAKo1PCIq6d2Q6DHfQ8WQ=
 golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/text v0.8.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
+golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
 golang.org/x/tools v0.0.0-20191108193012-7d206e10da11/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
 golang.org/x/tools v0.4.0/go.mod h1:UE5sM2OK9E/d67R0ANs2xJizIymRP5gJU295PvKXxjQ=
@@ -517,15 +534,18 @@ google.golang.org/grpc v1.55.0/go.mod h1:iYEXKGkEBhg1PjZQvoYEVPTDkHo1/bjTnfwTeGO
 google.golang.org/grpc/cmd/protoc-gen-go-grpc v1.1.0/go.mod h1:6Kw0yEErY5E/yWrBtf03jp27GLLJujG4z/JK95pnjjw=
 google.golang.org/protobuf v1.28.1/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
 gopkg.in/natefinch/lumberjack.v2 v2.0.0/go.mod h1:l0ndWWf7gzL7RNwBG7wST/UCcT4T24xpD6X8LsfU/+k=
+gopkg.in/natefinch/lumberjack.v2 v2.2.1/go.mod h1:YD8tP3GAjkrDg1eZH7EGmyESg/lsYskCTPBJVb9jqSc=
 k8s.io/api v0.27.2/go.mod h1:ENmbocXfBT2ADujUXcBhHV55RIT31IIEvkntP6vZKS4=
 k8s.io/apimachinery v0.27.2/go.mod h1:XNfZ6xklnMCOGGFNqXG7bUrQCoR04dh/E7FprV6pb+E=
 k8s.io/apiserver v0.27.3/go.mod h1:Y61+EaBMVWUBJtxD5//cZ48cHZbQD+yIyV/4iEBhhNA=
 k8s.io/apiserver v0.27.4/go.mod h1:GDEFRfFZ4/l+pAvwYRnoSfz0K4j3TWiN4WsG2KnRteE=
+k8s.io/apiserver v0.28.0/go.mod h1:MvLmtxhQ0Tb1SZk4hfJBjs8iqr5nhYeaFSaoEcz7Lk4=
 k8s.io/client-go v0.27.2/go.mod h1:tY0gVmUsHrAmjzHX9zs7eCjxcBsf8IiNe7KQ52biTcQ=
 k8s.io/component-base v0.27.3/go.mod h1:JNiKYcGImpQ44iwSYs6dysxzR9SxIIgQalk4HaCNVUY=
 k8s.io/klog/v2 v2.80.1/go.mod h1:y1WjHnz7Dj687irZUWR/WLkLc5N1YHtjLdmgWjndZn0=
 k8s.io/kms v0.27.3/go.mod h1:VDfnSIK0dk5J+jasbe+kKpb3CQVwlcDeBLyq59P2KyY=
 k8s.io/kms v0.27.4/go.mod h1:0BY6tkfa+zOP85u8yE7iNNf1Yx7rEZnRQSWLEbsSk+w=
+k8s.io/kms v0.28.0/go.mod h1:CNU792ls92v2Ye7Vn1jn+xLqYtUSezDZNVu6PLbJyrU=
 k8s.io/kube-openapi v0.0.0-20230718181711-3c0fae5ee9fd h1:0tN7VkdcfPGfii8Zl0edopOV08M6XxGlhO29AsPkBHw=
 k8s.io/kube-openapi v0.0.0-20230718181711-3c0fae5ee9fd/go.mod h1:wZK2AVp1uHCp4VamDVgBP2COHZjqD1T68Rf0CM3YjSM=
 k8s.io/utils v0.0.0-20230711102312-30195339c3c7 h1:ZgnF1KZsYxWIifwSNZFZgNtWE89WI5yiP5WwlfDoIyc=

From caa3fa70c3fc85864db74d0e04b6f41572287676 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 10 Mar 2024 13:26:05 +0200
Subject: [PATCH 090/374] chore: wip

---
 .../sources.manage.card.tsx                   | 49 +++++++++++++++++++
 .../sources.manage.list.tsx                   | 24 +++++++++
 .../sources.manage.styled.tsx                 | 38 ++++++++++++++
 .../containers/overview/sources/sources.tsx   | 28 +++++++++++
 frontend/webapp/types/sources.tsx             | 11 +++++
 5 files changed, 150 insertions(+)
 create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
 create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
 create mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
 create mode 100644 frontend/webapp/containers/overview/sources/sources.tsx
 create mode 100644 frontend/webapp/types/sources.tsx

diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
new file mode 100644
index 000000000..dbd8fe628
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system";
+import { CardWrapper } from "./sources.manage.styled";
+import theme from "@/styles/palette";
+import { KIND_COLORS } from "@/styles/global";
+import { SOURCES_LOGOS } from "@/assets/images";
+import { ManagedSource } from "@/types/sources";
+
+const TEXT_STYLE: React.CSSProperties = {
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  width: 224,
+  textAlign: "center",
+};
+const LOGO_STYLE: React.CSSProperties = {
+  padding: 4,
+  backgroundColor: theme.colors.white,
+};
+
+interface SourceManagedCardProps {
+  item: ManagedSource | null;
+}
+const DEPLOYMENT = "Deployment";
+export default function SourceManagedCard({
+  item = null,
+}: SourceManagedCardProps) {
+  return (
+    <CardWrapper>
+      <KeyvalImage
+        src={SOURCES_LOGOS[item?.languages[0].language || ""]}
+        width={56}
+        height={56}
+        style={LOGO_STYLE}
+        alt="source-logo"
+      />
+      <KeyvalText size={18} weight={700} style={TEXT_STYLE}>
+        {item?.name}
+      </KeyvalText>
+      <KeyvalTag
+        title={"item.kind"}
+        color={KIND_COLORS[item?.kind || DEPLOYMENT]}
+      />
+      <KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
+        {item?.namespace}
+      </KeyvalText>
+    </CardWrapper>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
new file mode 100644
index 000000000..9d7b4bded
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled";
+import Empty from "@/assets/images/empty-list.svg";
+import SourceManagedCard from "./sources.manage.card";
+
+export function SourcesManagedList({ data = [1, 1, 1, 1] }) {
+  function renderDestinations() {
+    return data.map((source: any) => <SourceManagedCard />);
+  }
+
+  return (
+    <>
+      <ManagedListWrapper>
+        {data?.length === 0 ? (
+          <EmptyListWrapper>
+            <Empty />
+          </EmptyListWrapper>
+        ) : (
+          renderDestinations()
+        )}
+      </ManagedListWrapper>
+    </>
+  );
+}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
new file mode 100644
index 000000000..cb4f81c3a
--- /dev/null
+++ b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
@@ -0,0 +1,38 @@
+import { styled } from "styled-components";
+
+export const CardWrapper = styled.div`
+  display: flex;
+  width: 272px;
+  height: 152px;
+  padding-top: 32px;
+  padding-bottom: 24px;
+  border-radius: 24px;
+  border: 1px solid var(--dark-mode-dark-3, #203548);
+  background: var(--dark-mode-dark-1, #07111a);
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+  cursor: pointer;
+  &:hover {
+    background: var(--dark-mode-dark-1, #07111a81);
+  }
+`;
+
+export const EmptyListWrapper = styled.div`
+  width: 100%;
+  margin-top: 130px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ManagedListWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  overflow-y: scroll;
+  padding: 0px 36px;
+  padding-bottom: 50px;
+  margin-top: 88px;
+`;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
new file mode 100644
index 000000000..9164e2704
--- /dev/null
+++ b/frontend/webapp/containers/overview/sources/sources.tsx
@@ -0,0 +1,28 @@
+"use client";
+import React from "react";
+import { KeyvalLoader } from "@/design.system";
+import { OVERVIEW, QUERIES } from "@/utils/constants";
+import { useQuery } from "react-query";
+import { getSources } from "@/services";
+import { OverviewHeader, SourcesManagedList } from "@/components/overview";
+import { SourcesContainerWrapper } from "./sources.styled";
+
+export function SourcesContainer() {
+  const {
+    data: sources,
+    refetch,
+    isLoading,
+  } = useQuery([QUERIES.API_SOURCES], getSources);
+
+  if (isLoading) {
+    return <KeyvalLoader />;
+  }
+  console.log({ sources });
+
+  return (
+    <SourcesContainerWrapper>
+      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <SourcesManagedList />
+    </SourcesContainerWrapper>
+  );
+}
diff --git a/frontend/webapp/types/sources.tsx b/frontend/webapp/types/sources.tsx
new file mode 100644
index 000000000..53f44fe6e
--- /dev/null
+++ b/frontend/webapp/types/sources.tsx
@@ -0,0 +1,11 @@
+export interface ManagedSource {
+  kind: string;
+  name: string;
+  namespace: string;
+  languages: [
+    {
+      container_name: string;
+      language: string;
+    }
+  ];
+}

From 21096f49262a5862b82c43f2dc1342fb7872f940 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 13 Mar 2024 17:04:42 +0200
Subject: [PATCH 091/374] chore: wip

---
 .../sources.manage.card.tsx                   | 49 -------------------
 .../sources.manage.list.tsx                   | 24 ---------
 .../sources.manage.styled.tsx                 | 38 --------------
 .../containers/overview/sources/sources.tsx   | 28 -----------
 4 files changed, 139 deletions(-)
 delete mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
 delete mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
 delete mode 100644 frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
 delete mode 100644 frontend/webapp/containers/overview/sources/sources.tsx

diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
deleted file mode 100644
index dbd8fe628..000000000
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system";
-import { CardWrapper } from "./sources.manage.styled";
-import theme from "@/styles/palette";
-import { KIND_COLORS } from "@/styles/global";
-import { SOURCES_LOGOS } from "@/assets/images";
-import { ManagedSource } from "@/types/sources";
-
-const TEXT_STYLE: React.CSSProperties = {
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  width: 224,
-  textAlign: "center",
-};
-const LOGO_STYLE: React.CSSProperties = {
-  padding: 4,
-  backgroundColor: theme.colors.white,
-};
-
-interface SourceManagedCardProps {
-  item: ManagedSource | null;
-}
-const DEPLOYMENT = "Deployment";
-export default function SourceManagedCard({
-  item = null,
-}: SourceManagedCardProps) {
-  return (
-    <CardWrapper>
-      <KeyvalImage
-        src={SOURCES_LOGOS[item?.languages[0].language || ""]}
-        width={56}
-        height={56}
-        style={LOGO_STYLE}
-        alt="source-logo"
-      />
-      <KeyvalText size={18} weight={700} style={TEXT_STYLE}>
-        {item?.name}
-      </KeyvalText>
-      <KeyvalTag
-        title={"item.kind"}
-        color={KIND_COLORS[item?.kind || DEPLOYMENT]}
-      />
-      <KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
-        {item?.namespace}
-      </KeyvalText>
-    </CardWrapper>
-  );
-}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
deleted file mode 100644
index 9d7b4bded..000000000
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled";
-import Empty from "@/assets/images/empty-list.svg";
-import SourceManagedCard from "./sources.manage.card";
-
-export function SourcesManagedList({ data = [1, 1, 1, 1] }) {
-  function renderDestinations() {
-    return data.map((source: any) => <SourceManagedCard />);
-  }
-
-  return (
-    <>
-      <ManagedListWrapper>
-        {data?.length === 0 ? (
-          <EmptyListWrapper>
-            <Empty />
-          </EmptyListWrapper>
-        ) : (
-          renderDestinations()
-        )}
-      </ManagedListWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx b/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
deleted file mode 100644
index cb4f81c3a..000000000
--- a/frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { styled } from "styled-components";
-
-export const CardWrapper = styled.div`
-  display: flex;
-  width: 272px;
-  height: 152px;
-  padding-top: 32px;
-  padding-bottom: 24px;
-  border-radius: 24px;
-  border: 1px solid var(--dark-mode-dark-3, #203548);
-  background: var(--dark-mode-dark-1, #07111a);
-  align-items: center;
-  flex-direction: column;
-  gap: 10px;
-  cursor: pointer;
-  &:hover {
-    background: var(--dark-mode-dark-1, #07111a81);
-  }
-`;
-
-export const EmptyListWrapper = styled.div`
-  width: 100%;
-  margin-top: 130px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const ManagedListWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  overflow-y: scroll;
-  padding: 0px 36px;
-  padding-bottom: 50px;
-  margin-top: 88px;
-`;
diff --git a/frontend/webapp/containers/overview/sources/sources.tsx b/frontend/webapp/containers/overview/sources/sources.tsx
deleted file mode 100644
index 9164e2704..000000000
--- a/frontend/webapp/containers/overview/sources/sources.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-import React from "react";
-import { KeyvalLoader } from "@/design.system";
-import { OVERVIEW, QUERIES } from "@/utils/constants";
-import { useQuery } from "react-query";
-import { getSources } from "@/services";
-import { OverviewHeader, SourcesManagedList } from "@/components/overview";
-import { SourcesContainerWrapper } from "./sources.styled";
-
-export function SourcesContainer() {
-  const {
-    data: sources,
-    refetch,
-    isLoading,
-  } = useQuery([QUERIES.API_SOURCES], getSources);
-
-  if (isLoading) {
-    return <KeyvalLoader />;
-  }
-  console.log({ sources });
-
-  return (
-    <SourcesContainerWrapper>
-      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <SourcesManagedList />
-    </SourcesContainerWrapper>
-  );
-}

From b65cc6410731934bab4206f35bd38f8db606f82a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 22 Jul 2024 13:18:40 +0300
Subject: [PATCH 092/374] chore: init gql

---
 frontend/go.mod                    |   12 +-
 frontend/go.sum                    |   39 +-
 frontend/gqlgen.yml                |   25 +
 frontend/graph/generated.go        | 9665 ++++++++++++++++++++++++++++
 frontend/graph/model/models_gen.go |  377 ++
 frontend/graph/resolver.go         |    7 +
 frontend/graph/schema.graphqls     |  235 +
 frontend/graph/schema.resolvers.go |  105 +
 frontend/main.go                   |   11 +
 9 files changed, 10469 insertions(+), 7 deletions(-)
 create mode 100644 frontend/gqlgen.yml
 create mode 100644 frontend/graph/generated.go
 create mode 100644 frontend/graph/model/models_gen.go
 create mode 100644 frontend/graph/resolver.go
 create mode 100644 frontend/graph/schema.graphqls
 create mode 100644 frontend/graph/schema.resolvers.go

diff --git a/frontend/go.mod b/frontend/go.mod
index 1be157957..889e575e9 100644
--- a/frontend/go.mod
+++ b/frontend/go.mod
@@ -3,6 +3,7 @@ module github.com/odigos-io/odigos/frontend
 go 1.22.0
 
 require (
+	github.com/99designs/gqlgen v0.17.49
 	github.com/gin-contrib/cors v1.4.0
 	github.com/gin-gonic/gin v1.9.1
 	github.com/go-logr/logr v1.4.1
@@ -11,6 +12,7 @@ require (
 	github.com/odigos-io/odigos/destinations v0.0.0-20240223090638-df3328a088bc
 	github.com/odigos-io/odigos/k8sutils v0.0.0
 	github.com/stretchr/testify v1.9.0
+	github.com/vektah/gqlparser/v2 v2.5.16
 	go.opentelemetry.io/collector/component v0.104.0
 	go.opentelemetry.io/collector/confmap v0.104.0
 	go.opentelemetry.io/collector/exporter v0.104.0
@@ -76,6 +78,7 @@ require (
 )
 
 require (
+	github.com/agnivade/levenshtein v1.1.1 // indirect
 	github.com/bytedance/sonic v1.9.2 // indirect
 	github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
@@ -97,19 +100,23 @@ require (
 	github.com/google/gnostic-models v0.6.8 // indirect
 	github.com/google/gofuzz v1.2.0 // indirect
 	github.com/google/uuid v1.6.0 // indirect
+	github.com/gorilla/websocket v1.5.0 // indirect
+	github.com/hashicorp/golang-lru/v2 v2.0.7 // indirect
 	github.com/imdario/mergo v0.3.12 // indirect
 	github.com/josharian/intern v1.0.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
 	github.com/klauspost/cpuid/v2 v2.2.5 // indirect
 	github.com/leodido/go-urn v1.2.4 // indirect
 	github.com/mailru/easyjson v0.7.7 // indirect
-	github.com/mattn/go-colorable v0.1.8 // indirect
-	github.com/mattn/go-isatty v0.0.19 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mitchellh/mapstructure v1.5.0 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 // indirect
 	github.com/pelletier/go-toml/v2 v2.0.8 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
+	github.com/sosodev/duration v1.3.1 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.11 // indirect
@@ -142,4 +149,5 @@ replace (
 	github.com/odigos-io/odigos/common => ../common
 	github.com/odigos-io/odigos/destinations => ../destinations
 	github.com/odigos-io/odigos/k8sutils => ../k8sutils
+
 )
diff --git a/frontend/go.sum b/frontend/go.sum
index 804963192..a548e5325 100644
--- a/frontend/go.sum
+++ b/frontend/go.sum
@@ -1,3 +1,15 @@
+github.com/99designs/gqlgen v0.17.49 h1:b3hNGexHd33fBSAd4NDT/c3NCcQzcAVkknhN9ym36YQ=
+github.com/99designs/gqlgen v0.17.49/go.mod h1:tC8YFVZMed81x7UJ7ORUwXF4Kn6SXuucFqQBhN8+BU0=
+github.com/PuerkitoBio/goquery v1.9.2 h1:4/wZksC3KgkQw7SQgkKotmKljk0M6V8TUvA8Wb4yPeE=
+github.com/PuerkitoBio/goquery v1.9.2/go.mod h1:GHPCaP0ODyyxqcNoFGYlAprUFH81NuRPd0GX3Zu2Mvk=
+github.com/agnivade/levenshtein v1.1.1 h1:QY8M92nrzkmr798gCo3kmMyqXFzdQVpxLlGPRBij0P8=
+github.com/agnivade/levenshtein v1.1.1/go.mod h1:veldBMzWxcCG2ZvUTKD2kJNRdCk5hVbJomOvKkmgYbo=
+github.com/andreyvit/diff v0.0.0-20170406064948-c7f18ee00883 h1:bvNMNQO63//z+xNgfBlViaCIJKLlCJ6/fmUseuG0wVQ=
+github.com/andreyvit/diff v0.0.0-20170406064948-c7f18ee00883/go.mod h1:rCTlJbsFo29Kk6CurOXKm700vrz8f0KW0JNfpkRJY/8=
+github.com/andybalholm/cascadia v1.3.2 h1:3Xi6Dw5lHF15JtdcmAHD3i1+T8plmv7BQ/nsViSLyss=
+github.com/andybalholm/cascadia v1.3.2/go.mod h1:7gtRlve5FxPPgIgX36uWBX58OdBsSS6lUvCFb+h7KvU=
+github.com/arbovm/levenshtein v0.0.0-20160628152529-48b4e1c0c4d0 h1:jfIu9sQUG6Ig+0+Ap1h4unLjW6YQJpKZVmUzxsD4E/Q=
+github.com/arbovm/levenshtein v0.0.0-20160628152529-48b4e1c0c4d0/go.mod h1:t2tdKJDJF9BV14lnkjHmOQgcvEKgtqs5a1N3LNdJhGE=
 github.com/beorn7/perks v1.0.1 h1:VlbKKnNfV8bJzeqoa4cOKqO6bYr3WgKZxO8Z16+hsOM=
 github.com/beorn7/perks v1.0.1/go.mod h1:G2ZrVWU2WbWT9wwq4/hrbKbnv/1ERSJQ0ibhJ6rlkpw=
 github.com/bytedance/sonic v1.5.0/go.mod h1:ED5hyg4y6t3/9Ku1R6dU/4KyJ48DZ4jPhfY1O2AihPM=
@@ -14,6 +26,8 @@ github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ3
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48 h1:fRzb/w+pyskVMQ+UbP35JkH8yB7MYb4q/qhBarqZE6g=
+github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48/go.mod h1:if7Fbed8SFyPtHLHbg49SI7NAdJiC5WIA09pe59rfAA=
 github.com/emicklei/go-restful/v3 v3.11.0 h1:rAQeMHw1c7zTmncogyy8VvRZwtkmkZ4FxERmMY4rD+g=
 github.com/emicklei/go-restful/v3 v3.11.0/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry+4bhvbpWn3mrbc=
 github.com/evanphx/json-patch v4.12.0+incompatible h1:4onqiflcdA9EOZ4RxV643DvftH5pOlLGNtQ5lPWQu84=
@@ -89,10 +103,14 @@ github.com/google/pprof v0.0.0-20210720184732-4bb14d4b1be1 h1:K6RDEckDVWvDI9JAJY
 github.com/google/pprof v0.0.0-20210720184732-4bb14d4b1be1/go.mod h1:kpwsk12EmLew5upagYY7GY0pfYCcupk39gWOCRROcvE=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
+github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/grpc-ecosystem/grpc-gateway/v2 v2.20.0 h1:bkypFPDjIYGfCYD5mRBvpqxfYX1YCS1PXdKYWi8FsN0=
 github.com/grpc-ecosystem/grpc-gateway/v2 v2.20.0/go.mod h1:P+Lt/0by1T8bfcF3z737NnSbmxQAppXMRziHUxPOC8k=
 github.com/hashicorp/go-version v1.7.0 h1:5tqGy27NaOTB8yJKUZELlFAS/LTKJkrmONwQKeRZfjY=
 github.com/hashicorp/go-version v1.7.0/go.mod h1:fltr4n8CU8Ke44wwGCBoEymUuxUHl09ZGVZPK5anwXA=
+github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
+github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
 github.com/imdario/mergo v0.3.12 h1:b6R2BslTbIEToALKP7LxUvijTsNI9TAe80pLWN2g/HU=
 github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
 github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY=
@@ -126,14 +144,18 @@ github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
 github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
 github.com/mailru/easyjson v0.7.7 h1:UGYAvKxe3sBsEDzO8ZeWOSlIQfWFlxbzLZe7hwFURr0=
 github.com/mailru/easyjson v0.7.7/go.mod h1:xzfreul335JAWq5oZzymOObrkdz5UnU4kGfJJLY9Nlc=
-github.com/mattn/go-colorable v0.1.8 h1:c1ghPdyEDarC70ftn0y+A/Ee++9zz8ljHG1b13eJ0s8=
 github.com/mattn/go-colorable v0.1.8/go.mod h1:u6P/XSegPjTcexA+o6vUJrdnUu04hMope9wVRipJSqc=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
 github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
 github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
-github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
-github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mitchellh/copystructure v1.2.0 h1:vpKXTN4ewci03Vljg/q9QvCGUDttBOGBIa15WveJJGw=
 github.com/mitchellh/copystructure v1.2.0/go.mod h1:qLl+cE2AmVv+CoeAwDPye/v+N2HKCj9FbZEVFJRxO9s=
+github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
+github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 github.com/mitchellh/reflectwalk v1.0.2 h1:G2LzWKi524PWgd3mLHV8Y5k7s6XUvT0Gef6zxSIeXaQ=
 github.com/mitchellh/reflectwalk v1.0.2/go.mod h1:mSTlrgnPZtwu0c4WaC2kGObEpuNDbx0jmZXqmk4esnw=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -171,6 +193,10 @@ github.com/rogpeppe/go-internal v1.12.0 h1:exVL4IDcn6na9z1rAb56Vxr+CgyK3nn3O+epU
 github.com/rogpeppe/go-internal v1.12.0/go.mod h1:E+RYuTGaKKdloAfM02xzb0FW3Paa99yedzYV+kq4uf4=
 github.com/rs/cors v1.10.1 h1:L0uuZVXIKlI1SShY2nhFfo44TYvDPQ1w4oFkUJNfhyo=
 github.com/rs/cors v1.10.1/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
+github.com/sergi/go-diff v1.3.1 h1:xkr+Oxo4BOQKmkn/B9eMK0g5Kg/983T9DqqPHwYqD+8=
+github.com/sergi/go-diff v1.3.1/go.mod h1:aMJSSKb2lpPvRNec0+w3fl7LP9IOFzdc9Pa4NFbPK1I=
+github.com/sosodev/duration v1.3.1 h1:qtHBDMQ6lvMQsL15g4aopM4HEfOaYuhWBw3NPTtlqq4=
+github.com/sosodev/duration v1.3.1/go.mod h1:RQIBBX0+fMLc/D9+Jb/fwvVmo0eZvDDEERAikUR6SDg=
 github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
@@ -192,6 +218,8 @@ github.com/ugorji/go v1.2.7/go.mod h1:nF9osbDWLy6bDVv/Rtoh6QgnvNDpmCalQV5urGCCS6
 github.com/ugorji/go/codec v1.2.7/go.mod h1:WGN1fab3R1fzQlVQTkfxVtIBhWDRqOviHU95kRgeqEY=
 github.com/ugorji/go/codec v1.2.11 h1:BMaWp1Bb6fHwEtbplGBGJ498wD+LKlNSl25MjdZY4dU=
 github.com/ugorji/go/codec v1.2.11/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
+github.com/vektah/gqlparser/v2 v2.5.16 h1:1gcmLTvs3JLKXckwCwlUagVn/IlV2bwqle0vJ0vy5p8=
+github.com/vektah/gqlparser/v2 v2.5.16/go.mod h1:1lz1OeCqgQbQepsGxPVywrjdBHW2T08PUS3pJqepRww=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 go.opentelemetry.io/collector v0.104.0 h1:R3zjM4O3K3+ttzsjPV75P80xalxRbwYTURlK0ys7uyo=
@@ -318,6 +346,7 @@ golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210806184541-e5e7981a1069/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.21.0 h1:rF+pYz3DAGSQAxAu1CbC7catZg4ebC4UIeIhKxBZvws=
@@ -336,8 +365,8 @@ golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGm
 golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.0.0-20200619180055-7c47624df98f/go.mod h1:EkVYQZoAsY45+roYkvgYkIh4xh/qjgUK9TdY2XT94GE=
 golang.org/x/tools v0.0.0-20210106214847-113979e3529a/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
-golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d h1:vU5i/LfpvrRCpgM/VPfJLg5KjxD3E+hfT1SH+d9zLwg=
-golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
+golang.org/x/tools v0.22.0 h1:gqSGLZqv+AI9lIQzniJ0nZDRG5GBPsSi+DRNHWNz6yA=
+golang.org/x/tools v0.22.0/go.mod h1:aCwcsjqvq7Yqt6TNyX7QMU2enbQ/Gt0bo6krSeEri+c=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
new file mode 100644
index 000000000..f54df5faf
--- /dev/null
+++ b/frontend/gqlgen.yml
@@ -0,0 +1,25 @@
+# Where are all the schema files located? globs are supported eg  src/**/*.graphqls
+schema:
+  - graph/*.graphqls
+
+# Where should the generated server code go?
+exec:
+  filename: graph/generated.go
+  package: graph
+
+# Uncomment to enable federation
+# federation:
+#   filename: graph/federation.go
+#   package: graph
+
+# Where should any generated models go?
+model:
+  filename: graph/model/models_gen.go
+  package: model
+
+# Where should the resolver implementations go?
+resolver:
+  layout: follow-schema
+  dir: graph
+  package: graph
+  filename_template: '{name}.resolvers.go'
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
new file mode 100644
index 000000000..06d30cc55
--- /dev/null
+++ b/frontend/graph/generated.go
@@ -0,0 +1,9665 @@
+// Code generated by github.com/99designs/gqlgen, DO NOT EDIT.
+
+package graph
+
+import (
+	"bytes"
+	"context"
+	"embed"
+	"errors"
+	"fmt"
+	"strconv"
+	"sync"
+	"sync/atomic"
+
+	"github.com/99designs/gqlgen/graphql"
+	"github.com/99designs/gqlgen/graphql/introspection"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	gqlparser "github.com/vektah/gqlparser/v2"
+	"github.com/vektah/gqlparser/v2/ast"
+)
+
+// region    ************************** generated!.gotpl **************************
+
+// NewExecutableSchema creates an ExecutableSchema from the ResolverRoot interface.
+func NewExecutableSchema(cfg Config) graphql.ExecutableSchema {
+	return &executableSchema{
+		schema:     cfg.Schema,
+		resolvers:  cfg.Resolvers,
+		directives: cfg.Directives,
+		complexity: cfg.Complexity,
+	}
+}
+
+type Config struct {
+	Schema     *ast.Schema
+	Resolvers  ResolverRoot
+	Directives DirectiveRoot
+	Complexity ComplexityRoot
+}
+
+type ResolverRoot interface {
+	Mutation() MutationResolver
+	Query() QueryResolver
+}
+
+type DirectiveRoot struct {
+}
+
+type ComplexityRoot struct {
+	ActualAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Kind    func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+	}
+
+	ActualDestination struct {
+		ExportedSignals func(childComplexity int) int
+		Fields          func(childComplexity int) int
+		ID              func(childComplexity int) int
+		Name            func(childComplexity int) int
+		Type            func(childComplexity int) int
+	}
+
+	ComputePlatform struct {
+		ActualActions       func(childComplexity int) int
+		ActualDestinations  func(childComplexity int) int
+		ComputePlatformType func(childComplexity int) int
+		ID                  func(childComplexity int) int
+		K8sActualNamespace  func(childComplexity int, name string) int
+		K8sActualNamespaces func(childComplexity int) int
+		K8sActualSources    func(childComplexity int) int
+		Name                func(childComplexity int) int
+	}
+
+	DesiredDestination struct {
+		ComputePlatforms func(childComplexity int) int
+		ExportSignals    func(childComplexity int) int
+		Fields           func(childComplexity int) int
+		ID               func(childComplexity int) int
+		Name             func(childComplexity int) int
+		Type             func(childComplexity int) int
+	}
+
+	DestinationSpecField struct {
+		Name  func(childComplexity int) int
+		Value func(childComplexity int) int
+	}
+
+	DestinationType struct {
+		Category         func(childComplexity int) int
+		DisplayName      func(childComplexity int) int
+		Fields           func(childComplexity int) int
+		Image            func(childComplexity int) int
+		Name             func(childComplexity int) int
+		SupportedSignals func(childComplexity int) int
+	}
+
+	DestinationTypeCategory struct {
+		DestinationTypes func(childComplexity int) int
+		Name             func(childComplexity int) int
+	}
+
+	DestinationTypeField struct {
+		ComponentProps func(childComplexity int) int
+		ComponentType  func(childComplexity int) int
+		DisplayName    func(childComplexity int) int
+		InitialValue   func(childComplexity int) int
+		Name           func(childComplexity int) int
+		Secret         func(childComplexity int) int
+		ThumbnailURL   func(childComplexity int) int
+		VideoURL       func(childComplexity int) int
+	}
+
+	K8sActualNamespace struct {
+		AutoInstrumented func(childComplexity int) int
+		K8sActualSources func(childComplexity int) int
+		Name             func(childComplexity int) int
+	}
+
+	K8sActualSource struct {
+		AutoInstrumented           func(childComplexity int) int
+		CreationTimestamp          func(childComplexity int) int
+		HasInstrumentedApplication func(childComplexity int) int
+		Kind                       func(childComplexity int) int
+		Name                       func(childComplexity int) int
+		Namespace                  func(childComplexity int) int
+		NumberOfInstances          func(childComplexity int) int
+		ServiceName                func(childComplexity int) int
+	}
+
+	K8sActualSourceRuntimeInfo struct {
+		MainContainer func(childComplexity int) int
+	}
+
+	K8sActualSourceRuntimeInfoContainer struct {
+		ContainerName func(childComplexity int) int
+		Language      func(childComplexity int) int
+	}
+
+	Mutation struct {
+		ApplyDesiredDestinationToComputePlatform    func(childComplexity int, cpID string, destinationID string) int
+		ApplyDesiredNamespace                       func(childComplexity int, cpID string, nsID model.K8sNamespaceID, ns model.K8sDesiredNamespaceInput) int
+		ApplyDesiredSource                          func(childComplexity int, cpID string, sourceID model.K8sSourceID, source model.K8sDesiredSourceInput) int
+		CreateDesiredAction                         func(childComplexity int, cpID string, action model.DesiredActionInput) int
+		CreateDesiredDestination                    func(childComplexity int, destinationType string, destination model.DesiredDestinationInput) int
+		DeleteActualAction                          func(childComplexity int, cpID string, actionID string, kind string) int
+		DeleteDesiredDestination                    func(childComplexity int, destinationID string) int
+		DeleteDesiredNamespace                      func(childComplexity int, cpID string, nsID model.K8sNamespaceID) int
+		DeleteDesiredSource                         func(childComplexity int, cpID string, sourceID model.K8sSourceID) int
+		RemoveDesiredDestinationFromComputePlatform func(childComplexity int, cpID string, destinationID string) int
+		UpdateDesiredAction                         func(childComplexity int, cpID string, actionID string, action model.DesiredActionInput) int
+		UpdateDesiredDestination                    func(childComplexity int, destinationID string, destination model.DesiredDestinationInput) int
+	}
+
+	Query struct {
+		ComputePlatform           func(childComplexity int, cpID string) int
+		ComputePlatforms          func(childComplexity int) int
+		DesiredDestinations       func(childComplexity int) int
+		DestinationTypeCategories func(childComplexity int) int
+	}
+}
+
+type MutationResolver interface {
+	ApplyDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID, ns model.K8sDesiredNamespaceInput) (bool, error)
+	DeleteDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID) (bool, error)
+	ApplyDesiredSource(ctx context.Context, cpID string, sourceID model.K8sSourceID, source model.K8sDesiredSourceInput) (bool, error)
+	DeleteDesiredSource(ctx context.Context, cpID string, sourceID model.K8sSourceID) (bool, error)
+	CreateDesiredDestination(ctx context.Context, destinationType string, destination model.DesiredDestinationInput) (*model.DesiredDestination, error)
+	UpdateDesiredDestination(ctx context.Context, destinationID string, destination model.DesiredDestinationInput) (*model.DesiredDestination, error)
+	DeleteDesiredDestination(ctx context.Context, destinationID string) (bool, error)
+	ApplyDesiredDestinationToComputePlatform(ctx context.Context, cpID string, destinationID string) (bool, error)
+	RemoveDesiredDestinationFromComputePlatform(ctx context.Context, cpID string, destinationID string) (bool, error)
+	CreateDesiredAction(ctx context.Context, cpID string, action model.DesiredActionInput) (bool, error)
+	UpdateDesiredAction(ctx context.Context, cpID string, actionID string, action model.DesiredActionInput) (bool, error)
+	DeleteActualAction(ctx context.Context, cpID string, actionID string, kind string) (bool, error)
+}
+type QueryResolver interface {
+	ComputePlatform(ctx context.Context, cpID string) (*model.ComputePlatform, error)
+	ComputePlatforms(ctx context.Context) ([]*model.ComputePlatform, error)
+	DestinationTypeCategories(ctx context.Context) ([]*model.DestinationTypeCategory, error)
+	DesiredDestinations(ctx context.Context) ([]*model.DesiredDestination, error)
+}
+
+type executableSchema struct {
+	schema     *ast.Schema
+	resolvers  ResolverRoot
+	directives DirectiveRoot
+	complexity ComplexityRoot
+}
+
+func (e *executableSchema) Schema() *ast.Schema {
+	if e.schema != nil {
+		return e.schema
+	}
+	return parsedSchema
+}
+
+func (e *executableSchema) Complexity(typeName, field string, childComplexity int, rawArgs map[string]interface{}) (int, bool) {
+	ec := executionContext{nil, e, 0, 0, nil}
+	_ = ec
+	switch typeName + "." + field {
+
+	case "ActualAction.details":
+		if e.complexity.ActualAction.Details == nil {
+			break
+		}
+
+		return e.complexity.ActualAction.Details(childComplexity), true
+
+	case "ActualAction.disable":
+		if e.complexity.ActualAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.ActualAction.Disable(childComplexity), true
+
+	case "ActualAction.id":
+		if e.complexity.ActualAction.ID == nil {
+			break
+		}
+
+		return e.complexity.ActualAction.ID(childComplexity), true
+
+	case "ActualAction.kind":
+		if e.complexity.ActualAction.Kind == nil {
+			break
+		}
+
+		return e.complexity.ActualAction.Kind(childComplexity), true
+
+	case "ActualAction.name":
+		if e.complexity.ActualAction.Name == nil {
+			break
+		}
+
+		return e.complexity.ActualAction.Name(childComplexity), true
+
+	case "ActualAction.notes":
+		if e.complexity.ActualAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.ActualAction.Notes(childComplexity), true
+
+	case "ActualAction.signals":
+		if e.complexity.ActualAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.ActualAction.Signals(childComplexity), true
+
+	case "ActualDestination.exportedSignals":
+		if e.complexity.ActualDestination.ExportedSignals == nil {
+			break
+		}
+
+		return e.complexity.ActualDestination.ExportedSignals(childComplexity), true
+
+	case "ActualDestination.fields":
+		if e.complexity.ActualDestination.Fields == nil {
+			break
+		}
+
+		return e.complexity.ActualDestination.Fields(childComplexity), true
+
+	case "ActualDestination.id":
+		if e.complexity.ActualDestination.ID == nil {
+			break
+		}
+
+		return e.complexity.ActualDestination.ID(childComplexity), true
+
+	case "ActualDestination.name":
+		if e.complexity.ActualDestination.Name == nil {
+			break
+		}
+
+		return e.complexity.ActualDestination.Name(childComplexity), true
+
+	case "ActualDestination.type":
+		if e.complexity.ActualDestination.Type == nil {
+			break
+		}
+
+		return e.complexity.ActualDestination.Type(childComplexity), true
+
+	case "ComputePlatform.actualActions":
+		if e.complexity.ComputePlatform.ActualActions == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.ActualActions(childComplexity), true
+
+	case "ComputePlatform.actualDestinations":
+		if e.complexity.ComputePlatform.ActualDestinations == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.ActualDestinations(childComplexity), true
+
+	case "ComputePlatform.computePlatformType":
+		if e.complexity.ComputePlatform.ComputePlatformType == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.ComputePlatformType(childComplexity), true
+
+	case "ComputePlatform.id":
+		if e.complexity.ComputePlatform.ID == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.ID(childComplexity), true
+
+	case "ComputePlatform.k8sActualNamespace":
+		if e.complexity.ComputePlatform.K8sActualNamespace == nil {
+			break
+		}
+
+		args, err := ec.field_ComputePlatform_k8sActualNamespace_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.ComputePlatform.K8sActualNamespace(childComplexity, args["name"].(string)), true
+
+	case "ComputePlatform.k8sActualNamespaces":
+		if e.complexity.ComputePlatform.K8sActualNamespaces == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.K8sActualNamespaces(childComplexity), true
+
+	case "ComputePlatform.k8sActualSources":
+		if e.complexity.ComputePlatform.K8sActualSources == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.K8sActualSources(childComplexity), true
+
+	case "ComputePlatform.name":
+		if e.complexity.ComputePlatform.Name == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.Name(childComplexity), true
+
+	case "DesiredDestination.computePlatforms":
+		if e.complexity.DesiredDestination.ComputePlatforms == nil {
+			break
+		}
+
+		return e.complexity.DesiredDestination.ComputePlatforms(childComplexity), true
+
+	case "DesiredDestination.exportSignals":
+		if e.complexity.DesiredDestination.ExportSignals == nil {
+			break
+		}
+
+		return e.complexity.DesiredDestination.ExportSignals(childComplexity), true
+
+	case "DesiredDestination.fields":
+		if e.complexity.DesiredDestination.Fields == nil {
+			break
+		}
+
+		return e.complexity.DesiredDestination.Fields(childComplexity), true
+
+	case "DesiredDestination.id":
+		if e.complexity.DesiredDestination.ID == nil {
+			break
+		}
+
+		return e.complexity.DesiredDestination.ID(childComplexity), true
+
+	case "DesiredDestination.name":
+		if e.complexity.DesiredDestination.Name == nil {
+			break
+		}
+
+		return e.complexity.DesiredDestination.Name(childComplexity), true
+
+	case "DesiredDestination.type":
+		if e.complexity.DesiredDestination.Type == nil {
+			break
+		}
+
+		return e.complexity.DesiredDestination.Type(childComplexity), true
+
+	case "DestinationSpecField.name":
+		if e.complexity.DestinationSpecField.Name == nil {
+			break
+		}
+
+		return e.complexity.DestinationSpecField.Name(childComplexity), true
+
+	case "DestinationSpecField.value":
+		if e.complexity.DestinationSpecField.Value == nil {
+			break
+		}
+
+		return e.complexity.DestinationSpecField.Value(childComplexity), true
+
+	case "DestinationType.category":
+		if e.complexity.DestinationType.Category == nil {
+			break
+		}
+
+		return e.complexity.DestinationType.Category(childComplexity), true
+
+	case "DestinationType.displayName":
+		if e.complexity.DestinationType.DisplayName == nil {
+			break
+		}
+
+		return e.complexity.DestinationType.DisplayName(childComplexity), true
+
+	case "DestinationType.fields":
+		if e.complexity.DestinationType.Fields == nil {
+			break
+		}
+
+		return e.complexity.DestinationType.Fields(childComplexity), true
+
+	case "DestinationType.image":
+		if e.complexity.DestinationType.Image == nil {
+			break
+		}
+
+		return e.complexity.DestinationType.Image(childComplexity), true
+
+	case "DestinationType.name":
+		if e.complexity.DestinationType.Name == nil {
+			break
+		}
+
+		return e.complexity.DestinationType.Name(childComplexity), true
+
+	case "DestinationType.supportedSignals":
+		if e.complexity.DestinationType.SupportedSignals == nil {
+			break
+		}
+
+		return e.complexity.DestinationType.SupportedSignals(childComplexity), true
+
+	case "DestinationTypeCategory.destinationTypes":
+		if e.complexity.DestinationTypeCategory.DestinationTypes == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeCategory.DestinationTypes(childComplexity), true
+
+	case "DestinationTypeCategory.name":
+		if e.complexity.DestinationTypeCategory.Name == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeCategory.Name(childComplexity), true
+
+	case "DestinationTypeField.componentProps":
+		if e.complexity.DestinationTypeField.ComponentProps == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeField.ComponentProps(childComplexity), true
+
+	case "DestinationTypeField.componentType":
+		if e.complexity.DestinationTypeField.ComponentType == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeField.ComponentType(childComplexity), true
+
+	case "DestinationTypeField.displayName":
+		if e.complexity.DestinationTypeField.DisplayName == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeField.DisplayName(childComplexity), true
+
+	case "DestinationTypeField.initialValue":
+		if e.complexity.DestinationTypeField.InitialValue == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeField.InitialValue(childComplexity), true
+
+	case "DestinationTypeField.name":
+		if e.complexity.DestinationTypeField.Name == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeField.Name(childComplexity), true
+
+	case "DestinationTypeField.secret":
+		if e.complexity.DestinationTypeField.Secret == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeField.Secret(childComplexity), true
+
+	case "DestinationTypeField.thumbnailURL":
+		if e.complexity.DestinationTypeField.ThumbnailURL == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeField.ThumbnailURL(childComplexity), true
+
+	case "DestinationTypeField.videoURL":
+		if e.complexity.DestinationTypeField.VideoURL == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypeField.VideoURL(childComplexity), true
+
+	case "K8sActualNamespace.autoInstrumented":
+		if e.complexity.K8sActualNamespace.AutoInstrumented == nil {
+			break
+		}
+
+		return e.complexity.K8sActualNamespace.AutoInstrumented(childComplexity), true
+
+	case "K8sActualNamespace.k8sActualSources":
+		if e.complexity.K8sActualNamespace.K8sActualSources == nil {
+			break
+		}
+
+		return e.complexity.K8sActualNamespace.K8sActualSources(childComplexity), true
+
+	case "K8sActualNamespace.name":
+		if e.complexity.K8sActualNamespace.Name == nil {
+			break
+		}
+
+		return e.complexity.K8sActualNamespace.Name(childComplexity), true
+
+	case "K8sActualSource.autoInstrumented":
+		if e.complexity.K8sActualSource.AutoInstrumented == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.AutoInstrumented(childComplexity), true
+
+	case "K8sActualSource.creationTimestamp":
+		if e.complexity.K8sActualSource.CreationTimestamp == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.CreationTimestamp(childComplexity), true
+
+	case "K8sActualSource.hasInstrumentedApplication":
+		if e.complexity.K8sActualSource.HasInstrumentedApplication == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.HasInstrumentedApplication(childComplexity), true
+
+	case "K8sActualSource.kind":
+		if e.complexity.K8sActualSource.Kind == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.Kind(childComplexity), true
+
+	case "K8sActualSource.name":
+		if e.complexity.K8sActualSource.Name == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.Name(childComplexity), true
+
+	case "K8sActualSource.namespace":
+		if e.complexity.K8sActualSource.Namespace == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.Namespace(childComplexity), true
+
+	case "K8sActualSource.numberOfInstances":
+		if e.complexity.K8sActualSource.NumberOfInstances == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.NumberOfInstances(childComplexity), true
+
+	case "K8sActualSource.serviceName":
+		if e.complexity.K8sActualSource.ServiceName == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.ServiceName(childComplexity), true
+
+	case "K8sActualSourceRuntimeInfo.mainContainer":
+		if e.complexity.K8sActualSourceRuntimeInfo.MainContainer == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSourceRuntimeInfo.MainContainer(childComplexity), true
+
+	case "K8sActualSourceRuntimeInfoContainer.containerName":
+		if e.complexity.K8sActualSourceRuntimeInfoContainer.ContainerName == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSourceRuntimeInfoContainer.ContainerName(childComplexity), true
+
+	case "K8sActualSourceRuntimeInfoContainer.language":
+		if e.complexity.K8sActualSourceRuntimeInfoContainer.Language == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSourceRuntimeInfoContainer.Language(childComplexity), true
+
+	case "Mutation.applyDesiredDestinationToComputePlatform":
+		if e.complexity.Mutation.ApplyDesiredDestinationToComputePlatform == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_applyDesiredDestinationToComputePlatform_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.ApplyDesiredDestinationToComputePlatform(childComplexity, args["cpId"].(string), args["destinationId"].(string)), true
+
+	case "Mutation.applyDesiredNamespace":
+		if e.complexity.Mutation.ApplyDesiredNamespace == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_applyDesiredNamespace_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.ApplyDesiredNamespace(childComplexity, args["cpId"].(string), args["nsId"].(model.K8sNamespaceID), args["ns"].(model.K8sDesiredNamespaceInput)), true
+
+	case "Mutation.applyDesiredSource":
+		if e.complexity.Mutation.ApplyDesiredSource == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_applyDesiredSource_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.ApplyDesiredSource(childComplexity, args["cpId"].(string), args["sourceId"].(model.K8sSourceID), args["source"].(model.K8sDesiredSourceInput)), true
+
+	case "Mutation.createDesiredAction":
+		if e.complexity.Mutation.CreateDesiredAction == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_createDesiredAction_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.CreateDesiredAction(childComplexity, args["cpId"].(string), args["action"].(model.DesiredActionInput)), true
+
+	case "Mutation.createDesiredDestination":
+		if e.complexity.Mutation.CreateDesiredDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_createDesiredDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.CreateDesiredDestination(childComplexity, args["destinationType"].(string), args["destination"].(model.DesiredDestinationInput)), true
+
+	case "Mutation.deleteActualAction":
+		if e.complexity.Mutation.DeleteActualAction == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_deleteActualAction_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.DeleteActualAction(childComplexity, args["cpId"].(string), args["actionId"].(string), args["kind"].(string)), true
+
+	case "Mutation.deleteDesiredDestination":
+		if e.complexity.Mutation.DeleteDesiredDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_deleteDesiredDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.DeleteDesiredDestination(childComplexity, args["destinationId"].(string)), true
+
+	case "Mutation.deleteDesiredNamespace":
+		if e.complexity.Mutation.DeleteDesiredNamespace == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_deleteDesiredNamespace_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.DeleteDesiredNamespace(childComplexity, args["cpId"].(string), args["nsId"].(model.K8sNamespaceID)), true
+
+	case "Mutation.deleteDesiredSource":
+		if e.complexity.Mutation.DeleteDesiredSource == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_deleteDesiredSource_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.DeleteDesiredSource(childComplexity, args["cpId"].(string), args["sourceId"].(model.K8sSourceID)), true
+
+	case "Mutation.removeDesiredDestinationFromComputePlatform":
+		if e.complexity.Mutation.RemoveDesiredDestinationFromComputePlatform == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_removeDesiredDestinationFromComputePlatform_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.RemoveDesiredDestinationFromComputePlatform(childComplexity, args["cpId"].(string), args["destinationId"].(string)), true
+
+	case "Mutation.updateDesiredAction":
+		if e.complexity.Mutation.UpdateDesiredAction == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_updateDesiredAction_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.UpdateDesiredAction(childComplexity, args["cpId"].(string), args["actionId"].(string), args["action"].(model.DesiredActionInput)), true
+
+	case "Mutation.updateDesiredDestination":
+		if e.complexity.Mutation.UpdateDesiredDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_updateDesiredDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.UpdateDesiredDestination(childComplexity, args["destinationId"].(string), args["destination"].(model.DesiredDestinationInput)), true
+
+	case "Query.computePlatform":
+		if e.complexity.Query.ComputePlatform == nil {
+			break
+		}
+
+		args, err := ec.field_Query_computePlatform_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Query.ComputePlatform(childComplexity, args["cpId"].(string)), true
+
+	case "Query.computePlatforms":
+		if e.complexity.Query.ComputePlatforms == nil {
+			break
+		}
+
+		return e.complexity.Query.ComputePlatforms(childComplexity), true
+
+	case "Query.desiredDestinations":
+		if e.complexity.Query.DesiredDestinations == nil {
+			break
+		}
+
+		return e.complexity.Query.DesiredDestinations(childComplexity), true
+
+	case "Query.destinationTypeCategories":
+		if e.complexity.Query.DestinationTypeCategories == nil {
+			break
+		}
+
+		return e.complexity.Query.DestinationTypeCategories(childComplexity), true
+
+	}
+	return 0, false
+}
+
+func (e *executableSchema) Exec(ctx context.Context) graphql.ResponseHandler {
+	rc := graphql.GetOperationContext(ctx)
+	ec := executionContext{rc, e, 0, 0, make(chan graphql.DeferredResult)}
+	inputUnmarshalMap := graphql.BuildUnmarshalerMap(
+		ec.unmarshalInputDesiredActionInput,
+		ec.unmarshalInputDesiredDestinationFieldInput,
+		ec.unmarshalInputDesiredDestinationInput,
+		ec.unmarshalInputK8sDesiredNamespaceInput,
+		ec.unmarshalInputK8sDesiredSourceInput,
+		ec.unmarshalInputK8sNamespaceId,
+		ec.unmarshalInputK8sSourceId,
+		ec.unmarshalInputWorkloadInput,
+	)
+	first := true
+
+	switch rc.Operation.Operation {
+	case ast.Query:
+		return func(ctx context.Context) *graphql.Response {
+			var response graphql.Response
+			var data graphql.Marshaler
+			if first {
+				first = false
+				ctx = graphql.WithUnmarshalerMap(ctx, inputUnmarshalMap)
+				data = ec._Query(ctx, rc.Operation.SelectionSet)
+			} else {
+				if atomic.LoadInt32(&ec.pendingDeferred) > 0 {
+					result := <-ec.deferredResults
+					atomic.AddInt32(&ec.pendingDeferred, -1)
+					data = result.Result
+					response.Path = result.Path
+					response.Label = result.Label
+					response.Errors = result.Errors
+				} else {
+					return nil
+				}
+			}
+			var buf bytes.Buffer
+			data.MarshalGQL(&buf)
+			response.Data = buf.Bytes()
+			if atomic.LoadInt32(&ec.deferred) > 0 {
+				hasNext := atomic.LoadInt32(&ec.pendingDeferred) > 0
+				response.HasNext = &hasNext
+			}
+
+			return &response
+		}
+	case ast.Mutation:
+		return func(ctx context.Context) *graphql.Response {
+			if !first {
+				return nil
+			}
+			first = false
+			ctx = graphql.WithUnmarshalerMap(ctx, inputUnmarshalMap)
+			data := ec._Mutation(ctx, rc.Operation.SelectionSet)
+			var buf bytes.Buffer
+			data.MarshalGQL(&buf)
+
+			return &graphql.Response{
+				Data: buf.Bytes(),
+			}
+		}
+
+	default:
+		return graphql.OneShot(graphql.ErrorResponse(ctx, "unsupported GraphQL operation"))
+	}
+}
+
+type executionContext struct {
+	*graphql.OperationContext
+	*executableSchema
+	deferred        int32
+	pendingDeferred int32
+	deferredResults chan graphql.DeferredResult
+}
+
+func (ec *executionContext) processDeferredGroup(dg graphql.DeferredGroup) {
+	atomic.AddInt32(&ec.pendingDeferred, 1)
+	go func() {
+		ctx := graphql.WithFreshResponseContext(dg.Context)
+		dg.FieldSet.Dispatch(ctx)
+		ds := graphql.DeferredResult{
+			Path:   dg.Path,
+			Label:  dg.Label,
+			Result: dg.FieldSet,
+			Errors: graphql.GetErrors(ctx),
+		}
+		// null fields should bubble up
+		if dg.FieldSet.Invalids > 0 {
+			ds.Result = graphql.Null
+		}
+		ec.deferredResults <- ds
+	}()
+}
+
+func (ec *executionContext) introspectSchema() (*introspection.Schema, error) {
+	if ec.DisableIntrospection {
+		return nil, errors.New("introspection disabled")
+	}
+	return introspection.WrapSchema(ec.Schema()), nil
+}
+
+func (ec *executionContext) introspectType(name string) (*introspection.Type, error) {
+	if ec.DisableIntrospection {
+		return nil, errors.New("introspection disabled")
+	}
+	return introspection.WrapTypeFromDef(ec.Schema(), ec.Schema().Types[name]), nil
+}
+
+//go:embed "schema.graphqls"
+var sourcesFS embed.FS
+
+func sourceData(filename string) string {
+	data, err := sourcesFS.ReadFile(filename)
+	if err != nil {
+		panic(fmt.Sprintf("codegen problem: %s not available", filename))
+	}
+	return string(data)
+}
+
+var sources = []*ast.Source{
+	{Name: "schema.graphqls", Input: sourceData("schema.graphqls"), BuiltIn: false},
+}
+var parsedSchema = gqlparser.MustLoadSchema(sources...)
+
+// endregion ************************** generated!.gotpl **************************
+
+// region    ***************************** args.gotpl *****************************
+
+func (ec *executionContext) field_ComputePlatform_k8sActualNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["name"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["name"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_applyDesiredDestinationToComputePlatform_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 string
+	if tmp, ok := rawArgs["destinationId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationId"))
+		arg1, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destinationId"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_applyDesiredNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 model.K8sNamespaceID
+	if tmp, ok := rawArgs["nsId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("nsId"))
+		arg1, err = ec.unmarshalNK8sNamespaceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sNamespaceID(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["nsId"] = arg1
+	var arg2 model.K8sDesiredNamespaceInput
+	if tmp, ok := rawArgs["ns"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("ns"))
+		arg2, err = ec.unmarshalNK8sDesiredNamespaceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredNamespaceInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["ns"] = arg2
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_applyDesiredSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 model.K8sSourceID
+	if tmp, ok := rawArgs["sourceId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("sourceId"))
+		arg1, err = ec.unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["sourceId"] = arg1
+	var arg2 model.K8sDesiredSourceInput
+	if tmp, ok := rawArgs["source"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("source"))
+		arg2, err = ec.unmarshalNK8sDesiredSourceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredSourceInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["source"] = arg2
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_createDesiredAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 model.DesiredActionInput
+	if tmp, ok := rawArgs["action"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("action"))
+		arg1, err = ec.unmarshalNDesiredActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredActionInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["action"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_createDesiredDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["destinationType"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationType"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destinationType"] = arg0
+	var arg1 model.DesiredDestinationInput
+	if tmp, ok := rawArgs["destination"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
+		arg1, err = ec.unmarshalNDesiredDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destination"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_deleteActualAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 string
+	if tmp, ok := rawArgs["actionId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("actionId"))
+		arg1, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["actionId"] = arg1
+	var arg2 string
+	if tmp, ok := rawArgs["kind"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+		arg2, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["kind"] = arg2
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_deleteDesiredDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["destinationId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destinationId"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_deleteDesiredNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 model.K8sNamespaceID
+	if tmp, ok := rawArgs["nsId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("nsId"))
+		arg1, err = ec.unmarshalNK8sNamespaceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sNamespaceID(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["nsId"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_deleteDesiredSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 model.K8sSourceID
+	if tmp, ok := rawArgs["sourceId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("sourceId"))
+		arg1, err = ec.unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["sourceId"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_removeDesiredDestinationFromComputePlatform_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 string
+	if tmp, ok := rawArgs["destinationId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationId"))
+		arg1, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destinationId"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_updateDesiredAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	var arg1 string
+	if tmp, ok := rawArgs["actionId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("actionId"))
+		arg1, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["actionId"] = arg1
+	var arg2 model.DesiredActionInput
+	if tmp, ok := rawArgs["action"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("action"))
+		arg2, err = ec.unmarshalNDesiredActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredActionInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["action"] = arg2
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_updateDesiredDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["destinationId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destinationId"] = arg0
+	var arg1 model.DesiredDestinationInput
+	if tmp, ok := rawArgs["destination"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
+		arg1, err = ec.unmarshalNDesiredDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destination"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Query___type_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["name"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["name"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Query_computePlatform_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["cpId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["cpId"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field___Type_enumValues_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 bool
+	if tmp, ok := rawArgs["includeDeprecated"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("includeDeprecated"))
+		arg0, err = ec.unmarshalOBoolean2bool(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["includeDeprecated"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field___Type_fields_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 bool
+	if tmp, ok := rawArgs["includeDeprecated"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("includeDeprecated"))
+		arg0, err = ec.unmarshalOBoolean2bool(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["includeDeprecated"] = arg0
+	return args, nil
+}
+
+// endregion ***************************** args.gotpl *****************************
+
+// region    ************************** directives.gotpl **************************
+
+// endregion ************************** directives.gotpl **************************
+
+// region    **************************** field.gotpl *****************************
+
+func (ec *executionContext) _ActualAction_id(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualAction_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualAction_kind(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualAction_kind(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Kind, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualAction_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualAction_name(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualAction_notes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Notes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualAction_disable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Disable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualAction_details(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualDestination_id(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualDestination_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualDestination_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualDestination_name(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualDestination_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualDestination_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualDestination_type(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualDestination_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.DestinationType)
+	fc.Result = res
+	return ec.marshalNDestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualDestination_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "category":
+				return ec.fieldContext_DestinationType_category(ctx, field)
+			case "name":
+				return ec.fieldContext_DestinationType_name(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationType_displayName(ctx, field)
+			case "image":
+				return ec.fieldContext_DestinationType_image(ctx, field)
+			case "supportedSignals":
+				return ec.fieldContext_DestinationType_supportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_DestinationType_fields(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationType", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualDestination_exportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualDestination_exportedSignals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ExportedSignals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualDestination_exportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ActualDestination_fields(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ActualDestination_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.DestinationSpecField)
+	fc.Result = res
+	return ec.marshalNDestinationSpecField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecFieldᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ActualDestination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ActualDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_DestinationSpecField_name(ctx, field)
+			case "value":
+				return ec.fieldContext_DestinationSpecField_value(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationSpecField", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_id(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_name(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComputePlatformType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ComputePlatformType)
+	fc.Result = res
+	return ec.marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_computePlatformType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ComputePlatformType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.K8sActualNamespace, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.K8sActualNamespace)
+	fc.Result = res
+	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_ComputePlatform_k8sActualNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.K8sActualNamespaces, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualNamespace)
+	fc.Result = res
+	return ec.marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.K8sActualSources, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "creationTimestamp":
+				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "hasInstrumentedApplication":
+				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_actualDestinations(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_actualDestinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ActualDestinations, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.ActualDestination)
+	fc.Result = res
+	return ec.marshalNActualDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_actualDestinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_ActualDestination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_ActualDestination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_ActualDestination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_ActualDestination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_ActualDestination_fields(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ActualDestination", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_actualActions(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_actualActions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ActualActions, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.ActualAction)
+	fc.Result = res
+	return ec.marshalNActualAction2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualAction(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_actualActions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_ActualAction_id(ctx, field)
+			case "kind":
+				return ec.fieldContext_ActualAction_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_ActualAction_name(ctx, field)
+			case "notes":
+				return ec.fieldContext_ActualAction_notes(ctx, field)
+			case "disable":
+				return ec.fieldContext_ActualAction_disable(ctx, field)
+			case "signals":
+				return ec.fieldContext_ActualAction_signals(ctx, field)
+			case "details":
+				return ec.fieldContext_ActualAction_details(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ActualAction", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DesiredDestination_id(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DesiredDestination_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DesiredDestination_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DesiredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DesiredDestination_name(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DesiredDestination_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DesiredDestination_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DesiredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DesiredDestination_type(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DesiredDestination_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.DestinationType)
+	fc.Result = res
+	return ec.marshalNDestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DesiredDestination_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DesiredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "category":
+				return ec.fieldContext_DestinationType_category(ctx, field)
+			case "name":
+				return ec.fieldContext_DestinationType_name(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationType_displayName(ctx, field)
+			case "image":
+				return ec.fieldContext_DestinationType_image(ctx, field)
+			case "supportedSignals":
+				return ec.fieldContext_DestinationType_supportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_DestinationType_fields(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationType", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DesiredDestination_exportSignals(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DesiredDestination_exportSignals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ExportSignals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DesiredDestination_exportSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DesiredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DesiredDestination_fields(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DesiredDestination_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.DestinationSpecField)
+	fc.Result = res
+	return ec.marshalNDestinationSpecField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecFieldᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DesiredDestination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DesiredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_DestinationSpecField_name(ctx, field)
+			case "value":
+				return ec.fieldContext_DestinationSpecField_value(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationSpecField", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DesiredDestination_computePlatforms(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DesiredDestination_computePlatforms(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComputePlatforms, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.ComputePlatform)
+	fc.Result = res
+	return ec.marshalNComputePlatform2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DesiredDestination_computePlatforms(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DesiredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_ComputePlatform_id(ctx, field)
+			case "name":
+				return ec.fieldContext_ComputePlatform_name(ctx, field)
+			case "computePlatformType":
+				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+			case "k8sActualNamespace":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+			case "k8sActualNamespaces":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+			case "actualDestinations":
+				return ec.fieldContext_ComputePlatform_actualDestinations(ctx, field)
+			case "actualActions":
+				return ec.fieldContext_ComputePlatform_actualActions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationSpecField_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationSpecField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationSpecField_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationSpecField_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationSpecField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationSpecField_value(ctx context.Context, field graphql.CollectedField, obj *model.DestinationSpecField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationSpecField_value(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Value, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationSpecField_value(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationSpecField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationType_category(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationType_category(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Category, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationType_category(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationType",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationType_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationType_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationType_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationType",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationType_displayName(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationType_displayName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DisplayName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationType_displayName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationType",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationType_image(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationType_image(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Image, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationType_image(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationType",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationType_supportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationType_supportedSignals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SupportedSignals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationType_supportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationType",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationType_fields(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationType_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.DestinationTypeField)
+	fc.Result = res
+	return ec.marshalNDestinationTypeField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeFieldᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationType_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationType",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_DestinationTypeField_name(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationTypeField_displayName(ctx, field)
+			case "videoURL":
+				return ec.fieldContext_DestinationTypeField_videoURL(ctx, field)
+			case "thumbnailURL":
+				return ec.fieldContext_DestinationTypeField_thumbnailURL(ctx, field)
+			case "componentType":
+				return ec.fieldContext_DestinationTypeField_componentType(ctx, field)
+			case "componentProps":
+				return ec.fieldContext_DestinationTypeField_componentProps(ctx, field)
+			case "secret":
+				return ec.fieldContext_DestinationTypeField_secret(ctx, field)
+			case "initialValue":
+				return ec.fieldContext_DestinationTypeField_initialValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationTypeField", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeCategory_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeCategory) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeCategory_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeCategory_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeCategory",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeCategory_destinationTypes(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeCategory) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeCategory_destinationTypes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DestinationTypes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.DestinationType)
+	fc.Result = res
+	return ec.marshalNDestinationType2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeCategory_destinationTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeCategory",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "category":
+				return ec.fieldContext_DestinationType_category(ctx, field)
+			case "name":
+				return ec.fieldContext_DestinationType_name(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationType_displayName(ctx, field)
+			case "image":
+				return ec.fieldContext_DestinationType_image(ctx, field)
+			case "supportedSignals":
+				return ec.fieldContext_DestinationType_supportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_DestinationType_fields(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationType", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeField_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeField_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeField_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeField_displayName(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeField_displayName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DisplayName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeField_displayName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeField_videoURL(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeField_videoURL(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.VideoURL, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeField_videoURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeField_thumbnailURL(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeField_thumbnailURL(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ThumbnailURL, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeField_thumbnailURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeField_componentType(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeField_componentType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComponentType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeField_componentType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeField_componentProps(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeField_componentProps(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComponentProps, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeField_componentProps(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeField_secret(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeField_secret(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Secret, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeField_secret(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypeField_initialValue(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypeField_initialValue(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InitialValue, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypeField_initialValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypeField",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualNamespace",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualNamespace_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.AutoInstrumented, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*bool)
+	fc.Result = res
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualNamespace_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualNamespace",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.K8sActualSources, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualNamespace",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "creationTimestamp":
+				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "hasInstrumentedApplication":
+				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_namespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Namespace, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_kind(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Kind, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.K8sResourceKind)
+	fc.Result = res
+	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type K8sResourceKind does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ServiceName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.AutoInstrumented, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*bool)
+	fc.Result = res
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_creationTimestamp(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.CreationTimestamp, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_creationTimestamp(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.NumberOfInstances, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*int)
+	fc.Result = res
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_hasInstrumentedApplication(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.HasInstrumentedApplication, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_hasInstrumentedApplication(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSourceRuntimeInfo_mainContainer(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfo) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfo_mainContainer(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.MainContainer, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.K8sActualSourceRuntimeInfoContainer)
+	fc.Result = res
+	return ec.marshalOK8sActualSourceRuntimeInfoContainer2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSourceRuntimeInfoContainer(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfo_mainContainer(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSourceRuntimeInfo",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "containerName":
+				return ec.fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(ctx, field)
+			case "language":
+				return ec.fieldContext_K8sActualSourceRuntimeInfoContainer_language(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSourceRuntimeInfoContainer", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_containerName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfoContainer) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ContainerName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSourceRuntimeInfoContainer",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_language(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfoContainer) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfoContainer_language(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Language, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ProgrammingLanguage)
+	fc.Result = res
+	return ec.marshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfoContainer_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSourceRuntimeInfoContainer",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ProgrammingLanguage does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_applyDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_applyDesiredNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().ApplyDesiredNamespace(rctx, fc.Args["cpId"].(string), fc.Args["nsId"].(model.K8sNamespaceID), fc.Args["ns"].(model.K8sDesiredNamespaceInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_applyDesiredNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_applyDesiredNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_deleteDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_deleteDesiredNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().DeleteDesiredNamespace(rctx, fc.Args["cpId"].(string), fc.Args["nsId"].(model.K8sNamespaceID))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_deleteDesiredNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_deleteDesiredNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_applyDesiredSource(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_applyDesiredSource(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().ApplyDesiredSource(rctx, fc.Args["cpId"].(string), fc.Args["sourceId"].(model.K8sSourceID), fc.Args["source"].(model.K8sDesiredSourceInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_applyDesiredSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_applyDesiredSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_deleteDesiredSource(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_deleteDesiredSource(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().DeleteDesiredSource(rctx, fc.Args["cpId"].(string), fc.Args["sourceId"].(model.K8sSourceID))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_deleteDesiredSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_deleteDesiredSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_createDesiredDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createDesiredDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().CreateDesiredDestination(rctx, fc.Args["destinationType"].(string), fc.Args["destination"].(model.DesiredDestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.DesiredDestination)
+	fc.Result = res
+	return ec.marshalNDesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_createDesiredDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_DesiredDestination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_DesiredDestination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_DesiredDestination_type(ctx, field)
+			case "exportSignals":
+				return ec.fieldContext_DesiredDestination_exportSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_DesiredDestination_fields(ctx, field)
+			case "computePlatforms":
+				return ec.fieldContext_DesiredDestination_computePlatforms(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DesiredDestination", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createDesiredDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateDesiredDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateDesiredDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateDesiredDestination(rctx, fc.Args["destinationId"].(string), fc.Args["destination"].(model.DesiredDestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.DesiredDestination)
+	fc.Result = res
+	return ec.marshalNDesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateDesiredDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_DesiredDestination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_DesiredDestination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_DesiredDestination_type(ctx, field)
+			case "exportSignals":
+				return ec.fieldContext_DesiredDestination_exportSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_DesiredDestination_fields(ctx, field)
+			case "computePlatforms":
+				return ec.fieldContext_DesiredDestination_computePlatforms(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DesiredDestination", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateDesiredDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_deleteDesiredDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_deleteDesiredDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().DeleteDesiredDestination(rctx, fc.Args["destinationId"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_deleteDesiredDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_deleteDesiredDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_applyDesiredDestinationToComputePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_applyDesiredDestinationToComputePlatform(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().ApplyDesiredDestinationToComputePlatform(rctx, fc.Args["cpId"].(string), fc.Args["destinationId"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_applyDesiredDestinationToComputePlatform(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_applyDesiredDestinationToComputePlatform_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_removeDesiredDestinationFromComputePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_removeDesiredDestinationFromComputePlatform(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().RemoveDesiredDestinationFromComputePlatform(rctx, fc.Args["cpId"].(string), fc.Args["destinationId"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_removeDesiredDestinationFromComputePlatform(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_removeDesiredDestinationFromComputePlatform_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_createDesiredAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createDesiredAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().CreateDesiredAction(rctx, fc.Args["cpId"].(string), fc.Args["action"].(model.DesiredActionInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_createDesiredAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createDesiredAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateDesiredAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateDesiredAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateDesiredAction(rctx, fc.Args["cpId"].(string), fc.Args["actionId"].(string), fc.Args["action"].(model.DesiredActionInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateDesiredAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateDesiredAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_deleteActualAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_deleteActualAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().DeleteActualAction(rctx, fc.Args["cpId"].(string), fc.Args["actionId"].(string), fc.Args["kind"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_deleteActualAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_deleteActualAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().ComputePlatform(rctx, fc.Args["cpId"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.ComputePlatform)
+	fc.Result = res
+	return ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_computePlatform(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_ComputePlatform_id(ctx, field)
+			case "name":
+				return ec.fieldContext_ComputePlatform_name(ctx, field)
+			case "computePlatformType":
+				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+			case "k8sActualNamespace":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+			case "k8sActualNamespaces":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+			case "actualDestinations":
+				return ec.fieldContext_ComputePlatform_actualDestinations(ctx, field)
+			case "actualActions":
+				return ec.fieldContext_ComputePlatform_actualActions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query_computePlatform_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_computePlatforms(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_computePlatforms(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().ComputePlatforms(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*model.ComputePlatform)
+	fc.Result = res
+	return ec.marshalOComputePlatform2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_computePlatforms(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_ComputePlatform_id(ctx, field)
+			case "name":
+				return ec.fieldContext_ComputePlatform_name(ctx, field)
+			case "computePlatformType":
+				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+			case "k8sActualNamespace":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+			case "k8sActualNamespaces":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+			case "actualDestinations":
+				return ec.fieldContext_ComputePlatform_actualDestinations(ctx, field)
+			case "actualActions":
+				return ec.fieldContext_ComputePlatform_actualActions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_destinationTypeCategories(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_destinationTypeCategories(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().DestinationTypeCategories(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*model.DestinationTypeCategory)
+	fc.Result = res
+	return ec.marshalODestinationTypeCategory2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeCategory(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_destinationTypeCategories(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_DestinationTypeCategory_name(ctx, field)
+			case "destinationTypes":
+				return ec.fieldContext_DestinationTypeCategory_destinationTypes(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationTypeCategory", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_desiredDestinations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_desiredDestinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().DesiredDestinations(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*model.DesiredDestination)
+	fc.Result = res
+	return ec.marshalODesiredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_desiredDestinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_DesiredDestination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_DesiredDestination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_DesiredDestination_type(ctx, field)
+			case "exportSignals":
+				return ec.fieldContext_DesiredDestination_exportSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_DesiredDestination_fields(ctx, field)
+			case "computePlatforms":
+				return ec.fieldContext_DesiredDestination_computePlatforms(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DesiredDestination", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.introspectType(fc.Args["name"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query___type(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query___type_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___schema(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.introspectSchema()
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Schema)
+	fc.Result = res
+	return ec.marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "description":
+				return ec.fieldContext___Schema_description(ctx, field)
+			case "types":
+				return ec.fieldContext___Schema_types(ctx, field)
+			case "queryType":
+				return ec.fieldContext___Schema_queryType(ctx, field)
+			case "mutationType":
+				return ec.fieldContext___Schema_mutationType(ctx, field)
+			case "subscriptionType":
+				return ec.fieldContext___Schema_subscriptionType(ctx, field)
+			case "directives":
+				return ec.fieldContext___Schema_directives(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Schema", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_locations(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_locations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Locations, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]string)
+	fc.Result = res
+	return ec.marshalN__DirectiveLocation2ᚕstringᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_locations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type __DirectiveLocation does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_args(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Args, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.InputValue)
+	fc.Result = res
+	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_isRepeatable(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_isRepeatable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.IsRepeatable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_isRepeatable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___EnumValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___EnumValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__EnumValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___EnumValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___EnumValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__EnumValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___EnumValue_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_isDeprecated(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.IsDeprecated(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___EnumValue_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__EnumValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___EnumValue_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_deprecationReason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DeprecationReason(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___EnumValue_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__EnumValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_args(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Args, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.InputValue)
+	fc.Result = res
+	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_type(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_isDeprecated(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.IsDeprecated(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_deprecationReason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DeprecationReason(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_type(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_defaultValue(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_defaultValue(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DefaultValue, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_defaultValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_types(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_types(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Types(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_types(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_queryType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_queryType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.QueryType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_queryType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_mutationType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_mutationType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.MutationType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_mutationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_subscriptionType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_subscriptionType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SubscriptionType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_subscriptionType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_directives(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_directives(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Directives(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Directive)
+	fc.Result = res
+	return ec.marshalN__Directive2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirectiveᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_directives(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___Directive_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Directive_description(ctx, field)
+			case "locations":
+				return ec.fieldContext___Directive_locations(ctx, field)
+			case "args":
+				return ec.fieldContext___Directive_args(ctx, field)
+			case "isRepeatable":
+				return ec.fieldContext___Directive_isRepeatable(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Directive", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_kind(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_kind(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Kind(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalN__TypeKind2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type __TypeKind does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_fields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields(fc.Args["includeDeprecated"].(bool)), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Field)
+	fc.Result = res
+	return ec.marshalO__Field2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐFieldᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_fields(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___Field_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Field_description(ctx, field)
+			case "args":
+				return ec.fieldContext___Field_args(ctx, field)
+			case "type":
+				return ec.fieldContext___Field_type(ctx, field)
+			case "isDeprecated":
+				return ec.fieldContext___Field_isDeprecated(ctx, field)
+			case "deprecationReason":
+				return ec.fieldContext___Field_deprecationReason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Field", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field___Type_fields_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_interfaces(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_interfaces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Interfaces(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_interfaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_possibleTypes(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_possibleTypes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.PossibleTypes(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_possibleTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_enumValues(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_enumValues(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.EnumValues(fc.Args["includeDeprecated"].(bool)), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.EnumValue)
+	fc.Result = res
+	return ec.marshalO__EnumValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_enumValues(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___EnumValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___EnumValue_description(ctx, field)
+			case "isDeprecated":
+				return ec.fieldContext___EnumValue_isDeprecated(ctx, field)
+			case "deprecationReason":
+				return ec.fieldContext___EnumValue_deprecationReason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __EnumValue", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field___Type_enumValues_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_inputFields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_inputFields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InputFields(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.InputValue)
+	fc.Result = res
+	return ec.marshalO__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_inputFields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_ofType(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_ofType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.OfType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_ofType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_specifiedByURL(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_specifiedByURL(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SpecifiedByURL(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+// endregion **************************** field.gotpl *****************************
+
+// region    **************************** input.gotpl *****************************
+
+func (ec *executionContext) unmarshalInputDesiredActionInput(ctx context.Context, obj interface{}) (model.DesiredActionInput, error) {
+	var it model.DesiredActionInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"kind", "name", "notes", "disable", "signals", "details"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Kind = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "notes":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("notes"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Notes = data
+		case "disable":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("disable"))
+			data, err := ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Disable = data
+		case "signals":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("signals"))
+			data, err := ec.unmarshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Signals = data
+		case "details":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("details"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Details = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputDesiredDestinationFieldInput(ctx context.Context, obj interface{}) (model.DesiredDestinationFieldInput, error) {
+	var it model.DesiredDestinationFieldInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "value"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "value":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("value"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Value = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputDesiredDestinationInput(ctx context.Context, obj interface{}) (model.DesiredDestinationInput, error) {
+	var it model.DesiredDestinationInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "exportSignals", "fields"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "exportSignals":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("exportSignals"))
+			data, err := ec.unmarshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.ExportSignals = data
+		case "fields":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("fields"))
+			data, err := ec.unmarshalNDesiredDestinationFieldInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationFieldInputᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Fields = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sDesiredNamespaceInput(ctx context.Context, obj interface{}) (model.K8sDesiredNamespaceInput, error) {
+	var it model.K8sDesiredNamespaceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"autoInstrument"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "autoInstrument":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("autoInstrument"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.AutoInstrument = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sDesiredSourceInput(ctx context.Context, obj interface{}) (model.K8sDesiredSourceInput, error) {
+	var it model.K8sDesiredSourceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"serviceName", "autoInstrument"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "serviceName":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("serviceName"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.ServiceName = data
+		case "autoInstrument":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("autoInstrument"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.AutoInstrument = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sNamespaceId(ctx context.Context, obj interface{}) (model.K8sNamespaceID, error) {
+	var it model.K8sNamespaceID
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj interface{}) (model.K8sSourceID, error) {
+	var it model.K8sSourceID
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"namespace", "kind", "name"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "namespace":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Namespace = data
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Kind = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputWorkloadInput(ctx context.Context, obj interface{}) (model.WorkloadInput, error) {
+	var it model.WorkloadInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"kind", "name", "namespace"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Kind = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "namespace":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Namespace = data
+		}
+	}
+
+	return it, nil
+}
+
+// endregion **************************** input.gotpl *****************************
+
+// region    ************************** interface.gotpl ***************************
+
+// endregion ************************** interface.gotpl ***************************
+
+// region    **************************** object.gotpl ****************************
+
+var actualActionImplementors = []string{"ActualAction"}
+
+func (ec *executionContext) _ActualAction(ctx context.Context, sel ast.SelectionSet, obj *model.ActualAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, actualActionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ActualAction")
+		case "id":
+			out.Values[i] = ec._ActualAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "kind":
+			out.Values[i] = ec._ActualAction_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._ActualAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._ActualAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._ActualAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._ActualAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._ActualAction_details(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var actualDestinationImplementors = []string{"ActualDestination"}
+
+func (ec *executionContext) _ActualDestination(ctx context.Context, sel ast.SelectionSet, obj *model.ActualDestination) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, actualDestinationImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ActualDestination")
+		case "id":
+			out.Values[i] = ec._ActualDestination_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._ActualDestination_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._ActualDestination_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "exportedSignals":
+			out.Values[i] = ec._ActualDestination_exportedSignals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "fields":
+			out.Values[i] = ec._ActualDestination_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var computePlatformImplementors = []string{"ComputePlatform"}
+
+func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.SelectionSet, obj *model.ComputePlatform) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, computePlatformImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ComputePlatform")
+		case "id":
+			out.Values[i] = ec._ComputePlatform_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._ComputePlatform_name(ctx, field, obj)
+		case "computePlatformType":
+			out.Values[i] = ec._ComputePlatform_computePlatformType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "k8sActualNamespace":
+			out.Values[i] = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
+		case "k8sActualNamespaces":
+			out.Values[i] = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "k8sActualSources":
+			out.Values[i] = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "actualDestinations":
+			out.Values[i] = ec._ComputePlatform_actualDestinations(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "actualActions":
+			out.Values[i] = ec._ComputePlatform_actualActions(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var desiredDestinationImplementors = []string{"DesiredDestination"}
+
+func (ec *executionContext) _DesiredDestination(ctx context.Context, sel ast.SelectionSet, obj *model.DesiredDestination) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, desiredDestinationImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DesiredDestination")
+		case "id":
+			out.Values[i] = ec._DesiredDestination_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._DesiredDestination_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._DesiredDestination_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "exportSignals":
+			out.Values[i] = ec._DesiredDestination_exportSignals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "fields":
+			out.Values[i] = ec._DesiredDestination_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "computePlatforms":
+			out.Values[i] = ec._DesiredDestination_computePlatforms(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationSpecFieldImplementors = []string{"DestinationSpecField"}
+
+func (ec *executionContext) _DestinationSpecField(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationSpecField) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationSpecFieldImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationSpecField")
+		case "name":
+			out.Values[i] = ec._DestinationSpecField_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "value":
+			out.Values[i] = ec._DestinationSpecField_value(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationTypeImplementors = []string{"DestinationType"}
+
+func (ec *executionContext) _DestinationType(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationType) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationTypeImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationType")
+		case "category":
+			out.Values[i] = ec._DestinationType_category(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._DestinationType_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "displayName":
+			out.Values[i] = ec._DestinationType_displayName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "image":
+			out.Values[i] = ec._DestinationType_image(ctx, field, obj)
+		case "supportedSignals":
+			out.Values[i] = ec._DestinationType_supportedSignals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "fields":
+			out.Values[i] = ec._DestinationType_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationTypeCategoryImplementors = []string{"DestinationTypeCategory"}
+
+func (ec *executionContext) _DestinationTypeCategory(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationTypeCategory) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationTypeCategoryImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationTypeCategory")
+		case "name":
+			out.Values[i] = ec._DestinationTypeCategory_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "destinationTypes":
+			out.Values[i] = ec._DestinationTypeCategory_destinationTypes(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationTypeFieldImplementors = []string{"DestinationTypeField"}
+
+func (ec *executionContext) _DestinationTypeField(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationTypeField) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationTypeFieldImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationTypeField")
+		case "name":
+			out.Values[i] = ec._DestinationTypeField_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "displayName":
+			out.Values[i] = ec._DestinationTypeField_displayName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "videoURL":
+			out.Values[i] = ec._DestinationTypeField_videoURL(ctx, field, obj)
+		case "thumbnailURL":
+			out.Values[i] = ec._DestinationTypeField_thumbnailURL(ctx, field, obj)
+		case "componentType":
+			out.Values[i] = ec._DestinationTypeField_componentType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "componentProps":
+			out.Values[i] = ec._DestinationTypeField_componentProps(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "secret":
+			out.Values[i] = ec._DestinationTypeField_secret(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "initialValue":
+			out.Values[i] = ec._DestinationTypeField_initialValue(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var k8sActualNamespaceImplementors = []string{"K8sActualNamespace"}
+
+func (ec *executionContext) _K8sActualNamespace(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualNamespace) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualNamespaceImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("K8sActualNamespace")
+		case "name":
+			out.Values[i] = ec._K8sActualNamespace_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "autoInstrumented":
+			out.Values[i] = ec._K8sActualNamespace_autoInstrumented(ctx, field, obj)
+		case "k8sActualSources":
+			out.Values[i] = ec._K8sActualNamespace_k8sActualSources(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var k8sActualSourceImplementors = []string{"K8sActualSource"}
+
+func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSource) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("K8sActualSource")
+		case "namespace":
+			out.Values[i] = ec._K8sActualSource_namespace(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "kind":
+			out.Values[i] = ec._K8sActualSource_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._K8sActualSource_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "serviceName":
+			out.Values[i] = ec._K8sActualSource_serviceName(ctx, field, obj)
+		case "autoInstrumented":
+			out.Values[i] = ec._K8sActualSource_autoInstrumented(ctx, field, obj)
+		case "creationTimestamp":
+			out.Values[i] = ec._K8sActualSource_creationTimestamp(ctx, field, obj)
+		case "numberOfInstances":
+			out.Values[i] = ec._K8sActualSource_numberOfInstances(ctx, field, obj)
+		case "hasInstrumentedApplication":
+			out.Values[i] = ec._K8sActualSource_hasInstrumentedApplication(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var k8sActualSourceRuntimeInfoImplementors = []string{"K8sActualSourceRuntimeInfo"}
+
+func (ec *executionContext) _K8sActualSourceRuntimeInfo(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSourceRuntimeInfo) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceRuntimeInfoImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("K8sActualSourceRuntimeInfo")
+		case "mainContainer":
+			out.Values[i] = ec._K8sActualSourceRuntimeInfo_mainContainer(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var k8sActualSourceRuntimeInfoContainerImplementors = []string{"K8sActualSourceRuntimeInfoContainer"}
+
+func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSourceRuntimeInfoContainer) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceRuntimeInfoContainerImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("K8sActualSourceRuntimeInfoContainer")
+		case "containerName":
+			out.Values[i] = ec._K8sActualSourceRuntimeInfoContainer_containerName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "language":
+			out.Values[i] = ec._K8sActualSourceRuntimeInfoContainer_language(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var mutationImplementors = []string{"Mutation"}
+
+func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, mutationImplementors)
+	ctx = graphql.WithFieldContext(ctx, &graphql.FieldContext{
+		Object: "Mutation",
+	})
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		innerCtx := graphql.WithRootFieldContext(ctx, &graphql.RootFieldContext{
+			Object: field.Name,
+			Field:  field,
+		})
+
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Mutation")
+		case "applyDesiredNamespace":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_applyDesiredNamespace(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deleteDesiredNamespace":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_deleteDesiredNamespace(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "applyDesiredSource":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_applyDesiredSource(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deleteDesiredSource":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_deleteDesiredSource(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "createDesiredDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_createDesiredDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "updateDesiredDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_updateDesiredDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deleteDesiredDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_deleteDesiredDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "applyDesiredDestinationToComputePlatform":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_applyDesiredDestinationToComputePlatform(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "removeDesiredDestinationFromComputePlatform":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_removeDesiredDestinationFromComputePlatform(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "createDesiredAction":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_createDesiredAction(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "updateDesiredAction":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_updateDesiredAction(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deleteActualAction":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_deleteActualAction(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var queryImplementors = []string{"Query"}
+
+func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, queryImplementors)
+	ctx = graphql.WithFieldContext(ctx, &graphql.FieldContext{
+		Object: "Query",
+	})
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		innerCtx := graphql.WithRootFieldContext(ctx, &graphql.RootFieldContext{
+			Object: field.Name,
+			Field:  field,
+		})
+
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Query")
+		case "computePlatform":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_computePlatform(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "computePlatforms":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_computePlatforms(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "destinationTypeCategories":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_destinationTypeCategories(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "desiredDestinations":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_desiredDestinations(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "__type":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Query___type(ctx, field)
+			})
+		case "__schema":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Query___schema(ctx, field)
+			})
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __DirectiveImplementors = []string{"__Directive"}
+
+func (ec *executionContext) ___Directive(ctx context.Context, sel ast.SelectionSet, obj *introspection.Directive) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __DirectiveImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Directive")
+		case "name":
+			out.Values[i] = ec.___Directive_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___Directive_description(ctx, field, obj)
+		case "locations":
+			out.Values[i] = ec.___Directive_locations(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "args":
+			out.Values[i] = ec.___Directive_args(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "isRepeatable":
+			out.Values[i] = ec.___Directive_isRepeatable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __EnumValueImplementors = []string{"__EnumValue"}
+
+func (ec *executionContext) ___EnumValue(ctx context.Context, sel ast.SelectionSet, obj *introspection.EnumValue) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __EnumValueImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__EnumValue")
+		case "name":
+			out.Values[i] = ec.___EnumValue_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___EnumValue_description(ctx, field, obj)
+		case "isDeprecated":
+			out.Values[i] = ec.___EnumValue_isDeprecated(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deprecationReason":
+			out.Values[i] = ec.___EnumValue_deprecationReason(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __FieldImplementors = []string{"__Field"}
+
+func (ec *executionContext) ___Field(ctx context.Context, sel ast.SelectionSet, obj *introspection.Field) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __FieldImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Field")
+		case "name":
+			out.Values[i] = ec.___Field_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___Field_description(ctx, field, obj)
+		case "args":
+			out.Values[i] = ec.___Field_args(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec.___Field_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "isDeprecated":
+			out.Values[i] = ec.___Field_isDeprecated(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deprecationReason":
+			out.Values[i] = ec.___Field_deprecationReason(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __InputValueImplementors = []string{"__InputValue"}
+
+func (ec *executionContext) ___InputValue(ctx context.Context, sel ast.SelectionSet, obj *introspection.InputValue) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __InputValueImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__InputValue")
+		case "name":
+			out.Values[i] = ec.___InputValue_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___InputValue_description(ctx, field, obj)
+		case "type":
+			out.Values[i] = ec.___InputValue_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "defaultValue":
+			out.Values[i] = ec.___InputValue_defaultValue(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __SchemaImplementors = []string{"__Schema"}
+
+func (ec *executionContext) ___Schema(ctx context.Context, sel ast.SelectionSet, obj *introspection.Schema) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __SchemaImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Schema")
+		case "description":
+			out.Values[i] = ec.___Schema_description(ctx, field, obj)
+		case "types":
+			out.Values[i] = ec.___Schema_types(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "queryType":
+			out.Values[i] = ec.___Schema_queryType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "mutationType":
+			out.Values[i] = ec.___Schema_mutationType(ctx, field, obj)
+		case "subscriptionType":
+			out.Values[i] = ec.___Schema_subscriptionType(ctx, field, obj)
+		case "directives":
+			out.Values[i] = ec.___Schema_directives(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __TypeImplementors = []string{"__Type"}
+
+func (ec *executionContext) ___Type(ctx context.Context, sel ast.SelectionSet, obj *introspection.Type) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __TypeImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Type")
+		case "kind":
+			out.Values[i] = ec.___Type_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec.___Type_name(ctx, field, obj)
+		case "description":
+			out.Values[i] = ec.___Type_description(ctx, field, obj)
+		case "fields":
+			out.Values[i] = ec.___Type_fields(ctx, field, obj)
+		case "interfaces":
+			out.Values[i] = ec.___Type_interfaces(ctx, field, obj)
+		case "possibleTypes":
+			out.Values[i] = ec.___Type_possibleTypes(ctx, field, obj)
+		case "enumValues":
+			out.Values[i] = ec.___Type_enumValues(ctx, field, obj)
+		case "inputFields":
+			out.Values[i] = ec.___Type_inputFields(ctx, field, obj)
+		case "ofType":
+			out.Values[i] = ec.___Type_ofType(ctx, field, obj)
+		case "specifiedByURL":
+			out.Values[i] = ec.___Type_specifiedByURL(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+// endregion **************************** object.gotpl ****************************
+
+// region    ***************************** type.gotpl *****************************
+
+func (ec *executionContext) marshalNActualAction2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualAction(ctx context.Context, sel ast.SelectionSet, v []*model.ActualAction) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalOActualAction2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualAction(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) marshalNActualDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualDestination(ctx context.Context, sel ast.SelectionSet, v []*model.ActualDestination) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalOActualDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualDestination(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalNBoolean2bool(ctx context.Context, v interface{}) (bool, error) {
+	res, err := graphql.UnmarshalBoolean(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNBoolean2bool(ctx context.Context, sel ast.SelectionSet, v bool) graphql.Marshaler {
+	res := graphql.MarshalBoolean(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) marshalNComputePlatform2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.ComputePlatform) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx context.Context, sel ast.SelectionSet, v *model.ComputePlatform) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._ComputePlatform(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, v interface{}) (model.ComputePlatformType, error) {
+	var res model.ComputePlatformType
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, sel ast.SelectionSet, v model.ComputePlatformType) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) unmarshalNDesiredActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredActionInput(ctx context.Context, v interface{}) (model.DesiredActionInput, error) {
+	res, err := ec.unmarshalInputDesiredActionInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNDesiredDestination2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v model.DesiredDestination) graphql.Marshaler {
+	return ec._DesiredDestination(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNDesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v *model.DesiredDestination) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._DesiredDestination(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNDesiredDestinationFieldInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationFieldInputᚄ(ctx context.Context, v interface{}) ([]*model.DesiredDestinationFieldInput, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*model.DesiredDestinationFieldInput, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNDesiredDestinationFieldInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationFieldInput(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) unmarshalNDesiredDestinationFieldInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationFieldInput(ctx context.Context, v interface{}) (*model.DesiredDestinationFieldInput, error) {
+	res, err := ec.unmarshalInputDesiredDestinationFieldInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNDesiredDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationInput(ctx context.Context, v interface{}) (model.DesiredDestinationInput, error) {
+	res, err := ec.unmarshalInputDesiredDestinationInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNDestinationSpecField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationSpecField) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestinationSpecField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecField(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDestinationSpecField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecField(ctx context.Context, sel ast.SelectionSet, v *model.DestinationSpecField) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._DestinationSpecField(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalNDestinationType2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationType) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalODestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx context.Context, sel ast.SelectionSet, v *model.DestinationType) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._DestinationType(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalNDestinationTypeField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationTypeField) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestinationTypeField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeField(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDestinationTypeField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeField(ctx context.Context, sel ast.SelectionSet, v *model.DestinationTypeField) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._DestinationTypeField(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNID2string(ctx context.Context, v interface{}) (string, error) {
+	res, err := graphql.UnmarshalID(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNID2string(ctx context.Context, sel ast.SelectionSet, v string) graphql.Marshaler {
+	res := graphql.MarshalID(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx context.Context, sel ast.SelectionSet, v []*model.K8sActualNamespace) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx context.Context, sel ast.SelectionSet, v []*model.K8sActualSource) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalNK8sDesiredNamespaceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredNamespaceInput(ctx context.Context, v interface{}) (model.K8sDesiredNamespaceInput, error) {
+	res, err := ec.unmarshalInputK8sDesiredNamespaceInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNK8sDesiredSourceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredSourceInput(ctx context.Context, v interface{}) (model.K8sDesiredSourceInput, error) {
+	res, err := ec.unmarshalInputK8sDesiredSourceInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNK8sNamespaceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sNamespaceID(ctx context.Context, v interface{}) (model.K8sNamespaceID, error) {
+	res, err := ec.unmarshalInputK8sNamespaceId(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx context.Context, v interface{}) (model.K8sResourceKind, error) {
+	var res model.K8sResourceKind
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx context.Context, sel ast.SelectionSet, v model.K8sResourceKind) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx context.Context, v interface{}) (model.K8sSourceID, error) {
+	res, err := ec.unmarshalInputK8sSourceId(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx context.Context, v interface{}) (model.ProgrammingLanguage, error) {
+	var res model.ProgrammingLanguage
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx context.Context, sel ast.SelectionSet, v model.ProgrammingLanguage) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) unmarshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx context.Context, v interface{}) (model.SignalType, error) {
+	var res model.SignalType
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx context.Context, sel ast.SelectionSet, v model.SignalType) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) unmarshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx context.Context, v interface{}) ([]model.SignalType, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]model.SignalType, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx context.Context, sel ast.SelectionSet, v []model.SignalType) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalNString2string(ctx context.Context, v interface{}) (string, error) {
+	res, err := graphql.UnmarshalString(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNString2string(ctx context.Context, sel ast.SelectionSet, v string) graphql.Marshaler {
+	res := graphql.MarshalString(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) marshalN__Directive2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirective(ctx context.Context, sel ast.SelectionSet, v introspection.Directive) graphql.Marshaler {
+	return ec.___Directive(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__Directive2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirectiveᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.Directive) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__Directive2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirective(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalN__DirectiveLocation2string(ctx context.Context, v interface{}) (string, error) {
+	res, err := graphql.UnmarshalString(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalN__DirectiveLocation2string(ctx context.Context, sel ast.SelectionSet, v string) graphql.Marshaler {
+	res := graphql.MarshalString(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) unmarshalN__DirectiveLocation2ᚕstringᚄ(ctx context.Context, v interface{}) ([]string, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]string, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalN__DirectiveLocation2string(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalN__DirectiveLocation2ᚕstringᚄ(ctx context.Context, sel ast.SelectionSet, v []string) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__DirectiveLocation2string(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalN__EnumValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValue(ctx context.Context, sel ast.SelectionSet, v introspection.EnumValue) graphql.Marshaler {
+	return ec.___EnumValue(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__Field2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐField(ctx context.Context, sel ast.SelectionSet, v introspection.Field) graphql.Marshaler {
+	return ec.___Field(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__InputValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValue(ctx context.Context, sel ast.SelectionSet, v introspection.InputValue) graphql.Marshaler {
+	return ec.___InputValue(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.InputValue) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__InputValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValue(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalN__Type2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx context.Context, sel ast.SelectionSet, v introspection.Type) graphql.Marshaler {
+	return ec.___Type(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.Type) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__Type2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx context.Context, sel ast.SelectionSet, v *introspection.Type) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec.___Type(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalN__TypeKind2string(ctx context.Context, v interface{}) (string, error) {
+	res, err := graphql.UnmarshalString(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalN__TypeKind2string(ctx context.Context, sel ast.SelectionSet, v string) graphql.Marshaler {
+	res := graphql.MarshalString(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) marshalOActualAction2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualAction(ctx context.Context, sel ast.SelectionSet, v *model.ActualAction) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._ActualAction(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOActualDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualDestination(ctx context.Context, sel ast.SelectionSet, v *model.ActualDestination) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._ActualDestination(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalOBoolean2bool(ctx context.Context, v interface{}) (bool, error) {
+	res, err := graphql.UnmarshalBoolean(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOBoolean2bool(ctx context.Context, sel ast.SelectionSet, v bool) graphql.Marshaler {
+	res := graphql.MarshalBoolean(v)
+	return res
+}
+
+func (ec *executionContext) unmarshalOBoolean2ᚖbool(ctx context.Context, v interface{}) (*bool, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := graphql.UnmarshalBoolean(v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOBoolean2ᚖbool(ctx context.Context, sel ast.SelectionSet, v *bool) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	res := graphql.MarshalBoolean(*v)
+	return res
+}
+
+func (ec *executionContext) marshalOComputePlatform2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx context.Context, sel ast.SelectionSet, v []*model.ComputePlatform) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx context.Context, sel ast.SelectionSet, v *model.ComputePlatform) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._ComputePlatform(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalODesiredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v []*model.DesiredDestination) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalODesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) marshalODesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v *model.DesiredDestination) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._DesiredDestination(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalODestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx context.Context, sel ast.SelectionSet, v *model.DestinationType) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._DestinationType(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalODestinationTypeCategory2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeCategory(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationTypeCategory) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalODestinationTypeCategory2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeCategory(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) marshalODestinationTypeCategory2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeCategory(ctx context.Context, sel ast.SelectionSet, v *model.DestinationTypeCategory) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._DestinationTypeCategory(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalOInt2ᚖint(ctx context.Context, v interface{}) (*int, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := graphql.UnmarshalInt(v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOInt2ᚖint(ctx context.Context, sel ast.SelectionSet, v *int) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	res := graphql.MarshalInt(*v)
+	return res
+}
+
+func (ec *executionContext) marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx context.Context, sel ast.SelectionSet, v *model.K8sActualNamespace) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._K8sActualNamespace(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx context.Context, sel ast.SelectionSet, v *model.K8sActualSource) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._K8sActualSource(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOK8sActualSourceRuntimeInfoContainer2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSourceRuntimeInfoContainer(ctx context.Context, sel ast.SelectionSet, v *model.K8sActualSourceRuntimeInfoContainer) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._K8sActualSourceRuntimeInfoContainer(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalOString2ᚖstring(ctx context.Context, v interface{}) (*string, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := graphql.UnmarshalString(v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOString2ᚖstring(ctx context.Context, sel ast.SelectionSet, v *string) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	res := graphql.MarshalString(*v)
+	return res
+}
+
+func (ec *executionContext) marshalO__EnumValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValueᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.EnumValue) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__EnumValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValue(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalO__Field2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.Field) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__Field2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐField(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalO__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.InputValue) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__InputValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValue(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx context.Context, sel ast.SelectionSet, v *introspection.Schema) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec.___Schema(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.Type) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__Type2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx context.Context, sel ast.SelectionSet, v *introspection.Type) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec.___Type(ctx, sel, v)
+}
+
+// endregion ***************************** type.gotpl *****************************
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
new file mode 100644
index 000000000..f6da0e88c
--- /dev/null
+++ b/frontend/graph/model/models_gen.go
@@ -0,0 +1,377 @@
+// Code generated by github.com/99designs/gqlgen, DO NOT EDIT.
+
+package model
+
+import (
+	"fmt"
+	"io"
+	"strconv"
+)
+
+type ActualAction struct {
+	ID      string       `json:"id"`
+	Kind    string       `json:"kind"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details string       `json:"details"`
+}
+
+type ActualDestination struct {
+	ID              string                  `json:"id"`
+	Name            string                  `json:"name"`
+	Type            *DestinationType        `json:"type"`
+	ExportedSignals []SignalType            `json:"exportedSignals"`
+	Fields          []*DestinationSpecField `json:"fields"`
+}
+
+type ComputePlatform struct {
+	ID                  string                `json:"id"`
+	Name                *string               `json:"name,omitempty"`
+	ComputePlatformType ComputePlatformType   `json:"computePlatformType"`
+	K8sActualNamespace  *K8sActualNamespace   `json:"k8sActualNamespace,omitempty"`
+	K8sActualNamespaces []*K8sActualNamespace `json:"k8sActualNamespaces"`
+	K8sActualSources    []*K8sActualSource    `json:"k8sActualSources"`
+	ActualDestinations  []*ActualDestination  `json:"actualDestinations"`
+	ActualActions       []*ActualAction       `json:"actualActions"`
+}
+
+type DesiredActionInput struct {
+	Kind    string       `json:"kind"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details string       `json:"details"`
+}
+
+type DesiredDestination struct {
+	ID               string                  `json:"id"`
+	Name             string                  `json:"name"`
+	Type             *DestinationType        `json:"type"`
+	ExportSignals    []SignalType            `json:"exportSignals"`
+	Fields           []*DestinationSpecField `json:"fields"`
+	ComputePlatforms []*ComputePlatform      `json:"computePlatforms"`
+}
+
+type DesiredDestinationFieldInput struct {
+	Name  string `json:"name"`
+	Value string `json:"value"`
+}
+
+type DesiredDestinationInput struct {
+	Name          string                          `json:"name"`
+	ExportSignals []SignalType                    `json:"exportSignals"`
+	Fields        []*DesiredDestinationFieldInput `json:"fields"`
+}
+
+type DestinationSpecField struct {
+	Name  string `json:"name"`
+	Value string `json:"value"`
+}
+
+type DestinationType struct {
+	Category         string                  `json:"category"`
+	Name             string                  `json:"name"`
+	DisplayName      string                  `json:"displayName"`
+	Image            *string                 `json:"image,omitempty"`
+	SupportedSignals []SignalType            `json:"supportedSignals"`
+	Fields           []*DestinationTypeField `json:"fields"`
+}
+
+type DestinationTypeCategory struct {
+	Name             string             `json:"name"`
+	DestinationTypes []*DestinationType `json:"destinationTypes"`
+}
+
+type DestinationTypeField struct {
+	Name           string  `json:"name"`
+	DisplayName    string  `json:"displayName"`
+	VideoURL       *string `json:"videoURL,omitempty"`
+	ThumbnailURL   *string `json:"thumbnailURL,omitempty"`
+	ComponentType  string  `json:"componentType"`
+	ComponentProps string  `json:"componentProps"`
+	Secret         bool    `json:"secret"`
+	InitialValue   *string `json:"initialValue,omitempty"`
+}
+
+type K8sActualNamespace struct {
+	Name             string             `json:"name"`
+	AutoInstrumented *bool              `json:"autoInstrumented,omitempty"`
+	K8sActualSources []*K8sActualSource `json:"k8sActualSources"`
+}
+
+type K8sActualSource struct {
+	Namespace                  string          `json:"namespace"`
+	Kind                       K8sResourceKind `json:"kind"`
+	Name                       string          `json:"name"`
+	ServiceName                *string         `json:"serviceName,omitempty"`
+	AutoInstrumented           *bool           `json:"autoInstrumented,omitempty"`
+	CreationTimestamp          *string         `json:"creationTimestamp,omitempty"`
+	NumberOfInstances          *int            `json:"numberOfInstances,omitempty"`
+	HasInstrumentedApplication bool            `json:"hasInstrumentedApplication"`
+}
+
+type K8sActualSourceRuntimeInfo struct {
+	MainContainer *K8sActualSourceRuntimeInfoContainer `json:"mainContainer,omitempty"`
+}
+
+type K8sActualSourceRuntimeInfoContainer struct {
+	ContainerName string              `json:"containerName"`
+	Language      ProgrammingLanguage `json:"language"`
+}
+
+type K8sDesiredNamespaceInput struct {
+	AutoInstrument *bool `json:"autoInstrument,omitempty"`
+}
+
+type K8sDesiredSourceInput struct {
+	ServiceName    *string `json:"serviceName,omitempty"`
+	AutoInstrument *bool   `json:"autoInstrument,omitempty"`
+}
+
+type K8sNamespaceID struct {
+	Name string `json:"name"`
+}
+
+type K8sSourceID struct {
+	Namespace string          `json:"namespace"`
+	Kind      K8sResourceKind `json:"kind"`
+	Name      string          `json:"name"`
+}
+
+type Mutation struct {
+}
+
+type Query struct {
+}
+
+type WorkloadInput struct {
+	Kind      K8sResourceKind `json:"kind"`
+	Name      string          `json:"name"`
+	Namespace string          `json:"namespace"`
+}
+
+type ComputePlatformType string
+
+const (
+	ComputePlatformTypeK8s ComputePlatformType = "K8S"
+	ComputePlatformTypeVM  ComputePlatformType = "VM"
+)
+
+var AllComputePlatformType = []ComputePlatformType{
+	ComputePlatformTypeK8s,
+	ComputePlatformTypeVM,
+}
+
+func (e ComputePlatformType) IsValid() bool {
+	switch e {
+	case ComputePlatformTypeK8s, ComputePlatformTypeVM:
+		return true
+	}
+	return false
+}
+
+func (e ComputePlatformType) String() string {
+	return string(e)
+}
+
+func (e *ComputePlatformType) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = ComputePlatformType(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid ComputePlatformType", str)
+	}
+	return nil
+}
+
+func (e ComputePlatformType) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type K8sResourceKind string
+
+const (
+	K8sResourceKindDeployment  K8sResourceKind = "Deployment"
+	K8sResourceKindDaemonSet   K8sResourceKind = "DaemonSet"
+	K8sResourceKindStatefulSet K8sResourceKind = "StatefulSet"
+)
+
+var AllK8sResourceKind = []K8sResourceKind{
+	K8sResourceKindDeployment,
+	K8sResourceKindDaemonSet,
+	K8sResourceKindStatefulSet,
+}
+
+func (e K8sResourceKind) IsValid() bool {
+	switch e {
+	case K8sResourceKindDeployment, K8sResourceKindDaemonSet, K8sResourceKindStatefulSet:
+		return true
+	}
+	return false
+}
+
+func (e K8sResourceKind) String() string {
+	return string(e)
+}
+
+func (e *K8sResourceKind) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = K8sResourceKind(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid K8sResourceKind", str)
+	}
+	return nil
+}
+
+func (e K8sResourceKind) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type ProgrammingLanguage string
+
+const (
+	ProgrammingLanguageUnspecified ProgrammingLanguage = "Unspecified"
+	ProgrammingLanguageJava        ProgrammingLanguage = "Java"
+	ProgrammingLanguageGo          ProgrammingLanguage = "Go"
+	ProgrammingLanguageJavaScript  ProgrammingLanguage = "JavaScript"
+	ProgrammingLanguagePython      ProgrammingLanguage = "Python"
+	ProgrammingLanguageDotNet      ProgrammingLanguage = "DotNet"
+)
+
+var AllProgrammingLanguage = []ProgrammingLanguage{
+	ProgrammingLanguageUnspecified,
+	ProgrammingLanguageJava,
+	ProgrammingLanguageGo,
+	ProgrammingLanguageJavaScript,
+	ProgrammingLanguagePython,
+	ProgrammingLanguageDotNet,
+}
+
+func (e ProgrammingLanguage) IsValid() bool {
+	switch e {
+	case ProgrammingLanguageUnspecified, ProgrammingLanguageJava, ProgrammingLanguageGo, ProgrammingLanguageJavaScript, ProgrammingLanguagePython, ProgrammingLanguageDotNet:
+		return true
+	}
+	return false
+}
+
+func (e ProgrammingLanguage) String() string {
+	return string(e)
+}
+
+func (e *ProgrammingLanguage) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = ProgrammingLanguage(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid ProgrammingLanguage", str)
+	}
+	return nil
+}
+
+func (e ProgrammingLanguage) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type SignalType string
+
+const (
+	SignalTypeTraces  SignalType = "TRACES"
+	SignalTypeMetrics SignalType = "METRICS"
+	SignalTypeLogs    SignalType = "LOGS"
+)
+
+var AllSignalType = []SignalType{
+	SignalTypeTraces,
+	SignalTypeMetrics,
+	SignalTypeLogs,
+}
+
+func (e SignalType) IsValid() bool {
+	switch e {
+	case SignalTypeTraces, SignalTypeMetrics, SignalTypeLogs:
+		return true
+	}
+	return false
+}
+
+func (e SignalType) String() string {
+	return string(e)
+}
+
+func (e *SignalType) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = SignalType(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid SignalType", str)
+	}
+	return nil
+}
+
+func (e SignalType) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type SpanKind string
+
+const (
+	SpanKindInternal SpanKind = "Internal"
+	SpanKindServer   SpanKind = "Server"
+	SpanKindClient   SpanKind = "Client"
+	SpanKindProducer SpanKind = "Producer"
+	SpanKindConsumer SpanKind = "Consumer"
+)
+
+var AllSpanKind = []SpanKind{
+	SpanKindInternal,
+	SpanKindServer,
+	SpanKindClient,
+	SpanKindProducer,
+	SpanKindConsumer,
+}
+
+func (e SpanKind) IsValid() bool {
+	switch e {
+	case SpanKindInternal, SpanKindServer, SpanKindClient, SpanKindProducer, SpanKindConsumer:
+		return true
+	}
+	return false
+}
+
+func (e SpanKind) String() string {
+	return string(e)
+}
+
+func (e *SpanKind) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = SpanKind(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid SpanKind", str)
+	}
+	return nil
+}
+
+func (e SpanKind) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
diff --git a/frontend/graph/resolver.go b/frontend/graph/resolver.go
new file mode 100644
index 000000000..a25c09c61
--- /dev/null
+++ b/frontend/graph/resolver.go
@@ -0,0 +1,7 @@
+package graph
+
+// This file will not be regenerated automatically.
+//
+// It serves as dependency injection for your app, add any dependencies you require here.
+
+type Resolver struct{}
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
new file mode 100644
index 000000000..d03d61729
--- /dev/null
+++ b/frontend/graph/schema.graphqls
@@ -0,0 +1,235 @@
+enum ComputePlatformType {
+  K8S
+  VM
+}
+
+enum K8sResourceKind {
+  Deployment
+  DaemonSet
+  StatefulSet
+}
+
+enum ProgrammingLanguage {
+  Unspecified
+  Java
+  Go
+  JavaScript
+  Python
+  DotNet
+}
+
+enum SignalType {
+  TRACES
+  METRICS
+  LOGS
+}
+
+enum SpanKind {
+  Internal
+  Server
+  Client
+  Producer
+  Consumer
+}
+
+type K8sActualNamespace {
+  name: String!
+  autoInstrumented: Boolean
+
+  k8sActualSources: [K8sActualSource]!
+}
+
+input K8sDesiredNamespaceInput {
+  autoInstrument: Boolean
+}
+input K8sNamespaceId {
+  name: String!
+}
+
+type K8sActualSource {
+  namespace: String!
+  kind: K8sResourceKind!
+  name: String!
+  serviceName: String
+  autoInstrumented: Boolean
+  creationTimestamp: String
+  numberOfInstances: Int
+  # Odigos records an array of runtime infos.
+  # currently we only keep the first one assuming it is the user's app.
+  hasInstrumentedApplication: Boolean!
+}
+type K8sActualSourceRuntimeInfo {
+  mainContainer: K8sActualSourceRuntimeInfoContainer
+}
+type K8sActualSourceRuntimeInfoContainer {
+  containerName: String!
+  language: ProgrammingLanguage!
+}
+
+input K8sDesiredSourceInput {
+  serviceName: String
+  autoInstrument: Boolean
+}
+input K8sSourceId {
+  namespace: String!
+  kind: K8sResourceKind!
+  name: String!
+}
+
+type DestinationSpecField {
+  name: String!
+  value: String!
+}
+type ActualDestination {
+  id: ID!
+  name: String!
+  type: DestinationType!
+  exportedSignals: [SignalType!]!
+  fields: [DestinationSpecField!]!
+}
+type DesiredDestination {
+  id: ID!
+  name: String!
+  type: DestinationType!
+  exportSignals: [SignalType!]!
+  fields: [DestinationSpecField!]!
+
+  # compute platforms that include this destination
+  computePlatforms: [ComputePlatform!]!
+}
+input DesiredDestinationFieldInput {
+  name: String!
+  value: String!
+}
+input DesiredDestinationInput {
+  name: String!
+  exportSignals: [SignalType!]!
+  fields: [DesiredDestinationFieldInput!]!
+}
+
+type DestinationTypeField {
+  name: String!
+  displayName: String!
+  videoURL: String
+  thumbnailURL: String
+  componentType: String!
+  # componentProps is JSON stringified data as text
+  componentProps: String!
+  secret: Boolean!
+  initialValue: String
+}
+type DestinationType {
+  # category is currently "managed" or "self hosted"
+  category: String!
+  # the name of the destination type (prometheus, jaeger, etc)
+  name: String!
+  # same destination type "name", but used for display (for example can contain spaces)
+  displayName: String!
+
+  # name of an image file to be used for this destination type
+  # the image themselves are stored [here](https://s3.console.aws.amazon.com/s3/buckets/odigos-destinations)
+  image: String
+
+  # the signals that this destination type supports
+  supportedSignals: [SignalType!]!
+
+  fields: [DestinationTypeField!]!
+}
+type DestinationTypeCategory {
+  # the name of the category
+  name: String!
+  destinationTypes: [DestinationType]!
+}
+
+type ComputePlatform {
+  id: ID!
+  name: String
+  computePlatformType: ComputePlatformType!
+
+  k8sActualNamespace(name: String!): K8sActualNamespace
+  k8sActualNamespaces: [K8sActualNamespace]!
+  k8sActualSources: [K8sActualSource]!
+
+  # destinations that are applied to this compute platform
+  actualDestinations: [ActualDestination]!
+  actualActions: [ActualAction]!
+}
+
+# Define the input type for Workload
+input WorkloadInput {
+  kind: K8sResourceKind!
+  name: String!
+  namespace: String!
+}
+
+input DesiredActionInput {
+  kind: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: String!
+}
+
+type ActualAction {
+  id: ID!
+  kind: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: String!
+}
+
+type Query {
+  computePlatform(cpId: ID!): ComputePlatform
+  computePlatforms: [ComputePlatform]
+  destinationTypeCategories: [DestinationTypeCategory]
+  desiredDestinations: [DesiredDestination]
+}
+
+type Mutation {
+  # desired namespace mutations
+  applyDesiredNamespace(
+    cpId: ID!
+    nsId: K8sNamespaceId!
+    ns: K8sDesiredNamespaceInput!
+  ): Boolean!
+  deleteDesiredNamespace(cpId: ID!, nsId: K8sNamespaceId!): Boolean!
+
+  #k8s desired source mutations
+  applyDesiredSource(
+    cpId: ID!
+    sourceId: K8sSourceId!
+    source: K8sDesiredSourceInput!
+  ): Boolean!
+  deleteDesiredSource(cpId: ID!, sourceId: K8sSourceId!): Boolean!
+
+  # desired destination mutations
+  createDesiredDestination(
+    destinationType: String!
+    destination: DesiredDestinationInput!
+  ): DesiredDestination!
+  updateDesiredDestination(
+    destinationId: ID!
+    destination: DesiredDestinationInput!
+  ): DesiredDestination!
+  deleteDesiredDestination(destinationId: ID!): Boolean!
+  applyDesiredDestinationToComputePlatform(
+    cpId: ID!
+    destinationId: ID!
+  ): Boolean!
+  removeDesiredDestinationFromComputePlatform(
+    cpId: ID!
+    destinationId: ID!
+  ): Boolean!
+
+  # actions mutations
+  createDesiredAction(cpId: ID!, action: DesiredActionInput!): Boolean!
+  updateDesiredAction(
+    cpId: ID!
+    actionId: String!
+    action: DesiredActionInput!
+  ): Boolean!
+  deleteActualAction(cpId: ID!, actionId: String!, kind: String!): Boolean!
+}
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
new file mode 100644
index 000000000..473e81de6
--- /dev/null
+++ b/frontend/graph/schema.resolvers.go
@@ -0,0 +1,105 @@
+package graph
+
+// This file will be automatically regenerated based on the schema, any resolver implementations
+// will be copied through when generating and any unknown code will be moved to the end.
+// Code generated by github.com/99designs/gqlgen version v0.17.49
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/odigos-io/odigos/frontend/graph/model"
+)
+
+// ApplyDesiredNamespace is the resolver for the applyDesiredNamespace field.
+func (r *mutationResolver) ApplyDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID, ns model.K8sDesiredNamespaceInput) (bool, error) {
+	panic(fmt.Errorf("not implemented: ApplyDesiredNamespace - applyDesiredNamespace"))
+}
+
+// DeleteDesiredNamespace is the resolver for the deleteDesiredNamespace field.
+func (r *mutationResolver) DeleteDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID) (bool, error) {
+	panic(fmt.Errorf("not implemented: DeleteDesiredNamespace - deleteDesiredNamespace"))
+}
+
+// ApplyDesiredSource is the resolver for the applyDesiredSource field.
+func (r *mutationResolver) ApplyDesiredSource(ctx context.Context, cpID string, sourceID model.K8sSourceID, source model.K8sDesiredSourceInput) (bool, error) {
+	panic(fmt.Errorf("not implemented: ApplyDesiredSource - applyDesiredSource"))
+}
+
+// DeleteDesiredSource is the resolver for the deleteDesiredSource field.
+func (r *mutationResolver) DeleteDesiredSource(ctx context.Context, cpID string, sourceID model.K8sSourceID) (bool, error) {
+	panic(fmt.Errorf("not implemented: DeleteDesiredSource - deleteDesiredSource"))
+}
+
+// CreateDesiredDestination is the resolver for the createDesiredDestination field.
+func (r *mutationResolver) CreateDesiredDestination(ctx context.Context, destinationType string, destination model.DesiredDestinationInput) (*model.DesiredDestination, error) {
+	panic(fmt.Errorf("not implemented: CreateDesiredDestination - createDesiredDestination"))
+}
+
+// UpdateDesiredDestination is the resolver for the updateDesiredDestination field.
+func (r *mutationResolver) UpdateDesiredDestination(ctx context.Context, destinationID string, destination model.DesiredDestinationInput) (*model.DesiredDestination, error) {
+	panic(fmt.Errorf("not implemented: UpdateDesiredDestination - updateDesiredDestination"))
+}
+
+// DeleteDesiredDestination is the resolver for the deleteDesiredDestination field.
+func (r *mutationResolver) DeleteDesiredDestination(ctx context.Context, destinationID string) (bool, error) {
+	panic(fmt.Errorf("not implemented: DeleteDesiredDestination - deleteDesiredDestination"))
+}
+
+// ApplyDesiredDestinationToComputePlatform is the resolver for the applyDesiredDestinationToComputePlatform field.
+func (r *mutationResolver) ApplyDesiredDestinationToComputePlatform(ctx context.Context, cpID string, destinationID string) (bool, error) {
+	panic(fmt.Errorf("not implemented: ApplyDesiredDestinationToComputePlatform - applyDesiredDestinationToComputePlatform"))
+}
+
+// RemoveDesiredDestinationFromComputePlatform is the resolver for the removeDesiredDestinationFromComputePlatform field.
+func (r *mutationResolver) RemoveDesiredDestinationFromComputePlatform(ctx context.Context, cpID string, destinationID string) (bool, error) {
+	panic(fmt.Errorf("not implemented: RemoveDesiredDestinationFromComputePlatform - removeDesiredDestinationFromComputePlatform"))
+}
+
+// CreateDesiredAction is the resolver for the createDesiredAction field.
+func (r *mutationResolver) CreateDesiredAction(ctx context.Context, cpID string, action model.DesiredActionInput) (bool, error) {
+	panic(fmt.Errorf("not implemented: CreateDesiredAction - createDesiredAction"))
+}
+
+// UpdateDesiredAction is the resolver for the updateDesiredAction field.
+func (r *mutationResolver) UpdateDesiredAction(ctx context.Context, cpID string, actionID string, action model.DesiredActionInput) (bool, error) {
+	panic(fmt.Errorf("not implemented: UpdateDesiredAction - updateDesiredAction"))
+}
+
+// DeleteActualAction is the resolver for the deleteActualAction field.
+func (r *mutationResolver) DeleteActualAction(ctx context.Context, cpID string, actionID string, kind string) (bool, error) {
+	panic(fmt.Errorf("not implemented: DeleteActualAction - deleteActualAction"))
+}
+
+// ComputePlatform is the resolver for the computePlatform field.
+func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*model.ComputePlatform, error) {
+	panic(fmt.Errorf("not implemented: ComputePlatform - computePlatform"))
+}
+
+// ComputePlatforms is the resolver for the computePlatforms field.
+func (r *queryResolver) ComputePlatforms(ctx context.Context) ([]*model.ComputePlatform, error) {
+
+	return []*model.ComputePlatform{
+		{
+			ID: "1",
+		}}, nil
+}
+
+// DestinationTypeCategories is the resolver for the destinationTypeCategories field.
+func (r *queryResolver) DestinationTypeCategories(ctx context.Context) ([]*model.DestinationTypeCategory, error) {
+	panic(fmt.Errorf("not implemented: DestinationTypeCategories - destinationTypeCategories"))
+}
+
+// DesiredDestinations is the resolver for the desiredDestinations field.
+func (r *queryResolver) DesiredDestinations(ctx context.Context) ([]*model.DesiredDestination, error) {
+	panic(fmt.Errorf("not implemented: DesiredDestinations - desiredDestinations"))
+}
+
+// Mutation returns MutationResolver implementation.
+func (r *Resolver) Mutation() MutationResolver { return &mutationResolver{r} }
+
+// Query returns QueryResolver implementation.
+func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
+
+type mutationResolver struct{ *Resolver }
+type queryResolver struct{ *Resolver }
diff --git a/frontend/main.go b/frontend/main.go
index 5ef09f9f7..3395f06ee 100644
--- a/frontend/main.go
+++ b/frontend/main.go
@@ -32,6 +32,10 @@ import (
 	"github.com/odigos-io/odigos/frontend/endpoints"
 
 	_ "net/http/pprof"
+
+	"github.com/99designs/gqlgen/graphql/handler"
+	"github.com/99designs/gqlgen/graphql/playground"
+	"github.com/odigos-io/odigos/frontend/graph"
 )
 
 const (
@@ -162,6 +166,13 @@ func startHTTPServer(flags *Flags) (*gin.Engine, error) {
 		apis.DELETE("/actions/types/PiiMasking/:id", func(c *gin.Context) { actions.DeletePiiMasking(c, flags.Namespace, c.Param("id")) })
 	}
 
+	// GraphQL handlers
+	gqlHandler := handler.NewDefaultServer(graph.NewExecutableSchema(graph.Config{Resolvers: &graph.Resolver{}}))
+	r.POST("/graphql", func(c *gin.Context) {
+		gqlHandler.ServeHTTP(c.Writer, c.Request)
+	})
+	r.GET("/playground", gin.WrapH(playground.Handler("GraphQL Playground", "/graphql")))
+
 	return r, nil
 }
 

From fb07059821c58d71c7d4b22c952d290ee809328b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 22 Jul 2024 16:22:33 +0300
Subject: [PATCH 093/374] chore: get cp with actual sources

---
 .vscode/launch.json                | 128 +++--
 frontend/endpoints/sources.go      |  67 +++
 frontend/graph/conversions.go      |  83 +++
 frontend/graph/generated.go        | 866 +++++++++++++++++++++++++++--
 frontend/graph/model/models_gen.go |  78 ++-
 frontend/graph/schema.graphqls     |  25 +
 frontend/graph/schema.resolvers.go |  12 +-
 7 files changed, 1158 insertions(+), 101 deletions(-)
 create mode 100644 frontend/graph/conversions.go

diff --git a/.vscode/launch.json b/.vscode/launch.json
index eb87a8e79..7f00a842e 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,61 +1,69 @@
 {
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Remote Odiglet",
-            "type": "go",
-            "request": "attach",
-            "mode": "remote",
-            "debugAdapter": "legacy",
-            "port": 2345,
-            "host": "127.0.0.1",
-            "remotePath": ""
-        },
-        {
-            "name": "instrumentor local",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/instrumentor",
-            "cwd": "${workspaceFolder}/instrumentor"
-        },
-        {
-            "name": "frontend",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/frontend",
-            "cwd": "${workspaceFolder}/frontend",
-            "args": ["--port", "8085", "--address", "0.0.0.0"]
-        },
-        {
-            "name": "autoscaler local",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/autoscaler",
-            "cwd": "${workspaceFolder}/autoscaler",
-            "env": {
-                "ODIGOS_VERSION": "v1.0.71"
-            }
-        },
-        {
-            "name": "scheduler local",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/scheduler",
-            "cwd": "${workspaceFolder}/scheduler"
-        },
-        {
-            "name": "cli uninstall",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/cli",
-            "cwd": "${workspaceFolder}/cli",
-            "args": ["uninstall", "--yes"],
-            "buildFlags": "-tags=embed_manifests"
-        }
-    ]
-}
\ No newline at end of file
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Remote Odiglet",
+      "type": "go",
+      "request": "attach",
+      "mode": "remote",
+      "debugAdapter": "legacy",
+      "port": 2345,
+      "host": "127.0.0.1",
+      "remotePath": ""
+    },
+    {
+      "name": "instrumentor local",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/instrumentor",
+      "cwd": "${workspaceFolder}/instrumentor"
+    },
+    {
+      "name": "frontend",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/frontend",
+      "cwd": "${workspaceFolder}/frontend",
+      "args": ["--port", "8085", "--address", "0.0.0.0"]
+    },
+    {
+      "name": "gql-playground",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/frontend/main.go",
+      "cwd": "${workspaceFolder}/frontend"
+    },
+    {
+      "name": "autoscaler local",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/autoscaler",
+      "cwd": "${workspaceFolder}/autoscaler",
+      "env": {
+        "ODIGOS_VERSION": "v1.0.71"
+      }
+    },
+    {
+      "name": "scheduler local",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/scheduler",
+      "cwd": "${workspaceFolder}/scheduler"
+    },
+    {
+      "name": "cli uninstall",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/cli",
+      "cwd": "${workspaceFolder}/cli",
+      "args": ["uninstall", "--yes"],
+      "buildFlags": "-tags=embed_manifests"
+    }
+  ]
+}
diff --git a/frontend/endpoints/sources.go b/frontend/endpoints/sources.go
index 84cf0a367..79192c4d3 100644
--- a/frontend/endpoints/sources.go
+++ b/frontend/endpoints/sources.go
@@ -48,6 +48,73 @@ type PatchSourceRequest struct {
 	ReportedName *string `json:"reported_name"`
 }
 
+func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
+
+	effectiveInstrumentedSources := map[SourceID]ThinSource{}
+
+	var (
+		items                    []GetApplicationItem
+		instrumentedApplications *v1alpha1.InstrumentedApplicationList
+	)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.Go(func() error {
+		relevantNamespaces, err := getRelevantNameSpaces(ctx, odigosns)
+		if err != nil {
+			return err
+		}
+		nsInstrumentedMap := map[string]*bool{}
+		for _, ns := range relevantNamespaces {
+			nsInstrumentedMap[ns.Name] = isObjectLabeledForInstrumentation(ns.ObjectMeta)
+		}
+		// get all the applications in all the namespaces,
+		// passing an empty string here is more efficient compared to iterating over the namespaces
+		// since it will make a single request per workload type to the k8s api server
+		items, err = getApplicationsInNamespace(ctx, "", nsInstrumentedMap)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		instrumentedApplications, err = kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil
+	}
+
+	for _, item := range items {
+		if item.nsItem.InstrumentationEffective {
+			id := SourceID{Namespace: item.namespace, Kind: string(item.nsItem.Kind), Name: item.nsItem.Name}
+			effectiveInstrumentedSources[id] = ThinSource{
+				NumberOfRunningInstances: item.nsItem.Instances,
+				SourceID:                 id,
+			}
+		}
+	}
+
+	sourcesResult := []ThinSource{}
+	// go over the instrumented applications and update the languages of the effective sources.
+	// Not all effective sources necessarily have a corresponding instrumented application,
+	// it may take some time for the instrumented application to be created. In that case the languages
+	// slice will be empty.
+	for _, app := range instrumentedApplications.Items {
+		thinSource := k8sInstrumentedAppToThinSource(&app)
+		if source, ok := effectiveInstrumentedSources[thinSource.SourceID]; ok {
+			source.IaDetails = thinSource.IaDetails
+			effectiveInstrumentedSources[thinSource.SourceID] = source
+		}
+	}
+
+	for _, source := range effectiveInstrumentedSources {
+		sourcesResult = append(sourcesResult, source)
+	}
+
+	return sourcesResult
+
+}
+
 func GetSources(c *gin.Context, odigosns string) {
 	ctx := c.Request.Context()
 	effectiveInstrumentedSources := map[SourceID]ThinSource{}
diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
new file mode 100644
index 000000000..6dc38cb16
--- /dev/null
+++ b/frontend/graph/conversions.go
@@ -0,0 +1,83 @@
+package graph
+
+import (
+	"time"
+
+	"github.com/odigos-io/odigos/frontend/endpoints"
+	gqlmodel "github.com/odigos-io/odigos/frontend/graph/model"
+	v1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+func k8sKindToGql(k8sResourceKind string) gqlmodel.K8sResourceKind {
+	switch k8sResourceKind {
+	case "Deployment":
+		return gqlmodel.K8sResourceKindDeployment
+	case "StatefulSet":
+		return gqlmodel.K8sResourceKindStatefulSet
+	case "DaemonSet":
+		return gqlmodel.K8sResourceKindDaemonSet
+	}
+	return ""
+}
+
+func k8sConditionStatusToGql(status v1.ConditionStatus) gqlmodel.ConditionStatus {
+	switch status {
+	case v1.ConditionTrue:
+		return gqlmodel.ConditionStatusTrue
+	case v1.ConditionFalse:
+		return gqlmodel.ConditionStatusFalse
+	case v1.ConditionUnknown:
+		return gqlmodel.ConditionStatusUnknown
+	}
+	return gqlmodel.ConditionStatusUnknown
+
+}
+
+func k8sLastTransitionTimeToGql(t v1.Time) *string {
+	if t.IsZero() {
+		return nil
+	}
+	str := t.UTC().Format(time.RFC3339)
+	return &str
+}
+
+func k8sActualSourceToGql(k8sSource *endpoints.ThinSource) *gqlmodel.K8sActualSource {
+
+	hasInstrumentedApplication := k8sSource.IaDetails != nil
+
+	var gqlIaDetails *gqlmodel.InstrumentedApplicationDetails
+	if hasInstrumentedApplication {
+		gqlIaDetails = &gqlmodel.InstrumentedApplicationDetails{
+			Languages:  make([]*gqlmodel.SourceLanguage, len(k8sSource.IaDetails.Languages)),
+			Conditions: make([]*gqlmodel.Condition, len(k8sSource.IaDetails.Conditions)),
+		}
+
+		for i, lang := range k8sSource.IaDetails.Languages {
+			gqlIaDetails.Languages[i] = &gqlmodel.SourceLanguage{
+				ContainerName: lang.ContainerName,
+				Language:      lang.Language,
+			}
+		}
+
+		for i, cond := range k8sSource.IaDetails.Conditions {
+			gqlIaDetails.Conditions[i] = &gqlmodel.Condition{
+				Type:               cond.Type,
+				Status:             k8sConditionStatusToGql(cond.Status),
+				Reason:             &cond.Reason,
+				LastTransitionTime: k8sLastTransitionTimeToGql(cond.LastTransitionTime),
+				Message:            &cond.Message,
+			}
+		}
+	}
+
+	serviceName := "test-service-name"
+
+	return &gqlmodel.K8sActualSource{
+		Namespace:                      k8sSource.Namespace,
+		Kind:                           k8sKindToGql(k8sSource.Kind),
+		Name:                           k8sSource.Name,
+		ServiceName:                    &serviceName,
+		NumberOfInstances:              &k8sSource.NumberOfRunningInstances,
+		InstrumentedApplicationDetails: gqlIaDetails,
+	}
+}
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 06d30cc55..8bbd7df4d 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -76,6 +76,14 @@ type ComplexityRoot struct {
 		Name                func(childComplexity int) int
 	}
 
+	Condition struct {
+		LastTransitionTime func(childComplexity int) int
+		Message            func(childComplexity int) int
+		Reason             func(childComplexity int) int
+		Status             func(childComplexity int) int
+		Type               func(childComplexity int) int
+	}
+
 	DesiredDestination struct {
 		ComputePlatforms func(childComplexity int) int
 		ExportSignals    func(childComplexity int) int
@@ -115,6 +123,11 @@ type ComplexityRoot struct {
 		VideoURL       func(childComplexity int) int
 	}
 
+	InstrumentedApplicationDetails struct {
+		Conditions func(childComplexity int) int
+		Languages  func(childComplexity int) int
+	}
+
 	K8sActualNamespace struct {
 		AutoInstrumented func(childComplexity int) int
 		K8sActualSources func(childComplexity int) int
@@ -122,14 +135,15 @@ type ComplexityRoot struct {
 	}
 
 	K8sActualSource struct {
-		AutoInstrumented           func(childComplexity int) int
-		CreationTimestamp          func(childComplexity int) int
-		HasInstrumentedApplication func(childComplexity int) int
-		Kind                       func(childComplexity int) int
-		Name                       func(childComplexity int) int
-		Namespace                  func(childComplexity int) int
-		NumberOfInstances          func(childComplexity int) int
-		ServiceName                func(childComplexity int) int
+		AutoInstrumented               func(childComplexity int) int
+		CreationTimestamp              func(childComplexity int) int
+		HasInstrumentedApplication     func(childComplexity int) int
+		InstrumentedApplicationDetails func(childComplexity int) int
+		Kind                           func(childComplexity int) int
+		Name                           func(childComplexity int) int
+		Namespace                      func(childComplexity int) int
+		NumberOfInstances              func(childComplexity int) int
+		ServiceName                    func(childComplexity int) int
 	}
 
 	K8sActualSourceRuntimeInfo struct {
@@ -162,6 +176,11 @@ type ComplexityRoot struct {
 		DesiredDestinations       func(childComplexity int) int
 		DestinationTypeCategories func(childComplexity int) int
 	}
+
+	SourceLanguage struct {
+		ContainerName func(childComplexity int) int
+		Language      func(childComplexity int) int
+	}
 }
 
 type MutationResolver interface {
@@ -349,6 +368,41 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ComputePlatform.Name(childComplexity), true
 
+	case "Condition.lastTransitionTime":
+		if e.complexity.Condition.LastTransitionTime == nil {
+			break
+		}
+
+		return e.complexity.Condition.LastTransitionTime(childComplexity), true
+
+	case "Condition.message":
+		if e.complexity.Condition.Message == nil {
+			break
+		}
+
+		return e.complexity.Condition.Message(childComplexity), true
+
+	case "Condition.reason":
+		if e.complexity.Condition.Reason == nil {
+			break
+		}
+
+		return e.complexity.Condition.Reason(childComplexity), true
+
+	case "Condition.status":
+		if e.complexity.Condition.Status == nil {
+			break
+		}
+
+		return e.complexity.Condition.Status(childComplexity), true
+
+	case "Condition.type":
+		if e.complexity.Condition.Type == nil {
+			break
+		}
+
+		return e.complexity.Condition.Type(childComplexity), true
+
 	case "DesiredDestination.computePlatforms":
 		if e.complexity.DesiredDestination.ComputePlatforms == nil {
 			break
@@ -517,6 +571,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.DestinationTypeField.VideoURL(childComplexity), true
 
+	case "InstrumentedApplicationDetails.conditions":
+		if e.complexity.InstrumentedApplicationDetails.Conditions == nil {
+			break
+		}
+
+		return e.complexity.InstrumentedApplicationDetails.Conditions(childComplexity), true
+
+	case "InstrumentedApplicationDetails.languages":
+		if e.complexity.InstrumentedApplicationDetails.Languages == nil {
+			break
+		}
+
+		return e.complexity.InstrumentedApplicationDetails.Languages(childComplexity), true
+
 	case "K8sActualNamespace.autoInstrumented":
 		if e.complexity.K8sActualNamespace.AutoInstrumented == nil {
 			break
@@ -559,6 +627,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualSource.HasInstrumentedApplication(childComplexity), true
 
+	case "K8sActualSource.instrumentedApplicationDetails":
+		if e.complexity.K8sActualSource.InstrumentedApplicationDetails == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.InstrumentedApplicationDetails(childComplexity), true
+
 	case "K8sActualSource.kind":
 		if e.complexity.K8sActualSource.Kind == nil {
 			break
@@ -792,6 +867,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.DestinationTypeCategories(childComplexity), true
 
+	case "SourceLanguage.containerName":
+		if e.complexity.SourceLanguage.ContainerName == nil {
+			break
+		}
+
+		return e.complexity.SourceLanguage.ContainerName(childComplexity), true
+
+	case "SourceLanguage.language":
+		if e.complexity.SourceLanguage.Language == nil {
+			break
+		}
+
+		return e.complexity.SourceLanguage.Language(childComplexity), true
+
 	}
 	return 0, false
 }
@@ -2160,6 +2249,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ cont
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 			case "hasInstrumentedApplication":
 				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 			}
 			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
 		},
@@ -2283,6 +2374,217 @@ func (ec *executionContext) fieldContext_ComputePlatform_actualActions(_ context
 	return fc, nil
 }
 
+func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_status(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_status(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Status, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ConditionStatus)
+	fc.Result = res
+	return ec.marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_status(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ConditionStatus does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.LastTransitionTime, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_reason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Reason, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_message(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Message, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _DesiredDestination_id(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_DesiredDestination_id(ctx, field)
 	if err != nil {
@@ -3397,6 +3699,106 @@ func (ec *executionContext) fieldContext_DestinationTypeField_initialValue(_ con
 	return fc, nil
 }
 
+func (ec *executionContext) _InstrumentedApplicationDetails_languages(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_languages(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Languages, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*model.SourceLanguage)
+	fc.Result = res
+	return ec.marshalOSourceLanguage2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguageᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_languages(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentedApplicationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "containerName":
+				return ec.fieldContext_SourceLanguage_containerName(ctx, field)
+			case "language":
+				return ec.fieldContext_SourceLanguage_language(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SourceLanguage", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Conditions, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*model.Condition)
+	fc.Result = res
+	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentedApplicationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_Condition_type(ctx, field)
+			case "status":
+				return ec.fieldContext_Condition_status(ctx, field)
+			case "lastTransitionTime":
+				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+			case "reason":
+				return ec.fieldContext_Condition_reason(ctx, field)
+			case "message":
+				return ec.fieldContext_Condition_message(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
 	if err != nil {
@@ -3537,6 +3939,8 @@ func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(_ c
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 			case "hasInstrumentedApplication":
 				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 			}
 			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
 		},
@@ -3884,6 +4288,53 @@ func (ec *executionContext) fieldContext_K8sActualSource_hasInstrumentedApplicat
 	return fc, nil
 }
 
+func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InstrumentedApplicationDetails, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.InstrumentedApplicationDetails)
+	fc.Result = res
+	return ec.marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplicationDetails(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "languages":
+				return ec.fieldContext_InstrumentedApplicationDetails_languages(ctx, field)
+			case "conditions":
+				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _K8sActualSourceRuntimeInfo_mainContainer(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfo) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfo_mainContainer(ctx, field)
 	if err != nil {
@@ -5012,8 +5463,107 @@ func (ec *executionContext) fieldContext_Query___type(ctx context.Context, field
 	return fc, nil
 }
 
-func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query___schema(ctx, field)
+func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___schema(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.introspectSchema()
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Schema)
+	fc.Result = res
+	return ec.marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "description":
+				return ec.fieldContext___Schema_description(ctx, field)
+			case "types":
+				return ec.fieldContext___Schema_types(ctx, field)
+			case "queryType":
+				return ec.fieldContext___Schema_queryType(ctx, field)
+			case "mutationType":
+				return ec.fieldContext___Schema_mutationType(ctx, field)
+			case "subscriptionType":
+				return ec.fieldContext___Schema_subscriptionType(ctx, field)
+			case "directives":
+				return ec.fieldContext___Schema_directives(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Schema", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SourceLanguage_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceLanguage) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceLanguage_containerName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ContainerName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SourceLanguage_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SourceLanguage",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SourceLanguage_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceLanguage) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceLanguage_language(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5026,42 +5576,31 @@ func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.C
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.introspectSchema()
+		return obj.Language, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*introspection.Schema)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SourceLanguage_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Query",
+		Object:     "SourceLanguage",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "description":
-				return ec.fieldContext___Schema_description(ctx, field)
-			case "types":
-				return ec.fieldContext___Schema_types(ctx, field)
-			case "queryType":
-				return ec.fieldContext___Schema_queryType(ctx, field)
-			case "mutationType":
-				return ec.fieldContext___Schema_mutationType(ctx, field)
-			case "subscriptionType":
-				return ec.fieldContext___Schema_subscriptionType(ctx, field)
-			case "directives":
-				return ec.fieldContext___Schema_directives(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Schema", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
@@ -7345,6 +7884,56 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 	return out
 }
 
+var conditionImplementors = []string{"Condition"}
+
+func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet, obj *model.Condition) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, conditionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Condition")
+		case "type":
+			out.Values[i] = ec._Condition_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "status":
+			out.Values[i] = ec._Condition_status(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "lastTransitionTime":
+			out.Values[i] = ec._Condition_lastTransitionTime(ctx, field, obj)
+		case "reason":
+			out.Values[i] = ec._Condition_reason(ctx, field, obj)
+		case "message":
+			out.Values[i] = ec._Condition_message(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var desiredDestinationImplementors = []string{"DesiredDestination"}
 
 func (ec *executionContext) _DesiredDestination(ctx context.Context, sel ast.SelectionSet, obj *model.DesiredDestination) graphql.Marshaler {
@@ -7623,6 +8212,44 @@ func (ec *executionContext) _DestinationTypeField(ctx context.Context, sel ast.S
 	return out
 }
 
+var instrumentedApplicationDetailsImplementors = []string{"InstrumentedApplicationDetails"}
+
+func (ec *executionContext) _InstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentedApplicationDetails) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentedApplicationDetailsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("InstrumentedApplicationDetails")
+		case "languages":
+			out.Values[i] = ec._InstrumentedApplicationDetails_languages(ctx, field, obj)
+		case "conditions":
+			out.Values[i] = ec._InstrumentedApplicationDetails_conditions(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var k8sActualNamespaceImplementors = []string{"K8sActualNamespace"}
 
 func (ec *executionContext) _K8sActualNamespace(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualNamespace) graphql.Marshaler {
@@ -7708,6 +8335,8 @@ func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.Select
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "instrumentedApplicationDetails":
+			out.Values[i] = ec._K8sActualSource_instrumentedApplicationDetails(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8063,6 +8692,50 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 	return out
 }
 
+var sourceLanguageImplementors = []string{"SourceLanguage"}
+
+func (ec *executionContext) _SourceLanguage(ctx context.Context, sel ast.SelectionSet, obj *model.SourceLanguage) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, sourceLanguageImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("SourceLanguage")
+		case "containerName":
+			out.Values[i] = ec._SourceLanguage_containerName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "language":
+			out.Values[i] = ec._SourceLanguage_language(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var __DirectiveImplementors = []string{"__Directive"}
 
 func (ec *executionContext) ___Directive(ctx context.Context, sel ast.SelectionSet, obj *introspection.Directive) graphql.Marshaler {
@@ -8544,6 +9217,26 @@ func (ec *executionContext) marshalNComputePlatformType2githubᚗcomᚋodigosᚑ
 	return v
 }
 
+func (ec *executionContext) marshalNCondition2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐCondition(ctx context.Context, sel ast.SelectionSet, v *model.Condition) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._Condition(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx context.Context, v interface{}) (model.ConditionStatus, error) {
+	var res model.ConditionStatus
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx context.Context, sel ast.SelectionSet, v model.ConditionStatus) graphql.Marshaler {
+	return v
+}
+
 func (ec *executionContext) unmarshalNDesiredActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredActionInput(ctx context.Context, v interface{}) (model.DesiredActionInput, error) {
 	res, err := ec.unmarshalInputDesiredActionInput(ctx, v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -8948,6 +9641,16 @@ func (ec *executionContext) marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋo
 	return ret
 }
 
+func (ec *executionContext) marshalNSourceLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguage(ctx context.Context, sel ast.SelectionSet, v *model.SourceLanguage) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._SourceLanguage(ctx, sel, v)
+}
+
 func (ec *executionContext) unmarshalNString2string(ctx context.Context, v interface{}) (string, error) {
 	res, err := graphql.UnmarshalString(v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -9304,6 +10007,53 @@ func (ec *executionContext) marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑi
 	return ec._ComputePlatform(ctx, sel, v)
 }
 
+func (ec *executionContext) marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.Condition) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNCondition2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐCondition(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
 func (ec *executionContext) marshalODesiredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v []*model.DesiredDestination) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
@@ -9407,6 +10157,13 @@ func (ec *executionContext) marshalODestinationTypeCategory2ᚖgithubᚗcomᚋod
 	return ec._DestinationTypeCategory(ctx, sel, v)
 }
 
+func (ec *executionContext) marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentedApplicationDetails) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._InstrumentedApplicationDetails(ctx, sel, v)
+}
+
 func (ec *executionContext) unmarshalOInt2ᚖint(ctx context.Context, v interface{}) (*int, error) {
 	if v == nil {
 		return nil, nil
@@ -9444,6 +10201,53 @@ func (ec *executionContext) marshalOK8sActualSourceRuntimeInfoContainer2ᚖgithu
 	return ec._K8sActualSourceRuntimeInfoContainer(ctx, sel, v)
 }
 
+func (ec *executionContext) marshalOSourceLanguage2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguageᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.SourceLanguage) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNSourceLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguage(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
 func (ec *executionContext) unmarshalOString2ᚖstring(ctx context.Context, v interface{}) (*string, error) {
 	if v == nil {
 		return nil, nil
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index f6da0e88c..8a8f8bf0c 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -37,6 +37,14 @@ type ComputePlatform struct {
 	ActualActions       []*ActualAction       `json:"actualActions"`
 }
 
+type Condition struct {
+	Type               string          `json:"type"`
+	Status             ConditionStatus `json:"status"`
+	LastTransitionTime *string         `json:"lastTransitionTime,omitempty"`
+	Reason             *string         `json:"reason,omitempty"`
+	Message            *string         `json:"message,omitempty"`
+}
+
 type DesiredActionInput struct {
 	Kind    string       `json:"kind"`
 	Name    *string      `json:"name,omitempty"`
@@ -96,6 +104,11 @@ type DestinationTypeField struct {
 	InitialValue   *string `json:"initialValue,omitempty"`
 }
 
+type InstrumentedApplicationDetails struct {
+	Languages  []*SourceLanguage `json:"languages,omitempty"`
+	Conditions []*Condition      `json:"conditions,omitempty"`
+}
+
 type K8sActualNamespace struct {
 	Name             string             `json:"name"`
 	AutoInstrumented *bool              `json:"autoInstrumented,omitempty"`
@@ -103,14 +116,15 @@ type K8sActualNamespace struct {
 }
 
 type K8sActualSource struct {
-	Namespace                  string          `json:"namespace"`
-	Kind                       K8sResourceKind `json:"kind"`
-	Name                       string          `json:"name"`
-	ServiceName                *string         `json:"serviceName,omitempty"`
-	AutoInstrumented           *bool           `json:"autoInstrumented,omitempty"`
-	CreationTimestamp          *string         `json:"creationTimestamp,omitempty"`
-	NumberOfInstances          *int            `json:"numberOfInstances,omitempty"`
-	HasInstrumentedApplication bool            `json:"hasInstrumentedApplication"`
+	Namespace                      string                          `json:"namespace"`
+	Kind                           K8sResourceKind                 `json:"kind"`
+	Name                           string                          `json:"name"`
+	ServiceName                    *string                         `json:"serviceName,omitempty"`
+	AutoInstrumented               *bool                           `json:"autoInstrumented,omitempty"`
+	CreationTimestamp              *string                         `json:"creationTimestamp,omitempty"`
+	NumberOfInstances              *int                            `json:"numberOfInstances,omitempty"`
+	HasInstrumentedApplication     bool                            `json:"hasInstrumentedApplication"`
+	InstrumentedApplicationDetails *InstrumentedApplicationDetails `json:"instrumentedApplicationDetails,omitempty"`
 }
 
 type K8sActualSourceRuntimeInfo struct {
@@ -147,6 +161,11 @@ type Mutation struct {
 type Query struct {
 }
 
+type SourceLanguage struct {
+	ContainerName string `json:"containerName"`
+	Language      string `json:"language"`
+}
+
 type WorkloadInput struct {
 	Kind      K8sResourceKind `json:"kind"`
 	Name      string          `json:"name"`
@@ -194,6 +213,49 @@ func (e ComputePlatformType) MarshalGQL(w io.Writer) {
 	fmt.Fprint(w, strconv.Quote(e.String()))
 }
 
+type ConditionStatus string
+
+const (
+	ConditionStatusTrue    ConditionStatus = "True"
+	ConditionStatusFalse   ConditionStatus = "False"
+	ConditionStatusUnknown ConditionStatus = "Unknown"
+)
+
+var AllConditionStatus = []ConditionStatus{
+	ConditionStatusTrue,
+	ConditionStatusFalse,
+	ConditionStatusUnknown,
+}
+
+func (e ConditionStatus) IsValid() bool {
+	switch e {
+	case ConditionStatusTrue, ConditionStatusFalse, ConditionStatusUnknown:
+		return true
+	}
+	return false
+}
+
+func (e ConditionStatus) String() string {
+	return string(e)
+}
+
+func (e *ConditionStatus) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = ConditionStatus(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid ConditionStatus", str)
+	}
+	return nil
+}
+
+func (e ConditionStatus) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
 type K8sResourceKind string
 
 const (
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index d03d61729..9eee8f6a4 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -9,6 +9,12 @@ enum K8sResourceKind {
   StatefulSet
 }
 
+enum ConditionStatus {
+  True
+  False
+  Unknown
+}
+
 enum ProgrammingLanguage {
   Unspecified
   Java
@@ -32,6 +38,24 @@ enum SpanKind {
   Consumer
 }
 
+type SourceLanguage {
+  containerName: String!
+  language: String!
+}
+
+type InstrumentedApplicationDetails {
+  languages: [SourceLanguage!]
+  conditions: [Condition!]
+}
+
+type Condition {
+  type: String!
+  status: ConditionStatus!
+  lastTransitionTime: String
+  reason: String
+  message: String
+}
+
 type K8sActualNamespace {
   name: String!
   autoInstrumented: Boolean
@@ -57,6 +81,7 @@ type K8sActualSource {
   # Odigos records an array of runtime infos.
   # currently we only keep the first one assuming it is the user's app.
   hasInstrumentedApplication: Boolean!
+  instrumentedApplicationDetails: InstrumentedApplicationDetails
 }
 type K8sActualSourceRuntimeInfo {
   mainContainer: K8sActualSourceRuntimeInfoContainer
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 473e81de6..432b7cd36 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -8,6 +8,7 @@ import (
 	"context"
 	"fmt"
 
+	"github.com/odigos-io/odigos/frontend/endpoints"
 	"github.com/odigos-io/odigos/frontend/graph/model"
 )
 
@@ -73,12 +74,19 @@ func (r *mutationResolver) DeleteActualAction(ctx context.Context, cpID string,
 
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*model.ComputePlatform, error) {
-	panic(fmt.Errorf("not implemented: ComputePlatform - computePlatform"))
+	k8sActualSources := endpoints.GetActualSources(ctx, "odigos-system")
+	res := make([]*model.K8sActualSource, len(k8sActualSources))
+	for i, source := range k8sActualSources {
+		res[i] = k8sActualSourceToGql(&source)
+	}
+
+	return &model.ComputePlatform{
+		K8sActualSources: res,
+	}, nil
 }
 
 // ComputePlatforms is the resolver for the computePlatforms field.
 func (r *queryResolver) ComputePlatforms(ctx context.Context) ([]*model.ComputePlatform, error) {
-
 	return []*model.ComputePlatform{
 		{
 			ID: "1",

From 7ad840676f68cd48675177291c21fb2a58365e5c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 22 Jul 2024 16:24:58 +0300
Subject: [PATCH 094/374] chore: remove service name

---
 frontend/graph/conversions.go | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
index 6dc38cb16..a6ce2fdc6 100644
--- a/frontend/graph/conversions.go
+++ b/frontend/graph/conversions.go
@@ -70,13 +70,10 @@ func k8sActualSourceToGql(k8sSource *endpoints.ThinSource) *gqlmodel.K8sActualSo
 		}
 	}
 
-	serviceName := "test-service-name"
-
 	return &gqlmodel.K8sActualSource{
 		Namespace:                      k8sSource.Namespace,
 		Kind:                           k8sKindToGql(k8sSource.Kind),
 		Name:                           k8sSource.Name,
-		ServiceName:                    &serviceName,
 		NumberOfInstances:              &k8sSource.NumberOfRunningInstances,
 		InstrumentedApplicationDetails: gqlIaDetails,
 	}

From 0ae9afd5ec2426bea93db6eff29761d52541696a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 10:23:43 +0300
Subject: [PATCH 095/374] chore: wip

---
 frontend/Makefile                    |   2 +
 frontend/endpoints/actual-sources.go | 146 +++++++++++++
 frontend/endpoints/sources.go        |  67 ------
 frontend/gqlgen.yml                  |  18 ++
 frontend/graph/conversions.go        |  14 +-
 frontend/graph/generated.go          | 299 +++++++++++++++------------
 frontend/graph/model/models_gen.go   |   1 +
 frontend/graph/schema.graphqls       |   6 +-
 frontend/graph/schema.resolvers.go   |  45 +++-
 9 files changed, 386 insertions(+), 212 deletions(-)
 create mode 100644 frontend/Makefile
 create mode 100644 frontend/endpoints/actual-sources.go

diff --git a/frontend/Makefile b/frontend/Makefile
new file mode 100644
index 000000000..a3dc15e31
--- /dev/null
+++ b/frontend/Makefile
@@ -0,0 +1,2 @@
+gqlgen:
+	go run github.com/99designs/gqlgen generate
\ No newline at end of file
diff --git a/frontend/endpoints/actual-sources.go b/frontend/endpoints/actual-sources.go
new file mode 100644
index 000000000..e11d0c32a
--- /dev/null
+++ b/frontend/endpoints/actual-sources.go
@@ -0,0 +1,146 @@
+package endpoints
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/kube"
+
+	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
+	"golang.org/x/sync/errgroup"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
+
+	effectiveInstrumentedSources := map[SourceID]ThinSource{}
+
+	var (
+		items                    []GetApplicationItem
+		instrumentedApplications *v1alpha1.InstrumentedApplicationList
+	)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.Go(func() error {
+		relevantNamespaces, err := getRelevantNameSpaces(ctx, odigosns)
+		if err != nil {
+			return err
+		}
+		nsInstrumentedMap := map[string]*bool{}
+		for _, ns := range relevantNamespaces {
+			nsInstrumentedMap[ns.Name] = isObjectLabeledForInstrumentation(ns.ObjectMeta)
+		}
+		// get all the applications in all the namespaces,
+		// passing an empty string here is more efficient compared to iterating over the namespaces
+		// since it will make a single request per workload type to the k8s api server
+		items, err = getApplicationsInNamespace(ctx, "", nsInstrumentedMap)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		instrumentedApplications, err = kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil
+	}
+
+	for _, item := range items {
+		if item.nsItem.InstrumentationEffective {
+			id := SourceID{Namespace: item.namespace, Kind: string(item.nsItem.Kind), Name: item.nsItem.Name}
+			effectiveInstrumentedSources[id] = ThinSource{
+				NumberOfRunningInstances: item.nsItem.Instances,
+				SourceID:                 id,
+			}
+		}
+	}
+
+	sourcesResult := []ThinSource{}
+	// go over the instrumented applications and update the languages of the effective sources.
+	// Not all effective sources necessarily have a corresponding instrumented application,
+	// it may take some time for the instrumented application to be created. In that case the languages
+	// slice will be empty.
+	for _, app := range instrumentedApplications.Items {
+		thinSource := k8sInstrumentedAppToThinSource(&app)
+		if source, ok := effectiveInstrumentedSources[thinSource.SourceID]; ok {
+			source.IaDetails = thinSource.IaDetails
+			effectiveInstrumentedSources[thinSource.SourceID] = source
+		}
+	}
+
+	for _, source := range effectiveInstrumentedSources {
+		sourcesResult = append(sourcesResult, source)
+	}
+
+	return sourcesResult
+
+}
+
+func GetActualSource(ctx context.Context, ns string, kind string, name string) (*Source, error) {
+
+	k8sObjectName := workload.GetRuntimeObjectName(name, kind)
+
+	owner, numberOfRunningInstances := getWorkload(ctx, ns, kind, name)
+	if owner == nil {
+		return nil, fmt.Errorf("owner not found")
+	}
+	ownerAnnotations := owner.GetAnnotations()
+	var reportedName string
+	if ownerAnnotations != nil {
+		reportedName = ownerAnnotations[consts.OdigosReportedNameAnnotation]
+	}
+
+	ts := ThinSource{
+		SourceID: SourceID{
+			Namespace: ns,
+			Kind:      kind,
+			Name:      name,
+		},
+		NumberOfRunningInstances: numberOfRunningInstances,
+	}
+
+	instrumentedApplication, err := kube.DefaultClient.OdigosClient.InstrumentedApplications(ns).Get(ctx, k8sObjectName, metav1.GetOptions{})
+	if err == nil {
+		// valid instrumented application, grab the runtime details
+		ts.IaDetails = k8sInstrumentedAppToThinSource(instrumentedApplication).IaDetails
+		// potentially add a condition for healthy instrumentation instances
+		err = addHealthyInstrumentationInstancesCondition(ctx, instrumentedApplication, &ts)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	return &Source{
+		ThinSource:   ts,
+		ReportedName: reportedName,
+	}, nil
+}
+
+func getWorkload(c context.Context, ns string, kind string, name string) (metav1.Object, int) {
+	switch kind {
+	case "Deployment":
+		deployment, err := kube.DefaultClient.AppsV1().Deployments(ns).Get(c, name, metav1.GetOptions{})
+		if err != nil {
+			return nil, 0
+		}
+		return deployment, int(deployment.Status.AvailableReplicas)
+	case "StatefulSet":
+		statefulSet, err := kube.DefaultClient.AppsV1().StatefulSets(ns).Get(c, name, metav1.GetOptions{})
+		if err != nil {
+			return nil, 0
+		}
+		return statefulSet, int(statefulSet.Status.ReadyReplicas)
+	case "DaemonSet":
+		daemonSet, err := kube.DefaultClient.AppsV1().DaemonSets(ns).Get(c, name, metav1.GetOptions{})
+		if err != nil {
+			return nil, 0
+		}
+		return daemonSet, int(daemonSet.Status.NumberReady)
+	default:
+		return nil, 0
+	}
+}
diff --git a/frontend/endpoints/sources.go b/frontend/endpoints/sources.go
index 79192c4d3..84cf0a367 100644
--- a/frontend/endpoints/sources.go
+++ b/frontend/endpoints/sources.go
@@ -48,73 +48,6 @@ type PatchSourceRequest struct {
 	ReportedName *string `json:"reported_name"`
 }
 
-func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
-
-	effectiveInstrumentedSources := map[SourceID]ThinSource{}
-
-	var (
-		items                    []GetApplicationItem
-		instrumentedApplications *v1alpha1.InstrumentedApplicationList
-	)
-
-	g, ctx := errgroup.WithContext(ctx)
-	g.Go(func() error {
-		relevantNamespaces, err := getRelevantNameSpaces(ctx, odigosns)
-		if err != nil {
-			return err
-		}
-		nsInstrumentedMap := map[string]*bool{}
-		for _, ns := range relevantNamespaces {
-			nsInstrumentedMap[ns.Name] = isObjectLabeledForInstrumentation(ns.ObjectMeta)
-		}
-		// get all the applications in all the namespaces,
-		// passing an empty string here is more efficient compared to iterating over the namespaces
-		// since it will make a single request per workload type to the k8s api server
-		items, err = getApplicationsInNamespace(ctx, "", nsInstrumentedMap)
-		return err
-	})
-
-	g.Go(func() error {
-		var err error
-		instrumentedApplications, err = kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
-		return err
-	})
-
-	if err := g.Wait(); err != nil {
-		return nil
-	}
-
-	for _, item := range items {
-		if item.nsItem.InstrumentationEffective {
-			id := SourceID{Namespace: item.namespace, Kind: string(item.nsItem.Kind), Name: item.nsItem.Name}
-			effectiveInstrumentedSources[id] = ThinSource{
-				NumberOfRunningInstances: item.nsItem.Instances,
-				SourceID:                 id,
-			}
-		}
-	}
-
-	sourcesResult := []ThinSource{}
-	// go over the instrumented applications and update the languages of the effective sources.
-	// Not all effective sources necessarily have a corresponding instrumented application,
-	// it may take some time for the instrumented application to be created. In that case the languages
-	// slice will be empty.
-	for _, app := range instrumentedApplications.Items {
-		thinSource := k8sInstrumentedAppToThinSource(&app)
-		if source, ok := effectiveInstrumentedSources[thinSource.SourceID]; ok {
-			source.IaDetails = thinSource.IaDetails
-			effectiveInstrumentedSources[thinSource.SourceID] = source
-		}
-	}
-
-	for _, source := range effectiveInstrumentedSources {
-		sourcesResult = append(sourcesResult, source)
-	}
-
-	return sourcesResult
-
-}
-
 func GetSources(c *gin.Context, odigosns string) {
 	ctx := c.Request.Context()
 	effectiveInstrumentedSources := map[SourceID]ThinSource{}
diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
index f54df5faf..16744a23f 100644
--- a/frontend/gqlgen.yml
+++ b/frontend/gqlgen.yml
@@ -23,3 +23,21 @@ resolver:
   dir: graph
   package: graph
   filename_template: '{name}.resolvers.go'
+
+models:
+  ID:
+    model:
+      - github.com/99designs/gqlgen/graphql.ID
+      - github.com/99designs/gqlgen/graphql.Int
+      - github.com/99designs/gqlgen/graphql.Int64
+      - github.com/99designs/gqlgen/graphql.Int32
+  Int:
+    model:
+      - github.com/99designs/gqlgen/graphql.Int
+      - github.com/99designs/gqlgen/graphql.Int64
+      - github.com/99designs/gqlgen/graphql.Int32
+
+  ComputePlatform:
+    fields:
+      k8sActualSource:
+        resolver: true
diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
index a6ce2fdc6..49b433f2d 100644
--- a/frontend/graph/conversions.go
+++ b/frontend/graph/conversions.go
@@ -41,7 +41,7 @@ func k8sLastTransitionTimeToGql(t v1.Time) *string {
 	return &str
 }
 
-func k8sActualSourceToGql(k8sSource *endpoints.ThinSource) *gqlmodel.K8sActualSource {
+func k8sThinSourceToGql(k8sSource *endpoints.ThinSource) *gqlmodel.K8sActualSource {
 
 	hasInstrumentedApplication := k8sSource.IaDetails != nil
 
@@ -78,3 +78,15 @@ func k8sActualSourceToGql(k8sSource *endpoints.ThinSource) *gqlmodel.K8sActualSo
 		InstrumentedApplicationDetails: gqlIaDetails,
 	}
 }
+
+func k8sSourceToGql(k8sSource *endpoints.Source) *gqlmodel.K8sActualSource {
+	baseSource := k8sThinSourceToGql(&k8sSource.ThinSource)
+	return &gqlmodel.K8sActualSource{
+		Namespace:                      baseSource.Namespace,
+		Kind:                           baseSource.Kind,
+		Name:                           baseSource.Name,
+		NumberOfInstances:              baseSource.NumberOfInstances,
+		InstrumentedApplicationDetails: baseSource.InstrumentedApplicationDetails,
+		ServiceName:                    &k8sSource.ReportedName,
+	}
+}
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 8bbd7df4d..ba6988c46 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -39,6 +39,7 @@ type Config struct {
 }
 
 type ResolverRoot interface {
+	ComputePlatform() ComputePlatformResolver
 	Mutation() MutationResolver
 	Query() QueryResolver
 }
@@ -72,6 +73,7 @@ type ComplexityRoot struct {
 		ID                  func(childComplexity int) int
 		K8sActualNamespace  func(childComplexity int, name string) int
 		K8sActualNamespaces func(childComplexity int) int
+		K8sActualSource     func(childComplexity int, name *string, namespace *string, kind *string) int
 		K8sActualSources    func(childComplexity int) int
 		Name                func(childComplexity int) int
 	}
@@ -172,7 +174,6 @@ type ComplexityRoot struct {
 
 	Query struct {
 		ComputePlatform           func(childComplexity int, cpID string) int
-		ComputePlatforms          func(childComplexity int) int
 		DesiredDestinations       func(childComplexity int) int
 		DestinationTypeCategories func(childComplexity int) int
 	}
@@ -183,6 +184,9 @@ type ComplexityRoot struct {
 	}
 }
 
+type ComputePlatformResolver interface {
+	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
+}
 type MutationResolver interface {
 	ApplyDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID, ns model.K8sDesiredNamespaceInput) (bool, error)
 	DeleteDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID) (bool, error)
@@ -199,7 +203,6 @@ type MutationResolver interface {
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context, cpID string) (*model.ComputePlatform, error)
-	ComputePlatforms(ctx context.Context) ([]*model.ComputePlatform, error)
 	DestinationTypeCategories(ctx context.Context) ([]*model.DestinationTypeCategory, error)
 	DesiredDestinations(ctx context.Context) ([]*model.DesiredDestination, error)
 }
@@ -354,6 +357,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ComputePlatform.K8sActualNamespaces(childComplexity), true
 
+	case "ComputePlatform.k8sActualSource":
+		if e.complexity.ComputePlatform.K8sActualSource == nil {
+			break
+		}
+
+		args, err := ec.field_ComputePlatform_k8sActualSource_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.ComputePlatform.K8sActualSource(childComplexity, args["name"].(*string), args["namespace"].(*string), args["kind"].(*string)), true
+
 	case "ComputePlatform.k8sActualSources":
 		if e.complexity.ComputePlatform.K8sActualSources == nil {
 			break
@@ -846,13 +861,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.ComputePlatform(childComplexity, args["cpId"].(string)), true
 
-	case "Query.computePlatforms":
-		if e.complexity.Query.ComputePlatforms == nil {
-			break
-		}
-
-		return e.complexity.Query.ComputePlatforms(childComplexity), true
-
 	case "Query.desiredDestinations":
 		if e.complexity.Query.DesiredDestinations == nil {
 			break
@@ -1028,6 +1036,39 @@ func (ec *executionContext) field_ComputePlatform_k8sActualNamespace_args(ctx co
 	return args, nil
 }
 
+func (ec *executionContext) field_ComputePlatform_k8sActualSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 *string
+	if tmp, ok := rawArgs["name"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+		arg0, err = ec.unmarshalOString2ᚖstring(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["name"] = arg0
+	var arg1 *string
+	if tmp, ok := rawArgs["namespace"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+		arg1, err = ec.unmarshalOString2ᚖstring(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["namespace"] = arg1
+	var arg2 *string
+	if tmp, ok := rawArgs["kind"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+		arg2, err = ec.unmarshalOString2ᚖstring(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["kind"] = arg2
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_applyDesiredDestinationToComputePlatform_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -2194,6 +2235,78 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ c
 	return fc, nil
 }
 
+func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualSource(rctx, obj, fc.Args["name"].(*string), fc.Args["namespace"].(*string), fc.Args["kind"].(*string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "creationTimestamp":
+				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "hasInstrumentedApplication":
+				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_ComputePlatform_k8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
 	if err != nil {
@@ -2874,6 +2987,8 @@ func (ec *executionContext) fieldContext_DesiredDestination_computePlatforms(_ c
 				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
 			case "k8sActualNamespaces":
 				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+			case "k8sActualSource":
+				return ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
 			case "k8sActualSources":
 				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
 			case "actualDestinations":
@@ -5204,6 +5319,8 @@ func (ec *executionContext) fieldContext_Query_computePlatform(ctx context.Conte
 				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
 			case "k8sActualNamespaces":
 				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+			case "k8sActualSource":
+				return ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
 			case "k8sActualSources":
 				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
 			case "actualDestinations":
@@ -5228,65 +5345,6 @@ func (ec *executionContext) fieldContext_Query_computePlatform(ctx context.Conte
 	return fc, nil
 }
 
-func (ec *executionContext) _Query_computePlatforms(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_computePlatforms(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().ComputePlatforms(rctx)
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.([]*model.ComputePlatform)
-	fc.Result = res
-	return ec.marshalOComputePlatform2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query_computePlatforms(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_ComputePlatform_id(ctx, field)
-			case "name":
-				return ec.fieldContext_ComputePlatform_name(ctx, field)
-			case "computePlatformType":
-				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
-			case "k8sActualNamespace":
-				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
-			case "k8sActualNamespaces":
-				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
-			case "actualDestinations":
-				return ec.fieldContext_ComputePlatform_actualDestinations(ctx, field)
-			case "actualActions":
-				return ec.fieldContext_ComputePlatform_actualActions(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _Query_destinationTypeCategories(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query_destinationTypeCategories(ctx, field)
 	if err != nil {
@@ -7830,36 +7888,69 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 		case "id":
 			out.Values[i] = ec._ComputePlatform_id(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "name":
 			out.Values[i] = ec._ComputePlatform_name(ctx, field, obj)
 		case "computePlatformType":
 			out.Values[i] = ec._ComputePlatform_computePlatformType(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "k8sActualNamespace":
 			out.Values[i] = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
 		case "k8sActualNamespaces":
 			out.Values[i] = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
+		case "k8sActualSource":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualSource(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "k8sActualSources":
 			out.Values[i] = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "actualDestinations":
 			out.Values[i] = ec._ComputePlatform_actualDestinations(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "actualActions":
 			out.Values[i] = ec._ComputePlatform_actualActions(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
@@ -8603,25 +8694,6 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
-		case "computePlatforms":
-			field := field
-
-			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Query_computePlatforms(ctx, field)
-				return res
-			}
-
-			rrm := func(ctx context.Context) graphql.Marshaler {
-				return ec.OperationContext.RootResolverMiddleware(ctx,
-					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-			}
-
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "destinationTypeCategories":
 			field := field
@@ -9959,47 +10031,6 @@ func (ec *executionContext) marshalOBoolean2ᚖbool(ctx context.Context, sel ast
 	return res
 }
 
-func (ec *executionContext) marshalOComputePlatform2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx context.Context, sel ast.SelectionSet, v []*model.ComputePlatform) graphql.Marshaler {
-	if v == nil {
-		return graphql.Null
-	}
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
-			}
-			ret[i] = ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	return ret
-}
-
 func (ec *executionContext) marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx context.Context, sel ast.SelectionSet, v *model.ComputePlatform) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 8a8f8bf0c..3bf3f4a72 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -32,6 +32,7 @@ type ComputePlatform struct {
 	ComputePlatformType ComputePlatformType   `json:"computePlatformType"`
 	K8sActualNamespace  *K8sActualNamespace   `json:"k8sActualNamespace,omitempty"`
 	K8sActualNamespaces []*K8sActualNamespace `json:"k8sActualNamespaces"`
+	K8sActualSource     *K8sActualSource      `json:"k8sActualSource,omitempty"`
 	K8sActualSources    []*K8sActualSource    `json:"k8sActualSources"`
 	ActualDestinations  []*ActualDestination  `json:"actualDestinations"`
 	ActualActions       []*ActualAction       `json:"actualActions"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 9eee8f6a4..1ec837b6c 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -173,6 +173,11 @@ type ComputePlatform {
 
   k8sActualNamespace(name: String!): K8sActualNamespace
   k8sActualNamespaces: [K8sActualNamespace]!
+  k8sActualSource(
+    name: String
+    namespace: String
+    kind: String
+  ): K8sActualSource
   k8sActualSources: [K8sActualSource]!
 
   # destinations that are applied to this compute platform
@@ -208,7 +213,6 @@ type ActualAction {
 
 type Query {
   computePlatform(cpId: ID!): ComputePlatform
-  computePlatforms: [ComputePlatform]
   destinationTypeCategories: [DestinationTypeCategory]
   desiredDestinations: [DesiredDestination]
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 432b7cd36..a744f7054 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -12,6 +12,20 @@ import (
 	"github.com/odigos-io/odigos/frontend/graph/model"
 )
 
+// K8sActualSource is the resolver for the k8sActualSource field.
+func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error) {
+	source, err := endpoints.GetActualSource(ctx, *namespace, *kind, *name)
+	if err != nil {
+		return nil, err
+	}
+	if source == nil {
+		return nil, nil
+	}
+	k8sActualSource := k8sSourceToGql(source)
+
+	return k8sActualSource, nil
+}
+
 // ApplyDesiredNamespace is the resolver for the applyDesiredNamespace field.
 func (r *mutationResolver) ApplyDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID, ns model.K8sDesiredNamespaceInput) (bool, error) {
 	panic(fmt.Errorf("not implemented: ApplyDesiredNamespace - applyDesiredNamespace"))
@@ -77,7 +91,7 @@ func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*mode
 	k8sActualSources := endpoints.GetActualSources(ctx, "odigos-system")
 	res := make([]*model.K8sActualSource, len(k8sActualSources))
 	for i, source := range k8sActualSources {
-		res[i] = k8sActualSourceToGql(&source)
+		res[i] = k8sThinSourceToGql(&source)
 	}
 
 	return &model.ComputePlatform{
@@ -85,14 +99,6 @@ func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*mode
 	}, nil
 }
 
-// ComputePlatforms is the resolver for the computePlatforms field.
-func (r *queryResolver) ComputePlatforms(ctx context.Context) ([]*model.ComputePlatform, error) {
-	return []*model.ComputePlatform{
-		{
-			ID: "1",
-		}}, nil
-}
-
 // DestinationTypeCategories is the resolver for the destinationTypeCategories field.
 func (r *queryResolver) DestinationTypeCategories(ctx context.Context) ([]*model.DestinationTypeCategory, error) {
 	panic(fmt.Errorf("not implemented: DestinationTypeCategories - destinationTypeCategories"))
@@ -103,11 +109,32 @@ func (r *queryResolver) DesiredDestinations(ctx context.Context) ([]*model.Desir
 	panic(fmt.Errorf("not implemented: DesiredDestinations - desiredDestinations"))
 }
 
+// ComputePlatform returns ComputePlatformResolver implementation.
+func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
+
 // Mutation returns MutationResolver implementation.
 func (r *Resolver) Mutation() MutationResolver { return &mutationResolver{r} }
 
 // Query returns QueryResolver implementation.
 func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
 
+type computePlatformResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
+
+// !!! WARNING !!!
+// The code below was going to be deleted when updating resolvers. It has been copied here so you have
+// one last chance to move it out of harms way if you want. There are two reasons this happens:
+//   - When renaming or deleting a resolver the old code will be put in here. You can safely delete
+//     it when you're done.
+//   - You have helper methods in this file. Move them out to keep these resolver files clean.
+func (r *computePlatformResolver) K8sActualSources(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualSource, error) {
+	// thinSource, err := endpoints.GetActualSource(ctx, *namespace, *kind, *name)
+	// if err != nil {
+	// 	return nil, err
+	// }
+	// k8sActualSource := k8sSourceToGql(thinSource)
+
+	// return k8sActualSources, nil
+	return obj.K8sActualSources, nil
+}

From 97628777fda9f35b4b12634c9126a716fd6944d8 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 11:49:09 +0300
Subject: [PATCH 096/374] chore: init gql apollo client

---
 .../app/(setup)/choose-sources/page.tsx       |  47 +++++-
 frontend/webapp/app/layout.tsx                |  23 +--
 frontend/webapp/app/page.tsx                  |   2 +
 frontend/webapp/lib/gql/apollo-wrapper.tsx    |  49 ++++++
 frontend/webapp/lib/gql/client.ts             |  12 ++
 frontend/webapp/lib/gql/index.ts              |   1 +
 frontend/webapp/lib/index.ts                  |   1 +
 frontend/webapp/package.json                  |   3 +
 frontend/webapp/utils/constants/urls.tsx      |   2 +-
 frontend/webapp/yarn.lock                     | 146 +++++++++++++++++-
 10 files changed, 272 insertions(+), 14 deletions(-)
 create mode 100644 frontend/webapp/lib/gql/apollo-wrapper.tsx
 create mode 100644 frontend/webapp/lib/gql/client.ts
 create mode 100644 frontend/webapp/lib/gql/index.ts
 create mode 100644 frontend/webapp/lib/index.ts

diff --git a/frontend/webapp/app/(setup)/choose-sources/page.tsx b/frontend/webapp/app/(setup)/choose-sources/page.tsx
index 495ec2f21..14a203ce5 100644
--- a/frontend/webapp/app/(setup)/choose-sources/page.tsx
+++ b/frontend/webapp/app/(setup)/choose-sources/page.tsx
@@ -1,10 +1,55 @@
 'use client';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StepsList } from '@/components';
 import { ChooseSourcesContainer } from '@/containers';
 import { CardWrapper, PageContainer, StepListWrapper } from '../styled';
 
+import { useSuspenseQuery, gql } from '@apollo/client';
+
+const GET_COMPUTE_PLATFORM = gql`
+  query GetComputePlatform($cpId: ID!) {
+    computePlatform(cpId: $cpId) {
+      id
+      name
+      computePlatformType
+      k8sActualSources {
+        namespace
+        kind
+        name
+        serviceName
+        autoInstrumented
+        creationTimestamp
+        numberOfInstances
+        hasInstrumentedApplication
+        instrumentedApplicationDetails {
+          languages {
+            containerName
+            language
+          }
+          conditions {
+            type
+            status
+            lastTransitionTime
+            reason
+            message
+          }
+        }
+      }
+    }
+  }
+`;
+
 export default function ChooseSourcesPage() {
+  const { error, data } = useSuspenseQuery(GET_COMPUTE_PLATFORM, {
+    variables: { cpId: '1' },
+  });
+
+  useEffect(() => {
+    if (error) {
+      console.error(error);
+    }
+    console.log({ data });
+  }, [error, data]);
   return (
     <PageContainer>
       <StepListWrapper>
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 2387fee82..e36316b12 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -7,6 +7,7 @@ import { NotificationManager } from '@/components';
 import ReduxProvider from '@/store/redux-provider';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ThemeProviderWrapper } from '@keyval-dev/design-system';
+import { ApolloWrapper } from '@/lib';
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -36,16 +37,18 @@ export default function RootLayout({
   return (
     <html lang="en">
       <ReduxProvider>
-        <QueryClientProvider client={queryClient}>
-          <ThemeProvider theme={theme}>
-            <ThemeProviderWrapper>
-              <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
-                {children}
-                <NotificationManager />
-              </body>
-            </ThemeProviderWrapper>
-          </ThemeProvider>
-        </QueryClientProvider>
+        <ApolloWrapper>
+          <QueryClientProvider client={queryClient}>
+            <ThemeProvider theme={theme}>
+              <ThemeProviderWrapper>
+                <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
+                  {children}
+                  <NotificationManager />
+                </body>
+              </ThemeProviderWrapper>
+            </ThemeProvider>
+          </QueryClientProvider>
+        </ApolloWrapper>
       </ReduxProvider>
     </html>
   );
diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index bb5248607..8adeeae09 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -6,8 +6,10 @@ import { ROUTES, CONFIG, QUERIES } from '@/utils';
 import { Loader } from '@keyval-dev/design-system';
 import { getDestinations, getConfig } from '@/services';
 import { addNotification, store } from '@/store';
+
 export default function App() {
   const router = useRouter();
+
   const { data, isLoading: isConfigLoading } = useQuery(
     [QUERIES.API_CONFIG],
     getConfig
diff --git a/frontend/webapp/lib/gql/apollo-wrapper.tsx b/frontend/webapp/lib/gql/apollo-wrapper.tsx
new file mode 100644
index 000000000..6ccd91e74
--- /dev/null
+++ b/frontend/webapp/lib/gql/apollo-wrapper.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { ApolloLink, HttpLink } from '@apollo/client';
+import {
+  ApolloNextAppProvider,
+  InMemoryCache,
+  ApolloClient,
+  SSRMultipartLink,
+} from '@apollo/experimental-nextjs-app-support';
+import { onError } from '@apollo/client/link/error';
+
+function makeClient() {
+  const httpLink = new HttpLink({
+    uri: 'http://localhost:8085/graphql',
+  });
+
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors) {
+      graphQLErrors.forEach(({ message, locations, path }) =>
+        console.log(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+        )
+      );
+    }
+    if (networkError) console.log(`[Network error]: ${networkError}`);
+  });
+
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link:
+      typeof window === 'undefined'
+        ? ApolloLink.from([
+            new SSRMultipartLink({
+              stripDefer: true,
+            }),
+            errorLink,
+            httpLink,
+          ])
+        : ApolloLink.from([errorLink, httpLink]),
+  });
+}
+
+export function ApolloWrapper({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <ApolloNextAppProvider makeClient={makeClient}>
+      {children}
+    </ApolloNextAppProvider>
+  );
+}
diff --git a/frontend/webapp/lib/gql/client.ts b/frontend/webapp/lib/gql/client.ts
new file mode 100644
index 000000000..f6260d0a5
--- /dev/null
+++ b/frontend/webapp/lib/gql/client.ts
@@ -0,0 +1,12 @@
+// lib/client.js
+import { HttpLink, InMemoryCache, ApolloClient } from '@apollo/client';
+import { registerApolloClient } from '@apollo/experimental-nextjs-app-support';
+
+export const { getClient } = registerApolloClient(() => {
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: 'https://main--time-pav6zq.apollographos.net/graphql',
+    }),
+  });
+});
diff --git a/frontend/webapp/lib/gql/index.ts b/frontend/webapp/lib/gql/index.ts
new file mode 100644
index 000000000..32e0cb77d
--- /dev/null
+++ b/frontend/webapp/lib/gql/index.ts
@@ -0,0 +1 @@
+export * from './apollo-wrapper';
diff --git a/frontend/webapp/lib/index.ts b/frontend/webapp/lib/index.ts
new file mode 100644
index 000000000..8a12aabda
--- /dev/null
+++ b/frontend/webapp/lib/index.ts
@@ -0,0 +1 @@
+export * from './gql';
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index 3d3733390..da7a1c730 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -10,6 +10,8 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "@apollo/client": "^3.11.0-rc.2",
+    "@apollo/experimental-nextjs-app-support": "^0.11.2",
     "@focus-reactive/react-yaml": "^1.1.2",
     "@keyval-dev/design-system": "^2.0.2",
     "@next/font": "^13.4.7",
@@ -22,6 +24,7 @@
     "axios": "^1.4.0",
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.5",
+    "graphql": "^16.9.0",
     "next": "13.5.4",
     "postcss": "^8.4.26",
     "prop-types": "^15.8.1",
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index c340e33b3..8eeadac81 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -38,4 +38,4 @@ export const ACTION_DOCS_LINK =
   'https://docs.odigos.io/pipeline/actions/introduction';
 export const ACTION_ITEM_DOCS_LINK = 'https://docs.odigos.io/pipeline/actions';
 
-export { API, QUERIES, SLACK_INVITE_LINK };
+export { API, QUERIES, SLACK_INVITE_LINK, BASE_URL };
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index fa1c7f596..a29e061c7 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -10,6 +10,40 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@apollo/client-react-streaming@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@apollo/client-react-streaming/-/client-react-streaming-0.11.2.tgz#788a5b0254469b679f8abf5391e40c420fe61965"
+  integrity sha512-rRA/dIA09/Y6+jtGGBnXHQfPOv6BYYVZwQP8OzQtWrWbSgDEI6uAhqULssU5f0ZhQJVzKDuslqGE9QAX0gdfRQ==
+  dependencies:
+    ts-invariant "^0.10.3"
+
+"@apollo/client@^3.11.0-rc.2":
+  version "3.11.0-rc.2"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.11.0-rc.2.tgz#69cbdf263330edf313f02f782ab30a3b8420c5d1"
+  integrity sha512-k5mj92/WKwMpnrViL3+EYGQwQ7grlo3xho9ZLIU/Y7+7KLGHpXVtb4lrqoZHA1+SqXFciZOu4sUx5ysAuv325g==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.1.1"
+    "@wry/caches" "^1.0.0"
+    "@wry/equality" "^0.5.6"
+    "@wry/trie" "^0.5.0"
+    graphql-tag "^2.12.6"
+    hoist-non-react-statics "^3.3.2"
+    optimism "^0.18.0"
+    prop-types "^15.7.2"
+    rehackt "^0.1.0"
+    response-iterator "^0.2.6"
+    symbol-observable "^4.0.0"
+    ts-invariant "^0.10.3"
+    tslib "^2.3.0"
+    zen-observable-ts "^1.2.5"
+
+"@apollo/experimental-nextjs-app-support@^0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.11.2.tgz#3df9253229afd6ec94bc5873f649f23c487c9dfb"
+  integrity sha512-HRQ8/Ux/tM2pezrhZeoHsJs55+nJvJZRV1B21QwEVtWhslQXjT5gqs5nKw86KURF0xR7gX18Nyy659NzJ09Pmw==
+  dependencies:
+    "@apollo/client-react-streaming" "0.11.2"
+
 "@babel/cli@^7.21.0":
   version "7.22.6"
   resolved "https://registry.npmjs.org/@babel/cli/-/cli-7.22.6.tgz"
@@ -1394,6 +1428,11 @@
     "@codemirror/view" "^0.19.4"
     js-yaml "^4.1.0"
 
+"@graphql-typed-document-node/core@^3.1.1":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
+  integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz"
@@ -2284,6 +2323,41 @@
     "@typescript-eslint/types" "5.59.9"
     eslint-visitor-keys "^3.3.0"
 
+"@wry/caches@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52"
+  integrity sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/context@^0.7.0":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.7.4.tgz#e32d750fa075955c4ab2cfb8c48095e1d42d5990"
+  integrity sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/equality@^0.5.6":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.7.tgz#72ec1a73760943d439d56b7b1e9985aec5d497bb"
+  integrity sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/trie@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.4.3.tgz#077d52c22365871bf3ffcbab8e95cb8bc5689af4"
+  integrity sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/trie@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.5.0.tgz#11e783f3a53f6e4cd1d42d2d1323f5bc3fa99c94"
+  integrity sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==
+  dependencies:
+    tslib "^2.3.0"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -3704,6 +3778,18 @@ graphemer@^1.4.0:
   resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+graphql-tag@^2.12.6:
+  version "2.12.6"
+  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
+  integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
+  dependencies:
+    tslib "^2.1.0"
+
+graphql@^16.9.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.9.0.tgz#1c310e63f16a49ce1fbb230bd0a000e99f6f115f"
+  integrity sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"
@@ -3750,6 +3836,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
@@ -4463,6 +4556,16 @@ open@^9.1.0:
     is-inside-container "^1.0.0"
     is-wsl "^2.2.0"
 
+optimism@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.18.0.tgz#e7bb38b24715f3fdad8a9a7fc18e999144bbfa63"
+  integrity sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==
+  dependencies:
+    "@wry/caches" "^1.0.0"
+    "@wry/context" "^0.7.0"
+    "@wry/trie" "^0.4.3"
+    tslib "^2.3.0"
+
 optionator@^0.9.1:
   version "0.9.1"
   resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
@@ -4588,7 +4691,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4620,7 +4723,7 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -4730,6 +4833,11 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
+rehackt@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/rehackt/-/rehackt-0.1.0.tgz#a7c5e289c87345f70da8728a7eb878e5d03c696b"
+  integrity sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==
+
 remove-accents@0.5.0:
   version "0.5.0"
   resolved "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz"
@@ -4768,6 +4876,11 @@ resolve@^2.0.0-next.4:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+response-iterator@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/response-iterator/-/response-iterator-0.2.6.tgz#249005fb14d2e4eeb478a3f735a28fd8b4c9f3da"
+  integrity sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
@@ -5084,6 +5197,11 @@ swr@^2.1.5:
   dependencies:
     use-sync-external-store "^1.2.0"
 
+symbol-observable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
+  integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
+
 synckit@^0.8.5:
   version "0.8.5"
   resolved "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz"
@@ -5119,6 +5237,13 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+ts-invariant@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
+  integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==
+  dependencies:
+    tslib "^2.1.0"
+
 tsconfig-paths@^3.14.1:
   version "3.14.2"
   resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz"
@@ -5139,6 +5264,11 @@ tslib@^2.0.3, tslib@^2.4.0, tslib@^2.5.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
 
+tslib@^2.1.0, tslib@^2.3.0:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
@@ -5326,6 +5456,18 @@ yocto-queue@^0.1.0:
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zen-observable-ts@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58"
+  integrity sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==
+  dependencies:
+    zen-observable "0.8.15"
+
+zen-observable@0.8.15:
+  version "0.8.15"
+  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
+  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
+
 zod@3.21.4:
   version "3.21.4"
   resolved "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz"

From c437800f7ef25d07d7eab523c803ed2a53af8233 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 13:45:26 +0300
Subject: [PATCH 097/374] chore: wip

---
 frontend/webapp/app/page.tsx                  | 28 ++++---------------
 frontend/webapp/graphql/index.ts              |  1 +
 frontend/webapp/graphql/queries/config.ts     | 10 +++++++
 frontend/webapp/graphql/queries/index.ts      |  1 +
 frontend/webapp/hooks/index.tsx               |  1 +
 frontend/webapp/hooks/new-config/index.ts     |  1 +
 frontend/webapp/hooks/new-config/useConfig.ts | 16 +++++++++++
 frontend/webapp/types/common.ts               |  6 ++++
 8 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 frontend/webapp/graphql/index.ts
 create mode 100644 frontend/webapp/graphql/queries/config.ts
 create mode 100644 frontend/webapp/graphql/queries/index.ts
 create mode 100644 frontend/webapp/hooks/new-config/index.ts
 create mode 100644 frontend/webapp/hooks/new-config/useConfig.ts

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index 8adeeae09..ec28d1ded 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -1,29 +1,18 @@
 'use client';
 import { useEffect } from 'react';
-import { useQuery } from 'react-query';
+import { useConfig } from '@/hooks';
+import { ROUTES, CONFIG } from '@/utils';
 import { useRouter } from 'next/navigation';
-import { ROUTES, CONFIG, QUERIES } from '@/utils';
-import { Loader } from '@keyval-dev/design-system';
-import { getDestinations, getConfig } from '@/services';
 import { addNotification, store } from '@/store';
+import { Loader } from '@keyval-dev/design-system';
 
 export default function App() {
   const router = useRouter();
+  const { data, error } = useConfig();
 
-  const { data, isLoading: isConfigLoading } = useQuery(
-    [QUERIES.API_CONFIG],
-    getConfig
-  );
-  const {
-    isLoading: isDestinationLoading,
-    data: destinationList,
-    error,
-  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
   useEffect(() => {
-    if (isConfigLoading || isDestinationLoading) return;
-
-    renderCurrentPage();
-  }, [data, destinationList]);
+    data && renderCurrentPage();
+  }, [data, error]);
 
   useEffect(() => {
     if (!error) return;
@@ -43,11 +32,6 @@ export default function App() {
   function renderCurrentPage() {
     const { installation } = data;
 
-    if (destinationList.length > 0) {
-      router.push(ROUTES.OVERVIEW);
-      return;
-    }
-
     switch (installation) {
       case CONFIG.NEW:
       case CONFIG.APPS_SELECTED:
diff --git a/frontend/webapp/graphql/index.ts b/frontend/webapp/graphql/index.ts
new file mode 100644
index 000000000..3cf1ef310
--- /dev/null
+++ b/frontend/webapp/graphql/index.ts
@@ -0,0 +1 @@
+export * from './queries';
diff --git a/frontend/webapp/graphql/queries/config.ts b/frontend/webapp/graphql/queries/config.ts
new file mode 100644
index 000000000..aea46dda4
--- /dev/null
+++ b/frontend/webapp/graphql/queries/config.ts
@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+// Define the GraphQL query
+export const GET_CONFIG = gql`
+  query GetConfig {
+    config {
+      installation
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/index.ts b/frontend/webapp/graphql/queries/index.ts
new file mode 100644
index 000000000..f03c2281a
--- /dev/null
+++ b/frontend/webapp/graphql/queries/index.ts
@@ -0,0 +1 @@
+export * from './config';
diff --git a/frontend/webapp/hooks/index.tsx b/frontend/webapp/hooks/index.tsx
index 25b8aaeb8..7bae585c0 100644
--- a/frontend/webapp/hooks/index.tsx
+++ b/frontend/webapp/hooks/index.tsx
@@ -7,3 +7,4 @@ export * from './destinations';
 export * from './actions';
 export * from './useNotify';
 export * from './useSSE';
+export * from './new-config';
diff --git a/frontend/webapp/hooks/new-config/index.ts b/frontend/webapp/hooks/new-config/index.ts
new file mode 100644
index 000000000..4852f577a
--- /dev/null
+++ b/frontend/webapp/hooks/new-config/index.ts
@@ -0,0 +1 @@
+export * from './useConfig';
diff --git a/frontend/webapp/hooks/new-config/useConfig.ts b/frontend/webapp/hooks/new-config/useConfig.ts
new file mode 100644
index 000000000..4f262c758
--- /dev/null
+++ b/frontend/webapp/hooks/new-config/useConfig.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { Config } from '@/types';
+import { GET_CONFIG } from '@/graphql';
+import { useSuspenseQuery } from '@apollo/client';
+
+export const useConfig = () => {
+  const { data, error } = useSuspenseQuery<Config>(GET_CONFIG);
+
+  useEffect(() => {
+    if (error) {
+      console.error('Error fetching config:', error);
+    }
+  }, [error]);
+
+  return { data: data?.config, error };
+};
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index b739aa8fa..2640ccccf 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -17,3 +17,9 @@ export interface Notification {
   crdType?: string;
   type: 'success' | 'error' | 'info';
 }
+
+export type Config = {
+  config: {
+    installation: string;
+  };
+};

From 6ee566ffa4e451dc89fca06e1cd64de431263a27 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 13:54:40 +0300
Subject: [PATCH 098/374] chore: init base gql schema

---
 frontend/endpoints/config.go       |   10 +-
 frontend/graph/generated.go        | 7735 ++++++----------------------
 frontend/graph/model/models_gen.go |  128 +-
 frontend/graph/schema.graphqls     |  148 +-
 frontend/graph/schema.resolvers.go |   93 +-
 frontend/main.go                   |    1 -
 6 files changed, 1761 insertions(+), 6354 deletions(-)

diff --git a/frontend/endpoints/config.go b/frontend/endpoints/config.go
index f58e77131..f98dcc73b 100644
--- a/frontend/endpoints/config.go
+++ b/frontend/endpoints/config.go
@@ -4,9 +4,7 @@ import (
 	"context"
 	"fmt"
 	"log"
-	"net/http"
 
-	"github.com/gin-gonic/gin"
 	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/frontend/kube"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
@@ -24,17 +22,17 @@ type GetConfigResponse struct {
 	Installation InstallationStatus `json:"installation"`
 }
 
-func GetConfig(c *gin.Context) {
+func GetConfig(c context.Context) GetConfigResponse {
 	var response GetConfigResponse
-	if !isSomethingLabeled(c.Request.Context()) {
+	if !isSomethingLabeled(c) {
 		response.Installation = NewInstallation
-	} else if !isDestinationChosen(c.Request.Context()) {
+	} else if !isDestinationChosen(c) {
 		response.Installation = AppsSelected
 	} else {
 		response.Installation = Finished
 	}
 
-	c.JSON(http.StatusOK, response)
+	return response
 }
 
 func isDestinationChosen(ctx context.Context) bool {
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index ba6988c46..f85cf9f8c 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -48,27 +48,7 @@ type DirectiveRoot struct {
 }
 
 type ComplexityRoot struct {
-	ActualAction struct {
-		Details func(childComplexity int) int
-		Disable func(childComplexity int) int
-		ID      func(childComplexity int) int
-		Kind    func(childComplexity int) int
-		Name    func(childComplexity int) int
-		Notes   func(childComplexity int) int
-		Signals func(childComplexity int) int
-	}
-
-	ActualDestination struct {
-		ExportedSignals func(childComplexity int) int
-		Fields          func(childComplexity int) int
-		ID              func(childComplexity int) int
-		Name            func(childComplexity int) int
-		Type            func(childComplexity int) int
-	}
-
 	ComputePlatform struct {
-		ActualActions       func(childComplexity int) int
-		ActualDestinations  func(childComplexity int) int
 		ComputePlatformType func(childComplexity int) int
 		ID                  func(childComplexity int) int
 		K8sActualNamespace  func(childComplexity int, name string) int
@@ -86,43 +66,8 @@ type ComplexityRoot struct {
 		Type               func(childComplexity int) int
 	}
 
-	DesiredDestination struct {
-		ComputePlatforms func(childComplexity int) int
-		ExportSignals    func(childComplexity int) int
-		Fields           func(childComplexity int) int
-		ID               func(childComplexity int) int
-		Name             func(childComplexity int) int
-		Type             func(childComplexity int) int
-	}
-
-	DestinationSpecField struct {
-		Name  func(childComplexity int) int
-		Value func(childComplexity int) int
-	}
-
-	DestinationType struct {
-		Category         func(childComplexity int) int
-		DisplayName      func(childComplexity int) int
-		Fields           func(childComplexity int) int
-		Image            func(childComplexity int) int
-		Name             func(childComplexity int) int
-		SupportedSignals func(childComplexity int) int
-	}
-
-	DestinationTypeCategory struct {
-		DestinationTypes func(childComplexity int) int
-		Name             func(childComplexity int) int
-	}
-
-	DestinationTypeField struct {
-		ComponentProps func(childComplexity int) int
-		ComponentType  func(childComplexity int) int
-		DisplayName    func(childComplexity int) int
-		InitialValue   func(childComplexity int) int
-		Name           func(childComplexity int) int
-		Secret         func(childComplexity int) int
-		ThumbnailURL   func(childComplexity int) int
-		VideoURL       func(childComplexity int) int
+	GetConfigResponse struct {
+		Installation func(childComplexity int) int
 	}
 
 	InstrumentedApplicationDetails struct {
@@ -158,24 +103,12 @@ type ComplexityRoot struct {
 	}
 
 	Mutation struct {
-		ApplyDesiredDestinationToComputePlatform    func(childComplexity int, cpID string, destinationID string) int
-		ApplyDesiredNamespace                       func(childComplexity int, cpID string, nsID model.K8sNamespaceID, ns model.K8sDesiredNamespaceInput) int
-		ApplyDesiredSource                          func(childComplexity int, cpID string, sourceID model.K8sSourceID, source model.K8sDesiredSourceInput) int
-		CreateDesiredAction                         func(childComplexity int, cpID string, action model.DesiredActionInput) int
-		CreateDesiredDestination                    func(childComplexity int, destinationType string, destination model.DesiredDestinationInput) int
-		DeleteActualAction                          func(childComplexity int, cpID string, actionID string, kind string) int
-		DeleteDesiredDestination                    func(childComplexity int, destinationID string) int
-		DeleteDesiredNamespace                      func(childComplexity int, cpID string, nsID model.K8sNamespaceID) int
-		DeleteDesiredSource                         func(childComplexity int, cpID string, sourceID model.K8sSourceID) int
-		RemoveDesiredDestinationFromComputePlatform func(childComplexity int, cpID string, destinationID string) int
-		UpdateDesiredAction                         func(childComplexity int, cpID string, actionID string, action model.DesiredActionInput) int
-		UpdateDesiredDestination                    func(childComplexity int, destinationID string, destination model.DesiredDestinationInput) int
+		CreateK8sDesiredNamespace func(childComplexity int, cpID string, namespace model.K8sDesiredNamespaceInput) int
 	}
 
 	Query struct {
-		ComputePlatform           func(childComplexity int, cpID string) int
-		DesiredDestinations       func(childComplexity int) int
-		DestinationTypeCategories func(childComplexity int) int
+		ComputePlatform func(childComplexity int, cpID string) int
+		Config          func(childComplexity int) int
 	}
 
 	SourceLanguage struct {
@@ -188,23 +121,11 @@ type ComputePlatformResolver interface {
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
 }
 type MutationResolver interface {
-	ApplyDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID, ns model.K8sDesiredNamespaceInput) (bool, error)
-	DeleteDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID) (bool, error)
-	ApplyDesiredSource(ctx context.Context, cpID string, sourceID model.K8sSourceID, source model.K8sDesiredSourceInput) (bool, error)
-	DeleteDesiredSource(ctx context.Context, cpID string, sourceID model.K8sSourceID) (bool, error)
-	CreateDesiredDestination(ctx context.Context, destinationType string, destination model.DesiredDestinationInput) (*model.DesiredDestination, error)
-	UpdateDesiredDestination(ctx context.Context, destinationID string, destination model.DesiredDestinationInput) (*model.DesiredDestination, error)
-	DeleteDesiredDestination(ctx context.Context, destinationID string) (bool, error)
-	ApplyDesiredDestinationToComputePlatform(ctx context.Context, cpID string, destinationID string) (bool, error)
-	RemoveDesiredDestinationFromComputePlatform(ctx context.Context, cpID string, destinationID string) (bool, error)
-	CreateDesiredAction(ctx context.Context, cpID string, action model.DesiredActionInput) (bool, error)
-	UpdateDesiredAction(ctx context.Context, cpID string, actionID string, action model.DesiredActionInput) (bool, error)
-	DeleteActualAction(ctx context.Context, cpID string, actionID string, kind string) (bool, error)
+	CreateK8sDesiredNamespace(ctx context.Context, cpID string, namespace model.K8sDesiredNamespaceInput) (*model.K8sActualNamespace, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context, cpID string) (*model.ComputePlatform, error)
-	DestinationTypeCategories(ctx context.Context) ([]*model.DestinationTypeCategory, error)
-	DesiredDestinations(ctx context.Context) ([]*model.DesiredDestination, error)
+	Config(ctx context.Context) (*model.GetConfigResponse, error)
 }
 
 type executableSchema struct {
@@ -226,104 +147,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 	_ = ec
 	switch typeName + "." + field {
 
-	case "ActualAction.details":
-		if e.complexity.ActualAction.Details == nil {
-			break
-		}
-
-		return e.complexity.ActualAction.Details(childComplexity), true
-
-	case "ActualAction.disable":
-		if e.complexity.ActualAction.Disable == nil {
-			break
-		}
-
-		return e.complexity.ActualAction.Disable(childComplexity), true
-
-	case "ActualAction.id":
-		if e.complexity.ActualAction.ID == nil {
-			break
-		}
-
-		return e.complexity.ActualAction.ID(childComplexity), true
-
-	case "ActualAction.kind":
-		if e.complexity.ActualAction.Kind == nil {
-			break
-		}
-
-		return e.complexity.ActualAction.Kind(childComplexity), true
-
-	case "ActualAction.name":
-		if e.complexity.ActualAction.Name == nil {
-			break
-		}
-
-		return e.complexity.ActualAction.Name(childComplexity), true
-
-	case "ActualAction.notes":
-		if e.complexity.ActualAction.Notes == nil {
-			break
-		}
-
-		return e.complexity.ActualAction.Notes(childComplexity), true
-
-	case "ActualAction.signals":
-		if e.complexity.ActualAction.Signals == nil {
-			break
-		}
-
-		return e.complexity.ActualAction.Signals(childComplexity), true
-
-	case "ActualDestination.exportedSignals":
-		if e.complexity.ActualDestination.ExportedSignals == nil {
-			break
-		}
-
-		return e.complexity.ActualDestination.ExportedSignals(childComplexity), true
-
-	case "ActualDestination.fields":
-		if e.complexity.ActualDestination.Fields == nil {
-			break
-		}
-
-		return e.complexity.ActualDestination.Fields(childComplexity), true
-
-	case "ActualDestination.id":
-		if e.complexity.ActualDestination.ID == nil {
-			break
-		}
-
-		return e.complexity.ActualDestination.ID(childComplexity), true
-
-	case "ActualDestination.name":
-		if e.complexity.ActualDestination.Name == nil {
-			break
-		}
-
-		return e.complexity.ActualDestination.Name(childComplexity), true
-
-	case "ActualDestination.type":
-		if e.complexity.ActualDestination.Type == nil {
-			break
-		}
-
-		return e.complexity.ActualDestination.Type(childComplexity), true
-
-	case "ComputePlatform.actualActions":
-		if e.complexity.ComputePlatform.ActualActions == nil {
-			break
-		}
-
-		return e.complexity.ComputePlatform.ActualActions(childComplexity), true
-
-	case "ComputePlatform.actualDestinations":
-		if e.complexity.ComputePlatform.ActualDestinations == nil {
-			break
-		}
-
-		return e.complexity.ComputePlatform.ActualDestinations(childComplexity), true
-
 	case "ComputePlatform.computePlatformType":
 		if e.complexity.ComputePlatform.ComputePlatformType == nil {
 			break
@@ -418,173 +241,12 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Condition.Type(childComplexity), true
 
-	case "DesiredDestination.computePlatforms":
-		if e.complexity.DesiredDestination.ComputePlatforms == nil {
-			break
-		}
-
-		return e.complexity.DesiredDestination.ComputePlatforms(childComplexity), true
-
-	case "DesiredDestination.exportSignals":
-		if e.complexity.DesiredDestination.ExportSignals == nil {
-			break
-		}
-
-		return e.complexity.DesiredDestination.ExportSignals(childComplexity), true
-
-	case "DesiredDestination.fields":
-		if e.complexity.DesiredDestination.Fields == nil {
-			break
-		}
-
-		return e.complexity.DesiredDestination.Fields(childComplexity), true
-
-	case "DesiredDestination.id":
-		if e.complexity.DesiredDestination.ID == nil {
-			break
-		}
-
-		return e.complexity.DesiredDestination.ID(childComplexity), true
-
-	case "DesiredDestination.name":
-		if e.complexity.DesiredDestination.Name == nil {
-			break
-		}
-
-		return e.complexity.DesiredDestination.Name(childComplexity), true
-
-	case "DesiredDestination.type":
-		if e.complexity.DesiredDestination.Type == nil {
-			break
-		}
-
-		return e.complexity.DesiredDestination.Type(childComplexity), true
-
-	case "DestinationSpecField.name":
-		if e.complexity.DestinationSpecField.Name == nil {
-			break
-		}
-
-		return e.complexity.DestinationSpecField.Name(childComplexity), true
-
-	case "DestinationSpecField.value":
-		if e.complexity.DestinationSpecField.Value == nil {
-			break
-		}
-
-		return e.complexity.DestinationSpecField.Value(childComplexity), true
-
-	case "DestinationType.category":
-		if e.complexity.DestinationType.Category == nil {
-			break
-		}
-
-		return e.complexity.DestinationType.Category(childComplexity), true
-
-	case "DestinationType.displayName":
-		if e.complexity.DestinationType.DisplayName == nil {
-			break
-		}
-
-		return e.complexity.DestinationType.DisplayName(childComplexity), true
-
-	case "DestinationType.fields":
-		if e.complexity.DestinationType.Fields == nil {
-			break
-		}
-
-		return e.complexity.DestinationType.Fields(childComplexity), true
-
-	case "DestinationType.image":
-		if e.complexity.DestinationType.Image == nil {
-			break
-		}
-
-		return e.complexity.DestinationType.Image(childComplexity), true
-
-	case "DestinationType.name":
-		if e.complexity.DestinationType.Name == nil {
-			break
-		}
-
-		return e.complexity.DestinationType.Name(childComplexity), true
-
-	case "DestinationType.supportedSignals":
-		if e.complexity.DestinationType.SupportedSignals == nil {
-			break
-		}
-
-		return e.complexity.DestinationType.SupportedSignals(childComplexity), true
-
-	case "DestinationTypeCategory.destinationTypes":
-		if e.complexity.DestinationTypeCategory.DestinationTypes == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeCategory.DestinationTypes(childComplexity), true
-
-	case "DestinationTypeCategory.name":
-		if e.complexity.DestinationTypeCategory.Name == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeCategory.Name(childComplexity), true
-
-	case "DestinationTypeField.componentProps":
-		if e.complexity.DestinationTypeField.ComponentProps == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeField.ComponentProps(childComplexity), true
-
-	case "DestinationTypeField.componentType":
-		if e.complexity.DestinationTypeField.ComponentType == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeField.ComponentType(childComplexity), true
-
-	case "DestinationTypeField.displayName":
-		if e.complexity.DestinationTypeField.DisplayName == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeField.DisplayName(childComplexity), true
-
-	case "DestinationTypeField.initialValue":
-		if e.complexity.DestinationTypeField.InitialValue == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeField.InitialValue(childComplexity), true
-
-	case "DestinationTypeField.name":
-		if e.complexity.DestinationTypeField.Name == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeField.Name(childComplexity), true
-
-	case "DestinationTypeField.secret":
-		if e.complexity.DestinationTypeField.Secret == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeField.Secret(childComplexity), true
-
-	case "DestinationTypeField.thumbnailURL":
-		if e.complexity.DestinationTypeField.ThumbnailURL == nil {
-			break
-		}
-
-		return e.complexity.DestinationTypeField.ThumbnailURL(childComplexity), true
-
-	case "DestinationTypeField.videoURL":
-		if e.complexity.DestinationTypeField.VideoURL == nil {
+	case "GetConfigResponse.installation":
+		if e.complexity.GetConfigResponse.Installation == nil {
 			break
 		}
 
-		return e.complexity.DestinationTypeField.VideoURL(childComplexity), true
+		return e.complexity.GetConfigResponse.Installation(childComplexity), true
 
 	case "InstrumentedApplicationDetails.conditions":
 		if e.complexity.InstrumentedApplicationDetails.Conditions == nil {
@@ -705,149 +367,17 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualSourceRuntimeInfoContainer.Language(childComplexity), true
 
-	case "Mutation.applyDesiredDestinationToComputePlatform":
-		if e.complexity.Mutation.ApplyDesiredDestinationToComputePlatform == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_applyDesiredDestinationToComputePlatform_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.ApplyDesiredDestinationToComputePlatform(childComplexity, args["cpId"].(string), args["destinationId"].(string)), true
-
-	case "Mutation.applyDesiredNamespace":
-		if e.complexity.Mutation.ApplyDesiredNamespace == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_applyDesiredNamespace_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.ApplyDesiredNamespace(childComplexity, args["cpId"].(string), args["nsId"].(model.K8sNamespaceID), args["ns"].(model.K8sDesiredNamespaceInput)), true
-
-	case "Mutation.applyDesiredSource":
-		if e.complexity.Mutation.ApplyDesiredSource == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_applyDesiredSource_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.ApplyDesiredSource(childComplexity, args["cpId"].(string), args["sourceId"].(model.K8sSourceID), args["source"].(model.K8sDesiredSourceInput)), true
-
-	case "Mutation.createDesiredAction":
-		if e.complexity.Mutation.CreateDesiredAction == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_createDesiredAction_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.CreateDesiredAction(childComplexity, args["cpId"].(string), args["action"].(model.DesiredActionInput)), true
-
-	case "Mutation.createDesiredDestination":
-		if e.complexity.Mutation.CreateDesiredDestination == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_createDesiredDestination_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.CreateDesiredDestination(childComplexity, args["destinationType"].(string), args["destination"].(model.DesiredDestinationInput)), true
-
-	case "Mutation.deleteActualAction":
-		if e.complexity.Mutation.DeleteActualAction == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_deleteActualAction_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.DeleteActualAction(childComplexity, args["cpId"].(string), args["actionId"].(string), args["kind"].(string)), true
-
-	case "Mutation.deleteDesiredDestination":
-		if e.complexity.Mutation.DeleteDesiredDestination == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_deleteDesiredDestination_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.DeleteDesiredDestination(childComplexity, args["destinationId"].(string)), true
-
-	case "Mutation.deleteDesiredNamespace":
-		if e.complexity.Mutation.DeleteDesiredNamespace == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_deleteDesiredNamespace_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.DeleteDesiredNamespace(childComplexity, args["cpId"].(string), args["nsId"].(model.K8sNamespaceID)), true
-
-	case "Mutation.deleteDesiredSource":
-		if e.complexity.Mutation.DeleteDesiredSource == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_deleteDesiredSource_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.DeleteDesiredSource(childComplexity, args["cpId"].(string), args["sourceId"].(model.K8sSourceID)), true
-
-	case "Mutation.removeDesiredDestinationFromComputePlatform":
-		if e.complexity.Mutation.RemoveDesiredDestinationFromComputePlatform == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_removeDesiredDestinationFromComputePlatform_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.RemoveDesiredDestinationFromComputePlatform(childComplexity, args["cpId"].(string), args["destinationId"].(string)), true
-
-	case "Mutation.updateDesiredAction":
-		if e.complexity.Mutation.UpdateDesiredAction == nil {
-			break
-		}
-
-		args, err := ec.field_Mutation_updateDesiredAction_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Mutation.UpdateDesiredAction(childComplexity, args["cpId"].(string), args["actionId"].(string), args["action"].(model.DesiredActionInput)), true
-
-	case "Mutation.updateDesiredDestination":
-		if e.complexity.Mutation.UpdateDesiredDestination == nil {
+	case "Mutation.createK8sDesiredNamespace":
+		if e.complexity.Mutation.CreateK8sDesiredNamespace == nil {
 			break
 		}
 
-		args, err := ec.field_Mutation_updateDesiredDestination_args(context.TODO(), rawArgs)
+		args, err := ec.field_Mutation_createK8sDesiredNamespace_args(context.TODO(), rawArgs)
 		if err != nil {
 			return 0, false
 		}
 
-		return e.complexity.Mutation.UpdateDesiredDestination(childComplexity, args["destinationId"].(string), args["destination"].(model.DesiredDestinationInput)), true
+		return e.complexity.Mutation.CreateK8sDesiredNamespace(childComplexity, args["cpId"].(string), args["namespace"].(model.K8sDesiredNamespaceInput)), true
 
 	case "Query.computePlatform":
 		if e.complexity.Query.ComputePlatform == nil {
@@ -861,19 +391,12 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.ComputePlatform(childComplexity, args["cpId"].(string)), true
 
-	case "Query.desiredDestinations":
-		if e.complexity.Query.DesiredDestinations == nil {
-			break
-		}
-
-		return e.complexity.Query.DesiredDestinations(childComplexity), true
-
-	case "Query.destinationTypeCategories":
-		if e.complexity.Query.DestinationTypeCategories == nil {
+	case "Query.config":
+		if e.complexity.Query.Config == nil {
 			break
 		}
 
-		return e.complexity.Query.DestinationTypeCategories(childComplexity), true
+		return e.complexity.Query.Config(childComplexity), true
 
 	case "SourceLanguage.containerName":
 		if e.complexity.SourceLanguage.ContainerName == nil {
@@ -897,14 +420,10 @@ func (e *executableSchema) Exec(ctx context.Context) graphql.ResponseHandler {
 	rc := graphql.GetOperationContext(ctx)
 	ec := executionContext{rc, e, 0, 0, make(chan graphql.DeferredResult)}
 	inputUnmarshalMap := graphql.BuildUnmarshalerMap(
-		ec.unmarshalInputDesiredActionInput,
-		ec.unmarshalInputDesiredDestinationFieldInput,
-		ec.unmarshalInputDesiredDestinationInput,
 		ec.unmarshalInputK8sDesiredNamespaceInput,
 		ec.unmarshalInputK8sDesiredSourceInput,
 		ec.unmarshalInputK8sNamespaceId,
 		ec.unmarshalInputK8sSourceId,
-		ec.unmarshalInputWorkloadInput,
 	)
 	first := true
 
@@ -1069,7 +588,7 @@ func (ec *executionContext) field_ComputePlatform_k8sActualSource_args(ctx conte
 	return args, nil
 }
 
-func (ec *executionContext) field_Mutation_applyDesiredDestinationToComputePlatform_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+func (ec *executionContext) field_Mutation_createK8sDesiredNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
 	var arg0 string
@@ -1081,306 +600,15 @@ func (ec *executionContext) field_Mutation_applyDesiredDestinationToComputePlatf
 		}
 	}
 	args["cpId"] = arg0
-	var arg1 string
-	if tmp, ok := rawArgs["destinationId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationId"))
-		arg1, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["destinationId"] = arg1
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_applyDesiredNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 model.K8sNamespaceID
-	if tmp, ok := rawArgs["nsId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("nsId"))
-		arg1, err = ec.unmarshalNK8sNamespaceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sNamespaceID(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["nsId"] = arg1
-	var arg2 model.K8sDesiredNamespaceInput
-	if tmp, ok := rawArgs["ns"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("ns"))
-		arg2, err = ec.unmarshalNK8sDesiredNamespaceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredNamespaceInput(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["ns"] = arg2
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_applyDesiredSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 model.K8sSourceID
-	if tmp, ok := rawArgs["sourceId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("sourceId"))
-		arg1, err = ec.unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["sourceId"] = arg1
-	var arg2 model.K8sDesiredSourceInput
-	if tmp, ok := rawArgs["source"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("source"))
-		arg2, err = ec.unmarshalNK8sDesiredSourceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredSourceInput(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["source"] = arg2
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_createDesiredAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 model.DesiredActionInput
-	if tmp, ok := rawArgs["action"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("action"))
-		arg1, err = ec.unmarshalNDesiredActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredActionInput(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["action"] = arg1
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_createDesiredDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["destinationType"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationType"))
-		arg0, err = ec.unmarshalNString2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["destinationType"] = arg0
-	var arg1 model.DesiredDestinationInput
-	if tmp, ok := rawArgs["destination"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
-		arg1, err = ec.unmarshalNDesiredDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationInput(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["destination"] = arg1
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_deleteActualAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 string
-	if tmp, ok := rawArgs["actionId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("actionId"))
-		arg1, err = ec.unmarshalNString2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["actionId"] = arg1
-	var arg2 string
-	if tmp, ok := rawArgs["kind"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
-		arg2, err = ec.unmarshalNString2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["kind"] = arg2
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_deleteDesiredDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["destinationId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["destinationId"] = arg0
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_deleteDesiredNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 model.K8sNamespaceID
-	if tmp, ok := rawArgs["nsId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("nsId"))
-		arg1, err = ec.unmarshalNK8sNamespaceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sNamespaceID(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["nsId"] = arg1
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_deleteDesiredSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 model.K8sSourceID
-	if tmp, ok := rawArgs["sourceId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("sourceId"))
-		arg1, err = ec.unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["sourceId"] = arg1
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_removeDesiredDestinationFromComputePlatform_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 string
-	if tmp, ok := rawArgs["destinationId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationId"))
-		arg1, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["destinationId"] = arg1
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_updateDesiredAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 string
-	if tmp, ok := rawArgs["actionId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("actionId"))
-		arg1, err = ec.unmarshalNString2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["actionId"] = arg1
-	var arg2 model.DesiredActionInput
-	if tmp, ok := rawArgs["action"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("action"))
-		arg2, err = ec.unmarshalNDesiredActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredActionInput(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["action"] = arg2
-	return args, nil
-}
-
-func (ec *executionContext) field_Mutation_updateDesiredDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["destinationId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destinationId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["destinationId"] = arg0
-	var arg1 model.DesiredDestinationInput
-	if tmp, ok := rawArgs["destination"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
-		arg1, err = ec.unmarshalNDesiredDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationInput(ctx, tmp)
+	var arg1 model.K8sDesiredNamespaceInput
+	if tmp, ok := rawArgs["namespace"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+		arg1, err = ec.unmarshalNK8sDesiredNamespaceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredNamespaceInput(ctx, tmp)
 		if err != nil {
 			return nil, err
 		}
 	}
-	args["destination"] = arg1
+	args["namespace"] = arg1
 	return args, nil
 }
 
@@ -1452,8 +680,8 @@ func (ec *executionContext) field___Type_fields_args(ctx context.Context, rawArg
 
 // region    **************************** field.gotpl *****************************
 
-func (ec *executionContext) _ActualAction_id(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualAction_id(ctx, field)
+func (ec *executionContext) _ComputePlatform_id(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_id(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1483,9 +711,9 @@ func (ec *executionContext) _ActualAction_id(ctx context.Context, field graphql.
 	return ec.marshalNID2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ComputePlatform_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualAction",
+		Object:     "ComputePlatform",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1496,8 +724,8 @@ func (ec *executionContext) fieldContext_ActualAction_id(_ context.Context, fiel
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualAction_kind(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualAction_kind(ctx, field)
+func (ec *executionContext) _ComputePlatform_name(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1510,26 +738,23 @@ func (ec *executionContext) _ActualAction_kind(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Kind, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualAction_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ComputePlatform_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualAction",
+		Object:     "ComputePlatform",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1540,8 +765,8 @@ func (ec *executionContext) fieldContext_ActualAction_kind(_ context.Context, fi
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualAction_name(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualAction_name(ctx, field)
+func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1554,35 +779,38 @@ func (ec *executionContext) _ActualAction_name(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.ComputePlatformType, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(model.ComputePlatformType)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ComputePlatform_computePlatformType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualAction",
+		Object:     "ComputePlatform",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type ComputePlatformType does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualAction_notes(ctx, field)
+func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1595,7 +823,7 @@ func (ec *executionContext) _ActualAction_notes(ctx context.Context, field graph
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Notes, nil
+		return obj.K8sActualNamespace, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1604,29 +832,48 @@ func (ec *executionContext) _ActualAction_notes(ctx context.Context, field graph
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*model.K8sActualNamespace)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualAction",
+		Object:     "ComputePlatform",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _ActualAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualAction_disable(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_ComputePlatform_k8sActualNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
 	ctx = graphql.WithFieldContext(ctx, fc)
 	defer func() {
 		if r := recover(); r != nil {
@@ -1636,7 +883,7 @@ func (ec *executionContext) _ActualAction_disable(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Disable, nil
+		return obj.K8sActualNamespaces, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1648,26 +895,34 @@ func (ec *executionContext) _ActualAction_disable(ctx context.Context, field gra
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.([]*model.K8sActualNamespace)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualAction",
+		Object:     "ComputePlatform",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualAction_signals(ctx, field)
+func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1680,38 +935,66 @@ func (ec *executionContext) _ActualAction_signals(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Signals, nil
+		return ec.resolvers.ComputePlatform().K8sActualSource(rctx, obj, fc.Args["name"].(*string), fc.Args["namespace"].(*string), fc.Args["kind"].(*string))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]model.SignalType)
+	res := resTmp.(*model.K8sActualSource)
 	fc.Result = res
-	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualAction",
+		Object:     "ComputePlatform",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type SignalType does not have child fields")
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "creationTimestamp":
+				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "hasInstrumentedApplication":
+				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_ComputePlatform_k8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualAction_details(ctx context.Context, field graphql.CollectedField, obj *model.ActualAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualAction_details(ctx, field)
+func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1724,7 +1007,7 @@ func (ec *executionContext) _ActualAction_details(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Details, nil
+		return obj.K8sActualSources, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1736,26 +1019,46 @@ func (ec *executionContext) _ActualAction_details(ctx context.Context, field gra
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]*model.K8sActualSource)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualAction",
+		Object:     "ComputePlatform",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "creationTimestamp":
+				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "hasInstrumentedApplication":
+				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualDestination_id(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualDestination_id(ctx, field)
+func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1768,7 +1071,7 @@ func (ec *executionContext) _ActualDestination_id(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ID, nil
+		return obj.Type, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1782,24 +1085,24 @@ func (ec *executionContext) _ActualDestination_id(ctx context.Context, field gra
 	}
 	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNID2string(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualDestination_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Condition_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualDestination",
+		Object:     "Condition",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ID does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualDestination_name(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualDestination_name(ctx, field)
+func (ec *executionContext) _Condition_status(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_status(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1812,7 +1115,7 @@ func (ec *executionContext) _ActualDestination_name(ctx context.Context, field g
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.Status, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1824,26 +1127,26 @@ func (ec *executionContext) _ActualDestination_name(ctx context.Context, field g
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(model.ConditionStatus)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualDestination_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Condition_status(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualDestination",
+		Object:     "Condition",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type ConditionStatus does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualDestination_type(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualDestination_type(ctx, field)
+func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_lastTransitionTime(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1856,52 +1159,35 @@ func (ec *executionContext) _ActualDestination_type(ctx context.Context, field g
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return obj.LastTransitionTime, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.DestinationType)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNDestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualDestination_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualDestination",
+		Object:     "Condition",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "category":
-				return ec.fieldContext_DestinationType_category(ctx, field)
-			case "name":
-				return ec.fieldContext_DestinationType_name(ctx, field)
-			case "displayName":
-				return ec.fieldContext_DestinationType_displayName(ctx, field)
-			case "image":
-				return ec.fieldContext_DestinationType_image(ctx, field)
-			case "supportedSignals":
-				return ec.fieldContext_DestinationType_supportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_DestinationType_fields(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DestinationType", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualDestination_exportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualDestination_exportedSignals(ctx, field)
+func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_reason(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1914,38 +1200,35 @@ func (ec *executionContext) _ActualDestination_exportedSignals(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ExportedSignals, nil
+		return obj.Reason, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]model.SignalType)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualDestination_exportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualDestination",
+		Object:     "Condition",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type SignalType does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ActualDestination_fields(ctx context.Context, field graphql.CollectedField, obj *model.ActualDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ActualDestination_fields(ctx, field)
+func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_message(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1958,44 +1241,35 @@ func (ec *executionContext) _ActualDestination_fields(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Fields, nil
+		return obj.Message, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.DestinationSpecField)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNDestinationSpecField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecFieldᚄ(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ActualDestination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ActualDestination",
+		Object:     "Condition",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_DestinationSpecField_name(ctx, field)
-			case "value":
-				return ec.fieldContext_DestinationSpecField_value(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DestinationSpecField", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_id(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_id(ctx, field)
+func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context, field graphql.CollectedField, obj *model.GetConfigResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_GetConfigResponse_installation(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2008,7 +1282,7 @@ func (ec *executionContext) _ComputePlatform_id(ctx context.Context, field graph
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ID, nil
+		return obj.Installation, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2020,26 +1294,26 @@ func (ec *executionContext) _ComputePlatform_id(ctx context.Context, field graph
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(model.InstallationStatus)
 	fc.Result = res
-	return ec.marshalNID2string(ctx, field.Selections, res)
+	return ec.marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_GetConfigResponse_installation(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "GetConfigResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ID does not have child fields")
+			return nil, errors.New("field of type InstallationStatus does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_name(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_name(ctx, field)
+func (ec *executionContext) _InstrumentedApplicationDetails_languages(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_languages(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2052,7 +1326,7 @@ func (ec *executionContext) _ComputePlatform_name(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.Languages, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2061,26 +1335,32 @@ func (ec *executionContext) _ComputePlatform_name(ctx context.Context, field gra
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]*model.SourceLanguage)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOSourceLanguage2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguageᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_languages(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "InstrumentedApplicationDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "containerName":
+				return ec.fieldContext_SourceLanguage_containerName(ctx, field)
+			case "language":
+				return ec.fieldContext_SourceLanguage_language(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SourceLanguage", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2093,38 +1373,47 @@ func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ComputePlatformType, nil
+		return obj.Conditions, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.ComputePlatformType)
+	res := resTmp.([]*model.Condition)
 	fc.Result = res
-	return ec.marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx, field.Selections, res)
+	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_computePlatformType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "InstrumentedApplicationDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ComputePlatformType does not have child fields")
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_Condition_type(ctx, field)
+			case "status":
+				return ec.fieldContext_Condition_status(ctx, field)
+			case "lastTransitionTime":
+				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+			case "reason":
+				return ec.fieldContext_Condition_reason(ctx, field)
+			case "message":
+				return ec.fieldContext_Condition_message(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2137,67 +1426,7 @@ func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.K8sActualNamespace, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*model.K8sActualNamespace)
-	fc.Result = res
-	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_ComputePlatform_k8sActualNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.K8sActualNamespaces, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2209,34 +1438,26 @@ func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Con
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.K8sActualNamespace)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "K8sActualNamespace",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2249,7 +1470,7 @@ func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.ComputePlatform().K8sActualSource(rctx, obj, fc.Args["name"].(*string), fc.Args["namespace"].(*string), fc.Args["kind"].(*string))
+		return obj.AutoInstrumented, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2258,57 +1479,26 @@ func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*model.K8sActualSource)
+	res := resTmp.(*bool)
 	fc.Result = res
-	return ec.marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "K8sActualNamespace",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "namespace":
-				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
-			case "kind":
-				return ec.fieldContext_K8sActualSource_kind(ctx, field)
-			case "name":
-				return ec.fieldContext_K8sActualSource_name(ctx, field)
-			case "serviceName":
-				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "creationTimestamp":
-				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
-			case "numberOfInstances":
-				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "hasInstrumentedApplication":
-				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
-			case "instrumentedApplicationDetails":
-				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_ComputePlatform_k8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2338,9 +1528,9 @@ func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Contex
 	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "K8sActualNamespace",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -2371,8 +1561,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ cont
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_actualDestinations(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_actualDestinations(ctx, field)
+func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_namespace(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2385,7 +1575,7 @@ func (ec *executionContext) _ComputePlatform_actualDestinations(ctx context.Cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ActualDestinations, nil
+		return obj.Namespace, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2397,38 +1587,26 @@ func (ec *executionContext) _ComputePlatform_actualDestinations(ctx context.Cont
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.ActualDestination)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNActualDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualDestination(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_actualDestinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_ActualDestination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_ActualDestination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_ActualDestination_type(ctx, field)
-			case "exportedSignals":
-				return ec.fieldContext_ActualDestination_exportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_ActualDestination_fields(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ActualDestination", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_actualActions(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_actualActions(ctx, field)
+func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_kind(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2441,7 +1619,7 @@ func (ec *executionContext) _ComputePlatform_actualActions(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ActualActions, nil
+		return obj.Kind, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2453,42 +1631,26 @@ func (ec *executionContext) _ComputePlatform_actualActions(ctx context.Context,
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.ActualAction)
+	res := resTmp.(model.K8sResourceKind)
 	fc.Result = res
-	return ec.marshalNActualAction2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualAction(ctx, field.Selections, res)
+	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_actualActions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_ActualAction_id(ctx, field)
-			case "kind":
-				return ec.fieldContext_ActualAction_kind(ctx, field)
-			case "name":
-				return ec.fieldContext_ActualAction_name(ctx, field)
-			case "notes":
-				return ec.fieldContext_ActualAction_notes(ctx, field)
-			case "disable":
-				return ec.fieldContext_ActualAction_disable(ctx, field)
-			case "signals":
-				return ec.fieldContext_ActualAction_signals(ctx, field)
-			case "details":
-				return ec.fieldContext_ActualAction_details(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ActualAction", field.Name)
+			return nil, errors.New("field of type K8sResourceKind does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_type(ctx, field)
+func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2501,7 +1663,7 @@ func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.C
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2518,9 +1680,9 @@ func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.C
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -2531,8 +1693,8 @@ func (ec *executionContext) fieldContext_Condition_type(_ context.Context, field
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_status(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_status(ctx, field)
+func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2545,38 +1707,35 @@ func (ec *executionContext) _Condition_status(ctx context.Context, field graphql
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Status, nil
+		return obj.ServiceName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.ConditionStatus)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_status(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ConditionStatus does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2589,7 +1748,7 @@ func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.LastTransitionTime, nil
+		return obj.AutoInstrumented, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2598,26 +1757,26 @@ func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, f
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*bool)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_reason(ctx, field)
+func (ec *executionContext) _K8sActualSource_creationTimestamp(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2630,7 +1789,7 @@ func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Reason, nil
+		return obj.CreationTimestamp, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2644,9 +1803,9 @@ func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql
 	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_creationTimestamp(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -2657,8 +1816,8 @@ func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, fie
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_message(ctx, field)
+func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2671,7 +1830,7 @@ func (ec *executionContext) _Condition_message(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Message, nil
+		return obj.NumberOfInstances, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2680,26 +1839,26 @@ func (ec *executionContext) _Condition_message(ctx context.Context, field graphq
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*int)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Int does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DesiredDestination_id(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DesiredDestination_id(ctx, field)
+func (ec *executionContext) _K8sActualSource_hasInstrumentedApplication(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2712,7 +1871,7 @@ func (ec *executionContext) _DesiredDestination_id(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ID, nil
+		return obj.HasInstrumentedApplication, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2724,26 +1883,26 @@ func (ec *executionContext) _DesiredDestination_id(ctx context.Context, field gr
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalNID2string(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DesiredDestination_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_hasInstrumentedApplication(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DesiredDestination",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ID does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DesiredDestination_name(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DesiredDestination_name(ctx, field)
+func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2756,38 +1915,41 @@ func (ec *executionContext) _DesiredDestination_name(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.InstrumentedApplicationDetails, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*model.InstrumentedApplicationDetails)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DesiredDestination_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplicationDetails(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DesiredDestination",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "languages":
+				return ec.fieldContext_InstrumentedApplicationDetails_languages(ctx, field)
+			case "conditions":
+				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DesiredDestination_type(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DesiredDestination_type(ctx, field)
+func (ec *executionContext) _K8sActualSourceRuntimeInfo_mainContainer(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfo) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfo_mainContainer(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2800,52 +1962,41 @@ func (ec *executionContext) _DesiredDestination_type(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return obj.MainContainer, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.DestinationType)
+	res := resTmp.(*model.K8sActualSourceRuntimeInfoContainer)
 	fc.Result = res
-	return ec.marshalNDestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx, field.Selections, res)
+	return ec.marshalOK8sActualSourceRuntimeInfoContainer2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSourceRuntimeInfoContainer(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DesiredDestination_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfo_mainContainer(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DesiredDestination",
+		Object:     "K8sActualSourceRuntimeInfo",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "category":
-				return ec.fieldContext_DestinationType_category(ctx, field)
-			case "name":
-				return ec.fieldContext_DestinationType_name(ctx, field)
-			case "displayName":
-				return ec.fieldContext_DestinationType_displayName(ctx, field)
-			case "image":
-				return ec.fieldContext_DestinationType_image(ctx, field)
-			case "supportedSignals":
-				return ec.fieldContext_DestinationType_supportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_DestinationType_fields(ctx, field)
+			case "containerName":
+				return ec.fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(ctx, field)
+			case "language":
+				return ec.fieldContext_K8sActualSourceRuntimeInfoContainer_language(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type DestinationType", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSourceRuntimeInfoContainer", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DesiredDestination_exportSignals(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DesiredDestination_exportSignals(ctx, field)
+func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_containerName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfoContainer) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2858,7 +2009,7 @@ func (ec *executionContext) _DesiredDestination_exportSignals(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ExportSignals, nil
+		return obj.ContainerName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2870,26 +2021,26 @@ func (ec *executionContext) _DesiredDestination_exportSignals(ctx context.Contex
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]model.SignalType)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DesiredDestination_exportSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DesiredDestination",
+		Object:     "K8sActualSourceRuntimeInfoContainer",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type SignalType does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DesiredDestination_fields(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DesiredDestination_fields(ctx, field)
+func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_language(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfoContainer) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfoContainer_language(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2902,7 +2053,7 @@ func (ec *executionContext) _DesiredDestination_fields(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Fields, nil
+		return obj.Language, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2914,32 +2065,86 @@ func (ec *executionContext) _DesiredDestination_fields(ctx context.Context, fiel
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.DestinationSpecField)
+	res := resTmp.(model.ProgrammingLanguage)
 	fc.Result = res
-	return ec.marshalNDestinationSpecField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecFieldᚄ(ctx, field.Selections, res)
+	return ec.marshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DesiredDestination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfoContainer_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DesiredDestination",
+		Object:     "K8sActualSourceRuntimeInfoContainer",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ProgrammingLanguage does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createK8sDesiredNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().CreateK8sDesiredNamespace(rctx, fc.Args["cpId"].(string), fc.Args["namespace"].(model.K8sDesiredNamespaceInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.K8sActualNamespace)
+	fc.Result = res
+	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
 			case "name":
-				return ec.fieldContext_DestinationSpecField_name(ctx, field)
-			case "value":
-				return ec.fieldContext_DestinationSpecField_value(ctx, field)
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type DestinationSpecField", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createK8sDesiredNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DesiredDestination_computePlatforms(ctx context.Context, field graphql.CollectedField, obj *model.DesiredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DesiredDestination_computePlatforms(ctx, field)
+func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2952,29 +2157,26 @@ func (ec *executionContext) _DesiredDestination_computePlatforms(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ComputePlatforms, nil
+		return ec.resolvers.Query().ComputePlatform(rctx, fc.Args["cpId"].(string))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.ComputePlatform)
+	res := resTmp.(*model.ComputePlatform)
 	fc.Result = res
-	return ec.marshalNComputePlatform2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformᚄ(ctx, field.Selections, res)
+	return ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DesiredDestination_computePlatforms(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query_computePlatform(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DesiredDestination",
+		Object:     "Query",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
 			case "id":
@@ -2991,19 +2193,26 @@ func (ec *executionContext) fieldContext_DesiredDestination_computePlatforms(_ c
 				return ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
 			case "k8sActualSources":
 				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
-			case "actualDestinations":
-				return ec.fieldContext_ComputePlatform_actualDestinations(ctx, field)
-			case "actualActions":
-				return ec.fieldContext_ComputePlatform_actualActions(ctx, field)
 			}
 			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query_computePlatform_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationSpecField_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationSpecField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationSpecField_name(ctx, field)
+func (ec *executionContext) _Query_config(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_config(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3016,38 +2225,39 @@ func (ec *executionContext) _DestinationSpecField_name(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return ec.resolvers.Query().Config(rctx)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*model.GetConfigResponse)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetConfigResponse(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationSpecField_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query_config(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationSpecField",
+		Object:     "Query",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "installation":
+				return ec.fieldContext_GetConfigResponse_installation(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type GetConfigResponse", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationSpecField_value(ctx context.Context, field graphql.CollectedField, obj *model.DestinationSpecField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationSpecField_value(ctx, field)
+func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3060,38 +2270,68 @@ func (ec *executionContext) _DestinationSpecField_value(ctx context.Context, fie
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Value, nil
+		return ec.introspectType(fc.Args["name"].(string))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*introspection.Type)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationSpecField_value(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query___type(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationSpecField",
+		Object:     "Query",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query___type_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationType_category(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationType_category(ctx, field)
+func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___schema(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3104,38 +2344,49 @@ func (ec *executionContext) _DestinationType_category(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Category, nil
+		return ec.introspectSchema()
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*introspection.Schema)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationType_category(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationType",
+		Object:     "Query",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "description":
+				return ec.fieldContext___Schema_description(ctx, field)
+			case "types":
+				return ec.fieldContext___Schema_types(ctx, field)
+			case "queryType":
+				return ec.fieldContext___Schema_queryType(ctx, field)
+			case "mutationType":
+				return ec.fieldContext___Schema_mutationType(ctx, field)
+			case "subscriptionType":
+				return ec.fieldContext___Schema_subscriptionType(ctx, field)
+			case "directives":
+				return ec.fieldContext___Schema_directives(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Schema", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationType_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationType_name(ctx, field)
+func (ec *executionContext) _SourceLanguage_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceLanguage) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceLanguage_containerName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3148,7 +2399,7 @@ func (ec *executionContext) _DestinationType_name(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.ContainerName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3165,9 +2416,9 @@ func (ec *executionContext) _DestinationType_name(ctx context.Context, field gra
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationType_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SourceLanguage_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationType",
+		Object:     "SourceLanguage",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -3178,8 +2429,8 @@ func (ec *executionContext) fieldContext_DestinationType_name(_ context.Context,
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationType_displayName(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationType_displayName(ctx, field)
+func (ec *executionContext) _SourceLanguage_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceLanguage) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceLanguage_language(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3192,7 +2443,7 @@ func (ec *executionContext) _DestinationType_displayName(ctx context.Context, fi
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.DisplayName, nil
+		return obj.Language, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3209,9 +2460,9 @@ func (ec *executionContext) _DestinationType_displayName(ctx context.Context, fi
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationType_displayName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SourceLanguage_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationType",
+		Object:     "SourceLanguage",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -3222,8 +2473,8 @@ func (ec *executionContext) fieldContext_DestinationType_displayName(_ context.C
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationType_image(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationType_image(ctx, field)
+func (ec *executionContext) ___Directive_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3236,23 +2487,26 @@ func (ec *executionContext) _DestinationType_image(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Image, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationType_image(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationType",
+		Object:     "__Directive",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -3263,8 +2517,8 @@ func (ec *executionContext) fieldContext_DestinationType_image(_ context.Context
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationType_supportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationType_supportedSignals(ctx, field)
+func (ec *executionContext) ___Directive_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3277,38 +2531,35 @@ func (ec *executionContext) _DestinationType_supportedSignals(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.SupportedSignals, nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]model.SignalType)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationType_supportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationType",
+		Object:     "__Directive",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type SignalType does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationType_fields(ctx context.Context, field graphql.CollectedField, obj *model.DestinationType) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationType_fields(ctx, field)
+func (ec *executionContext) ___Directive_locations(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_locations(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3321,7 +2572,7 @@ func (ec *executionContext) _DestinationType_fields(ctx context.Context, field g
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Fields, nil
+		return obj.Locations, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3333,44 +2584,26 @@ func (ec *executionContext) _DestinationType_fields(ctx context.Context, field g
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.DestinationTypeField)
+	res := resTmp.([]string)
 	fc.Result = res
-	return ec.marshalNDestinationTypeField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeFieldᚄ(ctx, field.Selections, res)
+	return ec.marshalN__DirectiveLocation2ᚕstringᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationType_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_locations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationType",
+		Object:     "__Directive",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_DestinationTypeField_name(ctx, field)
-			case "displayName":
-				return ec.fieldContext_DestinationTypeField_displayName(ctx, field)
-			case "videoURL":
-				return ec.fieldContext_DestinationTypeField_videoURL(ctx, field)
-			case "thumbnailURL":
-				return ec.fieldContext_DestinationTypeField_thumbnailURL(ctx, field)
-			case "componentType":
-				return ec.fieldContext_DestinationTypeField_componentType(ctx, field)
-			case "componentProps":
-				return ec.fieldContext_DestinationTypeField_componentProps(ctx, field)
-			case "secret":
-				return ec.fieldContext_DestinationTypeField_secret(ctx, field)
-			case "initialValue":
-				return ec.fieldContext_DestinationTypeField_initialValue(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DestinationTypeField", field.Name)
+			return nil, errors.New("field of type __DirectiveLocation does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeCategory_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeCategory) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeCategory_name(ctx, field)
+func (ec *executionContext) ___Directive_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_args(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3383,7 +2616,7 @@ func (ec *executionContext) _DestinationTypeCategory_name(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.Args, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3395,26 +2628,36 @@ func (ec *executionContext) _DestinationTypeCategory_name(ctx context.Context, f
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]introspection.InputValue)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeCategory_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeCategory",
+		Object:     "__Directive",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeCategory_destinationTypes(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeCategory) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeCategory_destinationTypes(ctx, field)
+func (ec *executionContext) ___Directive_isRepeatable(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_isRepeatable(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3427,7 +2670,7 @@ func (ec *executionContext) _DestinationTypeCategory_destinationTypes(ctx contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.DestinationTypes, nil
+		return obj.IsRepeatable, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3439,40 +2682,26 @@ func (ec *executionContext) _DestinationTypeCategory_destinationTypes(ctx contex
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.DestinationType)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalNDestinationType2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeCategory_destinationTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_isRepeatable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeCategory",
+		Object:     "__Directive",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "category":
-				return ec.fieldContext_DestinationType_category(ctx, field)
-			case "name":
-				return ec.fieldContext_DestinationType_name(ctx, field)
-			case "displayName":
-				return ec.fieldContext_DestinationType_displayName(ctx, field)
-			case "image":
-				return ec.fieldContext_DestinationType_image(ctx, field)
-			case "supportedSignals":
-				return ec.fieldContext_DestinationType_supportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_DestinationType_fields(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DestinationType", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeField_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeField_name(ctx, field)
+func (ec *executionContext) ___EnumValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3502,9 +2731,9 @@ func (ec *executionContext) _DestinationTypeField_name(ctx context.Context, fiel
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeField_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___EnumValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeField",
+		Object:     "__EnumValue",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -3515,8 +2744,8 @@ func (ec *executionContext) fieldContext_DestinationTypeField_name(_ context.Con
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeField_displayName(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeField_displayName(ctx, field)
+func (ec *executionContext) ___EnumValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3529,28 +2758,25 @@ func (ec *executionContext) _DestinationTypeField_displayName(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.DisplayName, nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeField_displayName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___EnumValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeField",
+		Object:     "__EnumValue",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
@@ -3559,8 +2785,8 @@ func (ec *executionContext) fieldContext_DestinationTypeField_displayName(_ cont
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeField_videoURL(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeField_videoURL(ctx, field)
+func (ec *executionContext) ___EnumValue_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_isDeprecated(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3573,35 +2799,38 @@ func (ec *executionContext) _DestinationTypeField_videoURL(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.VideoURL, nil
+		return obj.IsDeprecated(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeField_videoURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___EnumValue_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeField",
+		Object:     "__EnumValue",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeField_thumbnailURL(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeField_thumbnailURL(ctx, field)
+func (ec *executionContext) ___EnumValue_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_deprecationReason(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3614,7 +2843,7 @@ func (ec *executionContext) _DestinationTypeField_thumbnailURL(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ThumbnailURL, nil
+		return obj.DeprecationReason(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3628,11 +2857,11 @@ func (ec *executionContext) _DestinationTypeField_thumbnailURL(ctx context.Conte
 	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeField_thumbnailURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___EnumValue_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeField",
+		Object:     "__EnumValue",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
@@ -3641,8 +2870,8 @@ func (ec *executionContext) fieldContext_DestinationTypeField_thumbnailURL(_ con
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeField_componentType(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeField_componentType(ctx, field)
+func (ec *executionContext) ___Field_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3655,7 +2884,7 @@ func (ec *executionContext) _DestinationTypeField_componentType(ctx context.Cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ComponentType, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3672,9 +2901,9 @@ func (ec *executionContext) _DestinationTypeField_componentType(ctx context.Cont
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeField_componentType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Field_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeField",
+		Object:     "__Field",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -3685,8 +2914,8 @@ func (ec *executionContext) fieldContext_DestinationTypeField_componentType(_ co
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeField_componentProps(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeField_componentProps(ctx, field)
+func (ec *executionContext) ___Field_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3699,28 +2928,25 @@ func (ec *executionContext) _DestinationTypeField_componentProps(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ComponentProps, nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeField_componentProps(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Field_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeField",
+		Object:     "__Field",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
@@ -3729,8 +2955,8 @@ func (ec *executionContext) fieldContext_DestinationTypeField_componentProps(_ c
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeField_secret(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeField_secret(ctx, field)
+func (ec *executionContext) ___Field_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_args(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3743,7 +2969,7 @@ func (ec *executionContext) _DestinationTypeField_secret(ctx context.Context, fi
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Secret, nil
+		return obj.Args, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3755,26 +2981,36 @@ func (ec *executionContext) _DestinationTypeField_secret(ctx context.Context, fi
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.([]introspection.InputValue)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeField_secret(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Field_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeField",
+		Object:     "__Field",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DestinationTypeField_initialValue(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypeField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DestinationTypeField_initialValue(ctx, field)
+func (ec *executionContext) ___Field_type(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3787,35 +3023,60 @@ func (ec *executionContext) _DestinationTypeField_initialValue(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.InitialValue, nil
+		return obj.Type, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*introspection.Type)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DestinationTypeField_initialValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Field_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DestinationTypeField",
+		Object:     "__Field",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentedApplicationDetails_languages(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentedApplicationDetails_languages(ctx, field)
+func (ec *executionContext) ___Field_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_isDeprecated(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3828,41 +3089,38 @@ func (ec *executionContext) _InstrumentedApplicationDetails_languages(ctx contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Languages, nil
+		return obj.IsDeprecated(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.SourceLanguage)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalOSourceLanguage2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguageᚄ(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_languages(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Field_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentedApplicationDetails",
+		Object:     "__Field",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "containerName":
-				return ec.fieldContext_SourceLanguage_containerName(ctx, field)
-			case "language":
-				return ec.fieldContext_SourceLanguage_language(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type SourceLanguage", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+func (ec *executionContext) ___Field_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_deprecationReason(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3875,7 +3133,7 @@ func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Conditions, nil
+		return obj.DeprecationReason(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3884,38 +3142,26 @@ func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx conte
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.([]*model.Condition)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Field_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentedApplicationDetails",
+		Object:     "__Field",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "type":
-				return ec.fieldContext_Condition_type(ctx, field)
-			case "status":
-				return ec.fieldContext_Condition_status(ctx, field)
-			case "lastTransitionTime":
-				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
-			case "reason":
-				return ec.fieldContext_Condition_reason(ctx, field)
-			case "message":
-				return ec.fieldContext_Condition_message(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
+func (ec *executionContext) ___InputValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3945,9 +3191,9 @@ func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___InputValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "__InputValue",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -3958,8 +3204,8 @@ func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Conte
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+func (ec *executionContext) ___InputValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3972,7 +3218,7 @@ func (ec *executionContext) _K8sActualNamespace_autoInstrumented(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.AutoInstrumented, nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3981,26 +3227,26 @@ func (ec *executionContext) _K8sActualNamespace_autoInstrumented(ctx context.Con
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*bool)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___InputValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "__InputValue",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+func (ec *executionContext) ___InputValue_type(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4013,7 +3259,7 @@ func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.K8sActualSources, nil
+		return obj.Type, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -4025,46 +3271,48 @@ func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Con
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.K8sActualSource)
+	res := resTmp.(*introspection.Type)
 	fc.Result = res
-	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___InputValue_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "__InputValue",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "namespace":
-				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
 			case "kind":
-				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+				return ec.fieldContext___Type_kind(ctx, field)
 			case "name":
-				return ec.fieldContext_K8sActualSource_name(ctx, field)
-			case "serviceName":
-				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "creationTimestamp":
-				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
-			case "numberOfInstances":
-				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "hasInstrumentedApplication":
-				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
-			case "instrumentedApplicationDetails":
-				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_namespace(ctx, field)
+func (ec *executionContext) ___InputValue_defaultValue(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_defaultValue(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4077,26 +3325,23 @@ func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Namespace, nil
+		return obj.DefaultValue, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___InputValue_defaultValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__InputValue",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -4107,8 +3352,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Con
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_kind(ctx, field)
+func (ec *executionContext) ___Schema_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4121,38 +3366,35 @@ func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Kind, nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.K8sResourceKind)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Schema_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__Schema",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type K8sResourceKind does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_name(ctx, field)
+func (ec *executionContext) ___Schema_types(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_types(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4165,7 +3407,7 @@ func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.Types(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -4177,26 +3419,48 @@ func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field gra
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]introspection.Type)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalN__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Schema_types(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__Schema",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+func (ec *executionContext) ___Schema_queryType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_queryType(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4209,35 +3473,60 @@ func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, fi
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ServiceName, nil
+		return obj.QueryType(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*introspection.Type)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Schema_queryType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__Schema",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+func (ec *executionContext) ___Schema_mutationType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_mutationType(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4250,7 +3539,7 @@ func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.AutoInstrumented, nil
+		return obj.MutationType(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -4259,26 +3548,48 @@ func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Contex
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*bool)
+	res := resTmp.(*introspection.Type)
 	fc.Result = res
-	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Schema_mutationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__Schema",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_creationTimestamp(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
+func (ec *executionContext) ___Schema_subscriptionType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_subscriptionType(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4291,7 +3602,7 @@ func (ec *executionContext) _K8sActualSource_creationTimestamp(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.CreationTimestamp, nil
+		return obj.SubscriptionType(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -4300,26 +3611,48 @@ func (ec *executionContext) _K8sActualSource_creationTimestamp(ctx context.Conte
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*introspection.Type)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_creationTimestamp(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Schema_subscriptionType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__Schema",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+func (ec *executionContext) ___Schema_directives(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_directives(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4332,35 +3665,50 @@ func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.NumberOfInstances, nil
+		return obj.Directives(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*int)
+	res := resTmp.([]introspection.Directive)
 	fc.Result = res
-	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+	return ec.marshalN__Directive2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirectiveᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Schema_directives(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__Schema",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Int does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___Directive_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Directive_description(ctx, field)
+			case "locations":
+				return ec.fieldContext___Directive_locations(ctx, field)
+			case "args":
+				return ec.fieldContext___Directive_args(ctx, field)
+			case "isRepeatable":
+				return ec.fieldContext___Directive_isRepeatable(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Directive", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_hasInstrumentedApplication(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+func (ec *executionContext) ___Type_kind(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_kind(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4373,7 +3721,7 @@ func (ec *executionContext) _K8sActualSource_hasInstrumentedApplication(ctx cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.HasInstrumentedApplication, nil
+		return obj.Kind(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -4385,26 +3733,26 @@ func (ec *executionContext) _K8sActualSource_hasInstrumentedApplication(ctx cont
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalN__TypeKind2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_hasInstrumentedApplication(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__Type",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type __TypeKind does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+func (ec *executionContext) ___Type_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4417,7 +3765,7 @@ func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.InstrumentedApplicationDetails, nil
+		return obj.Name(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -4426,32 +3774,26 @@ func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*model.InstrumentedApplicationDetails)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplicationDetails(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "__Type",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "languages":
-				return ec.fieldContext_InstrumentedApplicationDetails_languages(ctx, field)
-			case "conditions":
-				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSourceRuntimeInfo_mainContainer(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfo) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfo_mainContainer(ctx, field)
+func (ec *executionContext) ___Type_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4464,7 +3806,7 @@ func (ec *executionContext) _K8sActualSourceRuntimeInfo_mainContainer(ctx contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.MainContainer, nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -4473,32 +3815,26 @@ func (ec *executionContext) _K8sActualSourceRuntimeInfo_mainContainer(ctx contex
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*model.K8sActualSourceRuntimeInfoContainer)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalOK8sActualSourceRuntimeInfoContainer2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSourceRuntimeInfoContainer(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfo_mainContainer(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSourceRuntimeInfo",
+		Object:     "__Type",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "containerName":
-				return ec.fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(ctx, field)
-			case "language":
-				return ec.fieldContext_K8sActualSourceRuntimeInfoContainer_language(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSourceRuntimeInfoContainer", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_containerName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfoContainer) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(ctx, field)
+func (ec *executionContext) ___Type_fields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_fields(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4511,38 +3847,60 @@ func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_containerName(c
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ContainerName, nil
+		return obj.Fields(fc.Args["includeDeprecated"].(bool)), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]introspection.Field)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalO__Field2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐFieldᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_fields(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSourceRuntimeInfoContainer",
+		Object:     "__Type",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___Field_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Field_description(ctx, field)
+			case "args":
+				return ec.fieldContext___Field_args(ctx, field)
+			case "type":
+				return ec.fieldContext___Field_type(ctx, field)
+			case "isDeprecated":
+				return ec.fieldContext___Field_isDeprecated(ctx, field)
+			case "deprecationReason":
+				return ec.fieldContext___Field_deprecationReason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Field", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field___Type_fields_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_language(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfoContainer) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfoContainer_language(ctx, field)
+func (ec *executionContext) ___Type_interfaces(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_interfaces(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4555,38 +3913,57 @@ func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_language(ctx co
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Language, nil
+		return obj.Interfaces(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.ProgrammingLanguage)
+	res := resTmp.([]introspection.Type)
 	fc.Result = res
-	return ec.marshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx, field.Selections, res)
+	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfoContainer_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_interfaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSourceRuntimeInfoContainer",
+		Object:     "__Type",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ProgrammingLanguage does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_applyDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_applyDesiredNamespace(ctx, field)
+func (ec *executionContext) ___Type_possibleTypes(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_possibleTypes(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4599,49 +3976,57 @@ func (ec *executionContext) _Mutation_applyDesiredNamespace(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().ApplyDesiredNamespace(rctx, fc.Args["cpId"].(string), fc.Args["nsId"].(model.K8sNamespaceID), fc.Args["ns"].(model.K8sDesiredNamespaceInput))
+		return obj.PossibleTypes(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.([]introspection.Type)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_applyDesiredNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_possibleTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "__Type",
 		Field:      field,
 		IsMethod:   true,
-		IsResolver: true,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_applyDesiredNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_deleteDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_deleteDesiredNamespace(ctx, field)
+func (ec *executionContext) ___Type_enumValues(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_enumValues(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4654,31 +4039,38 @@ func (ec *executionContext) _Mutation_deleteDesiredNamespace(ctx context.Context
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().DeleteDesiredNamespace(rctx, fc.Args["cpId"].(string), fc.Args["nsId"].(model.K8sNamespaceID))
+		return obj.EnumValues(fc.Args["includeDeprecated"].(bool)), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.([]introspection.EnumValue)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalO__EnumValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValueᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_deleteDesiredNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_enumValues(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "__Type",
 		Field:      field,
 		IsMethod:   true,
-		IsResolver: true,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___EnumValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___EnumValue_description(ctx, field)
+			case "isDeprecated":
+				return ec.fieldContext___EnumValue_isDeprecated(ctx, field)
+			case "deprecationReason":
+				return ec.fieldContext___EnumValue_deprecationReason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __EnumValue", field.Name)
 		},
 	}
 	defer func() {
@@ -4688,15 +4080,15 @@ func (ec *executionContext) fieldContext_Mutation_deleteDesiredNamespace(ctx con
 		}
 	}()
 	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_deleteDesiredNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+	if fc.Args, err = ec.field___Type_enumValues_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
 		ec.Error(ctx, err)
 		return fc, err
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_applyDesiredSource(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_applyDesiredSource(ctx, field)
+func (ec *executionContext) ___Type_inputFields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_inputFields(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4709,49 +4101,45 @@ func (ec *executionContext) _Mutation_applyDesiredSource(ctx context.Context, fi
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().ApplyDesiredSource(rctx, fc.Args["cpId"].(string), fc.Args["sourceId"].(model.K8sSourceID), fc.Args["source"].(model.K8sDesiredSourceInput))
+		return obj.InputFields(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.([]introspection.InputValue)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalO__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_applyDesiredSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_inputFields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "__Type",
 		Field:      field,
 		IsMethod:   true,
-		IsResolver: true,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_applyDesiredSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_deleteDesiredSource(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_deleteDesiredSource(ctx, field)
+func (ec *executionContext) ___Type_ofType(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_ofType(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4764,49 +4152,57 @@ func (ec *executionContext) _Mutation_deleteDesiredSource(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().DeleteDesiredSource(rctx, fc.Args["cpId"].(string), fc.Args["sourceId"].(model.K8sSourceID))
+		return obj.OfType(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(*introspection.Type)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_deleteDesiredSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_ofType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "__Type",
 		Field:      field,
 		IsMethod:   true,
-		IsResolver: true,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_deleteDesiredSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_createDesiredDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_createDesiredDestination(ctx, field)
+func (ec *executionContext) ___Type_specifiedByURL(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_specifiedByURL(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -4819,3550 +4215,241 @@ func (ec *executionContext) _Mutation_createDesiredDestination(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().CreateDesiredDestination(rctx, fc.Args["destinationType"].(string), fc.Args["destination"].(model.DesiredDestinationInput))
+		return obj.SpecifiedByURL(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.DesiredDestination)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNDesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_createDesiredDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "__Type",
 		Field:      field,
 		IsMethod:   true,
-		IsResolver: true,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_DesiredDestination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_DesiredDestination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_DesiredDestination_type(ctx, field)
-			case "exportSignals":
-				return ec.fieldContext_DesiredDestination_exportSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_DesiredDestination_fields(ctx, field)
-			case "computePlatforms":
-				return ec.fieldContext_DesiredDestination_computePlatforms(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DesiredDestination", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_createDesiredDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_updateDesiredDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_updateDesiredDestination(ctx, field)
-	if err != nil {
-		return graphql.Null
+// endregion **************************** field.gotpl *****************************
+
+// region    **************************** input.gotpl *****************************
+
+func (ec *executionContext) unmarshalInputK8sDesiredNamespaceInput(ctx context.Context, obj interface{}) (model.K8sDesiredNamespaceInput, error) {
+	var it model.K8sDesiredNamespaceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
 	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
+
+	fieldsInOrder := [...]string{"autoInstrument"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
 		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().UpdateDesiredDestination(rctx, fc.Args["destinationId"].(string), fc.Args["destination"].(model.DesiredDestinationInput))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
+		switch k {
+		case "autoInstrument":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("autoInstrument"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.AutoInstrument = data
 		}
-		return graphql.Null
 	}
-	res := resTmp.(*model.DesiredDestination)
-	fc.Result = res
-	return ec.marshalNDesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx, field.Selections, res)
+
+	return it, nil
 }
 
-func (ec *executionContext) fieldContext_Mutation_updateDesiredDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Mutation",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_DesiredDestination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_DesiredDestination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_DesiredDestination_type(ctx, field)
-			case "exportSignals":
-				return ec.fieldContext_DesiredDestination_exportSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_DesiredDestination_fields(ctx, field)
-			case "computePlatforms":
-				return ec.fieldContext_DesiredDestination_computePlatforms(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DesiredDestination", field.Name)
-		},
+func (ec *executionContext) unmarshalInputK8sDesiredSourceInput(ctx context.Context, obj interface{}) (model.K8sDesiredSourceInput, error) {
+	var it model.K8sDesiredSourceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
+
+	fieldsInOrder := [...]string{"serviceName", "autoInstrument"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "serviceName":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("serviceName"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.ServiceName = data
+		case "autoInstrument":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("autoInstrument"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.AutoInstrument = data
 		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_updateDesiredDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
 	}
-	return fc, nil
+
+	return it, nil
 }
 
-func (ec *executionContext) _Mutation_deleteDesiredDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_deleteDesiredDestination(ctx, field)
-	if err != nil {
-		return graphql.Null
+func (ec *executionContext) unmarshalInputK8sNamespaceId(ctx context.Context, obj interface{}) (model.K8sNamespaceID, error) {
+	var it model.K8sNamespaceID
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
 	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
+
+	fieldsInOrder := [...]string{"name"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
 		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().DeleteDesiredDestination(rctx, fc.Args["destinationId"].(string))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
 		}
-		return graphql.Null
 	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+
+	return it, nil
 }
 
-func (ec *executionContext) fieldContext_Mutation_deleteDesiredDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Mutation",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_deleteDesiredDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Mutation_applyDesiredDestinationToComputePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_applyDesiredDestinationToComputePlatform(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().ApplyDesiredDestinationToComputePlatform(rctx, fc.Args["cpId"].(string), fc.Args["destinationId"].(string))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Mutation_applyDesiredDestinationToComputePlatform(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Mutation",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_applyDesiredDestinationToComputePlatform_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Mutation_removeDesiredDestinationFromComputePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_removeDesiredDestinationFromComputePlatform(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().RemoveDesiredDestinationFromComputePlatform(rctx, fc.Args["cpId"].(string), fc.Args["destinationId"].(string))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Mutation_removeDesiredDestinationFromComputePlatform(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Mutation",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_removeDesiredDestinationFromComputePlatform_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Mutation_createDesiredAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_createDesiredAction(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().CreateDesiredAction(rctx, fc.Args["cpId"].(string), fc.Args["action"].(model.DesiredActionInput))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Mutation_createDesiredAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Mutation",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_createDesiredAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Mutation_updateDesiredAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_updateDesiredAction(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().UpdateDesiredAction(rctx, fc.Args["cpId"].(string), fc.Args["actionId"].(string), fc.Args["action"].(model.DesiredActionInput))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Mutation_updateDesiredAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Mutation",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_updateDesiredAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Mutation_deleteActualAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_deleteActualAction(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().DeleteActualAction(rctx, fc.Args["cpId"].(string), fc.Args["actionId"].(string), fc.Args["kind"].(string))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Mutation_deleteActualAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Mutation",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_deleteActualAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().ComputePlatform(rctx, fc.Args["cpId"].(string))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*model.ComputePlatform)
-	fc.Result = res
-	return ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query_computePlatform(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_ComputePlatform_id(ctx, field)
-			case "name":
-				return ec.fieldContext_ComputePlatform_name(ctx, field)
-			case "computePlatformType":
-				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
-			case "k8sActualNamespace":
-				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
-			case "k8sActualNamespaces":
-				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
-			case "k8sActualSource":
-				return ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
-			case "actualDestinations":
-				return ec.fieldContext_ComputePlatform_actualDestinations(ctx, field)
-			case "actualActions":
-				return ec.fieldContext_ComputePlatform_actualActions(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Query_computePlatform_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Query_destinationTypeCategories(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_destinationTypeCategories(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().DestinationTypeCategories(rctx)
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.([]*model.DestinationTypeCategory)
-	fc.Result = res
-	return ec.marshalODestinationTypeCategory2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeCategory(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query_destinationTypeCategories(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_DestinationTypeCategory_name(ctx, field)
-			case "destinationTypes":
-				return ec.fieldContext_DestinationTypeCategory_destinationTypes(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DestinationTypeCategory", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Query_desiredDestinations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_desiredDestinations(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().DesiredDestinations(rctx)
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.([]*model.DesiredDestination)
-	fc.Result = res
-	return ec.marshalODesiredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query_desiredDestinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_DesiredDestination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_DesiredDestination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_DesiredDestination_type(ctx, field)
-			case "exportSignals":
-				return ec.fieldContext_DesiredDestination_exportSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_DesiredDestination_fields(ctx, field)
-			case "computePlatforms":
-				return ec.fieldContext_DesiredDestination_computePlatforms(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DesiredDestination", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query___type(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.introspectType(fc.Args["name"].(string))
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Type)
-	fc.Result = res
-	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query___type(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Query___type_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query___schema(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.introspectSchema()
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Schema)
-	fc.Result = res
-	return ec.marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "description":
-				return ec.fieldContext___Schema_description(ctx, field)
-			case "types":
-				return ec.fieldContext___Schema_types(ctx, field)
-			case "queryType":
-				return ec.fieldContext___Schema_queryType(ctx, field)
-			case "mutationType":
-				return ec.fieldContext___Schema_mutationType(ctx, field)
-			case "subscriptionType":
-				return ec.fieldContext___Schema_subscriptionType(ctx, field)
-			case "directives":
-				return ec.fieldContext___Schema_directives(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Schema", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _SourceLanguage_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceLanguage) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SourceLanguage_containerName(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.ContainerName, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_SourceLanguage_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "SourceLanguage",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _SourceLanguage_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceLanguage) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SourceLanguage_language(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Language, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_SourceLanguage_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "SourceLanguage",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Directive_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_name(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Directive_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Directive",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Directive_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_description(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Directive_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Directive",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Directive_locations(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_locations(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Locations, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]string)
-	fc.Result = res
-	return ec.marshalN__DirectiveLocation2ᚕstringᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Directive_locations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Directive",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type __DirectiveLocation does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Directive_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_args(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Args, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.InputValue)
-	fc.Result = res
-	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Directive_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Directive",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___InputValue_name(ctx, field)
-			case "description":
-				return ec.fieldContext___InputValue_description(ctx, field)
-			case "type":
-				return ec.fieldContext___InputValue_type(ctx, field)
-			case "defaultValue":
-				return ec.fieldContext___InputValue_defaultValue(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Directive_isRepeatable(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_isRepeatable(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.IsRepeatable, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Directive_isRepeatable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Directive",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___EnumValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___EnumValue_name(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___EnumValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__EnumValue",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___EnumValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___EnumValue_description(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___EnumValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__EnumValue",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___EnumValue_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___EnumValue_isDeprecated(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.IsDeprecated(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___EnumValue_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__EnumValue",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___EnumValue_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___EnumValue_deprecationReason(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.DeprecationReason(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___EnumValue_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__EnumValue",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Field_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_name(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Field_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Field",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Field_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_description(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Field_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Field",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Field_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_args(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Args, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.InputValue)
-	fc.Result = res
-	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Field_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Field",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___InputValue_name(ctx, field)
-			case "description":
-				return ec.fieldContext___InputValue_description(ctx, field)
-			case "type":
-				return ec.fieldContext___InputValue_type(ctx, field)
-			case "defaultValue":
-				return ec.fieldContext___InputValue_defaultValue(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Field_type(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_type(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Type)
-	fc.Result = res
-	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Field_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Field",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Field_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_isDeprecated(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.IsDeprecated(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(bool)
-	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Field_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Field",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Field_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_deprecationReason(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.DeprecationReason(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Field_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Field",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___InputValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___InputValue_name(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___InputValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__InputValue",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___InputValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___InputValue_description(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___InputValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__InputValue",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___InputValue_type(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___InputValue_type(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Type)
-	fc.Result = res
-	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___InputValue_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__InputValue",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___InputValue_defaultValue(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___InputValue_defaultValue(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.DefaultValue, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___InputValue_defaultValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__InputValue",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Schema_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_description(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Schema_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Schema",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Schema_types(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_types(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Types(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.Type)
-	fc.Result = res
-	return ec.marshalN__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Schema_types(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Schema",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Schema_queryType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_queryType(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.QueryType(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Type)
-	fc.Result = res
-	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Schema_queryType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Schema",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Schema_mutationType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_mutationType(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.MutationType(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Type)
-	fc.Result = res
-	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Schema_mutationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Schema",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Schema_subscriptionType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_subscriptionType(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.SubscriptionType(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Type)
-	fc.Result = res
-	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Schema_subscriptionType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Schema",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Schema_directives(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_directives(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Directives(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.Directive)
-	fc.Result = res
-	return ec.marshalN__Directive2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirectiveᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Schema_directives(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Schema",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___Directive_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Directive_description(ctx, field)
-			case "locations":
-				return ec.fieldContext___Directive_locations(ctx, field)
-			case "args":
-				return ec.fieldContext___Directive_args(ctx, field)
-			case "isRepeatable":
-				return ec.fieldContext___Directive_isRepeatable(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Directive", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_kind(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_kind(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Kind(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalN__TypeKind2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type __TypeKind does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_name(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Name(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_description(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_fields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_fields(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Fields(fc.Args["includeDeprecated"].(bool)), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.Field)
-	fc.Result = res
-	return ec.marshalO__Field2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐFieldᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_fields(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___Field_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Field_description(ctx, field)
-			case "args":
-				return ec.fieldContext___Field_args(ctx, field)
-			case "type":
-				return ec.fieldContext___Field_type(ctx, field)
-			case "isDeprecated":
-				return ec.fieldContext___Field_isDeprecated(ctx, field)
-			case "deprecationReason":
-				return ec.fieldContext___Field_deprecationReason(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Field", field.Name)
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field___Type_fields_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_interfaces(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_interfaces(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Interfaces(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.Type)
-	fc.Result = res
-	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_interfaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_possibleTypes(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_possibleTypes(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.PossibleTypes(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.Type)
-	fc.Result = res
-	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_possibleTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_enumValues(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_enumValues(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.EnumValues(fc.Args["includeDeprecated"].(bool)), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.EnumValue)
-	fc.Result = res
-	return ec.marshalO__EnumValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValueᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_enumValues(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___EnumValue_name(ctx, field)
-			case "description":
-				return ec.fieldContext___EnumValue_description(ctx, field)
-			case "isDeprecated":
-				return ec.fieldContext___EnumValue_isDeprecated(ctx, field)
-			case "deprecationReason":
-				return ec.fieldContext___EnumValue_deprecationReason(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __EnumValue", field.Name)
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field___Type_enumValues_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_inputFields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_inputFields(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.InputFields(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.([]introspection.InputValue)
-	fc.Result = res
-	return ec.marshalO__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_inputFields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___InputValue_name(ctx, field)
-			case "description":
-				return ec.fieldContext___InputValue_description(ctx, field)
-			case "type":
-				return ec.fieldContext___InputValue_type(ctx, field)
-			case "defaultValue":
-				return ec.fieldContext___InputValue_defaultValue(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_ofType(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_ofType(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.OfType(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Type)
-	fc.Result = res
-	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_ofType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Type_specifiedByURL(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_specifiedByURL(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.SpecifiedByURL(), nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Type",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-// endregion **************************** field.gotpl *****************************
-
-// region    **************************** input.gotpl *****************************
-
-func (ec *executionContext) unmarshalInputDesiredActionInput(ctx context.Context, obj interface{}) (model.DesiredActionInput, error) {
-	var it model.DesiredActionInput
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"kind", "name", "notes", "disable", "signals", "details"}
-	for _, k := range fieldsInOrder {
-		v, ok := asMap[k]
-		if !ok {
-			continue
-		}
-		switch k {
-		case "kind":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Kind = data
-		case "name":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
-			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Name = data
-		case "notes":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("notes"))
-			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Notes = data
-		case "disable":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("disable"))
-			data, err := ec.unmarshalNBoolean2bool(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Disable = data
-		case "signals":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("signals"))
-			data, err := ec.unmarshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Signals = data
-		case "details":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("details"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Details = data
-		}
-	}
-
-	return it, nil
-}
-
-func (ec *executionContext) unmarshalInputDesiredDestinationFieldInput(ctx context.Context, obj interface{}) (model.DesiredDestinationFieldInput, error) {
-	var it model.DesiredDestinationFieldInput
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"name", "value"}
-	for _, k := range fieldsInOrder {
-		v, ok := asMap[k]
-		if !ok {
-			continue
-		}
-		switch k {
-		case "name":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Name = data
-		case "value":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("value"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Value = data
-		}
-	}
-
-	return it, nil
-}
-
-func (ec *executionContext) unmarshalInputDesiredDestinationInput(ctx context.Context, obj interface{}) (model.DesiredDestinationInput, error) {
-	var it model.DesiredDestinationInput
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"name", "exportSignals", "fields"}
-	for _, k := range fieldsInOrder {
-		v, ok := asMap[k]
-		if !ok {
-			continue
-		}
-		switch k {
-		case "name":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Name = data
-		case "exportSignals":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("exportSignals"))
-			data, err := ec.unmarshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.ExportSignals = data
-		case "fields":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("fields"))
-			data, err := ec.unmarshalNDesiredDestinationFieldInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationFieldInputᚄ(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Fields = data
-		}
-	}
-
-	return it, nil
-}
-
-func (ec *executionContext) unmarshalInputK8sDesiredNamespaceInput(ctx context.Context, obj interface{}) (model.K8sDesiredNamespaceInput, error) {
-	var it model.K8sDesiredNamespaceInput
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"autoInstrument"}
-	for _, k := range fieldsInOrder {
-		v, ok := asMap[k]
-		if !ok {
-			continue
-		}
-		switch k {
-		case "autoInstrument":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("autoInstrument"))
-			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.AutoInstrument = data
-		}
-	}
-
-	return it, nil
-}
-
-func (ec *executionContext) unmarshalInputK8sDesiredSourceInput(ctx context.Context, obj interface{}) (model.K8sDesiredSourceInput, error) {
-	var it model.K8sDesiredSourceInput
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"serviceName", "autoInstrument"}
-	for _, k := range fieldsInOrder {
-		v, ok := asMap[k]
-		if !ok {
-			continue
-		}
-		switch k {
-		case "serviceName":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("serviceName"))
-			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.ServiceName = data
-		case "autoInstrument":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("autoInstrument"))
-			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.AutoInstrument = data
-		}
-	}
-
-	return it, nil
-}
-
-func (ec *executionContext) unmarshalInputK8sNamespaceId(ctx context.Context, obj interface{}) (model.K8sNamespaceID, error) {
-	var it model.K8sNamespaceID
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"name"}
-	for _, k := range fieldsInOrder {
-		v, ok := asMap[k]
-		if !ok {
-			continue
-		}
-		switch k {
-		case "name":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Name = data
-		}
-	}
-
-	return it, nil
-}
-
-func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj interface{}) (model.K8sSourceID, error) {
-	var it model.K8sSourceID
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"namespace", "kind", "name"}
-	for _, k := range fieldsInOrder {
-		v, ok := asMap[k]
-		if !ok {
-			continue
-		}
-		switch k {
-		case "namespace":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Namespace = data
-		case "kind":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
-			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Kind = data
-		case "name":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Name = data
-		}
-	}
-
-	return it, nil
-}
-
-func (ec *executionContext) unmarshalInputWorkloadInput(ctx context.Context, obj interface{}) (model.WorkloadInput, error) {
-	var it model.WorkloadInput
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"kind", "name", "namespace"}
-	for _, k := range fieldsInOrder {
-		v, ok := asMap[k]
-		if !ok {
-			continue
-		}
-		switch k {
-		case "kind":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
-			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Kind = data
-		case "name":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Name = data
-		case "namespace":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Namespace = data
-		}
-	}
-
-	return it, nil
-}
-
-// endregion **************************** input.gotpl *****************************
-
-// region    ************************** interface.gotpl ***************************
-
-// endregion ************************** interface.gotpl ***************************
-
-// region    **************************** object.gotpl ****************************
-
-var actualActionImplementors = []string{"ActualAction"}
-
-func (ec *executionContext) _ActualAction(ctx context.Context, sel ast.SelectionSet, obj *model.ActualAction) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, actualActionImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("ActualAction")
-		case "id":
-			out.Values[i] = ec._ActualAction_id(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "kind":
-			out.Values[i] = ec._ActualAction_kind(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "name":
-			out.Values[i] = ec._ActualAction_name(ctx, field, obj)
-		case "notes":
-			out.Values[i] = ec._ActualAction_notes(ctx, field, obj)
-		case "disable":
-			out.Values[i] = ec._ActualAction_disable(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "signals":
-			out.Values[i] = ec._ActualAction_signals(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "details":
-			out.Values[i] = ec._ActualAction_details(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var actualDestinationImplementors = []string{"ActualDestination"}
-
-func (ec *executionContext) _ActualDestination(ctx context.Context, sel ast.SelectionSet, obj *model.ActualDestination) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, actualDestinationImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("ActualDestination")
-		case "id":
-			out.Values[i] = ec._ActualDestination_id(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "name":
-			out.Values[i] = ec._ActualDestination_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "type":
-			out.Values[i] = ec._ActualDestination_type(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "exportedSignals":
-			out.Values[i] = ec._ActualDestination_exportedSignals(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "fields":
-			out.Values[i] = ec._ActualDestination_fields(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var computePlatformImplementors = []string{"ComputePlatform"}
-
-func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.SelectionSet, obj *model.ComputePlatform) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, computePlatformImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("ComputePlatform")
-		case "id":
-			out.Values[i] = ec._ComputePlatform_id(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "name":
-			out.Values[i] = ec._ComputePlatform_name(ctx, field, obj)
-		case "computePlatformType":
-			out.Values[i] = ec._ComputePlatform_computePlatformType(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "k8sActualNamespace":
-			out.Values[i] = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
-		case "k8sActualNamespaces":
-			out.Values[i] = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "k8sActualSource":
-			field := field
-
-			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._ComputePlatform_k8sActualSource(ctx, field, obj)
-				return res
-			}
-
-			if field.Deferrable != nil {
-				dfs, ok := deferred[field.Deferrable.Label]
-				di := 0
-				if ok {
-					dfs.AddField(field)
-					di = len(dfs.Values) - 1
-				} else {
-					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
-					deferred[field.Deferrable.Label] = dfs
-				}
-				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
-					return innerFunc(ctx, dfs)
-				})
-
-				// don't run the out.Concurrently() call below
-				out.Values[i] = graphql.Null
-				continue
-			}
-
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-		case "k8sActualSources":
-			out.Values[i] = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "actualDestinations":
-			out.Values[i] = ec._ComputePlatform_actualDestinations(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "actualActions":
-			out.Values[i] = ec._ComputePlatform_actualActions(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var conditionImplementors = []string{"Condition"}
-
-func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet, obj *model.Condition) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, conditionImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("Condition")
-		case "type":
-			out.Values[i] = ec._Condition_type(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "status":
-			out.Values[i] = ec._Condition_status(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "lastTransitionTime":
-			out.Values[i] = ec._Condition_lastTransitionTime(ctx, field, obj)
-		case "reason":
-			out.Values[i] = ec._Condition_reason(ctx, field, obj)
-		case "message":
-			out.Values[i] = ec._Condition_message(ctx, field, obj)
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var desiredDestinationImplementors = []string{"DesiredDestination"}
-
-func (ec *executionContext) _DesiredDestination(ctx context.Context, sel ast.SelectionSet, obj *model.DesiredDestination) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, desiredDestinationImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("DesiredDestination")
-		case "id":
-			out.Values[i] = ec._DesiredDestination_id(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "name":
-			out.Values[i] = ec._DesiredDestination_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "type":
-			out.Values[i] = ec._DesiredDestination_type(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "exportSignals":
-			out.Values[i] = ec._DesiredDestination_exportSignals(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "fields":
-			out.Values[i] = ec._DesiredDestination_fields(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "computePlatforms":
-			out.Values[i] = ec._DesiredDestination_computePlatforms(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var destinationSpecFieldImplementors = []string{"DestinationSpecField"}
-
-func (ec *executionContext) _DestinationSpecField(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationSpecField) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, destinationSpecFieldImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("DestinationSpecField")
-		case "name":
-			out.Values[i] = ec._DestinationSpecField_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "value":
-			out.Values[i] = ec._DestinationSpecField_value(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var destinationTypeImplementors = []string{"DestinationType"}
-
-func (ec *executionContext) _DestinationType(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationType) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, destinationTypeImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("DestinationType")
-		case "category":
-			out.Values[i] = ec._DestinationType_category(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "name":
-			out.Values[i] = ec._DestinationType_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "displayName":
-			out.Values[i] = ec._DestinationType_displayName(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "image":
-			out.Values[i] = ec._DestinationType_image(ctx, field, obj)
-		case "supportedSignals":
-			out.Values[i] = ec._DestinationType_supportedSignals(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "fields":
-			out.Values[i] = ec._DestinationType_fields(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
+func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj interface{}) (model.K8sSourceID, error) {
+	var it model.K8sSourceID
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
 	}
 
-	return out
-}
-
-var destinationTypeCategoryImplementors = []string{"DestinationTypeCategory"}
-
-func (ec *executionContext) _DestinationTypeCategory(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationTypeCategory) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, destinationTypeCategoryImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("DestinationTypeCategory")
-		case "name":
-			out.Values[i] = ec._DestinationTypeCategory_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "destinationTypes":
-			out.Values[i] = ec._DestinationTypeCategory_destinationTypes(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
+	fieldsInOrder := [...]string{"namespace", "kind", "name"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
 		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var destinationTypeFieldImplementors = []string{"DestinationTypeField"}
-
-func (ec *executionContext) _DestinationTypeField(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationTypeField) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, destinationTypeFieldImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("DestinationTypeField")
-		case "name":
-			out.Values[i] = ec._DestinationTypeField_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "displayName":
-			out.Values[i] = ec._DestinationTypeField_displayName(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "videoURL":
-			out.Values[i] = ec._DestinationTypeField_videoURL(ctx, field, obj)
-		case "thumbnailURL":
-			out.Values[i] = ec._DestinationTypeField_thumbnailURL(ctx, field, obj)
-		case "componentType":
-			out.Values[i] = ec._DestinationTypeField_componentType(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "componentProps":
-			out.Values[i] = ec._DestinationTypeField_componentProps(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
+		switch k {
+		case "namespace":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
 			}
-		case "secret":
-			out.Values[i] = ec._DestinationTypeField_secret(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
+			it.Namespace = data
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
+			if err != nil {
+				return it, err
 			}
-		case "initialValue":
-			out.Values[i] = ec._DestinationTypeField_initialValue(ctx, field, obj)
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
+			it.Kind = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		}
 	}
 
-	return out
+	return it, nil
 }
 
-var instrumentedApplicationDetailsImplementors = []string{"InstrumentedApplicationDetails"}
-
-func (ec *executionContext) _InstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentedApplicationDetails) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentedApplicationDetailsImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("InstrumentedApplicationDetails")
-		case "languages":
-			out.Values[i] = ec._InstrumentedApplicationDetails_languages(ctx, field, obj)
-		case "conditions":
-			out.Values[i] = ec._InstrumentedApplicationDetails_conditions(ctx, field, obj)
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
+// endregion **************************** input.gotpl *****************************
 
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+// region    ************************** interface.gotpl ***************************
 
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
+// endregion ************************** interface.gotpl ***************************
 
-	return out
-}
+// region    **************************** object.gotpl ****************************
 
-var k8sActualNamespaceImplementors = []string{"K8sActualNamespace"}
+var computePlatformImplementors = []string{"ComputePlatform"}
 
-func (ec *executionContext) _K8sActualNamespace(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualNamespace) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualNamespaceImplementors)
+func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.SelectionSet, obj *model.ComputePlatform) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, computePlatformImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("K8sActualNamespace")
+			out.Values[i] = graphql.MarshalString("ComputePlatform")
+		case "id":
+			out.Values[i] = ec._ComputePlatform_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
 		case "name":
-			out.Values[i] = ec._K8sActualNamespace_name(ctx, field, obj)
+			out.Values[i] = ec._ComputePlatform_name(ctx, field, obj)
+		case "computePlatformType":
+			out.Values[i] = ec._ComputePlatform_computePlatformType(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
-		case "autoInstrumented":
-			out.Values[i] = ec._K8sActualNamespace_autoInstrumented(ctx, field, obj)
+		case "k8sActualNamespace":
+			out.Values[i] = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
+		case "k8sActualNamespaces":
+			out.Values[i] = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "k8sActualSource":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualSource(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "k8sActualSources":
-			out.Values[i] = ec._K8sActualNamespace_k8sActualSources(ctx, field, obj)
+			out.Values[i] = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
@@ -8387,47 +4474,33 @@ func (ec *executionContext) _K8sActualNamespace(ctx context.Context, sel ast.Sel
 	return out
 }
 
-var k8sActualSourceImplementors = []string{"K8sActualSource"}
+var conditionImplementors = []string{"Condition"}
 
-func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSource) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceImplementors)
+func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet, obj *model.Condition) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, conditionImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("K8sActualSource")
-		case "namespace":
-			out.Values[i] = ec._K8sActualSource_namespace(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "kind":
-			out.Values[i] = ec._K8sActualSource_kind(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "name":
-			out.Values[i] = ec._K8sActualSource_name(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("Condition")
+		case "type":
+			out.Values[i] = ec._Condition_type(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "serviceName":
-			out.Values[i] = ec._K8sActualSource_serviceName(ctx, field, obj)
-		case "autoInstrumented":
-			out.Values[i] = ec._K8sActualSource_autoInstrumented(ctx, field, obj)
-		case "creationTimestamp":
-			out.Values[i] = ec._K8sActualSource_creationTimestamp(ctx, field, obj)
-		case "numberOfInstances":
-			out.Values[i] = ec._K8sActualSource_numberOfInstances(ctx, field, obj)
-		case "hasInstrumentedApplication":
-			out.Values[i] = ec._K8sActualSource_hasInstrumentedApplication(ctx, field, obj)
+		case "status":
+			out.Values[i] = ec._Condition_status(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "instrumentedApplicationDetails":
-			out.Values[i] = ec._K8sActualSource_instrumentedApplicationDetails(ctx, field, obj)
+		case "lastTransitionTime":
+			out.Values[i] = ec._Condition_lastTransitionTime(ctx, field, obj)
+		case "reason":
+			out.Values[i] = ec._Condition_reason(ctx, field, obj)
+		case "message":
+			out.Values[i] = ec._Condition_message(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8451,19 +4524,22 @@ func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.Select
 	return out
 }
 
-var k8sActualSourceRuntimeInfoImplementors = []string{"K8sActualSourceRuntimeInfo"}
+var getConfigResponseImplementors = []string{"GetConfigResponse"}
 
-func (ec *executionContext) _K8sActualSourceRuntimeInfo(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSourceRuntimeInfo) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceRuntimeInfoImplementors)
+func (ec *executionContext) _GetConfigResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetConfigResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, getConfigResponseImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("K8sActualSourceRuntimeInfo")
-		case "mainContainer":
-			out.Values[i] = ec._K8sActualSourceRuntimeInfo_mainContainer(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("GetConfigResponse")
+		case "installation":
+			out.Values[i] = ec._GetConfigResponse_installation(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8487,27 +4563,21 @@ func (ec *executionContext) _K8sActualSourceRuntimeInfo(ctx context.Context, sel
 	return out
 }
 
-var k8sActualSourceRuntimeInfoContainerImplementors = []string{"K8sActualSourceRuntimeInfoContainer"}
+var instrumentedApplicationDetailsImplementors = []string{"InstrumentedApplicationDetails"}
 
-func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSourceRuntimeInfoContainer) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceRuntimeInfoContainerImplementors)
+func (ec *executionContext) _InstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentedApplicationDetails) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentedApplicationDetailsImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("K8sActualSourceRuntimeInfoContainer")
-		case "containerName":
-			out.Values[i] = ec._K8sActualSourceRuntimeInfoContainer_containerName(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "language":
-			out.Values[i] = ec._K8sActualSourceRuntimeInfoContainer_language(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
+			out.Values[i] = graphql.MarshalString("InstrumentedApplicationDetails")
+		case "languages":
+			out.Values[i] = ec._InstrumentedApplicationDetails_languages(ctx, field, obj)
+		case "conditions":
+			out.Values[i] = ec._InstrumentedApplicationDetails_conditions(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8531,106 +4601,26 @@ func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer(ctx context.Con
 	return out
 }
 
-var mutationImplementors = []string{"Mutation"}
+var k8sActualNamespaceImplementors = []string{"K8sActualNamespace"}
 
-func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, mutationImplementors)
-	ctx = graphql.WithFieldContext(ctx, &graphql.FieldContext{
-		Object: "Mutation",
-	})
+func (ec *executionContext) _K8sActualNamespace(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualNamespace) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualNamespaceImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
-		innerCtx := graphql.WithRootFieldContext(ctx, &graphql.RootFieldContext{
-			Object: field.Name,
-			Field:  field,
-		})
-
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("Mutation")
-		case "applyDesiredNamespace":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_applyDesiredNamespace(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "deleteDesiredNamespace":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_deleteDesiredNamespace(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "applyDesiredSource":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_applyDesiredSource(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "deleteDesiredSource":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_deleteDesiredSource(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "createDesiredDestination":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_createDesiredDestination(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "updateDesiredDestination":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_updateDesiredDestination(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "deleteDesiredDestination":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_deleteDesiredDestination(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "applyDesiredDestinationToComputePlatform":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_applyDesiredDestinationToComputePlatform(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "removeDesiredDestinationFromComputePlatform":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_removeDesiredDestinationFromComputePlatform(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "createDesiredAction":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_createDesiredAction(ctx, field)
-			})
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "updateDesiredAction":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_updateDesiredAction(ctx, field)
-			})
+			out.Values[i] = graphql.MarshalString("K8sActualNamespace")
+		case "name":
+			out.Values[i] = ec._K8sActualNamespace_name(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "deleteActualAction":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_deleteActualAction(ctx, field)
-			})
+		case "autoInstrumented":
+			out.Values[i] = ec._K8sActualNamespace_autoInstrumented(ctx, field, obj)
+		case "k8sActualSources":
+			out.Values[i] = ec._K8sActualNamespace_k8sActualSources(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
@@ -8657,90 +4647,47 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 	return out
 }
 
-var queryImplementors = []string{"Query"}
+var k8sActualSourceImplementors = []string{"K8sActualSource"}
 
-func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, queryImplementors)
-	ctx = graphql.WithFieldContext(ctx, &graphql.FieldContext{
-		Object: "Query",
-	})
+func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSource) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
-		innerCtx := graphql.WithRootFieldContext(ctx, &graphql.RootFieldContext{
-			Object: field.Name,
-			Field:  field,
-		})
-
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("Query")
-		case "computePlatform":
-			field := field
-
-			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Query_computePlatform(ctx, field)
-				return res
-			}
-
-			rrm := func(ctx context.Context) graphql.Marshaler {
-				return ec.OperationContext.RootResolverMiddleware(ctx,
-					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-			}
-
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
-		case "destinationTypeCategories":
-			field := field
-
-			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Query_destinationTypeCategories(ctx, field)
-				return res
+			out.Values[i] = graphql.MarshalString("K8sActualSource")
+		case "namespace":
+			out.Values[i] = ec._K8sActualSource_namespace(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-
-			rrm := func(ctx context.Context) graphql.Marshaler {
-				return ec.OperationContext.RootResolverMiddleware(ctx,
-					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "kind":
+			out.Values[i] = ec._K8sActualSource_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
-		case "desiredDestinations":
-			field := field
-
-			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Query_desiredDestinations(ctx, field)
-				return res
+		case "name":
+			out.Values[i] = ec._K8sActualSource_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-
-			rrm := func(ctx context.Context) graphql.Marshaler {
-				return ec.OperationContext.RootResolverMiddleware(ctx,
-					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "serviceName":
+			out.Values[i] = ec._K8sActualSource_serviceName(ctx, field, obj)
+		case "autoInstrumented":
+			out.Values[i] = ec._K8sActualSource_autoInstrumented(ctx, field, obj)
+		case "creationTimestamp":
+			out.Values[i] = ec._K8sActualSource_creationTimestamp(ctx, field, obj)
+		case "numberOfInstances":
+			out.Values[i] = ec._K8sActualSource_numberOfInstances(ctx, field, obj)
+		case "hasInstrumentedApplication":
+			out.Values[i] = ec._K8sActualSource_hasInstrumentedApplication(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
-		case "__type":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Query___type(ctx, field)
-			})
-		case "__schema":
-			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Query___schema(ctx, field)
-			})
+		case "instrumentedApplicationDetails":
+			out.Values[i] = ec._K8sActualSource_instrumentedApplicationDetails(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8764,27 +4711,19 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 	return out
 }
 
-var sourceLanguageImplementors = []string{"SourceLanguage"}
+var k8sActualSourceRuntimeInfoImplementors = []string{"K8sActualSourceRuntimeInfo"}
 
-func (ec *executionContext) _SourceLanguage(ctx context.Context, sel ast.SelectionSet, obj *model.SourceLanguage) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, sourceLanguageImplementors)
+func (ec *executionContext) _K8sActualSourceRuntimeInfo(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSourceRuntimeInfo) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceRuntimeInfoImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("SourceLanguage")
-		case "containerName":
-			out.Values[i] = ec._SourceLanguage_containerName(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "language":
-			out.Values[i] = ec._SourceLanguage_language(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
+			out.Values[i] = graphql.MarshalString("K8sActualSourceRuntimeInfo")
+		case "mainContainer":
+			out.Values[i] = ec._K8sActualSourceRuntimeInfo_mainContainer(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8808,36 +4747,24 @@ func (ec *executionContext) _SourceLanguage(ctx context.Context, sel ast.Selecti
 	return out
 }
 
-var __DirectiveImplementors = []string{"__Directive"}
+var k8sActualSourceRuntimeInfoContainerImplementors = []string{"K8sActualSourceRuntimeInfoContainer"}
 
-func (ec *executionContext) ___Directive(ctx context.Context, sel ast.SelectionSet, obj *introspection.Directive) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, __DirectiveImplementors)
+func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSourceRuntimeInfoContainer) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceRuntimeInfoContainerImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("__Directive")
-		case "name":
-			out.Values[i] = ec.___Directive_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "description":
-			out.Values[i] = ec.___Directive_description(ctx, field, obj)
-		case "locations":
-			out.Values[i] = ec.___Directive_locations(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "args":
-			out.Values[i] = ec.___Directive_args(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("K8sActualSourceRuntimeInfoContainer")
+		case "containerName":
+			out.Values[i] = ec._K8sActualSourceRuntimeInfoContainer_containerName(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "isRepeatable":
-			out.Values[i] = ec.___Directive_isRepeatable(ctx, field, obj)
+		case "language":
+			out.Values[i] = ec._K8sActualSourceRuntimeInfoContainer_language(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
@@ -8864,31 +4791,29 @@ func (ec *executionContext) ___Directive(ctx context.Context, sel ast.SelectionS
 	return out
 }
 
-var __EnumValueImplementors = []string{"__EnumValue"}
+var mutationImplementors = []string{"Mutation"}
 
-func (ec *executionContext) ___EnumValue(ctx context.Context, sel ast.SelectionSet, obj *introspection.EnumValue) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, __EnumValueImplementors)
+func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, mutationImplementors)
+	ctx = graphql.WithFieldContext(ctx, &graphql.FieldContext{
+		Object: "Mutation",
+	})
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
+		innerCtx := graphql.WithRootFieldContext(ctx, &graphql.RootFieldContext{
+			Object: field.Name,
+			Field:  field,
+		})
+
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("__EnumValue")
-		case "name":
-			out.Values[i] = ec.___EnumValue_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "description":
-			out.Values[i] = ec.___EnumValue_description(ctx, field, obj)
-		case "isDeprecated":
-			out.Values[i] = ec.___EnumValue_isDeprecated(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "deprecationReason":
-			out.Values[i] = ec.___EnumValue_deprecationReason(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("Mutation")
+		case "createK8sDesiredNamespace":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_createK8sDesiredNamespace(ctx, field)
+			})
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8912,41 +4837,71 @@ func (ec *executionContext) ___EnumValue(ctx context.Context, sel ast.SelectionS
 	return out
 }
 
-var __FieldImplementors = []string{"__Field"}
+var queryImplementors = []string{"Query"}
 
-func (ec *executionContext) ___Field(ctx context.Context, sel ast.SelectionSet, obj *introspection.Field) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, __FieldImplementors)
+func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, queryImplementors)
+	ctx = graphql.WithFieldContext(ctx, &graphql.FieldContext{
+		Object: "Query",
+	})
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
+		innerCtx := graphql.WithRootFieldContext(ctx, &graphql.RootFieldContext{
+			Object: field.Name,
+			Field:  field,
+		})
+
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("__Field")
-		case "name":
-			out.Values[i] = ec.___Field_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
+			out.Values[i] = graphql.MarshalString("Query")
+		case "computePlatform":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_computePlatform(ctx, field)
+				return res
 			}
-		case "description":
-			out.Values[i] = ec.___Field_description(ctx, field, obj)
-		case "args":
-			out.Values[i] = ec.___Field_args(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
-		case "type":
-			out.Values[i] = ec.___Field_type(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "config":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_config(ctx, field)
+				return res
 			}
-		case "isDeprecated":
-			out.Values[i] = ec.___Field_isDeprecated(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
-		case "deprecationReason":
-			out.Values[i] = ec.___Field_deprecationReason(ctx, field, obj)
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "__type":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Query___type(ctx, field)
+			})
+		case "__schema":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Query___schema(ctx, field)
+			})
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8970,31 +4925,27 @@ func (ec *executionContext) ___Field(ctx context.Context, sel ast.SelectionSet,
 	return out
 }
 
-var __InputValueImplementors = []string{"__InputValue"}
+var sourceLanguageImplementors = []string{"SourceLanguage"}
 
-func (ec *executionContext) ___InputValue(ctx context.Context, sel ast.SelectionSet, obj *introspection.InputValue) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, __InputValueImplementors)
+func (ec *executionContext) _SourceLanguage(ctx context.Context, sel ast.SelectionSet, obj *model.SourceLanguage) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, sourceLanguageImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("__InputValue")
-		case "name":
-			out.Values[i] = ec.___InputValue_name(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("SourceLanguage")
+		case "containerName":
+			out.Values[i] = ec._SourceLanguage_containerName(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "description":
-			out.Values[i] = ec.___InputValue_description(ctx, field, obj)
-		case "type":
-			out.Values[i] = ec.___InputValue_type(ctx, field, obj)
+		case "language":
+			out.Values[i] = ec._SourceLanguage_language(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "defaultValue":
-			out.Values[i] = ec.___InputValue_defaultValue(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -9018,35 +4969,36 @@ func (ec *executionContext) ___InputValue(ctx context.Context, sel ast.Selection
 	return out
 }
 
-var __SchemaImplementors = []string{"__Schema"}
+var __DirectiveImplementors = []string{"__Directive"}
 
-func (ec *executionContext) ___Schema(ctx context.Context, sel ast.SelectionSet, obj *introspection.Schema) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, __SchemaImplementors)
+func (ec *executionContext) ___Directive(ctx context.Context, sel ast.SelectionSet, obj *introspection.Directive) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __DirectiveImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("__Schema")
+			out.Values[i] = graphql.MarshalString("__Directive")
+		case "name":
+			out.Values[i] = ec.___Directive_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		case "description":
-			out.Values[i] = ec.___Schema_description(ctx, field, obj)
-		case "types":
-			out.Values[i] = ec.___Schema_types(ctx, field, obj)
+			out.Values[i] = ec.___Directive_description(ctx, field, obj)
+		case "locations":
+			out.Values[i] = ec.___Directive_locations(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "queryType":
-			out.Values[i] = ec.___Schema_queryType(ctx, field, obj)
+		case "args":
+			out.Values[i] = ec.___Directive_args(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "mutationType":
-			out.Values[i] = ec.___Schema_mutationType(ctx, field, obj)
-		case "subscriptionType":
-			out.Values[i] = ec.___Schema_subscriptionType(ctx, field, obj)
-		case "directives":
-			out.Values[i] = ec.___Schema_directives(ctx, field, obj)
+		case "isRepeatable":
+			out.Values[i] = ec.___Directive_isRepeatable(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
@@ -9073,40 +5025,31 @@ func (ec *executionContext) ___Schema(ctx context.Context, sel ast.SelectionSet,
 	return out
 }
 
-var __TypeImplementors = []string{"__Type"}
+var __EnumValueImplementors = []string{"__EnumValue"}
 
-func (ec *executionContext) ___Type(ctx context.Context, sel ast.SelectionSet, obj *introspection.Type) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, __TypeImplementors)
+func (ec *executionContext) ___EnumValue(ctx context.Context, sel ast.SelectionSet, obj *introspection.EnumValue) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __EnumValueImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("__Type")
-		case "kind":
-			out.Values[i] = ec.___Type_kind(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("__EnumValue")
+		case "name":
+			out.Values[i] = ec.___EnumValue_name(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "name":
-			out.Values[i] = ec.___Type_name(ctx, field, obj)
 		case "description":
-			out.Values[i] = ec.___Type_description(ctx, field, obj)
-		case "fields":
-			out.Values[i] = ec.___Type_fields(ctx, field, obj)
-		case "interfaces":
-			out.Values[i] = ec.___Type_interfaces(ctx, field, obj)
-		case "possibleTypes":
-			out.Values[i] = ec.___Type_possibleTypes(ctx, field, obj)
-		case "enumValues":
-			out.Values[i] = ec.___Type_enumValues(ctx, field, obj)
-		case "inputFields":
-			out.Values[i] = ec.___Type_inputFields(ctx, field, obj)
-		case "ofType":
-			out.Values[i] = ec.___Type_ofType(ctx, field, obj)
-		case "specifiedByURL":
-			out.Values[i] = ec.___Type_specifiedByURL(ctx, field, obj)
+			out.Values[i] = ec.___EnumValue_description(ctx, field, obj)
+		case "isDeprecated":
+			out.Values[i] = ec.___EnumValue_isDeprecated(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deprecationReason":
+			out.Values[i] = ec.___EnumValue_deprecationReason(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -9130,385 +5073,271 @@ func (ec *executionContext) ___Type(ctx context.Context, sel ast.SelectionSet, o
 	return out
 }
 
-// endregion **************************** object.gotpl ****************************
+var __FieldImplementors = []string{"__Field"}
 
-// region    ***************************** type.gotpl *****************************
+func (ec *executionContext) ___Field(ctx context.Context, sel ast.SelectionSet, obj *introspection.Field) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __FieldImplementors)
 
-func (ec *executionContext) marshalNActualAction2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualAction(ctx context.Context, sel ast.SelectionSet, v []*model.ActualAction) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Field")
+		case "name":
+			out.Values[i] = ec.___Field_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-			ret[i] = ec.marshalOActualAction2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualAction(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	return ret
-}
-
-func (ec *executionContext) marshalNActualDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualDestination(ctx context.Context, sel ast.SelectionSet, v []*model.ActualDestination) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
+		case "description":
+			out.Values[i] = ec.___Field_description(ctx, field, obj)
+		case "args":
+			out.Values[i] = ec.___Field_args(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-			ret[i] = ec.marshalOActualDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualDestination(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	return ret
-}
-
-func (ec *executionContext) unmarshalNBoolean2bool(ctx context.Context, v interface{}) (bool, error) {
-	res, err := graphql.UnmarshalBoolean(v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
-
-func (ec *executionContext) marshalNBoolean2bool(ctx context.Context, sel ast.SelectionSet, v bool) graphql.Marshaler {
-	res := graphql.MarshalBoolean(v)
-	if res == graphql.Null {
-		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
-			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
-		}
-	}
-	return res
-}
-
-func (ec *executionContext) marshalNComputePlatform2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.ComputePlatform) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
+		case "type":
+			out.Values[i] = ec.___Field_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-			ret[i] = ec.marshalNComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	for _, e := range ret {
-		if e == graphql.Null {
-			return graphql.Null
-		}
-	}
-
-	return ret
-}
-
-func (ec *executionContext) marshalNComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx context.Context, sel ast.SelectionSet, v *model.ComputePlatform) graphql.Marshaler {
-	if v == nil {
-		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
-			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		case "isDeprecated":
+			out.Values[i] = ec.___Field_isDeprecated(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deprecationReason":
+			out.Values[i] = ec.___Field_deprecationReason(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
 		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
 		return graphql.Null
 	}
-	return ec._ComputePlatform(ctx, sel, v)
-}
-
-func (ec *executionContext) unmarshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, v interface{}) (model.ComputePlatformType, error) {
-	var res model.ComputePlatformType
-	err := res.UnmarshalGQL(v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
 
-func (ec *executionContext) marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, sel ast.SelectionSet, v model.ComputePlatformType) graphql.Marshaler {
-	return v
-}
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
 
-func (ec *executionContext) marshalNCondition2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐCondition(ctx context.Context, sel ast.SelectionSet, v *model.Condition) graphql.Marshaler {
-	if v == nil {
-		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
-			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
-		}
-		return graphql.Null
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
 	}
-	return ec._Condition(ctx, sel, v)
-}
-
-func (ec *executionContext) unmarshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx context.Context, v interface{}) (model.ConditionStatus, error) {
-	var res model.ConditionStatus
-	err := res.UnmarshalGQL(v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
 
-func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx context.Context, sel ast.SelectionSet, v model.ConditionStatus) graphql.Marshaler {
-	return v
+	return out
 }
 
-func (ec *executionContext) unmarshalNDesiredActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredActionInput(ctx context.Context, v interface{}) (model.DesiredActionInput, error) {
-	res, err := ec.unmarshalInputDesiredActionInput(ctx, v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
+var __InputValueImplementors = []string{"__InputValue"}
 
-func (ec *executionContext) marshalNDesiredDestination2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v model.DesiredDestination) graphql.Marshaler {
-	return ec._DesiredDestination(ctx, sel, &v)
-}
+func (ec *executionContext) ___InputValue(ctx context.Context, sel ast.SelectionSet, obj *introspection.InputValue) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __InputValueImplementors)
 
-func (ec *executionContext) marshalNDesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v *model.DesiredDestination) graphql.Marshaler {
-	if v == nil {
-		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
-			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__InputValue")
+		case "name":
+			out.Values[i] = ec.___InputValue_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___InputValue_description(ctx, field, obj)
+		case "type":
+			out.Values[i] = ec.___InputValue_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "defaultValue":
+			out.Values[i] = ec.___InputValue_defaultValue(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
 		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
 		return graphql.Null
 	}
-	return ec._DesiredDestination(ctx, sel, v)
-}
 
-func (ec *executionContext) unmarshalNDesiredDestinationFieldInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationFieldInputᚄ(ctx context.Context, v interface{}) ([]*model.DesiredDestinationFieldInput, error) {
-	var vSlice []interface{}
-	if v != nil {
-		vSlice = graphql.CoerceList(v)
-	}
-	var err error
-	res := make([]*model.DesiredDestinationFieldInput, len(vSlice))
-	for i := range vSlice {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
-		res[i], err = ec.unmarshalNDesiredDestinationFieldInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationFieldInput(ctx, vSlice[i])
-		if err != nil {
-			return nil, err
-		}
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
 	}
-	return res, nil
-}
 
-func (ec *executionContext) unmarshalNDesiredDestinationFieldInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationFieldInput(ctx context.Context, v interface{}) (*model.DesiredDestinationFieldInput, error) {
-	res, err := ec.unmarshalInputDesiredDestinationFieldInput(ctx, v)
-	return &res, graphql.ErrorOnPath(ctx, err)
+	return out
 }
 
-func (ec *executionContext) unmarshalNDesiredDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestinationInput(ctx context.Context, v interface{}) (model.DesiredDestinationInput, error) {
-	res, err := ec.unmarshalInputDesiredDestinationInput(ctx, v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
+var __SchemaImplementors = []string{"__Schema"}
 
-func (ec *executionContext) marshalNDestinationSpecField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationSpecField) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
+func (ec *executionContext) ___Schema(ctx context.Context, sel ast.SelectionSet, obj *introspection.Schema) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __SchemaImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Schema")
+		case "description":
+			out.Values[i] = ec.___Schema_description(ctx, field, obj)
+		case "types":
+			out.Values[i] = ec.___Schema_types(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-			ret[i] = ec.marshalNDestinationSpecField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecField(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
+		case "queryType":
+			out.Values[i] = ec.___Schema_queryType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "mutationType":
+			out.Values[i] = ec.___Schema_mutationType(ctx, field, obj)
+		case "subscriptionType":
+			out.Values[i] = ec.___Schema_subscriptionType(ctx, field, obj)
+		case "directives":
+			out.Values[i] = ec.___Schema_directives(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
 		}
-
 	}
-	wg.Wait()
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
 
-	for _, e := range ret {
-		if e == graphql.Null {
-			return graphql.Null
-		}
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
 	}
 
-	return ret
+	return out
 }
 
-func (ec *executionContext) marshalNDestinationSpecField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationSpecField(ctx context.Context, sel ast.SelectionSet, v *model.DestinationSpecField) graphql.Marshaler {
-	if v == nil {
-		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
-			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+var __TypeImplementors = []string{"__Type"}
+
+func (ec *executionContext) ___Type(ctx context.Context, sel ast.SelectionSet, obj *introspection.Type) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __TypeImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Type")
+		case "kind":
+			out.Values[i] = ec.___Type_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec.___Type_name(ctx, field, obj)
+		case "description":
+			out.Values[i] = ec.___Type_description(ctx, field, obj)
+		case "fields":
+			out.Values[i] = ec.___Type_fields(ctx, field, obj)
+		case "interfaces":
+			out.Values[i] = ec.___Type_interfaces(ctx, field, obj)
+		case "possibleTypes":
+			out.Values[i] = ec.___Type_possibleTypes(ctx, field, obj)
+		case "enumValues":
+			out.Values[i] = ec.___Type_enumValues(ctx, field, obj)
+		case "inputFields":
+			out.Values[i] = ec.___Type_inputFields(ctx, field, obj)
+		case "ofType":
+			out.Values[i] = ec.___Type_ofType(ctx, field, obj)
+		case "specifiedByURL":
+			out.Values[i] = ec.___Type_specifiedByURL(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
 		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
 		return graphql.Null
 	}
-	return ec._DestinationSpecField(ctx, sel, v)
-}
 
-func (ec *executionContext) marshalNDestinationType2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationType) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
-			}
-			ret[i] = ec.marshalODestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
 
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
 	}
-	wg.Wait()
 
-	return ret
+	return out
 }
 
-func (ec *executionContext) marshalNDestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx context.Context, sel ast.SelectionSet, v *model.DestinationType) graphql.Marshaler {
-	if v == nil {
+// endregion **************************** object.gotpl ****************************
+
+// region    ***************************** type.gotpl *****************************
+
+func (ec *executionContext) unmarshalNBoolean2bool(ctx context.Context, v interface{}) (bool, error) {
+	res, err := graphql.UnmarshalBoolean(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNBoolean2bool(ctx context.Context, sel ast.SelectionSet, v bool) graphql.Marshaler {
+	res := graphql.MarshalBoolean(v)
+	if res == graphql.Null {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
 			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
 		}
-		return graphql.Null
 	}
-	return ec._DestinationType(ctx, sel, v)
+	return res
 }
 
-func (ec *executionContext) marshalNDestinationTypeField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationTypeField) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
-			}
-			ret[i] = ec.marshalNDestinationTypeField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeField(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	for _, e := range ret {
-		if e == graphql.Null {
-			return graphql.Null
-		}
-	}
+func (ec *executionContext) unmarshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, v interface{}) (model.ComputePlatformType, error) {
+	var res model.ComputePlatformType
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
 
-	return ret
+func (ec *executionContext) marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, sel ast.SelectionSet, v model.ComputePlatformType) graphql.Marshaler {
+	return v
 }
 
-func (ec *executionContext) marshalNDestinationTypeField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeField(ctx context.Context, sel ast.SelectionSet, v *model.DestinationTypeField) graphql.Marshaler {
+func (ec *executionContext) marshalNCondition2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐCondition(ctx context.Context, sel ast.SelectionSet, v *model.Condition) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
 			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
 		}
 		return graphql.Null
 	}
-	return ec._DestinationTypeField(ctx, sel, v)
+	return ec._Condition(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx context.Context, v interface{}) (model.ConditionStatus, error) {
+	var res model.ConditionStatus
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx context.Context, sel ast.SelectionSet, v model.ConditionStatus) graphql.Marshaler {
+	return v
 }
 
 func (ec *executionContext) unmarshalNID2string(ctx context.Context, v interface{}) (string, error) {
@@ -9526,6 +5355,16 @@ func (ec *executionContext) marshalNID2string(ctx context.Context, sel ast.Selec
 	return res
 }
 
+func (ec *executionContext) unmarshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx context.Context, v interface{}) (model.InstallationStatus, error) {
+	var res model.InstallationStatus
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx context.Context, sel ast.SelectionSet, v model.InstallationStatus) graphql.Marshaler {
+	return v
+}
+
 func (ec *executionContext) marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx context.Context, sel ast.SelectionSet, v []*model.K8sActualNamespace) graphql.Marshaler {
 	ret := make(graphql.Array, len(v))
 	var wg sync.WaitGroup
@@ -9607,16 +5446,6 @@ func (ec *executionContext) unmarshalNK8sDesiredNamespaceInput2githubᚗcomᚋod
 	return res, graphql.ErrorOnPath(ctx, err)
 }
 
-func (ec *executionContext) unmarshalNK8sDesiredSourceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredSourceInput(ctx context.Context, v interface{}) (model.K8sDesiredSourceInput, error) {
-	res, err := ec.unmarshalInputK8sDesiredSourceInput(ctx, v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
-
-func (ec *executionContext) unmarshalNK8sNamespaceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sNamespaceID(ctx context.Context, v interface{}) (model.K8sNamespaceID, error) {
-	res, err := ec.unmarshalInputK8sNamespaceId(ctx, v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
-
 func (ec *executionContext) unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx context.Context, v interface{}) (model.K8sResourceKind, error) {
 	var res model.K8sResourceKind
 	err := res.UnmarshalGQL(v)
@@ -9627,11 +5456,6 @@ func (ec *executionContext) marshalNK8sResourceKind2githubᚗcomᚋodigosᚑio
 	return v
 }
 
-func (ec *executionContext) unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx context.Context, v interface{}) (model.K8sSourceID, error) {
-	res, err := ec.unmarshalInputK8sSourceId(ctx, v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
-
 func (ec *executionContext) unmarshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx context.Context, v interface{}) (model.ProgrammingLanguage, error) {
 	var res model.ProgrammingLanguage
 	err := res.UnmarshalGQL(v)
@@ -9642,77 +5466,6 @@ func (ec *executionContext) marshalNProgrammingLanguage2githubᚗcomᚋodigosᚑ
 	return v
 }
 
-func (ec *executionContext) unmarshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx context.Context, v interface{}) (model.SignalType, error) {
-	var res model.SignalType
-	err := res.UnmarshalGQL(v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
-
-func (ec *executionContext) marshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx context.Context, sel ast.SelectionSet, v model.SignalType) graphql.Marshaler {
-	return v
-}
-
-func (ec *executionContext) unmarshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx context.Context, v interface{}) ([]model.SignalType, error) {
-	var vSlice []interface{}
-	if v != nil {
-		vSlice = graphql.CoerceList(v)
-	}
-	var err error
-	res := make([]model.SignalType, len(vSlice))
-	for i := range vSlice {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
-		res[i], err = ec.unmarshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx, vSlice[i])
-		if err != nil {
-			return nil, err
-		}
-	}
-	return res, nil
-}
-
-func (ec *executionContext) marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx context.Context, sel ast.SelectionSet, v []model.SignalType) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
-			}
-			ret[i] = ec.marshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	for _, e := range ret {
-		if e == graphql.Null {
-			return graphql.Null
-		}
-	}
-
-	return ret
-}
-
 func (ec *executionContext) marshalNSourceLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguage(ctx context.Context, sel ast.SelectionSet, v *model.SourceLanguage) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
@@ -9991,20 +5744,6 @@ func (ec *executionContext) marshalN__TypeKind2string(ctx context.Context, sel a
 	return res
 }
 
-func (ec *executionContext) marshalOActualAction2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualAction(ctx context.Context, sel ast.SelectionSet, v *model.ActualAction) graphql.Marshaler {
-	if v == nil {
-		return graphql.Null
-	}
-	return ec._ActualAction(ctx, sel, v)
-}
-
-func (ec *executionContext) marshalOActualDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActualDestination(ctx context.Context, sel ast.SelectionSet, v *model.ActualDestination) graphql.Marshaler {
-	if v == nil {
-		return graphql.Null
-	}
-	return ec._ActualDestination(ctx, sel, v)
-}
-
 func (ec *executionContext) unmarshalOBoolean2bool(ctx context.Context, v interface{}) (bool, error) {
 	res, err := graphql.UnmarshalBoolean(v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -10085,107 +5824,11 @@ func (ec *executionContext) marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑio
 	return ret
 }
 
-func (ec *executionContext) marshalODesiredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v []*model.DesiredDestination) graphql.Marshaler {
-	if v == nil {
-		return graphql.Null
-	}
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
-			}
-			ret[i] = ec.marshalODesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	return ret
-}
-
-func (ec *executionContext) marshalODesiredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDesiredDestination(ctx context.Context, sel ast.SelectionSet, v *model.DesiredDestination) graphql.Marshaler {
-	if v == nil {
-		return graphql.Null
-	}
-	return ec._DesiredDestination(ctx, sel, v)
-}
-
-func (ec *executionContext) marshalODestinationType2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationType(ctx context.Context, sel ast.SelectionSet, v *model.DestinationType) graphql.Marshaler {
-	if v == nil {
-		return graphql.Null
-	}
-	return ec._DestinationType(ctx, sel, v)
-}
-
-func (ec *executionContext) marshalODestinationTypeCategory2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeCategory(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationTypeCategory) graphql.Marshaler {
-	if v == nil {
-		return graphql.Null
-	}
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
-			}
-			ret[i] = ec.marshalODestinationTypeCategory2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeCategory(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	return ret
-}
-
-func (ec *executionContext) marshalODestinationTypeCategory2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypeCategory(ctx context.Context, sel ast.SelectionSet, v *model.DestinationTypeCategory) graphql.Marshaler {
+func (ec *executionContext) marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetConfigResponse(ctx context.Context, sel ast.SelectionSet, v *model.GetConfigResponse) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
 	}
-	return ec._DestinationTypeCategory(ctx, sel, v)
+	return ec._GetConfigResponse(ctx, sel, v)
 }
 
 func (ec *executionContext) marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentedApplicationDetails) graphql.Marshaler {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 3bf3f4a72..53ab6b877 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -8,24 +8,6 @@ import (
 	"strconv"
 )
 
-type ActualAction struct {
-	ID      string       `json:"id"`
-	Kind    string       `json:"kind"`
-	Name    *string      `json:"name,omitempty"`
-	Notes   *string      `json:"notes,omitempty"`
-	Disable bool         `json:"disable"`
-	Signals []SignalType `json:"signals"`
-	Details string       `json:"details"`
-}
-
-type ActualDestination struct {
-	ID              string                  `json:"id"`
-	Name            string                  `json:"name"`
-	Type            *DestinationType        `json:"type"`
-	ExportedSignals []SignalType            `json:"exportedSignals"`
-	Fields          []*DestinationSpecField `json:"fields"`
-}
-
 type ComputePlatform struct {
 	ID                  string                `json:"id"`
 	Name                *string               `json:"name,omitempty"`
@@ -34,8 +16,6 @@ type ComputePlatform struct {
 	K8sActualNamespaces []*K8sActualNamespace `json:"k8sActualNamespaces"`
 	K8sActualSource     *K8sActualSource      `json:"k8sActualSource,omitempty"`
 	K8sActualSources    []*K8sActualSource    `json:"k8sActualSources"`
-	ActualDestinations  []*ActualDestination  `json:"actualDestinations"`
-	ActualActions       []*ActualAction       `json:"actualActions"`
 }
 
 type Condition struct {
@@ -46,63 +26,8 @@ type Condition struct {
 	Message            *string         `json:"message,omitempty"`
 }
 
-type DesiredActionInput struct {
-	Kind    string       `json:"kind"`
-	Name    *string      `json:"name,omitempty"`
-	Notes   *string      `json:"notes,omitempty"`
-	Disable bool         `json:"disable"`
-	Signals []SignalType `json:"signals"`
-	Details string       `json:"details"`
-}
-
-type DesiredDestination struct {
-	ID               string                  `json:"id"`
-	Name             string                  `json:"name"`
-	Type             *DestinationType        `json:"type"`
-	ExportSignals    []SignalType            `json:"exportSignals"`
-	Fields           []*DestinationSpecField `json:"fields"`
-	ComputePlatforms []*ComputePlatform      `json:"computePlatforms"`
-}
-
-type DesiredDestinationFieldInput struct {
-	Name  string `json:"name"`
-	Value string `json:"value"`
-}
-
-type DesiredDestinationInput struct {
-	Name          string                          `json:"name"`
-	ExportSignals []SignalType                    `json:"exportSignals"`
-	Fields        []*DesiredDestinationFieldInput `json:"fields"`
-}
-
-type DestinationSpecField struct {
-	Name  string `json:"name"`
-	Value string `json:"value"`
-}
-
-type DestinationType struct {
-	Category         string                  `json:"category"`
-	Name             string                  `json:"name"`
-	DisplayName      string                  `json:"displayName"`
-	Image            *string                 `json:"image,omitempty"`
-	SupportedSignals []SignalType            `json:"supportedSignals"`
-	Fields           []*DestinationTypeField `json:"fields"`
-}
-
-type DestinationTypeCategory struct {
-	Name             string             `json:"name"`
-	DestinationTypes []*DestinationType `json:"destinationTypes"`
-}
-
-type DestinationTypeField struct {
-	Name           string  `json:"name"`
-	DisplayName    string  `json:"displayName"`
-	VideoURL       *string `json:"videoURL,omitempty"`
-	ThumbnailURL   *string `json:"thumbnailURL,omitempty"`
-	ComponentType  string  `json:"componentType"`
-	ComponentProps string  `json:"componentProps"`
-	Secret         bool    `json:"secret"`
-	InitialValue   *string `json:"initialValue,omitempty"`
+type GetConfigResponse struct {
+	Installation InstallationStatus `json:"installation"`
 }
 
 type InstrumentedApplicationDetails struct {
@@ -167,12 +92,6 @@ type SourceLanguage struct {
 	Language      string `json:"language"`
 }
 
-type WorkloadInput struct {
-	Kind      K8sResourceKind `json:"kind"`
-	Name      string          `json:"name"`
-	Namespace string          `json:"namespace"`
-}
-
 type ComputePlatformType string
 
 const (
@@ -257,6 +176,49 @@ func (e ConditionStatus) MarshalGQL(w io.Writer) {
 	fmt.Fprint(w, strconv.Quote(e.String()))
 }
 
+type InstallationStatus string
+
+const (
+	InstallationStatusNew          InstallationStatus = "NEW"
+	InstallationStatusAppsSelected InstallationStatus = "APPS_SELECTED"
+	InstallationStatusFinished     InstallationStatus = "FINISHED"
+)
+
+var AllInstallationStatus = []InstallationStatus{
+	InstallationStatusNew,
+	InstallationStatusAppsSelected,
+	InstallationStatusFinished,
+}
+
+func (e InstallationStatus) IsValid() bool {
+	switch e {
+	case InstallationStatusNew, InstallationStatusAppsSelected, InstallationStatusFinished:
+		return true
+	}
+	return false
+}
+
+func (e InstallationStatus) String() string {
+	return string(e)
+}
+
+func (e *InstallationStatus) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = InstallationStatus(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid InstallationStatus", str)
+	}
+	return nil
+}
+
+func (e InstallationStatus) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
 type K8sResourceKind string
 
 const (
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 1ec837b6c..06d2ebb47 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -38,6 +38,12 @@ enum SpanKind {
   Consumer
 }
 
+enum InstallationStatus {
+  NEW
+  APPS_SELECTED
+  FINISHED
+}
+
 type SourceLanguage {
   containerName: String!
   language: String!
@@ -59,7 +65,6 @@ type Condition {
 type K8sActualNamespace {
   name: String!
   autoInstrumented: Boolean
-
   k8sActualSources: [K8sActualSource]!
 }
 
@@ -101,71 +106,6 @@ input K8sSourceId {
   name: String!
 }
 
-type DestinationSpecField {
-  name: String!
-  value: String!
-}
-type ActualDestination {
-  id: ID!
-  name: String!
-  type: DestinationType!
-  exportedSignals: [SignalType!]!
-  fields: [DestinationSpecField!]!
-}
-type DesiredDestination {
-  id: ID!
-  name: String!
-  type: DestinationType!
-  exportSignals: [SignalType!]!
-  fields: [DestinationSpecField!]!
-
-  # compute platforms that include this destination
-  computePlatforms: [ComputePlatform!]!
-}
-input DesiredDestinationFieldInput {
-  name: String!
-  value: String!
-}
-input DesiredDestinationInput {
-  name: String!
-  exportSignals: [SignalType!]!
-  fields: [DesiredDestinationFieldInput!]!
-}
-
-type DestinationTypeField {
-  name: String!
-  displayName: String!
-  videoURL: String
-  thumbnailURL: String
-  componentType: String!
-  # componentProps is JSON stringified data as text
-  componentProps: String!
-  secret: Boolean!
-  initialValue: String
-}
-type DestinationType {
-  # category is currently "managed" or "self hosted"
-  category: String!
-  # the name of the destination type (prometheus, jaeger, etc)
-  name: String!
-  # same destination type "name", but used for display (for example can contain spaces)
-  displayName: String!
-
-  # name of an image file to be used for this destination type
-  # the image themselves are stored [here](https://s3.console.aws.amazon.com/s3/buckets/odigos-destinations)
-  image: String
-
-  # the signals that this destination type supports
-  supportedSignals: [SignalType!]!
-
-  fields: [DestinationTypeField!]!
-}
-type DestinationTypeCategory {
-  # the name of the category
-  name: String!
-  destinationTypes: [DestinationType]!
-}
-
 type ComputePlatform {
   id: ID!
   name: String
@@ -181,84 +121,20 @@ type ComputePlatform {
   k8sActualSources: [K8sActualSource]!
 
   # destinations that are applied to this compute platform
-  actualDestinations: [ActualDestination]!
-  actualActions: [ActualAction]!
-}
-
-# Define the input type for Workload
-input WorkloadInput {
-  kind: K8sResourceKind!
-  name: String!
-  namespace: String!
-}
-
-input DesiredActionInput {
-  kind: String!
-  name: String
-  notes: String
-  disable: Boolean!
-  signals: [SignalType!]!
-  details: String!
 }
 
-type ActualAction {
-  id: ID!
-  kind: String!
-  name: String
-  notes: String
-  disable: Boolean!
-  signals: [SignalType!]!
-  details: String!
+type GetConfigResponse {
+  installation: InstallationStatus!
 }
 
 type Query {
   computePlatform(cpId: ID!): ComputePlatform
-  destinationTypeCategories: [DestinationTypeCategory]
-  desiredDestinations: [DesiredDestination]
+  config: GetConfigResponse
 }
 
 type Mutation {
-  # desired namespace mutations
-  applyDesiredNamespace(
-    cpId: ID!
-    nsId: K8sNamespaceId!
-    ns: K8sDesiredNamespaceInput!
-  ): Boolean!
-  deleteDesiredNamespace(cpId: ID!, nsId: K8sNamespaceId!): Boolean!
-
-  #k8s desired source mutations
-  applyDesiredSource(
-    cpId: ID!
-    sourceId: K8sSourceId!
-    source: K8sDesiredSourceInput!
-  ): Boolean!
-  deleteDesiredSource(cpId: ID!, sourceId: K8sSourceId!): Boolean!
-
-  # desired destination mutations
-  createDesiredDestination(
-    destinationType: String!
-    destination: DesiredDestinationInput!
-  ): DesiredDestination!
-  updateDesiredDestination(
-    destinationId: ID!
-    destination: DesiredDestinationInput!
-  ): DesiredDestination!
-  deleteDesiredDestination(destinationId: ID!): Boolean!
-  applyDesiredDestinationToComputePlatform(
-    cpId: ID!
-    destinationId: ID!
-  ): Boolean!
-  removeDesiredDestinationFromComputePlatform(
-    cpId: ID!
-    destinationId: ID!
-  ): Boolean!
-
-  # actions mutations
-  createDesiredAction(cpId: ID!, action: DesiredActionInput!): Boolean!
-  updateDesiredAction(
+  createK8sDesiredNamespace(
     cpId: ID!
-    actionId: String!
-    action: DesiredActionInput!
-  ): Boolean!
-  deleteActualAction(cpId: ID!, actionId: String!, kind: String!): Boolean!
+    namespace: K8sDesiredNamespaceInput!
+  ): K8sActualNamespace
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index a744f7054..9a8ea6532 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -26,64 +26,9 @@ func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *mode
 	return k8sActualSource, nil
 }
 
-// ApplyDesiredNamespace is the resolver for the applyDesiredNamespace field.
-func (r *mutationResolver) ApplyDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID, ns model.K8sDesiredNamespaceInput) (bool, error) {
-	panic(fmt.Errorf("not implemented: ApplyDesiredNamespace - applyDesiredNamespace"))
-}
-
-// DeleteDesiredNamespace is the resolver for the deleteDesiredNamespace field.
-func (r *mutationResolver) DeleteDesiredNamespace(ctx context.Context, cpID string, nsID model.K8sNamespaceID) (bool, error) {
-	panic(fmt.Errorf("not implemented: DeleteDesiredNamespace - deleteDesiredNamespace"))
-}
-
-// ApplyDesiredSource is the resolver for the applyDesiredSource field.
-func (r *mutationResolver) ApplyDesiredSource(ctx context.Context, cpID string, sourceID model.K8sSourceID, source model.K8sDesiredSourceInput) (bool, error) {
-	panic(fmt.Errorf("not implemented: ApplyDesiredSource - applyDesiredSource"))
-}
-
-// DeleteDesiredSource is the resolver for the deleteDesiredSource field.
-func (r *mutationResolver) DeleteDesiredSource(ctx context.Context, cpID string, sourceID model.K8sSourceID) (bool, error) {
-	panic(fmt.Errorf("not implemented: DeleteDesiredSource - deleteDesiredSource"))
-}
-
-// CreateDesiredDestination is the resolver for the createDesiredDestination field.
-func (r *mutationResolver) CreateDesiredDestination(ctx context.Context, destinationType string, destination model.DesiredDestinationInput) (*model.DesiredDestination, error) {
-	panic(fmt.Errorf("not implemented: CreateDesiredDestination - createDesiredDestination"))
-}
-
-// UpdateDesiredDestination is the resolver for the updateDesiredDestination field.
-func (r *mutationResolver) UpdateDesiredDestination(ctx context.Context, destinationID string, destination model.DesiredDestinationInput) (*model.DesiredDestination, error) {
-	panic(fmt.Errorf("not implemented: UpdateDesiredDestination - updateDesiredDestination"))
-}
-
-// DeleteDesiredDestination is the resolver for the deleteDesiredDestination field.
-func (r *mutationResolver) DeleteDesiredDestination(ctx context.Context, destinationID string) (bool, error) {
-	panic(fmt.Errorf("not implemented: DeleteDesiredDestination - deleteDesiredDestination"))
-}
-
-// ApplyDesiredDestinationToComputePlatform is the resolver for the applyDesiredDestinationToComputePlatform field.
-func (r *mutationResolver) ApplyDesiredDestinationToComputePlatform(ctx context.Context, cpID string, destinationID string) (bool, error) {
-	panic(fmt.Errorf("not implemented: ApplyDesiredDestinationToComputePlatform - applyDesiredDestinationToComputePlatform"))
-}
-
-// RemoveDesiredDestinationFromComputePlatform is the resolver for the removeDesiredDestinationFromComputePlatform field.
-func (r *mutationResolver) RemoveDesiredDestinationFromComputePlatform(ctx context.Context, cpID string, destinationID string) (bool, error) {
-	panic(fmt.Errorf("not implemented: RemoveDesiredDestinationFromComputePlatform - removeDesiredDestinationFromComputePlatform"))
-}
-
-// CreateDesiredAction is the resolver for the createDesiredAction field.
-func (r *mutationResolver) CreateDesiredAction(ctx context.Context, cpID string, action model.DesiredActionInput) (bool, error) {
-	panic(fmt.Errorf("not implemented: CreateDesiredAction - createDesiredAction"))
-}
-
-// UpdateDesiredAction is the resolver for the updateDesiredAction field.
-func (r *mutationResolver) UpdateDesiredAction(ctx context.Context, cpID string, actionID string, action model.DesiredActionInput) (bool, error) {
-	panic(fmt.Errorf("not implemented: UpdateDesiredAction - updateDesiredAction"))
-}
-
-// DeleteActualAction is the resolver for the deleteActualAction field.
-func (r *mutationResolver) DeleteActualAction(ctx context.Context, cpID string, actionID string, kind string) (bool, error) {
-	panic(fmt.Errorf("not implemented: DeleteActualAction - deleteActualAction"))
+// CreateK8sDesiredNamespace is the resolver for the createK8sDesiredNamespace field.
+func (r *mutationResolver) CreateK8sDesiredNamespace(ctx context.Context, cpID string, namespace model.K8sDesiredNamespaceInput) (*model.K8sActualNamespace, error) {
+	panic(fmt.Errorf("not implemented: CreateK8sDesiredNamespace - createK8sDesiredNamespace"))
 }
 
 // ComputePlatform is the resolver for the computePlatform field.
@@ -99,14 +44,15 @@ func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*mode
 	}, nil
 }
 
-// DestinationTypeCategories is the resolver for the destinationTypeCategories field.
-func (r *queryResolver) DestinationTypeCategories(ctx context.Context) ([]*model.DestinationTypeCategory, error) {
-	panic(fmt.Errorf("not implemented: DestinationTypeCategories - destinationTypeCategories"))
-}
+// Config is the resolver for the config field.
+func (r *queryResolver) Config(ctx context.Context) (*model.GetConfigResponse, error) {
+	response := endpoints.GetConfig(ctx)
+
+	gqlResponse := &model.GetConfigResponse{
+		Installation: model.InstallationStatus(response.Installation),
+	}
 
-// DesiredDestinations is the resolver for the desiredDestinations field.
-func (r *queryResolver) DesiredDestinations(ctx context.Context) ([]*model.DesiredDestination, error) {
-	panic(fmt.Errorf("not implemented: DesiredDestinations - desiredDestinations"))
+	return gqlResponse, nil
 }
 
 // ComputePlatform returns ComputePlatformResolver implementation.
@@ -121,20 +67,3 @@ func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
 type computePlatformResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
-
-// !!! WARNING !!!
-// The code below was going to be deleted when updating resolvers. It has been copied here so you have
-// one last chance to move it out of harms way if you want. There are two reasons this happens:
-//   - When renaming or deleting a resolver the old code will be put in here. You can safely delete
-//     it when you're done.
-//   - You have helper methods in this file. Move them out to keep these resolver files clean.
-func (r *computePlatformResolver) K8sActualSources(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualSource, error) {
-	// thinSource, err := endpoints.GetActualSource(ctx, *namespace, *kind, *name)
-	// if err != nil {
-	// 	return nil, err
-	// }
-	// k8sActualSource := k8sSourceToGql(thinSource)
-
-	// return k8sActualSources, nil
-	return obj.K8sActualSources, nil
-}
diff --git a/frontend/main.go b/frontend/main.go
index 3395f06ee..1a5adb3a1 100644
--- a/frontend/main.go
+++ b/frontend/main.go
@@ -112,7 +112,6 @@ func startHTTPServer(flags *Flags) (*gin.Engine, error) {
 		apis.PATCH("/sources/namespace/:namespace/kind/:kind/name/:name", endpoints.PatchSource)
 
 		apis.GET("/applications/:namespace", endpoints.GetApplicationsInNamespace)
-		apis.GET("/config", endpoints.GetConfig)
 		apis.GET("/destination-types", endpoints.GetDestinationTypes)
 		apis.GET("/destination-types/:type", endpoints.GetDestinationTypeDetails)
 		apis.GET("/destinations", func(c *gin.Context) { endpoints.GetDestinations(c, flags.Namespace) })

From d72cd01764fbc22a7c060fddd9f132ebe33fba57 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 15:46:33 +0300
Subject: [PATCH 099/374] chore: init new setup

---
 frontend/webapp/app/globals.css               |  4 ++
 frontend/webapp/app/layout.tsx                | 18 ++---
 .../webapp/app/setup/choose-sources/page.tsx  | 45 ++++++++++++
 frontend/webapp/app/setup/layout.tsx          | 16 +++++
 .../components/setup/headers/header/index.tsx | 68 +++++++++++++++++++
 .../webapp/components/setup/headers/index.tsx |  1 +
 frontend/webapp/public/brand/odigos-icon.svg  |  6 ++
 .../public/brand/transparent-logo-black.svg   | 19 ++++++
 .../public/brand/transparent-logo-white.svg   | 19 ++++++
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../reuseable-components/text/index.tsx       | 40 +++++++++++
 .../webapp/styles/{palette.tsx => palette.ts} |  9 ++-
 frontend/webapp/styles/theme.ts               | 39 +++++++++++
 13 files changed, 273 insertions(+), 12 deletions(-)
 create mode 100644 frontend/webapp/app/globals.css
 create mode 100644 frontend/webapp/app/setup/choose-sources/page.tsx
 create mode 100644 frontend/webapp/app/setup/layout.tsx
 create mode 100644 frontend/webapp/components/setup/headers/header/index.tsx
 create mode 100644 frontend/webapp/public/brand/odigos-icon.svg
 create mode 100644 frontend/webapp/public/brand/transparent-logo-black.svg
 create mode 100644 frontend/webapp/public/brand/transparent-logo-white.svg
 create mode 100644 frontend/webapp/reuseable-components/index.ts
 create mode 100644 frontend/webapp/reuseable-components/text/index.tsx
 rename frontend/webapp/styles/{palette.tsx => palette.ts} (86%)
 create mode 100644 frontend/webapp/styles/theme.ts

diff --git a/frontend/webapp/app/globals.css b/frontend/webapp/app/globals.css
new file mode 100644
index 000000000..27185356f
--- /dev/null
+++ b/frontend/webapp/app/globals.css
@@ -0,0 +1,4 @@
+/* Preload key fonts in your global CSS */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index e36316b12..9a7036926 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -1,13 +1,14 @@
 'use client';
+import './globals.css';
 import React from 'react';
 import { useSSE } from '@/hooks';
-import theme from '@/styles/palette';
+import theme from '@/styles/theme';
+import { ApolloWrapper } from '@/lib';
 import { ThemeProvider } from 'styled-components';
 import { NotificationManager } from '@/components';
 import ReduxProvider from '@/store/redux-provider';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ThemeProviderWrapper } from '@keyval-dev/design-system';
-import { ApolloWrapper } from '@/lib';
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -15,7 +16,6 @@ const LAYOUT_STYLE: React.CSSProperties = {
   scrollbarWidth: 'none',
   width: '100vw',
   height: '100vh',
-  backgroundColor: theme.colors.dark,
 };
 
 export default function RootLayout({
@@ -40,12 +40,12 @@ export default function RootLayout({
         <ApolloWrapper>
           <QueryClientProvider client={queryClient}>
             <ThemeProvider theme={theme}>
-              <ThemeProviderWrapper>
-                <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
-                  {children}
-                  <NotificationManager />
-                </body>
-              </ThemeProviderWrapper>
+              {/* <ThemeProviderWrapper> */}
+              <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
+                {children}
+                <NotificationManager />
+              </body>
+              {/* </ThemeProviderWrapper> */}
             </ThemeProvider>
           </QueryClientProvider>
         </ApolloWrapper>
diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
new file mode 100644
index 000000000..933dfb802
--- /dev/null
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -0,0 +1,45 @@
+'use client';
+import React from 'react';
+
+import { useSuspenseQuery, gql } from '@apollo/client';
+
+const GET_COMPUTE_PLATFORM = gql`
+  query GetComputePlatform($cpId: ID!) {
+    computePlatform(cpId: $cpId) {
+      id
+      name
+      computePlatformType
+      k8sActualSources {
+        namespace
+        kind
+        name
+        serviceName
+        autoInstrumented
+        creationTimestamp
+        numberOfInstances
+        hasInstrumentedApplication
+        instrumentedApplicationDetails {
+          languages {
+            containerName
+            language
+          }
+          conditions {
+            type
+            status
+            lastTransitionTime
+            reason
+            message
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default function ChooseSourcesPage() {
+  const { error, data } = useSuspenseQuery(GET_COMPUTE_PLATFORM, {
+    variables: { cpId: '1' },
+  });
+
+  return <></>;
+}
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
new file mode 100644
index 000000000..2aaf15e78
--- /dev/null
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -0,0 +1,16 @@
+'use client';
+import React from 'react';
+import { SetupHeader } from '@/components';
+
+export default function SetupLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <SetupHeader />
+      {children}
+    </>
+  );
+}
diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
new file mode 100644
index 000000000..3e5be0249
--- /dev/null
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -0,0 +1,68 @@
+import { Text } from '@/reuseable-components';
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+
+interface SetupHeaderProps {
+  onBack?: () => void;
+  onNext?: () => void;
+}
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 24px 0 32px;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  border-bottom: 1px solid rgba(249, 249, 249, 0.16);
+  height: 80px;
+`;
+
+const Title = styled(Text)``;
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 1.2em;
+`;
+
+const NavigationButtons = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Button = styled.button`
+  background-color: #333;
+  border: none;
+  color: #fff;
+  padding: 5px 10px;
+  margin: 0 5px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 1em;
+
+  &:hover {
+    background-color: #444;
+  }
+`;
+
+export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
+  return (
+    <HeaderContainer>
+      <Logo>
+        <Image
+          src="/brand/transparent-logo-white.svg"
+          alt="logo"
+          width={84}
+          height={20}
+        />
+      </Logo>
+      <Title>START WITH ODIGOS</Title>
+      <NavigationButtons>
+        <Button onClick={onBack}>BACK</Button>
+        <Button onClick={onNext}>NEXT</Button>
+      </NavigationButtons>
+    </HeaderContainer>
+  );
+};
diff --git a/frontend/webapp/components/setup/headers/index.tsx b/frontend/webapp/components/setup/headers/index.tsx
index fc5486a21..ce9c51325 100644
--- a/frontend/webapp/components/setup/headers/index.tsx
+++ b/frontend/webapp/components/setup/headers/index.tsx
@@ -2,3 +2,4 @@ export * from './choose-destination-header';
 export * from './choose-sources-header';
 export * from './connect-destination-header';
 export * from './back-button';
+export * from './header';
diff --git a/frontend/webapp/public/brand/odigos-icon.svg b/frontend/webapp/public/brand/odigos-icon.svg
new file mode 100644
index 000000000..9247584f3
--- /dev/null
+++ b/frontend/webapp/public/brand/odigos-icon.svg
@@ -0,0 +1,6 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" fill="#242023"/>
+<path d="M553.491 377.309V294.077H717.573C738.785 294.077 756 310.446 756 330.659V668.508C756 688.72 738.785 705.09 717.573 705.09H553.491V622.396L699.666 557.762C723.721 547.079 738.708 524.791 738.708 499.583C738.708 474.375 723.721 452.011 699.666 441.405L553.414 377.386L553.491 377.309Z" fill="#F9F9F9"/>
+<path d="M447.51 621.781V705.014H283.427C262.215 705.014 245 688.644 245 668.431V330.582C245 310.37 262.215 294 283.427 294H447.51V376.695L301.334 441.329C277.279 452.011 262.292 474.299 262.292 499.507C262.292 524.715 277.279 547.079 301.334 557.685L447.586 621.704L447.51 621.781Z" fill="#F9F9F9"/>
+<path d="M500.462 584.507C547.363 584.507 585.385 546.485 585.385 499.584C585.385 452.682 547.363 414.66 500.462 414.66C453.56 414.66 415.538 452.682 415.538 499.584C415.538 546.485 453.56 584.507 500.462 584.507Z" fill="#F9F9F9"/>
+</svg>
diff --git a/frontend/webapp/public/brand/transparent-logo-black.svg b/frontend/webapp/public/brand/transparent-logo-black.svg
new file mode 100644
index 000000000..5aeff3c50
--- /dev/null
+++ b/frontend/webapp/public/brand/transparent-logo-black.svg
@@ -0,0 +1,19 @@
+<svg width="429" height="103" viewBox="0 0 429 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_116_94)">
+<path d="M253.012 22.3253H242.622V81.3372H253.012V22.3253Z" fill="#151515"/>
+<path d="M198.854 81.3261C197.32 81.3261 195.886 80.7305 194.805 79.6495L183.83 68.6744C182.749 67.5934 182.154 66.1595 182.154 64.6263V39.003C182.154 37.4698 182.749 36.0359 183.83 34.9549L194.805 23.9798C195.886 22.8988 197.32 22.3032 198.854 22.3032H215.2C216.59 22.3032 217.925 22.8106 218.973 23.7151L221.267 25.7115V0H231.658V64.6153C231.658 66.1485 231.062 67.5824 229.981 68.6634L219.006 79.6385C217.925 80.7195 216.491 81.3151 214.958 81.3151H198.854V81.3261ZM200.409 32.7158C196.228 32.7158 192.831 36.1131 192.831 40.2935V63.3799C192.831 67.5493 196.228 70.9577 200.409 70.9577H213.402C217.583 70.9577 220.98 67.5603 220.98 63.3799V40.2935C220.98 36.1131 217.583 32.7158 213.402 32.7158H200.409Z" fill="#151515"/>
+<path d="M395.942 81.3371C394.552 81.3371 393.218 80.8298 392.17 79.9253L381.449 70.5495C380.202 69.4576 379.496 67.8913 379.496 66.2477V64.1079H390.218C390.582 67.9464 393.825 70.9466 397.751 70.9466H410.745C414.914 70.9466 418.312 67.5493 418.323 63.3909V62.9938C418.323 61.6922 417.44 60.5782 416.183 60.2804L383.28 52.4379C380.952 51.8863 379.375 49.7465 379.507 47.3529V39.014C379.507 37.4808 380.103 36.0469 381.184 34.9659L392.159 23.9908C393.24 22.9098 394.674 22.3142 396.207 22.3142H412.554C413.944 22.3142 415.278 22.8216 416.326 23.7261L427.048 33.1018C428.294 34.1828 429 35.7601 429 37.4036V41.6834H418.334V39.5435H418.279C417.915 35.7049 414.672 32.7047 410.745 32.7047H397.751C393.571 32.7047 390.174 36.102 390.174 40.2825V40.8671C390.174 42.1466 391.045 43.2607 392.28 43.5695L420.054 50.5076L425.184 51.7319C427.312 52.2393 428.857 54.1365 428.945 56.3536V56.7948H428.967V64.6263C428.967 66.1595 428.371 67.5934 427.29 68.6744L416.315 79.6495C415.234 80.7305 413.8 81.3261 412.267 81.3261H395.92H395.931L395.942 81.3371Z" fill="#151515"/>
+<path d="M247.817 10.4016C244.949 10.4016 242.622 8.06314 242.622 5.2063C242.622 2.34946 244.949 0.0110474 247.817 0.0110474C250.685 0.0110474 253.012 2.34946 253.012 5.2063C253.012 8.06314 250.685 10.4016 247.817 10.4016Z" fill="#151515"/>
+<path d="M279.154 102.681V92.2902H294.574C298.755 92.2902 302.152 88.8929 302.152 84.7124V77.6861L300.178 79.6605C299.097 80.7415 297.663 81.3371 296.129 81.3371H280.025C278.492 81.3371 277.058 80.7415 275.977 79.6605L265.002 68.6854C263.921 67.6045 263.325 66.1705 263.325 64.6373V39.014C263.325 37.4808 263.921 36.0469 265.002 34.9659L275.977 23.9908C277.058 22.9098 278.492 22.3142 280.025 22.3142H296.372C297.762 22.3142 299.097 22.8216 300.144 23.7261L310.866 33.1018C312.112 34.1828 312.818 35.7601 312.818 37.4036V85.9699C312.818 87.5031 312.223 88.937 311.142 90.018L300.167 100.993C299.086 102.074 297.652 102.67 296.118 102.67H279.143L279.154 102.681ZM281.581 32.7157C277.411 32.7157 274.003 36.1131 274.003 40.2935V63.3799C274.003 67.5493 277.4 70.9577 281.581 70.9577H294.574C298.755 70.9577 302.152 67.5603 302.152 63.3799V40.2935C302.152 36.1131 298.755 32.7157 294.574 32.7157H281.581Z" fill="#151515"/>
+<path d="M139.555 81.3371C138.022 81.3371 136.588 80.7415 135.507 79.6605L124.532 68.6854C123.451 67.6045 122.855 66.1705 122.855 64.6373V39.014C122.855 37.4808 123.451 36.0469 124.532 34.9659L135.507 23.9908C136.588 22.9098 138.022 22.3142 139.555 22.3142H155.902C157.292 22.3142 158.626 22.8216 159.674 23.7261L170.395 33.1018C171.642 34.1828 172.348 35.7601 172.348 37.4036V64.6153C172.348 66.1485 171.752 67.5824 170.671 68.6634L159.696 79.6385C158.615 80.7194 157.181 81.3151 155.648 81.3151H139.544V81.3261L139.555 81.3371ZM141.121 32.7157C136.941 32.7157 133.543 36.1131 133.543 40.2935V63.3799C133.543 67.5603 136.941 70.9577 141.121 70.9577H154.104C158.284 70.9577 161.682 67.5603 161.682 63.3799V40.2935C161.682 36.1131 158.284 32.7157 154.104 32.7157H141.121Z" fill="#151515"/>
+<path d="M337.791 81.3371C336.258 81.3371 334.824 80.7415 333.743 79.6605L322.768 68.6854C321.687 67.6045 321.091 66.1705 321.091 64.6373V39.014C321.091 37.4808 321.687 36.0469 322.768 34.9659L333.743 23.9908C334.824 22.9098 336.258 22.3142 337.791 22.3142H354.138C355.527 22.3142 356.862 22.8216 357.91 23.7261L368.631 33.1018C369.878 34.1828 370.584 35.7601 370.584 37.4036V64.6153C370.584 66.1485 369.988 67.5824 368.907 68.6634L357.932 79.6385C356.851 80.7194 355.417 81.3151 353.884 81.3151H337.78V81.3261L337.791 81.3371ZM339.346 32.7157C335.166 32.7157 331.768 36.1131 331.768 40.2935V63.3799C331.768 67.5603 335.166 70.9577 339.346 70.9577H352.34C356.52 70.9577 359.917 67.5603 359.917 63.3799V40.2935C359.917 36.1131 356.52 32.7157 352.34 32.7157H339.346Z" fill="#151515"/>
+<path d="M44.2865 34.2931V22.3473H67.8361C70.8805 22.3473 73.3513 24.6967 73.3513 27.5977V76.0867C73.3513 78.9877 70.8805 81.3371 67.8361 81.3371H44.2865V69.4686L65.2661 60.1921C68.7185 58.6589 70.8694 55.4601 70.8694 51.8422C70.8694 48.2243 68.7185 45.0145 65.2661 43.4923L44.2755 34.3041L44.2865 34.2931Z" fill="#151515"/>
+<path d="M29.0758 69.3804V81.3262H5.52616C2.48181 81.3262 0.0110321 78.9767 0.0110321 76.0757V27.5867C0.0110321 24.6857 2.48181 22.3363 5.52616 22.3363H29.0758V34.2049L8.09621 43.4813C4.64374 45.0145 2.49284 48.2133 2.49284 51.8312C2.49284 55.4492 4.64374 58.659 8.09621 60.1811L29.0868 69.3693L29.0758 69.3804Z" fill="#151515"/>
+<path d="M36.6756 64.0307C43.4071 64.0307 48.8641 58.5737 48.8641 51.8422C48.8641 45.1108 43.4071 39.6538 36.6756 39.6538C29.9441 39.6538 24.4872 45.1108 24.4872 51.8422C24.4872 58.5737 29.9441 64.0307 36.6756 64.0307Z" fill="#151515"/>
+</g>
+<defs>
+<clipPath id="clip0_116_94">
+<rect width="429" height="102.681" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/webapp/public/brand/transparent-logo-white.svg b/frontend/webapp/public/brand/transparent-logo-white.svg
new file mode 100644
index 000000000..9c91b04ac
--- /dev/null
+++ b/frontend/webapp/public/brand/transparent-logo-white.svg
@@ -0,0 +1,19 @@
+<svg width="429" height="103" viewBox="0 0 429 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_116_120)">
+<path d="M253.012 22.3253H242.622V81.3372H253.012V22.3253Z" fill="#F9F9F9"/>
+<path d="M198.854 81.3261C197.32 81.3261 195.886 80.7305 194.805 79.6495L183.83 68.6744C182.749 67.5934 182.154 66.1595 182.154 64.6263V39.003C182.154 37.4698 182.749 36.0359 183.83 34.9549L194.805 23.9798C195.886 22.8988 197.32 22.3032 198.854 22.3032H215.2C216.59 22.3032 217.925 22.8106 218.973 23.7151L221.267 25.7115V0H231.658V64.6153C231.658 66.1485 231.062 67.5824 229.981 68.6634L219.006 79.6385C217.925 80.7195 216.491 81.3151 214.958 81.3151H198.854V81.3261ZM200.409 32.7158C196.228 32.7158 192.831 36.1131 192.831 40.2935V63.3799C192.831 67.5493 196.228 70.9577 200.409 70.9577H213.402C217.583 70.9577 220.98 67.5603 220.98 63.3799V40.2935C220.98 36.1131 217.583 32.7158 213.402 32.7158H200.409Z" fill="#F9F9F9"/>
+<path d="M395.942 81.3371C394.552 81.3371 393.218 80.8298 392.17 79.9253L381.449 70.5495C380.202 69.4576 379.496 67.8913 379.496 66.2477V64.1079H390.218C390.582 67.9464 393.825 70.9466 397.751 70.9466H410.745C414.914 70.9466 418.312 67.5493 418.323 63.3909V62.9938C418.323 61.6922 417.44 60.5782 416.183 60.2804L383.28 52.4379C380.952 51.8863 379.375 49.7465 379.507 47.3529V39.014C379.507 37.4808 380.103 36.0469 381.184 34.9659L392.159 23.9908C393.24 22.9098 394.674 22.3142 396.207 22.3142H412.554C413.944 22.3142 415.278 22.8216 416.326 23.7261L427.048 33.1018C428.294 34.1828 429 35.7601 429 37.4036V41.6834H418.334V39.5435H418.279C417.915 35.7049 414.672 32.7047 410.745 32.7047H397.751C393.571 32.7047 390.174 36.102 390.174 40.2825V40.8671C390.174 42.1466 391.045 43.2607 392.28 43.5695L420.054 50.5076L425.184 51.7319C427.312 52.2393 428.857 54.1365 428.945 56.3536V56.7948H428.967V64.6263C428.967 66.1595 428.371 67.5934 427.29 68.6744L416.315 79.6495C415.234 80.7305 413.8 81.3261 412.267 81.3261H395.92H395.931L395.942 81.3371Z" fill="#F9F9F9"/>
+<path d="M247.817 10.4016C244.949 10.4016 242.622 8.06314 242.622 5.2063C242.622 2.34946 244.949 0.0110474 247.817 0.0110474C250.685 0.0110474 253.012 2.34946 253.012 5.2063C253.012 8.06314 250.685 10.4016 247.817 10.4016Z" fill="#F9F9F9"/>
+<path d="M279.154 102.681V92.2902H294.574C298.755 92.2902 302.152 88.8929 302.152 84.7124V77.6861L300.178 79.6605C299.097 80.7415 297.663 81.3371 296.129 81.3371H280.025C278.492 81.3371 277.058 80.7415 275.977 79.6605L265.002 68.6854C263.921 67.6045 263.325 66.1705 263.325 64.6373V39.014C263.325 37.4808 263.921 36.0469 265.002 34.9659L275.977 23.9908C277.058 22.9098 278.492 22.3142 280.025 22.3142H296.372C297.762 22.3142 299.097 22.8216 300.144 23.7261L310.866 33.1018C312.112 34.1828 312.818 35.7601 312.818 37.4036V85.9699C312.818 87.5031 312.223 88.937 311.142 90.018L300.167 100.993C299.086 102.074 297.652 102.67 296.118 102.67H279.143L279.154 102.681ZM281.581 32.7157C277.411 32.7157 274.003 36.1131 274.003 40.2935V63.3799C274.003 67.5493 277.4 70.9577 281.581 70.9577H294.574C298.755 70.9577 302.152 67.5603 302.152 63.3799V40.2935C302.152 36.1131 298.755 32.7157 294.574 32.7157H281.581Z" fill="#F9F9F9"/>
+<path d="M139.555 81.3371C138.022 81.3371 136.588 80.7415 135.507 79.6605L124.532 68.6854C123.451 67.6045 122.855 66.1705 122.855 64.6373V39.014C122.855 37.4808 123.451 36.0469 124.532 34.9659L135.507 23.9908C136.588 22.9098 138.022 22.3142 139.555 22.3142H155.902C157.292 22.3142 158.626 22.8216 159.674 23.7261L170.395 33.1018C171.642 34.1828 172.348 35.7601 172.348 37.4036V64.6153C172.348 66.1485 171.752 67.5824 170.671 68.6634L159.696 79.6385C158.615 80.7194 157.181 81.3151 155.648 81.3151H139.544V81.3261L139.555 81.3371ZM141.121 32.7157C136.941 32.7157 133.543 36.1131 133.543 40.2935V63.3799C133.543 67.5603 136.941 70.9577 141.121 70.9577H154.104C158.284 70.9577 161.682 67.5603 161.682 63.3799V40.2935C161.682 36.1131 158.284 32.7157 154.104 32.7157H141.121Z" fill="#F9F9F9"/>
+<path d="M337.791 81.3371C336.258 81.3371 334.824 80.7415 333.743 79.6605L322.768 68.6854C321.687 67.6045 321.091 66.1705 321.091 64.6373V39.014C321.091 37.4808 321.687 36.0469 322.768 34.9659L333.743 23.9908C334.824 22.9098 336.258 22.3142 337.791 22.3142H354.138C355.527 22.3142 356.862 22.8216 357.91 23.7261L368.631 33.1018C369.878 34.1828 370.584 35.7601 370.584 37.4036V64.6153C370.584 66.1485 369.988 67.5824 368.907 68.6634L357.932 79.6385C356.851 80.7194 355.417 81.3151 353.884 81.3151H337.78V81.3261L337.791 81.3371ZM339.346 32.7157C335.166 32.7157 331.768 36.1131 331.768 40.2935V63.3799C331.768 67.5603 335.166 70.9577 339.346 70.9577H352.34C356.52 70.9577 359.917 67.5603 359.917 63.3799V40.2935C359.917 36.1131 356.52 32.7157 352.34 32.7157H339.346Z" fill="#F9F9F9"/>
+<path d="M44.2865 34.2931V22.3473H67.8361C70.8804 22.3473 73.3512 24.6967 73.3512 27.5977V76.0867C73.3512 78.9877 70.8804 81.3371 67.8361 81.3371H44.2865V69.4686L65.266 60.1921C68.7185 58.6589 70.8694 55.4601 70.8694 51.8422C70.8694 48.2243 68.7185 45.0145 65.266 43.4923L44.2755 34.3041L44.2865 34.2931Z" fill="#F9F9F9"/>
+<path d="M29.0758 69.3804V81.3262H5.52618C2.48183 81.3262 0.0110474 78.9767 0.0110474 76.0757V27.5867C0.0110474 24.6857 2.48183 22.3363 5.52618 22.3363H29.0758V34.2049L8.09623 43.4813C4.64376 45.0145 2.49286 48.2133 2.49286 51.8312C2.49286 55.4492 4.64376 58.659 8.09623 60.1811L29.0868 69.3693L29.0758 69.3804Z" fill="#F9F9F9"/>
+<path d="M36.6756 64.0307C43.4071 64.0307 48.8641 58.5737 48.8641 51.8422C48.8641 45.1108 43.4071 39.6538 36.6756 39.6538C29.9441 39.6538 24.4872 45.1108 24.4872 51.8422C24.4872 58.5737 29.9441 64.0307 36.6756 64.0307Z" fill="#F9F9F9"/>
+</g>
+<defs>
+<clipPath id="clip0_116_120">
+<rect width="429" height="102.681" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
new file mode 100644
index 000000000..1a9ac1460
--- /dev/null
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -0,0 +1 @@
+export * from './text';
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
new file mode 100644
index 000000000..0cc8c08c6
--- /dev/null
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface TextProps {
+  children: React.ReactNode;
+  color?: string;
+  size?: number;
+  weight?: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+const TextWrapper = styled.span<{
+  color?: string;
+  size: number;
+  weight: number;
+  align: 'left' | 'center' | 'right';
+}>`
+  color: ${({ color, theme }) =>
+    color || console.log({ theme }) || theme.colors.text};
+  font-size: ${({ size }) => size}px;
+  font-weight: ${({ weight }) => weight};
+  text-align: ${({ align }) => align};
+  font-family: ${({ theme }) => theme.font_family.primary};
+`;
+
+const Text: React.FC<TextProps> = ({
+  children,
+  color,
+  size = 16,
+  weight = 400,
+  align = 'left',
+}) => {
+  return (
+    <TextWrapper color={color} size={size} weight={weight} align={align}>
+      {children}
+    </TextWrapper>
+  );
+};
+
+export { Text };
diff --git a/frontend/webapp/styles/palette.tsx b/frontend/webapp/styles/palette.ts
similarity index 86%
rename from frontend/webapp/styles/palette.tsx
rename to frontend/webapp/styles/palette.ts
index 4df30fcb8..006a9a0cf 100644
--- a/frontend/webapp/styles/palette.tsx
+++ b/frontend/webapp/styles/palette.ts
@@ -2,8 +2,11 @@ import { DefaultTheme } from 'styled-components';
 
 // Define your color palette
 const colors = {
-  primary: '#07111A',
-  secondary: '#0EE6F3',
+  primary: '#111',
+  secondary: '#F9F9F9',
+  dark_grey: '#151515',
+  text: '#F9F9F9',
+
   torquiz_light: '#96F2FF',
   dark: '#07111A',
   light_dark: '#132330',
@@ -26,7 +29,7 @@ const text = {
 };
 
 const font_family = {
-  primary: 'Inter, sans-serif',
+  primary: 'Kode Mono, sans-serif',
 };
 
 // Define the theme interface
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
new file mode 100644
index 000000000..9b44c56c1
--- /dev/null
+++ b/frontend/webapp/styles/theme.ts
@@ -0,0 +1,39 @@
+import { DefaultTheme } from 'styled-components';
+
+// Define your color palette
+const colors = {
+  primary: '#111',
+  secondary: '#F9F9F9',
+  dark_grey: '#151515',
+  text: '#F9F9F9',
+};
+
+const text = {
+  primary: '#07111A',
+  secondary: '#0EE6F3',
+  white: '#fff',
+  light_grey: '#CCD0D2',
+  grey: '#8b92a5',
+  dark_button: '#0A1824',
+};
+
+const font_family = {
+  primary: 'Kode Mono, sans-serif',
+};
+
+// Define the theme interface
+interface ThemeInterface extends DefaultTheme {
+  colors: typeof colors;
+  text: typeof text;
+  font_family: typeof font_family;
+}
+
+// Create your theme object
+const theme: ThemeInterface = {
+  colors,
+  text,
+  font_family,
+};
+
+// Export the theme
+export default theme;

From 36d31336d382f5307d3e30a43ca313d19a39a0b3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 16:44:43 +0300
Subject: [PATCH 100/374] chore: setup header

---
 .../components/setup/headers/header/index.tsx | 48 ++++++-----
 .../public/icons/common/arrow-black.svg       |  8 ++
 .../public/icons/common/arrow-white.svg       |  8 ++
 frontend/webapp/public/icons/common/index.ts  |  3 +
 frontend/webapp/public/icons/index.ts         |  1 +
 .../reuseable-components/button/index.tsx     | 80 +++++++++++++++++++
 frontend/webapp/reuseable-components/index.ts |  1 +
 7 files changed, 131 insertions(+), 18 deletions(-)
 create mode 100644 frontend/webapp/public/icons/common/arrow-black.svg
 create mode 100644 frontend/webapp/public/icons/common/arrow-white.svg
 create mode 100644 frontend/webapp/public/icons/common/index.ts
 create mode 100644 frontend/webapp/public/icons/index.ts
 create mode 100644 frontend/webapp/reuseable-components/button/index.tsx

diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
index 3e5be0249..2d6943029 100644
--- a/frontend/webapp/components/setup/headers/header/index.tsx
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -1,4 +1,5 @@
-import { Text } from '@/reuseable-components';
+import { Button, Text } from '@/reuseable-components';
+import theme from '@/styles/theme';
 import Image from 'next/image';
 import React from 'react';
 import styled from 'styled-components';
@@ -20,31 +21,22 @@ const HeaderContainer = styled.div`
 
 const Title = styled(Text)``;
 
-const Logo = styled.div`
+const HeaderButton = styled(Button)`
   display: flex;
   align-items: center;
-  font-size: 1.2em;
+  gap: 8px;
 `;
 
-const NavigationButtons = styled.div`
+const Logo = styled.div`
   display: flex;
   align-items: center;
+  font-size: 1.2em;
 `;
 
-const Button = styled.button`
-  background-color: #333;
-  border: none;
-  color: #fff;
-  padding: 5px 10px;
-  margin: 0 5px;
+const NavigationButtons = styled.div`
   display: flex;
+  gap: 8px;
   align-items: center;
-  cursor: pointer;
-  font-size: 1em;
-
-  &:hover {
-    background-color: #444;
-  }
 `;
 
 export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
@@ -60,8 +52,28 @@ export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
       </Logo>
       <Title>START WITH ODIGOS</Title>
       <NavigationButtons>
-        <Button onClick={onBack}>BACK</Button>
-        <Button onClick={onNext}>NEXT</Button>
+        <HeaderButton variant="secondary" onClick={onBack}>
+          <Image
+            src="/icons/common/arrow-white.svg"
+            alt="back"
+            width={8}
+            height={12}
+          />
+          <Text color={theme.colors.secondary} size={14}>
+            BACK
+          </Text>
+        </HeaderButton>
+        <HeaderButton variant="primary" onClick={onNext}>
+          <Text color={theme.colors.dark_grey} size={14}>
+            NEXT
+          </Text>
+          <Image
+            src="/icons/common/arrow-black.svg"
+            alt="next"
+            width={8}
+            height={12}
+          />
+        </HeaderButton>
       </NavigationButtons>
     </HeaderContainer>
   );
diff --git a/frontend/webapp/public/icons/common/arrow-black.svg b/frontend/webapp/public/icons/common/arrow-black.svg
new file mode 100644
index 000000000..edc77a1d2
--- /dev/null
+++ b/frontend/webapp/public/icons/common/arrow-black.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none">
+  <mask id="mask0_213_186" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="8" height="13">
+    <rect x="0.0336914" y="0.915039" width="7.96639" height="12" fill="black"/>
+  </mask>
+  <g mask="url(#mask0_213_186)">
+    <path d="M7.45067 5.79839L7.45067 8.12309L-8.08447 8.12309L-8.08447 5.79839L7.45067 5.79839ZM-0.0440531 16.6462L-1.65882 14.9351L6.61205 6.95954L-1.65882 -1.07966L-0.108932 -2.79077L9.26007 6.24988V7.63798L-0.0440531 16.6462Z" fill="#151515"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/arrow-white.svg b/frontend/webapp/public/icons/common/arrow-white.svg
new file mode 100644
index 000000000..d230cf243
--- /dev/null
+++ b/frontend/webapp/public/icons/common/arrow-white.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="13" viewBox="0 0 9 13" fill="none">
+  <mask id="mask0_213_179" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="9" height="13">
+    <rect x="8.03369" y="12.915" width="7.96639" height="12" transform="rotate(-180 8.03369 12.915)" fill="black"/>
+  </mask>
+  <g mask="url(#mask0_213_179)">
+    <path d="M0.616717 8.03169L0.616717 5.70699L16.1519 5.70699L16.1519 8.03169L0.616717 8.03169ZM8.11144 -2.81613L9.7262 -1.10502L1.45534 6.87054L9.7262 14.9097L8.17631 16.6208L-1.19268 7.5802L-1.19268 6.1921L8.11144 -2.81613Z" fill="#F9F9F9"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/index.ts b/frontend/webapp/public/icons/common/index.ts
new file mode 100644
index 000000000..b80e515df
--- /dev/null
+++ b/frontend/webapp/public/icons/common/index.ts
@@ -0,0 +1,3 @@
+import ArrowBlack from './arrow.svg';
+import ArrowWhite from './arrow-white.svg';
+export { ArrowBlack, ArrowWhite };
diff --git a/frontend/webapp/public/icons/index.ts b/frontend/webapp/public/icons/index.ts
new file mode 100644
index 000000000..d0b932366
--- /dev/null
+++ b/frontend/webapp/public/icons/index.ts
@@ -0,0 +1 @@
+export * from './common';
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
new file mode 100644
index 000000000..9ef4562a9
--- /dev/null
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -0,0 +1,80 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import styled, { css } from 'styled-components';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  isDisabled?: boolean;
+}
+
+const variantStyles = {
+  primary: css`
+    border-radius: 32px;
+    border: 1px solid rgba(249, 249, 249, 0.24);
+    background: rgba(249, 249, 249, 0.8);
+    height: 36px;
+    padding: 8px 14px 8px 16px;
+
+    &:hover {
+      background: rgba(249, 249, 249, 0.6);
+    }
+    &:active {
+      background: rgba(249, 249, 249, 0.5);
+    }
+  `,
+  secondary: css`
+    background: #151515;
+    border: 1px solid rgba(249, 249, 249, 0.24);
+    border-radius: 32px;
+    &:hover {
+      background: #151515bc;
+    }
+    &:active {
+      background: #1515158d;
+    }
+  `,
+  tertiary: css`
+    background-color: transparent;
+    border-radius: 32px;
+    border: 2px solid rgba(249, 249, 249, 0.8);
+    &:hover {
+      background-color: #eaeaea;
+    }
+    &:active {
+      background-color: #ccc;
+    }
+  `,
+};
+
+const StyledButton = styled.button<ButtonProps>`
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  ${({ variant }) => variant && variantStyles[variant]}
+  ${({ isDisabled }) =>
+    isDisabled &&
+    css`
+      background-color: #eaeaea;
+      color: #888;
+      cursor: not-allowed;
+      &:hover,
+      &:active {
+        background-color: #eaeaea;
+      }
+    `}
+`;
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  isDisabled = false,
+  ...props
+}) => {
+  return (
+    <StyledButton variant={variant} disabled={isDisabled} {...props}>
+      {children}
+    </StyledButton>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 1a9ac1460..c912adb8d 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1 +1,2 @@
 export * from './text';
+export * from './button';

From 071406d15dae38802adf39af5734ddc558f77dae Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 17:35:48 +0300
Subject: [PATCH 101/374] chore: setup side menu

---
 frontend/webapp/app/setup/layout.tsx          |  44 ++++++-
 frontend/webapp/components/setup/index.tsx    |   1 +
 .../webapp/components/setup/menu/index.tsx    | 124 ++++++++++++++++++
 frontend/webapp/public/icons/common/check.svg |   3 +
 .../reuseable-components/text/index.tsx       |  21 ++-
 frontend/webapp/styles/theme.ts               |   1 +
 6 files changed, 187 insertions(+), 7 deletions(-)
 create mode 100644 frontend/webapp/components/setup/menu/index.tsx
 create mode 100644 frontend/webapp/public/icons/common/check.svg

diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index 2aaf15e78..4462ddad2 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -1,6 +1,31 @@
 'use client';
 import React from 'react';
-import { SetupHeader } from '@/components';
+import styled from 'styled-components';
+import { SetupHeader, SideMenu } from '@/components';
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const SideMenuWrapper = styled.div`
+  position: absolute;
+  left: 24px;
+  top: 144px;
+`;
+
+const MainContent = styled.div`
+  display: flex;
+  max-width: 1440px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.secondary};
+  flex-direction: column;
+  align-items: center;
+`;
 
 export default function SetupLayout({
   children,
@@ -8,9 +33,18 @@ export default function SetupLayout({
   children: React.ReactNode;
 }) {
   return (
-    <>
-      <SetupHeader />
-      {children}
-    </>
+    <LayoutContainer>
+      <div style={{ width: '100vw' }}>
+        <SetupHeader />
+      </div>
+      <SideMenuWrapper>
+        <SideMenu />
+      </SideMenuWrapper>
+      <MainContent>
+        <SideMenu />
+
+        {children}
+      </MainContent>
+    </LayoutContainer>
   );
 }
diff --git a/frontend/webapp/components/setup/index.tsx b/frontend/webapp/components/setup/index.tsx
index e2f355a8b..b45b6ee9c 100644
--- a/frontend/webapp/components/setup/index.tsx
+++ b/frontend/webapp/components/setup/index.tsx
@@ -6,3 +6,4 @@ export { ConnectionsIcons } from './connection/connections_icons/connections_ico
 export { CreateConnectionForm } from './connection/create.connection.form/create.connection.form';
 export { QuickHelp } from './connection/quick.help/quick.help';
 export * from './headers';
+export * from './menu';
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
new file mode 100644
index 000000000..aa217815e
--- /dev/null
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -0,0 +1,124 @@
+import { Text } from '@/reuseable-components';
+import Image from 'next/image';
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface StepProps {
+  title: string;
+  subtitle?: string;
+  state: 'finish' | 'active' | 'disabled';
+  stepNumber: number;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+  display: flex;
+  gap: 16px;
+  padding: 10px 0;
+  cursor: ${({ state }) => (state === 'disabled' ? 'not-allowed' : 'pointer')};
+  opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
+
+  transition: opacity 0.3s;
+
+  ${({ state }) => state === 'active' && css``}
+
+  & + & {
+    margin-top: 10px;
+  }
+`;
+
+const IconWrapper = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+  margin-right: 10px;
+  border-radius: 32px;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #f9f9f9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ state }) =>
+    state === 'finish'
+      ? css`
+          opacity: 0.8;
+        `
+      : state === 'disabled' &&
+        css`
+          border: 1px dashed rgba(249, 249, 249, 0.4);
+        `}
+`;
+
+const StepContent = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const StepTitle = styled(Text)`
+  font-size: 16px;
+  font-weight: bold;
+`;
+
+const StepSubtitle = styled(Text)``;
+
+const SideMenu: React.FC = () => {
+  const steps: StepProps[] = [
+    {
+      title: 'INSTALLATION',
+      subtitle: 'Success',
+      state: 'finish',
+      stepNumber: 1,
+    },
+    {
+      title: 'SOURCES',
+      state: 'active',
+      stepNumber: 2,
+    },
+    {
+      title: 'DESTINATIONS',
+      state: 'disabled',
+      stepNumber: 3,
+    },
+  ];
+
+  return (
+    <Container>
+      {steps.map((step, index) => (
+        <Step key={index} state={step.state}>
+          <IconWrapper state={step.state}>
+            {step.state === 'finish' && (
+              <Image
+                src="/icons/common/check.svg"
+                width={20}
+                height={20}
+                alt={''}
+              />
+            )}
+            {step.state === 'active' && (
+              <Text size={12}>{step.stepNumber}</Text>
+            )}
+            {step.state === 'disabled' && (
+              <Text size={12}>{step.stepNumber}</Text>
+            )}
+          </IconWrapper>
+          <StepContent>
+            <StepTitle>{step.title}</StepTitle>
+            {step.subtitle && (
+              <StepSubtitle size={10} weight={300} family={'secondary'}>
+                {step.subtitle}
+              </StepSubtitle>
+            )}
+          </StepContent>
+        </Step>
+      ))}
+    </Container>
+  );
+};
+
+export { SideMenu };
diff --git a/frontend/webapp/public/icons/common/check.svg b/frontend/webapp/public/icons/common/check.svg
new file mode 100644
index 000000000..6ee9b2be2
--- /dev/null
+++ b/frontend/webapp/public/icons/common/check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+<path d="M3.6665 9.24833L6.67773 12.7315L6.94495 12.2642C8.37771 9.75889 10.3605 7.61153 12.7439 5.98403L13.3332 5.58167" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 0cc8c08c6..75fbc78b6 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -7,6 +7,7 @@ interface TextProps {
   size?: number;
   weight?: number;
   align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
 }
 
 const TextWrapper = styled.span<{
@@ -14,13 +15,22 @@ const TextWrapper = styled.span<{
   size: number;
   weight: number;
   align: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
 }>`
   color: ${({ color, theme }) =>
     color || console.log({ theme }) || theme.colors.text};
   font-size: ${({ size }) => size}px;
   font-weight: ${({ weight }) => weight};
   text-align: ${({ align }) => align};
-  font-family: ${({ theme }) => theme.font_family.primary};
+  font-family: ${({ theme, family }) => {
+    if (family === 'primary') {
+      return theme.font_family.primary;
+    }
+    if (family === 'secondary') {
+      return theme.font_family.secondary;
+    }
+    return theme.font_family.primary;
+  }};
 `;
 
 const Text: React.FC<TextProps> = ({
@@ -29,9 +39,16 @@ const Text: React.FC<TextProps> = ({
   size = 16,
   weight = 400,
   align = 'left',
+  family = 'primary',
 }) => {
   return (
-    <TextWrapper color={color} size={size} weight={weight} align={align}>
+    <TextWrapper
+      family={family}
+      color={color}
+      size={size}
+      weight={weight}
+      align={align}
+    >
       {children}
     </TextWrapper>
   );
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 9b44c56c1..6789e96cf 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -19,6 +19,7 @@ const text = {
 
 const font_family = {
   primary: 'Kode Mono, sans-serif',
+  secondary: 'Inter, sans-serif',
 };
 
 // Define the theme interface

From 09c9c241059968ccd9d0dab1b04a460e47caa697 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 24 Jul 2024 17:40:32 +0300
Subject: [PATCH 102/374] chore: fixed pr comments" "

---
 frontend/webapp/app/setup/layout.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index 4462ddad2..f3afba447 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -18,6 +18,10 @@ const SideMenuWrapper = styled.div`
   top: 144px;
 `;
 
+const HeaderWrapper = styled.div`
+  width: 100vw;
+`;
+
 const MainContent = styled.div`
   display: flex;
   max-width: 1440px;
@@ -34,9 +38,9 @@ export default function SetupLayout({
 }) {
   return (
     <LayoutContainer>
-      <div style={{ width: '100vw' }}>
+      <HeaderWrapper>
         <SetupHeader />
-      </div>
+      </HeaderWrapper>
       <SideMenuWrapper>
         <SideMenu />
       </SideMenuWrapper>

From c2db8648b5f20b0819135556bfed6628e60203b3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 25 Jul 2024 11:29:10 +0300
Subject: [PATCH 103/374] chore: init setup sources components

---
 .../webapp/app/setup/choose-sources/page.tsx  |  17 +-
 frontend/webapp/app/setup/layout.tsx          |   7 +-
 .../webapp/components/setup/menu/index.tsx    |   4 +-
 frontend/webapp/public/icons/common/info.svg  |   3 +
 .../webapp/public/icons/common/search.svg     |   3 +
 frontend/webapp/reuseable-components/index.ts |   2 +
 .../reuseable-components/input/index.tsx      | 184 ++++++++++++++++++
 .../section-title/index.tsx                   |  57 ++++++
 .../reuseable-components/text/index.tsx       |   8 +-
 .../reuseable-components/tooltip/index.tsx    |  69 +++++++
 frontend/webapp/styles/theme.ts               |   4 +-
 11 files changed, 345 insertions(+), 13 deletions(-)
 create mode 100644 frontend/webapp/public/icons/common/info.svg
 create mode 100644 frontend/webapp/public/icons/common/search.svg
 create mode 100644 frontend/webapp/reuseable-components/input/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/section-title/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/tooltip/index.tsx

diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index 933dfb802..cca8a2243 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 
 import { useSuspenseQuery, gql } from '@apollo/client';
+import { Input, SectionTitle } from '@/reuseable-components';
 
 const GET_COMPUTE_PLATFORM = gql`
   query GetComputePlatform($cpId: ID!) {
@@ -41,5 +42,19 @@ export default function ChooseSourcesPage() {
     variables: { cpId: '1' },
   });
 
-  return <></>;
+  return (
+    <div style={{ width: 800 }}>
+      <SectionTitle
+        title="Choose sources"
+        description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
+      />
+      <Input
+        placeholder="Search for sources"
+        icon={'/icons/common/search.svg'}
+        errorMessage={'error?.message'}
+        title={'sdfds'}
+        tooltip={'sdfdsf'}
+      />
+    </div>
+  );
 }
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index f3afba447..d03aa3117 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -26,7 +26,6 @@ const MainContent = styled.div`
   display: flex;
   max-width: 1440px;
   width: 100%;
-  background-color: ${({ theme }) => theme.colors.secondary};
   flex-direction: column;
   align-items: center;
 `;
@@ -44,11 +43,7 @@ export default function SetupLayout({
       <SideMenuWrapper>
         <SideMenu />
       </SideMenuWrapper>
-      <MainContent>
-        <SideMenu />
-
-        {children}
-      </MainContent>
+      <MainContent>{children}</MainContent>
     </LayoutContainer>
   );
 }
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index aa217815e..08e1716f5 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -108,9 +108,9 @@ const SideMenu: React.FC = () => {
             )}
           </IconWrapper>
           <StepContent>
-            <StepTitle>{step.title}</StepTitle>
+            <StepTitle family={'secondary'}>{step.title}</StepTitle>
             {step.subtitle && (
-              <StepSubtitle size={10} weight={300} family={'secondary'}>
+              <StepSubtitle size={10} weight={300}>
                 {step.subtitle}
               </StepSubtitle>
             )}
diff --git a/frontend/webapp/public/icons/common/info.svg b/frontend/webapp/public/icons/common/info.svg
new file mode 100644
index 000000000..02127d33b
--- /dev/null
+++ b/frontend/webapp/public/icons/common/info.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M8 8.91498V11.5816M8 6.66498V6.66423M14 8.91504C14 12.2287 11.3137 14.915 8 14.915C4.68629 14.915 2 12.2287 2 8.91504C2 5.60133 4.68629 2.91504 8 2.91504C11.3137 2.91504 14 5.60133 14 8.91504Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/search.svg b/frontend/webapp/public/icons/common/search.svg
new file mode 100644
index 000000000..a278da695
--- /dev/null
+++ b/frontend/webapp/public/icons/common/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+  <path d="M12.25 13.165L10.2144 11.1294M10.2144 11.1294C11.1117 10.2322 11.6667 8.99258 11.6667 7.62337C11.6667 4.88496 9.44674 2.66504 6.70833 2.66504C3.96992 2.66504 1.75 4.88496 1.75 7.62337C1.75 10.3618 3.96992 12.5817 6.70833 12.5817C8.07754 12.5817 9.31712 12.0267 10.2144 11.1294Z" stroke="#F9F9F9" stroke-opacity="0.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index c912adb8d..b95b1445a 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1,2 +1,4 @@
 export * from './text';
 export * from './button';
+export * from './section-title';
+export * from './input';
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
new file mode 100644
index 000000000..a1b04c5bc
--- /dev/null
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -0,0 +1,184 @@
+import Image from 'next/image';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon?: string;
+  buttonLabel?: string;
+  onButtonClick?: () => void;
+  errorMessage?: string;
+  title?: string;
+  tooltip?: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+
+const InputWrapper = styled.div<{
+  isDisabled?: boolean;
+  hasError?: boolean;
+  isActive?: boolean;
+}>`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  gap: 12px;
+  padding: 0 12px;
+  transition: border-color 0.3s;
+  border-radius: 32px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+  ${({ isDisabled }) =>
+    isDisabled &&
+    css`
+      background-color: #555;
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+
+  ${({ hasError }) =>
+    hasError &&
+    css`
+      border-color: red;
+    `}
+
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      border-color: ${({ theme }) => theme.colors.secondary};
+    `}
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const StyledInput = styled.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 14px;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text};
+    font-family: ${({ theme }) => theme.font_family.primary};
+    opacity: 0.4;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px; /* 157.143% */
+  }
+
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Button = styled.button`
+  background-color: ${({ theme }) => theme.colors.primary};
+  border: none;
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  margin-left: 8px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.secondary};
+  }
+
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const ErrorWrapper = styled.div`
+  position: relative;
+`;
+
+const ErrorMessage = styled(Text)`
+  color: red;
+  font-size: 12px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+`;
+
+const Title = styled(Text)`
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 4px;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const Input: React.FC<InputProps> = ({
+  icon,
+  buttonLabel,
+  onButtonClick,
+  errorMessage,
+  title,
+  tooltip,
+  ...props
+}) => {
+  return (
+    <Container>
+      <Tooltip text={tooltip || 'sddfsdf'}>
+        <HeaderWrapper>
+          <Title>{title}</Title>
+          {tooltip && (
+            <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
+          )}
+        </HeaderWrapper>
+      </Tooltip>
+
+      <InputWrapper
+        isDisabled={props.disabled}
+        hasError={!!errorMessage}
+        isActive={!!props.autoFocus}
+      >
+        {icon && (
+          <IconWrapper>
+            <Image src={icon} alt="" width={14} height={14} />
+          </IconWrapper>
+        )}
+        <StyledInput {...props} />
+        {buttonLabel && onButtonClick && (
+          <Button onClick={onButtonClick} disabled={props.disabled}>
+            {buttonLabel}
+          </Button>
+        )}
+      </InputWrapper>
+      {errorMessage && (
+        <ErrorWrapper>
+          <ErrorMessage>{errorMessage}</ErrorMessage>
+        </ErrorWrapper>
+      )}
+    </Container>
+  );
+};
+
+export { Input };
diff --git a/frontend/webapp/reuseable-components/section-title/index.tsx b/frontend/webapp/reuseable-components/section-title/index.tsx
new file mode 100644
index 000000000..01b9d2e08
--- /dev/null
+++ b/frontend/webapp/reuseable-components/section-title/index.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Text } from '../text';
+import { Button } from '../button';
+import styled from 'styled-components';
+
+interface SectionTitleProps {
+  title: string;
+  description: string;
+  buttonText?: string;
+  onButtonClick?: () => void;
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const Title = styled(Text)``;
+
+const Description = styled(Text)``;
+
+const ActionButton = styled(Button)``;
+
+const SectionTitle: React.FC<SectionTitleProps> = ({
+  title,
+  description,
+  buttonText,
+  onButtonClick,
+}) => {
+  return (
+    <Container>
+      <TitleContainer>
+        <Title weight={300} size={20}>
+          {title}
+        </Title>
+        <Description weight={200} opacity={0.8} size={14}>
+          {description}
+        </Description>
+      </TitleContainer>
+      {buttonText && onButtonClick && (
+        <ActionButton variant={'secondary'} onClick={onButtonClick}>
+          <Text size={14}>{buttonText}</Text>
+        </ActionButton>
+      )}
+    </Container>
+  );
+};
+
+export { SectionTitle };
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 75fbc78b6..71e8afc9d 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -8,6 +8,7 @@ interface TextProps {
   weight?: number;
   align?: 'left' | 'center' | 'right';
   family?: 'primary' | 'secondary';
+  opacity?: number;
 }
 
 const TextWrapper = styled.span<{
@@ -16,12 +17,13 @@ const TextWrapper = styled.span<{
   weight: number;
   align: 'left' | 'center' | 'right';
   family?: 'primary' | 'secondary';
+  opacity: number;
 }>`
-  color: ${({ color, theme }) =>
-    color || console.log({ theme }) || theme.colors.text};
+  color: ${({ color, theme }) => color || theme.colors.text};
   font-size: ${({ size }) => size}px;
   font-weight: ${({ weight }) => weight};
   text-align: ${({ align }) => align};
+  opacity: ${({ opacity }) => opacity};
   font-family: ${({ theme, family }) => {
     if (family === 'primary') {
       return theme.font_family.primary;
@@ -40,6 +42,7 @@ const Text: React.FC<TextProps> = ({
   weight = 400,
   align = 'left',
   family = 'primary',
+  opacity = 1,
 }) => {
   return (
     <TextWrapper
@@ -48,6 +51,7 @@ const Text: React.FC<TextProps> = ({
       size={size}
       weight={weight}
       align={align}
+      opacity={opacity}
     >
       {children}
     </TextWrapper>
diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx
new file mode 100644
index 000000000..0a88f7358
--- /dev/null
+++ b/frontend/webapp/reuseable-components/tooltip/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../text';
+
+interface TooltipProps {
+  text: string;
+  children: React.ReactNode;
+}
+
+const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+  cursor: pointer;
+`;
+
+const TooltipText = styled.div`
+  visibility: hidden;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  background: #1a1a1a;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%; /* Position the tooltip above the text */
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.3s;
+
+  /* Tooltip arrow */
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 99999;
+    top: 100%; /* At the bottom of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #1a1a1a transparent transparent transparent;
+  }
+`;
+
+const TooltipWrapper = styled.div`
+  &:hover ${TooltipText} {
+    visibility: visible;
+    opacity: 1;
+    z-index: 999;
+  }
+`;
+
+const Tooltip: React.FC<TooltipProps> = ({ text, children }) => {
+  return (
+    <TooltipContainer>
+      <TooltipWrapper>
+        {children}
+        <TooltipText>
+          <Text>{text}</Text>
+        </TooltipText>
+      </TooltipWrapper>
+    </TooltipContainer>
+  );
+};
+
+export { Tooltip };
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 6789e96cf..5da9b382d 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -18,8 +18,8 @@ const text = {
 };
 
 const font_family = {
-  primary: 'Kode Mono, sans-serif',
-  secondary: 'Inter, sans-serif',
+  primary: 'Inter, sans-serif',
+  secondary: 'Kode Mono, sans-serif',
 };
 
 // Define the theme interface

From e4448247944205f63b1cf363f84462e7e62519cd Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 25 Jul 2024 14:06:55 +0300
Subject: [PATCH 104/374] chore: init tooltip component

---
 .../webapp/app/setup/choose-sources/page.tsx  |  3 ---
 .../reuseable-components/input/index.tsx      | 24 ++++++++++++-------
 .../reuseable-components/tooltip/index.tsx    | 24 ++++++++++++-------
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index cca8a2243..57ee736ad 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -51,9 +51,6 @@ export default function ChooseSourcesPage() {
       <Input
         placeholder="Search for sources"
         icon={'/icons/common/search.svg'}
-        errorMessage={'error?.message'}
-        title={'sdfds'}
-        tooltip={'sdfdsf'}
       />
     </div>
   );
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index a1b04c5bc..b52900018 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -133,6 +133,7 @@ const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
+  margin-bottom: 4px;
 `;
 
 const Input: React.FC<InputProps> = ({
@@ -146,14 +147,21 @@ const Input: React.FC<InputProps> = ({
 }) => {
   return (
     <Container>
-      <Tooltip text={tooltip || 'sddfsdf'}>
-        <HeaderWrapper>
-          <Title>{title}</Title>
-          {tooltip && (
-            <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
-          )}
-        </HeaderWrapper>
-      </Tooltip>
+      {title && (
+        <Tooltip text={tooltip || ''}>
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+              />
+            )}
+          </HeaderWrapper>
+        </Tooltip>
+      )}
 
       <InputWrapper
         isDisabled={props.disabled}
diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx
index 0a88f7358..111e8bcb7 100644
--- a/frontend/webapp/reuseable-components/tooltip/index.tsx
+++ b/frontend/webapp/reuseable-components/tooltip/index.tsx
@@ -45,22 +45,30 @@ const TooltipText = styled.div`
   }
 `;
 
-const TooltipWrapper = styled.div`
+const TooltipWrapper = styled.div<{ hasText: boolean }>`
   &:hover ${TooltipText} {
-    visibility: visible;
-    opacity: 1;
-    z-index: 999;
+    ${({ hasText }) =>
+      hasText &&
+      `
+      visibility: visible;
+      opacity: 1;
+      z-index: 999;
+    `}
   }
 `;
 
 const Tooltip: React.FC<TooltipProps> = ({ text, children }) => {
+  const hasText = !!text;
+
   return (
     <TooltipContainer>
-      <TooltipWrapper>
+      <TooltipWrapper hasText={hasText}>
         {children}
-        <TooltipText>
-          <Text>{text}</Text>
-        </TooltipText>
+        {hasText && (
+          <TooltipText>
+            <Text>{text}</Text>
+          </TooltipText>
+        )}
       </TooltipWrapper>
     </TooltipContainer>
   );

From 4632da30f91d03ccfd34df017cc2a4c0fe3d2c42 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 25 Jul 2024 14:59:30 +0300
Subject: [PATCH 105/374] chore: added dropdoen component

---
 .../webapp/app/setup/choose-sources/page.tsx  |  32 ++-
 .../components/setup/headers/header/index.tsx |   2 +-
 .../public/icons/common/extend-arrow.svg      |   5 +
 .../reuseable-components/divider/index.tsx    |  36 ++++
 .../reuseable-components/dropdown/index.tsx   | 187 ++++++++++++++++++
 frontend/webapp/reuseable-components/index.ts |   3 +
 .../reuseable-components/input/index.tsx      |   3 +-
 frontend/webapp/styles/theme.ts               |   1 +
 8 files changed, 260 insertions(+), 9 deletions(-)
 create mode 100644 frontend/webapp/public/icons/common/extend-arrow.svg
 create mode 100644 frontend/webapp/reuseable-components/divider/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/dropdown/index.tsx

diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index 57ee736ad..ca6425492 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -1,8 +1,8 @@
 'use client';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useSuspenseQuery, gql } from '@apollo/client';
-import { Input, SectionTitle } from '@/reuseable-components';
+import { Dropdown, Input, SectionTitle } from '@/reuseable-components';
 
 const GET_COMPUTE_PLATFORM = gql`
   query GetComputePlatform($cpId: ID!) {
@@ -42,16 +42,34 @@ export default function ChooseSourcesPage() {
     variables: { cpId: '1' },
   });
 
+  const [selectedOption, setSelectedOption] = useState('All types');
+  const options = [
+    'All types',
+    'Existing destinations',
+    'Self hosted',
+    'Managed',
+  ];
+
   return (
-    <div style={{ width: 800 }}>
+    <div style={{ width: '40vw' }}>
       <SectionTitle
         title="Choose sources"
         description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
       />
-      <Input
-        placeholder="Search for sources"
-        icon={'/icons/common/search.svg'}
-      />
+      <div style={{ display: 'flex', gap: 8 }}>
+        <Input
+          placeholder="Search for sources"
+          icon={'/icons/common/search.svg'}
+        />
+
+        <Dropdown
+          options={options}
+          selectedOption={selectedOption}
+          onSelect={setSelectedOption}
+          // title="Select Type"
+          tooltip="Choose a type from the dropdown"
+        />
+      </div>
     </div>
   );
 }
diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
index 2d6943029..b1bfa77ec 100644
--- a/frontend/webapp/components/setup/headers/header/index.tsx
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -50,7 +50,7 @@ export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
           height={20}
         />
       </Logo>
-      <Title>START WITH ODIGOS</Title>
+      <Title family={'secondary'}>START WITH ODIGOS</Title>
       <NavigationButtons>
         <HeaderButton variant="secondary" onClick={onBack}>
           <Image
diff --git a/frontend/webapp/public/icons/common/extend-arrow.svg b/frontend/webapp/public/icons/common/extend-arrow.svg
new file mode 100644
index 000000000..9333da395
--- /dev/null
+++ b/frontend/webapp/public/icons/common/extend-arrow.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+  <g opacity="0.8">
+    <path d="M4 5.06934C4.53103 5.80028 5.15354 6.45498 5.85106 7.01644C5.93869 7.08697 6.06131 7.08697 6.14894 7.01644C6.84646 6.45498 7.46897 5.80028 8 5.06934" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/divider/index.tsx b/frontend/webapp/reuseable-components/divider/index.tsx
new file mode 100644
index 000000000..5ba268e48
--- /dev/null
+++ b/frontend/webapp/reuseable-components/divider/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface DividerProps {
+  thickness?: number;
+  color?: string;
+  margin?: string;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+const StyledDivider = styled.div<DividerProps>`
+  width: ${({ orientation, thickness }) =>
+    orientation === 'vertical' ? `${thickness}px` : '100%'};
+  height: ${({ orientation, thickness }) =>
+    orientation === 'horizontal' ? `${thickness}px` : '100%'};
+  background-color: ${({ color, theme }) => color || theme.colors.border};
+  margin: ${({ margin }) => margin || '8px 0'};
+`;
+
+const Divider: React.FC<DividerProps> = ({
+  thickness = 1,
+  color,
+  margin,
+  orientation = 'horizontal',
+}) => {
+  return (
+    <StyledDivider
+      thickness={thickness}
+      color={color}
+      margin={margin}
+      orientation={orientation}
+    />
+  );
+};
+
+export { Divider };
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
new file mode 100644
index 000000000..a61e47386
--- /dev/null
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -0,0 +1,187 @@
+import React, { useState, useRef } from 'react';
+import { Input } from '../input';
+import styled, { css } from 'styled-components';
+import { Tooltip } from '../tooltip';
+import Image from 'next/image';
+import { Text } from '../text';
+import { Divider } from '../divider';
+
+interface DropdownProps {
+  options: string[];
+  selectedOption: string;
+  onSelect: (option: string) => void;
+  title?: string;
+  tooltip?: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+
+const Title = styled(Text)``;
+
+const DropdownHeader = styled.div<{ isOpen: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: 32px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: 32px;
+  ${({ isOpen, theme }) =>
+    isOpen &&
+    css`
+      border: 1px solid rgba(249, 249, 249, 0.48);
+      background: rgba(249, 249, 249, 0.08);
+    `};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const DropdownListContainer = styled.div`
+  position: absolute;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  background-color: rgba(249, 249, 249, 0.08);
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: 32px;
+  margin-top: 4px;
+  z-index: 10;
+`;
+
+const SearchInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const DropdownItem = styled.div<{ isSelected: boolean }>`
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 32px;
+  &:hover {
+    background: rgba(68, 74, 217, 0.24);
+  }
+  ${({ isSelected, theme }) =>
+    isSelected &&
+    css`
+      background: rgba(68, 74, 217, 0.24);
+    `}
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const OpenDropdownIcon = styled(Image)<{ isOpen: boolean }>`
+  transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
+`;
+
+const Dropdown: React.FC<DropdownProps> = ({
+  options,
+  selectedOption,
+  onSelect,
+  title,
+  tooltip,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const filteredOptions = options.filter((option) =>
+    option.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleSelect = (option: string) => {
+    onSelect(option);
+    setIsOpen(false);
+  };
+
+  return (
+    <Container ref={dropdownRef}>
+      {title && (
+        <Tooltip text={tooltip || ''}>
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+              />
+            )}
+          </HeaderWrapper>
+        </Tooltip>
+      )}
+      <DropdownHeader isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
+        <Text size={14}>{selectedOption}</Text>
+
+        <OpenDropdownIcon
+          src="/icons/common/extend-arrow.svg"
+          alt="open-dropdown"
+          width={12}
+          height={12}
+          isOpen={isOpen}
+        />
+      </DropdownHeader>
+      {isOpen && (
+        <DropdownListContainer>
+          <SearchInputContainer>
+            <Input
+              placeholder="Search..."
+              icon={'/icons/common/search.svg'}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Divider thickness={1} margin="8px 0 0 0" />
+          </SearchInputContainer>
+          {filteredOptions.map((option) => (
+            <DropdownItem
+              key={option}
+              isSelected={option === selectedOption}
+              onClick={() => handleSelect(option)}
+            >
+              <Text size={14}>{option}</Text>
+
+              {option === selectedOption && (
+                <Image
+                  src="/icons/common/check.svg"
+                  alt=""
+                  width={16}
+                  height={16}
+                />
+              )}
+            </DropdownItem>
+          ))}
+        </DropdownListContainer>
+      )}
+    </Container>
+  );
+};
+
+export { Dropdown };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index b95b1445a..2740c05e6 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -2,3 +2,6 @@ export * from './text';
 export * from './button';
 export * from './section-title';
 export * from './input';
+export * from './tooltip';
+export * from './dropdown';
+export * from './divider';
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index b52900018..9b62c8bc1 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -30,7 +30,7 @@ const InputWrapper = styled.div<{
   align-items: center;
   height: 36px;
   gap: 12px;
-  padding: 0 12px;
+
   transition: border-color 0.3s;
   border-radius: 32px;
   border: 1px solid rgba(249, 249, 249, 0.24);
@@ -89,6 +89,7 @@ const StyledInput = styled.input`
 const IconWrapper = styled.div`
   display: flex;
   align-items: center;
+  margin-left: 12px;
 `;
 
 const Button = styled.button`
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 5da9b382d..ce5ce7c11 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -6,6 +6,7 @@ const colors = {
   secondary: '#F9F9F9',
   dark_grey: '#151515',
   text: '#F9F9F9',
+  border: 'rgba(249, 249, 249, 0.08)',
 };
 
 const text = {

From f12cde690ec028de655c368787624f6fde7135a5 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 25 Jul 2024 15:38:05 +0300
Subject: [PATCH 106/374] chore: counter component

---
 .../webapp/app/setup/choose-sources/page.tsx  | 16 ++++++--
 .../reuseable-components/counter/index.tsx    | 39 +++++++++++++++++++
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../reuseable-components/text/index.tsx       |  2 +-
 4 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/counter/index.tsx

diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index ca6425492..8f791b6a2 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -2,7 +2,13 @@
 import React, { useState } from 'react';
 
 import { useSuspenseQuery, gql } from '@apollo/client';
-import { Dropdown, Input, SectionTitle } from '@/reuseable-components';
+import {
+  Counter,
+  Divider,
+  Dropdown,
+  Input,
+  SectionTitle,
+} from '@/reuseable-components';
 
 const GET_COMPUTE_PLATFORM = gql`
   query GetComputePlatform($cpId: ID!) {
@@ -56,7 +62,7 @@ export default function ChooseSourcesPage() {
         title="Choose sources"
         description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
       />
-      <div style={{ display: 'flex', gap: 8 }}>
+      <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
         <Input
           placeholder="Search for sources"
           icon={'/icons/common/search.svg'}
@@ -66,10 +72,12 @@ export default function ChooseSourcesPage() {
           options={options}
           selectedOption={selectedOption}
           onSelect={setSelectedOption}
-          // title="Select Type"
-          tooltip="Choose a type from the dropdown"
         />
       </div>
+      <Divider thickness={1} margin="24px 0 16px" />
+      <div style={{ display: 'flex', gap: 8 }}>
+        <Counter value={0} title="Selected apps" />
+      </div>
     </div>
   );
 }
diff --git a/frontend/webapp/reuseable-components/counter/index.tsx b/frontend/webapp/reuseable-components/counter/index.tsx
new file mode 100644
index 000000000..b9b242e63
--- /dev/null
+++ b/frontend/webapp/reuseable-components/counter/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../text';
+
+interface CounterProps {
+  value: number;
+  title: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const ValueContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 32px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+`;
+
+const Counter: React.FC<CounterProps> = ({ value, title }) => {
+  return (
+    <Container>
+      <Text>{title}</Text>
+      <ValueContainer>
+        <Text size={12} opacity={0.8} family={'secondary'}>
+          {value}
+        </Text>
+      </ValueContainer>
+    </Container>
+  );
+};
+
+export { Counter };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 2740c05e6..48b6b8186 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -5,3 +5,4 @@ export * from './input';
 export * from './tooltip';
 export * from './dropdown';
 export * from './divider';
+export * from './counter';
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 71e8afc9d..7044c019e 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -39,7 +39,7 @@ const Text: React.FC<TextProps> = ({
   children,
   color,
   size = 16,
-  weight = 400,
+  weight = 300,
   align = 'left',
   family = 'primary',
   opacity = 1,

From 154fc7d312bda4a1da447cb5fba50a57756853b7 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 25 Jul 2024 16:19:05 +0300
Subject: [PATCH 107/374] chore: wip

---
 .../webapp/app/setup/choose-sources/page.tsx  | 27 +++++-
 .../reuseable-components/checkbox/index.tsx   | 82 +++++++++++++++++++
 frontend/webapp/reuseable-components/index.ts |  2 +
 .../reuseable-components/toggle/index.tsx     | 80 ++++++++++++++++++
 4 files changed, 189 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/checkbox/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/toggle/index.tsx

diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index 8f791b6a2..902358931 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -3,11 +3,13 @@ import React, { useState } from 'react';
 
 import { useSuspenseQuery, gql } from '@apollo/client';
 import {
+  Checkbox,
   Counter,
   Divider,
   Dropdown,
   Input,
   SectionTitle,
+  Toggle,
 } from '@/reuseable-components';
 
 const GET_COMPUTE_PLATFORM = gql`
@@ -56,8 +58,12 @@ export default function ChooseSourcesPage() {
     'Managed',
   ];
 
+  const handleCheckboxChange = (value: boolean) => {
+    console.log('Checkbox is now', value);
+  };
+
   return (
-    <div style={{ width: '40vw' }}>
+    <div style={{ width: 756 }}>
       <SectionTitle
         title="Choose sources"
         description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
@@ -75,9 +81,26 @@ export default function ChooseSourcesPage() {
         />
       </div>
       <Divider thickness={1} margin="24px 0 16px" />
-      <div style={{ display: 'flex', gap: 8 }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
         <Counter value={0} title="Selected apps" />
+        <div style={{ display: 'flex', gap: 8 }}>
+          <Toggle title="Auto-instrument all apps" />
+          <Toggle title="Show selected only" />
+        </div>
+        <Checkbox
+          title="Future apps"
+          tooltip="Automatically instrument all future apps"
+          initialValue={false}
+          onChange={handleCheckboxChange}
+        />
       </div>
+      <Divider thickness={1} margin="24px 0 16px" />
     </div>
   );
 }
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
new file mode 100644
index 000000000..956fbb6ec
--- /dev/null
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Tooltip } from '../tooltip';
+import Image from 'next/image';
+import { Text } from '../text';
+
+interface CheckboxProps {
+  title: string;
+  tooltip?: string;
+  initialValue?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+const Container = styled.div<{ disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+`;
+
+const CheckboxWrapper = styled.div<{ isChecked: boolean; disabled?: boolean }>`
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  border: 1px dashed rgba(249, 249, 249, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ isChecked, theme }) =>
+    isChecked ? theme.colors.primary : 'transparent'};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+`;
+
+const Title = styled.span`
+  font-size: 16px;
+  color: #fff;
+`;
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  title,
+  tooltip,
+  initialValue = false,
+  onChange,
+  disabled,
+}) => {
+  const [isChecked, setIsChecked] = useState(initialValue);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      const newValue = !isChecked;
+      setIsChecked(newValue);
+      if (onChange) {
+        onChange(newValue);
+      }
+    }
+  };
+
+  return (
+    <Tooltip text={tooltip || ''}>
+      <Container disabled={disabled} onClick={handleToggle}>
+        <CheckboxWrapper isChecked={isChecked} disabled={disabled}>
+          {isChecked && (
+            <Image
+              src="/icons/common/check.svg"
+              alt=""
+              width={12}
+              height={12}
+            />
+          )}
+        </CheckboxWrapper>
+        <Text size={14}>{title}</Text>
+        {tooltip && (
+          <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
+        )}
+      </Container>
+    </Tooltip>
+  );
+};
+
+export { Checkbox };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 48b6b8186..4090df8fb 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -6,3 +6,5 @@ export * from './tooltip';
 export * from './dropdown';
 export * from './divider';
 export * from './counter';
+export * from './toggle';
+export * from './checkbox';
diff --git a/frontend/webapp/reuseable-components/toggle/index.tsx b/frontend/webapp/reuseable-components/toggle/index.tsx
new file mode 100644
index 000000000..e3377c4a0
--- /dev/null
+++ b/frontend/webapp/reuseable-components/toggle/index.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import Image from 'next/image';
+import styled, { css } from 'styled-components';
+import { Tooltip } from '../tooltip';
+import { Text } from '../text';
+
+interface ToggleProps {
+  title: string;
+  tooltip?: string;
+  initialValue?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+const Container = styled.div<{ disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+`;
+
+const ToggleSwitch = styled.div<{ isActive: boolean; disabled?: boolean }>`
+  width: 24px;
+  height: 12px;
+  border: 1px dashed #aaa;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  background-color: ${({ isActive, theme }) =>
+    isActive ? theme.colors.primary : 'transparent'};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ isActive }) => (isActive ? 1 : 0.4)};
+  &::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.colors.secondary};
+    transform: ${({ isActive }) =>
+      isActive ? 'translateX(12px)' : 'translateX(0)'};
+    transition: transform 0.3s;
+  }
+`;
+
+const Toggle: React.FC<ToggleProps> = ({
+  title,
+  tooltip,
+  initialValue = false,
+  onChange,
+  disabled,
+}) => {
+  const [isActive, setIsActive] = useState(initialValue);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      const newValue = !isActive;
+      setIsActive(newValue);
+      if (onChange) {
+        onChange(newValue);
+      }
+    }
+  };
+
+  return (
+    <Tooltip text={tooltip || ''}>
+      <Container disabled={disabled} onClick={handleToggle}>
+        <ToggleSwitch isActive={isActive} disabled={disabled} />
+        <Text size={14}>{title}</Text>
+        {tooltip && (
+          <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
+        )}
+      </Container>
+    </Tooltip>
+  );
+};
+
+export { Toggle };

From 91a79591659817af7aff4b67ebc2ff73b4ea6fb7 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 28 Jul 2024 09:43:54 +0300
Subject: [PATCH 108/374] chore: wip

---
 frontend/graph/schema.graphqls                    | 1 -
 frontend/graph/schema.resolvers.go                | 6 +++++-
 frontend/webapp/app/setup/choose-sources/page.tsx | 6 +++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 06d2ebb47..09ed84053 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -110,7 +110,6 @@ type ComputePlatform {
   id: ID!
   name: String
   computePlatformType: ComputePlatformType!
-
   k8sActualNamespace(name: String!): K8sActualNamespace
   k8sActualNamespaces: [K8sActualNamespace]!
   k8sActualSource(
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 9a8ea6532..753bf7fc3 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -39,8 +39,12 @@ func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*mode
 		res[i] = k8sThinSourceToGql(&source)
 	}
 
+	name := "odigos-system"
+
 	return &model.ComputePlatform{
-		K8sActualSources: res,
+		K8sActualSources:    res,
+		Name:                &name,
+		ComputePlatformType: model.ComputePlatformTypeK8s,
 	}, nil
 }
 
diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index 902358931..37c0862bb 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { useSuspenseQuery, gql } from '@apollo/client';
 import {
@@ -50,6 +50,10 @@ export default function ChooseSourcesPage() {
     variables: { cpId: '1' },
   });
 
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
+
   const [selectedOption, setSelectedOption] = useState('All types');
   const options = [
     'All types',

From 412d448336f757f43cd4a2b1b6fd3f44b529addb Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 28 Jul 2024 15:03:45 +0300
Subject: [PATCH 109/374] chore: get compute platform namspace with actual
 sources

---
 frontend/endpoints/actual-sources.go          | 21 ++++------
 frontend/endpoints/applications.go            | 22 ++++++++++
 frontend/endpoints/namespaces.go              | 40 +++++++++++++++++++
 frontend/graph/conversions.go                 | 11 +++++
 frontend/graph/schema.resolvers.go            | 17 ++++++++
 .../reuseable-components/dropdown/index.tsx   |  4 +-
 6 files changed, 100 insertions(+), 15 deletions(-)

diff --git a/frontend/endpoints/actual-sources.go b/frontend/endpoints/actual-sources.go
index e11d0c32a..237dbff86 100644
--- a/frontend/endpoints/actual-sources.go
+++ b/frontend/endpoints/actual-sources.go
@@ -14,7 +14,14 @@ import (
 )
 
 func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
+	return getSourcesForNamespace(ctx, odigosns)
+}
+
+func GetNamespaceActualSources(ctx context.Context, namespace string) []ThinSource {
+	return getSourcesForNamespace(ctx, namespace)
+}
 
+func getSourcesForNamespace(ctx context.Context, namespace string) []ThinSource {
 	effectiveInstrumentedSources := map[SourceID]ThinSource{}
 
 	var (
@@ -24,7 +31,7 @@ func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
 
 	g, ctx := errgroup.WithContext(ctx)
 	g.Go(func() error {
-		relevantNamespaces, err := getRelevantNameSpaces(ctx, odigosns)
+		relevantNamespaces, err := getRelevantNameSpaces(ctx, namespace)
 		if err != nil {
 			return err
 		}
@@ -32,9 +39,6 @@ func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
 		for _, ns := range relevantNamespaces {
 			nsInstrumentedMap[ns.Name] = isObjectLabeledForInstrumentation(ns.ObjectMeta)
 		}
-		// get all the applications in all the namespaces,
-		// passing an empty string here is more efficient compared to iterating over the namespaces
-		// since it will make a single request per workload type to the k8s api server
 		items, err = getApplicationsInNamespace(ctx, "", nsInstrumentedMap)
 		return err
 	})
@@ -60,10 +64,6 @@ func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
 	}
 
 	sourcesResult := []ThinSource{}
-	// go over the instrumented applications and update the languages of the effective sources.
-	// Not all effective sources necessarily have a corresponding instrumented application,
-	// it may take some time for the instrumented application to be created. In that case the languages
-	// slice will be empty.
 	for _, app := range instrumentedApplications.Items {
 		thinSource := k8sInstrumentedAppToThinSource(&app)
 		if source, ok := effectiveInstrumentedSources[thinSource.SourceID]; ok {
@@ -77,13 +77,10 @@ func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
 	}
 
 	return sourcesResult
-
 }
 
 func GetActualSource(ctx context.Context, ns string, kind string, name string) (*Source, error) {
-
 	k8sObjectName := workload.GetRuntimeObjectName(name, kind)
-
 	owner, numberOfRunningInstances := getWorkload(ctx, ns, kind, name)
 	if owner == nil {
 		return nil, fmt.Errorf("owner not found")
@@ -105,9 +102,7 @@ func GetActualSource(ctx context.Context, ns string, kind string, name string) (
 
 	instrumentedApplication, err := kube.DefaultClient.OdigosClient.InstrumentedApplications(ns).Get(ctx, k8sObjectName, metav1.GetOptions{})
 	if err == nil {
-		// valid instrumented application, grab the runtime details
 		ts.IaDetails = k8sInstrumentedAppToThinSource(instrumentedApplication).IaDetails
-		// potentially add a condition for healthy instrumentation instances
 		err = addHealthyInstrumentationInstancesCondition(ctx, instrumentedApplication, &ts)
 		if err != nil {
 			return nil, err
diff --git a/frontend/endpoints/applications.go b/frontend/endpoints/applications.go
index a29346cf0..a16df40e6 100644
--- a/frontend/endpoints/applications.go
+++ b/frontend/endpoints/applications.go
@@ -75,6 +75,28 @@ func GetApplicationsInNamespace(c *gin.Context) {
 	})
 }
 
+func GetApplicationsInK8SNamespace(ctx context.Context, ns string) []GetApplicationItemInNamespace {
+
+	namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, ns, metav1.GetOptions{})
+	if err != nil {
+
+		return nil
+	}
+
+	items, err := getApplicationsInNamespace(ctx, namespace.Name, map[string]*bool{namespace.Name: isObjectLabeledForInstrumentation(namespace.ObjectMeta)})
+	if err != nil {
+
+		return nil
+	}
+
+	apps := make([]GetApplicationItemInNamespace, len(items))
+	for i, item := range items {
+		apps[i] = item.nsItem
+	}
+
+	return apps
+}
+
 // getApplicationsInNamespace returns all applications in the namespace and their instrumentation status.
 // nsName can be an empty string to get applications in all namespaces.
 // nsInstrumentedMap is a map of namespace name to a boolean pointer indicating if the namespace is instrumented.
diff --git a/frontend/endpoints/namespaces.go b/frontend/endpoints/namespaces.go
index b6f660e28..f0f6ff23d 100644
--- a/frontend/endpoints/namespaces.go
+++ b/frontend/endpoints/namespaces.go
@@ -73,6 +73,46 @@ func GetNamespaces(c *gin.Context, odigosns string) {
 	c.JSON(http.StatusOK, response)
 }
 
+func GetK8SNamespaces(ctx context.Context, odigosns string) GetNamespacesResponse {
+
+	var (
+		relevantNameSpaces []v1.Namespace
+		appsPerNamespace   map[string]int
+	)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.Go(func() error {
+		var err error
+		relevantNameSpaces, err = getRelevantNameSpaces(ctx, odigosns)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		appsPerNamespace, err = CountAppsPerNamespace(ctx)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+
+		return GetNamespacesResponse{}
+	}
+
+	var response GetNamespacesResponse
+	for _, namespace := range relevantNameSpaces {
+		// check if entire namespace is instrumented
+		selected := namespace.Labels[consts.OdigosInstrumentationLabel] == consts.InstrumentationEnabled
+
+		response.Namespaces = append(response.Namespaces, GetNamespaceItem{
+			Name:      namespace.Name,
+			Selected:  selected,
+			TotalApps: appsPerNamespace[namespace.Name],
+		})
+	}
+
+	return response
+}
+
 // getRelevantNameSpaces returns a list of namespaces that are relevant for instrumentation.
 // Taking into account the ignored namespaces from the OdigosConfiguration.
 func getRelevantNameSpaces(ctx context.Context, odigosns string) ([]v1.Namespace, error) {
diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
index 49b433f2d..936727a48 100644
--- a/frontend/graph/conversions.go
+++ b/frontend/graph/conversions.go
@@ -90,3 +90,14 @@ func k8sSourceToGql(k8sSource *endpoints.Source) *gqlmodel.K8sActualSource {
 		ServiceName:                    &k8sSource.ReportedName,
 	}
 }
+
+func k8sApplicationItemToGql(appItem *endpoints.GetApplicationItemInNamespace) *gqlmodel.K8sActualSource {
+
+	stringKind := string(appItem.Kind)
+
+	return &gqlmodel.K8sActualSource{
+		Kind:              k8sKindToGql(stringKind),
+		Name:              appItem.Name,
+		NumberOfInstances: &appItem.Instances,
+	}
+}
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 753bf7fc3..d54ccbe98 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -40,11 +40,28 @@ func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*mode
 	}
 
 	name := "odigos-system"
+	namespacesResponse := endpoints.GetK8SNamespaces(ctx, name)
+
+	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
+
+	for i, namespace := range namespacesResponse.Namespaces {
+		namespaceActualSources := endpoints.GetApplicationsInK8SNamespace(ctx, namespace.Name)
+		namespaceSources := make([]*model.K8sActualSource, len(namespaceActualSources))
+		for j, source := range namespaceActualSources {
+			namespaceSources[j] = k8sApplicationItemToGql(&source)
+		}
+
+		K8sActualNamespaces[i] = &model.K8sActualNamespace{
+			Name:             namespace.Name,
+			K8sActualSources: namespaceSources,
+		}
+	}
 
 	return &model.ComputePlatform{
 		K8sActualSources:    res,
 		Name:                &name,
 		ComputePlatformType: model.ComputePlatformTypeK8s,
+		K8sActualNamespaces: K8sActualNamespaces,
 	}, nil
 }
 
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index a61e47386..f6a2c2a6e 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -60,11 +60,11 @@ const DropdownListContainer = styled.div`
   flex-direction: column;
   gap: 8px;
   padding: 8px;
-  background-color: rgba(249, 249, 249, 0.08);
+  background-color: #242424;
   border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: 32px;
   margin-top: 4px;
-  z-index: 10;
+  z-index: 999;
 `;
 
 const SearchInputContainer = styled.div`

From 5242d162c0776f2a63de8551819fe560f6319076 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 28 Jul 2024 16:06:43 +0300
Subject: [PATCH 110/374] chore: sources list

---
 .../webapp/app/setup/choose-sources/page.tsx  |  60 +++++----
 .../containers/setup/sources/sources-list.tsx | 123 ++++++++++++++++++
 .../webapp/public/icons/common/folder.svg     |   3 +
 .../reuseable-components/text/index.tsx       |   2 +-
 4 files changed, 163 insertions(+), 25 deletions(-)
 create mode 100644 frontend/webapp/containers/setup/sources/sources-list.tsx
 create mode 100644 frontend/webapp/public/icons/common/folder.svg

diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index 37c0862bb..2812c568d 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -11,6 +11,7 @@ import {
   SectionTitle,
   Toggle,
 } from '@/reuseable-components';
+import { SourcesList } from '@/containers/setup/sources/sources-list';
 
 const GET_COMPUTE_PLATFORM = gql`
   query GetComputePlatform($cpId: ID!) {
@@ -18,37 +19,43 @@ const GET_COMPUTE_PLATFORM = gql`
       id
       name
       computePlatformType
-      k8sActualSources {
-        namespace
-        kind
+      k8sActualNamespaces {
         name
-        serviceName
-        autoInstrumented
-        creationTimestamp
-        numberOfInstances
-        hasInstrumentedApplication
-        instrumentedApplicationDetails {
-          languages {
-            containerName
-            language
-          }
-          conditions {
-            type
-            status
-            lastTransitionTime
-            reason
-            message
-          }
+        k8sActualSources {
+          name
+          kind
+          numberOfInstances
         }
       }
     }
   }
 `;
 
+type ComputePlatformData = {
+  id: string;
+  name: string;
+  computePlatformType: string;
+  k8sActualNamespaces: {
+    name: string;
+    k8sActualSources: {
+      name: string;
+      kind: string;
+      numberOfInstances: number;
+    }[];
+  }[];
+};
+
+type ComputePlatform = {
+  computePlatform: ComputePlatformData;
+};
+
 export default function ChooseSourcesPage() {
-  const { error, data } = useSuspenseQuery(GET_COMPUTE_PLATFORM, {
-    variables: { cpId: '1' },
-  });
+  const { error, data } = useSuspenseQuery<ComputePlatform>(
+    GET_COMPUTE_PLATFORM,
+    {
+      variables: { cpId: '1' },
+    }
+  );
 
   useEffect(() => {
     console.log(data);
@@ -104,7 +111,12 @@ export default function ChooseSourcesPage() {
           onChange={handleCheckboxChange}
         />
       </div>
-      <Divider thickness={1} margin="24px 0 16px" />
+      <Divider thickness={1} margin="16px 0 24px" />
+      <SourcesList
+        items={
+          data?.computePlatform?.k8sActualNamespaces[0].k8sActualSources || []
+        }
+      />
     </div>
   );
 }
diff --git a/frontend/webapp/containers/setup/sources/sources-list.tsx b/frontend/webapp/containers/setup/sources/sources-list.tsx
new file mode 100644
index 000000000..4e823e45d
--- /dev/null
+++ b/frontend/webapp/containers/setup/sources/sources-list.tsx
@@ -0,0 +1,123 @@
+import { Text } from '@/reuseable-components';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 16px;
+  background: ${({ theme }) => theme.colors.primary};
+  height: 100%;
+  max-height: 548px;
+  overflow-y: auto;
+`;
+
+const ListItem = styled.div<{ selected: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  transition: background 0.3s;
+  border-radius: 16px;
+
+  cursor: pointer;
+  background: ${({ selected }) =>
+    selected ? 'rgba(68, 74, 217, 0.24)' : 'rgba(249, 249, 249, 0.04)'};
+
+  &:hover {
+    background: rgba(68, 74, 217, 0.24);
+  }
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const SourceIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+const SelectedTextWrapper = styled.div`
+  margin-right: 24px;
+`;
+
+interface K8sActualSource {
+  name: string;
+  kind: string;
+  numberOfInstances: number;
+}
+
+const SourcesList: React.FC<{ items: K8sActualSource[] }> = ({ items }) => {
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+
+  const handleItemClick = (name: string) => {
+    setSelectedItems((prevSelectedItems) =>
+      prevSelectedItems.includes(name)
+        ? prevSelectedItems.filter((item) => item !== name)
+        : [...prevSelectedItems, name]
+    );
+  };
+
+  return (
+    <Container>
+      {items.map((item) => (
+        <ListItem
+          key={item.name}
+          selected={selectedItems.includes(item.name)}
+          onClick={() => handleItemClick(item.name)}
+        >
+          <ListItemContent>
+            <SourceIconWrapper>
+              <Image
+                src={'/icons/common/folder.svg'}
+                width={20}
+                height={20}
+                alt="source"
+              />
+            </SourceIconWrapper>
+            <TextWrapper>
+              <Text>{item.name}</Text>
+              <Text opacity={0.8} size={10}>
+                {item.numberOfInstances} running instances · {item.kind}
+              </Text>
+            </TextWrapper>
+          </ListItemContent>
+          {selectedItems.includes(item.name) && (
+            <SelectedTextWrapper>
+              <Text size={12} family="secondary">
+                SELECTED
+              </Text>
+            </SelectedTextWrapper>
+          )}
+        </ListItem>
+      ))}
+    </Container>
+  );
+};
+
+export { SourcesList };
diff --git a/frontend/webapp/public/icons/common/folder.svg b/frontend/webapp/public/icons/common/folder.svg
new file mode 100644
index 000000000..59cce3af9
--- /dev/null
+++ b/frontend/webapp/public/icons/common/folder.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+  <path d="M1.5 7.96504C1.5 6.28488 1.5 5.4448 1.82698 4.80307C2.1146 4.23858 2.57354 3.77964 3.13803 3.49202C3.77976 3.16504 4.61984 3.16504 6.3 3.16504H6.53667C6.88887 3.16504 7.06498 3.16504 7.22483 3.21358C7.36634 3.25656 7.49799 3.32702 7.61225 3.42093C7.74131 3.527 7.83899 3.67353 8.03436 3.96658L8.46564 4.6135C8.66101 4.90655 8.75869 5.05308 8.88775 5.15915C9.00201 5.25306 9.13366 5.32352 9.27517 5.36649C9.43502 5.41504 9.61113 5.41504 9.96333 5.41504H11.7C13.3802 5.41504 14.2202 5.41504 14.862 5.74202C15.4265 6.02964 15.8854 6.48858 16.173 7.05307C16.5 7.6948 16.5 8.53488 16.5 10.215V11.865C16.5 13.5452 16.5 14.3853 16.173 15.027C15.8854 15.5915 15.4265 16.0504 14.862 16.3381C14.2202 16.665 13.3802 16.665 11.7 16.665H6.3C4.61984 16.665 3.77976 16.665 3.13803 16.3381C2.57354 16.0504 2.1146 15.5915 1.82698 15.027C1.5 14.3853 1.5 13.5452 1.5 11.865V7.96504Z" stroke="#F9F9F9" stroke-opacity="0.64" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 7044c019e..a375ed19a 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -11,7 +11,7 @@ interface TextProps {
   opacity?: number;
 }
 
-const TextWrapper = styled.span<{
+const TextWrapper = styled.div<{
   color?: string;
   size: number;
   weight: number;

From fc9e1fccd0bdc8bccd1daec28f9c9149dc3f632d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 29 Jul 2024 14:09:24 +0300
Subject: [PATCH 111/374] chore: wip

---
 .../app/(setup)/choose-sources/page.tsx       |  47 +------
 .../webapp/app/setup/choose-sources/page.tsx  | 121 +---------------
 frontend/webapp/app/setup/layout.tsx          |   9 +-
 .../choose-sources-list/index.tsx             | 131 ++++++++++++++++++
 .../choose-sources-menu/index.ts              |   2 +
 .../search-and-dropdown.tsx                   |  37 +++++
 .../toggles-and-checkboxes.tsx                |  60 ++++++++
 .../choose-sources-menu/type.ts               |  30 ++++
 .../main/sources/choose-sources/index.tsx     | 124 +++++++++++++++++
 .../webapp/containers/main/sources/index.ts   |   1 +
 .../graphql/queries/compute-platform.ts       |  19 +++
 frontend/webapp/graphql/queries/index.ts      |   1 +
 .../webapp/hooks/compute-platform/index.ts    |   1 +
 .../compute-platform/useComputePlatform.ts    |  20 +++
 frontend/webapp/hooks/index.tsx               |   1 +
 .../reuseable-components/dropdown/index.tsx   |  24 ++--
 frontend/webapp/types/common.ts               |   5 +
 frontend/webapp/types/compute-platform.ts     |  16 +++
 frontend/webapp/types/index.ts                |   1 +
 frontend/webapp/types/sources.ts              |   6 +
 20 files changed, 483 insertions(+), 173 deletions(-)
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/index.ts
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/type.ts
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/index.tsx
 create mode 100644 frontend/webapp/graphql/queries/compute-platform.ts
 create mode 100644 frontend/webapp/hooks/compute-platform/index.ts
 create mode 100644 frontend/webapp/hooks/compute-platform/useComputePlatform.ts
 create mode 100644 frontend/webapp/types/compute-platform.ts

diff --git a/frontend/webapp/app/(setup)/choose-sources/page.tsx b/frontend/webapp/app/(setup)/choose-sources/page.tsx
index 14a203ce5..495ec2f21 100644
--- a/frontend/webapp/app/(setup)/choose-sources/page.tsx
+++ b/frontend/webapp/app/(setup)/choose-sources/page.tsx
@@ -1,55 +1,10 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StepsList } from '@/components';
 import { ChooseSourcesContainer } from '@/containers';
 import { CardWrapper, PageContainer, StepListWrapper } from '../styled';
 
-import { useSuspenseQuery, gql } from '@apollo/client';
-
-const GET_COMPUTE_PLATFORM = gql`
-  query GetComputePlatform($cpId: ID!) {
-    computePlatform(cpId: $cpId) {
-      id
-      name
-      computePlatformType
-      k8sActualSources {
-        namespace
-        kind
-        name
-        serviceName
-        autoInstrumented
-        creationTimestamp
-        numberOfInstances
-        hasInstrumentedApplication
-        instrumentedApplicationDetails {
-          languages {
-            containerName
-            language
-          }
-          conditions {
-            type
-            status
-            lastTransitionTime
-            reason
-            message
-          }
-        }
-      }
-    }
-  }
-`;
-
 export default function ChooseSourcesPage() {
-  const { error, data } = useSuspenseQuery(GET_COMPUTE_PLATFORM, {
-    variables: { cpId: '1' },
-  });
-
-  useEffect(() => {
-    if (error) {
-      console.error(error);
-    }
-    console.log({ data });
-  }, [error, data]);
   return (
     <PageContainer>
       <StepListWrapper>
diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index 2812c568d..3c0fbed5a 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -1,122 +1,11 @@
 'use client';
-import React, { useEffect, useState } from 'react';
-
-import { useSuspenseQuery, gql } from '@apollo/client';
-import {
-  Checkbox,
-  Counter,
-  Divider,
-  Dropdown,
-  Input,
-  SectionTitle,
-  Toggle,
-} from '@/reuseable-components';
-import { SourcesList } from '@/containers/setup/sources/sources-list';
-
-const GET_COMPUTE_PLATFORM = gql`
-  query GetComputePlatform($cpId: ID!) {
-    computePlatform(cpId: $cpId) {
-      id
-      name
-      computePlatformType
-      k8sActualNamespaces {
-        name
-        k8sActualSources {
-          name
-          kind
-          numberOfInstances
-        }
-      }
-    }
-  }
-`;
-
-type ComputePlatformData = {
-  id: string;
-  name: string;
-  computePlatformType: string;
-  k8sActualNamespaces: {
-    name: string;
-    k8sActualSources: {
-      name: string;
-      kind: string;
-      numberOfInstances: number;
-    }[];
-  }[];
-};
-
-type ComputePlatform = {
-  computePlatform: ComputePlatformData;
-};
+import React from 'react';
+import { ChooseSourcesContainer } from '@/containers/main';
 
 export default function ChooseSourcesPage() {
-  const { error, data } = useSuspenseQuery<ComputePlatform>(
-    GET_COMPUTE_PLATFORM,
-    {
-      variables: { cpId: '1' },
-    }
-  );
-
-  useEffect(() => {
-    console.log(data);
-  }, [data]);
-
-  const [selectedOption, setSelectedOption] = useState('All types');
-  const options = [
-    'All types',
-    'Existing destinations',
-    'Self hosted',
-    'Managed',
-  ];
-
-  const handleCheckboxChange = (value: boolean) => {
-    console.log('Checkbox is now', value);
-  };
-
   return (
-    <div style={{ width: 756 }}>
-      <SectionTitle
-        title="Choose sources"
-        description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
-      />
-      <div style={{ display: 'flex', gap: 8, marginTop: 24 }}>
-        <Input
-          placeholder="Search for sources"
-          icon={'/icons/common/search.svg'}
-        />
-
-        <Dropdown
-          options={options}
-          selectedOption={selectedOption}
-          onSelect={setSelectedOption}
-        />
-      </div>
-      <Divider thickness={1} margin="24px 0 16px" />
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
-        <Counter value={0} title="Selected apps" />
-        <div style={{ display: 'flex', gap: 8 }}>
-          <Toggle title="Auto-instrument all apps" />
-          <Toggle title="Show selected only" />
-        </div>
-        <Checkbox
-          title="Future apps"
-          tooltip="Automatically instrument all future apps"
-          initialValue={false}
-          onChange={handleCheckboxChange}
-        />
-      </div>
-      <Divider thickness={1} margin="16px 0 24px" />
-      <SourcesList
-        items={
-          data?.computePlatform?.k8sActualNamespaces[0].k8sActualSources || []
-        }
-      />
-    </div>
+    <>
+      <ChooseSourcesContainer />
+    </>
   );
 }
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index d03aa3117..198d6164d 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -30,6 +30,11 @@ const MainContent = styled.div`
   align-items: center;
 `;
 
+const ContentWrapper = styled.div`
+  width: 640px;
+  padding-top: 64px;
+`;
+
 export default function SetupLayout({
   children,
 }: {
@@ -43,7 +48,9 @@ export default function SetupLayout({
       <SideMenuWrapper>
         <SideMenu />
       </SideMenuWrapper>
-      <MainContent>{children}</MainContent>
+      <MainContent>
+        <ContentWrapper>{children}</ContentWrapper>
+      </MainContent>
     </LayoutContainer>
   );
 }
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
new file mode 100644
index 000000000..796bbe564
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -0,0 +1,131 @@
+import { Text } from '@/reuseable-components';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 16px;
+  background: ${({ theme }) => theme.colors.primary};
+  height: 100%;
+  max-height: 548px;
+  overflow-y: auto;
+`;
+
+const ListItem = styled.div<{ selected: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  transition: background 0.3s;
+  border-radius: 16px;
+
+  cursor: pointer;
+  background: ${({ selected }) =>
+    selected ? 'rgba(68, 74, 217, 0.24)' : 'rgba(249, 249, 249, 0.04)'};
+
+  &:hover {
+    background: rgba(68, 74, 217, 0.24);
+  }
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const SourceIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+const SelectedTextWrapper = styled.div`
+  margin-right: 24px;
+`;
+
+interface K8sActualSource {
+  name: string;
+  kind: string;
+  numberOfInstances: number;
+}
+
+interface SourcesListProps {
+  items: K8sActualSource[];
+  selectedItems: K8sActualSource[];
+  setSelectedItems: React.Dispatch<React.SetStateAction<K8sActualSource[]>>;
+}
+
+const SourcesList: React.FC<SourcesListProps> = ({
+  items,
+  selectedItems,
+  setSelectedItems,
+}) => {
+  const handleItemClick = (item: K8sActualSource) => {
+    setSelectedItems((prevSelectedItems) =>
+      prevSelectedItems.includes(item)
+        ? prevSelectedItems.filter((selectedItem) => selectedItem !== item)
+        : [...prevSelectedItems, item]
+    );
+  };
+
+  return (
+    <Container>
+      {items.map((item) => (
+        <ListItem
+          key={item.name}
+          selected={selectedItems.includes(item)}
+          onClick={() => handleItemClick(item)}
+        >
+          <ListItemContent>
+            <SourceIconWrapper>
+              <Image
+                src={'/icons/common/folder.svg'}
+                width={20}
+                height={20}
+                alt="source"
+              />
+            </SourceIconWrapper>
+            <TextWrapper>
+              <Text>{item.name}</Text>
+              <Text opacity={0.8} size={10}>
+                {item.numberOfInstances} running instances · {item.kind}
+              </Text>
+            </TextWrapper>
+          </ListItemContent>
+          {selectedItems.includes(item) && (
+            <SelectedTextWrapper>
+              <Text size={12} family="secondary">
+                SELECTED
+              </Text>
+            </SelectedTextWrapper>
+          )}
+        </ListItem>
+      ))}
+    </Container>
+  );
+};
+
+export { SourcesList };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/index.ts b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/index.ts
new file mode 100644
index 000000000..892c7ba07
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/index.ts
@@ -0,0 +1,2 @@
+export * from './search-and-dropdown';
+export * from './toggles-and-checkboxes';
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
new file mode 100644
index 000000000..abf53b1be
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SearchDropdownProps } from './type';
+import { Input, Dropdown } from '@/reuseable-components';
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-top: 24px;
+`;
+
+const SearchAndDropdown: React.FC<SearchDropdownProps> = ({
+  state,
+  handlers,
+  dropdownOptions,
+}) => {
+  const { selectedOption, searchFilter } = state;
+  const { setSelectedOption, setSearchFilter } = handlers;
+
+  return (
+    <Container>
+      <Input
+        placeholder="Search for sources"
+        icon={'/icons/common/search.svg'}
+        value={searchFilter}
+        onChange={(e) => setSearchFilter(e.target.value)}
+      />
+      <Dropdown
+        options={dropdownOptions}
+        selectedOption={selectedOption}
+        onSelect={setSelectedOption}
+      />
+    </Container>
+  );
+};
+
+export { SearchAndDropdown };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
new file mode 100644
index 000000000..5a7c604db
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Counter, Toggle, Checkbox } from '@/reuseable-components';
+import { ToggleCheckboxHandlers, ToggleCheckboxState } from './type';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ToggleWrapper = styled.div`
+  display: flex;
+  gap: 32px;
+`;
+
+type ToggleCheckboxProps = {
+  state: ToggleCheckboxState;
+  handlers: ToggleCheckboxHandlers;
+};
+
+const TogglesAndCheckboxes: React.FC<ToggleCheckboxProps> = ({
+  state,
+  handlers,
+}) => {
+  const {
+    selectedAppsCount,
+    selectAllCheckbox,
+    showSelectedOnly,
+    futureAppsCheckbox,
+  } = state;
+
+  const { setSelectAllCheckbox, setShowSelectedOnly, setFutureAppsCheckbox } =
+    handlers;
+  return (
+    <Container>
+      <Counter value={selectedAppsCount} title="Selected apps" />
+      <ToggleWrapper>
+        <Toggle
+          title="Select all"
+          initialValue={selectAllCheckbox}
+          onChange={setSelectAllCheckbox}
+        />
+        <Toggle
+          title="Show selected only"
+          initialValue={showSelectedOnly}
+          onChange={setShowSelectedOnly}
+        />
+      </ToggleWrapper>
+      <Checkbox
+        title="Future apps"
+        tooltip="Automatically instrument all future apps"
+        initialValue={futureAppsCheckbox}
+        onChange={setFutureAppsCheckbox}
+      />
+    </Container>
+  );
+};
+
+export { TogglesAndCheckboxes };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/type.ts b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/type.ts
new file mode 100644
index 000000000..530473dd8
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/type.ts
@@ -0,0 +1,30 @@
+import { DropdownOption } from '@/types';
+
+export type ToggleCheckboxState = {
+  selectedAppsCount: number;
+  selectAllCheckbox: boolean;
+  showSelectedOnly: boolean;
+  futureAppsCheckbox: boolean;
+};
+
+export type ToggleCheckboxHandlers = {
+  setSelectAllCheckbox: (value: boolean) => void;
+  setShowSelectedOnly: (value: boolean) => void;
+  setFutureAppsCheckbox: (value: boolean) => void;
+};
+
+export type SearchDropdownState = {
+  selectedOption: DropdownOption | undefined;
+  searchFilter: string;
+};
+
+export type SearchDropdownHandlers = {
+  setSelectedOption: (option: DropdownOption) => void;
+  setSearchFilter: (search: string) => void;
+};
+
+export type SearchDropdownProps = {
+  state: SearchDropdownState;
+  handlers: SearchDropdownHandlers;
+  dropdownOptions: DropdownOption[];
+};
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
new file mode 100644
index 000000000..dec62cc78
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from 'react';
+import { useComputePlatform } from '@/hooks';
+import { SourcesList } from './choose-sources-list';
+import { SectionTitle, Divider } from '@/reuseable-components';
+import { DropdownOption, K8sActualNamespace, K8sActualSource } from '@/types';
+import { SearchAndDropdown, TogglesAndCheckboxes } from './choose-sources-menu';
+import {
+  SearchDropdownHandlers,
+  SearchDropdownState,
+  ToggleCheckboxHandlers,
+  ToggleCheckboxState,
+} from './choose-sources-menu/type';
+
+export function ChooseSourcesContainer() {
+  const [searchFilter, setSearchFilter] = useState('');
+  const [showSelectedOnly, setShowSelectedOnly] = useState(false);
+  const [selectAllCheckbox, setSelectAllCheckbox] = useState(false);
+  const [futureAppsCheckbox, setFutureAppsCheckbox] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<DropdownOption>();
+  const [selectedItems, setSelectedItems] = useState<K8sActualSource[]>([]);
+  const [namespacesList, setNamespacesList] = useState<DropdownOption[]>([]);
+
+  const { error, data } = useComputePlatform();
+
+  useEffect(() => {
+    data && buildNamespacesList();
+  }, [data, error]);
+
+  useEffect(() => {
+    selectAllCheckbox ? selectAllSources() : unselectAllSources();
+  }, [selectAllCheckbox]);
+
+  function buildNamespacesList() {
+    const namespaces = data?.computePlatform?.k8sActualNamespaces || [];
+    const namespacesList = namespaces.map((namespace: K8sActualNamespace) => ({
+      id: namespace.name,
+      value: namespace.name,
+    }));
+
+    setSelectedOption(namespacesList[0]);
+    setNamespacesList(namespacesList);
+  }
+
+  function filterSources(sources: K8sActualSource[]) {
+    return sources.filter((source: K8sActualSource) => {
+      return (
+        searchFilter === '' ||
+        source.name.toLowerCase().includes(searchFilter.toLowerCase())
+      );
+    });
+  }
+
+  function selectAllSources() {
+    const allSources =
+      data?.computePlatform?.k8sActualNamespaces.flatMap(
+        (namespace) => namespace.k8sActualSources
+      ) || [];
+    setSelectedItems(allSources);
+  }
+
+  function unselectAllSources() {
+    setSelectedItems([]);
+  }
+
+  function getVisibleSources() {
+    const allSources =
+      data?.computePlatform?.k8sActualNamespaces[0].k8sActualSources || [];
+    const filteredSources = searchFilter
+      ? filterSources(allSources)
+      : allSources;
+
+    return showSelectedOnly
+      ? filteredSources.filter((source) => selectedItems.includes(source))
+      : filteredSources;
+  }
+
+  const toggleCheckboxState: ToggleCheckboxState = {
+    selectedAppsCount: selectedItems.length,
+    selectAllCheckbox,
+    showSelectedOnly,
+    futureAppsCheckbox,
+  };
+
+  const toggleCheckboxHandlers: ToggleCheckboxHandlers = {
+    setSelectAllCheckbox,
+    setShowSelectedOnly,
+    setFutureAppsCheckbox,
+  };
+
+  const searchDropdownState: SearchDropdownState = {
+    selectedOption,
+    searchFilter,
+  };
+
+  const searchDropdownHandlers: SearchDropdownHandlers = {
+    setSelectedOption,
+    setSearchFilter,
+  };
+
+  return (
+    <>
+      <SectionTitle
+        title="Choose sources"
+        description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
+      />
+      <SearchAndDropdown
+        state={searchDropdownState}
+        handlers={searchDropdownHandlers}
+        dropdownOptions={namespacesList}
+      />
+      <Divider thickness={1} margin="16px 0" />
+      <TogglesAndCheckboxes
+        state={toggleCheckboxState}
+        handlers={toggleCheckboxHandlers}
+      />
+      <Divider thickness={1} margin="16px 0 24px" />
+      <SourcesList
+        selectedItems={selectedItems}
+        setSelectedItems={setSelectedItems}
+        items={getVisibleSources()}
+      />
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/main/sources/index.ts b/frontend/webapp/containers/main/sources/index.ts
index 0a28eb6b8..c81126c2b 100644
--- a/frontend/webapp/containers/main/sources/index.ts
+++ b/frontend/webapp/containers/main/sources/index.ts
@@ -1,3 +1,4 @@
 export * from './managed';
 export * from './choose.sources';
+export * from './choose-sources';
 export * from './edit.source';
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
new file mode 100644
index 000000000..6d1f3244a
--- /dev/null
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -0,0 +1,19 @@
+import { gql } from '@apollo/client';
+
+export const GET_COMPUTE_PLATFORM = gql`
+  query GetComputePlatform($cpId: ID!) {
+    computePlatform(cpId: $cpId) {
+      id
+      name
+      computePlatformType
+      k8sActualNamespaces {
+        name
+        k8sActualSources {
+          name
+          kind
+          numberOfInstances
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/index.ts b/frontend/webapp/graphql/queries/index.ts
index f03c2281a..a4ba77920 100644
--- a/frontend/webapp/graphql/queries/index.ts
+++ b/frontend/webapp/graphql/queries/index.ts
@@ -1 +1,2 @@
 export * from './config';
+export * from './compute-platform';
diff --git a/frontend/webapp/hooks/compute-platform/index.ts b/frontend/webapp/hooks/compute-platform/index.ts
new file mode 100644
index 000000000..f535085ea
--- /dev/null
+++ b/frontend/webapp/hooks/compute-platform/index.ts
@@ -0,0 +1 @@
+export * from './useComputePlatform';
diff --git a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
new file mode 100644
index 000000000..76d9f00f6
--- /dev/null
+++ b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
@@ -0,0 +1,20 @@
+import { ComputePlatform } from '@/types';
+import { useQuery } from '@apollo/client';
+import { GET_COMPUTE_PLATFORM } from '@/graphql';
+
+type UseComputePlatformHook = {
+  data?: ComputePlatform;
+  loading: boolean;
+  error?: Error;
+};
+
+export const useComputePlatform = (): UseComputePlatformHook => {
+  const { data, loading, error } = useQuery<ComputePlatform>(
+    GET_COMPUTE_PLATFORM,
+    {
+      variables: { cpId: '1' },
+    }
+  );
+
+  return { data, loading, error };
+};
diff --git a/frontend/webapp/hooks/index.tsx b/frontend/webapp/hooks/index.tsx
index 7bae585c0..44c4a33e1 100644
--- a/frontend/webapp/hooks/index.tsx
+++ b/frontend/webapp/hooks/index.tsx
@@ -8,3 +8,4 @@ export * from './actions';
 export * from './useNotify';
 export * from './useSSE';
 export * from './new-config';
+export * from './compute-platform';
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index f6a2c2a6e..b43634117 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -5,11 +5,13 @@ import { Tooltip } from '../tooltip';
 import Image from 'next/image';
 import { Text } from '../text';
 import { Divider } from '../divider';
+import { DropdownOption } from '@/types';
+import { useOnClickOutside } from '@/hooks';
 
 interface DropdownProps {
-  options: string[];
-  selectedOption: string;
-  onSelect: (option: string) => void;
+  options: DropdownOption[];
+  selectedOption: DropdownOption | undefined;
+  onSelect: (option: DropdownOption) => void;
   title?: string;
   tooltip?: string;
 }
@@ -112,11 +114,13 @@ const Dropdown: React.FC<DropdownProps> = ({
   const [searchTerm, setSearchTerm] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
+
   const filteredOptions = options.filter((option) =>
-    option.toLowerCase().includes(searchTerm.toLowerCase())
+    option.value.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  const handleSelect = (option: string) => {
+  const handleSelect = (option: DropdownOption) => {
     onSelect(option);
     setIsOpen(false);
   };
@@ -139,7 +143,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         </Tooltip>
       )}
       <DropdownHeader isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
-        <Text size={14}>{selectedOption}</Text>
+        <Text size={14}>{selectedOption?.value}</Text>
 
         <OpenDropdownIcon
           src="/icons/common/extend-arrow.svg"
@@ -162,13 +166,13 @@ const Dropdown: React.FC<DropdownProps> = ({
           </SearchInputContainer>
           {filteredOptions.map((option) => (
             <DropdownItem
-              key={option}
-              isSelected={option === selectedOption}
+              key={option.id}
+              isSelected={option.id === selectedOption?.id}
               onClick={() => handleSelect(option)}
             >
-              <Text size={14}>{option}</Text>
+              <Text size={14}>{option.value}</Text>
 
-              {option === selectedOption && (
+              {option.id === selectedOption?.id && (
                 <Image
                   src="/icons/common/check.svg"
                   alt=""
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index 2640ccccf..3d57d580a 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -23,3 +23,8 @@ export type Config = {
     installation: string;
   };
 };
+
+export interface DropdownOption {
+  id: string;
+  value: string;
+}
diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts
new file mode 100644
index 000000000..e2233dadc
--- /dev/null
+++ b/frontend/webapp/types/compute-platform.ts
@@ -0,0 +1,16 @@
+import { K8sActualSource } from './sources';
+export type K8sActualNamespace = {
+  name: string;
+  k8sActualSources: K8sActualSource[];
+};
+
+type ComputePlatformData = {
+  id: string;
+  name: string;
+  computePlatformType: string;
+  k8sActualNamespaces: K8sActualNamespace[];
+};
+
+export type ComputePlatform = {
+  computePlatform: ComputePlatformData;
+};
diff --git a/frontend/webapp/types/index.ts b/frontend/webapp/types/index.ts
index 18bec3378..1f91e3d5b 100644
--- a/frontend/webapp/types/index.ts
+++ b/frontend/webapp/types/index.ts
@@ -3,3 +3,4 @@ export * from './destinations';
 export * from './actions';
 export * from './sources';
 export * from './common';
+export * from './compute-platform';
diff --git a/frontend/webapp/types/sources.ts b/frontend/webapp/types/sources.ts
index 43eeb90dc..f7d8e9709 100644
--- a/frontend/webapp/types/sources.ts
+++ b/frontend/webapp/types/sources.ts
@@ -70,3 +70,9 @@ export interface SelectedSources {
     future_selected: boolean;
   };
 }
+
+export type K8sActualSource = {
+  name: string;
+  kind: string;
+  numberOfInstances: number;
+};

From abca0bf49140f3e101a4b1e333b9d668de3a8667 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 29 Jul 2024 14:17:10 +0300
Subject: [PATCH 112/374] chore: wip

---
 .../containers/setup/sources/sources-list.tsx | 123 ------------------
 1 file changed, 123 deletions(-)
 delete mode 100644 frontend/webapp/containers/setup/sources/sources-list.tsx

diff --git a/frontend/webapp/containers/setup/sources/sources-list.tsx b/frontend/webapp/containers/setup/sources/sources-list.tsx
deleted file mode 100644
index 4e823e45d..000000000
--- a/frontend/webapp/containers/setup/sources/sources-list.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Text } from '@/reuseable-components';
-import Image from 'next/image';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-  align-self: stretch;
-  border-radius: 16px;
-  background: ${({ theme }) => theme.colors.primary};
-  height: 100%;
-  max-height: 548px;
-  overflow-y: auto;
-`;
-
-const ListItem = styled.div<{ selected: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 16px 0px;
-  transition: background 0.3s;
-  border-radius: 16px;
-
-  cursor: pointer;
-  background: ${({ selected }) =>
-    selected ? 'rgba(68, 74, 217, 0.24)' : 'rgba(249, 249, 249, 0.04)'};
-
-  &:hover {
-    background: rgba(68, 74, 217, 0.24);
-  }
-`;
-
-const ListItemContent = styled.div`
-  margin-left: 16px;
-  display: flex;
-  gap: 12px;
-`;
-
-const SourceIconWrapper = styled.div`
-  display: flex;
-  width: 36px;
-  height: 36px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(249, 249, 249, 0.06) 0%,
-    rgba(249, 249, 249, 0.02) 100%
-  );
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 36px;
-  justify-content: space-between;
-`;
-
-const SelectedTextWrapper = styled.div`
-  margin-right: 24px;
-`;
-
-interface K8sActualSource {
-  name: string;
-  kind: string;
-  numberOfInstances: number;
-}
-
-const SourcesList: React.FC<{ items: K8sActualSource[] }> = ({ items }) => {
-  const [selectedItems, setSelectedItems] = useState<string[]>([]);
-
-  const handleItemClick = (name: string) => {
-    setSelectedItems((prevSelectedItems) =>
-      prevSelectedItems.includes(name)
-        ? prevSelectedItems.filter((item) => item !== name)
-        : [...prevSelectedItems, name]
-    );
-  };
-
-  return (
-    <Container>
-      {items.map((item) => (
-        <ListItem
-          key={item.name}
-          selected={selectedItems.includes(item.name)}
-          onClick={() => handleItemClick(item.name)}
-        >
-          <ListItemContent>
-            <SourceIconWrapper>
-              <Image
-                src={'/icons/common/folder.svg'}
-                width={20}
-                height={20}
-                alt="source"
-              />
-            </SourceIconWrapper>
-            <TextWrapper>
-              <Text>{item.name}</Text>
-              <Text opacity={0.8} size={10}>
-                {item.numberOfInstances} running instances · {item.kind}
-              </Text>
-            </TextWrapper>
-          </ListItemContent>
-          {selectedItems.includes(item.name) && (
-            <SelectedTextWrapper>
-              <Text size={12} family="secondary">
-                SELECTED
-              </Text>
-            </SelectedTextWrapper>
-          )}
-        </ListItem>
-      ))}
-    </Container>
-  );
-};
-
-export { SourcesList };

From 0a6d4aff8573707e12efe6df415fa7401af7568b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 29 Jul 2024 14:59:07 +0300
Subject: [PATCH 113/374] chore: change endpoints folder to service

---
 frontend/endpoints/applications.go            |  22 --
 frontend/graph/conversions.go                 |   8 +-
 frontend/graph/schema.resolvers.go            |   9 +-
 frontend/services/applications.go             | 195 ++++++++++++++++++
 frontend/services/namespaces.go               | 178 ++++++++++++++++
 .../actual-sources.go => services/sources.go} | 104 +++++++++-
 frontend/services/utils.go                    |  52 +++++
 7 files changed, 537 insertions(+), 31 deletions(-)
 create mode 100644 frontend/services/applications.go
 create mode 100644 frontend/services/namespaces.go
 rename frontend/{endpoints/actual-sources.go => services/sources.go} (56%)
 create mode 100644 frontend/services/utils.go

diff --git a/frontend/endpoints/applications.go b/frontend/endpoints/applications.go
index a16df40e6..a29346cf0 100644
--- a/frontend/endpoints/applications.go
+++ b/frontend/endpoints/applications.go
@@ -75,28 +75,6 @@ func GetApplicationsInNamespace(c *gin.Context) {
 	})
 }
 
-func GetApplicationsInK8SNamespace(ctx context.Context, ns string) []GetApplicationItemInNamespace {
-
-	namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, ns, metav1.GetOptions{})
-	if err != nil {
-
-		return nil
-	}
-
-	items, err := getApplicationsInNamespace(ctx, namespace.Name, map[string]*bool{namespace.Name: isObjectLabeledForInstrumentation(namespace.ObjectMeta)})
-	if err != nil {
-
-		return nil
-	}
-
-	apps := make([]GetApplicationItemInNamespace, len(items))
-	for i, item := range items {
-		apps[i] = item.nsItem
-	}
-
-	return apps
-}
-
 // getApplicationsInNamespace returns all applications in the namespace and their instrumentation status.
 // nsName can be an empty string to get applications in all namespaces.
 // nsInstrumentedMap is a map of namespace name to a boolean pointer indicating if the namespace is instrumented.
diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
index 936727a48..6f8cc6010 100644
--- a/frontend/graph/conversions.go
+++ b/frontend/graph/conversions.go
@@ -3,8 +3,8 @@ package graph
 import (
 	"time"
 
-	"github.com/odigos-io/odigos/frontend/endpoints"
 	gqlmodel "github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/services"
 	v1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
@@ -41,7 +41,7 @@ func k8sLastTransitionTimeToGql(t v1.Time) *string {
 	return &str
 }
 
-func k8sThinSourceToGql(k8sSource *endpoints.ThinSource) *gqlmodel.K8sActualSource {
+func k8sThinSourceToGql(k8sSource *services.ThinSource) *gqlmodel.K8sActualSource {
 
 	hasInstrumentedApplication := k8sSource.IaDetails != nil
 
@@ -79,7 +79,7 @@ func k8sThinSourceToGql(k8sSource *endpoints.ThinSource) *gqlmodel.K8sActualSour
 	}
 }
 
-func k8sSourceToGql(k8sSource *endpoints.Source) *gqlmodel.K8sActualSource {
+func k8sSourceToGql(k8sSource *services.Source) *gqlmodel.K8sActualSource {
 	baseSource := k8sThinSourceToGql(&k8sSource.ThinSource)
 	return &gqlmodel.K8sActualSource{
 		Namespace:                      baseSource.Namespace,
@@ -91,7 +91,7 @@ func k8sSourceToGql(k8sSource *endpoints.Source) *gqlmodel.K8sActualSource {
 	}
 }
 
-func k8sApplicationItemToGql(appItem *endpoints.GetApplicationItemInNamespace) *gqlmodel.K8sActualSource {
+func k8sApplicationItemToGql(appItem *services.GetApplicationItemInNamespace) *gqlmodel.K8sActualSource {
 
 	stringKind := string(appItem.Kind)
 
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index d54ccbe98..8e0f8a886 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -10,11 +10,12 @@ import (
 
 	"github.com/odigos-io/odigos/frontend/endpoints"
 	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/services"
 )
 
 // K8sActualSource is the resolver for the k8sActualSource field.
 func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error) {
-	source, err := endpoints.GetActualSource(ctx, *namespace, *kind, *name)
+	source, err := services.GetActualSource(ctx, *namespace, *kind, *name)
 	if err != nil {
 		return nil, err
 	}
@@ -33,19 +34,19 @@ func (r *mutationResolver) CreateK8sDesiredNamespace(ctx context.Context, cpID s
 
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*model.ComputePlatform, error) {
-	k8sActualSources := endpoints.GetActualSources(ctx, "odigos-system")
+	k8sActualSources := services.GetActualSources(ctx, "odigos-system")
 	res := make([]*model.K8sActualSource, len(k8sActualSources))
 	for i, source := range k8sActualSources {
 		res[i] = k8sThinSourceToGql(&source)
 	}
 
 	name := "odigos-system"
-	namespacesResponse := endpoints.GetK8SNamespaces(ctx, name)
+	namespacesResponse := services.GetK8SNamespaces(ctx, name)
 
 	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
 
 	for i, namespace := range namespacesResponse.Namespaces {
-		namespaceActualSources := endpoints.GetApplicationsInK8SNamespace(ctx, namespace.Name)
+		namespaceActualSources := services.GetApplicationsInK8SNamespace(ctx, namespace.Name)
 		namespaceSources := make([]*model.K8sActualSource, len(namespaceActualSources))
 		for j, source := range namespaceActualSources {
 			namespaceSources[j] = k8sApplicationItemToGql(&source)
diff --git a/frontend/services/applications.go b/frontend/services/applications.go
new file mode 100644
index 000000000..012310216
--- /dev/null
+++ b/frontend/services/applications.go
@@ -0,0 +1,195 @@
+package services
+
+import (
+	"context"
+
+	appsv1 "k8s.io/api/apps/v1"
+
+	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+
+	"github.com/odigos-io/odigos/frontend/kube"
+	"golang.org/x/sync/errgroup"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type GetApplicationsInNamespaceRequest struct {
+	Namespace string `uri:"namespace" binding:"required"`
+}
+
+type GetApplicationsInNamespaceResponse struct {
+	Applications []GetApplicationItemInNamespace `json:"applications"`
+}
+
+type WorkloadKind string
+
+const (
+	WorkloadKindDeployment  WorkloadKind = "Deployment"
+	WorkloadKindStatefulSet WorkloadKind = "StatefulSet"
+	WorkloadKindDaemonSet   WorkloadKind = "DaemonSet"
+)
+
+type GetApplicationItemInNamespace struct {
+	Name                      string       `json:"name"`
+	Kind                      WorkloadKind `json:"kind"`
+	Instances                 int          `json:"instances"`
+	AppInstrumentationLabeled *bool        `json:"app_instrumentation_labeled"`
+	NsInstrumentationLabeled  *bool        `json:"ns_instrumentation_labeled"`
+	InstrumentationEffective  bool         `json:"instrumentation_effective"`
+}
+
+type GetApplicationItem struct {
+	// namespace is used when querying all the namespaces, the response can be grouped/filtered by namespace
+	namespace string
+	nsItem    GetApplicationItemInNamespace
+}
+
+func GetApplicationsInK8SNamespace(ctx context.Context, ns string) []GetApplicationItemInNamespace {
+
+	namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, ns, metav1.GetOptions{})
+	if err != nil {
+
+		return nil
+	}
+
+	items, err := getApplicationsInNamespace(ctx, namespace.Name, map[string]*bool{namespace.Name: isObjectLabeledForInstrumentation(namespace.ObjectMeta)})
+	if err != nil {
+
+		return nil
+	}
+
+	apps := make([]GetApplicationItemInNamespace, len(items))
+	for i, item := range items {
+		apps[i] = item.nsItem
+	}
+
+	return apps
+}
+
+// getApplicationsInNamespace returns all applications in the namespace and their instrumentation status.
+// nsName can be an empty string to get applications in all namespaces.
+// nsInstrumentedMap is a map of namespace name to a boolean pointer indicating if the namespace is instrumented.
+func getApplicationsInNamespace(ctx context.Context, nsName string, nsInstrumentedMap map[string]*bool) ([]GetApplicationItem, error) {
+	g, ctx := errgroup.WithContext(ctx)
+	var (
+		deps []GetApplicationItem
+		ss   []GetApplicationItem
+		dss  []GetApplicationItem
+	)
+
+	g.Go(func() error {
+		var err error
+		deps, err = getDeployments(nsName, ctx)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		ss, err = getStatefulSets(nsName, ctx)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		dss, err = getDaemonSets(nsName, ctx)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
+	}
+
+	items := make([]GetApplicationItem, len(deps)+len(ss)+len(dss))
+	copy(items, deps)
+	copy(items[len(deps):], ss)
+	copy(items[len(deps)+len(ss):], dss)
+
+	for i := range items {
+		item := &items[i]
+		// check if the entire namespace is instrumented
+		// as it affects the applications in the namespace
+		// which use this label to determine if they should be instrumented
+		nsInstrumentationLabeled := nsInstrumentedMap[item.namespace]
+		item.nsItem.NsInstrumentationLabeled = nsInstrumentationLabeled
+		appInstrumented := (item.nsItem.AppInstrumentationLabeled != nil && *item.nsItem.AppInstrumentationLabeled)
+		appInstrumentationInherited := item.nsItem.AppInstrumentationLabeled == nil
+		nsInstrumented := (nsInstrumentationLabeled != nil && *nsInstrumentationLabeled)
+		item.nsItem.InstrumentationEffective = appInstrumented || (appInstrumentationInherited && nsInstrumented)
+	}
+
+	return items, nil
+}
+
+func getDeployments(namespace string, ctx context.Context) ([]GetApplicationItem, error) {
+	var response []GetApplicationItem
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().Deployments(namespace).List, ctx, metav1.ListOptions{}, func(deps *appsv1.DeploymentList) error {
+		for _, dep := range deps.Items {
+			appInstrumentationLabeled := isObjectLabeledForInstrumentation(dep.ObjectMeta)
+			response = append(response, GetApplicationItem{
+				namespace: dep.Namespace,
+				nsItem: GetApplicationItemInNamespace{
+					Name:                      dep.Name,
+					Kind:                      WorkloadKindDeployment,
+					Instances:                 int(dep.Status.AvailableReplicas),
+					AppInstrumentationLabeled: appInstrumentationLabeled,
+				},
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
+
+func getStatefulSets(namespace string, ctx context.Context) ([]GetApplicationItem, error) {
+	var response []GetApplicationItem
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().StatefulSets(namespace).List, ctx, metav1.ListOptions{}, func(sss *appsv1.StatefulSetList) error {
+		for _, ss := range sss.Items {
+			appInstrumentationLabeled := isObjectLabeledForInstrumentation(ss.ObjectMeta)
+			response = append(response, GetApplicationItem{
+				namespace: ss.Namespace,
+				nsItem: GetApplicationItemInNamespace{
+					Name:                      ss.Name,
+					Kind:                      WorkloadKindStatefulSet,
+					Instances:                 int(ss.Status.ReadyReplicas),
+					AppInstrumentationLabeled: appInstrumentationLabeled,
+				},
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
+
+func getDaemonSets(namespace string, ctx context.Context) ([]GetApplicationItem, error) {
+	var response []GetApplicationItem
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().DaemonSets(namespace).List, ctx, metav1.ListOptions{}, func(dss *appsv1.DaemonSetList) error {
+		for _, ds := range dss.Items {
+			appInstrumentationLabeled := isObjectLabeledForInstrumentation(ds.ObjectMeta)
+			response = append(response, GetApplicationItem{
+				namespace: ds.Namespace,
+				nsItem: GetApplicationItemInNamespace{
+					Name:                      ds.Name,
+					Kind:                      WorkloadKindDaemonSet,
+					Instances:                 int(ds.Status.NumberReady),
+					AppInstrumentationLabeled: appInstrumentationLabeled,
+				},
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
diff --git a/frontend/services/namespaces.go b/frontend/services/namespaces.go
new file mode 100644
index 000000000..62282aa4c
--- /dev/null
+++ b/frontend/services/namespaces.go
@@ -0,0 +1,178 @@
+package services
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+
+	"k8s.io/apimachinery/pkg/runtime/schema"
+
+	"golang.org/x/sync/errgroup"
+
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/common/utils"
+
+	"github.com/odigos-io/odigos/frontend/kube"
+	v1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type GetNamespacesResponse struct {
+	Namespaces []GetNamespaceItem `json:"namespaces"`
+}
+
+type GetNamespaceItem struct {
+	Name      string `json:"name"`
+	Selected  bool   `json:"selected"`
+	TotalApps int    `json:"totalApps"`
+}
+
+func GetK8SNamespaces(ctx context.Context, odigosns string) GetNamespacesResponse {
+
+	var (
+		relevantNameSpaces []v1.Namespace
+		appsPerNamespace   map[string]int
+	)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.Go(func() error {
+		var err error
+		relevantNameSpaces, err = getRelevantNameSpaces(ctx, odigosns)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		appsPerNamespace, err = CountAppsPerNamespace(ctx)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+
+		return GetNamespacesResponse{}
+	}
+
+	var response GetNamespacesResponse
+	for _, namespace := range relevantNameSpaces {
+		// check if entire namespace is instrumented
+		selected := namespace.Labels[consts.OdigosInstrumentationLabel] == consts.InstrumentationEnabled
+
+		response.Namespaces = append(response.Namespaces, GetNamespaceItem{
+			Name:      namespace.Name,
+			Selected:  selected,
+			TotalApps: appsPerNamespace[namespace.Name],
+		})
+	}
+
+	return response
+}
+
+// getRelevantNameSpaces returns a list of namespaces that are relevant for instrumentation.
+// Taking into account the ignored namespaces from the OdigosConfiguration.
+func getRelevantNameSpaces(ctx context.Context, odigosns string) ([]v1.Namespace, error) {
+	var (
+		odigosConfig *v1alpha1.OdigosConfiguration
+		list         *v1.NamespaceList
+	)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.Go(func() error {
+		var err error
+		odigosConfig, err = kube.DefaultClient.OdigosClient.OdigosConfigurations(odigosns).Get(ctx, consts.OdigosConfigurationName, metav1.GetOptions{})
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		list, err = kube.DefaultClient.CoreV1().Namespaces().List(ctx, metav1.ListOptions{})
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return []v1.Namespace{}, err
+	}
+
+	result := []v1.Namespace{}
+	for _, namespace := range list.Items {
+		if utils.IsItemIgnored(namespace.Name, odigosConfig.Spec.IgnoredNamespaces) {
+			continue
+		}
+
+		result = append(result, namespace)
+	}
+
+	return result, nil
+}
+
+type PersistNamespaceItem struct {
+	Name           string                   `json:"name"`
+	SelectedAll    bool                     `json:"selected_all"`
+	FutureSelected *bool                    `json:"future_selected,omitempty"`
+	Objects        []PersistNamespaceObject `json:"objects"`
+}
+
+type PersistNamespaceObject struct {
+	Name     string       `json:"name"`
+	Kind     WorkloadKind `json:"kind"`
+	Selected *bool        `json:"selected,omitempty"`
+}
+
+func getJsonMergePatchForInstrumentationLabel(enabled *bool) []byte {
+	labelJsonMergePatchValue := "null"
+	if enabled != nil {
+		if *enabled {
+			labelJsonMergePatchValue = fmt.Sprintf("\"%s\"", consts.InstrumentationEnabled)
+		} else {
+			labelJsonMergePatchValue = fmt.Sprintf("\"%s\"", consts.InstrumentationDisabled)
+		}
+	}
+
+	jsonMergePatchContent := fmt.Sprintf(`{"metadata":{"labels":{"%s":%s}}}`, consts.OdigosInstrumentationLabel, labelJsonMergePatchValue)
+	return []byte(jsonMergePatchContent)
+}
+
+func syncWorkloadsInNamespace(ctx context.Context, nsName string, workloads []PersistNamespaceObject) error {
+	g, ctx := errgroup.WithContext(ctx)
+	g.SetLimit(kube.K8sClientDefaultBurst)
+
+	for _, workload := range workloads {
+		currWorkload := workload
+		g.Go(func() error {
+			// Only label selected sources, ignore the rest
+			if currWorkload.Selected != nil && *currWorkload.Selected {
+				return setWorkloadInstrumentationLabel(ctx, nsName, currWorkload.Name, currWorkload.Kind, currWorkload.Selected)
+			}
+			return nil
+		})
+	}
+	return g.Wait()
+}
+
+// returns a map, where the key is a namespace name and the value is the
+// number of apps in this namespace (not necessarily instrumented)
+func CountAppsPerNamespace(ctx context.Context) (map[string]int, error) {
+	namespaceToAppsCount := make(map[string]int)
+
+	resourceTypes := []string{"deployments", "statefulsets", "daemonsets"}
+
+	for _, resourceType := range resourceTypes {
+		err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.MetadataClient.Resource(schema.GroupVersionResource{
+			Group:    "apps",
+			Version:  "v1",
+			Resource: resourceType,
+		}).List, ctx, metav1.ListOptions{}, func(list *metav1.PartialObjectMetadataList) error {
+			for _, item := range list.Items {
+				namespaceToAppsCount[item.Namespace]++
+			}
+			return nil
+		})
+
+		if err != nil {
+			return nil, fmt.Errorf("failed to count %s: %w", resourceType, err)
+		}
+	}
+
+	return namespaceToAppsCount, nil
+}
diff --git a/frontend/endpoints/actual-sources.go b/frontend/services/sources.go
similarity index 56%
rename from frontend/endpoints/actual-sources.go
rename to frontend/services/sources.go
index 237dbff86..65faf79d5 100644
--- a/frontend/endpoints/actual-sources.go
+++ b/frontend/services/sources.go
@@ -1,8 +1,9 @@
-package endpoints
+package services
 
 import (
 	"context"
 	"fmt"
+	"time"
 
 	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common/consts"
@@ -13,6 +14,38 @@ import (
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
+type SourceLanguage struct {
+	ContainerName string `json:"container_name"`
+	Language      string `json:"language"`
+}
+
+type InstrumentedApplicationDetails struct {
+	Languages  []SourceLanguage   `json:"languages,omitempty"`
+	Conditions []metav1.Condition `json:"conditions,omitempty"`
+}
+type SourceID struct {
+	// combination of namespace, kind and name is unique
+	Name      string `json:"name"`
+	Kind      string `json:"kind"`
+	Namespace string `json:"namespace"`
+}
+
+type Source struct {
+	ThinSource
+	ReportedName string `json:"reported_name,omitempty"`
+}
+
+type PatchSourceRequest struct {
+	ReportedName *string `json:"reported_name"`
+}
+
+// this object contains only part of the source fields. It is used to display the sources in the frontend
+type ThinSource struct {
+	SourceID
+	NumberOfRunningInstances int                             `json:"number_of_running_instances"`
+	IaDetails                *InstrumentedApplicationDetails `json:"instrumented_application_details"`
+}
+
 func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
 	return getSourcesForNamespace(ctx, odigosns)
 }
@@ -139,3 +172,72 @@ func getWorkload(c context.Context, ns string, kind string, name string) (metav1
 		return nil, 0
 	}
 }
+
+func addHealthyInstrumentationInstancesCondition(ctx context.Context, app *v1alpha1.InstrumentedApplication, source *ThinSource) error {
+	labelSelector := fmt.Sprintf("%s=%s", consts.InstrumentedAppNameLabel, app.Name)
+	instancesList, err := kube.DefaultClient.OdigosClient.InstrumentationInstances(app.Namespace).List(ctx, metav1.ListOptions{
+		LabelSelector: labelSelector,
+	})
+
+	if err != nil {
+		return err
+	}
+
+	totalInstances := len(instancesList.Items)
+	if totalInstances == 0 {
+		// no instances so nothing to report
+		return nil
+	}
+
+	healthyInstances := 0
+	latestStatusTime := metav1.NewTime(time.Time{})
+	for _, instance := range instancesList.Items {
+		if instance.Status.Healthy != nil && *instance.Status.Healthy {
+			healthyInstances++
+		}
+		if instance.Status.LastStatusTime.After(latestStatusTime.Time) {
+			latestStatusTime = instance.Status.LastStatusTime
+		}
+	}
+
+	status := metav1.ConditionTrue
+	if healthyInstances < totalInstances {
+		status = metav1.ConditionFalse
+	}
+
+	source.IaDetails.Conditions = append(source.IaDetails.Conditions, metav1.Condition{
+		Type:               "HealthyInstrumentationInstances",
+		Status:             status,
+		LastTransitionTime: latestStatusTime,
+		Message:            fmt.Sprintf("%d/%d instances are healthy", healthyInstances, totalInstances),
+	})
+
+	return nil
+}
+
+func k8sInstrumentedAppToThinSource(app *v1alpha1.InstrumentedApplication) ThinSource {
+	var source ThinSource
+	source.Name = app.OwnerReferences[0].Name
+	source.Kind = app.OwnerReferences[0].Kind
+	source.Namespace = app.Namespace
+	var conditions []metav1.Condition
+	for _, condition := range app.Status.Conditions {
+		conditions = append(conditions, metav1.Condition{
+			Type:               condition.Type,
+			Status:             condition.Status,
+			Message:            condition.Message,
+			LastTransitionTime: condition.LastTransitionTime,
+		})
+	}
+	source.IaDetails = &InstrumentedApplicationDetails{
+		Languages:  []SourceLanguage{},
+		Conditions: conditions,
+	}
+	for _, language := range app.Spec.RuntimeDetails {
+		source.IaDetails.Languages = append(source.IaDetails.Languages, SourceLanguage{
+			ContainerName: language.ContainerName,
+			Language:      string(language.Language),
+		})
+	}
+	return source
+}
diff --git a/frontend/services/utils.go b/frontend/services/utils.go
new file mode 100644
index 000000000..e41f28d6b
--- /dev/null
+++ b/frontend/services/utils.go
@@ -0,0 +1,52 @@
+package services
+
+import (
+	"context"
+	"errors"
+	"path"
+
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/kube"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/types"
+)
+
+const cdnUrl = "https://d15jtxgb40qetw.cloudfront.net"
+
+func GetImageURL(image string) string {
+	return path.Join(cdnUrl, image)
+}
+
+func setWorkloadInstrumentationLabel(ctx context.Context, nsName string, workloadName string, workloadKind WorkloadKind, enabled *bool) error {
+	jsonMergePatchData := getJsonMergePatchForInstrumentationLabel(enabled)
+
+	switch workloadKind {
+	case WorkloadKindDeployment:
+		_, err := kube.DefaultClient.AppsV1().Deployments(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	case WorkloadKindStatefulSet:
+		_, err := kube.DefaultClient.AppsV1().StatefulSets(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	case WorkloadKindDaemonSet:
+		_, err := kube.DefaultClient.AppsV1().DaemonSets(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	default:
+		return errors.New("unsupported workload kind " + string(workloadKind))
+	}
+}
+
+// getNsInstrumentedLabel return the instrumentation label of the object.
+// if the object is not labeled, it returns nil
+func isObjectLabeledForInstrumentation(metav metav1.ObjectMeta) *bool {
+	labels := metav.GetLabels()
+	if labels == nil {
+		return nil
+	}
+	namespaceInstrumented, found := labels[consts.OdigosInstrumentationLabel]
+	var nsInstrumentationLabeled *bool
+	if found {
+		instrumentationLabel := namespaceInstrumented == consts.InstrumentationEnabled
+		nsInstrumentationLabeled = &instrumentationLabel
+	}
+	return nsInstrumentationLabeled
+}

From f7f1a177feeaf204dd354968f8fa661f0981075a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 29 Jul 2024 15:19:14 +0300
Subject: [PATCH 114/374] chore: update endpoints

---
 frontend/gqlgen.yml                |   2 +
 frontend/graph/generated.go        | 141 +++++++++--------------------
 frontend/graph/model/models_gen.go |   1 -
 frontend/graph/schema.graphqls     |   3 +-
 frontend/graph/schema.resolvers.go |  16 +++-
 5 files changed, 60 insertions(+), 103 deletions(-)

diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
index 16744a23f..ec2e32555 100644
--- a/frontend/gqlgen.yml
+++ b/frontend/gqlgen.yml
@@ -39,5 +39,7 @@ models:
 
   ComputePlatform:
     fields:
+      k8sActualNamespace:
+        resolver: true
       k8sActualSource:
         resolver: true
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index f85cf9f8c..82ba75e52 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -50,7 +50,6 @@ type DirectiveRoot struct {
 type ComplexityRoot struct {
 	ComputePlatform struct {
 		ComputePlatformType func(childComplexity int) int
-		ID                  func(childComplexity int) int
 		K8sActualNamespace  func(childComplexity int, name string) int
 		K8sActualNamespaces func(childComplexity int) int
 		K8sActualSource     func(childComplexity int, name *string, namespace *string, kind *string) int
@@ -107,7 +106,7 @@ type ComplexityRoot struct {
 	}
 
 	Query struct {
-		ComputePlatform func(childComplexity int, cpID string) int
+		ComputePlatform func(childComplexity int) int
 		Config          func(childComplexity int) int
 	}
 
@@ -118,13 +117,15 @@ type ComplexityRoot struct {
 }
 
 type ComputePlatformResolver interface {
+	K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error)
+
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
 }
 type MutationResolver interface {
 	CreateK8sDesiredNamespace(ctx context.Context, cpID string, namespace model.K8sDesiredNamespaceInput) (*model.K8sActualNamespace, error)
 }
 type QueryResolver interface {
-	ComputePlatform(ctx context.Context, cpID string) (*model.ComputePlatform, error)
+	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
 	Config(ctx context.Context) (*model.GetConfigResponse, error)
 }
 
@@ -154,13 +155,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ComputePlatform.ComputePlatformType(childComplexity), true
 
-	case "ComputePlatform.id":
-		if e.complexity.ComputePlatform.ID == nil {
-			break
-		}
-
-		return e.complexity.ComputePlatform.ID(childComplexity), true
-
 	case "ComputePlatform.k8sActualNamespace":
 		if e.complexity.ComputePlatform.K8sActualNamespace == nil {
 			break
@@ -384,12 +378,7 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 			break
 		}
 
-		args, err := ec.field_Query_computePlatform_args(context.TODO(), rawArgs)
-		if err != nil {
-			return 0, false
-		}
-
-		return e.complexity.Query.ComputePlatform(childComplexity, args["cpId"].(string)), true
+		return e.complexity.Query.ComputePlatform(childComplexity), true
 
 	case "Query.config":
 		if e.complexity.Query.Config == nil {
@@ -627,21 +616,6 @@ func (ec *executionContext) field_Query___type_args(ctx context.Context, rawArgs
 	return args, nil
 }
 
-func (ec *executionContext) field_Query_computePlatform_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
-	var err error
-	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	return args, nil
-}
-
 func (ec *executionContext) field___Type_enumValues_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -680,50 +654,6 @@ func (ec *executionContext) field___Type_fields_args(ctx context.Context, rawArg
 
 // region    **************************** field.gotpl *****************************
 
-func (ec *executionContext) _ComputePlatform_id(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_id(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.ID, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNID2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_ComputePlatform_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ID does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _ComputePlatform_name(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_ComputePlatform_name(ctx, field)
 	if err != nil {
@@ -823,7 +753,7 @@ func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.K8sActualNamespace, nil
+		return ec.resolvers.ComputePlatform().K8sActualNamespace(rctx, obj, fc.Args["name"].(string))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -841,8 +771,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespace(ctx
 	fc = &graphql.FieldContext{
 		Object:     "ComputePlatform",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
 			case "name":
@@ -2157,7 +2087,7 @@ func (ec *executionContext) _Query_computePlatform(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().ComputePlatform(rctx, fc.Args["cpId"].(string))
+		return ec.resolvers.Query().ComputePlatform(rctx)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2171,7 +2101,7 @@ func (ec *executionContext) _Query_computePlatform(ctx context.Context, field gr
 	return ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Query_computePlatform(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query_computePlatform(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "Query",
 		Field:      field,
@@ -2179,8 +2109,6 @@ func (ec *executionContext) fieldContext_Query_computePlatform(ctx context.Conte
 		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "id":
-				return ec.fieldContext_ComputePlatform_id(ctx, field)
 			case "name":
 				return ec.fieldContext_ComputePlatform_name(ctx, field)
 			case "computePlatformType":
@@ -2197,17 +2125,6 @@ func (ec *executionContext) fieldContext_Query_computePlatform(ctx context.Conte
 			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Query_computePlatform_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
@@ -4394,11 +4311,6 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 		switch field.Name {
 		case "__typename":
 			out.Values[i] = graphql.MarshalString("ComputePlatform")
-		case "id":
-			out.Values[i] = ec._ComputePlatform_id(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
 		case "name":
 			out.Values[i] = ec._ComputePlatform_name(ctx, field, obj)
 		case "computePlatformType":
@@ -4407,7 +4319,38 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "k8sActualNamespace":
-			out.Values[i] = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "k8sActualNamespaces":
 			out.Values[i] = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 53ab6b877..f171a4d40 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -9,7 +9,6 @@ import (
 )
 
 type ComputePlatform struct {
-	ID                  string                `json:"id"`
 	Name                *string               `json:"name,omitempty"`
 	ComputePlatformType ComputePlatformType   `json:"computePlatformType"`
 	K8sActualNamespace  *K8sActualNamespace   `json:"k8sActualNamespace,omitempty"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 09ed84053..52f97fb1e 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -107,7 +107,6 @@ input K8sSourceId {
 }
 
 type ComputePlatform {
-  id: ID!
   name: String
   computePlatformType: ComputePlatformType!
   k8sActualNamespace(name: String!): K8sActualNamespace
@@ -127,7 +126,7 @@ type GetConfigResponse {
 }
 
 type Query {
-  computePlatform(cpId: ID!): ComputePlatform
+  computePlatform: ComputePlatform
   config: GetConfigResponse
 }
 
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 8e0f8a886..802c0bcb5 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -13,6 +13,20 @@ import (
 	"github.com/odigos-io/odigos/frontend/services"
 )
 
+// K8sActualNamespace is the resolver for the k8sActualNamespace field.
+func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error) {
+	namespaceActualSources := services.GetApplicationsInK8SNamespace(ctx, name)
+	namespaceSources := make([]*model.K8sActualSource, len(namespaceActualSources))
+	for i, source := range namespaceActualSources {
+		namespaceSources[i] = k8sApplicationItemToGql(&source)
+	}
+
+	return &model.K8sActualNamespace{
+		Name:             name,
+		K8sActualSources: namespaceSources,
+	}, nil
+}
+
 // K8sActualSource is the resolver for the k8sActualSource field.
 func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error) {
 	source, err := services.GetActualSource(ctx, *namespace, *kind, *name)
@@ -33,7 +47,7 @@ func (r *mutationResolver) CreateK8sDesiredNamespace(ctx context.Context, cpID s
 }
 
 // ComputePlatform is the resolver for the computePlatform field.
-func (r *queryResolver) ComputePlatform(ctx context.Context, cpID string) (*model.ComputePlatform, error) {
+func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
 	k8sActualSources := services.GetActualSources(ctx, "odigos-system")
 	res := make([]*model.K8sActualSource, len(k8sActualSources))
 	for i, source := range k8sActualSources {

From a03598468020f592718622a4af66c36141359f0d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 29 Jul 2024 15:25:38 +0300
Subject: [PATCH 115/374] chore: wip

---
 frontend/graph/generated.go        | 376 -----------------------------
 frontend/graph/model/models_gen.go |  11 -
 frontend/graph/schema.graphqls     |   9 -
 3 files changed, 396 deletions(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 82ba75e52..11883d247 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -81,8 +81,6 @@ type ComplexityRoot struct {
 	}
 
 	K8sActualSource struct {
-		AutoInstrumented               func(childComplexity int) int
-		CreationTimestamp              func(childComplexity int) int
 		HasInstrumentedApplication     func(childComplexity int) int
 		InstrumentedApplicationDetails func(childComplexity int) int
 		Kind                           func(childComplexity int) int
@@ -92,15 +90,6 @@ type ComplexityRoot struct {
 		ServiceName                    func(childComplexity int) int
 	}
 
-	K8sActualSourceRuntimeInfo struct {
-		MainContainer func(childComplexity int) int
-	}
-
-	K8sActualSourceRuntimeInfoContainer struct {
-		ContainerName func(childComplexity int) int
-		Language      func(childComplexity int) int
-	}
-
 	Mutation struct {
 		CreateK8sDesiredNamespace func(childComplexity int, cpID string, namespace model.K8sDesiredNamespaceInput) int
 	}
@@ -277,20 +266,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualNamespace.Name(childComplexity), true
 
-	case "K8sActualSource.autoInstrumented":
-		if e.complexity.K8sActualSource.AutoInstrumented == nil {
-			break
-		}
-
-		return e.complexity.K8sActualSource.AutoInstrumented(childComplexity), true
-
-	case "K8sActualSource.creationTimestamp":
-		if e.complexity.K8sActualSource.CreationTimestamp == nil {
-			break
-		}
-
-		return e.complexity.K8sActualSource.CreationTimestamp(childComplexity), true
-
 	case "K8sActualSource.hasInstrumentedApplication":
 		if e.complexity.K8sActualSource.HasInstrumentedApplication == nil {
 			break
@@ -340,27 +315,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualSource.ServiceName(childComplexity), true
 
-	case "K8sActualSourceRuntimeInfo.mainContainer":
-		if e.complexity.K8sActualSourceRuntimeInfo.MainContainer == nil {
-			break
-		}
-
-		return e.complexity.K8sActualSourceRuntimeInfo.MainContainer(childComplexity), true
-
-	case "K8sActualSourceRuntimeInfoContainer.containerName":
-		if e.complexity.K8sActualSourceRuntimeInfoContainer.ContainerName == nil {
-			break
-		}
-
-		return e.complexity.K8sActualSourceRuntimeInfoContainer.ContainerName(childComplexity), true
-
-	case "K8sActualSourceRuntimeInfoContainer.language":
-		if e.complexity.K8sActualSourceRuntimeInfoContainer.Language == nil {
-			break
-		}
-
-		return e.complexity.K8sActualSourceRuntimeInfoContainer.Language(childComplexity), true
-
 	case "Mutation.createK8sDesiredNamespace":
 		if e.complexity.Mutation.CreateK8sDesiredNamespace == nil {
 			break
@@ -895,10 +849,6 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx con
 				return ec.fieldContext_K8sActualSource_name(ctx, field)
 			case "serviceName":
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "creationTimestamp":
-				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 			case "hasInstrumentedApplication":
@@ -970,10 +920,6 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ cont
 				return ec.fieldContext_K8sActualSource_name(ctx, field)
 			case "serviceName":
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "creationTimestamp":
-				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 			case "hasInstrumentedApplication":
@@ -1474,10 +1420,6 @@ func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(_ c
 				return ec.fieldContext_K8sActualSource_name(ctx, field)
 			case "serviceName":
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "creationTimestamp":
-				return ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 			case "hasInstrumentedApplication":
@@ -1664,88 +1606,6 @@ func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.C
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.AutoInstrumented, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*bool)
-	fc.Result = res
-	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _K8sActualSource_creationTimestamp(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_creationTimestamp(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.CreationTimestamp, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_K8sActualSource_creationTimestamp(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 	if err != nil {
@@ -1878,141 +1738,6 @@ func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplication
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSourceRuntimeInfo_mainContainer(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfo) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfo_mainContainer(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.MainContainer, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*model.K8sActualSourceRuntimeInfoContainer)
-	fc.Result = res
-	return ec.marshalOK8sActualSourceRuntimeInfoContainer2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSourceRuntimeInfoContainer(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfo_mainContainer(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "K8sActualSourceRuntimeInfo",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "containerName":
-				return ec.fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(ctx, field)
-			case "language":
-				return ec.fieldContext_K8sActualSourceRuntimeInfoContainer_language(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSourceRuntimeInfoContainer", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_containerName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfoContainer) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.ContainerName, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfoContainer_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "K8sActualSourceRuntimeInfoContainer",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer_language(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSourceRuntimeInfoContainer) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSourceRuntimeInfoContainer_language(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Language, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(model.ProgrammingLanguage)
-	fc.Result = res
-	return ec.marshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_K8sActualSourceRuntimeInfoContainer_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "K8sActualSourceRuntimeInfoContainer",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ProgrammingLanguage does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Mutation_createK8sDesiredNamespace(ctx, field)
 	if err != nil {
@@ -4618,10 +4343,6 @@ func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.Select
 			}
 		case "serviceName":
 			out.Values[i] = ec._K8sActualSource_serviceName(ctx, field, obj)
-		case "autoInstrumented":
-			out.Values[i] = ec._K8sActualSource_autoInstrumented(ctx, field, obj)
-		case "creationTimestamp":
-			out.Values[i] = ec._K8sActualSource_creationTimestamp(ctx, field, obj)
 		case "numberOfInstances":
 			out.Values[i] = ec._K8sActualSource_numberOfInstances(ctx, field, obj)
 		case "hasInstrumentedApplication":
@@ -4654,86 +4375,6 @@ func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.Select
 	return out
 }
 
-var k8sActualSourceRuntimeInfoImplementors = []string{"K8sActualSourceRuntimeInfo"}
-
-func (ec *executionContext) _K8sActualSourceRuntimeInfo(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSourceRuntimeInfo) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceRuntimeInfoImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("K8sActualSourceRuntimeInfo")
-		case "mainContainer":
-			out.Values[i] = ec._K8sActualSourceRuntimeInfo_mainContainer(ctx, field, obj)
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var k8sActualSourceRuntimeInfoContainerImplementors = []string{"K8sActualSourceRuntimeInfoContainer"}
-
-func (ec *executionContext) _K8sActualSourceRuntimeInfoContainer(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSourceRuntimeInfoContainer) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceRuntimeInfoContainerImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("K8sActualSourceRuntimeInfoContainer")
-		case "containerName":
-			out.Values[i] = ec._K8sActualSourceRuntimeInfoContainer_containerName(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "language":
-			out.Values[i] = ec._K8sActualSourceRuntimeInfoContainer_language(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
 var mutationImplementors = []string{"Mutation"}
 
 func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
@@ -5399,16 +5040,6 @@ func (ec *executionContext) marshalNK8sResourceKind2githubᚗcomᚋodigosᚑio
 	return v
 }
 
-func (ec *executionContext) unmarshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx context.Context, v interface{}) (model.ProgrammingLanguage, error) {
-	var res model.ProgrammingLanguage
-	err := res.UnmarshalGQL(v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
-
-func (ec *executionContext) marshalNProgrammingLanguage2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx context.Context, sel ast.SelectionSet, v model.ProgrammingLanguage) graphql.Marshaler {
-	return v
-}
-
 func (ec *executionContext) marshalNSourceLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguage(ctx context.Context, sel ast.SelectionSet, v *model.SourceLanguage) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
@@ -5811,13 +5442,6 @@ func (ec *executionContext) marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑi
 	return ec._K8sActualSource(ctx, sel, v)
 }
 
-func (ec *executionContext) marshalOK8sActualSourceRuntimeInfoContainer2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSourceRuntimeInfoContainer(ctx context.Context, sel ast.SelectionSet, v *model.K8sActualSourceRuntimeInfoContainer) graphql.Marshaler {
-	if v == nil {
-		return graphql.Null
-	}
-	return ec._K8sActualSourceRuntimeInfoContainer(ctx, sel, v)
-}
-
 func (ec *executionContext) marshalOSourceLanguage2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguageᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.SourceLanguage) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index f171a4d40..691ef5938 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -45,22 +45,11 @@ type K8sActualSource struct {
 	Kind                           K8sResourceKind                 `json:"kind"`
 	Name                           string                          `json:"name"`
 	ServiceName                    *string                         `json:"serviceName,omitempty"`
-	AutoInstrumented               *bool                           `json:"autoInstrumented,omitempty"`
-	CreationTimestamp              *string                         `json:"creationTimestamp,omitempty"`
 	NumberOfInstances              *int                            `json:"numberOfInstances,omitempty"`
 	HasInstrumentedApplication     bool                            `json:"hasInstrumentedApplication"`
 	InstrumentedApplicationDetails *InstrumentedApplicationDetails `json:"instrumentedApplicationDetails,omitempty"`
 }
 
-type K8sActualSourceRuntimeInfo struct {
-	MainContainer *K8sActualSourceRuntimeInfoContainer `json:"mainContainer,omitempty"`
-}
-
-type K8sActualSourceRuntimeInfoContainer struct {
-	ContainerName string              `json:"containerName"`
-	Language      ProgrammingLanguage `json:"language"`
-}
-
 type K8sDesiredNamespaceInput struct {
 	AutoInstrument *bool `json:"autoInstrument,omitempty"`
 }
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 52f97fb1e..d4d67433c 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -80,21 +80,12 @@ type K8sActualSource {
   kind: K8sResourceKind!
   name: String!
   serviceName: String
-  autoInstrumented: Boolean
-  creationTimestamp: String
   numberOfInstances: Int
   # Odigos records an array of runtime infos.
   # currently we only keep the first one assuming it is the user's app.
   hasInstrumentedApplication: Boolean!
   instrumentedApplicationDetails: InstrumentedApplicationDetails
 }
-type K8sActualSourceRuntimeInfo {
-  mainContainer: K8sActualSourceRuntimeInfoContainer
-}
-type K8sActualSourceRuntimeInfoContainer {
-  containerName: String!
-  language: ProgrammingLanguage!
-}
 
 input K8sDesiredSourceInput {
   serviceName: String

From a89b7294247fe016e6f0b9b698aea3e4719a7e40 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 30 Jul 2024 10:54:00 +0300
Subject: [PATCH 116/374] chore: get source with namespace resolver

---
 frontend/endpoints/applications.go |  47 ++---
 frontend/endpoints/sources.go      |   8 +-
 frontend/gqlgen.yml                |   4 +
 frontend/graph/conversions.go      |  15 +-
 frontend/graph/generated.go        | 299 +++++++++++++++++++++--------
 frontend/graph/model/models_gen.go |  15 +-
 frontend/graph/schema.graphqls     |  19 +-
 frontend/graph/schema.resolvers.go |  63 +++---
 frontend/services/applications.go  | 195 -------------------
 frontend/services/namespaces.go    |  31 ---
 frontend/services/sources.go       | 227 +++++++++++++++-------
 frontend/services/utils.go         |  52 -----
 k8sutils/pkg/workload/workload.go  |  48 +++++
 13 files changed, 497 insertions(+), 526 deletions(-)
 delete mode 100644 frontend/services/applications.go
 delete mode 100644 frontend/services/utils.go

diff --git a/frontend/endpoints/applications.go b/frontend/endpoints/applications.go
index a29346cf0..0a71c5a39 100644
--- a/frontend/endpoints/applications.go
+++ b/frontend/endpoints/applications.go
@@ -31,12 +31,10 @@ const (
 )
 
 type GetApplicationItemInNamespace struct {
-	Name                      string       `json:"name"`
-	Kind                      WorkloadKind `json:"kind"`
-	Instances                 int          `json:"instances"`
-	AppInstrumentationLabeled *bool        `json:"app_instrumentation_labeled"`
-	NsInstrumentationLabeled  *bool        `json:"ns_instrumentation_labeled"`
-	InstrumentationEffective  bool         `json:"instrumentation_effective"`
+	Name            string       `json:"name"`
+	Kind            WorkloadKind `json:"kind"`
+	Instances       int          `json:"instances"`
+	WorkloadLabeled *bool        `json:"workload_labels"`
 }
 
 type GetApplicationItem struct {
@@ -113,19 +111,6 @@ func getApplicationsInNamespace(ctx context.Context, nsName string, nsInstrument
 	copy(items[len(deps):], ss)
 	copy(items[len(deps)+len(ss):], dss)
 
-	for i := range items {
-		item := &items[i]
-		// check if the entire namespace is instrumented
-		// as it affects the applications in the namespace
-		// which use this label to determine if they should be instrumented
-		nsInstrumentationLabeled := nsInstrumentedMap[item.namespace]
-		item.nsItem.NsInstrumentationLabeled = nsInstrumentationLabeled
-		appInstrumented := (item.nsItem.AppInstrumentationLabeled != nil && *item.nsItem.AppInstrumentationLabeled)
-		appInstrumentationInherited := item.nsItem.AppInstrumentationLabeled == nil
-		nsInstrumented := (nsInstrumentationLabeled != nil && *nsInstrumentationLabeled)
-		item.nsItem.InstrumentationEffective = appInstrumented || (appInstrumentationInherited && nsInstrumented)
-	}
-
 	return items, nil
 }
 
@@ -137,10 +122,10 @@ func getDeployments(namespace string, ctx context.Context) ([]GetApplicationItem
 			response = append(response, GetApplicationItem{
 				namespace: dep.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:                      dep.Name,
-					Kind:                      WorkloadKindDeployment,
-					Instances:                 int(dep.Status.AvailableReplicas),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
+					Name:            dep.Name,
+					Kind:            WorkloadKindDeployment,
+					Instances:       int(dep.Status.AvailableReplicas),
+					WorkloadLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
@@ -162,10 +147,10 @@ func getStatefulSets(namespace string, ctx context.Context) ([]GetApplicationIte
 			response = append(response, GetApplicationItem{
 				namespace: ss.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:                      ss.Name,
-					Kind:                      WorkloadKindStatefulSet,
-					Instances:                 int(ss.Status.ReadyReplicas),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
+					Name:            ss.Name,
+					Kind:            WorkloadKindStatefulSet,
+					Instances:       int(ss.Status.ReadyReplicas),
+					WorkloadLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
@@ -187,10 +172,10 @@ func getDaemonSets(namespace string, ctx context.Context) ([]GetApplicationItem,
 			response = append(response, GetApplicationItem{
 				namespace: ds.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:                      ds.Name,
-					Kind:                      WorkloadKindDaemonSet,
-					Instances:                 int(ds.Status.NumberReady),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
+					Name:            ds.Name,
+					Kind:            WorkloadKindDaemonSet,
+					Instances:       int(ds.Status.NumberReady),
+					WorkloadLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
diff --git a/frontend/endpoints/sources.go b/frontend/endpoints/sources.go
index 84cf0a367..3994b8d58 100644
--- a/frontend/endpoints/sources.go
+++ b/frontend/endpoints/sources.go
@@ -86,13 +86,7 @@ func GetSources(c *gin.Context, odigosns string) {
 	}
 
 	for _, item := range items {
-		if item.nsItem.InstrumentationEffective {
-			id := SourceID{Namespace: item.namespace, Kind: string(item.nsItem.Kind), Name: item.nsItem.Name}
-			effectiveInstrumentedSources[id] = ThinSource{
-				NumberOfRunningInstances: item.nsItem.Instances,
-				SourceID:                 id,
-			}
-		}
+		println(item.nsItem.Name)
 	}
 
 	sourcesResult := []ThinSource{}
diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
index ec2e32555..de1e87028 100644
--- a/frontend/gqlgen.yml
+++ b/frontend/gqlgen.yml
@@ -43,3 +43,7 @@ models:
         resolver: true
       k8sActualSource:
         resolver: true
+  K8sActualNamespace:
+    fields:
+      k8sActualSources:
+        resolver: true
diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
index 6f8cc6010..79e400002 100644
--- a/frontend/graph/conversions.go
+++ b/frontend/graph/conversions.go
@@ -48,12 +48,12 @@ func k8sThinSourceToGql(k8sSource *services.ThinSource) *gqlmodel.K8sActualSourc
 	var gqlIaDetails *gqlmodel.InstrumentedApplicationDetails
 	if hasInstrumentedApplication {
 		gqlIaDetails = &gqlmodel.InstrumentedApplicationDetails{
-			Languages:  make([]*gqlmodel.SourceLanguage, len(k8sSource.IaDetails.Languages)),
+			Containers: make([]*gqlmodel.SourceContainerRuntimeDetails, len(k8sSource.IaDetails.Languages)),
 			Conditions: make([]*gqlmodel.Condition, len(k8sSource.IaDetails.Conditions)),
 		}
 
 		for i, lang := range k8sSource.IaDetails.Languages {
-			gqlIaDetails.Languages[i] = &gqlmodel.SourceLanguage{
+			gqlIaDetails.Containers[i] = &gqlmodel.SourceContainerRuntimeDetails{
 				ContainerName: lang.ContainerName,
 				Language:      lang.Language,
 			}
@@ -90,14 +90,3 @@ func k8sSourceToGql(k8sSource *services.Source) *gqlmodel.K8sActualSource {
 		ServiceName:                    &k8sSource.ReportedName,
 	}
 }
-
-func k8sApplicationItemToGql(appItem *services.GetApplicationItemInNamespace) *gqlmodel.K8sActualSource {
-
-	stringKind := string(appItem.Kind)
-
-	return &gqlmodel.K8sActualSource{
-		Kind:              k8sKindToGql(stringKind),
-		Name:              appItem.Name,
-		NumberOfInstances: &appItem.Instances,
-	}
-}
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 11883d247..4fcf78c0a 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -40,6 +40,7 @@ type Config struct {
 
 type ResolverRoot interface {
 	ComputePlatform() ComputePlatformResolver
+	K8sActualNamespace() K8sActualNamespaceResolver
 	Mutation() MutationResolver
 	Query() QueryResolver
 }
@@ -71,17 +72,18 @@ type ComplexityRoot struct {
 
 	InstrumentedApplicationDetails struct {
 		Conditions func(childComplexity int) int
-		Languages  func(childComplexity int) int
+		Containers func(childComplexity int) int
 	}
 
 	K8sActualNamespace struct {
-		AutoInstrumented func(childComplexity int) int
-		K8sActualSources func(childComplexity int) int
-		Name             func(childComplexity int) int
+		InstrumentationLabelEnabled func(childComplexity int) int
+		K8sActualSources            func(childComplexity int, instrumentationLabeled *bool) int
+		Name                        func(childComplexity int) int
 	}
 
 	K8sActualSource struct {
-		HasInstrumentedApplication     func(childComplexity int) int
+		AutoInstrumented               func(childComplexity int) int
+		AutoInstrumentedDecision       func(childComplexity int) int
 		InstrumentedApplicationDetails func(childComplexity int) int
 		Kind                           func(childComplexity int) int
 		Name                           func(childComplexity int) int
@@ -99,7 +101,7 @@ type ComplexityRoot struct {
 		Config          func(childComplexity int) int
 	}
 
-	SourceLanguage struct {
+	SourceContainerRuntimeDetails struct {
 		ContainerName func(childComplexity int) int
 		Language      func(childComplexity int) int
 	}
@@ -110,6 +112,9 @@ type ComputePlatformResolver interface {
 
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
 }
+type K8sActualNamespaceResolver interface {
+	K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error)
+}
 type MutationResolver interface {
 	CreateK8sDesiredNamespace(ctx context.Context, cpID string, namespace model.K8sDesiredNamespaceInput) (*model.K8sActualNamespace, error)
 }
@@ -238,26 +243,31 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.InstrumentedApplicationDetails.Conditions(childComplexity), true
 
-	case "InstrumentedApplicationDetails.languages":
-		if e.complexity.InstrumentedApplicationDetails.Languages == nil {
+	case "InstrumentedApplicationDetails.containers":
+		if e.complexity.InstrumentedApplicationDetails.Containers == nil {
 			break
 		}
 
-		return e.complexity.InstrumentedApplicationDetails.Languages(childComplexity), true
+		return e.complexity.InstrumentedApplicationDetails.Containers(childComplexity), true
 
-	case "K8sActualNamespace.autoInstrumented":
-		if e.complexity.K8sActualNamespace.AutoInstrumented == nil {
+	case "K8sActualNamespace.instrumentationLabelEnabled":
+		if e.complexity.K8sActualNamespace.InstrumentationLabelEnabled == nil {
 			break
 		}
 
-		return e.complexity.K8sActualNamespace.AutoInstrumented(childComplexity), true
+		return e.complexity.K8sActualNamespace.InstrumentationLabelEnabled(childComplexity), true
 
 	case "K8sActualNamespace.k8sActualSources":
 		if e.complexity.K8sActualNamespace.K8sActualSources == nil {
 			break
 		}
 
-		return e.complexity.K8sActualNamespace.K8sActualSources(childComplexity), true
+		args, err := ec.field_K8sActualNamespace_k8sActualSources_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.K8sActualNamespace.K8sActualSources(childComplexity, args["instrumentationLabeled"].(*bool)), true
 
 	case "K8sActualNamespace.name":
 		if e.complexity.K8sActualNamespace.Name == nil {
@@ -266,12 +276,19 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualNamespace.Name(childComplexity), true
 
-	case "K8sActualSource.hasInstrumentedApplication":
-		if e.complexity.K8sActualSource.HasInstrumentedApplication == nil {
+	case "K8sActualSource.autoInstrumented":
+		if e.complexity.K8sActualSource.AutoInstrumented == nil {
 			break
 		}
 
-		return e.complexity.K8sActualSource.HasInstrumentedApplication(childComplexity), true
+		return e.complexity.K8sActualSource.AutoInstrumented(childComplexity), true
+
+	case "K8sActualSource.autoInstrumentedDecision":
+		if e.complexity.K8sActualSource.AutoInstrumentedDecision == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.AutoInstrumentedDecision(childComplexity), true
 
 	case "K8sActualSource.instrumentedApplicationDetails":
 		if e.complexity.K8sActualSource.InstrumentedApplicationDetails == nil {
@@ -341,19 +358,19 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.Config(childComplexity), true
 
-	case "SourceLanguage.containerName":
-		if e.complexity.SourceLanguage.ContainerName == nil {
+	case "SourceContainerRuntimeDetails.containerName":
+		if e.complexity.SourceContainerRuntimeDetails.ContainerName == nil {
 			break
 		}
 
-		return e.complexity.SourceLanguage.ContainerName(childComplexity), true
+		return e.complexity.SourceContainerRuntimeDetails.ContainerName(childComplexity), true
 
-	case "SourceLanguage.language":
-		if e.complexity.SourceLanguage.Language == nil {
+	case "SourceContainerRuntimeDetails.language":
+		if e.complexity.SourceContainerRuntimeDetails.Language == nil {
 			break
 		}
 
-		return e.complexity.SourceLanguage.Language(childComplexity), true
+		return e.complexity.SourceContainerRuntimeDetails.Language(childComplexity), true
 
 	}
 	return 0, false
@@ -531,6 +548,21 @@ func (ec *executionContext) field_ComputePlatform_k8sActualSource_args(ctx conte
 	return args, nil
 }
 
+func (ec *executionContext) field_K8sActualNamespace_k8sActualSources_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 *bool
+	if tmp, ok := rawArgs["instrumentationLabeled"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("instrumentationLabeled"))
+		arg0, err = ec.unmarshalOBoolean2ᚖbool(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["instrumentationLabeled"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_createK8sDesiredNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -731,8 +763,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespace(ctx
 			switch field.Name {
 			case "name":
 				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+			case "instrumentationLabelEnabled":
+				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
 			case "k8sActualSources":
 				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 			}
@@ -794,8 +826,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ c
 			switch field.Name {
 			case "name":
 				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+			case "instrumentationLabelEnabled":
+				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
 			case "k8sActualSources":
 				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 			}
@@ -851,8 +883,10 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx con
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "hasInstrumentedApplication":
-				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
 			case "instrumentedApplicationDetails":
 				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 			}
@@ -922,8 +956,10 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ cont
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "hasInstrumentedApplication":
-				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
 			case "instrumentedApplicationDetails":
 				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 			}
@@ -1188,8 +1224,8 @@ func (ec *executionContext) fieldContext_GetConfigResponse_installation(_ contex
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentedApplicationDetails_languages(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentedApplicationDetails_languages(ctx, field)
+func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1202,7 +1238,7 @@ func (ec *executionContext) _InstrumentedApplicationDetails_languages(ctx contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Languages, nil
+		return obj.Containers, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1211,12 +1247,12 @@ func (ec *executionContext) _InstrumentedApplicationDetails_languages(ctx contex
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.([]*model.SourceLanguage)
+	res := resTmp.([]*model.SourceContainerRuntimeDetails)
 	fc.Result = res
-	return ec.marshalOSourceLanguage2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguageᚄ(ctx, field.Selections, res)
+	return ec.marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_languages(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_containers(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "InstrumentedApplicationDetails",
 		Field:      field,
@@ -1225,11 +1261,11 @@ func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_language
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
 			case "containerName":
-				return ec.fieldContext_SourceLanguage_containerName(ctx, field)
+				return ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
 			case "language":
-				return ec.fieldContext_SourceLanguage_language(ctx, field)
+				return ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type SourceLanguage", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type SourceContainerRuntimeDetails", field.Name)
 		},
 	}
 	return fc, nil
@@ -1332,8 +1368,8 @@ func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Conte
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1346,7 +1382,7 @@ func (ec *executionContext) _K8sActualNamespace_autoInstrumented(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.AutoInstrumented, nil
+		return obj.InstrumentationLabelEnabled, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1360,7 +1396,7 @@ func (ec *executionContext) _K8sActualNamespace_autoInstrumented(ctx context.Con
 	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_instrumentationLabelEnabled(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "K8sActualNamespace",
 		Field:      field,
@@ -1387,7 +1423,7 @@ func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.K8sActualSources, nil
+		return ec.resolvers.K8sActualNamespace().K8sActualSources(rctx, obj, fc.Args["instrumentationLabeled"].(*bool))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1404,12 +1440,12 @@ func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Con
 	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "K8sActualNamespace",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
 			case "namespace":
@@ -1422,14 +1458,27 @@ func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(_ c
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "hasInstrumentedApplication":
-				return ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
 			case "instrumentedApplicationDetails":
 				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 			}
 			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_K8sActualNamespace_k8sActualSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
@@ -1647,8 +1696,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ con
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_hasInstrumentedApplication(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_hasInstrumentedApplication(ctx, field)
+func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1661,7 +1710,7 @@ func (ec *executionContext) _K8sActualSource_hasInstrumentedApplication(ctx cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.HasInstrumentedApplication, nil
+		return obj.AutoInstrumented, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1678,7 +1727,7 @@ func (ec *executionContext) _K8sActualSource_hasInstrumentedApplication(ctx cont
 	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_hasInstrumentedApplication(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "K8sActualSource",
 		Field:      field,
@@ -1691,6 +1740,50 @@ func (ec *executionContext) fieldContext_K8sActualSource_hasInstrumentedApplicat
 	return fc, nil
 }
 
+func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.AutoInstrumentedDecision, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumentedDecision(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 	if err != nil {
@@ -1727,8 +1820,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplication
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "languages":
-				return ec.fieldContext_InstrumentedApplicationDetails_languages(ctx, field)
+			case "containers":
+				return ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
 			case "conditions":
 				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
 			}
@@ -1776,8 +1869,8 @@ func (ec *executionContext) fieldContext_Mutation_createK8sDesiredNamespace(ctx
 			switch field.Name {
 			case "name":
 				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualNamespace_autoInstrumented(ctx, field)
+			case "instrumentationLabelEnabled":
+				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
 			case "k8sActualSources":
 				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 			}
@@ -2027,8 +2120,8 @@ func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field
 	return fc, nil
 }
 
-func (ec *executionContext) _SourceLanguage_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceLanguage) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SourceLanguage_containerName(ctx, field)
+func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2058,9 +2151,9 @@ func (ec *executionContext) _SourceLanguage_containerName(ctx context.Context, f
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SourceLanguage_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SourceLanguage",
+		Object:     "SourceContainerRuntimeDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -2071,8 +2164,8 @@ func (ec *executionContext) fieldContext_SourceLanguage_containerName(_ context.
 	return fc, nil
 }
 
-func (ec *executionContext) _SourceLanguage_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceLanguage) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SourceLanguage_language(ctx, field)
+func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2102,9 +2195,9 @@ func (ec *executionContext) _SourceLanguage_language(ctx context.Context, field
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SourceLanguage_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SourceLanguage",
+		Object:     "SourceContainerRuntimeDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -4242,8 +4335,8 @@ func (ec *executionContext) _InstrumentedApplicationDetails(ctx context.Context,
 		switch field.Name {
 		case "__typename":
 			out.Values[i] = graphql.MarshalString("InstrumentedApplicationDetails")
-		case "languages":
-			out.Values[i] = ec._InstrumentedApplicationDetails_languages(ctx, field, obj)
+		case "containers":
+			out.Values[i] = ec._InstrumentedApplicationDetails_containers(ctx, field, obj)
 		case "conditions":
 			out.Values[i] = ec._InstrumentedApplicationDetails_conditions(ctx, field, obj)
 		default:
@@ -4283,15 +4376,46 @@ func (ec *executionContext) _K8sActualNamespace(ctx context.Context, sel ast.Sel
 		case "name":
 			out.Values[i] = ec._K8sActualNamespace_name(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				out.Invalids++
+				atomic.AddUint32(&out.Invalids, 1)
 			}
-		case "autoInstrumented":
-			out.Values[i] = ec._K8sActualNamespace_autoInstrumented(ctx, field, obj)
+		case "instrumentationLabelEnabled":
+			out.Values[i] = ec._K8sActualNamespace_instrumentationLabelEnabled(ctx, field, obj)
 		case "k8sActualSources":
-			out.Values[i] = ec._K8sActualNamespace_k8sActualSources(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._K8sActualNamespace_k8sActualSources(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
 			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -4345,8 +4469,13 @@ func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.Select
 			out.Values[i] = ec._K8sActualSource_serviceName(ctx, field, obj)
 		case "numberOfInstances":
 			out.Values[i] = ec._K8sActualSource_numberOfInstances(ctx, field, obj)
-		case "hasInstrumentedApplication":
-			out.Values[i] = ec._K8sActualSource_hasInstrumentedApplication(ctx, field, obj)
+		case "autoInstrumented":
+			out.Values[i] = ec._K8sActualSource_autoInstrumented(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "autoInstrumentedDecision":
+			out.Values[i] = ec._K8sActualSource_autoInstrumentedDecision(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
@@ -4509,24 +4638,24 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 	return out
 }
 
-var sourceLanguageImplementors = []string{"SourceLanguage"}
+var sourceContainerRuntimeDetailsImplementors = []string{"SourceContainerRuntimeDetails"}
 
-func (ec *executionContext) _SourceLanguage(ctx context.Context, sel ast.SelectionSet, obj *model.SourceLanguage) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, sourceLanguageImplementors)
+func (ec *executionContext) _SourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, obj *model.SourceContainerRuntimeDetails) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, sourceContainerRuntimeDetailsImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("SourceLanguage")
+			out.Values[i] = graphql.MarshalString("SourceContainerRuntimeDetails")
 		case "containerName":
-			out.Values[i] = ec._SourceLanguage_containerName(ctx, field, obj)
+			out.Values[i] = ec._SourceContainerRuntimeDetails_containerName(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
 		case "language":
-			out.Values[i] = ec._SourceLanguage_language(ctx, field, obj)
+			out.Values[i] = ec._SourceContainerRuntimeDetails_language(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
@@ -5040,14 +5169,14 @@ func (ec *executionContext) marshalNK8sResourceKind2githubᚗcomᚋodigosᚑio
 	return v
 }
 
-func (ec *executionContext) marshalNSourceLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguage(ctx context.Context, sel ast.SelectionSet, v *model.SourceLanguage) graphql.Marshaler {
+func (ec *executionContext) marshalNSourceContainerRuntimeDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, v *model.SourceContainerRuntimeDetails) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
 			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
 		}
 		return graphql.Null
 	}
-	return ec._SourceLanguage(ctx, sel, v)
+	return ec._SourceContainerRuntimeDetails(ctx, sel, v)
 }
 
 func (ec *executionContext) unmarshalNString2string(ctx context.Context, v interface{}) (string, error) {
@@ -5442,7 +5571,7 @@ func (ec *executionContext) marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑi
 	return ec._K8sActualSource(ctx, sel, v)
 }
 
-func (ec *executionContext) marshalOSourceLanguage2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguageᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.SourceLanguage) graphql.Marshaler {
+func (ec *executionContext) marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.SourceContainerRuntimeDetails) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
 	}
@@ -5469,7 +5598,7 @@ func (ec *executionContext) marshalOSourceLanguage2ᚕᚖgithubᚗcomᚋodigos
 			if !isLen1 {
 				defer wg.Done()
 			}
-			ret[i] = ec.marshalNSourceLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceLanguage(ctx, sel, v[i])
+			ret[i] = ec.marshalNSourceContainerRuntimeDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetails(ctx, sel, v[i])
 		}
 		if isLen1 {
 			f(i)
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 691ef5938..8edb3f653 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -30,14 +30,14 @@ type GetConfigResponse struct {
 }
 
 type InstrumentedApplicationDetails struct {
-	Languages  []*SourceLanguage `json:"languages,omitempty"`
-	Conditions []*Condition      `json:"conditions,omitempty"`
+	Containers []*SourceContainerRuntimeDetails `json:"containers,omitempty"`
+	Conditions []*Condition                     `json:"conditions,omitempty"`
 }
 
 type K8sActualNamespace struct {
-	Name             string             `json:"name"`
-	AutoInstrumented *bool              `json:"autoInstrumented,omitempty"`
-	K8sActualSources []*K8sActualSource `json:"k8sActualSources"`
+	Name                        string             `json:"name"`
+	InstrumentationLabelEnabled *bool              `json:"instrumentationLabelEnabled,omitempty"`
+	K8sActualSources            []*K8sActualSource `json:"k8sActualSources"`
 }
 
 type K8sActualSource struct {
@@ -46,7 +46,8 @@ type K8sActualSource struct {
 	Name                           string                          `json:"name"`
 	ServiceName                    *string                         `json:"serviceName,omitempty"`
 	NumberOfInstances              *int                            `json:"numberOfInstances,omitempty"`
-	HasInstrumentedApplication     bool                            `json:"hasInstrumentedApplication"`
+	AutoInstrumented               bool                            `json:"autoInstrumented"`
+	AutoInstrumentedDecision       string                          `json:"autoInstrumentedDecision"`
 	InstrumentedApplicationDetails *InstrumentedApplicationDetails `json:"instrumentedApplicationDetails,omitempty"`
 }
 
@@ -75,7 +76,7 @@ type Mutation struct {
 type Query struct {
 }
 
-type SourceLanguage struct {
+type SourceContainerRuntimeDetails struct {
 	ContainerName string `json:"containerName"`
 	Language      string `json:"language"`
 }
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index d4d67433c..a13b96ca4 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -44,13 +44,13 @@ enum InstallationStatus {
   FINISHED
 }
 
-type SourceLanguage {
+type SourceContainerRuntimeDetails {
   containerName: String!
   language: String!
 }
 
 type InstrumentedApplicationDetails {
-  languages: [SourceLanguage!]
+  containers: [SourceContainerRuntimeDetails!]
   conditions: [Condition!]
 }
 
@@ -64,8 +64,14 @@ type Condition {
 
 type K8sActualNamespace {
   name: String!
-  autoInstrumented: Boolean
-  k8sActualSources: [K8sActualSource]!
+  instrumentationLabelEnabled: Boolean
+
+  # 1. if instrumentationLabeled = true, then only return sources that are labeled for instrumentation
+  # which means workload label is set to enabled, or workload label missing and ns label is set to enabled
+  # 2. if instrumentationLabeled = false, then return all sources which are not labeled for instrumentation.
+  # which means workload label is set to disabled, or workload label missing and ns label is not set to enabled
+  # 3. if instrumentationLabeled is not provided, then return all sources
+  k8sActualSources(instrumentationLabeled: Boolean): [K8sActualSource]!
 }
 
 input K8sDesiredNamespaceInput {
@@ -81,9 +87,8 @@ type K8sActualSource {
   name: String!
   serviceName: String
   numberOfInstances: Int
-  # Odigos records an array of runtime infos.
-  # currently we only keep the first one assuming it is the user's app.
-  hasInstrumentedApplication: Boolean!
+  autoInstrumented: Boolean!
+  autoInstrumentedDecision: String!
   instrumentedApplicationDetails: InstrumentedApplicationDetails
 }
 
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 802c0bcb5..dec5ce7dd 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -10,20 +10,36 @@ import (
 
 	"github.com/odigos-io/odigos/frontend/endpoints"
 	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
 	"github.com/odigos-io/odigos/frontend/services"
+	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
 // K8sActualNamespace is the resolver for the k8sActualNamespace field.
 func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error) {
-	namespaceActualSources := services.GetApplicationsInK8SNamespace(ctx, name)
-	namespaceSources := make([]*model.K8sActualSource, len(namespaceActualSources))
+	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	// Convert namespaceActualSources to []*model.K8sActualSource
+	namespaceActualSourcesPointers := make([]*model.K8sActualSource, len(namespaceActualSources))
 	for i, source := range namespaceActualSources {
-		namespaceSources[i] = k8sApplicationItemToGql(&source)
+		namespaceActualSourcesPointers[i] = &source
+	}
+
+	namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, name, metav1.GetOptions{})
+	if err != nil {
+		return nil, err
 	}
 
+	nsInstrumented := workload.GetInstrumentationLabelValue(namespace.GetLabels())
+
 	return &model.K8sActualNamespace{
-		Name:             name,
-		K8sActualSources: namespaceSources,
+		Name:                        name,
+		InstrumentationLabelEnabled: nsInstrumented,
+		K8sActualSources:            namespaceActualSourcesPointers,
 	}, nil
 }
 
@@ -41,6 +57,11 @@ func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *mode
 	return k8sActualSource, nil
 }
 
+// K8sActualSources is the resolver for the k8sActualSources field.
+func (r *k8sActualNamespaceResolver) K8sActualSources(ctx context.Context, ns *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error) {
+	return ns.K8sActualSources, nil
+}
+
 // CreateK8sDesiredNamespace is the resolver for the createK8sDesiredNamespace field.
 func (r *mutationResolver) CreateK8sDesiredNamespace(ctx context.Context, cpID string, namespace model.K8sDesiredNamespaceInput) (*model.K8sActualNamespace, error) {
 	panic(fmt.Errorf("not implemented: CreateK8sDesiredNamespace - createK8sDesiredNamespace"))
@@ -48,35 +69,9 @@ func (r *mutationResolver) CreateK8sDesiredNamespace(ctx context.Context, cpID s
 
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
-	k8sActualSources := services.GetActualSources(ctx, "odigos-system")
-	res := make([]*model.K8sActualSource, len(k8sActualSources))
-	for i, source := range k8sActualSources {
-		res[i] = k8sThinSourceToGql(&source)
-	}
-
-	name := "odigos-system"
-	namespacesResponse := services.GetK8SNamespaces(ctx, name)
-
-	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
-
-	for i, namespace := range namespacesResponse.Namespaces {
-		namespaceActualSources := services.GetApplicationsInK8SNamespace(ctx, namespace.Name)
-		namespaceSources := make([]*model.K8sActualSource, len(namespaceActualSources))
-		for j, source := range namespaceActualSources {
-			namespaceSources[j] = k8sApplicationItemToGql(&source)
-		}
-
-		K8sActualNamespaces[i] = &model.K8sActualNamespace{
-			Name:             namespace.Name,
-			K8sActualSources: namespaceSources,
-		}
-	}
 
 	return &model.ComputePlatform{
-		K8sActualSources:    res,
-		Name:                &name,
 		ComputePlatformType: model.ComputePlatformTypeK8s,
-		K8sActualNamespaces: K8sActualNamespaces,
 	}, nil
 }
 
@@ -94,6 +89,11 @@ func (r *queryResolver) Config(ctx context.Context) (*model.GetConfigResponse, e
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
+// K8sActualNamespace returns K8sActualNamespaceResolver implementation.
+func (r *Resolver) K8sActualNamespace() K8sActualNamespaceResolver {
+	return &k8sActualNamespaceResolver{r}
+}
+
 // Mutation returns MutationResolver implementation.
 func (r *Resolver) Mutation() MutationResolver { return &mutationResolver{r} }
 
@@ -101,5 +101,6 @@ func (r *Resolver) Mutation() MutationResolver { return &mutationResolver{r} }
 func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
 
 type computePlatformResolver struct{ *Resolver }
+type k8sActualNamespaceResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
diff --git a/frontend/services/applications.go b/frontend/services/applications.go
deleted file mode 100644
index 012310216..000000000
--- a/frontend/services/applications.go
+++ /dev/null
@@ -1,195 +0,0 @@
-package services
-
-import (
-	"context"
-
-	appsv1 "k8s.io/api/apps/v1"
-
-	"github.com/odigos-io/odigos/k8sutils/pkg/client"
-
-	"github.com/odigos-io/odigos/frontend/kube"
-	"golang.org/x/sync/errgroup"
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-)
-
-type GetApplicationsInNamespaceRequest struct {
-	Namespace string `uri:"namespace" binding:"required"`
-}
-
-type GetApplicationsInNamespaceResponse struct {
-	Applications []GetApplicationItemInNamespace `json:"applications"`
-}
-
-type WorkloadKind string
-
-const (
-	WorkloadKindDeployment  WorkloadKind = "Deployment"
-	WorkloadKindStatefulSet WorkloadKind = "StatefulSet"
-	WorkloadKindDaemonSet   WorkloadKind = "DaemonSet"
-)
-
-type GetApplicationItemInNamespace struct {
-	Name                      string       `json:"name"`
-	Kind                      WorkloadKind `json:"kind"`
-	Instances                 int          `json:"instances"`
-	AppInstrumentationLabeled *bool        `json:"app_instrumentation_labeled"`
-	NsInstrumentationLabeled  *bool        `json:"ns_instrumentation_labeled"`
-	InstrumentationEffective  bool         `json:"instrumentation_effective"`
-}
-
-type GetApplicationItem struct {
-	// namespace is used when querying all the namespaces, the response can be grouped/filtered by namespace
-	namespace string
-	nsItem    GetApplicationItemInNamespace
-}
-
-func GetApplicationsInK8SNamespace(ctx context.Context, ns string) []GetApplicationItemInNamespace {
-
-	namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, ns, metav1.GetOptions{})
-	if err != nil {
-
-		return nil
-	}
-
-	items, err := getApplicationsInNamespace(ctx, namespace.Name, map[string]*bool{namespace.Name: isObjectLabeledForInstrumentation(namespace.ObjectMeta)})
-	if err != nil {
-
-		return nil
-	}
-
-	apps := make([]GetApplicationItemInNamespace, len(items))
-	for i, item := range items {
-		apps[i] = item.nsItem
-	}
-
-	return apps
-}
-
-// getApplicationsInNamespace returns all applications in the namespace and their instrumentation status.
-// nsName can be an empty string to get applications in all namespaces.
-// nsInstrumentedMap is a map of namespace name to a boolean pointer indicating if the namespace is instrumented.
-func getApplicationsInNamespace(ctx context.Context, nsName string, nsInstrumentedMap map[string]*bool) ([]GetApplicationItem, error) {
-	g, ctx := errgroup.WithContext(ctx)
-	var (
-		deps []GetApplicationItem
-		ss   []GetApplicationItem
-		dss  []GetApplicationItem
-	)
-
-	g.Go(func() error {
-		var err error
-		deps, err = getDeployments(nsName, ctx)
-		return err
-	})
-
-	g.Go(func() error {
-		var err error
-		ss, err = getStatefulSets(nsName, ctx)
-		return err
-	})
-
-	g.Go(func() error {
-		var err error
-		dss, err = getDaemonSets(nsName, ctx)
-		return err
-	})
-
-	if err := g.Wait(); err != nil {
-		return nil, err
-	}
-
-	items := make([]GetApplicationItem, len(deps)+len(ss)+len(dss))
-	copy(items, deps)
-	copy(items[len(deps):], ss)
-	copy(items[len(deps)+len(ss):], dss)
-
-	for i := range items {
-		item := &items[i]
-		// check if the entire namespace is instrumented
-		// as it affects the applications in the namespace
-		// which use this label to determine if they should be instrumented
-		nsInstrumentationLabeled := nsInstrumentedMap[item.namespace]
-		item.nsItem.NsInstrumentationLabeled = nsInstrumentationLabeled
-		appInstrumented := (item.nsItem.AppInstrumentationLabeled != nil && *item.nsItem.AppInstrumentationLabeled)
-		appInstrumentationInherited := item.nsItem.AppInstrumentationLabeled == nil
-		nsInstrumented := (nsInstrumentationLabeled != nil && *nsInstrumentationLabeled)
-		item.nsItem.InstrumentationEffective = appInstrumented || (appInstrumentationInherited && nsInstrumented)
-	}
-
-	return items, nil
-}
-
-func getDeployments(namespace string, ctx context.Context) ([]GetApplicationItem, error) {
-	var response []GetApplicationItem
-	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().Deployments(namespace).List, ctx, metav1.ListOptions{}, func(deps *appsv1.DeploymentList) error {
-		for _, dep := range deps.Items {
-			appInstrumentationLabeled := isObjectLabeledForInstrumentation(dep.ObjectMeta)
-			response = append(response, GetApplicationItem{
-				namespace: dep.Namespace,
-				nsItem: GetApplicationItemInNamespace{
-					Name:                      dep.Name,
-					Kind:                      WorkloadKindDeployment,
-					Instances:                 int(dep.Status.AvailableReplicas),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
-				},
-			})
-		}
-		return nil
-	})
-
-	if err != nil {
-		return nil, err
-	}
-
-	return response, nil
-}
-
-func getStatefulSets(namespace string, ctx context.Context) ([]GetApplicationItem, error) {
-	var response []GetApplicationItem
-	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().StatefulSets(namespace).List, ctx, metav1.ListOptions{}, func(sss *appsv1.StatefulSetList) error {
-		for _, ss := range sss.Items {
-			appInstrumentationLabeled := isObjectLabeledForInstrumentation(ss.ObjectMeta)
-			response = append(response, GetApplicationItem{
-				namespace: ss.Namespace,
-				nsItem: GetApplicationItemInNamespace{
-					Name:                      ss.Name,
-					Kind:                      WorkloadKindStatefulSet,
-					Instances:                 int(ss.Status.ReadyReplicas),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
-				},
-			})
-		}
-		return nil
-	})
-
-	if err != nil {
-		return nil, err
-	}
-
-	return response, nil
-}
-
-func getDaemonSets(namespace string, ctx context.Context) ([]GetApplicationItem, error) {
-	var response []GetApplicationItem
-	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().DaemonSets(namespace).List, ctx, metav1.ListOptions{}, func(dss *appsv1.DaemonSetList) error {
-		for _, ds := range dss.Items {
-			appInstrumentationLabeled := isObjectLabeledForInstrumentation(ds.ObjectMeta)
-			response = append(response, GetApplicationItem{
-				namespace: ds.Namespace,
-				nsItem: GetApplicationItemInNamespace{
-					Name:                      ds.Name,
-					Kind:                      WorkloadKindDaemonSet,
-					Instances:                 int(ds.Status.NumberReady),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
-				},
-			})
-		}
-		return nil
-	})
-
-	if err != nil {
-		return nil, err
-	}
-
-	return response, nil
-}
diff --git a/frontend/services/namespaces.go b/frontend/services/namespaces.go
index 62282aa4c..5eaca3efd 100644
--- a/frontend/services/namespaces.go
+++ b/frontend/services/namespaces.go
@@ -119,37 +119,6 @@ type PersistNamespaceObject struct {
 	Selected *bool        `json:"selected,omitempty"`
 }
 
-func getJsonMergePatchForInstrumentationLabel(enabled *bool) []byte {
-	labelJsonMergePatchValue := "null"
-	if enabled != nil {
-		if *enabled {
-			labelJsonMergePatchValue = fmt.Sprintf("\"%s\"", consts.InstrumentationEnabled)
-		} else {
-			labelJsonMergePatchValue = fmt.Sprintf("\"%s\"", consts.InstrumentationDisabled)
-		}
-	}
-
-	jsonMergePatchContent := fmt.Sprintf(`{"metadata":{"labels":{"%s":%s}}}`, consts.OdigosInstrumentationLabel, labelJsonMergePatchValue)
-	return []byte(jsonMergePatchContent)
-}
-
-func syncWorkloadsInNamespace(ctx context.Context, nsName string, workloads []PersistNamespaceObject) error {
-	g, ctx := errgroup.WithContext(ctx)
-	g.SetLimit(kube.K8sClientDefaultBurst)
-
-	for _, workload := range workloads {
-		currWorkload := workload
-		g.Go(func() error {
-			// Only label selected sources, ignore the rest
-			if currWorkload.Selected != nil && *currWorkload.Selected {
-				return setWorkloadInstrumentationLabel(ctx, nsName, currWorkload.Name, currWorkload.Kind, currWorkload.Selected)
-			}
-			return nil
-		})
-	}
-	return g.Wait()
-}
-
 // returns a map, where the key is a namespace name and the value is the
 // number of apps in this namespace (not necessarily instrumented)
 func CountAppsPerNamespace(ctx context.Context) (map[string]int, error) {
diff --git a/frontend/services/sources.go b/frontend/services/sources.go
index 65faf79d5..abdd8dbb1 100644
--- a/frontend/services/sources.go
+++ b/frontend/services/sources.go
@@ -10,8 +10,24 @@ import (
 	"github.com/odigos-io/odigos/frontend/kube"
 
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
-	"golang.org/x/sync/errgroup"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+
+	appsv1 "k8s.io/api/apps/v1"
+
+	"github.com/odigos-io/odigos/frontend/graph/model"
+
+	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+
+	"golang.org/x/sync/errgroup"
+	corev1 "k8s.io/api/core/v1"
+)
+
+type WorkloadKind string
+
+const (
+	WorkloadKindDeployment  WorkloadKind = "Deployment"
+	WorkloadKindStatefulSet WorkloadKind = "StatefulSet"
+	WorkloadKindDaemonSet   WorkloadKind = "DaemonSet"
 )
 
 type SourceLanguage struct {
@@ -46,72 +62,6 @@ type ThinSource struct {
 	IaDetails                *InstrumentedApplicationDetails `json:"instrumented_application_details"`
 }
 
-func GetActualSources(ctx context.Context, odigosns string) []ThinSource {
-	return getSourcesForNamespace(ctx, odigosns)
-}
-
-func GetNamespaceActualSources(ctx context.Context, namespace string) []ThinSource {
-	return getSourcesForNamespace(ctx, namespace)
-}
-
-func getSourcesForNamespace(ctx context.Context, namespace string) []ThinSource {
-	effectiveInstrumentedSources := map[SourceID]ThinSource{}
-
-	var (
-		items                    []GetApplicationItem
-		instrumentedApplications *v1alpha1.InstrumentedApplicationList
-	)
-
-	g, ctx := errgroup.WithContext(ctx)
-	g.Go(func() error {
-		relevantNamespaces, err := getRelevantNameSpaces(ctx, namespace)
-		if err != nil {
-			return err
-		}
-		nsInstrumentedMap := map[string]*bool{}
-		for _, ns := range relevantNamespaces {
-			nsInstrumentedMap[ns.Name] = isObjectLabeledForInstrumentation(ns.ObjectMeta)
-		}
-		items, err = getApplicationsInNamespace(ctx, "", nsInstrumentedMap)
-		return err
-	})
-
-	g.Go(func() error {
-		var err error
-		instrumentedApplications, err = kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
-		return err
-	})
-
-	if err := g.Wait(); err != nil {
-		return nil
-	}
-
-	for _, item := range items {
-		if item.nsItem.InstrumentationEffective {
-			id := SourceID{Namespace: item.namespace, Kind: string(item.nsItem.Kind), Name: item.nsItem.Name}
-			effectiveInstrumentedSources[id] = ThinSource{
-				NumberOfRunningInstances: item.nsItem.Instances,
-				SourceID:                 id,
-			}
-		}
-	}
-
-	sourcesResult := []ThinSource{}
-	for _, app := range instrumentedApplications.Items {
-		thinSource := k8sInstrumentedAppToThinSource(&app)
-		if source, ok := effectiveInstrumentedSources[thinSource.SourceID]; ok {
-			source.IaDetails = thinSource.IaDetails
-			effectiveInstrumentedSources[thinSource.SourceID] = source
-		}
-	}
-
-	for _, source := range effectiveInstrumentedSources {
-		sourcesResult = append(sourcesResult, source)
-	}
-
-	return sourcesResult
-}
-
 func GetActualSource(ctx context.Context, ns string, kind string, name string) (*Source, error) {
 	k8sObjectName := workload.GetRuntimeObjectName(name, kind)
 	owner, numberOfRunningInstances := getWorkload(ctx, ns, kind, name)
@@ -241,3 +191,146 @@ func k8sInstrumentedAppToThinSource(app *v1alpha1.InstrumentedApplication) ThinS
 	}
 	return source
 }
+
+func GetWorkloadsInNamespace(ctx context.Context, nsName string, instrumentationLabeled *bool) ([]model.K8sActualSource, error) {
+
+	namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, nsName, metav1.GetOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	g, ctx := errgroup.WithContext(ctx)
+	var (
+		deps []model.K8sActualSource
+		ss   []model.K8sActualSource
+		dss  []model.K8sActualSource
+	)
+
+	g.Go(func() error {
+		var err error
+		deps, err = getDeployments(ctx, *namespace, instrumentationLabeled)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		ss, err = getStatefulSets(ctx, *namespace, instrumentationLabeled)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		dss, err = getDaemonSets(ctx, *namespace, instrumentationLabeled)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
+	}
+
+	items := make([]model.K8sActualSource, len(deps)+len(ss)+len(dss))
+	copy(items, deps)
+	copy(items[len(deps):], ss)
+	copy(items[len(deps)+len(ss):], dss)
+
+	return items, nil
+}
+
+func getDeployments(ctx context.Context, namespace corev1.Namespace, instrumentationLabeled *bool) ([]model.K8sActualSource, error) {
+	var response []model.K8sActualSource
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().Deployments(namespace.Name).List, ctx, metav1.ListOptions{}, func(deps *appsv1.DeploymentList) error {
+		for _, dep := range deps.Items {
+			_, _, decisionText, autoInstrumented := workload.GetInstrumentationLabelTexts(dep.GetLabels(), string(WorkloadKindDeployment), namespace.GetLabels())
+			if instrumentationLabeled != nil && *instrumentationLabeled != autoInstrumented {
+				continue
+			}
+			numberOfInstances := int(dep.Status.ReadyReplicas)
+			response = append(response, model.K8sActualSource{
+				Namespace:                      dep.Namespace,
+				Name:                           dep.Name,
+				Kind:                           k8sKindToGql(string(WorkloadKindDeployment)),
+				NumberOfInstances:              &numberOfInstances,
+				AutoInstrumented:               autoInstrumented,
+				AutoInstrumentedDecision:       decisionText,
+				InstrumentedApplicationDetails: nil, // TODO: fill this
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
+
+func getDaemonSets(ctx context.Context, namespace corev1.Namespace, instrumentationLabeled *bool) ([]model.K8sActualSource, error) {
+	var response []model.K8sActualSource
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().DaemonSets(namespace.Name).List, ctx, metav1.ListOptions{}, func(dss *appsv1.DaemonSetList) error {
+		for _, ds := range dss.Items {
+			_, _, decisionText, autoInstrumented := workload.GetInstrumentationLabelTexts(ds.GetLabels(), string(WorkloadKindDaemonSet), namespace.GetLabels())
+			if instrumentationLabeled != nil && *instrumentationLabeled != autoInstrumented {
+				continue
+			}
+			numberOfInstances := int(ds.Status.NumberReady)
+			response = append(response, model.K8sActualSource{
+				Namespace:                      ds.Namespace,
+				Name:                           ds.Name,
+				Kind:                           k8sKindToGql(string(WorkloadKindDaemonSet)),
+				NumberOfInstances:              &numberOfInstances,
+				AutoInstrumented:               autoInstrumented,
+				AutoInstrumentedDecision:       decisionText,
+				InstrumentedApplicationDetails: nil, // TODO: fill this
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
+
+func getStatefulSets(ctx context.Context, namespace corev1.Namespace, instrumentationLabeled *bool) ([]model.K8sActualSource, error) {
+	var response []model.K8sActualSource
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().StatefulSets(namespace.Name).List, ctx, metav1.ListOptions{}, func(sss *appsv1.StatefulSetList) error {
+		for _, ss := range sss.Items {
+			_, _, decisionText, autoInstrumented := workload.GetInstrumentationLabelTexts(ss.GetLabels(), string(WorkloadKindStatefulSet), namespace.GetLabels())
+			if instrumentationLabeled != nil && *instrumentationLabeled != autoInstrumented {
+				continue
+			}
+			numberOfInstances := int(ss.Status.ReadyReplicas)
+			response = append(response, model.K8sActualSource{
+				Namespace:                      ss.Namespace,
+				Name:                           ss.Name,
+				Kind:                           k8sKindToGql(string(WorkloadKindStatefulSet)),
+				NumberOfInstances:              &numberOfInstances,
+				AutoInstrumented:               autoInstrumented,
+				AutoInstrumentedDecision:       decisionText,
+				InstrumentedApplicationDetails: nil, // TODO: fill this
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
+
+func k8sKindToGql(k8sResourceKind string) model.K8sResourceKind {
+	switch k8sResourceKind {
+	case "Deployment":
+		return model.K8sResourceKindDeployment
+	case "StatefulSet":
+		return model.K8sResourceKindStatefulSet
+	case "DaemonSet":
+		return model.K8sResourceKindDaemonSet
+	}
+	return ""
+}
diff --git a/frontend/services/utils.go b/frontend/services/utils.go
deleted file mode 100644
index e41f28d6b..000000000
--- a/frontend/services/utils.go
+++ /dev/null
@@ -1,52 +0,0 @@
-package services
-
-import (
-	"context"
-	"errors"
-	"path"
-
-	"github.com/odigos-io/odigos/common/consts"
-	"github.com/odigos-io/odigos/frontend/kube"
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-	"k8s.io/apimachinery/pkg/types"
-)
-
-const cdnUrl = "https://d15jtxgb40qetw.cloudfront.net"
-
-func GetImageURL(image string) string {
-	return path.Join(cdnUrl, image)
-}
-
-func setWorkloadInstrumentationLabel(ctx context.Context, nsName string, workloadName string, workloadKind WorkloadKind, enabled *bool) error {
-	jsonMergePatchData := getJsonMergePatchForInstrumentationLabel(enabled)
-
-	switch workloadKind {
-	case WorkloadKindDeployment:
-		_, err := kube.DefaultClient.AppsV1().Deployments(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
-		return err
-	case WorkloadKindStatefulSet:
-		_, err := kube.DefaultClient.AppsV1().StatefulSets(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
-		return err
-	case WorkloadKindDaemonSet:
-		_, err := kube.DefaultClient.AppsV1().DaemonSets(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
-		return err
-	default:
-		return errors.New("unsupported workload kind " + string(workloadKind))
-	}
-}
-
-// getNsInstrumentedLabel return the instrumentation label of the object.
-// if the object is not labeled, it returns nil
-func isObjectLabeledForInstrumentation(metav metav1.ObjectMeta) *bool {
-	labels := metav.GetLabels()
-	if labels == nil {
-		return nil
-	}
-	namespaceInstrumented, found := labels[consts.OdigosInstrumentationLabel]
-	var nsInstrumentationLabeled *bool
-	if found {
-		instrumentationLabel := namespaceInstrumented == consts.InstrumentationEnabled
-		nsInstrumentationLabeled = &instrumentationLabel
-	}
-	return nsInstrumentationLabeled
-}
diff --git a/k8sutils/pkg/workload/workload.go b/k8sutils/pkg/workload/workload.go
index be41b9d43..143bf3ba7 100644
--- a/k8sutils/pkg/workload/workload.go
+++ b/k8sutils/pkg/workload/workload.go
@@ -157,3 +157,51 @@ func IsInstrumentationDisabledExplicitly(obj client.Object) bool {
 
 	return false
 }
+
+func GetInstrumentationLabelValue(labels map[string]string) *bool {
+	if val, exists := labels[consts.OdigosInstrumentationLabel]; exists {
+		enabled := val == consts.InstrumentationEnabled
+		return &enabled
+	}
+
+	return nil
+}
+
+func GetInstrumentationLabelTexts(workloadLabels map[string]string, workloadKind string, nsLabels map[string]string) (workloadText, nsText, decisionText string, sourceInstrumented bool) {
+	workloadLabel, workloadFound := workloadLabels[consts.OdigosInstrumentationLabel]
+	nsLabel, nsFound := nsLabels[consts.OdigosInstrumentationLabel]
+
+	if workloadFound {
+		workloadText = consts.OdigosInstrumentationLabel + "=" + workloadLabel
+	} else {
+		workloadText = consts.OdigosInstrumentationLabel + " label not set"
+	}
+
+	if nsFound {
+		nsText = consts.OdigosInstrumentationLabel + "=" + nsLabel
+	} else {
+		nsText = consts.OdigosInstrumentationLabel + " label not set"
+	}
+
+	if workloadFound {
+		sourceInstrumented = workloadLabel == consts.InstrumentationEnabled
+		if sourceInstrumented {
+			decisionText = "Workload is instrumented because the " + workloadKind + " contains the label '" + consts.OdigosInstrumentationLabel + "=" + workloadLabel + "'"
+		} else {
+			decisionText = "Workload is NOT instrumented because the " + workloadKind + " contains the label '" + consts.OdigosInstrumentationLabel + "=" + workloadLabel + "'"
+		}
+	} else {
+		sourceInstrumented = nsLabel == consts.InstrumentationEnabled
+		if sourceInstrumented {
+			decisionText = "Workload is instrumented because the " + workloadKind + " is not labeled, and the namespace is labeled with '" + consts.OdigosInstrumentationLabel + "=" + nsLabel + "'"
+		} else {
+			if nsFound {
+				decisionText = "Workload is NOT instrumented because the " + workloadKind + " is not labeled, and the namespace is labeled with '" + consts.OdigosInstrumentationLabel + "=" + nsLabel + "'"
+			} else {
+				decisionText = "Workload is NOT instrumented because neither the workload nor the namespace has the '" + consts.OdigosInstrumentationLabel + "' label set"
+			}
+		}
+	}
+
+	return
+}

From 50f542d6fba94525d934a2a1060e32fcd539103b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 30 Jul 2024 11:46:12 +0300
Subject: [PATCH 117/374] chore: wip

---
 frontend/graph/schema.resolvers.go            |  9 ++++++
 frontend/services/namespaces.go               |  8 +++--
 .../main/sources/choose-sources/index.tsx     | 19 +++++++-----
 .../graphql/queries/compute-platform.ts       | 18 +++++++----
 .../webapp/hooks/compute-platform/index.ts    |  1 +
 .../compute-platform/useComputePlatform.ts    | 10 ++-----
 .../hooks/compute-platform/useNamespace.ts    | 30 +++++++++++++++++++
 frontend/webapp/types/compute-platform.ts     |  3 +-
 8 files changed, 75 insertions(+), 23 deletions(-)
 create mode 100644 frontend/webapp/hooks/compute-platform/useNamespace.ts

diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index dec5ce7dd..31f54457b 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -69,9 +69,18 @@ func (r *mutationResolver) CreateK8sDesiredNamespace(ctx context.Context, cpID s
 
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
+	namespacesResponse := services.GetK8SNamespaces(ctx)
+
+	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
+	for i, namespace := range namespacesResponse.Namespaces {
+		K8sActualNamespaces[i] = &model.K8sActualNamespace{
+			Name: namespace.Name,
+		}
+	}
 
 	return &model.ComputePlatform{
 		ComputePlatformType: model.ComputePlatformTypeK8s,
+		K8sActualNamespaces: K8sActualNamespaces,
 	}, nil
 }
 
diff --git a/frontend/services/namespaces.go b/frontend/services/namespaces.go
index 5eaca3efd..fc22b6baf 100644
--- a/frontend/services/namespaces.go
+++ b/frontend/services/namespaces.go
@@ -29,7 +29,11 @@ type GetNamespaceItem struct {
 	TotalApps int    `json:"totalApps"`
 }
 
-func GetK8SNamespaces(ctx context.Context, odigosns string) GetNamespacesResponse {
+const (
+	OdigosSystemNamespace = "odigos-system"
+)
+
+func GetK8SNamespaces(ctx context.Context) GetNamespacesResponse {
 
 	var (
 		relevantNameSpaces []v1.Namespace
@@ -39,7 +43,7 @@ func GetK8SNamespaces(ctx context.Context, odigosns string) GetNamespacesRespons
 	g, ctx := errgroup.WithContext(ctx)
 	g.Go(func() error {
 		var err error
-		relevantNameSpaces, err = getRelevantNameSpaces(ctx, odigosns)
+		relevantNameSpaces, err = getRelevantNameSpaces(ctx, OdigosSystemNamespace)
 		return err
 	})
 
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index dec62cc78..4357acff1 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useComputePlatform } from '@/hooks';
+import { useComputePlatform, useNamespace } from '@/hooks';
 import { SourcesList } from './choose-sources-list';
 import { SectionTitle, Divider } from '@/reuseable-components';
 import { DropdownOption, K8sActualNamespace, K8sActualSource } from '@/types';
@@ -20,12 +20,20 @@ export function ChooseSourcesContainer() {
   const [selectedItems, setSelectedItems] = useState<K8sActualSource[]>([]);
   const [namespacesList, setNamespacesList] = useState<DropdownOption[]>([]);
 
+  const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
+
   const { error, data } = useComputePlatform();
+  const { data: namespacesData } = useNamespace(selectedOption?.value);
 
   useEffect(() => {
     data && buildNamespacesList();
   }, [data, error]);
 
+  useEffect(() => {
+    console.log({ namespacesData });
+    namespacesData && setSourcesList(namespacesData.k8sActualSources || []);
+  }, [namespacesData]);
+
   useEffect(() => {
     selectAllCheckbox ? selectAllSources() : unselectAllSources();
   }, [selectAllCheckbox]);
@@ -51,11 +59,7 @@ export function ChooseSourcesContainer() {
   }
 
   function selectAllSources() {
-    const allSources =
-      data?.computePlatform?.k8sActualNamespaces.flatMap(
-        (namespace) => namespace.k8sActualSources
-      ) || [];
-    setSelectedItems(allSources);
+    setSelectedItems(sourcesList);
   }
 
   function unselectAllSources() {
@@ -63,8 +67,7 @@ export function ChooseSourcesContainer() {
   }
 
   function getVisibleSources() {
-    const allSources =
-      data?.computePlatform?.k8sActualNamespaces[0].k8sActualSources || [];
+    const allSources = sourcesList || [];
     const filteredSources = searchFilter
       ? filterSources(allSources)
       : allSources;
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 6d1f3244a..548549f8d 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -1,16 +1,24 @@
 import { gql } from '@apollo/client';
 
 export const GET_COMPUTE_PLATFORM = gql`
-  query GetComputePlatform($cpId: ID!) {
-    computePlatform(cpId: $cpId) {
-      id
+  query GetComputePlatform {
+    computePlatform {
       name
-      computePlatformType
       k8sActualNamespaces {
         name
+      }
+    }
+  }
+`;
+
+export const GET_NAMESPACES = gql`
+  query GetK8sActualNamespace($namespaceName: String!) {
+    computePlatform {
+      k8sActualNamespace(name: $namespaceName) {
+        name
         k8sActualSources {
-          name
           kind
+          name
           numberOfInstances
         }
       }
diff --git a/frontend/webapp/hooks/compute-platform/index.ts b/frontend/webapp/hooks/compute-platform/index.ts
index f535085ea..6023020f7 100644
--- a/frontend/webapp/hooks/compute-platform/index.ts
+++ b/frontend/webapp/hooks/compute-platform/index.ts
@@ -1 +1,2 @@
 export * from './useComputePlatform';
+export * from './useNamespace';
diff --git a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
index 76d9f00f6..805dc835f 100644
--- a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
+++ b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
@@ -1,6 +1,6 @@
 import { ComputePlatform } from '@/types';
 import { useQuery } from '@apollo/client';
-import { GET_COMPUTE_PLATFORM } from '@/graphql';
+import { GET_COMPUTE_PLATFORM, GET_NAMESPACES } from '@/graphql';
 
 type UseComputePlatformHook = {
   data?: ComputePlatform;
@@ -9,12 +9,8 @@ type UseComputePlatformHook = {
 };
 
 export const useComputePlatform = (): UseComputePlatformHook => {
-  const { data, loading, error } = useQuery<ComputePlatform>(
-    GET_COMPUTE_PLATFORM,
-    {
-      variables: { cpId: '1' },
-    }
-  );
+  const { data, loading, error } =
+    useQuery<ComputePlatform>(GET_COMPUTE_PLATFORM);
 
   return { data, loading, error };
 };
diff --git a/frontend/webapp/hooks/compute-platform/useNamespace.ts b/frontend/webapp/hooks/compute-platform/useNamespace.ts
new file mode 100644
index 000000000..beb415ee7
--- /dev/null
+++ b/frontend/webapp/hooks/compute-platform/useNamespace.ts
@@ -0,0 +1,30 @@
+import { useQuery } from '@apollo/client';
+import { GET_NAMESPACES } from '@/graphql';
+import { ComputePlatform, K8sActualNamespace } from '@/types';
+import { useEffect } from 'react';
+
+type UseNamespaceHook = {
+  data?: K8sActualNamespace;
+  loading: boolean;
+  error?: Error;
+};
+
+export const useNamespace = (
+  namespaceName: string | undefined
+): UseNamespaceHook => {
+  const { data, loading, error } = useQuery<ComputePlatform>(GET_NAMESPACES, {
+    skip: !namespaceName,
+    variables: { namespaceName },
+  });
+
+  useEffect(() => {
+    console.log({ data });
+    console.log({ error });
+  }, [data, error]);
+
+  return {
+    data: data?.computePlatform.k8sActualNamespace,
+    loading,
+    error,
+  };
+};
diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts
index e2233dadc..5bc647d63 100644
--- a/frontend/webapp/types/compute-platform.ts
+++ b/frontend/webapp/types/compute-platform.ts
@@ -1,13 +1,14 @@
 import { K8sActualSource } from './sources';
 export type K8sActualNamespace = {
   name: string;
-  k8sActualSources: K8sActualSource[];
+  k8sActualSources?: K8sActualSource[];
 };
 
 type ComputePlatformData = {
   id: string;
   name: string;
   computePlatformType: string;
+  k8sActualNamespace?: K8sActualNamespace;
   k8sActualNamespaces: K8sActualNamespace[];
 };
 

From 675eb6e1c92fb102fb49c9cf27c1c7af8cfc1132 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 30 Jul 2024 12:50:24 +0300
Subject: [PATCH 118/374] chore: select source step

---
 .../choose-sources-list/index.tsx             | 12 ++-----
 .../main/sources/choose-sources/index.tsx     | 32 ++++++++++++++-----
 .../hooks/compute-platform/useNamespace.ts    |  7 +---
 frontend/webapp/lib/gql/apollo-wrapper.tsx    |  3 ++
 .../reuseable-components/toggle/index.tsx     |  6 +++-
 5 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index 796bbe564..81c62b849 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -75,7 +75,7 @@ interface K8sActualSource {
 interface SourcesListProps {
   items: K8sActualSource[];
   selectedItems: K8sActualSource[];
-  setSelectedItems: React.Dispatch<React.SetStateAction<K8sActualSource[]>>;
+  setSelectedItems: (item: K8sActualSource) => void;
 }
 
 const SourcesList: React.FC<SourcesListProps> = ({
@@ -83,21 +83,13 @@ const SourcesList: React.FC<SourcesListProps> = ({
   selectedItems,
   setSelectedItems,
 }) => {
-  const handleItemClick = (item: K8sActualSource) => {
-    setSelectedItems((prevSelectedItems) =>
-      prevSelectedItems.includes(item)
-        ? prevSelectedItems.filter((selectedItem) => selectedItem !== item)
-        : [...prevSelectedItems, item]
-    );
-  };
-
   return (
     <Container>
       {items.map((item) => (
         <ListItem
           key={item.name}
           selected={selectedItems.includes(item)}
-          onClick={() => handleItemClick(item)}
+          onClick={() => setSelectedItems(item)}
         >
           <ListItemContent>
             <SourceIconWrapper>
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index 4357acff1..5b11bc670 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { useComputePlatform, useNamespace } from '@/hooks';
 import { SourcesList } from './choose-sources-list';
+import { useComputePlatform, useNamespace } from '@/hooks';
 import { SectionTitle, Divider } from '@/reuseable-components';
 import { DropdownOption, K8sActualNamespace, K8sActualSource } from '@/types';
 import { SearchAndDropdown, TogglesAndCheckboxes } from './choose-sources-menu';
 import {
-  SearchDropdownHandlers,
   SearchDropdownState,
-  ToggleCheckboxHandlers,
   ToggleCheckboxState,
+  SearchDropdownHandlers,
+  ToggleCheckboxHandlers,
 } from './choose-sources-menu/type';
 
 export function ChooseSourcesContainer() {
@@ -30,12 +30,11 @@ export function ChooseSourcesContainer() {
   }, [data, error]);
 
   useEffect(() => {
-    console.log({ namespacesData });
     namespacesData && setSourcesList(namespacesData.k8sActualSources || []);
   }, [namespacesData]);
 
   useEffect(() => {
-    selectAllCheckbox ? selectAllSources() : unselectAllSources();
+    selectAllCheckbox && selectAllSources();
   }, [selectAllCheckbox]);
 
   function buildNamespacesList() {
@@ -62,8 +61,25 @@ export function ChooseSourcesContainer() {
     setSelectedItems(sourcesList);
   }
 
-  function unselectAllSources() {
-    setSelectedItems([]);
+  function handleSelectItem(item: K8sActualSource) {
+    if (selectedItems.includes(item)) {
+      const updatedSelectedItems = selectedItems.filter(
+        (selectedItem) => selectedItem !== item
+      );
+      setSelectedItems(updatedSelectedItems);
+      if (
+        selectAllCheckbox &&
+        updatedSelectedItems.length !== sourcesList.length
+      ) {
+        setSelectAllCheckbox(false);
+      }
+    } else {
+      const updatedSelectedItems = [...selectedItems, item];
+      setSelectedItems(updatedSelectedItems);
+      if (updatedSelectedItems.length === sourcesList.length) {
+        setSelectAllCheckbox(true);
+      }
+    }
   }
 
   function getVisibleSources() {
@@ -119,7 +135,7 @@ export function ChooseSourcesContainer() {
       <Divider thickness={1} margin="16px 0 24px" />
       <SourcesList
         selectedItems={selectedItems}
-        setSelectedItems={setSelectedItems}
+        setSelectedItems={handleSelectItem}
         items={getVisibleSources()}
       />
     </>
diff --git a/frontend/webapp/hooks/compute-platform/useNamespace.ts b/frontend/webapp/hooks/compute-platform/useNamespace.ts
index beb415ee7..f8a3cf818 100644
--- a/frontend/webapp/hooks/compute-platform/useNamespace.ts
+++ b/frontend/webapp/hooks/compute-platform/useNamespace.ts
@@ -1,7 +1,6 @@
 import { useQuery } from '@apollo/client';
 import { GET_NAMESPACES } from '@/graphql';
 import { ComputePlatform, K8sActualNamespace } from '@/types';
-import { useEffect } from 'react';
 
 type UseNamespaceHook = {
   data?: K8sActualNamespace;
@@ -15,13 +14,9 @@ export const useNamespace = (
   const { data, loading, error } = useQuery<ComputePlatform>(GET_NAMESPACES, {
     skip: !namespaceName,
     variables: { namespaceName },
+    fetchPolicy: 'cache-first',
   });
 
-  useEffect(() => {
-    console.log({ data });
-    console.log({ error });
-  }, [data, error]);
-
   return {
     data: data?.computePlatform.k8sActualNamespace,
     loading,
diff --git a/frontend/webapp/lib/gql/apollo-wrapper.tsx b/frontend/webapp/lib/gql/apollo-wrapper.tsx
index 6ccd91e74..0bef52a51 100644
--- a/frontend/webapp/lib/gql/apollo-wrapper.tsx
+++ b/frontend/webapp/lib/gql/apollo-wrapper.tsx
@@ -27,6 +27,9 @@ function makeClient() {
 
   return new ApolloClient({
     cache: new InMemoryCache(),
+    devtools: {
+      enabled: true,
+    },
     link:
       typeof window === 'undefined'
         ? ApolloLink.from([
diff --git a/frontend/webapp/reuseable-components/toggle/index.tsx b/frontend/webapp/reuseable-components/toggle/index.tsx
index e3377c4a0..d0435143c 100644
--- a/frontend/webapp/reuseable-components/toggle/index.tsx
+++ b/frontend/webapp/reuseable-components/toggle/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import styled, { css } from 'styled-components';
 import { Tooltip } from '../tooltip';
@@ -54,6 +54,10 @@ const Toggle: React.FC<ToggleProps> = ({
 }) => {
   const [isActive, setIsActive] = useState(initialValue);
 
+  useEffect(() => {
+    setIsActive(initialValue);
+  }, [initialValue]);
+
   const handleToggle = () => {
     if (!disabled) {
       const newValue = !isActive;

From ab6daf0b59bc33f1d01779c131d533e4c584fdbd Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 30 Jul 2024 14:14:10 +0300
Subject: [PATCH 119/374] chore: init add destination

---
 .../app/setup/choose-destination/page.tsx     | 11 +++++
 .../components/setup/headers/header/index.tsx | 14 +++++-
 .../choose-destination-menu/index.tsx         |  0
 .../destinations-list/index.tsx               |  0
 .../destinations/choose-destination/index.tsx | 47 +++++++++++++++++++
 .../containers/main/destinations/index.tsx    |  1 +
 frontend/webapp/public/icons/common/plus.svg  |  3 ++
 .../reuseable-components/button/index.tsx     |  3 +-
 .../reuseable-components/text/index.tsx       |  5 ++
 9 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 frontend/webapp/app/setup/choose-destination/page.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/choose-destination/choose-destination-menu/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/choose-destination/index.tsx
 create mode 100644 frontend/webapp/public/icons/common/plus.svg

diff --git a/frontend/webapp/app/setup/choose-destination/page.tsx b/frontend/webapp/app/setup/choose-destination/page.tsx
new file mode 100644
index 000000000..9d2189d08
--- /dev/null
+++ b/frontend/webapp/app/setup/choose-destination/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+import { ChooseDestinationContainer } from '@/containers/main';
+import React from 'react';
+
+export default function ChooseDestinationPage() {
+  return (
+    <>
+      <ChooseDestinationContainer />
+    </>
+  );
+}
diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
index b1bfa77ec..29bd04789 100644
--- a/frontend/webapp/components/setup/headers/header/index.tsx
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -59,12 +59,22 @@ export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
             width={8}
             height={12}
           />
-          <Text color={theme.colors.secondary} size={14}>
+          <Text
+            color={theme.colors.secondary}
+            size={14}
+            decoration={'underline'}
+            family="secondary"
+          >
             BACK
           </Text>
         </HeaderButton>
         <HeaderButton variant="primary" onClick={onNext}>
-          <Text color={theme.colors.dark_grey} size={14}>
+          <Text
+            decoration={'underline'}
+            color={theme.colors.dark_grey}
+            size={14}
+            family="secondary"
+          >
             NEXT
           </Text>
           <Image
diff --git a/frontend/webapp/containers/main/destinations/choose-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/choose-destination-menu/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
new file mode 100644
index 000000000..95fe5ea0c
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { Button, SectionTitle, Text } from '@/reuseable-components';
+import styled from 'styled-components';
+import Image from 'next/image';
+import theme from '@/styles/theme';
+
+const AddDestinationButtonWrapper = styled.div`
+  width: 100%;
+  margin-top: 24px;
+`;
+
+const AddDestinationButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+`;
+
+export function ChooseDestinationContainer() {
+  return (
+    <>
+      <SectionTitle
+        title="Configure destinations"
+        description="Add backend destinations where collected data will be sent and configure their settings."
+      />
+      <AddDestinationButtonWrapper>
+        <AddDestinationButton variant="secondary">
+          <Image
+            src="/icons/common/plus.svg"
+            alt="back"
+            width={16}
+            height={16}
+          />
+          <Text
+            color={theme.colors.secondary}
+            size={14}
+            decoration={'underline'}
+            family="secondary"
+          >
+            ADD DESTINATION
+          </Text>
+        </AddDestinationButton>
+      </AddDestinationButtonWrapper>
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/main/destinations/index.tsx b/frontend/webapp/containers/main/destinations/index.tsx
index 8dd9a55e6..eef1f549b 100644
--- a/frontend/webapp/containers/main/destinations/index.tsx
+++ b/frontend/webapp/containers/main/destinations/index.tsx
@@ -1 +1,2 @@
 export * from './managed';
+export * from './choose-destination';
diff --git a/frontend/webapp/public/icons/common/plus.svg b/frontend/webapp/public/icons/common/plus.svg
new file mode 100644
index 000000000..2f6fad8b7
--- /dev/null
+++ b/frontend/webapp/public/icons/common/plus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M8.00016 13.0817V8.41508M8.00016 8.41508V3.74841M8.00016 8.41508L3.3335 8.41508M8.00016 8.41508L12.6668 8.41508" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 9ef4562a9..e4c3d3f18 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -26,7 +26,8 @@ const variantStyles = {
     border: 1px solid rgba(249, 249, 249, 0.24);
     border-radius: 32px;
     &:hover {
-      background: #151515bc;
+      border: 1px solid rgba(249, 249, 249, 0.32);
+      background: rgba(249, 249, 249, 0.04);
     }
     &:active {
       background: #1515158d;
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index a375ed19a..61c582f40 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -9,6 +9,7 @@ interface TextProps {
   align?: 'left' | 'center' | 'right';
   family?: 'primary' | 'secondary';
   opacity?: number;
+  decoration?: string;
 }
 
 const TextWrapper = styled.div<{
@@ -18,12 +19,14 @@ const TextWrapper = styled.div<{
   align: 'left' | 'center' | 'right';
   family?: 'primary' | 'secondary';
   opacity: number;
+  decoration?: string;
 }>`
   color: ${({ color, theme }) => color || theme.colors.text};
   font-size: ${({ size }) => size}px;
   font-weight: ${({ weight }) => weight};
   text-align: ${({ align }) => align};
   opacity: ${({ opacity }) => opacity};
+  text-decoration: ${({ decoration }) => decoration};
   font-family: ${({ theme, family }) => {
     if (family === 'primary') {
       return theme.font_family.primary;
@@ -43,6 +46,7 @@ const Text: React.FC<TextProps> = ({
   align = 'left',
   family = 'primary',
   opacity = 1,
+  decoration,
 }) => {
   return (
     <TextWrapper
@@ -52,6 +56,7 @@ const Text: React.FC<TextProps> = ({
       weight={weight}
       align={align}
       opacity={opacity}
+      decoration={decoration}
     >
       {children}
     </TextWrapper>

From 3359112ad181674b2a78686e7c94c944f484b282 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 30 Jul 2024 16:54:59 +0300
Subject: [PATCH 120/374] chore: get destination type

---
 frontend/gqlgen.yml                 |    5 +
 frontend/graph/generated.go         | 3879 ++++++++++++++++++++-------
 frontend/graph/model/destination.go |   48 +
 frontend/graph/schema.graphqls      |   52 +-
 frontend/graph/schema.resolvers.go  |   43 +-
 frontend/services/destinations.go   |   49 +
 frontend/services/utils.go          |    9 +
 7 files changed, 3103 insertions(+), 982 deletions(-)
 create mode 100644 frontend/graph/model/destination.go
 create mode 100644 frontend/services/destinations.go
 create mode 100644 frontend/services/utils.go

diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
index de1e87028..c4161c003 100644
--- a/frontend/gqlgen.yml
+++ b/frontend/gqlgen.yml
@@ -24,6 +24,11 @@ resolver:
   package: graph
   filename_template: '{name}.resolvers.go'
 
+# gqlgen will search for any type names in the schema in these go packages
+# if they match it will use them, otherwise it will generate them.
+autobind:
+  - 'github.com/odigos-io/odigos/frontend/graph/model'
+
 models:
   ID:
     model:
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 4fcf78c0a..ab9a757eb 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -40,6 +40,8 @@ type Config struct {
 
 type ResolverRoot interface {
 	ComputePlatform() ComputePlatformResolver
+	Destination() DestinationResolver
+	DestinationTypesCategoryItem() DestinationTypesCategoryItemResolver
 	K8sActualNamespace() K8sActualNamespaceResolver
 	Mutation() MutationResolver
 	Query() QueryResolver
@@ -66,10 +68,43 @@ type ComplexityRoot struct {
 		Type               func(childComplexity int) int
 	}
 
+	Destination struct {
+		Conditions      func(childComplexity int) int
+		DestinationType func(childComplexity int) int
+		ExportedSignals func(childComplexity int) int
+		Fields          func(childComplexity int) int
+		Id              func(childComplexity int) int
+		Name            func(childComplexity int) int
+		Type            func(childComplexity int) int
+	}
+
+	DestinationTypesCategoryItem struct {
+		DisplayName             func(childComplexity int) int
+		ImageUrl                func(childComplexity int) int
+		SupportedSignals        func(childComplexity int) int
+		TestConnectionSupported func(childComplexity int) int
+		Type                    func(childComplexity int) int
+	}
+
+	DestinationsCategory struct {
+		Items func(childComplexity int) int
+		Name  func(childComplexity int) int
+	}
+
+	ExportedSignals struct {
+		Logs    func(childComplexity int) int
+		Metrics func(childComplexity int) int
+		Traces  func(childComplexity int) int
+	}
+
 	GetConfigResponse struct {
 		Installation func(childComplexity int) int
 	}
 
+	GetDestinationTypesResponse struct {
+		Categories func(childComplexity int) int
+	}
+
 	InstrumentedApplicationDetails struct {
 		Conditions func(childComplexity int) int
 		Containers func(childComplexity int) int
@@ -96,15 +131,26 @@ type ComplexityRoot struct {
 		CreateK8sDesiredNamespace func(childComplexity int, cpID string, namespace model.K8sDesiredNamespaceInput) int
 	}
 
+	ObservabilitySignalSupport struct {
+		Supported func(childComplexity int) int
+	}
+
 	Query struct {
-		ComputePlatform func(childComplexity int) int
-		Config          func(childComplexity int) int
+		ComputePlatform  func(childComplexity int) int
+		Config           func(childComplexity int) int
+		DestinationTypes func(childComplexity int) int
 	}
 
 	SourceContainerRuntimeDetails struct {
 		ContainerName func(childComplexity int) int
 		Language      func(childComplexity int) int
 	}
+
+	SupportedSignals struct {
+		Logs    func(childComplexity int) int
+		Metrics func(childComplexity int) int
+		Traces  func(childComplexity int) int
+	}
 }
 
 type ComputePlatformResolver interface {
@@ -112,6 +158,16 @@ type ComputePlatformResolver interface {
 
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
 }
+type DestinationResolver interface {
+	Type(ctx context.Context, obj *model.Destination) (string, error)
+
+	Fields(ctx context.Context, obj *model.Destination) ([]string, error)
+
+	Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error)
+}
+type DestinationTypesCategoryItemResolver interface {
+	Type(ctx context.Context, obj *model.DestinationTypesCategoryItem) (string, error)
+}
 type K8sActualNamespaceResolver interface {
 	K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error)
 }
@@ -121,6 +177,7 @@ type MutationResolver interface {
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
 	Config(ctx context.Context) (*model.GetConfigResponse, error)
+	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
 }
 
 type executableSchema struct {
@@ -229,6 +286,125 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Condition.Type(childComplexity), true
 
+	case "Destination.conditions":
+		if e.complexity.Destination.Conditions == nil {
+			break
+		}
+
+		return e.complexity.Destination.Conditions(childComplexity), true
+
+	case "Destination.destinationType":
+		if e.complexity.Destination.DestinationType == nil {
+			break
+		}
+
+		return e.complexity.Destination.DestinationType(childComplexity), true
+
+	case "Destination.exportedSignals":
+		if e.complexity.Destination.ExportedSignals == nil {
+			break
+		}
+
+		return e.complexity.Destination.ExportedSignals(childComplexity), true
+
+	case "Destination.fields":
+		if e.complexity.Destination.Fields == nil {
+			break
+		}
+
+		return e.complexity.Destination.Fields(childComplexity), true
+
+	case "Destination.id":
+		if e.complexity.Destination.Id == nil {
+			break
+		}
+
+		return e.complexity.Destination.Id(childComplexity), true
+
+	case "Destination.name":
+		if e.complexity.Destination.Name == nil {
+			break
+		}
+
+		return e.complexity.Destination.Name(childComplexity), true
+
+	case "Destination.type":
+		if e.complexity.Destination.Type == nil {
+			break
+		}
+
+		return e.complexity.Destination.Type(childComplexity), true
+
+	case "DestinationTypesCategoryItem.displayName":
+		if e.complexity.DestinationTypesCategoryItem.DisplayName == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.DisplayName(childComplexity), true
+
+	case "DestinationTypesCategoryItem.imageUrl":
+		if e.complexity.DestinationTypesCategoryItem.ImageUrl == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.ImageUrl(childComplexity), true
+
+	case "DestinationTypesCategoryItem.supportedSignals":
+		if e.complexity.DestinationTypesCategoryItem.SupportedSignals == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.SupportedSignals(childComplexity), true
+
+	case "DestinationTypesCategoryItem.testConnectionSupported":
+		if e.complexity.DestinationTypesCategoryItem.TestConnectionSupported == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.TestConnectionSupported(childComplexity), true
+
+	case "DestinationTypesCategoryItem.type":
+		if e.complexity.DestinationTypesCategoryItem.Type == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.Type(childComplexity), true
+
+	case "DestinationsCategory.items":
+		if e.complexity.DestinationsCategory.Items == nil {
+			break
+		}
+
+		return e.complexity.DestinationsCategory.Items(childComplexity), true
+
+	case "DestinationsCategory.name":
+		if e.complexity.DestinationsCategory.Name == nil {
+			break
+		}
+
+		return e.complexity.DestinationsCategory.Name(childComplexity), true
+
+	case "ExportedSignals.logs":
+		if e.complexity.ExportedSignals.Logs == nil {
+			break
+		}
+
+		return e.complexity.ExportedSignals.Logs(childComplexity), true
+
+	case "ExportedSignals.metrics":
+		if e.complexity.ExportedSignals.Metrics == nil {
+			break
+		}
+
+		return e.complexity.ExportedSignals.Metrics(childComplexity), true
+
+	case "ExportedSignals.traces":
+		if e.complexity.ExportedSignals.Traces == nil {
+			break
+		}
+
+		return e.complexity.ExportedSignals.Traces(childComplexity), true
+
 	case "GetConfigResponse.installation":
 		if e.complexity.GetConfigResponse.Installation == nil {
 			break
@@ -236,6 +412,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.GetConfigResponse.Installation(childComplexity), true
 
+	case "GetDestinationTypesResponse.categories":
+		if e.complexity.GetDestinationTypesResponse.Categories == nil {
+			break
+		}
+
+		return e.complexity.GetDestinationTypesResponse.Categories(childComplexity), true
+
 	case "InstrumentedApplicationDetails.conditions":
 		if e.complexity.InstrumentedApplicationDetails.Conditions == nil {
 			break
@@ -344,6 +527,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.CreateK8sDesiredNamespace(childComplexity, args["cpId"].(string), args["namespace"].(model.K8sDesiredNamespaceInput)), true
 
+	case "ObservabilitySignalSupport.supported":
+		if e.complexity.ObservabilitySignalSupport.Supported == nil {
+			break
+		}
+
+		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
+
 	case "Query.computePlatform":
 		if e.complexity.Query.ComputePlatform == nil {
 			break
@@ -358,6 +548,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.Config(childComplexity), true
 
+	case "Query.destinationTypes":
+		if e.complexity.Query.DestinationTypes == nil {
+			break
+		}
+
+		return e.complexity.Query.DestinationTypes(childComplexity), true
+
 	case "SourceContainerRuntimeDetails.containerName":
 		if e.complexity.SourceContainerRuntimeDetails.ContainerName == nil {
 			break
@@ -372,6 +569,27 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.SourceContainerRuntimeDetails.Language(childComplexity), true
 
+	case "SupportedSignals.logs":
+		if e.complexity.SupportedSignals.Logs == nil {
+			break
+		}
+
+		return e.complexity.SupportedSignals.Logs(childComplexity), true
+
+	case "SupportedSignals.metrics":
+		if e.complexity.SupportedSignals.Metrics == nil {
+			break
+		}
+
+		return e.complexity.SupportedSignals.Metrics(childComplexity), true
+
+	case "SupportedSignals.traces":
+		if e.complexity.SupportedSignals.Traces == nil {
+			break
+		}
+
+		return e.complexity.SupportedSignals.Traces(childComplexity), true
+
 	}
 	return 0, false
 }
@@ -1180,8 +1398,8 @@ func (ec *executionContext) fieldContext_Condition_message(_ context.Context, fi
 	return fc, nil
 }
 
-func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context, field graphql.CollectedField, obj *model.GetConfigResponse) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_GetConfigResponse_installation(ctx, field)
+func (ec *executionContext) _Destination_id(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_id(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1194,7 +1412,7 @@ func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Installation, nil
+		return obj.Id, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1206,26 +1424,26 @@ func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context,
 		}
 		return graphql.Null
 	}
-	res := resTmp.(model.InstallationStatus)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx, field.Selections, res)
+	return ec.marshalNID2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_GetConfigResponse_installation(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Destination_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "GetConfigResponse",
+		Object:     "Destination",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type InstallationStatus does not have child fields")
+			return nil, errors.New("field of type ID does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
+func (ec *executionContext) _Destination_name(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1238,41 +1456,38 @@ func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Containers, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.SourceContainerRuntimeDetails)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_containers(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Destination_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentedApplicationDetails",
+		Object:     "Destination",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "containerName":
-				return ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
-			case "language":
-				return ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type SourceContainerRuntimeDetails", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+func (ec *executionContext) _Destination_type(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1285,47 +1500,38 @@ func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Conditions, nil
+		return ec.resolvers.Destination().Type(rctx, obj)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.Condition)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Destination_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentedApplicationDetails",
+		Object:     "Destination",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "type":
-				return ec.fieldContext_Condition_type(ctx, field)
-			case "status":
-				return ec.fieldContext_Condition_status(ctx, field)
-			case "lastTransitionTime":
-				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
-			case "reason":
-				return ec.fieldContext_Condition_reason(ctx, field)
-			case "message":
-				return ec.fieldContext_Condition_message(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
+func (ec *executionContext) _Destination_exportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_exportedSignals(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1338,7 +1544,7 @@ func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.ExportedSignals, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1350,26 +1556,34 @@ func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(model.ExportedSignals)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalNExportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignals(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Destination_exportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "Destination",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "traces":
+				return ec.fieldContext_ExportedSignals_traces(ctx, field)
+			case "metrics":
+				return ec.fieldContext_ExportedSignals_metrics(ctx, field)
+			case "logs":
+				return ec.fieldContext_ExportedSignals_logs(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ExportedSignals", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
+func (ec *executionContext) _Destination_fields(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_fields(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1382,35 +1596,38 @@ func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.InstrumentationLabelEnabled, nil
+		return ec.resolvers.Destination().Fields(rctx, obj)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*bool)
+	res := resTmp.([]string)
 	fc.Result = res
-	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+	return ec.marshalNString2ᚕstringᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_instrumentationLabelEnabled(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Destination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "Destination",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+func (ec *executionContext) _Destination_destinationType(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_destinationType(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1423,7 +1640,7 @@ func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.K8sActualNamespace().K8sActualSources(rctx, obj, fc.Args["instrumentationLabeled"].(*bool))
+		return obj.DestinationType, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1435,55 +1652,38 @@ func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Con
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.K8sActualSource)
+	res := resTmp.(model.DestinationTypesCategoryItem)
 	fc.Result = res
-	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+	return ec.marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Destination_destinationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "Destination",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "namespace":
-				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
-			case "kind":
-				return ec.fieldContext_K8sActualSource_kind(ctx, field)
-			case "name":
-				return ec.fieldContext_K8sActualSource_name(ctx, field)
-			case "serviceName":
-				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "numberOfInstances":
-				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "autoInstrumentedDecision":
-				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
-			case "instrumentedApplicationDetails":
-				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			case "type":
+				return ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationTypesCategoryItem_displayName(ctx, field)
+			case "imageUrl":
+				return ec.fieldContext_DestinationTypesCategoryItem_imageUrl(ctx, field)
+			case "supportedSignals":
+				return ec.fieldContext_DestinationTypesCategoryItem_supportedSignals(ctx, field)
+			case "testConnectionSupported":
+				return ec.fieldContext_DestinationTypesCategoryItem_testConnectionSupported(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type DestinationTypesCategoryItem", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_K8sActualNamespace_k8sActualSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_namespace(ctx, field)
+func (ec *executionContext) _Destination_conditions(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_conditions(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1496,38 +1696,47 @@ func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Namespace, nil
+		return ec.resolvers.Destination().Conditions(rctx, obj)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]*model.Condition)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Destination_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "Destination",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_Condition_type(ctx, field)
+			case "status":
+				return ec.fieldContext_Condition_status(ctx, field)
+			case "lastTransitionTime":
+				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+			case "reason":
+				return ec.fieldContext_Condition_reason(ctx, field)
+			case "message":
+				return ec.fieldContext_Condition_message(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
+		},
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_kind(ctx, field)
+func (ec *executionContext) _DestinationTypesCategoryItem_type(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1540,7 +1749,7 @@ func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Kind, nil
+		return ec.resolvers.DestinationTypesCategoryItem().Type(rctx, obj)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1552,26 +1761,26 @@ func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field gra
 		}
 		return graphql.Null
 	}
-	res := resTmp.(model.K8sResourceKind)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "DestinationTypesCategoryItem",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type K8sResourceKind does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_name(ctx, field)
+func (ec *executionContext) _DestinationTypesCategoryItem_displayName(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_displayName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1584,7 +1793,7 @@ func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.DisplayName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1601,9 +1810,9 @@ func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field gra
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_displayName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "DestinationTypesCategoryItem",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1614,8 +1823,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context,
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+func (ec *executionContext) _DestinationTypesCategoryItem_imageUrl(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_imageUrl(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1628,23 +1837,26 @@ func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, fi
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ServiceName, nil
+		return obj.ImageUrl, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_imageUrl(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "DestinationTypesCategoryItem",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1655,8 +1867,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.C
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+func (ec *executionContext) _DestinationTypesCategoryItem_supportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_supportedSignals(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1669,35 +1881,46 @@ func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.NumberOfInstances, nil
+		return obj.SupportedSignals, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*int)
+	res := resTmp.(model.SupportedSignals)
 	fc.Result = res
-	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+	return ec.marshalNSupportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSupportedSignals(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_supportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "DestinationTypesCategoryItem",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Int does not have child fields")
+			switch field.Name {
+			case "traces":
+				return ec.fieldContext_SupportedSignals_traces(ctx, field)
+			case "metrics":
+				return ec.fieldContext_SupportedSignals_metrics(ctx, field)
+			case "logs":
+				return ec.fieldContext_SupportedSignals_logs(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SupportedSignals", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+func (ec *executionContext) _DestinationTypesCategoryItem_testConnectionSupported(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_testConnectionSupported(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1710,7 +1933,7 @@ func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.AutoInstrumented, nil
+		return obj.TestConnectionSupported, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1727,9 +1950,9 @@ func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Contex
 	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_testConnectionSupported(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "DestinationTypesCategoryItem",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1740,8 +1963,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ cont
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+func (ec *executionContext) _DestinationsCategory_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationsCategory) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationsCategory_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1754,7 +1977,7 @@ func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.AutoInstrumentedDecision, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1771,9 +1994,9 @@ func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx contex
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumentedDecision(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DestinationsCategory_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "DestinationsCategory",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1784,8 +2007,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumentedDecisio
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+func (ec *executionContext) _DestinationsCategory_items(ctx context.Context, field graphql.CollectedField, obj *model.DestinationsCategory) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationsCategory_items(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1798,41 +2021,50 @@ func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.InstrumentedApplicationDetails, nil
+		return obj.Items, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.InstrumentedApplicationDetails)
+	res := resTmp.([]model.DestinationTypesCategoryItem)
 	fc.Result = res
-	return ec.marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx, field.Selections, res)
+	return ec.marshalNDestinationTypesCategoryItem2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItemᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplicationDetails(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DestinationsCategory_items(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "DestinationsCategory",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "containers":
-				return ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
-			case "conditions":
-				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+			case "type":
+				return ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationTypesCategoryItem_displayName(ctx, field)
+			case "imageUrl":
+				return ec.fieldContext_DestinationTypesCategoryItem_imageUrl(ctx, field)
+			case "supportedSignals":
+				return ec.fieldContext_DestinationTypesCategoryItem_supportedSignals(ctx, field)
+			case "testConnectionSupported":
+				return ec.fieldContext_DestinationTypesCategoryItem_testConnectionSupported(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type DestinationTypesCategoryItem", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_createK8sDesiredNamespace(ctx, field)
+func (ec *executionContext) _ExportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_traces(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1845,54 +2077,38 @@ func (ec *executionContext) _Mutation_createK8sDesiredNamespace(ctx context.Cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().CreateK8sDesiredNamespace(rctx, fc.Args["cpId"].(string), fc.Args["namespace"].(model.K8sDesiredNamespaceInput))
+		return obj.Traces, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.K8sActualNamespace)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ExportedSignals_traces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "ExportedSignals",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "instrumentationLabelEnabled":
-				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_createK8sDesiredNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
+func (ec *executionContext) _ExportedSignals_metrics(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_metrics(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1905,49 +2121,38 @@ func (ec *executionContext) _Query_computePlatform(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().ComputePlatform(rctx)
+		return obj.Metrics, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.ComputePlatform)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Query_computePlatform(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ExportedSignals_metrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Query",
+		Object:     "ExportedSignals",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_ComputePlatform_name(ctx, field)
-			case "computePlatformType":
-				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
-			case "k8sActualNamespace":
-				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
-			case "k8sActualNamespaces":
-				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
-			case "k8sActualSource":
-				return ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Query_config(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_config(ctx, field)
+func (ec *executionContext) _ExportedSignals_logs(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_logs(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1960,39 +2165,38 @@ func (ec *executionContext) _Query_config(ctx context.Context, field graphql.Col
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().Config(rctx)
+		return obj.Logs, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.GetConfigResponse)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetConfigResponse(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Query_config(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ExportedSignals_logs(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Query",
+		Object:     "ExportedSignals",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "installation":
-				return ec.fieldContext_GetConfigResponse_installation(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type GetConfigResponse", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query___type(ctx, field)
+func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context, field graphql.CollectedField, obj *model.GetConfigResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_GetConfigResponse_installation(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2005,68 +2209,38 @@ func (ec *executionContext) _Query___type(ctx context.Context, field graphql.Col
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.introspectType(fc.Args["name"].(string))
+		return obj.Installation, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*introspection.Type)
+	res := resTmp.(model.InstallationStatus)
 	fc.Result = res
-	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+	return ec.marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Query___type(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_GetConfigResponse_installation(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Query",
+		Object:     "GetConfigResponse",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+			return nil, errors.New("field of type InstallationStatus does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Query___type_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query___schema(ctx, field)
+func (ec *executionContext) _GetDestinationTypesResponse_categories(ctx context.Context, field graphql.CollectedField, obj *model.GetDestinationTypesResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_GetDestinationTypesResponse_categories(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2079,49 +2253,44 @@ func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.C
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.introspectSchema()
+		return obj.Categories, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*introspection.Schema)
+	res := resTmp.([]model.DestinationsCategory)
 	fc.Result = res
-	return ec.marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx, field.Selections, res)
+	return ec.marshalNDestinationsCategory2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationsCategoryᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_GetDestinationTypesResponse_categories(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Query",
+		Object:     "GetDestinationTypesResponse",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "description":
-				return ec.fieldContext___Schema_description(ctx, field)
-			case "types":
-				return ec.fieldContext___Schema_types(ctx, field)
-			case "queryType":
-				return ec.fieldContext___Schema_queryType(ctx, field)
-			case "mutationType":
-				return ec.fieldContext___Schema_mutationType(ctx, field)
-			case "subscriptionType":
-				return ec.fieldContext___Schema_subscriptionType(ctx, field)
-			case "directives":
-				return ec.fieldContext___Schema_directives(ctx, field)
+			case "name":
+				return ec.fieldContext_DestinationsCategory_name(ctx, field)
+			case "items":
+				return ec.fieldContext_DestinationsCategory_items(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type __Schema", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type DestinationsCategory", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
+func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2134,38 +2303,41 @@ func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ContainerName, nil
+		return obj.Containers, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]*model.SourceContainerRuntimeDetails)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_containers(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SourceContainerRuntimeDetails",
+		Object:     "InstrumentedApplicationDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "containerName":
+				return ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
+			case "language":
+				return ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SourceContainerRuntimeDetails", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
+func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2178,38 +2350,47 @@ func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Language, nil
+		return obj.Conditions, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]*model.Condition)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SourceContainerRuntimeDetails",
+		Object:     "InstrumentedApplicationDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_Condition_type(ctx, field)
+			case "status":
+				return ec.fieldContext_Condition_status(ctx, field)
+			case "lastTransitionTime":
+				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+			case "reason":
+				return ec.fieldContext_Condition_reason(ctx, field)
+			case "message":
+				return ec.fieldContext_Condition_message(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Directive_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_name(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2239,9 +2420,9 @@ func (ec *executionContext) ___Directive_name(ctx context.Context, field graphql
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Directive_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Directive",
+		Object:     "K8sActualNamespace",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -2252,8 +2433,8 @@ func (ec *executionContext) fieldContext___Directive_name(_ context.Context, fie
 	return fc, nil
 }
 
-func (ec *executionContext) ___Directive_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_description(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2266,7 +2447,7 @@ func (ec *executionContext) ___Directive_description(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
+		return obj.InstrumentationLabelEnabled, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2275,26 +2456,26 @@ func (ec *executionContext) ___Directive_description(ctx context.Context, field
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*bool)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Directive_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_instrumentationLabelEnabled(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Directive",
+		Object:     "K8sActualNamespace",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Directive_locations(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_locations(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2307,7 +2488,7 @@ func (ec *executionContext) ___Directive_locations(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Locations, nil
+		return ec.resolvers.K8sActualNamespace().K8sActualSources(rctx, obj, fc.Args["instrumentationLabeled"].(*bool))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2319,26 +2500,55 @@ func (ec *executionContext) ___Directive_locations(ctx context.Context, field gr
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]string)
+	res := resTmp.([]*model.K8sActualSource)
 	fc.Result = res
-	return ec.marshalN__DirectiveLocation2ᚕstringᚄ(ctx, field.Selections, res)
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Directive_locations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Directive",
+		Object:     "K8sActualNamespace",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type __DirectiveLocation does not have child fields")
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_K8sActualNamespace_k8sActualSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Directive_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_args(ctx, field)
+func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_namespace(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2351,7 +2561,7 @@ func (ec *executionContext) ___Directive_args(ctx context.Context, field graphql
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Args, nil
+		return obj.Namespace, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2363,36 +2573,26 @@ func (ec *executionContext) ___Directive_args(ctx context.Context, field graphql
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.InputValue)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Directive_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Directive",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___InputValue_name(ctx, field)
-			case "description":
-				return ec.fieldContext___InputValue_description(ctx, field)
-			case "type":
-				return ec.fieldContext___InputValue_type(ctx, field)
-			case "defaultValue":
-				return ec.fieldContext___InputValue_defaultValue(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Directive_isRepeatable(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Directive_isRepeatable(ctx, field)
+func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_kind(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2405,7 +2605,7 @@ func (ec *executionContext) ___Directive_isRepeatable(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.IsRepeatable, nil
+		return obj.Kind, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2417,26 +2617,26 @@ func (ec *executionContext) ___Directive_isRepeatable(ctx context.Context, field
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(model.K8sResourceKind)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Directive_isRepeatable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Directive",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type K8sResourceKind does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___EnumValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___EnumValue_name(ctx, field)
+func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2466,9 +2666,9 @@ func (ec *executionContext) ___EnumValue_name(ctx context.Context, field graphql
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___EnumValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__EnumValue",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -2479,8 +2679,8 @@ func (ec *executionContext) fieldContext___EnumValue_name(_ context.Context, fie
 	return fc, nil
 }
 
-func (ec *executionContext) ___EnumValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___EnumValue_description(ctx, field)
+func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2493,7 +2693,7 @@ func (ec *executionContext) ___EnumValue_description(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
+		return obj.ServiceName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2507,11 +2707,11 @@ func (ec *executionContext) ___EnumValue_description(ctx context.Context, field
 	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___EnumValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__EnumValue",
+		Object:     "K8sActualSource",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
@@ -2520,8 +2720,8 @@ func (ec *executionContext) fieldContext___EnumValue_description(_ context.Conte
 	return fc, nil
 }
 
-func (ec *executionContext) ___EnumValue_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___EnumValue_isDeprecated(ctx, field)
+func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2534,38 +2734,35 @@ func (ec *executionContext) ___EnumValue_isDeprecated(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.IsDeprecated(), nil
+		return obj.NumberOfInstances, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(*int)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___EnumValue_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__EnumValue",
+		Object:     "K8sActualSource",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type Int does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___EnumValue_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___EnumValue_deprecationReason(ctx, field)
+func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2578,35 +2775,38 @@ func (ec *executionContext) ___EnumValue_deprecationReason(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.DeprecationReason(), nil
+		return obj.AutoInstrumented, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___EnumValue_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__EnumValue",
+		Object:     "K8sActualSource",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Field_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_name(ctx, field)
+func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2619,7 +2819,7 @@ func (ec *executionContext) ___Field_name(ctx context.Context, field graphql.Col
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.AutoInstrumentedDecision, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2636,9 +2836,9 @@ func (ec *executionContext) ___Field_name(ctx context.Context, field graphql.Col
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Field_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumentedDecision(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Field",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -2649,8 +2849,8 @@ func (ec *executionContext) fieldContext___Field_name(_ context.Context, field g
 	return fc, nil
 }
 
-func (ec *executionContext) ___Field_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_description(ctx, field)
+func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2663,7 +2863,7 @@ func (ec *executionContext) ___Field_description(ctx context.Context, field grap
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
+		return obj.InstrumentedApplicationDetails, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2672,26 +2872,32 @@ func (ec *executionContext) ___Field_description(ctx context.Context, field grap
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*model.InstrumentedApplicationDetails)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Field_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplicationDetails(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Field",
+		Object:     "K8sActualSource",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "containers":
+				return ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
+			case "conditions":
+				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Field_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_args(ctx, field)
+func (ec *executionContext) _Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createK8sDesiredNamespace(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2704,114 +2910,54 @@ func (ec *executionContext) ___Field_args(ctx context.Context, field graphql.Col
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Args, nil
+		return ec.resolvers.Mutation().CreateK8sDesiredNamespace(rctx, fc.Args["cpId"].(string), fc.Args["namespace"].(model.K8sDesiredNamespaceInput))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.InputValue)
+	res := resTmp.(*model.K8sActualNamespace)
 	fc.Result = res
-	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Field_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Field",
+		Object:     "Mutation",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
 			case "name":
-				return ec.fieldContext___InputValue_name(ctx, field)
-			case "description":
-				return ec.fieldContext___InputValue_description(ctx, field)
-			case "type":
-				return ec.fieldContext___InputValue_type(ctx, field)
-			case "defaultValue":
-				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "instrumentationLabelEnabled":
+				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
 		},
 	}
-	return fc, nil
-}
-
-func (ec *executionContext) ___Field_type(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_type(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
 	defer func() {
 		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
 		}
 	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
-	})
-	if err != nil {
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createK8sDesiredNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
 		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(*introspection.Type)
-	fc.Result = res
-	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext___Field_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "__Field",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
-		},
+		return fc, err
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Field_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_isDeprecated(ctx, field)
+func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Context, field graphql.CollectedField, obj *model.ObservabilitySignalSupport) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2824,7 +2970,7 @@ func (ec *executionContext) ___Field_isDeprecated(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.IsDeprecated(), nil
+		return obj.Supported, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2841,11 +2987,11 @@ func (ec *executionContext) ___Field_isDeprecated(ctx context.Context, field gra
 	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Field_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ObservabilitySignalSupport_supported(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Field",
+		Object:     "ObservabilitySignalSupport",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type Boolean does not have child fields")
@@ -2854,8 +3000,8 @@ func (ec *executionContext) fieldContext___Field_isDeprecated(_ context.Context,
 	return fc, nil
 }
 
-func (ec *executionContext) ___Field_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Field_deprecationReason(ctx, field)
+func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2868,7 +3014,7 @@ func (ec *executionContext) ___Field_deprecationReason(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.DeprecationReason(), nil
+		return ec.resolvers.Query().ComputePlatform(rctx)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2877,26 +3023,40 @@ func (ec *executionContext) ___Field_deprecationReason(ctx context.Context, fiel
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*model.ComputePlatform)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Field_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query_computePlatform(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Field",
+		Object:     "Query",
 		Field:      field,
 		IsMethod:   true,
-		IsResolver: false,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_ComputePlatform_name(ctx, field)
+			case "computePlatformType":
+				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+			case "k8sActualNamespace":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+			case "k8sActualNamespaces":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+			case "k8sActualSource":
+				return ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___InputValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___InputValue_name(ctx, field)
+func (ec *executionContext) _Query_config(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_config(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2909,38 +3069,39 @@ func (ec *executionContext) ___InputValue_name(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return ec.resolvers.Query().Config(rctx)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*model.GetConfigResponse)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetConfigResponse(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___InputValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query_config(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__InputValue",
+		Object:     "Query",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "installation":
+				return ec.fieldContext_GetConfigResponse_installation(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type GetConfigResponse", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___InputValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___InputValue_description(ctx, field)
+func (ec *executionContext) _Query_destinationTypes(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_destinationTypes(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2953,7 +3114,7 @@ func (ec *executionContext) ___InputValue_description(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
+		return ec.resolvers.Query().DestinationTypes(rctx)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2962,26 +3123,30 @@ func (ec *executionContext) ___InputValue_description(ctx context.Context, field
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*model.GetDestinationTypesResponse)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOGetDestinationTypesResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationTypesResponse(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___InputValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query_destinationTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__InputValue",
+		Object:     "Query",
 		Field:      field,
 		IsMethod:   true,
-		IsResolver: false,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "categories":
+				return ec.fieldContext_GetDestinationTypesResponse_categories(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type GetDestinationTypesResponse", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___InputValue_type(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___InputValue_type(ctx, field)
+func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2994,28 +3159,25 @@ func (ec *executionContext) ___InputValue_type(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return ec.introspectType(fc.Args["name"].(string))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
 	res := resTmp.(*introspection.Type)
 	fc.Result = res
-	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___InputValue_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query___type(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__InputValue",
+		Object:     "Query",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
@@ -3043,11 +3205,22 @@ func (ec *executionContext) fieldContext___InputValue_type(_ context.Context, fi
 			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query___type_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___InputValue_defaultValue(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___InputValue_defaultValue(ctx, field)
+func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___schema(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3060,7 +3233,7 @@ func (ec *executionContext) ___InputValue_defaultValue(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.DefaultValue, nil
+		return ec.introspectSchema()
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3069,26 +3242,40 @@ func (ec *executionContext) ___InputValue_defaultValue(ctx context.Context, fiel
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*introspection.Schema)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___InputValue_defaultValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__InputValue",
+		Object:     "Query",
 		Field:      field,
-		IsMethod:   false,
+		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "description":
+				return ec.fieldContext___Schema_description(ctx, field)
+			case "types":
+				return ec.fieldContext___Schema_types(ctx, field)
+			case "queryType":
+				return ec.fieldContext___Schema_queryType(ctx, field)
+			case "mutationType":
+				return ec.fieldContext___Schema_mutationType(ctx, field)
+			case "subscriptionType":
+				return ec.fieldContext___Schema_subscriptionType(ctx, field)
+			case "directives":
+				return ec.fieldContext___Schema_directives(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Schema", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Schema_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_description(ctx, field)
+func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3101,25 +3288,28 @@ func (ec *executionContext) ___Schema_description(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
+		return obj.ContainerName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Schema_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Schema",
+		Object:     "SourceContainerRuntimeDetails",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
@@ -3128,8 +3318,8 @@ func (ec *executionContext) fieldContext___Schema_description(_ context.Context,
 	return fc, nil
 }
 
-func (ec *executionContext) ___Schema_types(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_types(ctx, field)
+func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3142,7 +3332,7 @@ func (ec *executionContext) ___Schema_types(ctx context.Context, field graphql.C
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Types(), nil
+		return obj.Language, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3154,48 +3344,26 @@ func (ec *executionContext) ___Schema_types(ctx context.Context, field graphql.C
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.Type)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalN__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Schema_types(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Schema",
+		Object:     "SourceContainerRuntimeDetails",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Schema_queryType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_queryType(ctx, field)
+func (ec *executionContext) _SupportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_traces(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3208,7 +3376,7 @@ func (ec *executionContext) ___Schema_queryType(ctx context.Context, field graph
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.QueryType(), nil
+		return obj.Traces, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3220,48 +3388,30 @@ func (ec *executionContext) ___Schema_queryType(ctx context.Context, field graph
 		}
 		return graphql.Null
 	}
-	res := resTmp.(*introspection.Type)
+	res := resTmp.(model.ObservabilitySignalSupport)
 	fc.Result = res
-	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Schema_queryType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SupportedSignals_traces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Schema",
+		Object:     "SupportedSignals",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Schema_mutationType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_mutationType(ctx, field)
+func (ec *executionContext) _SupportedSignals_metrics(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_metrics(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3274,57 +3424,42 @@ func (ec *executionContext) ___Schema_mutationType(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.MutationType(), nil
+		return obj.Metrics, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*introspection.Type)
+	res := resTmp.(model.ObservabilitySignalSupport)
 	fc.Result = res
-	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Schema_mutationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SupportedSignals_metrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Schema",
+		Object:     "SupportedSignals",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Schema_subscriptionType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_subscriptionType(ctx, field)
+func (ec *executionContext) _SupportedSignals_logs(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_logs(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3337,57 +3472,42 @@ func (ec *executionContext) ___Schema_subscriptionType(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.SubscriptionType(), nil
+		return obj.Logs, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*introspection.Type)
+	res := resTmp.(model.ObservabilitySignalSupport)
 	fc.Result = res
-	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Schema_subscriptionType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SupportedSignals_logs(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Schema",
+		Object:     "SupportedSignals",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Schema_directives(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Schema_directives(ctx, field)
+func (ec *executionContext) ___Directive_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3400,7 +3520,7 @@ func (ec *executionContext) ___Schema_directives(ctx context.Context, field grap
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Directives(), nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3412,38 +3532,26 @@ func (ec *executionContext) ___Schema_directives(ctx context.Context, field grap
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.Directive)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalN__Directive2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirectiveᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Schema_directives(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Schema",
+		Object:     "__Directive",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___Directive_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Directive_description(ctx, field)
-			case "locations":
-				return ec.fieldContext___Directive_locations(ctx, field)
-			case "args":
-				return ec.fieldContext___Directive_args(ctx, field)
-			case "isRepeatable":
-				return ec.fieldContext___Directive_isRepeatable(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Directive", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_kind(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_kind(ctx, field)
+func (ec *executionContext) ___Directive_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3456,38 +3564,35 @@ func (ec *executionContext) ___Type_kind(ctx context.Context, field graphql.Coll
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Kind(), nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalN__TypeKind2string(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__Directive",
 		Field:      field,
 		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type __TypeKind does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_name(ctx, field)
+func (ec *executionContext) ___Directive_locations(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_locations(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3500,35 +3605,38 @@ func (ec *executionContext) ___Type_name(ctx context.Context, field graphql.Coll
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name(), nil
+		return obj.Locations, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]string)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalN__DirectiveLocation2ᚕstringᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_locations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__Directive",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type __DirectiveLocation does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_description(ctx, field)
+func (ec *executionContext) ___Directive_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_args(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3541,35 +3649,48 @@ func (ec *executionContext) ___Type_description(ctx context.Context, field graph
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Description(), nil
+		return obj.Args, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]introspection.InputValue)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__Directive",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_fields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_fields(ctx, field)
+func (ec *executionContext) ___Directive_isRepeatable(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_isRepeatable(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3582,60 +3703,38 @@ func (ec *executionContext) ___Type_fields(ctx context.Context, field graphql.Co
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Fields(fc.Args["includeDeprecated"].(bool)), nil
+		return obj.IsRepeatable, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.Field)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalO__Field2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐFieldᚄ(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_fields(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Directive_isRepeatable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__Directive",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___Field_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Field_description(ctx, field)
-			case "args":
-				return ec.fieldContext___Field_args(ctx, field)
-			case "type":
-				return ec.fieldContext___Field_type(ctx, field)
-			case "isDeprecated":
-				return ec.fieldContext___Field_isDeprecated(ctx, field)
-			case "deprecationReason":
-				return ec.fieldContext___Field_deprecationReason(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Field", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field___Type_fields_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_interfaces(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_interfaces(ctx, field)
+func (ec *executionContext) ___EnumValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3648,57 +3747,38 @@ func (ec *executionContext) ___Type_interfaces(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Interfaces(), nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.Type)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_interfaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___EnumValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__EnumValue",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_possibleTypes(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_possibleTypes(ctx, field)
+func (ec *executionContext) ___EnumValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3711,7 +3791,7 @@ func (ec *executionContext) ___Type_possibleTypes(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.PossibleTypes(), nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3720,48 +3800,26 @@ func (ec *executionContext) ___Type_possibleTypes(ctx context.Context, field gra
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.Type)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_possibleTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___EnumValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__EnumValue",
 		Field:      field,
 		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_enumValues(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_enumValues(ctx, field)
+func (ec *executionContext) ___EnumValue_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_isDeprecated(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3774,56 +3832,38 @@ func (ec *executionContext) ___Type_enumValues(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.EnumValues(fc.Args["includeDeprecated"].(bool)), nil
+		return obj.IsDeprecated(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.EnumValue)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalO__EnumValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValueᚄ(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_enumValues(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___EnumValue_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__EnumValue",
 		Field:      field,
 		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___EnumValue_name(ctx, field)
-			case "description":
-				return ec.fieldContext___EnumValue_description(ctx, field)
-			case "isDeprecated":
-				return ec.fieldContext___EnumValue_isDeprecated(ctx, field)
-			case "deprecationReason":
-				return ec.fieldContext___EnumValue_deprecationReason(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __EnumValue", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field___Type_enumValues_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_inputFields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_inputFields(ctx, field)
+func (ec *executionContext) ___EnumValue_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_deprecationReason(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3836,7 +3876,7 @@ func (ec *executionContext) ___Type_inputFields(ctx context.Context, field graph
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.InputFields(), nil
+		return obj.DeprecationReason(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3845,36 +3885,26 @@ func (ec *executionContext) ___Type_inputFields(ctx context.Context, field graph
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.([]introspection.InputValue)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalO__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_inputFields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___EnumValue_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__EnumValue",
 		Field:      field,
 		IsMethod:   true,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext___InputValue_name(ctx, field)
-			case "description":
-				return ec.fieldContext___InputValue_description(ctx, field)
-			case "type":
-				return ec.fieldContext___InputValue_type(ctx, field)
-			case "defaultValue":
-				return ec.fieldContext___InputValue_defaultValue(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_ofType(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_ofType(ctx, field)
+func (ec *executionContext) ___Field_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3887,57 +3917,38 @@ func (ec *executionContext) ___Type_ofType(ctx context.Context, field graphql.Co
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.OfType(), nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*introspection.Type)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_ofType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Field_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__Field",
 		Field:      field,
-		IsMethod:   true,
+		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "kind":
-				return ec.fieldContext___Type_kind(ctx, field)
-			case "name":
-				return ec.fieldContext___Type_name(ctx, field)
-			case "description":
-				return ec.fieldContext___Type_description(ctx, field)
-			case "fields":
-				return ec.fieldContext___Type_fields(ctx, field)
-			case "interfaces":
-				return ec.fieldContext___Type_interfaces(ctx, field)
-			case "possibleTypes":
-				return ec.fieldContext___Type_possibleTypes(ctx, field)
-			case "enumValues":
-				return ec.fieldContext___Type_enumValues(ctx, field)
-			case "inputFields":
-				return ec.fieldContext___Type_inputFields(ctx, field)
-			case "ofType":
-				return ec.fieldContext___Type_ofType(ctx, field)
-			case "specifiedByURL":
-				return ec.fieldContext___Type_specifiedByURL(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) ___Type_specifiedByURL(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext___Type_specifiedByURL(ctx, field)
+func (ec *executionContext) ___Field_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_description(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3950,7 +3961,7 @@ func (ec *executionContext) ___Type_specifiedByURL(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.SpecifiedByURL(), nil
+		return obj.Description(), nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -3964,9 +3975,9 @@ func (ec *executionContext) ___Type_specifiedByURL(ctx context.Context, field gr
 	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext___Field_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "__Type",
+		Object:     "__Field",
 		Field:      field,
 		IsMethod:   true,
 		IsResolver: false,
@@ -3977,18 +3988,1305 @@ func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context
 	return fc, nil
 }
 
-// endregion **************************** field.gotpl *****************************
-
-// region    **************************** input.gotpl *****************************
-
-func (ec *executionContext) unmarshalInputK8sDesiredNamespaceInput(ctx context.Context, obj interface{}) (model.K8sDesiredNamespaceInput, error) {
-	var it model.K8sDesiredNamespaceInput
-	asMap := map[string]interface{}{}
-	for k, v := range obj.(map[string]interface{}) {
-		asMap[k] = v
-	}
-
-	fieldsInOrder := [...]string{"autoInstrument"}
+func (ec *executionContext) ___Field_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_args(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Args, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.InputValue)
+	fc.Result = res
+	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_type(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_isDeprecated(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.IsDeprecated(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_deprecationReason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DeprecationReason(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_type(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_defaultValue(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_defaultValue(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DefaultValue, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_defaultValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_types(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_types(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Types(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_types(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_queryType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_queryType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.QueryType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_queryType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_mutationType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_mutationType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.MutationType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_mutationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_subscriptionType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_subscriptionType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SubscriptionType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_subscriptionType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_directives(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_directives(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Directives(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Directive)
+	fc.Result = res
+	return ec.marshalN__Directive2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirectiveᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_directives(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___Directive_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Directive_description(ctx, field)
+			case "locations":
+				return ec.fieldContext___Directive_locations(ctx, field)
+			case "args":
+				return ec.fieldContext___Directive_args(ctx, field)
+			case "isRepeatable":
+				return ec.fieldContext___Directive_isRepeatable(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Directive", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_kind(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_kind(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Kind(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalN__TypeKind2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type __TypeKind does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_fields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields(fc.Args["includeDeprecated"].(bool)), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Field)
+	fc.Result = res
+	return ec.marshalO__Field2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐFieldᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_fields(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___Field_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Field_description(ctx, field)
+			case "args":
+				return ec.fieldContext___Field_args(ctx, field)
+			case "type":
+				return ec.fieldContext___Field_type(ctx, field)
+			case "isDeprecated":
+				return ec.fieldContext___Field_isDeprecated(ctx, field)
+			case "deprecationReason":
+				return ec.fieldContext___Field_deprecationReason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Field", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field___Type_fields_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_interfaces(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_interfaces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Interfaces(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_interfaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_possibleTypes(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_possibleTypes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.PossibleTypes(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_possibleTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_enumValues(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_enumValues(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.EnumValues(fc.Args["includeDeprecated"].(bool)), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.EnumValue)
+	fc.Result = res
+	return ec.marshalO__EnumValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_enumValues(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___EnumValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___EnumValue_description(ctx, field)
+			case "isDeprecated":
+				return ec.fieldContext___EnumValue_isDeprecated(ctx, field)
+			case "deprecationReason":
+				return ec.fieldContext___EnumValue_deprecationReason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __EnumValue", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field___Type_enumValues_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_inputFields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_inputFields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InputFields(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.InputValue)
+	fc.Result = res
+	return ec.marshalO__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_inputFields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_ofType(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_ofType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.OfType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_ofType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_specifiedByURL(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_specifiedByURL(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SpecifiedByURL(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+// endregion **************************** field.gotpl *****************************
+
+// region    **************************** input.gotpl *****************************
+
+func (ec *executionContext) unmarshalInputK8sDesiredNamespaceInput(ctx context.Context, obj interface{}) (model.K8sDesiredNamespaceInput, error) {
+	var it model.K8sDesiredNamespaceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"autoInstrument"}
 	for _, k := range fieldsInOrder {
 		v, ok := asMap[k]
 		if !ok {
@@ -4096,56 +5394,229 @@ func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj i
 			if err != nil {
 				return it, err
 			}
-			it.Kind = data
-		case "name":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
+			it.Kind = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		}
+	}
+
+	return it, nil
+}
+
+// endregion **************************** input.gotpl *****************************
+
+// region    ************************** interface.gotpl ***************************
+
+// endregion ************************** interface.gotpl ***************************
+
+// region    **************************** object.gotpl ****************************
+
+var computePlatformImplementors = []string{"ComputePlatform"}
+
+func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.SelectionSet, obj *model.ComputePlatform) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, computePlatformImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ComputePlatform")
+		case "name":
+			out.Values[i] = ec._ComputePlatform_name(ctx, field, obj)
+		case "computePlatformType":
+			out.Values[i] = ec._ComputePlatform_computePlatformType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "k8sActualNamespace":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "k8sActualNamespaces":
+			out.Values[i] = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "k8sActualSource":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualSource(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "k8sActualSources":
+			out.Values[i] = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var conditionImplementors = []string{"Condition"}
+
+func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet, obj *model.Condition) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, conditionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Condition")
+		case "type":
+			out.Values[i] = ec._Condition_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "status":
+			out.Values[i] = ec._Condition_status(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-			it.Name = data
+		case "lastTransitionTime":
+			out.Values[i] = ec._Condition_lastTransitionTime(ctx, field, obj)
+		case "reason":
+			out.Values[i] = ec._Condition_reason(ctx, field, obj)
+		case "message":
+			out.Values[i] = ec._Condition_message(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
 		}
 	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
 
-	return it, nil
-}
-
-// endregion **************************** input.gotpl *****************************
-
-// region    ************************** interface.gotpl ***************************
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
 
-// endregion ************************** interface.gotpl ***************************
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
 
-// region    **************************** object.gotpl ****************************
+	return out
+}
 
-var computePlatformImplementors = []string{"ComputePlatform"}
+var destinationImplementors = []string{"Destination"}
 
-func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.SelectionSet, obj *model.ComputePlatform) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, computePlatformImplementors)
+func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionSet, obj *model.Destination) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("ComputePlatform")
+			out.Values[i] = graphql.MarshalString("Destination")
+		case "id":
+			out.Values[i] = ec._Destination_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
 		case "name":
-			out.Values[i] = ec._ComputePlatform_name(ctx, field, obj)
-		case "computePlatformType":
-			out.Values[i] = ec._ComputePlatform_computePlatformType(ctx, field, obj)
+			out.Values[i] = ec._Destination_name(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				atomic.AddUint32(&out.Invalids, 1)
 			}
-		case "k8sActualNamespace":
+		case "type":
 			field := field
 
-			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
 				defer func() {
 					if r := recover(); r != nil {
 						ec.Error(ctx, ec.Recover(ctx, r))
 					}
 				}()
-				res = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
+				res = ec._Destination_type(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
 				return res
 			}
 
@@ -4169,12 +5640,53 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 			}
 
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-		case "k8sActualNamespaces":
-			out.Values[i] = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
+		case "exportedSignals":
+			out.Values[i] = ec._Destination_exportedSignals(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				atomic.AddUint32(&out.Invalids, 1)
 			}
-		case "k8sActualSource":
+		case "fields":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Destination_fields(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "destinationType":
+			out.Values[i] = ec._Destination_destinationType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "conditions":
 			field := field
 
 			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
@@ -4183,7 +5695,77 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 						ec.Error(ctx, ec.Recover(ctx, r))
 					}
 				}()
-				res = ec._ComputePlatform_k8sActualSource(ctx, field, obj)
+				res = ec._Destination_conditions(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationTypesCategoryItemImplementors = []string{"DestinationTypesCategoryItem"}
+
+func (ec *executionContext) _DestinationTypesCategoryItem(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationTypesCategoryItem) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationTypesCategoryItemImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationTypesCategoryItem")
+		case "type":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._DestinationTypesCategoryItem_type(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
 				return res
 			}
 
@@ -4205,12 +5787,120 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 				out.Values[i] = graphql.Null
 				continue
 			}
-
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-		case "k8sActualSources":
-			out.Values[i] = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "displayName":
+			out.Values[i] = ec._DestinationTypesCategoryItem_displayName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "imageUrl":
+			out.Values[i] = ec._DestinationTypesCategoryItem_imageUrl(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "supportedSignals":
+			out.Values[i] = ec._DestinationTypesCategoryItem_supportedSignals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "testConnectionSupported":
+			out.Values[i] = ec._DestinationTypesCategoryItem_testConnectionSupported(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationsCategoryImplementors = []string{"DestinationsCategory"}
+
+func (ec *executionContext) _DestinationsCategory(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationsCategory) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationsCategoryImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationsCategory")
+		case "name":
+			out.Values[i] = ec._DestinationsCategory_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "items":
+			out.Values[i] = ec._DestinationsCategory_items(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var exportedSignalsImplementors = []string{"ExportedSignals"}
+
+func (ec *executionContext) _ExportedSignals(ctx context.Context, sel ast.SelectionSet, obj *model.ExportedSignals) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, exportedSignalsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ExportedSignals")
+		case "traces":
+			out.Values[i] = ec._ExportedSignals_traces(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "metrics":
+			out.Values[i] = ec._ExportedSignals_metrics(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
+				out.Invalids++
+			}
+		case "logs":
+			out.Values[i] = ec._ExportedSignals_logs(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
@@ -4235,33 +5925,22 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 	return out
 }
 
-var conditionImplementors = []string{"Condition"}
+var getConfigResponseImplementors = []string{"GetConfigResponse"}
 
-func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet, obj *model.Condition) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, conditionImplementors)
+func (ec *executionContext) _GetConfigResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetConfigResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, getConfigResponseImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("Condition")
-		case "type":
-			out.Values[i] = ec._Condition_type(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "status":
-			out.Values[i] = ec._Condition_status(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("GetConfigResponse")
+		case "installation":
+			out.Values[i] = ec._GetConfigResponse_installation(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "lastTransitionTime":
-			out.Values[i] = ec._Condition_lastTransitionTime(ctx, field, obj)
-		case "reason":
-			out.Values[i] = ec._Condition_reason(ctx, field, obj)
-		case "message":
-			out.Values[i] = ec._Condition_message(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -4285,19 +5964,19 @@ func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet
 	return out
 }
 
-var getConfigResponseImplementors = []string{"GetConfigResponse"}
+var getDestinationTypesResponseImplementors = []string{"GetDestinationTypesResponse"}
 
-func (ec *executionContext) _GetConfigResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetConfigResponse) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, getConfigResponseImplementors)
+func (ec *executionContext) _GetDestinationTypesResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetDestinationTypesResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, getDestinationTypesResponseImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("GetConfigResponse")
-		case "installation":
-			out.Values[i] = ec._GetConfigResponse_installation(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("GetDestinationTypesResponse")
+		case "categories":
+			out.Values[i] = ec._GetDestinationTypesResponse_categories(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
@@ -4550,6 +6229,45 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 	return out
 }
 
+var observabilitySignalSupportImplementors = []string{"ObservabilitySignalSupport"}
+
+func (ec *executionContext) _ObservabilitySignalSupport(ctx context.Context, sel ast.SelectionSet, obj *model.ObservabilitySignalSupport) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, observabilitySignalSupportImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ObservabilitySignalSupport")
+		case "supported":
+			out.Values[i] = ec._ObservabilitySignalSupport_supported(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var queryImplementors = []string{"Query"}
 
 func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
@@ -4606,6 +6324,25 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "destinationTypes":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_destinationTypes(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
@@ -4682,6 +6419,55 @@ func (ec *executionContext) _SourceContainerRuntimeDetails(ctx context.Context,
 	return out
 }
 
+var supportedSignalsImplementors = []string{"SupportedSignals"}
+
+func (ec *executionContext) _SupportedSignals(ctx context.Context, sel ast.SelectionSet, obj *model.SupportedSignals) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, supportedSignalsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("SupportedSignals")
+		case "traces":
+			out.Values[i] = ec._SupportedSignals_traces(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "metrics":
+			out.Values[i] = ec._SupportedSignals_metrics(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "logs":
+			out.Values[i] = ec._SupportedSignals_logs(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var __DirectiveImplementors = []string{"__Directive"}
 
 func (ec *executionContext) ___Directive(ctx context.Context, sel ast.SelectionSet, obj *introspection.Directive) graphql.Marshaler {
@@ -5053,6 +6839,106 @@ func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑio
 	return v
 }
 
+func (ec *executionContext) marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx context.Context, sel ast.SelectionSet, v model.DestinationTypesCategoryItem) graphql.Marshaler {
+	return ec._DestinationTypesCategoryItem(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNDestinationTypesCategoryItem2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItemᚄ(ctx context.Context, sel ast.SelectionSet, v []model.DestinationTypesCategoryItem) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDestinationsCategory2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationsCategory(ctx context.Context, sel ast.SelectionSet, v model.DestinationsCategory) graphql.Marshaler {
+	return ec._DestinationsCategory(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNDestinationsCategory2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationsCategoryᚄ(ctx context.Context, sel ast.SelectionSet, v []model.DestinationsCategory) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestinationsCategory2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationsCategory(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNExportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignals(ctx context.Context, sel ast.SelectionSet, v model.ExportedSignals) graphql.Marshaler {
+	return ec._ExportedSignals(ctx, sel, &v)
+}
+
 func (ec *executionContext) unmarshalNID2string(ctx context.Context, v interface{}) (string, error) {
 	res, err := graphql.UnmarshalID(v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -5169,6 +7055,10 @@ func (ec *executionContext) marshalNK8sResourceKind2githubᚗcomᚋodigosᚑio
 	return v
 }
 
+func (ec *executionContext) marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx context.Context, sel ast.SelectionSet, v model.ObservabilitySignalSupport) graphql.Marshaler {
+	return ec._ObservabilitySignalSupport(ctx, sel, &v)
+}
+
 func (ec *executionContext) marshalNSourceContainerRuntimeDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, v *model.SourceContainerRuntimeDetails) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
@@ -5194,6 +7084,42 @@ func (ec *executionContext) marshalNString2string(ctx context.Context, sel ast.S
 	return res
 }
 
+func (ec *executionContext) unmarshalNString2ᚕstringᚄ(ctx context.Context, v interface{}) ([]string, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]string, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNString2string(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalNString2ᚕstringᚄ(ctx context.Context, sel ast.SelectionSet, v []string) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	for i := range v {
+		ret[i] = ec.marshalNString2string(ctx, sel, v[i])
+	}
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNSupportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSupportedSignals(ctx context.Context, sel ast.SelectionSet, v model.SupportedSignals) graphql.Marshaler {
+	return ec._SupportedSignals(ctx, sel, &v)
+}
+
 func (ec *executionContext) marshalN__Directive2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirective(ctx context.Context, sel ast.SelectionSet, v introspection.Directive) graphql.Marshaler {
 	return ec.___Directive(ctx, sel, &v)
 }
@@ -5534,6 +7460,13 @@ func (ec *executionContext) marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigos
 	return ec._GetConfigResponse(ctx, sel, v)
 }
 
+func (ec *executionContext) marshalOGetDestinationTypesResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationTypesResponse(ctx context.Context, sel ast.SelectionSet, v *model.GetDestinationTypesResponse) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._GetDestinationTypesResponse(ctx, sel, v)
+}
+
 func (ec *executionContext) marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentedApplicationDetails) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
diff --git a/frontend/graph/model/destination.go b/frontend/graph/model/destination.go
new file mode 100644
index 000000000..8f9af77a9
--- /dev/null
+++ b/frontend/graph/model/destination.go
@@ -0,0 +1,48 @@
+package model
+
+import (
+	"github.com/odigos-io/odigos/common"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type GetDestinationTypesResponse struct {
+	Categories []DestinationsCategory `json:"categories"`
+}
+
+type DestinationTypesCategoryItem struct {
+	Type                    common.DestinationType `json:"type"`
+	DisplayName             string                 `json:"display_name"`
+	ImageUrl                string                 `json:"image_url"`
+	SupportedSignals        SupportedSignals       `json:"supported_signals"`
+	TestConnectionSupported bool                   `json:"test_connection_supported"`
+}
+
+type SupportedSignals struct {
+	Traces  ObservabilitySignalSupport `json:"traces"`
+	Metrics ObservabilitySignalSupport `json:"metrics"`
+	Logs    ObservabilitySignalSupport `json:"logs"`
+}
+
+type ObservabilitySignalSupport struct {
+	Supported bool `json:"supported"`
+}
+type DestinationsCategory struct {
+	Name  string                         `json:"name"`
+	Items []DestinationTypesCategoryItem `json:"items"`
+}
+
+type ExportedSignals struct {
+	Traces  bool `json:"traces"`
+	Metrics bool `json:"metrics"`
+	Logs    bool `json:"logs"`
+}
+
+type Destination struct {
+	Id              string                       `json:"id"`
+	Name            string                       `json:"name"`
+	Type            common.DestinationType       `json:"type"`
+	ExportedSignals ExportedSignals              `json:"signals"`
+	Fields          map[string]string            `json:"fields"`
+	DestinationType DestinationTypesCategoryItem `json:"destination_type"`
+	Conditions      []metav1.Condition           `json:"conditions,omitempty"`
+}
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index a13b96ca4..a1d5d0abc 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -65,18 +65,13 @@ type Condition {
 type K8sActualNamespace {
   name: String!
   instrumentationLabelEnabled: Boolean
-
-  # 1. if instrumentationLabeled = true, then only return sources that are labeled for instrumentation
-  # which means workload label is set to enabled, or workload label missing and ns label is set to enabled
-  # 2. if instrumentationLabeled = false, then return all sources which are not labeled for instrumentation.
-  # which means workload label is set to disabled, or workload label missing and ns label is not set to enabled
-  # 3. if instrumentationLabeled is not provided, then return all sources
   k8sActualSources(instrumentationLabeled: Boolean): [K8sActualSource]!
 }
 
 input K8sDesiredNamespaceInput {
   autoInstrument: Boolean
 }
+
 input K8sNamespaceId {
   name: String!
 }
@@ -96,6 +91,7 @@ input K8sDesiredSourceInput {
   serviceName: String
   autoInstrument: Boolean
 }
+
 input K8sSourceId {
   namespace: String!
   kind: K8sResourceKind!
@@ -113,8 +109,49 @@ type ComputePlatform {
     kind: String
   ): K8sActualSource
   k8sActualSources: [K8sActualSource]!
+}
+
+type SupportedSignals {
+  traces: ObservabilitySignalSupport!
+  metrics: ObservabilitySignalSupport!
+  logs: ObservabilitySignalSupport!
+}
+
+type ObservabilitySignalSupport {
+  supported: Boolean!
+}
+
+type DestinationTypesCategoryItem {
+  type: String!
+  displayName: String!
+  imageUrl: String!
+  supportedSignals: SupportedSignals!
+  testConnectionSupported: Boolean!
+}
 
-  # destinations that are applied to this compute platform
+type DestinationsCategory {
+  name: String!
+  items: [DestinationTypesCategoryItem!]!
+}
+
+type GetDestinationTypesResponse {
+  categories: [DestinationsCategory!]!
+}
+
+type ExportedSignals {
+  traces: Boolean!
+  metrics: Boolean!
+  logs: Boolean!
+}
+
+type Destination {
+  id: ID!
+  name: String!
+  type: String!
+  exportedSignals: ExportedSignals!
+  fields: [String!]!
+  destinationType: DestinationTypesCategoryItem!
+  conditions: [Condition!]
 }
 
 type GetConfigResponse {
@@ -124,6 +161,7 @@ type GetConfigResponse {
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
+  destinationTypes: GetDestinationTypesResponse
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 31f54457b..f32fbfbf4 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -57,9 +57,29 @@ func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *mode
 	return k8sActualSource, nil
 }
 
+// Type is the resolver for the type field.
+func (r *destinationResolver) Type(ctx context.Context, obj *model.Destination) (string, error) {
+	panic(fmt.Errorf("not implemented: Type - type"))
+}
+
+// Fields is the resolver for the fields field.
+func (r *destinationResolver) Fields(ctx context.Context, obj *model.Destination) ([]string, error) {
+	panic(fmt.Errorf("not implemented: Fields - fields"))
+}
+
+// Conditions is the resolver for the conditions field.
+func (r *destinationResolver) Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error) {
+	panic(fmt.Errorf("not implemented: Conditions - conditions"))
+}
+
+// Type is the resolver for the type field.
+func (r *destinationTypesCategoryItemResolver) Type(ctx context.Context, obj *model.DestinationTypesCategoryItem) (string, error) {
+	panic(fmt.Errorf("not implemented: Type - type"))
+}
+
 // K8sActualSources is the resolver for the k8sActualSources field.
-func (r *k8sActualNamespaceResolver) K8sActualSources(ctx context.Context, ns *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error) {
-	return ns.K8sActualSources, nil
+func (r *k8sActualNamespaceResolver) K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error) {
+	return obj.K8sActualSources, nil
 }
 
 // CreateK8sDesiredNamespace is the resolver for the createK8sDesiredNamespace field.
@@ -95,9 +115,26 @@ func (r *queryResolver) Config(ctx context.Context) (*model.GetConfigResponse, e
 	return gqlResponse, nil
 }
 
+// DestinationTypes is the resolver for the destinationTypes field.
+func (r *queryResolver) DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error) {
+
+	destTypes := services.GetDestinationTypes()
+
+	return &destTypes, nil
+
+}
+
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
+// Destination returns DestinationResolver implementation.
+func (r *Resolver) Destination() DestinationResolver { return &destinationResolver{r} }
+
+// DestinationTypesCategoryItem returns DestinationTypesCategoryItemResolver implementation.
+func (r *Resolver) DestinationTypesCategoryItem() DestinationTypesCategoryItemResolver {
+	return &destinationTypesCategoryItemResolver{r}
+}
+
 // K8sActualNamespace returns K8sActualNamespaceResolver implementation.
 func (r *Resolver) K8sActualNamespace() K8sActualNamespaceResolver {
 	return &k8sActualNamespaceResolver{r}
@@ -110,6 +147,8 @@ func (r *Resolver) Mutation() MutationResolver { return &mutationResolver{r} }
 func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
 
 type computePlatformResolver struct{ *Resolver }
+type destinationResolver struct{ *Resolver }
+type destinationTypesCategoryItemResolver struct{ *Resolver }
 type k8sActualNamespaceResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
new file mode 100644
index 000000000..a1d0b5b09
--- /dev/null
+++ b/frontend/services/destinations.go
@@ -0,0 +1,49 @@
+package services
+
+import (
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/destinations"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+)
+
+func GetDestinationTypes() model.GetDestinationTypesResponse {
+	var resp model.GetDestinationTypesResponse
+	itemsByCategory := make(map[string][]model.DestinationTypesCategoryItem)
+	for _, destConfig := range destinations.Get() {
+		item := DestinationTypeConfigToCategoryItem(destConfig)
+		itemsByCategory[destConfig.Metadata.Category] = append(itemsByCategory[destConfig.Metadata.Category], item)
+	}
+
+	for category, items := range itemsByCategory {
+		resp.Categories = append(resp.Categories, model.DestinationsCategory{
+			Name:  category,
+			Items: items,
+		})
+
+	}
+
+	return resp
+
+}
+
+func DestinationTypeConfigToCategoryItem(destConfig destinations.Destination) model.DestinationTypesCategoryItem {
+
+	return model.DestinationTypesCategoryItem{
+		Type:                    common.DestinationType(destConfig.Metadata.Type),
+		DisplayName:             destConfig.Metadata.DisplayName,
+		ImageUrl:                GetImageURL(destConfig.Spec.Image),
+		TestConnectionSupported: destConfig.Spec.TestConnectionSupported,
+		SupportedSignals: model.SupportedSignals{
+			Traces: model.ObservabilitySignalSupport{
+				Supported: destConfig.Spec.Signals.Traces.Supported,
+			},
+			Metrics: model.ObservabilitySignalSupport{
+				Supported: destConfig.Spec.Signals.Metrics.Supported,
+			},
+			Logs: model.ObservabilitySignalSupport{
+				Supported: destConfig.Spec.Signals.Logs.Supported,
+			},
+		},
+	}
+
+}
diff --git a/frontend/services/utils.go b/frontend/services/utils.go
new file mode 100644
index 000000000..90ff6591d
--- /dev/null
+++ b/frontend/services/utils.go
@@ -0,0 +1,9 @@
+package services
+
+import "path"
+
+const cdnUrl = "https://d15jtxgb40qetw.cloudfront.net"
+
+func GetImageURL(image string) string {
+	return path.Join(cdnUrl, image)
+}

From 192e4f0a04027decd15bea82086bbe482f5f04a5 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 30 Jul 2024 16:59:33 +0300
Subject: [PATCH 121/374] chore: get destination type

---
 .../destinations/choose-destination/index.tsx | 11 ++++++++
 .../webapp/graphql/queries/destination.ts     | 26 +++++++++++++++++++
 frontend/webapp/graphql/queries/index.ts      |  1 +
 3 files changed, 38 insertions(+)
 create mode 100644 frontend/webapp/graphql/queries/destination.ts

diff --git a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
index 95fe5ea0c..adcd566bf 100644
--- a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
@@ -3,6 +3,8 @@ import { Button, SectionTitle, Text } from '@/reuseable-components';
 import styled from 'styled-components';
 import Image from 'next/image';
 import theme from '@/styles/theme';
+import { useQuery } from '@apollo/client';
+import { GET_DESTINATION_TYPE } from '@/graphql';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
@@ -18,6 +20,15 @@ const AddDestinationButton = styled(Button)`
 `;
 
 export function ChooseDestinationContainer() {
+  const { data, loading, error } = useQuery(GET_DESTINATION_TYPE);
+
+  useEffect(() => {
+    if (error) {
+      console.error('Error fetching destination types', error);
+    }
+    console.log({ data });
+  }, [data, error]);
+
   return (
     <>
       <SectionTitle
diff --git a/frontend/webapp/graphql/queries/destination.ts b/frontend/webapp/graphql/queries/destination.ts
new file mode 100644
index 000000000..34124683f
--- /dev/null
+++ b/frontend/webapp/graphql/queries/destination.ts
@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+
+export const GET_DESTINATION_TYPE = gql`
+  query GetDestinationType {
+    destinationTypes {
+      categories {
+        name
+        items {
+          displayName
+          imageUrl
+          supportedSignals {
+            logs {
+              supported
+            }
+            metrics {
+              supported
+            }
+            traces {
+              supported
+            }
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/index.ts b/frontend/webapp/graphql/queries/index.ts
index a4ba77920..498bd90f5 100644
--- a/frontend/webapp/graphql/queries/index.ts
+++ b/frontend/webapp/graphql/queries/index.ts
@@ -1,2 +1,3 @@
 export * from './config';
 export * from './compute-platform';
+export * from './destination';

From f57cdca2dcfb13a84bf6dc35acb3eb78e4e00893 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 4 Aug 2024 11:25:56 +0300
Subject: [PATCH 122/374] chore: wip

---
 frontend/webapp/app/globals.css               |   2 +-
 .../components/setup/headers/header/index.tsx |  69 +++-------
 .../destinations/choose-destination/index.tsx |  54 +++++++-
 frontend/webapp/public/icons/common/x.svg     |  14 ++
 frontend/webapp/reuseable-components/index.ts |   2 +
 .../reuseable-components/modal/index.tsx      | 124 ++++++++++++++++++
 .../navigation-buttons/index.tsx              |  93 +++++++++++++
 .../reuseable-components/text/index.tsx       |  46 ++-----
 frontend/webapp/styles/theme.ts               |   1 +
 9 files changed, 317 insertions(+), 88 deletions(-)
 create mode 100644 frontend/webapp/public/icons/common/x.svg
 create mode 100644 frontend/webapp/reuseable-components/modal/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/navigation-buttons/index.tsx

diff --git a/frontend/webapp/app/globals.css b/frontend/webapp/app/globals.css
index 27185356f..6bbdf7e7c 100644
--- a/frontend/webapp/app/globals.css
+++ b/frontend/webapp/app/globals.css
@@ -1,4 +1,4 @@
 /* Preload key fonts in your global CSS */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@100;200;300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');
diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
index 29bd04789..2083c9c79 100644
--- a/frontend/webapp/components/setup/headers/header/index.tsx
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -1,12 +1,11 @@
-import { Button, Text } from '@/reuseable-components';
-import theme from '@/styles/theme';
+import { NavigationButtons, Text } from '@/reuseable-components';
 import Image from 'next/image';
 import React from 'react';
 import styled from 'styled-components';
 
 interface SetupHeaderProps {
-  onBack?: () => void;
-  onNext?: () => void;
+  onBack: () => void;
+  onNext: () => void;
 }
 
 const HeaderContainer = styled.div`
@@ -21,24 +20,12 @@ const HeaderContainer = styled.div`
 
 const Title = styled(Text)``;
 
-const HeaderButton = styled(Button)`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
 const Logo = styled.div`
   display: flex;
   align-items: center;
   font-size: 1.2em;
 `;
 
-const NavigationButtons = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
 export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
   return (
     <HeaderContainer>
@@ -51,40 +38,22 @@ export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
         />
       </Logo>
       <Title family={'secondary'}>START WITH ODIGOS</Title>
-      <NavigationButtons>
-        <HeaderButton variant="secondary" onClick={onBack}>
-          <Image
-            src="/icons/common/arrow-white.svg"
-            alt="back"
-            width={8}
-            height={12}
-          />
-          <Text
-            color={theme.colors.secondary}
-            size={14}
-            decoration={'underline'}
-            family="secondary"
-          >
-            BACK
-          </Text>
-        </HeaderButton>
-        <HeaderButton variant="primary" onClick={onNext}>
-          <Text
-            decoration={'underline'}
-            color={theme.colors.dark_grey}
-            size={14}
-            family="secondary"
-          >
-            NEXT
-          </Text>
-          <Image
-            src="/icons/common/arrow-black.svg"
-            alt="next"
-            width={8}
-            height={12}
-          />
-        </HeaderButton>
-      </NavigationButtons>
+      <NavigationButtons
+        buttons={[
+          {
+            label: 'BACK',
+            iconSrc: '/icons/common/arrow-white.svg',
+            onClick: onBack,
+            variant: 'secondary',
+          },
+          {
+            label: 'NEXT',
+            iconSrc: '/icons/common/arrow-black.svg',
+            onClick: onNext,
+            variant: 'primary',
+          },
+        ]}
+      />
     </HeaderContainer>
   );
 };
diff --git a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
index adcd566bf..e99babaca 100644
--- a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
@@ -1,5 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Button, SectionTitle, Text } from '@/reuseable-components';
+import {
+  Button,
+  Modal,
+  NavigationButtons,
+  SectionTitle,
+  Text,
+} from '@/reuseable-components';
 import styled from 'styled-components';
 import Image from 'next/image';
 import theme from '@/styles/theme';
@@ -21,6 +27,14 @@ const AddDestinationButton = styled(Button)`
 
 export function ChooseDestinationContainer() {
   const { data, loading, error } = useQuery(GET_DESTINATION_TYPE);
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const handleOpenModal = () => setModalOpen(true);
+  const handleCloseModal = () => setModalOpen(false);
+  const handleSubmit = () => {
+    console.log('Action submitted');
+    setModalOpen(false);
+  };
 
   useEffect(() => {
     if (error) {
@@ -36,7 +50,10 @@ export function ChooseDestinationContainer() {
         description="Add backend destinations where collected data will be sent and configure their settings."
       />
       <AddDestinationButtonWrapper>
-        <AddDestinationButton variant="secondary">
+        <AddDestinationButton
+          variant="secondary"
+          onClick={() => handleOpenModal()}
+        >
           <Image
             src="/icons/common/plus.svg"
             alt="back"
@@ -52,6 +69,39 @@ export function ChooseDestinationContainer() {
             ADD DESTINATION
           </Text>
         </AddDestinationButton>
+        <Modal
+          isOpen={isModalOpen}
+          actionComponent={
+            <NavigationButtons
+              buttons={[
+                {
+                  label: 'BACK',
+                  iconSrc: '/icons/common/arrow-white.svg',
+                  onClick: () => {},
+                  variant: 'secondary',
+                },
+                {
+                  label: 'NEXT',
+                  iconSrc: '/icons/common/arrow-black.svg',
+                  onClick: () => {},
+                  variant: 'primary',
+                },
+                {
+                  label: 'NEXT',
+                  iconSrc: '/icons/common/arrow-black.svg',
+                  onClick: () => {},
+                  variant: 'primary',
+                },
+              ]}
+            />
+          }
+          header={{
+            title: 'Modal Title',
+          }}
+          onClose={handleCloseModal}
+        >
+          <p>This is the modal content.</p>
+        </Modal>
       </AddDestinationButtonWrapper>
     </>
   );
diff --git a/frontend/webapp/public/icons/common/x.svg b/frontend/webapp/public/icons/common/x.svg
new file mode 100644
index 000000000..26ea41f62
--- /dev/null
+++ b/frontend/webapp/public/icons/common/x.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none">
+  <mask id="mask0_1160_8186" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="0" width="11" height="14">
+    <rect width="10.1461" height="12.5591" transform="matrix(-1 -8.74228e-08 -8.74228e-08 1 17.7665 0.720703)" fill="black"/>
+  </mask>
+  <g mask="url(#mask0_1160_8186)">
+    <path d="M9.48745 5.83159L9.48745 8.2646L10.9827 8.2646L10.9827 5.83159L9.48745 5.83159ZM17.8469 17.1848L19.8749 15.394L9.48745 7.04684L19.8749 -1.36689L17.9284 -3.15772L6.16179 6.30412L6.16179 7.75688L17.8469 17.1848Z" fill="#F9F9F9"/>
+  </g>
+  <mask id="mask1_1160_8186" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="11" height="14">
+    <rect x="0.0212402" y="0.720703" width="10.1461" height="12.5591" fill="black"/>
+  </mask>
+  <g mask="url(#mask1_1160_8186)">
+    <path d="M8.51279 5.83159L8.51279 8.2646L7.01759 8.2646L7.01759 5.83159L8.51279 5.83159ZM0.15336 17.1848L-1.87463 15.394L8.51279 7.04684L-1.87463 -1.36689L0.0718772 -3.15772L11.8385 6.30412L11.8385 7.75688L0.15336 17.1848Z" fill="#F9F9F9"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 4090df8fb..4cf8e0bd3 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -8,3 +8,5 @@ export * from './divider';
 export * from './counter';
 export * from './toggle';
 export * from './checkbox';
+export * from './modal';
+export * from './navigation-buttons';
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
new file mode 100644
index 000000000..872b14503
--- /dev/null
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { Button } from '../button';
+
+interface ModalProps {
+  isOpen: boolean;
+  header: {
+    title: string;
+  };
+  actionComponent?: React.ReactNode;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(17, 17, 17, 0.8);
+  backdrop-filter: blur(1px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+const ModalWrapper = styled.div`
+  background: ${({ theme }) => theme.colors.translucent_bg};
+  border-radius: 40px;
+  border: ${({ theme }) => `1px solid ${theme.colors.border}`};
+  width: 1080px;
+  box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8),
+    0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),
+    0px 10px 10px 0px rgba(17, 17, 17, 0.8),
+    0px 0px 8px 0px rgba(17, 17, 17, 0.8);
+`;
+
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 80px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+  padding: 0 24px;
+`;
+
+const ModalCloseButton = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const HeaderActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const ModalContent = styled.div`
+  padding: 1rem;
+`;
+
+const ModalTitle = styled(Text)`
+  text-transform: uppercase;
+  font-weight: 500;
+`;
+
+const CancelText = styled(Text)`
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 14px;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration: underline;
+  cursor: pointer;
+`;
+
+const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 1rem;
+  border-top: 1px solid #eaeaea;
+`;
+
+const ModalButton = styled(Button)``;
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  header,
+  onClose,
+  children,
+  actionComponent,
+}) => {
+  if (!isOpen) return null;
+
+  return ReactDOM.createPortal(
+    <Overlay>
+      <ModalWrapper>
+        <ModalHeader>
+          <ModalCloseButton onClick={onClose}>
+            <Image
+              src="/icons/common/x.svg"
+              alt="close"
+              width={15}
+              height={12}
+            />
+            <CancelText>{'Cancel'}</CancelText>
+          </ModalCloseButton>
+          <ModalTitle family={'secondary'}>{header.title}</ModalTitle>
+          <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
+        </ModalHeader>
+        <ModalContent>{children}</ModalContent>
+      </ModalWrapper>
+    </Overlay>,
+    document.body
+  );
+};
+
+export { Modal };
diff --git a/frontend/webapp/reuseable-components/navigation-buttons/index.tsx b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
new file mode 100644
index 000000000..f1b366150
--- /dev/null
+++ b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import { Button } from '../button';
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+
+interface NavigationButtonProps {
+  label: string;
+  iconSrc?: string;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary';
+  disabled?: boolean;
+}
+
+interface NavigationButtonsProps {
+  buttons: NavigationButtonProps[];
+}
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const ButtonText = styled(Text)`
+  text-decoration: underline;
+`;
+
+export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
+  buttons,
+}) => {
+  function renderBackButton({
+    button,
+    index,
+  }: {
+    button: NavigationButtonProps;
+    index: number;
+  }) {
+    return (
+      buttons.length > 0 &&
+      buttons[0].label === 'BACK' &&
+      button.iconSrc &&
+      index === 0
+    );
+  }
+  return (
+    <ButtonsContainer>
+      {buttons.map((button, index) => (
+        <StyledButton
+          key={index}
+          variant={button.variant || 'secondary'}
+          onClick={button.onClick}
+          disabled={button.disabled}
+        >
+          {renderBackButton({ button, index }) && (
+            <Image
+              src={button?.iconSrc || ''}
+              alt={button.label}
+              width={8}
+              height={12}
+            />
+          )}
+          <ButtonText
+            color={
+              button.variant === 'primary'
+                ? theme.colors.dark_grey
+                : theme.colors.secondary
+            }
+            size={14}
+            family="secondary"
+          >
+            {button.label}
+          </ButtonText>
+          {button.iconSrc && !renderBackButton({ button, index }) && (
+            <Image
+              src={button.iconSrc}
+              alt={button.label}
+              width={8}
+              height={12}
+            />
+          )}
+        </StyledButton>
+      ))}
+    </ButtonsContainer>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 61c582f40..393e02dcc 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -14,23 +14,20 @@ interface TextProps {
 
 const TextWrapper = styled.div<{
   color?: string;
-  size: number;
-  weight: number;
-  align: 'left' | 'center' | 'right';
+  size?: number;
+  weight?: number;
+  align?: 'left' | 'center' | 'right';
   family?: 'primary' | 'secondary';
-  opacity: number;
+  opacity?: number;
   decoration?: string;
 }>`
   color: ${({ color, theme }) => color || theme.colors.text};
-  font-size: ${({ size }) => size}px;
-  font-weight: ${({ weight }) => weight};
-  text-align: ${({ align }) => align};
-  opacity: ${({ opacity }) => opacity};
-  text-decoration: ${({ decoration }) => decoration};
+  font-size: ${({ size }) => (size !== undefined ? size : 16)}px;
+  font-weight: ${({ weight }) => (weight !== undefined ? weight : 300)};
+  text-align: ${({ align }) => align || 'left'};
+  opacity: ${({ opacity }) => (opacity !== undefined ? opacity : 1)};
+  text-decoration: ${({ decoration }) => decoration || 'none'};
   font-family: ${({ theme, family }) => {
-    if (family === 'primary') {
-      return theme.font_family.primary;
-    }
     if (family === 'secondary') {
       return theme.font_family.secondary;
     }
@@ -38,29 +35,8 @@ const TextWrapper = styled.div<{
   }};
 `;
 
-const Text: React.FC<TextProps> = ({
-  children,
-  color,
-  size = 16,
-  weight = 300,
-  align = 'left',
-  family = 'primary',
-  opacity = 1,
-  decoration,
-}) => {
-  return (
-    <TextWrapper
-      family={family}
-      color={color}
-      size={size}
-      weight={weight}
-      align={align}
-      opacity={opacity}
-      decoration={decoration}
-    >
-      {children}
-    </TextWrapper>
-  );
+const Text: React.FC<TextProps> = ({ children, ...props }) => {
+  return <TextWrapper {...props}>{children}</TextWrapper>;
 };
 
 export { Text };
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index ce5ce7c11..fa1d86cb6 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -7,6 +7,7 @@ const colors = {
   dark_grey: '#151515',
   text: '#F9F9F9',
   border: 'rgba(249, 249, 249, 0.08)',
+  translucent_bg: '#1e1e1e',
 };
 
 const text = {

From 7ee83aea5eaa6e1dc57ab6157ea0fa585913afa1 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 4 Aug 2024 11:29:41 +0300
Subject: [PATCH 123/374] chore: modal header

---
 .../destinations/choose-destination/index.tsx | 18 +++++--------
 .../reuseable-components/modal/index.tsx      | 27 +++++++++++--------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
index e99babaca..c2fc0be52 100644
--- a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
@@ -74,18 +74,12 @@ export function ChooseDestinationContainer() {
           actionComponent={
             <NavigationButtons
               buttons={[
-                {
-                  label: 'BACK',
-                  iconSrc: '/icons/common/arrow-white.svg',
-                  onClick: () => {},
-                  variant: 'secondary',
-                },
-                {
-                  label: 'NEXT',
-                  iconSrc: '/icons/common/arrow-black.svg',
-                  onClick: () => {},
-                  variant: 'primary',
-                },
+                // {
+                //   label: 'BACK',
+                //   iconSrc: '/icons/common/arrow-white.svg',
+                //   onClick: () => {},
+                //   variant: 'secondary',
+                // },
                 {
                   label: 'NEXT',
                   iconSrc: '/icons/common/arrow-black.svg',
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index 872b14503..48b1aa577 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -66,9 +66,21 @@ const ModalContent = styled.div`
   padding: 1rem;
 `;
 
+const ModalTitleContainer = styled.div`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  pointer-events: none;
+`;
+
 const ModalTitle = styled(Text)`
   text-transform: uppercase;
-  font-weight: 500;
+  font-weight: 400;
+  pointer-events: auto; /* Allow interaction with the title */
 `;
 
 const CancelText = styled(Text)`
@@ -80,15 +92,6 @@ const CancelText = styled(Text)`
   cursor: pointer;
 `;
 
-const ModalFooter = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding: 1rem;
-  border-top: 1px solid #eaeaea;
-`;
-
-const ModalButton = styled(Button)``;
-
 const Modal: React.FC<ModalProps> = ({
   isOpen,
   header,
@@ -111,7 +114,9 @@ const Modal: React.FC<ModalProps> = ({
             />
             <CancelText>{'Cancel'}</CancelText>
           </ModalCloseButton>
-          <ModalTitle family={'secondary'}>{header.title}</ModalTitle>
+          <ModalTitleContainer>
+            <ModalTitle family={'secondary'}>{header.title}</ModalTitle>
+          </ModalTitleContainer>
           <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
         </ModalHeader>
         <ModalContent>{children}</ModalContent>

From b49336eef3b91f549e6c78af6e57300d4831e4e8 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 4 Aug 2024 11:33:38 +0300
Subject: [PATCH 124/374] chore: wip

---
 frontend/webapp/reuseable-components/modal/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index 48b1aa577..68d08a1cd 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -79,8 +79,8 @@ const ModalTitleContainer = styled.div`
 
 const ModalTitle = styled(Text)`
   text-transform: uppercase;
-  font-weight: 400;
-  pointer-events: auto; /* Allow interaction with the title */
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  pointer-events: auto;
 `;
 
 const CancelText = styled(Text)`
@@ -115,7 +115,7 @@ const Modal: React.FC<ModalProps> = ({
             <CancelText>{'Cancel'}</CancelText>
           </ModalCloseButton>
           <ModalTitleContainer>
-            <ModalTitle family={'secondary'}>{header.title}</ModalTitle>
+            <ModalTitle>{header.title}</ModalTitle>
           </ModalTitleContainer>
           <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
         </ModalHeader>

From 6687777049be60b99ba37101971e52339f15ec53 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 4 Aug 2024 11:47:36 +0300
Subject: [PATCH 125/374] chore: wip

---
 frontend/webapp/components/setup/headers/header/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
index 2083c9c79..722a27586 100644
--- a/frontend/webapp/components/setup/headers/header/index.tsx
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -1,7 +1,7 @@
-import { NavigationButtons, Text } from '@/reuseable-components';
 import Image from 'next/image';
 import React from 'react';
 import styled from 'styled-components';
+import { NavigationButtons, Text } from '@/reuseable-components';
 
 interface SetupHeaderProps {
   onBack: () => void;

From df8e83fc7c260be9019cc87ac2c261b400d2b29e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 4 Aug 2024 11:49:26 +0300
Subject: [PATCH 126/374] chore: ficed pr comments

---
 frontend/webapp/styles/theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index fa1d86cb6..533cd3401 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -7,7 +7,7 @@ const colors = {
   dark_grey: '#151515',
   text: '#F9F9F9',
   border: 'rgba(249, 249, 249, 0.08)',
-  translucent_bg: '#1e1e1e',
+  translucent_bg: 'rgba(249, 249, 249, 0.04)',
 };
 
 const text = {

From a25a02415abd8e9b0c38ec8b7a96870f13e06a2a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 4 Aug 2024 12:50:18 +0300
Subject: [PATCH 127/374] chore: init destination list

---
 .../destinations-list/index.tsx               | 141 ++++++++++++++++++
 .../destinations/choose-destination/index.tsx |  44 +++++-
 .../reuseable-components/modal/index.tsx      |   4 +-
 frontend/webapp/types/destinations.ts         |  17 +++
 4 files changed, 201 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx
index e69de29bb..b1c4859ab 100644
--- a/frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { DestinationTypeItem } from '@/types';
+import { Text } from '@/reuseable-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 16px;
+  height: 100%;
+  max-height: 548px;
+  overflow-y: auto;
+`;
+
+const ListItem = styled.div<{ selected: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  transition: background 0.3s;
+  border-radius: 16px;
+
+  cursor: pointer;
+  background: ${({ selected }) =>
+    selected ? 'rgba(68, 74, 217, 0.24)' : 'rgba(249, 249, 249, 0.04)'};
+
+  &:hover {
+    background: rgba(68, 74, 217, 0.24);
+  }
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const DestinationIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const SignalsWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+const SignalText = styled(Text)`
+  color: rgba(249, 249, 249, 0.8);
+  font-size: 10px;
+  text-transform: capitalize;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+const SelectedTextWrapper = styled.div`
+  margin-right: 24px;
+`;
+
+interface DestinationsListProps {
+  items: DestinationTypeItem[];
+  selectedItems: DestinationTypeItem[];
+  setSelectedItems: (item: DestinationTypeItem) => void;
+}
+
+const DestinationsList: React.FC<DestinationsListProps> = ({
+  items,
+  selectedItems,
+  setSelectedItems,
+}) => {
+  function renderSupportedSignals(item: DestinationTypeItem) {
+    const supportedSignals = item.supportedSignals;
+    const signals = Object.keys(supportedSignals);
+    const supportedSignalsList = signals.filter(
+      (signal) => supportedSignals[signal].supported
+    );
+
+    return supportedSignalsList.map((signal, index) => (
+      <>
+        <SignalText>{signal}</SignalText>
+        {index < supportedSignalsList.length - 1 && <SignalText>·</SignalText>}
+      </>
+    ));
+  }
+  renderSupportedSignals(items[0]);
+  return (
+    <Container>
+      {items.map((item) => (
+        <ListItem
+          key={item.displayName}
+          selected={selectedItems.includes(item)}
+          onClick={() => setSelectedItems(item)}
+        >
+          <ListItemContent>
+            <DestinationIconWrapper>
+              <Image
+                src={item.imageUrl}
+                width={20}
+                height={20}
+                alt="destination"
+              />
+            </DestinationIconWrapper>
+            <TextWrapper>
+              <Text>{item.displayName}</Text>
+              <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
+            </TextWrapper>
+          </ListItemContent>
+          {selectedItems.includes(item) && (
+            <SelectedTextWrapper>
+              <Text size={12} family="secondary">
+                SELECTED
+              </Text>
+            </SelectedTextWrapper>
+          )}
+        </ListItem>
+      ))}
+    </Container>
+  );
+};
+
+export { DestinationsList };
diff --git a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
index c2fc0be52..e634f8d66 100644
--- a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
@@ -11,6 +11,8 @@ import Image from 'next/image';
 import theme from '@/styles/theme';
 import { useQuery } from '@apollo/client';
 import { GET_DESTINATION_TYPE } from '@/graphql';
+import { DestinationsList } from './destinations-list';
+import { DestinationTypeItem } from '@/types';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
@@ -28,6 +30,10 @@ const AddDestinationButton = styled(Button)`
 export function ChooseDestinationContainer() {
   const { data, loading, error } = useQuery(GET_DESTINATION_TYPE);
   const [isModalOpen, setModalOpen] = useState(false);
+  const [destinationTypeList, setDestinationTypeList] = useState<
+    DestinationTypeItem[]
+  >([]);
+  const [selectedItems, setSelectedItems] = useState<DestinationTypeItem[]>([]);
 
   const handleOpenModal = () => setModalOpen(true);
   const handleCloseModal = () => setModalOpen(false);
@@ -40,9 +46,39 @@ export function ChooseDestinationContainer() {
     if (error) {
       console.error('Error fetching destination types', error);
     }
+    data && buildDestinationTypeList();
     console.log({ data });
   }, [data, error]);
 
+  function buildDestinationTypeList() {
+    const destinationTypes = data?.destinationTypes?.categories || [];
+    const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
+      (acc: DestinationTypeItem[], category: any) => {
+        const items = category.items.map((item: any) => ({
+          category: category.name,
+          displayName: item.displayName,
+          imageUrl: item.imageUrl,
+          supportedSignals: item.supportedSignals,
+        }));
+        return [...acc, ...items];
+      },
+      []
+    );
+    setDestinationTypeList(destinationTypeList);
+  }
+
+  function handleSelectItem(item: DestinationTypeItem) {
+    if (selectedItems.includes(item)) {
+      const updatedSelectedItems = selectedItems.filter(
+        (selectedItem) => selectedItem !== item
+      );
+      setSelectedItems(updatedSelectedItems);
+    } else {
+      const updatedSelectedItems = [...selectedItems, item];
+      setSelectedItems(updatedSelectedItems);
+    }
+  }
+
   return (
     <>
       <SectionTitle
@@ -90,11 +126,15 @@ export function ChooseDestinationContainer() {
             />
           }
           header={{
-            title: 'Modal Title',
+            title: 'Add destination',
           }}
           onClose={handleCloseModal}
         >
-          <p>This is the modal content.</p>
+          <DestinationsList
+            items={destinationTypeList}
+            selectedItems={selectedItems}
+            setSelectedItems={handleSelectItem}
+          />
         </Modal>
       </AddDestinationButtonWrapper>
     </>
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index 68d08a1cd..67f076ffa 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -62,9 +62,7 @@ const HeaderActionsWrapper = styled.div`
   gap: 8px;
 `;
 
-const ModalContent = styled.div`
-  padding: 1rem;
-`;
+const ModalContent = styled.div``;
 
 const ModalTitleContainer = styled.div`
   position: absolute;
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index a00ad4051..56c734bbe 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -5,6 +5,23 @@ export enum DestinationsSortType {
   TYPE = 'type',
 }
 
+export interface DestinationTypeItem {
+  displayName: string;
+  imageUrl: string;
+  category: 'managed' | 'self-hosted';
+  supportedSignals: {
+    logs: {
+      supported: boolean;
+    };
+    metrics: {
+      supported: boolean;
+    };
+    traces: {
+      supported: boolean;
+    };
+  };
+}
+
 export interface DestinationType {
   fields: any;
   display_name: string;

From f3e8c013af2e54bb2135ac650ca64b16e4f280bb Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 4 Aug 2024 14:33:49 +0300
Subject: [PATCH 128/374] chore: wip

---
 frontend/webapp/app/setup/layout.tsx          |  9 ++-
 .../webapp/components/setup/menu/index.tsx    |  7 +--
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../reuseable-components/input/index.tsx      |  3 +-
 .../webapp/reuseable-components/tag/index.tsx | 60 +++++++++++++++++++
 frontend/webapp/utils/constants/index.tsx     |  1 +
 frontend/webapp/utils/constants/monitors.ts   | 14 +++++
 7 files changed, 88 insertions(+), 7 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/tag/index.tsx
 create mode 100644 frontend/webapp/utils/constants/monitors.ts

diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index 198d6164d..a5ddf5598 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -43,7 +43,14 @@ export default function SetupLayout({
   return (
     <LayoutContainer>
       <HeaderWrapper>
-        <SetupHeader />
+        <SetupHeader
+          onBack={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+          onNext={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
       </HeaderWrapper>
       <SideMenuWrapper>
         <SideMenu />
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index 08e1716f5..135c6ce8e 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -61,14 +61,13 @@ const StepContent = styled.div`
 `;
 
 const StepTitle = styled(Text)`
-  font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
 `;
 
 const StepSubtitle = styled(Text)``;
 
-const SideMenu: React.FC = () => {
-  const steps: StepProps[] = [
+const SideMenu: React.FC<{ data?: StepProps[] }> = ({ data }) => {
+  const steps: StepProps[] = data || [
     {
       title: 'INSTALLATION',
       subtitle: 'Success',
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 4cf8e0bd3..0391f7f11 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -10,3 +10,4 @@ export * from './toggle';
 export * from './checkbox';
 export * from './modal';
 export * from './navigation-buttons';
+export * from './tag';
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 9b62c8bc1..2f5e3607c 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -75,8 +75,7 @@ const StyledInput = styled.input`
     font-family: ${({ theme }) => theme.font_family.primary};
     opacity: 0.4;
     font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
+    font-weight: 300;
     line-height: 22px; /* 157.143% */
   }
 
diff --git a/frontend/webapp/reuseable-components/tag/index.tsx b/frontend/webapp/reuseable-components/tag/index.tsx
new file mode 100644
index 000000000..193553013
--- /dev/null
+++ b/frontend/webapp/reuseable-components/tag/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface TagProps {
+  id: string;
+  children: React.ReactNode;
+  isSelected: boolean;
+  isDisabled?: boolean;
+  onClick: (id: string) => void;
+}
+
+const TagContainer = styled.div<{ isSelected: boolean; isDisabled: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border-radius: 16px;
+  background-color: ${({ theme, isSelected }) =>
+    isSelected ? theme.colors.dark_grey : theme.colors.translucent_bg};
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};
+  transition: background-color 0.2s ease-in-out, 0.2s ease-in-out;
+
+  ${({ isDisabled, theme }) =>
+    !isDisabled &&
+    css`
+      &:hover {
+        background-color: ${theme.colors.dark_grey};
+      }
+    `}
+`;
+
+const Tag: React.FC<TagProps> = ({
+  id,
+  isSelected,
+  isDisabled = false,
+  onClick,
+  children,
+}) => {
+  const handleClick = () => {
+    if (!isDisabled) {
+      onClick(id);
+    }
+  };
+
+  return (
+    <TagContainer
+      isSelected={isSelected}
+      isDisabled={isDisabled}
+      onClick={handleClick}
+      role="button"
+      aria-disabled={isDisabled}
+      aria-pressed={isSelected}
+    >
+      {children}
+    </TagContainer>
+  );
+};
+
+export { Tag };
diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx
index b16a6a033..21b5ba246 100644
--- a/frontend/webapp/utils/constants/index.tsx
+++ b/frontend/webapp/utils/constants/index.tsx
@@ -3,3 +3,4 @@ export * from './config';
 export * from './string';
 export * from './urls';
 export * from './programming.languages';
+export * from './monitors';
diff --git a/frontend/webapp/utils/constants/monitors.ts b/frontend/webapp/utils/constants/monitors.ts
new file mode 100644
index 000000000..7bd5f3daf
--- /dev/null
+++ b/frontend/webapp/utils/constants/monitors.ts
@@ -0,0 +1,14 @@
+export const MONITORS_OPTIONS = [
+  {
+    id: 'logs',
+    value: 'Logs',
+  },
+  {
+    id: 'metrics',
+    value: 'Metrics',
+  },
+  {
+    id: 'traces',
+    value: 'Traces',
+  },
+];

From 239eac46b7511cd5f6fc0f5b016a515ea17509b8 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 4 Aug 2024 16:28:10 +0300
Subject: [PATCH 129/374] chore: code structure

---
 .../add-destination-button/index.tsx          |  33 ++++
 .../webapp/components/destinations/index.ts   |   1 +
 frontend/webapp/components/index.ts           |   1 +
 .../webapp/components/setup/menu/index.tsx    |   3 +-
 .../destinations-list/index.tsx               |  31 +---
 .../destinations/add-destination/index.tsx    |  64 ++++++++
 .../choose-destination-menu/index.tsx         |   0
 .../destinations/choose-destination/index.tsx | 142 ------------------
 .../containers/main/destinations/index.tsx    |   2 +-
 .../reuseable-components/modal/index.tsx      |   2 +-
 .../navigation-buttons/index.tsx              |   7 +-
 .../webapp/reuseable-components/tag/index.tsx |  11 +-
 12 files changed, 118 insertions(+), 179 deletions(-)
 create mode 100644 frontend/webapp/components/destinations/add-destination-button/index.tsx
 create mode 100644 frontend/webapp/components/destinations/index.ts
 rename frontend/webapp/containers/main/destinations/{choose-destination => add-destination}/destinations-list/index.tsx (77%)
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/index.tsx
 delete mode 100644 frontend/webapp/containers/main/destinations/choose-destination/choose-destination-menu/index.tsx
 delete mode 100644 frontend/webapp/containers/main/destinations/choose-destination/index.tsx

diff --git a/frontend/webapp/components/destinations/add-destination-button/index.tsx b/frontend/webapp/components/destinations/add-destination-button/index.tsx
new file mode 100644
index 000000000..281d403c7
--- /dev/null
+++ b/frontend/webapp/components/destinations/add-destination-button/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Image from 'next/image';
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+import { Button, Text } from '@/reuseable-components';
+
+const StyledAddDestinationButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+`;
+
+interface ModalActionComponentProps {
+  onClick: () => void;
+}
+
+export function AddDestinationButton({ onClick }: ModalActionComponentProps) {
+  return (
+    <StyledAddDestinationButton variant="secondary" onClick={onClick}>
+      <Image src="/icons/common/plus.svg" alt="back" width={16} height={16} />
+      <Text
+        color={theme.colors.secondary}
+        size={14}
+        decoration={'underline'}
+        family="secondary"
+      >
+        ADD DESTINATION
+      </Text>
+    </StyledAddDestinationButton>
+  );
+}
diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
new file mode 100644
index 000000000..6a8d33bb7
--- /dev/null
+++ b/frontend/webapp/components/destinations/index.ts
@@ -0,0 +1 @@
+export * from './add-destination-button';
diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
index c03b571ed..5a7406ea6 100644
--- a/frontend/webapp/components/index.ts
+++ b/frontend/webapp/components/index.ts
@@ -4,3 +4,4 @@ export * from './overview';
 export * from './common';
 export * from './notification/notification-manager';
 export * from './notification/notification-list';
+export * from './destinations';
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index 135c6ce8e..e78c035d2 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -33,11 +33,10 @@ const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
 `;
 
 const IconWrapper = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
-  margin-right: 10px;
   border-radius: 32px;
   width: 24px;
   height: 24px;
-  border: 1px solid #f9f9f9;
+  border: 1px solid ${({ theme }) => theme.colors.secondary};
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
similarity index 77%
rename from frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx
rename to frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index b1c4859ab..7d54930ff 100644
--- a/frontend/webapp/containers/main/destinations/choose-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -16,7 +16,7 @@ const Container = styled.div`
   overflow-y: auto;
 `;
 
-const ListItem = styled.div<{ selected: boolean }>`
+const ListItem = styled.div<{}>`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -26,12 +26,14 @@ const ListItem = styled.div<{ selected: boolean }>`
   border-radius: 16px;
 
   cursor: pointer;
-  background: ${({ selected }) =>
-    selected ? 'rgba(68, 74, 217, 0.24)' : 'rgba(249, 249, 249, 0.04)'};
+  background: rgba(249, 249, 249, 0.04);
 
   &:hover {
     background: rgba(68, 74, 217, 0.24);
   }
+  &:last-child {
+    margin-bottom: 32px;
+  }
 `;
 
 const ListItemContent = styled.div`
@@ -73,19 +75,13 @@ const TextWrapper = styled.div`
   justify-content: space-between;
 `;
 
-const SelectedTextWrapper = styled.div`
-  margin-right: 24px;
-`;
-
 interface DestinationsListProps {
   items: DestinationTypeItem[];
-  selectedItems: DestinationTypeItem[];
   setSelectedItems: (item: DestinationTypeItem) => void;
 }
 
 const DestinationsList: React.FC<DestinationsListProps> = ({
   items,
-  selectedItems,
   setSelectedItems,
 }) => {
   function renderSupportedSignals(item: DestinationTypeItem) {
@@ -102,15 +98,11 @@ const DestinationsList: React.FC<DestinationsListProps> = ({
       </>
     ));
   }
-  renderSupportedSignals(items[0]);
+
   return (
     <Container>
       {items.map((item) => (
-        <ListItem
-          key={item.displayName}
-          selected={selectedItems.includes(item)}
-          onClick={() => setSelectedItems(item)}
-        >
+        <ListItem key={item.displayName} onClick={() => setSelectedItems(item)}>
           <ListItemContent>
             <DestinationIconWrapper>
               <Image
@@ -121,17 +113,10 @@ const DestinationsList: React.FC<DestinationsListProps> = ({
               />
             </DestinationIconWrapper>
             <TextWrapper>
-              <Text>{item.displayName}</Text>
+              <Text size={14}>{item.displayName}</Text>
               <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
             </TextWrapper>
           </ListItemContent>
-          {selectedItems.includes(item) && (
-            <SelectedTextWrapper>
-              <Text size={12} family="secondary">
-                SELECTED
-              </Text>
-            </SelectedTextWrapper>
-          )}
         </ListItem>
       ))}
     </Container>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
new file mode 100644
index 000000000..97ed4d27f
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+
+import styled from 'styled-components';
+import { useQuery } from '@apollo/client';
+import { DestinationTypeItem } from '@/types';
+import { GET_DESTINATION_TYPE } from '@/graphql';
+import { AddDestinationButton } from '@/components';
+import { SectionTitle } from '@/reuseable-components';
+import { AddDestinationModal } from './add-destination-modal';
+
+const AddDestinationButtonWrapper = styled.div`
+  width: 100%;
+  margin-top: 24px;
+`;
+
+export function ChooseDestinationContainer() {
+  const { data } = useQuery(GET_DESTINATION_TYPE);
+
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [destinationTypeList, setDestinationTypeList] = useState<
+    DestinationTypeItem[]
+  >([]);
+
+  const handleOpenModal = () => setModalOpen(true);
+  const handleCloseModal = () => setModalOpen(false);
+
+  useEffect(() => {
+    data && buildDestinationTypeList();
+  }, [data]);
+
+  function buildDestinationTypeList() {
+    const destinationTypes = data?.destinationTypes?.categories || [];
+    const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
+      (acc: DestinationTypeItem[], category: any) => {
+        const items = category.items.map((item: any) => ({
+          category: category.name,
+          displayName: item.displayName,
+          imageUrl: item.imageUrl,
+          supportedSignals: item.supportedSignals,
+        }));
+        return [...acc, ...items];
+      },
+      []
+    );
+    setDestinationTypeList(destinationTypeList);
+  }
+
+  return (
+    <>
+      <SectionTitle
+        title="Configure destinations"
+        description="Add backend destinations where collected data will be sent and configure their settings."
+      />
+      <AddDestinationButtonWrapper>
+        <AddDestinationButton onClick={() => handleOpenModal()} />
+      </AddDestinationButtonWrapper>
+      <AddDestinationModal
+        isModalOpen={isModalOpen}
+        handleCloseModal={handleCloseModal}
+        destinationTypeList={destinationTypeList}
+      />
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/main/destinations/choose-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/choose-destination-menu/index.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx b/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
deleted file mode 100644
index e634f8d66..000000000
--- a/frontend/webapp/containers/main/destinations/choose-destination/index.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  Modal,
-  NavigationButtons,
-  SectionTitle,
-  Text,
-} from '@/reuseable-components';
-import styled from 'styled-components';
-import Image from 'next/image';
-import theme from '@/styles/theme';
-import { useQuery } from '@apollo/client';
-import { GET_DESTINATION_TYPE } from '@/graphql';
-import { DestinationsList } from './destinations-list';
-import { DestinationTypeItem } from '@/types';
-
-const AddDestinationButtonWrapper = styled.div`
-  width: 100%;
-  margin-top: 24px;
-`;
-
-const AddDestinationButton = styled(Button)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-`;
-
-export function ChooseDestinationContainer() {
-  const { data, loading, error } = useQuery(GET_DESTINATION_TYPE);
-  const [isModalOpen, setModalOpen] = useState(false);
-  const [destinationTypeList, setDestinationTypeList] = useState<
-    DestinationTypeItem[]
-  >([]);
-  const [selectedItems, setSelectedItems] = useState<DestinationTypeItem[]>([]);
-
-  const handleOpenModal = () => setModalOpen(true);
-  const handleCloseModal = () => setModalOpen(false);
-  const handleSubmit = () => {
-    console.log('Action submitted');
-    setModalOpen(false);
-  };
-
-  useEffect(() => {
-    if (error) {
-      console.error('Error fetching destination types', error);
-    }
-    data && buildDestinationTypeList();
-    console.log({ data });
-  }, [data, error]);
-
-  function buildDestinationTypeList() {
-    const destinationTypes = data?.destinationTypes?.categories || [];
-    const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
-      (acc: DestinationTypeItem[], category: any) => {
-        const items = category.items.map((item: any) => ({
-          category: category.name,
-          displayName: item.displayName,
-          imageUrl: item.imageUrl,
-          supportedSignals: item.supportedSignals,
-        }));
-        return [...acc, ...items];
-      },
-      []
-    );
-    setDestinationTypeList(destinationTypeList);
-  }
-
-  function handleSelectItem(item: DestinationTypeItem) {
-    if (selectedItems.includes(item)) {
-      const updatedSelectedItems = selectedItems.filter(
-        (selectedItem) => selectedItem !== item
-      );
-      setSelectedItems(updatedSelectedItems);
-    } else {
-      const updatedSelectedItems = [...selectedItems, item];
-      setSelectedItems(updatedSelectedItems);
-    }
-  }
-
-  return (
-    <>
-      <SectionTitle
-        title="Configure destinations"
-        description="Add backend destinations where collected data will be sent and configure their settings."
-      />
-      <AddDestinationButtonWrapper>
-        <AddDestinationButton
-          variant="secondary"
-          onClick={() => handleOpenModal()}
-        >
-          <Image
-            src="/icons/common/plus.svg"
-            alt="back"
-            width={16}
-            height={16}
-          />
-          <Text
-            color={theme.colors.secondary}
-            size={14}
-            decoration={'underline'}
-            family="secondary"
-          >
-            ADD DESTINATION
-          </Text>
-        </AddDestinationButton>
-        <Modal
-          isOpen={isModalOpen}
-          actionComponent={
-            <NavigationButtons
-              buttons={[
-                // {
-                //   label: 'BACK',
-                //   iconSrc: '/icons/common/arrow-white.svg',
-                //   onClick: () => {},
-                //   variant: 'secondary',
-                // },
-                {
-                  label: 'NEXT',
-                  iconSrc: '/icons/common/arrow-black.svg',
-                  onClick: () => {},
-                  variant: 'primary',
-                },
-              ]}
-            />
-          }
-          header={{
-            title: 'Add destination',
-          }}
-          onClose={handleCloseModal}
-        >
-          <DestinationsList
-            items={destinationTypeList}
-            selectedItems={selectedItems}
-            setSelectedItems={handleSelectItem}
-          />
-        </Modal>
-      </AddDestinationButtonWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/containers/main/destinations/index.tsx b/frontend/webapp/containers/main/destinations/index.tsx
index eef1f549b..a50795fd7 100644
--- a/frontend/webapp/containers/main/destinations/index.tsx
+++ b/frontend/webapp/containers/main/destinations/index.tsx
@@ -1,2 +1,2 @@
 export * from './managed';
-export * from './choose-destination';
+export * from './add-destination';
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index 67f076ffa..7404ee698 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -83,7 +83,7 @@ const ModalTitle = styled(Text)`
 
 const CancelText = styled(Text)`
   text-transform: uppercase;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 14px;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration: underline;
diff --git a/frontend/webapp/reuseable-components/navigation-buttons/index.tsx b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
index f1b366150..b0fc57919 100644
--- a/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
+++ b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
@@ -43,12 +43,7 @@ export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
     button: NavigationButtonProps;
     index: number;
   }) {
-    return (
-      buttons.length > 0 &&
-      buttons[0].label === 'BACK' &&
-      button.iconSrc &&
-      index === 0
-    );
+    return buttons.length > 0 && button.iconSrc && index === 0;
   }
   return (
     <ButtonsContainer>
diff --git a/frontend/webapp/reuseable-components/tag/index.tsx b/frontend/webapp/reuseable-components/tag/index.tsx
index 193553013..4e0e32dd2 100644
--- a/frontend/webapp/reuseable-components/tag/index.tsx
+++ b/frontend/webapp/reuseable-components/tag/index.tsx
@@ -13,19 +13,22 @@ const TagContainer = styled.div<{ isSelected: boolean; isDisabled: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px 16px;
+  padding: 8px 12px;
   border-radius: 16px;
   background-color: ${({ theme, isSelected }) =>
-    isSelected ? theme.colors.dark_grey : theme.colors.translucent_bg};
+    isSelected ? theme.colors.primary : theme.colors.translucent_bg};
   cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};
-  transition: background-color 0.2s ease-in-out, 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 
   ${({ isDisabled, theme }) =>
     !isDisabled &&
     css`
       &:hover {
-        background-color: ${theme.colors.dark_grey};
+        background-color: ${theme.colors.secondary};
+        div {
+          color: ${theme.colors.primary};
+        }
       }
     `}
 `;

From 0f183f462d3ceb1741a7547a23bef63fa75aad1e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 5 Aug 2024 11:52:10 +0300
Subject: [PATCH 130/374] chore: wip

---
 .../webapp/components/destinations/index.ts   |   1 +
 .../destinations/monitors-tap-list/index.tsx  |  47 ++++++++
 .../webapp/components/setup/menu/index.tsx    |   8 +-
 .../add-destination-modal/index.tsx           | 107 ++++++++++++++++++
 .../choose-destination-menu/index.tsx         |  71 ++++++++++++
 .../choose-destination-modal-body/index.tsx   | 101 +++++++++++++++++
 .../connect-destination-modal-body/index.tsx  |  39 +++++++
 .../destinations/add-destination/index.tsx    |  32 +-----
 .../destinations/add-destination/styled.ts    |  15 +++
 frontend/webapp/types/common.ts               |   7 ++
 10 files changed, 390 insertions(+), 38 deletions(-)
 create mode 100644 frontend/webapp/components/destinations/monitors-tap-list/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/styled.ts

diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
index 6a8d33bb7..e7e4b7330 100644
--- a/frontend/webapp/components/destinations/index.ts
+++ b/frontend/webapp/components/destinations/index.ts
@@ -1 +1,2 @@
 export * from './add-destination-button';
+export * from './monitors-tap-list';
diff --git a/frontend/webapp/components/destinations/monitors-tap-list/index.tsx b/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
new file mode 100644
index 000000000..c1f288894
--- /dev/null
+++ b/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text, Tag } from '@/reuseable-components';
+import { MONITORS_OPTIONS } from '@/utils';
+
+interface MonitorButtonsProps {
+  selectedMonitors: string[];
+  onMonitorSelect: (monitor: string) => void;
+}
+
+const MonitorButtonsContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-left: 12px;
+`;
+
+const MonitorsTitle = styled(Text)`
+  opacity: 0.8;
+  font-size: 14px;
+  margin-left: 32px;
+`;
+
+const MonitorsTapList: React.FC<MonitorButtonsProps> = ({
+  selectedMonitors,
+  onMonitorSelect,
+}) => {
+  return (
+    <>
+      <MonitorsTitle>Monitor by:</MonitorsTitle>
+      <MonitorButtonsContainer>
+        {MONITORS_OPTIONS.map((monitor) => (
+          <Tag
+            id={monitor.id}
+            isSelected={selectedMonitors.includes(monitor.id)}
+            onClick={() => onMonitorSelect(monitor.id)}
+          >
+            <Text size={12} color="rgba(249, 249, 249, 0.8)">
+              {monitor.value}
+            </Text>
+          </Tag>
+        ))}
+      </MonitorButtonsContainer>
+    </>
+  );
+};
+
+export { MonitorsTapList };
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index e78c035d2..7bf3d5e33 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -1,15 +1,9 @@
 import { Text } from '@/reuseable-components';
+import { StepProps } from '@/types';
 import Image from 'next/image';
 import React from 'react';
 import styled, { css } from 'styled-components';
 
-interface StepProps {
-  title: string;
-  subtitle?: string;
-  state: 'finish' | 'active' | 'disabled';
-  stepNumber: number;
-}
-
 const Container = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
new file mode 100644
index 000000000..a53260e37
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, NavigationButtons } from '@/reuseable-components';
+import { ChooseDestinationModalBody } from '../choose-destination-modal-body';
+import { DestinationTypeItem } from '@/types';
+import { ConnectDestinationModalBody } from '../connect-destination-modal-body';
+import { GET_DESTINATION_TYPE } from '@/graphql';
+import { useQuery } from '@apollo/client';
+
+interface AddDestinationModalProps {
+  isModalOpen: boolean;
+  handleCloseModal: () => void;
+}
+
+function ModalActionComponent({
+  onNext,
+  onBack,
+  item,
+}: {
+  onNext: () => void;
+  onBack: () => void;
+  item: DestinationTypeItem | undefined;
+}) {
+  return (
+    <NavigationButtons
+      buttons={
+        item
+          ? [
+              {
+                label: 'BACK',
+                iconSrc: '/icons/common/arrow-white.svg',
+                onClick: onBack,
+                variant: 'secondary',
+              },
+              {
+                label: 'DONE',
+                onClick: onNext,
+                variant: 'primary',
+              },
+            ]
+          : []
+      }
+    />
+  );
+}
+
+export function AddDestinationModal({
+  isModalOpen,
+  handleCloseModal,
+}: AddDestinationModalProps) {
+  const { data } = useQuery(GET_DESTINATION_TYPE);
+  const [selectedItem, setSelectedItem] = useState<DestinationTypeItem>();
+  const [destinationTypeList, setDestinationTypeList] = useState<
+    DestinationTypeItem[]
+  >([]);
+
+  useEffect(() => {
+    data && buildDestinationTypeList();
+  }, [data]);
+
+  function buildDestinationTypeList() {
+    const destinationTypes = data?.destinationTypes?.categories || [];
+    const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
+      (acc: DestinationTypeItem[], category: any) => {
+        const items = category.items.map((item: any) => ({
+          category: category.name,
+          displayName: item.displayName,
+          imageUrl: item.imageUrl,
+          supportedSignals: item.supportedSignals,
+        }));
+        return [...acc, ...items];
+      },
+      []
+    );
+    setDestinationTypeList(destinationTypeList);
+  }
+  function handleNextStep(item: DestinationTypeItem) {
+    setSelectedItem(item);
+  }
+
+  function renderModalBody() {
+    return selectedItem ? (
+      <ConnectDestinationModalBody />
+    ) : (
+      <ChooseDestinationModalBody
+        data={destinationTypeList}
+        onSelect={handleNextStep}
+      />
+    );
+  }
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      actionComponent={
+        <ModalActionComponent
+          onNext={() => {}}
+          onBack={() => setSelectedItem(undefined)}
+          item={selectedItem}
+        />
+      }
+      header={{ title: 'Add destination' }}
+      onClose={handleCloseModal}
+    >
+      {renderModalBody()}
+    </Modal>
+  );
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
new file mode 100644
index 000000000..9a86b5ac5
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DropdownOption } from '@/types';
+import { MonitorsTapList } from '@/components';
+import { Dropdown, Input } from '@/reuseable-components';
+
+interface FilterComponentProps {
+  selectedTag: DropdownOption | undefined;
+  onTagSelect: (option: DropdownOption) => void;
+  onSearch: (value: string) => void;
+  selectedMonitors: string[];
+  onMonitorSelect: (monitor: string) => void;
+}
+
+const InputAndDropdownContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  width: 438px;
+`;
+
+const FilterContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 24px 0;
+`;
+
+const DROPDOWN_OPTIONS = [
+  { value: 'All', id: 'all' },
+  { value: 'Managed', id: 'managed' },
+  { value: 'Self-hosted', id: 'self hosted' },
+];
+
+const DestinationFilterComponent: React.FC<FilterComponentProps> = ({
+  selectedTag,
+  onTagSelect,
+  onSearch,
+  selectedMonitors,
+  onMonitorSelect,
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchTerm(value);
+    onSearch(value);
+  };
+
+  return (
+    <FilterContainer>
+      <InputAndDropdownContainer>
+        <Input
+          placeholder="Search..."
+          icon="/icons/common/search.svg"
+          value={searchTerm}
+          onChange={handleSearchChange}
+        />
+        <Dropdown
+          options={DROPDOWN_OPTIONS}
+          selectedOption={selectedTag}
+          onSelect={onTagSelect}
+        />
+      </InputAndDropdownContainer>
+      <MonitorsTapList
+        selectedMonitors={selectedMonitors}
+        onMonitorSelect={onMonitorSelect}
+      />
+    </FilterContainer>
+  );
+};
+
+export { DestinationFilterComponent };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
new file mode 100644
index 000000000..79dab2b4e
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+
+import { SideMenu } from '@/components';
+import { DestinationsList } from '../destinations-list';
+import { Body, Container, SideMenuWrapper } from '../styled';
+import { Divider, SectionTitle } from '@/reuseable-components';
+import { DestinationFilterComponent } from '../choose-destination-menu';
+import { DestinationTypeItem, DropdownOption, StepProps } from '@/types';
+
+interface ChooseDestinationModalBodyProps {
+  data: DestinationTypeItem[];
+  onSelect: (item: DestinationTypeItem) => void;
+}
+
+const SIDE_MENU_DATA: StepProps[] = [
+  {
+    title: 'DESTINATIONS',
+    state: 'active',
+    stepNumber: 1,
+  },
+  {
+    title: 'CONNECTION',
+    state: 'disabled',
+    stepNumber: 2,
+  },
+];
+
+export function ChooseDestinationModalBody({
+  data,
+  onSelect,
+}: ChooseDestinationModalBodyProps) {
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedMonitors, setSelectedMonitors] = useState<string[]>([]);
+  const [dropdownValue, setDropdownValue] = useState<DropdownOption>({
+    id: 'all',
+    value: 'All',
+  });
+
+  function handleTagSelect(option: DropdownOption) {
+    setDropdownValue(option);
+  }
+
+  function filterData() {
+    let filteredData = data;
+
+    if (searchValue) {
+      filteredData = filteredData.filter((item) =>
+        item.displayName.toLowerCase().includes(searchValue.toLowerCase())
+      );
+    }
+
+    if (dropdownValue.id !== 'all') {
+      filteredData = filteredData.filter(
+        (item) => item.category === dropdownValue.id
+      );
+    }
+
+    if (selectedMonitors.length) {
+      filteredData = filteredData.filter((item) =>
+        selectedMonitors.some(
+          (monitor) =>
+            item.supportedSignals[monitor as keyof typeof item.supportedSignals]
+              .supported
+        )
+      );
+    }
+
+    return filteredData;
+  }
+
+  function onMonitorSelect(monitor: string) {
+    if (selectedMonitors.includes(monitor)) {
+      setSelectedMonitors(selectedMonitors.filter((item) => item !== monitor));
+    } else {
+      setSelectedMonitors([...selectedMonitors, monitor]);
+    }
+  }
+
+  return (
+    <Container>
+      <SideMenuWrapper>
+        <SideMenu data={SIDE_MENU_DATA} />
+      </SideMenuWrapper>
+      <Body>
+        <SectionTitle
+          title="Choose destination"
+          description="Add backend destination you want to connect with Odigos."
+        />
+        <DestinationFilterComponent
+          selectedTag={dropdownValue}
+          onTagSelect={handleTagSelect}
+          onSearch={setSearchValue}
+          selectedMonitors={selectedMonitors}
+          onMonitorSelect={onMonitorSelect}
+        />
+        <Divider margin="0 0 24px 0" />
+        <DestinationsList items={filterData()} setSelectedItems={onSelect} />
+      </Body>
+    </Container>
+  );
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
new file mode 100644
index 000000000..6fda7bc35
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { StepProps } from '@/types';
+import { SideMenu } from '@/components';
+import { Divider, SectionTitle } from '@/reuseable-components';
+import { Body, Container, SideMenuWrapper } from '../styled';
+const SIDE_MENU_DATA: StepProps[] = [
+  {
+    title: 'DESTINATIONS',
+    state: 'finish',
+    stepNumber: 1,
+  },
+  {
+    title: 'CONNECTION',
+    state: 'active',
+    stepNumber: 2,
+  },
+];
+
+interface ConnectDestinationModalBodyProps {}
+
+export function ConnectDestinationModalBody({}: ConnectDestinationModalBodyProps) {
+  return (
+    <Container>
+      <SideMenuWrapper>
+        <SideMenu data={SIDE_MENU_DATA} />
+      </SideMenuWrapper>
+
+      <Body>
+        <SectionTitle
+          title="Create connection"
+          description="Connect selected destination with Odigos."
+          buttonText="Check connection"
+          onButtonClick={() => {}}
+        />
+        <Divider margin="0 0 24px 0" />
+      </Body>
+    </Container>
+  );
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 97ed4d27f..fcb7dff01 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,9 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import styled from 'styled-components';
-import { useQuery } from '@apollo/client';
-import { DestinationTypeItem } from '@/types';
-import { GET_DESTINATION_TYPE } from '@/graphql';
 import { AddDestinationButton } from '@/components';
 import { SectionTitle } from '@/reuseable-components';
 import { AddDestinationModal } from './add-destination-modal';
@@ -14,37 +11,11 @@ const AddDestinationButtonWrapper = styled.div`
 `;
 
 export function ChooseDestinationContainer() {
-  const { data } = useQuery(GET_DESTINATION_TYPE);
-
   const [isModalOpen, setModalOpen] = useState(false);
-  const [destinationTypeList, setDestinationTypeList] = useState<
-    DestinationTypeItem[]
-  >([]);
 
   const handleOpenModal = () => setModalOpen(true);
   const handleCloseModal = () => setModalOpen(false);
 
-  useEffect(() => {
-    data && buildDestinationTypeList();
-  }, [data]);
-
-  function buildDestinationTypeList() {
-    const destinationTypes = data?.destinationTypes?.categories || [];
-    const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
-      (acc: DestinationTypeItem[], category: any) => {
-        const items = category.items.map((item: any) => ({
-          category: category.name,
-          displayName: item.displayName,
-          imageUrl: item.imageUrl,
-          supportedSignals: item.supportedSignals,
-        }));
-        return [...acc, ...items];
-      },
-      []
-    );
-    setDestinationTypeList(destinationTypeList);
-  }
-
   return (
     <>
       <SectionTitle
@@ -57,7 +28,6 @@ export function ChooseDestinationContainer() {
       <AddDestinationModal
         isModalOpen={isModalOpen}
         handleCloseModal={handleCloseModal}
-        destinationTypeList={destinationTypeList}
       />
     </>
   );
diff --git a/frontend/webapp/containers/main/destinations/add-destination/styled.ts b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
new file mode 100644
index 000000000..9ad79d7d5
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Body = styled.div`
+  padding: 32px 32px 0;
+  border-left: 1px solid rgba(249, 249, 249, 0.08);
+`;
+
+export const SideMenuWrapper = styled.div`
+  padding: 32px;
+  width: 196px;
+`;
+
+export const Container = styled.div`
+  display: flex;
+`;
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index 3d57d580a..83e80afdc 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -28,3 +28,10 @@ export interface DropdownOption {
   id: string;
   value: string;
 }
+
+export interface StepProps {
+  title: string;
+  subtitle?: string;
+  state: 'finish' | 'active' | 'disabled';
+  stepNumber: number;
+}

From d43d43926c108ec55c215da7efdaca2536361fcf Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 5 Aug 2024 11:54:51 +0300
Subject: [PATCH 131/374] chore: wip

---
 .../add-destination/add-destination-modal/index.tsx   | 10 +++++-----
 .../connect-destination-modal-body/index.tsx          | 11 ++++++++---
 .../main/destinations/add-destination/index.tsx       |  1 -
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index a53260e37..eab8f59d3 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, NavigationButtons } from '@/reuseable-components';
-import { ChooseDestinationModalBody } from '../choose-destination-modal-body';
+import { useQuery } from '@apollo/client';
 import { DestinationTypeItem } from '@/types';
-import { ConnectDestinationModalBody } from '../connect-destination-modal-body';
 import { GET_DESTINATION_TYPE } from '@/graphql';
-import { useQuery } from '@apollo/client';
+import { Modal, NavigationButtons } from '@/reuseable-components';
+import { ConnectDestinationModalBody } from '../connect-destination-modal-body';
+import { ChooseDestinationModalBody } from '../choose-destination-modal-body';
 
 interface AddDestinationModalProps {
   isModalOpen: boolean;
@@ -79,7 +79,7 @@ export function AddDestinationModal({
 
   function renderModalBody() {
     return selectedItem ? (
-      <ConnectDestinationModalBody />
+      <ConnectDestinationModalBody destination={selectedItem} />
     ) : (
       <ChooseDestinationModalBody
         data={destinationTypeList}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 6fda7bc35..d86051d7d 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StepProps } from '@/types';
+import { DestinationTypeItem, StepProps } from '@/types';
 import { SideMenu } from '@/components';
 import { Divider, SectionTitle } from '@/reuseable-components';
 import { Body, Container, SideMenuWrapper } from '../styled';
@@ -16,9 +16,14 @@ const SIDE_MENU_DATA: StepProps[] = [
   },
 ];
 
-interface ConnectDestinationModalBodyProps {}
+interface ConnectDestinationModalBodyProps {
+  destination: DestinationTypeItem | undefined;
+}
 
-export function ConnectDestinationModalBody({}: ConnectDestinationModalBodyProps) {
+export function ConnectDestinationModalBody({
+  destination,
+}: ConnectDestinationModalBodyProps) {
+  console.log({ destination });
   return (
     <Container>
       <SideMenuWrapper>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index fcb7dff01..c8c92371d 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-
 import styled from 'styled-components';
 import { AddDestinationButton } from '@/components';
 import { SectionTitle } from '@/reuseable-components';

From 0173aa2188b90dfb16502cbb78c707ab0ad07c3d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 5 Aug 2024 15:40:57 +0300
Subject: [PATCH 132/374] chore: init get destination type query

---
 frontend/graph/generated.go        | 775 +++++++++++++++++++++++++++--
 frontend/graph/model/models_gen.go |  14 +
 frontend/graph/schema.graphqls     |  15 +
 frontend/graph/schema.resolvers.go |  30 +-
 frontend/services/destinations.go  |  12 +
 5 files changed, 804 insertions(+), 42 deletions(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index ab9a757eb..bd2077fec 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -97,10 +97,24 @@ type ComplexityRoot struct {
 		Traces  func(childComplexity int) int
 	}
 
+	Field struct {
+		ComponentProperties func(childComplexity int) int
+		ComponentType       func(childComplexity int) int
+		DisplayName         func(childComplexity int) int
+		InitialValue        func(childComplexity int) int
+		Name                func(childComplexity int) int
+		ThumbnailURL        func(childComplexity int) int
+		VideoURL            func(childComplexity int) int
+	}
+
 	GetConfigResponse struct {
 		Installation func(childComplexity int) int
 	}
 
+	GetDestinationDetailsResponse struct {
+		Fields func(childComplexity int) int
+	}
+
 	GetDestinationTypesResponse struct {
 		Categories func(childComplexity int) int
 	}
@@ -136,9 +150,10 @@ type ComplexityRoot struct {
 	}
 
 	Query struct {
-		ComputePlatform  func(childComplexity int) int
-		Config           func(childComplexity int) int
-		DestinationTypes func(childComplexity int) int
+		ComputePlatform        func(childComplexity int) int
+		Config                 func(childComplexity int) int
+		DestinationTypeDetails func(childComplexity int, typeArg string) int
+		DestinationTypes       func(childComplexity int) int
 	}
 
 	SourceContainerRuntimeDetails struct {
@@ -178,6 +193,7 @@ type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
 	Config(ctx context.Context) (*model.GetConfigResponse, error)
 	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
+	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
 }
 
 type executableSchema struct {
@@ -405,6 +421,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ExportedSignals.Traces(childComplexity), true
 
+	case "Field.componentProperties":
+		if e.complexity.Field.ComponentProperties == nil {
+			break
+		}
+
+		return e.complexity.Field.ComponentProperties(childComplexity), true
+
+	case "Field.componentType":
+		if e.complexity.Field.ComponentType == nil {
+			break
+		}
+
+		return e.complexity.Field.ComponentType(childComplexity), true
+
+	case "Field.displayName":
+		if e.complexity.Field.DisplayName == nil {
+			break
+		}
+
+		return e.complexity.Field.DisplayName(childComplexity), true
+
+	case "Field.initialValue":
+		if e.complexity.Field.InitialValue == nil {
+			break
+		}
+
+		return e.complexity.Field.InitialValue(childComplexity), true
+
+	case "Field.name":
+		if e.complexity.Field.Name == nil {
+			break
+		}
+
+		return e.complexity.Field.Name(childComplexity), true
+
+	case "Field.thumbnailURL":
+		if e.complexity.Field.ThumbnailURL == nil {
+			break
+		}
+
+		return e.complexity.Field.ThumbnailURL(childComplexity), true
+
+	case "Field.videoUrl":
+		if e.complexity.Field.VideoURL == nil {
+			break
+		}
+
+		return e.complexity.Field.VideoURL(childComplexity), true
+
 	case "GetConfigResponse.installation":
 		if e.complexity.GetConfigResponse.Installation == nil {
 			break
@@ -412,6 +477,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.GetConfigResponse.Installation(childComplexity), true
 
+	case "GetDestinationDetailsResponse.fields":
+		if e.complexity.GetDestinationDetailsResponse.Fields == nil {
+			break
+		}
+
+		return e.complexity.GetDestinationDetailsResponse.Fields(childComplexity), true
+
 	case "GetDestinationTypesResponse.categories":
 		if e.complexity.GetDestinationTypesResponse.Categories == nil {
 			break
@@ -548,6 +620,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.Config(childComplexity), true
 
+	case "Query.destinationTypeDetails":
+		if e.complexity.Query.DestinationTypeDetails == nil {
+			break
+		}
+
+		args, err := ec.field_Query_destinationTypeDetails_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Query.DestinationTypeDetails(childComplexity, args["type"].(string)), true
+
 	case "Query.destinationTypes":
 		if e.complexity.Query.DestinationTypes == nil {
 			break
@@ -820,6 +904,21 @@ func (ec *executionContext) field_Query___type_args(ctx context.Context, rawArgs
 	return args, nil
 }
 
+func (ec *executionContext) field_Query_destinationTypeDetails_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["type"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("type"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["type"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field___Type_enumValues_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -2063,8 +2162,357 @@ func (ec *executionContext) fieldContext_DestinationsCategory_items(_ context.Co
 	return fc, nil
 }
 
-func (ec *executionContext) _ExportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ExportedSignals_traces(ctx, field)
+func (ec *executionContext) _ExportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_traces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Traces, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ExportedSignals_traces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ExportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ExportedSignals_metrics(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_metrics(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Metrics, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ExportedSignals_metrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ExportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ExportedSignals_logs(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_logs(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Logs, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ExportedSignals_logs(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ExportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_name(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_displayName(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_displayName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DisplayName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_displayName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_componentType(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_componentType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComponentType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_componentType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_componentProperties(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_componentProperties(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComponentProperties, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_componentProperties(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_videoUrl(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_videoUrl(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.VideoURL, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_videoUrl(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_thumbnailURL(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_thumbnailURL(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2077,38 +2525,35 @@ func (ec *executionContext) _ExportedSignals_traces(ctx context.Context, field g
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Traces, nil
+		return obj.ThumbnailURL, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ExportedSignals_traces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Field_thumbnailURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ExportedSignals",
+		Object:     "Field",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ExportedSignals_metrics(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ExportedSignals_metrics(ctx, field)
+func (ec *executionContext) _Field_initialValue(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_initialValue(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2121,38 +2566,35 @@ func (ec *executionContext) _ExportedSignals_metrics(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Metrics, nil
+		return obj.InitialValue, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ExportedSignals_metrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Field_initialValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ExportedSignals",
+		Object:     "Field",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ExportedSignals_logs(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ExportedSignals_logs(ctx, field)
+func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context, field graphql.CollectedField, obj *model.GetConfigResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_GetConfigResponse_installation(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2165,7 +2607,7 @@ func (ec *executionContext) _ExportedSignals_logs(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Logs, nil
+		return obj.Installation, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2177,26 +2619,26 @@ func (ec *executionContext) _ExportedSignals_logs(ctx context.Context, field gra
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(model.InstallationStatus)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ExportedSignals_logs(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_GetConfigResponse_installation(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ExportedSignals",
+		Object:     "GetConfigResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type InstallationStatus does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context, field graphql.CollectedField, obj *model.GetConfigResponse) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_GetConfigResponse_installation(ctx, field)
+func (ec *executionContext) _GetDestinationDetailsResponse_fields(ctx context.Context, field graphql.CollectedField, obj *model.GetDestinationDetailsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_GetDestinationDetailsResponse_fields(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2209,7 +2651,7 @@ func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Installation, nil
+		return obj.Fields, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2221,19 +2663,35 @@ func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context,
 		}
 		return graphql.Null
 	}
-	res := resTmp.(model.InstallationStatus)
+	res := resTmp.([]*model.Field)
 	fc.Result = res
-	return ec.marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx, field.Selections, res)
+	return ec.marshalNField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_GetConfigResponse_installation(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_GetDestinationDetailsResponse_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "GetConfigResponse",
+		Object:     "GetDestinationDetailsResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type InstallationStatus does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_Field_name(ctx, field)
+			case "displayName":
+				return ec.fieldContext_Field_displayName(ctx, field)
+			case "componentType":
+				return ec.fieldContext_Field_componentType(ctx, field)
+			case "componentProperties":
+				return ec.fieldContext_Field_componentProperties(ctx, field)
+			case "videoUrl":
+				return ec.fieldContext_Field_videoUrl(ctx, field)
+			case "thumbnailURL":
+				return ec.fieldContext_Field_thumbnailURL(ctx, field)
+			case "initialValue":
+				return ec.fieldContext_Field_initialValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Field", field.Name)
 		},
 	}
 	return fc, nil
@@ -3145,6 +3603,62 @@ func (ec *executionContext) fieldContext_Query_destinationTypes(_ context.Contex
 	return fc, nil
 }
 
+func (ec *executionContext) _Query_destinationTypeDetails(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_destinationTypeDetails(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().DestinationTypeDetails(rctx, fc.Args["type"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.GetDestinationDetailsResponse)
+	fc.Result = res
+	return ec.marshalOGetDestinationDetailsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationDetailsResponse(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_destinationTypeDetails(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "fields":
+				return ec.fieldContext_GetDestinationDetailsResponse_fields(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type GetDestinationDetailsResponse", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query_destinationTypeDetails_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
@@ -5925,6 +6439,66 @@ func (ec *executionContext) _ExportedSignals(ctx context.Context, sel ast.Select
 	return out
 }
 
+var fieldImplementors = []string{"Field"}
+
+func (ec *executionContext) _Field(ctx context.Context, sel ast.SelectionSet, obj *model.Field) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, fieldImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Field")
+		case "name":
+			out.Values[i] = ec._Field_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "displayName":
+			out.Values[i] = ec._Field_displayName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "componentType":
+			out.Values[i] = ec._Field_componentType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "componentProperties":
+			out.Values[i] = ec._Field_componentProperties(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "videoUrl":
+			out.Values[i] = ec._Field_videoUrl(ctx, field, obj)
+		case "thumbnailURL":
+			out.Values[i] = ec._Field_thumbnailURL(ctx, field, obj)
+		case "initialValue":
+			out.Values[i] = ec._Field_initialValue(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var getConfigResponseImplementors = []string{"GetConfigResponse"}
 
 func (ec *executionContext) _GetConfigResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetConfigResponse) graphql.Marshaler {
@@ -5964,6 +6538,45 @@ func (ec *executionContext) _GetConfigResponse(ctx context.Context, sel ast.Sele
 	return out
 }
 
+var getDestinationDetailsResponseImplementors = []string{"GetDestinationDetailsResponse"}
+
+func (ec *executionContext) _GetDestinationDetailsResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetDestinationDetailsResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, getDestinationDetailsResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("GetDestinationDetailsResponse")
+		case "fields":
+			out.Values[i] = ec._GetDestinationDetailsResponse_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var getDestinationTypesResponseImplementors = []string{"GetDestinationTypesResponse"}
 
 func (ec *executionContext) _GetDestinationTypesResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetDestinationTypesResponse) graphql.Marshaler {
@@ -6343,6 +6956,25 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "destinationTypeDetails":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_destinationTypeDetails(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
@@ -6939,6 +7571,60 @@ func (ec *executionContext) marshalNExportedSignals2githubᚗcomᚋodigosᚑio
 	return ec._ExportedSignals(ctx, sel, &v)
 }
 
+func (ec *executionContext) marshalNField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.Field) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐField(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐField(ctx context.Context, sel ast.SelectionSet, v *model.Field) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._Field(ctx, sel, v)
+}
+
 func (ec *executionContext) unmarshalNID2string(ctx context.Context, v interface{}) (string, error) {
 	res, err := graphql.UnmarshalID(v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -7460,6 +8146,13 @@ func (ec *executionContext) marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigos
 	return ec._GetConfigResponse(ctx, sel, v)
 }
 
+func (ec *executionContext) marshalOGetDestinationDetailsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationDetailsResponse(ctx context.Context, sel ast.SelectionSet, v *model.GetDestinationDetailsResponse) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._GetDestinationDetailsResponse(ctx, sel, v)
+}
+
 func (ec *executionContext) marshalOGetDestinationTypesResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationTypesResponse(ctx context.Context, sel ast.SelectionSet, v *model.GetDestinationTypesResponse) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 8edb3f653..e74ae4c57 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -25,10 +25,24 @@ type Condition struct {
 	Message            *string         `json:"message,omitempty"`
 }
 
+type Field struct {
+	Name                string  `json:"name"`
+	DisplayName         string  `json:"displayName"`
+	ComponentType       string  `json:"componentType"`
+	ComponentProperties string  `json:"componentProperties"`
+	VideoURL            *string `json:"videoUrl,omitempty"`
+	ThumbnailURL        *string `json:"thumbnailURL,omitempty"`
+	InitialValue        *string `json:"initialValue,omitempty"`
+}
+
 type GetConfigResponse struct {
 	Installation InstallationStatus `json:"installation"`
 }
 
+type GetDestinationDetailsResponse struct {
+	Fields []*Field `json:"fields"`
+}
+
 type InstrumentedApplicationDetails struct {
 	Containers []*SourceContainerRuntimeDetails `json:"containers,omitempty"`
 	Conditions []*Condition                     `json:"conditions,omitempty"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index a1d5d0abc..591e81151 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -158,10 +158,25 @@ type GetConfigResponse {
   installation: InstallationStatus!
 }
 
+type Field {
+  name: String!
+  displayName: String!
+  componentType: String!
+  componentProperties: String! # Using String to store JSON data as a string
+  videoUrl: String
+  thumbnailURL: String
+  initialValue: String
+}
+
+type GetDestinationDetailsResponse {
+  fields: [Field!]!
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
   destinationTypes: GetDestinationTypesResponse
+  destinationTypeDetails(type: String!): GetDestinationDetailsResponse
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index f32fbfbf4..e8e75addb 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -6,8 +6,10 @@ package graph
 
 import (
 	"context"
+	"encoding/json"
 	"fmt"
 
+	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/frontend/endpoints"
 	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
@@ -117,11 +119,37 @@ func (r *queryResolver) Config(ctx context.Context) (*model.GetConfigResponse, e
 
 // DestinationTypes is the resolver for the destinationTypes field.
 func (r *queryResolver) DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error) {
-
 	destTypes := services.GetDestinationTypes()
 
 	return &destTypes, nil
+}
+
+// DestinationTypeDetails is the resolver for the destinationTypeDetails field.
+func (r *queryResolver) DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error) {
+	destType := common.DestinationType(typeArg)
+	destTypeConfig, err := services.GetDestinationTypeConfig(destType)
+	if err != nil {
+		return nil, fmt.Errorf("destination type %s not found", destType)
+	}
+
+	var resp model.GetDestinationDetailsResponse
+	for _, field := range destTypeConfig.Spec.Fields {
+		componentPropsJSON, err := json.Marshal(field.ComponentProps)
+		if err != nil {
+			return nil, fmt.Errorf("error marshalling component properties: %v", err)
+		}
+
+		resp.Fields = append(resp.Fields, &model.Field{
+			Name:                field.Name,
+			DisplayName:         field.DisplayName,
+			ComponentType:       field.ComponentType,
+			ComponentProperties: string(componentPropsJSON),
+			InitialValue:        &field.InitialValue,
+		})
+
+	}
 
+	return &resp, nil
 }
 
 // ComputePlatform returns ComputePlatformResolver implementation.
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
index a1d0b5b09..39e7835e8 100644
--- a/frontend/services/destinations.go
+++ b/frontend/services/destinations.go
@@ -1,6 +1,8 @@
 package services
 
 import (
+	"fmt"
+
 	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/destinations"
 	"github.com/odigos-io/odigos/frontend/graph/model"
@@ -47,3 +49,13 @@ func DestinationTypeConfigToCategoryItem(destConfig destinations.Destination) mo
 	}
 
 }
+
+func GetDestinationTypeConfig(destType common.DestinationType) (*destinations.Destination, error) {
+	for _, dest := range destinations.Get() {
+		if dest.Metadata.Type == destType {
+			return &dest, nil
+		}
+	}
+
+	return nil, fmt.Errorf("destination type %s not found", destType)
+}

From e6dc4be74e2eae21c56115bab9c5ff2a87706c60 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 5 Aug 2024 17:11:57 +0300
Subject: [PATCH 133/374] chore: wip

---
 frontend/graph/generated.go                   | 55 ++++---------------
 frontend/graph/model/destination.go           | 10 ++--
 frontend/graph/schema.resolvers.go            | 11 ----
 frontend/services/destinations.go             |  2 +-
 .../app/setup/choose-destination/page.tsx     |  2 +-
 .../add-destination-modal/index.tsx           | 11 +++-
 .../connect-destination-modal-body/index.tsx  | 14 ++++-
 .../webapp/graphql/queries/destination.ts     | 18 ++++++
 frontend/webapp/types/destinations.ts         |  2 +
 9 files changed, 58 insertions(+), 67 deletions(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index bd2077fec..78302506b 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -41,7 +41,6 @@ type Config struct {
 type ResolverRoot interface {
 	ComputePlatform() ComputePlatformResolver
 	Destination() DestinationResolver
-	DestinationTypesCategoryItem() DestinationTypesCategoryItemResolver
 	K8sActualNamespace() K8sActualNamespaceResolver
 	Mutation() MutationResolver
 	Query() QueryResolver
@@ -180,9 +179,6 @@ type DestinationResolver interface {
 
 	Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error)
 }
-type DestinationTypesCategoryItemResolver interface {
-	Type(ctx context.Context, obj *model.DestinationTypesCategoryItem) (string, error)
-}
 type K8sActualNamespaceResolver interface {
 	K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error)
 }
@@ -1848,7 +1844,7 @@ func (ec *executionContext) _DestinationTypesCategoryItem_type(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.DestinationTypesCategoryItem().Type(rctx, obj)
+		return obj.Type, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1869,8 +1865,8 @@ func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_type(_ con
 	fc = &graphql.FieldContext{
 		Object:     "DestinationTypesCategoryItem",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
 		},
@@ -6268,60 +6264,29 @@ func (ec *executionContext) _DestinationTypesCategoryItem(ctx context.Context, s
 		case "__typename":
 			out.Values[i] = graphql.MarshalString("DestinationTypesCategoryItem")
 		case "type":
-			field := field
-
-			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._DestinationTypesCategoryItem_type(ctx, field, obj)
-				if res == graphql.Null {
-					atomic.AddUint32(&fs.Invalids, 1)
-				}
-				return res
-			}
-
-			if field.Deferrable != nil {
-				dfs, ok := deferred[field.Deferrable.Label]
-				di := 0
-				if ok {
-					dfs.AddField(field)
-					di = len(dfs.Values) - 1
-				} else {
-					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
-					deferred[field.Deferrable.Label] = dfs
-				}
-				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
-					return innerFunc(ctx, dfs)
-				})
-
-				// don't run the out.Concurrently() call below
-				out.Values[i] = graphql.Null
-				continue
+			out.Values[i] = ec._DestinationTypesCategoryItem_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "displayName":
 			out.Values[i] = ec._DestinationTypesCategoryItem_displayName(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
+				out.Invalids++
 			}
 		case "imageUrl":
 			out.Values[i] = ec._DestinationTypesCategoryItem_imageUrl(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
+				out.Invalids++
 			}
 		case "supportedSignals":
 			out.Values[i] = ec._DestinationTypesCategoryItem_supportedSignals(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
+				out.Invalids++
 			}
 		case "testConnectionSupported":
 			out.Values[i] = ec._DestinationTypesCategoryItem_testConnectionSupported(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
+				out.Invalids++
 			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
diff --git a/frontend/graph/model/destination.go b/frontend/graph/model/destination.go
index 8f9af77a9..58a8bea11 100644
--- a/frontend/graph/model/destination.go
+++ b/frontend/graph/model/destination.go
@@ -10,11 +10,11 @@ type GetDestinationTypesResponse struct {
 }
 
 type DestinationTypesCategoryItem struct {
-	Type                    common.DestinationType `json:"type"`
-	DisplayName             string                 `json:"display_name"`
-	ImageUrl                string                 `json:"image_url"`
-	SupportedSignals        SupportedSignals       `json:"supported_signals"`
-	TestConnectionSupported bool                   `json:"test_connection_supported"`
+	Type                    string           `json:"type"`
+	DisplayName             string           `json:"display_name"`
+	ImageUrl                string           `json:"image_url"`
+	SupportedSignals        SupportedSignals `json:"supported_signals"`
+	TestConnectionSupported bool             `json:"test_connection_supported"`
 }
 
 type SupportedSignals struct {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index e8e75addb..de65f4e5f 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -74,11 +74,6 @@ func (r *destinationResolver) Conditions(ctx context.Context, obj *model.Destina
 	panic(fmt.Errorf("not implemented: Conditions - conditions"))
 }
 
-// Type is the resolver for the type field.
-func (r *destinationTypesCategoryItemResolver) Type(ctx context.Context, obj *model.DestinationTypesCategoryItem) (string, error) {
-	panic(fmt.Errorf("not implemented: Type - type"))
-}
-
 // K8sActualSources is the resolver for the k8sActualSources field.
 func (r *k8sActualNamespaceResolver) K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error) {
 	return obj.K8sActualSources, nil
@@ -158,11 +153,6 @@ func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePl
 // Destination returns DestinationResolver implementation.
 func (r *Resolver) Destination() DestinationResolver { return &destinationResolver{r} }
 
-// DestinationTypesCategoryItem returns DestinationTypesCategoryItemResolver implementation.
-func (r *Resolver) DestinationTypesCategoryItem() DestinationTypesCategoryItemResolver {
-	return &destinationTypesCategoryItemResolver{r}
-}
-
 // K8sActualNamespace returns K8sActualNamespaceResolver implementation.
 func (r *Resolver) K8sActualNamespace() K8sActualNamespaceResolver {
 	return &k8sActualNamespaceResolver{r}
@@ -176,7 +166,6 @@ func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
 
 type computePlatformResolver struct{ *Resolver }
 type destinationResolver struct{ *Resolver }
-type destinationTypesCategoryItemResolver struct{ *Resolver }
 type k8sActualNamespaceResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
index 39e7835e8..4b0564e42 100644
--- a/frontend/services/destinations.go
+++ b/frontend/services/destinations.go
@@ -31,7 +31,7 @@ func GetDestinationTypes() model.GetDestinationTypesResponse {
 func DestinationTypeConfigToCategoryItem(destConfig destinations.Destination) model.DestinationTypesCategoryItem {
 
 	return model.DestinationTypesCategoryItem{
-		Type:                    common.DestinationType(destConfig.Metadata.Type),
+		Type:                    string(destConfig.Metadata.Type),
 		DisplayName:             destConfig.Metadata.DisplayName,
 		ImageUrl:                GetImageURL(destConfig.Spec.Image),
 		TestConnectionSupported: destConfig.Spec.TestConnectionSupported,
diff --git a/frontend/webapp/app/setup/choose-destination/page.tsx b/frontend/webapp/app/setup/choose-destination/page.tsx
index 9d2189d08..92ffac25a 100644
--- a/frontend/webapp/app/setup/choose-destination/page.tsx
+++ b/frontend/webapp/app/setup/choose-destination/page.tsx
@@ -1,6 +1,6 @@
 'use client';
-import { ChooseDestinationContainer } from '@/containers/main';
 import React from 'react';
+import { ChooseDestinationContainer } from '@/containers/main';
 
 export default function ChooseDestinationPage() {
   return (
diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index eab8f59d3..7378c2020 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -11,6 +11,10 @@ interface AddDestinationModalProps {
   handleCloseModal: () => void;
 }
 
+interface DestinationCategory {
+  name: string;
+  items: DestinationTypeItem[];
+}
 function ModalActionComponent({
   onNext,
   onBack,
@@ -60,12 +64,14 @@ export function AddDestinationModal({
   function buildDestinationTypeList() {
     const destinationTypes = data?.destinationTypes?.categories || [];
     const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
-      (acc: DestinationTypeItem[], category: any) => {
-        const items = category.items.map((item: any) => ({
+      (acc: DestinationTypeItem[], category: DestinationCategory) => {
+        const items = category.items.map((item: DestinationTypeItem) => ({
           category: category.name,
           displayName: item.displayName,
           imageUrl: item.imageUrl,
           supportedSignals: item.supportedSignals,
+          testConnectionSupported: item.testConnectionSupported,
+          type: item.type,
         }));
         return [...acc, ...items];
       },
@@ -73,6 +79,7 @@ export function AddDestinationModal({
     );
     setDestinationTypeList(destinationTypeList);
   }
+
   function handleNextStep(item: DestinationTypeItem) {
     setSelectedItem(item);
   }
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index d86051d7d..92b6e4386 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { DestinationTypeItem, StepProps } from '@/types';
 import { SideMenu } from '@/components';
 import { Divider, SectionTitle } from '@/reuseable-components';
 import { Body, Container, SideMenuWrapper } from '../styled';
+import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
+import { useQuery } from '@apollo/client';
 const SIDE_MENU_DATA: StepProps[] = [
   {
     title: 'DESTINATIONS',
@@ -23,7 +25,15 @@ interface ConnectDestinationModalBodyProps {
 export function ConnectDestinationModalBody({
   destination,
 }: ConnectDestinationModalBodyProps) {
-  console.log({ destination });
+  const { data } = useQuery(GET_DESTINATION_TYPE_DETAILS, {
+    variables: { type: destination?.type },
+    skip: !destination,
+  });
+
+  useEffect(() => {
+    data && console.log({ data });
+  }, [data]);
+
   return (
     <Container>
       <SideMenuWrapper>
diff --git a/frontend/webapp/graphql/queries/destination.ts b/frontend/webapp/graphql/queries/destination.ts
index 34124683f..9fafe8e16 100644
--- a/frontend/webapp/graphql/queries/destination.ts
+++ b/frontend/webapp/graphql/queries/destination.ts
@@ -6,6 +6,8 @@ export const GET_DESTINATION_TYPE = gql`
       categories {
         name
         items {
+          type
+          testConnectionSupported
           displayName
           imageUrl
           supportedSignals {
@@ -24,3 +26,19 @@ export const GET_DESTINATION_TYPE = gql`
     }
   }
 `;
+
+export const GET_DESTINATION_TYPE_DETAILS = gql`
+  query GetDestinationTypeDetails($type: String!) {
+    destinationTypeDetails(type: $type) {
+      fields {
+        name
+        displayName
+        componentType
+        componentProperties
+        videoUrl
+        thumbnailURL
+        initialValue
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 56c734bbe..e0b06b9e1 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -9,6 +9,8 @@ export interface DestinationTypeItem {
   displayName: string;
   imageUrl: string;
   category: 'managed' | 'self-hosted';
+  type: string;
+  testConnectionSupported: boolean;
   supportedSignals: {
     logs: {
       supported: boolean;

From d3415f18916c9bb9b5bc2718262163b88c98359b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 6 Aug 2024 13:58:37 +0300
Subject: [PATCH 134/374] chore: wip

---
 .../connect-destination-modal-body/index.tsx  | 67 +++++++++++++++--
 .../checkbox-list/index.tsx                   | 73 +++++++++++++++++++
 .../reuseable-components/checkbox/index.tsx   | 12 ++-
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../reuseable-components/input/index.tsx      | 13 ++--
 .../section-title/index.tsx                   | 11 ++-
 frontend/webapp/styles/theme.ts               |  1 +
 frontend/webapp/types/destinations.ts         | 17 +++++
 8 files changed, 174 insertions(+), 21 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/checkbox-list/index.tsx

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 92b6e4386..61defc7b1 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,10 +1,20 @@
-import React, { useEffect } from 'react';
-import { DestinationTypeItem, StepProps } from '@/types';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  DestinationDetailsResponse,
+  DestinationTypeItem,
+  StepProps,
+} from '@/types';
 import { SideMenu } from '@/components';
-import { Divider, SectionTitle } from '@/reuseable-components';
+import {
+  CheckboxList,
+  Divider,
+  Input,
+  SectionTitle,
+} from '@/reuseable-components';
 import { Body, Container, SideMenuWrapper } from '../styled';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { useQuery } from '@apollo/client';
+import styled from 'styled-components';
 const SIDE_MENU_DATA: StepProps[] = [
   {
     title: 'DESTINATIONS',
@@ -18,6 +28,12 @@ const SIDE_MENU_DATA: StepProps[] = [
   },
 ];
 
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
+
 interface ConnectDestinationModalBodyProps {
   destination: DestinationTypeItem | undefined;
 }
@@ -25,15 +41,40 @@ interface ConnectDestinationModalBodyProps {
 export function ConnectDestinationModalBody({
   destination,
 }: ConnectDestinationModalBodyProps) {
-  const { data } = useQuery(GET_DESTINATION_TYPE_DETAILS, {
-    variables: { type: destination?.type },
-    skip: !destination,
-  });
+  const { data } = useQuery<DestinationDetailsResponse>(
+    GET_DESTINATION_TYPE_DETAILS,
+    {
+      variables: { type: destination?.type },
+      skip: !destination,
+    }
+  );
+
+  const monitors = useMemo(() => {
+    if (!destination) return [];
+
+    const { logs, metrics, traces } = destination.supportedSignals;
+    return [
+      logs.supported && {
+        id: 'logs',
+        title: 'Logs',
+      },
+      metrics.supported && {
+        id: 'metrics',
+        title: 'Metrics',
+      },
+      traces.supported && {
+        id: 'traces',
+        title: 'Traces',
+      },
+    ].filter(Boolean);
+  }, [destination]);
 
   useEffect(() => {
-    data && console.log({ data });
+    data && console.log({ destination, data });
   }, [data]);
 
+  if (!destination) return null;
+
   return (
     <Container>
       <SideMenuWrapper>
@@ -48,6 +89,16 @@ export function ConnectDestinationModalBody({
           onButtonClick={() => {}}
         />
         <Divider margin="0 0 24px 0" />
+        <FormContainer>
+          <CheckboxList
+            monitors={monitors as []}
+            title="This connection will monitor:"
+          />
+          <Input
+            title="Destination name"
+            placeholder="Enter destination name"
+          />
+        </FormContainer>
       </Body>
     </Container>
   );
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
new file mode 100644
index 000000000..6a4c92d12
--- /dev/null
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { Checkbox } from '../checkbox';
+import { Text } from '../text';
+
+interface Monitor {
+  id: string;
+  title: string;
+  tooltip?: string;
+}
+
+interface CheckboxListProps {
+  monitors: Monitor[];
+  title?: string;
+}
+
+const ListContainer = styled.div`
+  display: flex;
+  gap: 32px;
+`;
+
+const TextWrapper = styled.div`
+  margin-bottom: 14px;
+`;
+
+const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title }) => {
+  const [checkedState, setCheckedState] = useState<boolean[]>([]);
+
+  useEffect(() => {
+    // Initialize the checked state with all true if no initial values provided
+    setCheckedState(Array(monitors.length).fill(true));
+  }, [monitors.length]);
+
+  const handleCheckboxChange = (index: number, value: boolean) => {
+    const newCheckedState = [...checkedState];
+    newCheckedState[index] = value;
+
+    // Ensure at least one checkbox remains checked
+    if (newCheckedState.filter((checked) => checked).length === 0) {
+      return;
+    }
+
+    setCheckedState(newCheckedState);
+  };
+
+  return (
+    <div>
+      {title && (
+        <TextWrapper>
+          <Text size={14} weight={300} opacity={0.8}>
+            {title}
+          </Text>
+        </TextWrapper>
+      )}
+      <ListContainer>
+        {monitors.map((monitor, index) => (
+          <Checkbox
+            key={monitor.id}
+            title={monitor.title}
+            initialValue={checkedState[index]}
+            onChange={(value) => handleCheckboxChange(index, value)}
+            disabled={
+              checkedState.filter((checked) => checked).length === 1 &&
+              checkedState[index]
+            }
+          />
+        ))}
+      </ListContainer>
+    </div>
+  );
+};
+
+export { CheckboxList };
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
index 956fbb6ec..92a3c1470 100644
--- a/frontend/webapp/reuseable-components/checkbox/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -24,20 +24,18 @@ const CheckboxWrapper = styled.div<{ isChecked: boolean; disabled?: boolean }>`
   width: 18px;
   height: 18px;
   border-radius: 6px;
-  border: 1px dashed rgba(249, 249, 249, 0.4);
+  border: ${({ isChecked }) =>
+    isChecked
+      ? '1px dashed transparent'
+      : '1px dashed rgba(249, 249, 249, 0.4)'};
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: ${({ isChecked, theme }) =>
-    isChecked ? theme.colors.primary : 'transparent'};
+    isChecked ? theme.colors.majestic_blue : 'transparent'};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
 `;
 
-const Title = styled.span`
-  font-size: 16px;
-  color: #fff;
-`;
-
 const Checkbox: React.FC<CheckboxProps> = ({
   title,
   tooltip,
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 0391f7f11..1839e88d6 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -11,3 +11,4 @@ export * from './checkbox';
 export * from './modal';
 export * from './navigation-buttons';
 export * from './tag';
+export * from './checkbox-list';
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 2f5e3607c..7a908ea96 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -62,14 +62,16 @@ const InputWrapper = styled.div<{
   }
 `;
 
-const StyledInput = styled.input`
+const StyledInput = styled.input<{ hasIcon?: string }>`
   flex: 1;
   border: none;
   outline: none;
   background: none;
   color: ${({ theme }) => theme.colors.text};
   font-size: 14px;
-
+  padding-left: ${({ hasIcon }) => (hasIcon ? '0' : '16px')};
+  font-family: ${({ theme }) => theme.font_family.primary};
+  font-weight: 300;
   &::placeholder {
     color: ${({ theme }) => theme.colors.text};
     font-family: ${({ theme }) => theme.font_family.primary};
@@ -124,8 +126,9 @@ const ErrorMessage = styled(Text)`
 `;
 
 const Title = styled(Text)`
-  font-size: 16px;
-  font-weight: bold;
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
   margin-bottom: 4px;
 `;
 
@@ -173,7 +176,7 @@ const Input: React.FC<InputProps> = ({
             <Image src={icon} alt="" width={14} height={14} />
           </IconWrapper>
         )}
-        <StyledInput {...props} />
+        <StyledInput hasIcon={icon} {...props} />
         {buttonLabel && onButtonClick && (
           <Button onClick={onButtonClick} disabled={props.disabled}>
             {buttonLabel}
diff --git a/frontend/webapp/reuseable-components/section-title/index.tsx b/frontend/webapp/reuseable-components/section-title/index.tsx
index 01b9d2e08..cbd024bc4 100644
--- a/frontend/webapp/reuseable-components/section-title/index.tsx
+++ b/frontend/webapp/reuseable-components/section-title/index.tsx
@@ -29,6 +29,15 @@ const Description = styled(Text)``;
 
 const ActionButton = styled(Button)``;
 
+const ActionButtonText = styled(Text)`
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-weight: 500;
+  text-decoration: underline;
+  text-transform: uppercase;
+  font-size: 14px;
+  line-height: 157.143%;
+`;
+
 const SectionTitle: React.FC<SectionTitleProps> = ({
   title,
   description,
@@ -47,7 +56,7 @@ const SectionTitle: React.FC<SectionTitleProps> = ({
       </TitleContainer>
       {buttonText && onButtonClick && (
         <ActionButton variant={'secondary'} onClick={onButtonClick}>
-          <Text size={14}>{buttonText}</Text>
+          <ActionButtonText size={14}>{buttonText}</ActionButtonText>
         </ActionButton>
       )}
     </Container>
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 533cd3401..ebca17126 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -8,6 +8,7 @@ const colors = {
   text: '#F9F9F9',
   border: 'rgba(249, 249, 249, 0.08)',
   translucent_bg: 'rgba(249, 249, 249, 0.04)',
+  majestic_blue: '#444AD9',
 };
 
 const text = {
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index e0b06b9e1..f67a866b0 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -24,6 +24,23 @@ export interface DestinationTypeItem {
   };
 }
 
+export interface DestinationDetailsField {
+  name: string;
+  displayName: string;
+  componentType: string;
+  componentProperties: string;
+  videoUrl: string | null;
+  thumbnailURL: string | null;
+  initialValue: string;
+  __typename: string;
+}
+
+export interface DestinationDetailsResponse {
+  destinationTypeDetails: {
+    fields: DestinationDetailsField[];
+  };
+}
+
 export interface DestinationType {
   fields: any;
   display_name: string;

From d29ff7d8a1a443a875f869d20b4c4e0d0150da6c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 7 Aug 2024 10:43:29 +0300
Subject: [PATCH 135/374] chore: wip

---
 .../connect-destination-modal-body/index.tsx  | 41 +++++++++++-
 .../dynamic-form-fields/index.tsx             | 43 ++++++++++++
 .../destinations/add-destination/styled.ts    |  2 +
 .../webapp/graphql/queries/destination.ts     |  2 -
 frontend/webapp/hooks/destinations/index.ts   |  1 +
 .../destinations/useConnectDestinationForm.ts | 65 +++++++++++++++++++
 .../checkbox-list/index.tsx                   | 11 +++-
 frontend/webapp/types/destinations.ts         |  7 ++
 8 files changed, 166 insertions(+), 6 deletions(-)
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
 create mode 100644 frontend/webapp/hooks/destinations/useConnectDestinationForm.ts

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 61defc7b1..dae60964a 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -2,10 +2,12 @@ import React, { useEffect, useMemo, useState } from 'react';
 import {
   DestinationDetailsResponse,
   DestinationTypeItem,
+  DynamicField,
   StepProps,
 } from '@/types';
 import { SideMenu } from '@/components';
 import {
+  Button,
   CheckboxList,
   Divider,
   Input,
@@ -15,6 +17,8 @@ import { Body, Container, SideMenuWrapper } from '../styled';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { useQuery } from '@apollo/client';
 import styled from 'styled-components';
+import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
+import { useConnectDestinationForm } from '@/hooks';
 const SIDE_MENU_DATA: StepProps[] = [
   {
     title: 'DESTINATIONS',
@@ -30,6 +34,7 @@ const SIDE_MENU_DATA: StepProps[] = [
 
 const FormContainer = styled.div`
   display: flex;
+  width: 100%;
   flex-direction: column;
   gap: 24px;
 `;
@@ -48,6 +53,11 @@ export function ConnectDestinationModalBody({
       skip: !destination,
     }
   );
+  const [checkedState, setCheckedState] = useState<boolean[]>([]);
+  const [destinationName, setDestinationName] = useState<string>('');
+  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const { buildFormDynamicFields } = useConnectDestinationForm();
 
   const monitors = useMemo(() => {
     if (!destination) return [];
@@ -71,8 +81,26 @@ export function ConnectDestinationModalBody({
 
   useEffect(() => {
     data && console.log({ destination, data });
+
+    if (data) {
+      const df = buildFormDynamicFields(data.destinationTypeDetails.fields);
+      console.log(
+        'is missing fileds',
+        df.length !== data.destinationTypeDetails.fields.length
+      );
+      console.log({ df });
+      setDynamicFields(df);
+    }
   }, [data]);
 
+  function handleDynamicFieldChange(name: string, value: any) {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleSubmit() {
+    console.log({ formData });
+  }
+
   if (!destination) return null;
 
   return (
@@ -88,16 +116,27 @@ export function ConnectDestinationModalBody({
           buttonText="Check connection"
           onButtonClick={() => {}}
         />
-        <Divider margin="0 0 24px 0" />
+        <Divider margin="24px 0" />
         <FormContainer>
           <CheckboxList
+            checkedState={checkedState}
+            setCheckedState={setCheckedState}
             monitors={monitors as []}
             title="This connection will monitor:"
           />
           <Input
             title="Destination name"
             placeholder="Enter destination name"
+            value={destinationName}
+            onChange={(e) => setDestinationName(e.target.value)}
+          />
+          <DynamicConnectDestinationFormFields
+            fields={dynamicFields}
+            onChange={handleDynamicFieldChange}
           />
+          <Button onClick={handleSubmit} disabled={!destinationName}>
+            <span>CONNECT</span>
+          </Button>
         </FormContainer>
       </Body>
     </Container>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
new file mode 100644
index 000000000..6b955f2de
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { INPUT_TYPES } from '@/utils/constants/string';
+import { Dropdown, Input } from '@/reuseable-components';
+
+export function DynamicConnectDestinationFormFields({
+  fields,
+  onChange,
+}: {
+  fields: any[];
+  onChange: (name: string, value: any) => void;
+}) {
+  return fields?.map((field: any) => {
+    switch (field.componentType) {
+      case INPUT_TYPES.INPUT:
+        return (
+          <Input
+            key={field.name}
+            {...field}
+            onChange={(value) => onChange(field.name, value)}
+          />
+        );
+
+      case INPUT_TYPES.DROPDOWN:
+        return (
+          <Dropdown
+            key={field.name}
+            {...field}
+            onSelect={(option) => onChange(field.name, option.value)}
+          />
+        );
+      case INPUT_TYPES.MULTI_INPUT:
+        return <div></div>;
+
+      case INPUT_TYPES.KEY_VALUE_PAIR:
+        return <div></div>;
+      case INPUT_TYPES.TEXTAREA:
+        return <div></div>;
+      default:
+        return null;
+    }
+  });
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/styled.ts b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
index 9ad79d7d5..6588c8936 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/styled.ts
+++ b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
@@ -3,6 +3,8 @@ import styled from 'styled-components';
 export const Body = styled.div`
   padding: 32px 32px 0;
   border-left: 1px solid rgba(249, 249, 249, 0.08);
+  min-height: 600px;
+  width: 692px;
 `;
 
 export const SideMenuWrapper = styled.div`
diff --git a/frontend/webapp/graphql/queries/destination.ts b/frontend/webapp/graphql/queries/destination.ts
index 9fafe8e16..993f302c4 100644
--- a/frontend/webapp/graphql/queries/destination.ts
+++ b/frontend/webapp/graphql/queries/destination.ts
@@ -35,8 +35,6 @@ export const GET_DESTINATION_TYPE_DETAILS = gql`
         displayName
         componentType
         componentProperties
-        videoUrl
-        thumbnailURL
         initialValue
       }
     }
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index fda969335..fdf8dc796 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -1,2 +1,3 @@
 export * from './useDestinations';
 export * from './useCheckConnection';
+export * from './useConnectDestinationForm';
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
new file mode 100644
index 000000000..aa1c71fca
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -0,0 +1,65 @@
+import { safeJsonParse } from '@/utils';
+import { DestinationDetailsField, DynamicField } from '@/types';
+
+export function useConnectDestinationForm() {
+  function buildFormDynamicFields(
+    fields: DestinationDetailsField[]
+  ): DynamicField[] {
+    return fields
+      .map((field) => {
+        const { name, componentType, displayName, componentProperties } = field;
+
+        let componentPropertiesJson;
+        switch (componentType) {
+          case 'dropdown':
+            componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(
+              componentProperties,
+              {}
+            );
+
+            const options = Object.entries(componentPropertiesJson.values).map(
+              ([key, value]) => ({
+                id: key,
+                value,
+              })
+            );
+
+            return {
+              name,
+              componentType,
+              title: displayName,
+              onSelect: () => {},
+              options,
+              selectedOption: options[0],
+              ...componentPropertiesJson,
+            };
+
+          case 'input':
+            componentPropertiesJson = safeJsonParse<string[]>(
+              componentProperties,
+              []
+            );
+            return {
+              name,
+              componentType,
+              title: displayName,
+              ...componentPropertiesJson,
+            };
+
+          //   case 'multi_input':
+          //   case 'textarea':
+          //     return {
+          //       name,
+          //       componentType,
+          //       title: displayName,
+          //       ...componentPropertiesJson,
+          //     };
+          default:
+            return undefined;
+        }
+      })
+      .filter((field): field is DynamicField => field !== undefined);
+  }
+
+  return { buildFormDynamicFields };
+}
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index 6a4c92d12..3888efa9b 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -12,6 +12,8 @@ interface Monitor {
 interface CheckboxListProps {
   monitors: Monitor[];
   title?: string;
+  checkedState?: boolean[];
+  setCheckedState: (checkedState: boolean[]) => void;
 }
 
 const ListContainer = styled.div`
@@ -23,9 +25,12 @@ const TextWrapper = styled.div`
   margin-bottom: 14px;
 `;
 
-const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title }) => {
-  const [checkedState, setCheckedState] = useState<boolean[]>([]);
-
+const CheckboxList: React.FC<CheckboxListProps> = ({
+  monitors,
+  title,
+  checkedState = [],
+  setCheckedState,
+}) => {
   useEffect(() => {
     // Initialize the checked state with all true if no initial values provided
     setCheckedState(Array(monitors.length).fill(true));
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index f67a866b0..91cc52649 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -35,6 +35,13 @@ export interface DestinationDetailsField {
   __typename: string;
 }
 
+export type DynamicField = {
+  name: string;
+  componentType: 'input' | 'dropdown' | 'multi_input' | 'textarea';
+  title: string;
+  [key: string]: any;
+};
+
 export interface DestinationDetailsResponse {
   destinationTypeDetails: {
     fields: DestinationDetailsField[];

From 6b673558ea86d6ef5d59742537f668cc4975b468 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 7 Aug 2024 13:53:17 +0300
Subject: [PATCH 136/374] chore: create destination mutation

---
 frontend/graph/generated.go                   | 254 +++++++++++++++---
 frontend/graph/model/models_gen.go            |  18 ++
 frontend/graph/schema.graphqls                |  23 +-
 frontend/graph/schema.resolvers.go            |  73 ++++-
 frontend/services/destinations.go             | 208 ++++++++++++++
 .../destinations-list/index.tsx               |   4 +-
 6 files changed, 530 insertions(+), 50 deletions(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 78302506b..c4e824cbc 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -141,7 +141,7 @@ type ComplexityRoot struct {
 	}
 
 	Mutation struct {
-		CreateK8sDesiredNamespace func(childComplexity int, cpID string, namespace model.K8sDesiredNamespaceInput) int
+		CreateNewDestination func(childComplexity int, destination model.DestinationInput) int
 	}
 
 	ObservabilitySignalSupport struct {
@@ -183,7 +183,7 @@ type K8sActualNamespaceResolver interface {
 	K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error)
 }
 type MutationResolver interface {
-	CreateK8sDesiredNamespace(ctx context.Context, cpID string, namespace model.K8sDesiredNamespaceInput) (*model.K8sActualNamespace, error)
+	CreateNewDestination(ctx context.Context, destination model.DestinationInput) (*model.Destination, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
@@ -583,17 +583,17 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualSource.ServiceName(childComplexity), true
 
-	case "Mutation.createK8sDesiredNamespace":
-		if e.complexity.Mutation.CreateK8sDesiredNamespace == nil {
+	case "Mutation.createNewDestination":
+		if e.complexity.Mutation.CreateNewDestination == nil {
 			break
 		}
 
-		args, err := ec.field_Mutation_createK8sDesiredNamespace_args(context.TODO(), rawArgs)
+		args, err := ec.field_Mutation_createNewDestination_args(context.TODO(), rawArgs)
 		if err != nil {
 			return 0, false
 		}
 
-		return e.complexity.Mutation.CreateK8sDesiredNamespace(childComplexity, args["cpId"].(string), args["namespace"].(model.K8sDesiredNamespaceInput)), true
+		return e.complexity.Mutation.CreateNewDestination(childComplexity, args["destination"].(model.DestinationInput)), true
 
 	case "ObservabilitySignalSupport.supported":
 		if e.complexity.ObservabilitySignalSupport.Supported == nil {
@@ -678,6 +678,9 @@ func (e *executableSchema) Exec(ctx context.Context) graphql.ResponseHandler {
 	rc := graphql.GetOperationContext(ctx)
 	ec := executionContext{rc, e, 0, 0, make(chan graphql.DeferredResult)}
 	inputUnmarshalMap := graphql.BuildUnmarshalerMap(
+		ec.unmarshalInputDestinationInput,
+		ec.unmarshalInputExportedSignalsInput,
+		ec.unmarshalInputFieldInput,
 		ec.unmarshalInputK8sDesiredNamespaceInput,
 		ec.unmarshalInputK8sDesiredSourceInput,
 		ec.unmarshalInputK8sNamespaceId,
@@ -861,27 +864,18 @@ func (ec *executionContext) field_K8sActualNamespace_k8sActualSources_args(ctx c
 	return args, nil
 }
 
-func (ec *executionContext) field_Mutation_createK8sDesiredNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+func (ec *executionContext) field_Mutation_createNewDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
-	var arg0 string
-	if tmp, ok := rawArgs["cpId"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("cpId"))
-		arg0, err = ec.unmarshalNID2string(ctx, tmp)
-		if err != nil {
-			return nil, err
-		}
-	}
-	args["cpId"] = arg0
-	var arg1 model.K8sDesiredNamespaceInput
-	if tmp, ok := rawArgs["namespace"]; ok {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
-		arg1, err = ec.unmarshalNK8sDesiredNamespaceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredNamespaceInput(ctx, tmp)
+	var arg0 model.DestinationInput
+	if tmp, ok := rawArgs["destination"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
+		arg0, err = ec.unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx, tmp)
 		if err != nil {
 			return nil, err
 		}
 	}
-	args["namespace"] = arg1
+	args["destination"] = arg0
 	return args, nil
 }
 
@@ -3350,8 +3344,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplication
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_createK8sDesiredNamespace(ctx, field)
+func (ec *executionContext) _Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createNewDestination(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -3364,21 +3358,24 @@ func (ec *executionContext) _Mutation_createK8sDesiredNamespace(ctx context.Cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().CreateK8sDesiredNamespace(rctx, fc.Args["cpId"].(string), fc.Args["namespace"].(model.K8sDesiredNamespaceInput))
+		return ec.resolvers.Mutation().CreateNewDestination(rctx, fc.Args["destination"].(model.DestinationInput))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.K8sActualNamespace)
+	res := resTmp.(*model.Destination)
 	fc.Result = res
-	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+	return ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_createK8sDesiredNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "Mutation",
 		Field:      field,
@@ -3386,14 +3383,22 @@ func (ec *executionContext) fieldContext_Mutation_createK8sDesiredNamespace(ctx
 		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
 			case "name":
-				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "instrumentationLabelEnabled":
-				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
 		},
 	}
 	defer func() {
@@ -3403,7 +3408,7 @@ func (ec *executionContext) fieldContext_Mutation_createK8sDesiredNamespace(ctx
 		}
 	}()
 	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_createK8sDesiredNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+	if fc.Args, err = ec.field_Mutation_createNewDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
 		ec.Error(ctx, err)
 		return fc, err
 	}
@@ -5789,6 +5794,129 @@ func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context
 
 // region    **************************** input.gotpl *****************************
 
+func (ec *executionContext) unmarshalInputDestinationInput(ctx context.Context, obj interface{}) (model.DestinationInput, error) {
+	var it model.DestinationInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "type", "exportedSignals", "fields"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "type":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("type"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Type = data
+		case "exportedSignals":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("exportedSignals"))
+			data, err := ec.unmarshalNExportedSignalsInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignalsInput(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.ExportedSignals = data
+		case "fields":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("fields"))
+			data, err := ec.unmarshalNFieldInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldInputᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Fields = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputExportedSignalsInput(ctx context.Context, obj interface{}) (model.ExportedSignalsInput, error) {
+	var it model.ExportedSignalsInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"traces", "metrics", "logs"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "traces":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("traces"))
+			data, err := ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Traces = data
+		case "metrics":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("metrics"))
+			data, err := ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Metrics = data
+		case "logs":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("logs"))
+			data, err := ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Logs = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputFieldInput(ctx context.Context, obj interface{}) (model.FieldInput, error) {
+	var it model.FieldInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"key", "value"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "key":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("key"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Key = data
+		case "value":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("value"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Value = data
+		}
+	}
+
+	return it, nil
+}
+
 func (ec *executionContext) unmarshalInputK8sDesiredNamespaceInput(ctx context.Context, obj interface{}) (model.K8sDesiredNamespaceInput, error) {
 	var it model.K8sDesiredNamespaceInput
 	asMap := map[string]interface{}{}
@@ -6780,10 +6908,13 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 		switch field.Name {
 		case "__typename":
 			out.Values[i] = graphql.MarshalString("Mutation")
-		case "createK8sDesiredNamespace":
+		case "createNewDestination":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
-				return ec._Mutation_createK8sDesiredNamespace(ctx, field)
+				return ec._Mutation_createNewDestination(ctx, field)
 			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -7436,6 +7567,25 @@ func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑio
 	return v
 }
 
+func (ec *executionContext) marshalNDestination2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v model.Destination) graphql.Marshaler {
+	return ec._Destination(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v *model.Destination) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._Destination(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx context.Context, v interface{}) (model.DestinationInput, error) {
+	res, err := ec.unmarshalInputDestinationInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx context.Context, sel ast.SelectionSet, v model.DestinationTypesCategoryItem) graphql.Marshaler {
 	return ec._DestinationTypesCategoryItem(ctx, sel, &v)
 }
@@ -7536,6 +7686,11 @@ func (ec *executionContext) marshalNExportedSignals2githubᚗcomᚋodigosᚑio
 	return ec._ExportedSignals(ctx, sel, &v)
 }
 
+func (ec *executionContext) unmarshalNExportedSignalsInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignalsInput(ctx context.Context, v interface{}) (*model.ExportedSignalsInput, error) {
+	res, err := ec.unmarshalInputExportedSignalsInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) marshalNField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.Field) graphql.Marshaler {
 	ret := make(graphql.Array, len(v))
 	var wg sync.WaitGroup
@@ -7590,6 +7745,28 @@ func (ec *executionContext) marshalNField2ᚖgithubᚗcomᚋodigosᚑioᚋodigos
 	return ec._Field(ctx, sel, v)
 }
 
+func (ec *executionContext) unmarshalNFieldInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldInputᚄ(ctx context.Context, v interface{}) ([]*model.FieldInput, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*model.FieldInput, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNFieldInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldInput(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) unmarshalNFieldInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldInput(ctx context.Context, v interface{}) (*model.FieldInput, error) {
+	res, err := ec.unmarshalInputFieldInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) unmarshalNID2string(ctx context.Context, v interface{}) (string, error) {
 	res, err := graphql.UnmarshalID(v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -7691,11 +7868,6 @@ func (ec *executionContext) marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigos
 	return ret
 }
 
-func (ec *executionContext) unmarshalNK8sDesiredNamespaceInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sDesiredNamespaceInput(ctx context.Context, v interface{}) (model.K8sDesiredNamespaceInput, error) {
-	res, err := ec.unmarshalInputK8sDesiredNamespaceInput(ctx, v)
-	return res, graphql.ErrorOnPath(ctx, err)
-}
-
 func (ec *executionContext) unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx context.Context, v interface{}) (model.K8sResourceKind, error) {
 	var res model.K8sResourceKind
 	err := res.UnmarshalGQL(v)
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index e74ae4c57..58642ccda 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -25,6 +25,19 @@ type Condition struct {
 	Message            *string         `json:"message,omitempty"`
 }
 
+type DestinationInput struct {
+	Name            string                `json:"name"`
+	Type            string                `json:"type"`
+	ExportedSignals *ExportedSignalsInput `json:"exportedSignals"`
+	Fields          []*FieldInput         `json:"fields"`
+}
+
+type ExportedSignalsInput struct {
+	Traces  bool `json:"traces"`
+	Metrics bool `json:"metrics"`
+	Logs    bool `json:"logs"`
+}
+
 type Field struct {
 	Name                string  `json:"name"`
 	DisplayName         string  `json:"displayName"`
@@ -35,6 +48,11 @@ type Field struct {
 	InitialValue        *string `json:"initialValue,omitempty"`
 }
 
+type FieldInput struct {
+	Key   string `json:"key"`
+	Value string `json:"value"`
+}
+
 type GetConfigResponse struct {
 	Installation InstallationStatus `json:"installation"`
 }
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 591e81151..f7ef33816 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -172,6 +172,24 @@ type GetDestinationDetailsResponse {
   fields: [Field!]!
 }
 
+input DestinationInput {
+  name: String!
+  type: String!
+  exportedSignals: ExportedSignalsInput!
+  fields: [FieldInput!]!
+}
+
+input FieldInput {
+  key: String!
+  value: String!
+}
+
+input ExportedSignalsInput {
+  traces: Boolean!
+  metrics: Boolean!
+  logs: Boolean!
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
@@ -180,8 +198,5 @@ type Query {
 }
 
 type Mutation {
-  createK8sDesiredNamespace(
-    cpId: ID!
-    namespace: K8sDesiredNamespaceInput!
-  ): K8sActualNamespace
+  createNewDestination(destination: DestinationInput!): Destination!
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index de65f4e5f..36f38a260 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -9,7 +9,9 @@ import (
 	"encoding/json"
 	"fmt"
 
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/frontend/endpoints"
 	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
@@ -79,9 +81,74 @@ func (r *k8sActualNamespaceResolver) K8sActualSources(ctx context.Context, obj *
 	return obj.K8sActualSources, nil
 }
 
-// CreateK8sDesiredNamespace is the resolver for the createK8sDesiredNamespace field.
-func (r *mutationResolver) CreateK8sDesiredNamespace(ctx context.Context, cpID string, namespace model.K8sDesiredNamespaceInput) (*model.K8sActualNamespace, error) {
-	panic(fmt.Errorf("not implemented: CreateK8sDesiredNamespace - createK8sDesiredNamespace"))
+func (r *mutationResolver) CreateNewDestination(ctx context.Context, destination model.DestinationInput) (*model.Destination, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	destType := common.DestinationType(destination.Type)
+	destName := destination.Name
+
+	destTypeConfig, err := services.GetDestinationTypeConfig(destType)
+	if err != nil {
+		return nil, fmt.Errorf("destination type %s not found", destType)
+	}
+
+	// Convert fields to map[string]string
+	fieldsMap := make(map[string]string)
+	for _, field := range destination.Fields {
+		fieldsMap[field.Key] = field.Value
+	}
+
+	errors := services.VerifyDestinationDataScheme(destType, destTypeConfig, fieldsMap)
+	if len(errors) > 0 {
+		return nil, fmt.Errorf("invalid destination data scheme: %v", errors)
+	}
+
+	dataField, secretFields := services.TransformFieldsToDataAndSecrets(destTypeConfig, fieldsMap)
+	generateNamePrefix := "odigos.io.dest." + string(destType) + "-"
+
+	k8sDestination := v1alpha1.Destination{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: generateNamePrefix,
+		},
+		Spec: v1alpha1.DestinationSpec{
+			Type:            destType,
+			DestinationName: destName,
+			Data:            dataField,
+			Signals:         services.ExportedSignalsObjectToSlice(destination.ExportedSignals),
+		},
+	}
+
+	createSecret := len(secretFields) > 0
+	if createSecret {
+		secretRef, err := services.CreateDestinationSecret(ctx, destType, secretFields, odigosns)
+		if err != nil {
+			return nil, err
+		}
+		k8sDestination.Spec.SecretRef = secretRef
+	}
+
+	dest, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).Create(ctx, &k8sDestination, metav1.CreateOptions{})
+	if err != nil {
+		if createSecret {
+			kube.DefaultClient.CoreV1().Secrets(odigosns).Delete(ctx, destName, metav1.DeleteOptions{})
+		}
+		return nil, err
+	}
+
+	if dest.Spec.SecretRef != nil {
+		err = services.AddDestinationOwnerReferenceToSecret(ctx, odigosns, dest)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	secretFieldsMap, err := services.GetDestinationSecretFields(ctx, odigosns, dest)
+	if err != nil {
+		return nil, err
+	}
+
+	endpointDest := services.K8sDestinationToEndpointFormat(*dest, secretFieldsMap)
+	return &endpointDest, nil
 }
 
 // ComputePlatform is the resolver for the computePlatform field.
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
index 4b0564e42..30c1bc77a 100644
--- a/frontend/services/destinations.go
+++ b/frontend/services/destinations.go
@@ -1,11 +1,18 @@
 package services
 
 import (
+	"context"
+	"encoding/json"
 	"fmt"
 
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/destinations"
 	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	k8s "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/types"
 )
 
 func GetDestinationTypes() model.GetDestinationTypesResponse {
@@ -59,3 +66,204 @@ func GetDestinationTypeConfig(destType common.DestinationType) (*destinations.De
 
 	return nil, fmt.Errorf("destination type %s not found", destType)
 }
+
+func VerifyDestinationDataScheme(destType common.DestinationType, destTypeConfig *destinations.Destination, data map[string]string) []error {
+
+	errors := []error{}
+
+	// verify all fields in config are present in data (assuming here all fields are required)
+	for _, field := range destTypeConfig.Spec.Fields {
+		required, ok := field.ComponentProps["required"].(bool)
+		if !ok || !required {
+			continue
+		}
+		fieldValue, found := data[field.Name]
+		if !found || fieldValue == "" {
+			errors = append(errors, fmt.Errorf("field %s is required", field.Name))
+		}
+	}
+
+	// verify data fields are found in config
+	for dataField := range data {
+		found := false
+		// iterating all fields in config every time, assuming it's a small list
+		for _, field := range destTypeConfig.Spec.Fields {
+			if dataField == field.Name {
+				found = true
+				break
+			}
+		}
+		if !found {
+			errors = append(errors, fmt.Errorf("field %s is not found in config for destination type '%s'", dataField, destType))
+		}
+	}
+
+	return errors
+}
+
+func TransformFieldsToDataAndSecrets(destTypeConfig *destinations.Destination, fields map[string]string) (map[string]string, map[string]string) {
+
+	dataFields := map[string]string{}
+	secretFields := map[string]string{}
+
+	for fieldName, fieldValue := range fields {
+
+		// it is possible that some fields are not required and are empty.
+		// we should treat them as empty
+		if fieldValue == "" {
+			continue
+		}
+
+		// for each field in the data, find it's config
+		// assuming the list is small so it's ok to iterate it
+		for _, fieldConfig := range destTypeConfig.Spec.Fields {
+			if fieldName == fieldConfig.Name {
+				if fieldConfig.Secret {
+					secretFields[fieldName] = fieldValue
+				} else {
+					dataFields[fieldName] = fieldValue
+				}
+			}
+		}
+	}
+
+	return dataFields, secretFields
+}
+
+func GetDestinationSecretFields(c context.Context, odigosns string, dest *v1alpha1.Destination) (map[string]string, error) {
+
+	secretFields := map[string]string{}
+	secretRef := dest.Spec.SecretRef
+
+	if secretRef == nil {
+		return secretFields, nil
+	}
+
+	secret, err := kube.DefaultClient.CoreV1().Secrets(odigosns).Get(c, secretRef.Name, metav1.GetOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	for k, v := range secret.Data {
+		secretFields[k] = string(v)
+	}
+
+	return secretFields, nil
+}
+
+func K8sDestinationToEndpointFormat(k8sDest v1alpha1.Destination, secretFields map[string]string) model.Destination {
+	destType := k8sDest.Spec.Type
+	destName := k8sDest.Spec.DestinationName
+	mergedFields := mergeDataAndSecrets(k8sDest.Spec.Data, secretFields)
+	destTypeConfig := DestinationTypeConfigToCategoryItem(destinations.GetDestinationByType(string(destType)))
+
+	var conditions []metav1.Condition
+	for _, condition := range k8sDest.Status.Conditions {
+		conditions = append(conditions, metav1.Condition{
+			Type:               condition.Type,
+			Status:             condition.Status,
+			Message:            condition.Message,
+			LastTransitionTime: condition.LastTransitionTime,
+		})
+	}
+
+	return model.Destination{
+		Id:   k8sDest.Name,
+		Name: destName,
+		Type: destType,
+		ExportedSignals: model.ExportedSignals{
+			Traces:  isSignalExported(k8sDest, common.TracesObservabilitySignal),
+			Metrics: isSignalExported(k8sDest, common.MetricsObservabilitySignal),
+			Logs:    isSignalExported(k8sDest, common.LogsObservabilitySignal),
+		},
+		Fields:          mergedFields,
+		DestinationType: destTypeConfig,
+		Conditions:      conditions,
+	}
+}
+
+func isSignalExported(dest v1alpha1.Destination, signal common.ObservabilitySignal) bool {
+	for _, s := range dest.Spec.Signals {
+		if s == signal {
+			return true
+		}
+	}
+
+	return false
+}
+
+func mergeDataAndSecrets(data map[string]string, secrets map[string]string) map[string]string {
+	merged := map[string]string{}
+
+	for k, v := range data {
+		merged[k] = v
+	}
+
+	for k, v := range secrets {
+		merged[k] = v
+	}
+
+	return merged
+}
+func ExportedSignalsObjectToSlice(signals *model.ExportedSignalsInput) []common.ObservabilitySignal {
+	var resp []common.ObservabilitySignal
+	if signals.Traces {
+		resp = append(resp, common.TracesObservabilitySignal)
+	}
+	if signals.Metrics {
+		resp = append(resp, common.MetricsObservabilitySignal)
+	}
+	if signals.Logs {
+		resp = append(resp, common.LogsObservabilitySignal)
+	}
+
+	return resp
+}
+
+func CreateDestinationSecret(ctx context.Context, destType common.DestinationType, secretFields map[string]string, odigosns string) (*k8s.LocalObjectReference, error) {
+	generateNamePrefix := "odigos.io.dest." + string(destType) + "-"
+	secret := k8s.Secret{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: generateNamePrefix,
+		},
+		StringData: secretFields,
+	}
+	newSecret, err := kube.DefaultClient.CoreV1().Secrets(odigosns).Create(ctx, &secret, metav1.CreateOptions{})
+	if err != nil {
+		return nil, err
+	}
+	return &k8s.LocalObjectReference{
+		Name: newSecret.Name,
+	}, nil
+}
+
+func AddDestinationOwnerReferenceToSecret(ctx context.Context, odigosns string, dest *v1alpha1.Destination) error {
+	destOwnerRef := metav1.OwnerReference{
+		APIVersion: "odigos.io/v1alpha1",
+		Kind:       "Destination",
+		Name:       dest.Name,
+		UID:        dest.UID,
+	}
+
+	secretPatch := []struct {
+		Op    string                  `json:"op"`
+		Path  string                  `json:"path"`
+		Value []metav1.OwnerReference `json:"value"`
+	}{{
+		Op:    "add",
+		Path:  "/metadata/ownerReferences",
+		Value: []metav1.OwnerReference{destOwnerRef},
+	},
+	}
+
+	secretPatchBytes, err := json.Marshal(secretPatch)
+	if err != nil {
+		return err
+	}
+
+	_, err = kube.DefaultClient.CoreV1().Secrets(odigosns).Patch(ctx, dest.Spec.SecretRef.Name, types.JSONPatchType, secretPatchBytes, metav1.PatchOptions{})
+	if err != nil {
+		return err
+	}
+	return nil
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 7d54930ff..1d62f9bfd 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -92,10 +92,10 @@ const DestinationsList: React.FC<DestinationsListProps> = ({
     );
 
     return supportedSignalsList.map((signal, index) => (
-      <>
+      <SignalsWrapper key={index}>
         <SignalText>{signal}</SignalText>
         {index < supportedSignalsList.length - 1 && <SignalText>·</SignalText>}
-      </>
+      </SignalsWrapper>
     ));
   }
 

From fbad849b8ee7172da81abdf3657b7fae1be3a3b3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 7 Aug 2024 15:15:32 +0300
Subject: [PATCH 137/374] chore: wip

---
 frontend/graph/generated.go        | 295 +++++++++++++++++++++++++++++
 frontend/graph/model/models_gen.go |  11 ++
 frontend/graph/schema.graphqls     |  16 ++
 frontend/graph/schema.resolvers.go |  32 ++++
 frontend/services/namespaces.go    |  32 ++++
 frontend/services/utils.go         |  28 ++-
 6 files changed, 413 insertions(+), 1 deletion(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index c4e824cbc..c6b8cc0c4 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -142,6 +142,8 @@ type ComplexityRoot struct {
 
 	Mutation struct {
 		CreateNewDestination func(childComplexity int, destination model.DestinationInput) int
+		PersistK8sNamespace  func(childComplexity int, namespace model.PersistNamespaceItemInput) int
+		PersistK8sSources    func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
 	}
 
 	ObservabilitySignalSupport struct {
@@ -184,6 +186,8 @@ type K8sActualNamespaceResolver interface {
 }
 type MutationResolver interface {
 	CreateNewDestination(ctx context.Context, destination model.DestinationInput) (*model.Destination, error)
+	PersistK8sNamespace(ctx context.Context, namespace model.PersistNamespaceItemInput) (bool, error)
+	PersistK8sSources(ctx context.Context, namespace string, sources []*model.PersistNamespaceSourceInput) (bool, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
@@ -595,6 +599,30 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.CreateNewDestination(childComplexity, args["destination"].(model.DestinationInput)), true
 
+	case "Mutation.persistK8sNamespace":
+		if e.complexity.Mutation.PersistK8sNamespace == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_persistK8sNamespace_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.PersistK8sNamespace(childComplexity, args["namespace"].(model.PersistNamespaceItemInput)), true
+
+	case "Mutation.persistK8sSources":
+		if e.complexity.Mutation.PersistK8sSources == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_persistK8sSources_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.PersistK8sSources(childComplexity, args["namespace"].(string), args["sources"].([]*model.PersistNamespaceSourceInput)), true
+
 	case "ObservabilitySignalSupport.supported":
 		if e.complexity.ObservabilitySignalSupport.Supported == nil {
 			break
@@ -685,6 +713,8 @@ func (e *executableSchema) Exec(ctx context.Context) graphql.ResponseHandler {
 		ec.unmarshalInputK8sDesiredSourceInput,
 		ec.unmarshalInputK8sNamespaceId,
 		ec.unmarshalInputK8sSourceId,
+		ec.unmarshalInputPersistNamespaceItemInput,
+		ec.unmarshalInputPersistNamespaceSourceInput,
 	)
 	first := true
 
@@ -879,6 +909,45 @@ func (ec *executionContext) field_Mutation_createNewDestination_args(ctx context
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_persistK8sNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.PersistNamespaceItemInput
+	if tmp, ok := rawArgs["namespace"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+		arg0, err = ec.unmarshalNPersistNamespaceItemInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceItemInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["namespace"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_persistK8sSources_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["namespace"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["namespace"] = arg0
+	var arg1 []*model.PersistNamespaceSourceInput
+	if tmp, ok := rawArgs["sources"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("sources"))
+		arg1, err = ec.unmarshalNPersistNamespaceSourceInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceSourceInputᚄ(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["sources"] = arg1
+	return args, nil
+}
+
 func (ec *executionContext) field_Query___type_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -3415,6 +3484,116 @@ func (ec *executionContext) fieldContext_Mutation_createNewDestination(ctx conte
 	return fc, nil
 }
 
+func (ec *executionContext) _Mutation_persistK8sNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_persistK8sNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().PersistK8sNamespace(rctx, fc.Args["namespace"].(model.PersistNamespaceItemInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_persistK8sNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_persistK8sNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_persistK8sSources(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_persistK8sSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().PersistK8sSources(rctx, fc.Args["namespace"].(string), fc.Args["sources"].([]*model.PersistNamespaceSourceInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_persistK8sSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_persistK8sSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Context, field graphql.CollectedField, obj *model.ObservabilitySignalSupport) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
 	if err != nil {
@@ -6046,6 +6225,81 @@ func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj i
 	return it, nil
 }
 
+func (ec *executionContext) unmarshalInputPersistNamespaceItemInput(ctx context.Context, obj interface{}) (model.PersistNamespaceItemInput, error) {
+	var it model.PersistNamespaceItemInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "futureSelected"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "futureSelected":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("futureSelected"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.FutureSelected = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputPersistNamespaceSourceInput(ctx context.Context, obj interface{}) (model.PersistNamespaceSourceInput, error) {
+	var it model.PersistNamespaceSourceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "kind", "selected"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Kind = data
+		case "selected":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("selected"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Selected = data
+		}
+	}
+
+	return it, nil
+}
+
 // endregion **************************** input.gotpl *****************************
 
 // region    ************************** interface.gotpl ***************************
@@ -6915,6 +7169,20 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "persistK8sNamespace":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_persistK8sNamespace(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "persistK8sSources":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_persistK8sSources(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -7882,6 +8150,33 @@ func (ec *executionContext) marshalNObservabilitySignalSupport2githubᚗcomᚋod
 	return ec._ObservabilitySignalSupport(ctx, sel, &v)
 }
 
+func (ec *executionContext) unmarshalNPersistNamespaceItemInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceItemInput(ctx context.Context, v interface{}) (model.PersistNamespaceItemInput, error) {
+	res, err := ec.unmarshalInputPersistNamespaceItemInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNPersistNamespaceSourceInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceSourceInputᚄ(ctx context.Context, v interface{}) ([]*model.PersistNamespaceSourceInput, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*model.PersistNamespaceSourceInput, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNPersistNamespaceSourceInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceSourceInput(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) unmarshalNPersistNamespaceSourceInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceSourceInput(ctx context.Context, v interface{}) (*model.PersistNamespaceSourceInput, error) {
+	res, err := ec.unmarshalInputPersistNamespaceSourceInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) marshalNSourceContainerRuntimeDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, v *model.SourceContainerRuntimeDetails) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 58642ccda..e09092c8b 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -105,6 +105,17 @@ type K8sSourceID struct {
 type Mutation struct {
 }
 
+type PersistNamespaceItemInput struct {
+	Name           string `json:"name"`
+	FutureSelected *bool  `json:"futureSelected,omitempty"`
+}
+
+type PersistNamespaceSourceInput struct {
+	Name     string          `json:"name"`
+	Kind     K8sResourceKind `json:"kind"`
+	Selected *bool           `json:"selected,omitempty"`
+}
+
 type Query struct {
 }
 
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index f7ef33816..95de2251e 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -190,6 +190,17 @@ input ExportedSignalsInput {
   logs: Boolean!
 }
 
+input PersistNamespaceItemInput {
+  name: String!
+  futureSelected: Boolean
+}
+
+input PersistNamespaceSourceInput {
+  name: String!
+  kind: K8sResourceKind!
+  selected: Boolean
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
@@ -199,4 +210,9 @@ type Query {
 
 type Mutation {
   createNewDestination(destination: DestinationInput!): Destination!
+  persistK8sNamespace(namespace: PersistNamespaceItemInput!): Boolean!
+  persistK8sSources(
+    namespace: String!
+    sources: [PersistNamespaceSourceInput!]!
+  ): Boolean!
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 36f38a260..4c69ce864 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -18,6 +18,7 @@ import (
 	"github.com/odigos-io/odigos/frontend/services"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/types"
 )
 
 // K8sActualNamespace is the resolver for the k8sActualNamespace field.
@@ -81,6 +82,7 @@ func (r *k8sActualNamespaceResolver) K8sActualSources(ctx context.Context, obj *
 	return obj.K8sActualSources, nil
 }
 
+// CreateNewDestination is the resolver for the createNewDestination field.
 func (r *mutationResolver) CreateNewDestination(ctx context.Context, destination model.DestinationInput) (*model.Destination, error) {
 	odigosns := consts.DefaultOdigosNamespace
 
@@ -151,6 +153,36 @@ func (r *mutationResolver) CreateNewDestination(ctx context.Context, destination
 	return &endpointDest, nil
 }
 
+// PersistK8sNamespace is the resolver for the persistK8sNamespace field.
+func (r *mutationResolver) PersistK8sNamespace(ctx context.Context, namespace model.PersistNamespaceItemInput) (bool, error) {
+	jsonMergePayload := services.GetJsonMergePatchForInstrumentationLabel(namespace.FutureSelected)
+	_, err := kube.DefaultClient.CoreV1().Namespaces().Patch(ctx, namespace.Name, types.MergePatchType, jsonMergePayload, metav1.PatchOptions{})
+	if err != nil {
+		return false, fmt.Errorf("failed to patch namespace: %v", err)
+	}
+
+	return true, nil
+}
+
+// PersistK8sSources is the resolver for the persistK8sSources field.
+func (r *mutationResolver) PersistK8sSources(ctx context.Context, namespace string, sources []*model.PersistNamespaceSourceInput) (bool, error) {
+	var persistObjects []model.PersistNamespaceSourceInput
+	for _, source := range sources {
+		persistObjects = append(persistObjects, model.PersistNamespaceSourceInput{
+			Name:     source.Name,
+			Kind:     source.Kind,
+			Selected: source.Selected,
+		})
+	}
+
+	err := services.SyncWorkloadsInNamespace(ctx, namespace, persistObjects)
+	if err != nil {
+		return false, fmt.Errorf("failed to sync workloads: %v", err)
+	}
+
+	return true, nil
+}
+
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
 	namespacesResponse := services.GetK8SNamespaces(ctx)
diff --git a/frontend/services/namespaces.go b/frontend/services/namespaces.go
index fc22b6baf..c2fe67d48 100644
--- a/frontend/services/namespaces.go
+++ b/frontend/services/namespaces.go
@@ -14,6 +14,7 @@ import (
 	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/common/utils"
 
+	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
 	v1 "k8s.io/api/core/v1"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
@@ -149,3 +150,34 @@ func CountAppsPerNamespace(ctx context.Context) (map[string]int, error) {
 
 	return namespaceToAppsCount, nil
 }
+
+func GetJsonMergePatchForInstrumentationLabel(enabled *bool) []byte {
+	labelJsonMergePatchValue := "null"
+	if enabled != nil {
+		if *enabled {
+			labelJsonMergePatchValue = fmt.Sprintf("\"%s\"", consts.InstrumentationEnabled)
+		} else {
+			labelJsonMergePatchValue = fmt.Sprintf("\"%s\"", consts.InstrumentationDisabled)
+		}
+	}
+
+	jsonMergePatchContent := fmt.Sprintf(`{"metadata":{"labels":{"%s":%s}}}`, consts.OdigosInstrumentationLabel, labelJsonMergePatchValue)
+	return []byte(jsonMergePatchContent)
+}
+
+func SyncWorkloadsInNamespace(ctx context.Context, nsName string, workloads []model.PersistNamespaceSourceInput) error {
+	g, ctx := errgroup.WithContext(ctx)
+	g.SetLimit(kube.K8sClientDefaultBurst)
+
+	for _, workload := range workloads {
+		currWorkload := workload
+		g.Go(func() error {
+			// Only label selected sources, ignore the rest
+			if currWorkload.Selected != nil && *currWorkload.Selected {
+				return setWorkloadInstrumentationLabel(ctx, nsName, currWorkload.Name, WorkloadKind(currWorkload.Kind.String()), currWorkload.Selected)
+			}
+			return nil
+		})
+	}
+	return g.Wait()
+}
diff --git a/frontend/services/utils.go b/frontend/services/utils.go
index 90ff6591d..4464bb016 100644
--- a/frontend/services/utils.go
+++ b/frontend/services/utils.go
@@ -1,9 +1,35 @@
 package services
 
-import "path"
+import (
+	"context"
+	"errors"
+	"path"
+
+	"github.com/odigos-io/odigos/frontend/kube"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/types"
+)
 
 const cdnUrl = "https://d15jtxgb40qetw.cloudfront.net"
 
 func GetImageURL(image string) string {
 	return path.Join(cdnUrl, image)
 }
+
+func setWorkloadInstrumentationLabel(ctx context.Context, nsName string, workloadName string, workloadKind WorkloadKind, enabled *bool) error {
+	jsonMergePatchData := GetJsonMergePatchForInstrumentationLabel(enabled)
+
+	switch workloadKind {
+	case WorkloadKindDeployment:
+		_, err := kube.DefaultClient.AppsV1().Deployments(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	case WorkloadKindStatefulSet:
+		_, err := kube.DefaultClient.AppsV1().StatefulSets(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	case WorkloadKindDaemonSet:
+		_, err := kube.DefaultClient.AppsV1().DaemonSets(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	default:
+		return errors.New("unsupported workload kind " + string(workloadKind))
+	}
+}

From 65d5b12ee10c328ad93e63676f6dbd119666d4c2 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 7 Aug 2024 15:40:53 +0300
Subject: [PATCH 138/374] chore: init new mutations

---
 frontend/webapp/graphql/mutations/destination.ts |  9 +++++++++
 frontend/webapp/graphql/mutations/index.ts       |  1 +
 frontend/webapp/graphql/mutations/namespace.ts   |  7 +++++++
 frontend/webapp/graphql/mutations/source.ts      | 10 ++++++++++
 4 files changed, 27 insertions(+)
 create mode 100644 frontend/webapp/graphql/mutations/destination.ts
 create mode 100644 frontend/webapp/graphql/mutations/index.ts
 create mode 100644 frontend/webapp/graphql/mutations/namespace.ts
 create mode 100644 frontend/webapp/graphql/mutations/source.ts

diff --git a/frontend/webapp/graphql/mutations/destination.ts b/frontend/webapp/graphql/mutations/destination.ts
new file mode 100644
index 000000000..0cbdcc12e
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/destination.ts
@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_DESTINATION = gql`
+  mutation CreateNewDestination($destination: DestinationInput!) {
+    createNewDestination(destination: $destination) {
+      id
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/mutations/index.ts b/frontend/webapp/graphql/mutations/index.ts
new file mode 100644
index 000000000..cb9273dc8
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/index.ts
@@ -0,0 +1 @@
+export * from './destination';
diff --git a/frontend/webapp/graphql/mutations/namespace.ts b/frontend/webapp/graphql/mutations/namespace.ts
new file mode 100644
index 000000000..86b525867
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/namespace.ts
@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const PERSIST_NAMESPACE = gql`
+  mutation PersistNamespace($namespace: PersistNamespaceItemInput!) {
+    persistK8sNamespace(namespace: $namespace)
+  }
+`;
diff --git a/frontend/webapp/graphql/mutations/source.ts b/frontend/webapp/graphql/mutations/source.ts
new file mode 100644
index 000000000..3c171a743
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/source.ts
@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_SOURCE = gql`
+  mutation PersistSources(
+    $namespace: String!
+    $sources: [PersistNamespaceSourceInput!]!
+  ) {
+    persistK8sSources(namespace: $namespace, sources: $sources)
+  }
+`;

From cb7aa4e86f5735bdd5edbba27157e25cc3a0793f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 7 Aug 2024 16:48:29 +0300
Subject: [PATCH 139/374] chore: wip

---
 frontend/webapp/app/setup/layout.tsx          | 27 +------
 .../components/setup/headers/header/index.tsx | 30 +++-----
 .../destinations/add-destination/index.tsx    | 55 +++++++++++----
 .../main/sources/choose-sources/index.tsx     | 70 +++++++++++++------
 .../reuseable-components/button/index.tsx     |  5 +-
 .../navigation-buttons/index.tsx              |  6 +-
 6 files changed, 111 insertions(+), 82 deletions(-)

diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index a5ddf5598..8de0ce226 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { SetupHeader, SideMenu } from '@/components';
+import { SideMenu } from '@/components';
 
 const LayoutContainer = styled.div`
   width: 100%;
@@ -18,23 +18,14 @@ const SideMenuWrapper = styled.div`
   top: 144px;
 `;
 
-const HeaderWrapper = styled.div`
-  width: 100vw;
-`;
-
 const MainContent = styled.div`
   display: flex;
   max-width: 1440px;
-  width: 100%;
+  width: 100vh;
   flex-direction: column;
   align-items: center;
 `;
 
-const ContentWrapper = styled.div`
-  width: 640px;
-  padding-top: 64px;
-`;
-
 export default function SetupLayout({
   children,
 }: {
@@ -42,22 +33,10 @@ export default function SetupLayout({
 }) {
   return (
     <LayoutContainer>
-      <HeaderWrapper>
-        <SetupHeader
-          onBack={function (): void {
-            throw new Error('Function not implemented.');
-          }}
-          onNext={function (): void {
-            throw new Error('Function not implemented.');
-          }}
-        />
-      </HeaderWrapper>
       <SideMenuWrapper>
         <SideMenu />
       </SideMenuWrapper>
-      <MainContent>
-        <ContentWrapper>{children}</ContentWrapper>
-      </MainContent>
+      <MainContent>{children}</MainContent>
     </LayoutContainer>
   );
 }
diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
index 722a27586..ceaa4c468 100644
--- a/frontend/webapp/components/setup/headers/header/index.tsx
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -4,8 +4,13 @@ import styled from 'styled-components';
 import { NavigationButtons, Text } from '@/reuseable-components';
 
 interface SetupHeaderProps {
-  onBack: () => void;
-  onNext: () => void;
+  navigationButtons: {
+    label: string;
+    iconSrc?: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+  }[];
 }
 
 const HeaderContainer = styled.div`
@@ -26,7 +31,9 @@ const Logo = styled.div`
   font-size: 1.2em;
 `;
 
-export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
+export const SetupHeader: React.FC<SetupHeaderProps> = ({
+  navigationButtons,
+}) => {
   return (
     <HeaderContainer>
       <Logo>
@@ -38,22 +45,7 @@ export const SetupHeader: React.FC<SetupHeaderProps> = ({ onBack, onNext }) => {
         />
       </Logo>
       <Title family={'secondary'}>START WITH ODIGOS</Title>
-      <NavigationButtons
-        buttons={[
-          {
-            label: 'BACK',
-            iconSrc: '/icons/common/arrow-white.svg',
-            onClick: onBack,
-            variant: 'secondary',
-          },
-          {
-            label: 'NEXT',
-            iconSrc: '/icons/common/arrow-black.svg',
-            onClick: onNext,
-            variant: 'primary',
-          },
-        ]}
-      />
+      <NavigationButtons buttons={navigationButtons} />
     </HeaderContainer>
   );
 };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index c8c92371d..65a578524 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,33 +1,64 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { AddDestinationButton } from '@/components';
+import { AddDestinationButton, SetupHeader } from '@/components';
 import { SectionTitle } from '@/reuseable-components';
 import { AddDestinationModal } from './add-destination-modal';
+import { useRouter } from 'next/navigation';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
   margin-top: 24px;
 `;
 
+const ContentWrapper = styled.div`
+  width: 640px;
+  padding-top: 64px;
+`;
+
+const HeaderWrapper = styled.div`
+  width: 100vw;
+`;
+
 export function ChooseDestinationContainer() {
   const [isModalOpen, setModalOpen] = useState(false);
 
+  const router = useRouter();
   const handleOpenModal = () => setModalOpen(true);
   const handleCloseModal = () => setModalOpen(false);
 
   return (
     <>
-      <SectionTitle
-        title="Configure destinations"
-        description="Add backend destinations where collected data will be sent and configure their settings."
-      />
-      <AddDestinationButtonWrapper>
-        <AddDestinationButton onClick={() => handleOpenModal()} />
-      </AddDestinationButtonWrapper>
-      <AddDestinationModal
-        isModalOpen={isModalOpen}
-        handleCloseModal={handleCloseModal}
-      />
+      <HeaderWrapper>
+        <SetupHeader
+          navigationButtons={[
+            {
+              label: 'BACK',
+              iconSrc: '/icons/common/arrow-white.svg',
+              onClick: () => router.back(),
+              variant: 'secondary',
+            },
+            {
+              label: 'DONE',
+              // iconSrc: '/icons/common/arrow-black.svg',
+              onClick: () => console.log('Next button clicked'),
+              variant: 'primary',
+            },
+          ]}
+        />
+      </HeaderWrapper>
+      <ContentWrapper>
+        <SectionTitle
+          title="Configure destinations"
+          description="Add backend destinations where collected data will be sent and configure their settings."
+        />
+        <AddDestinationButtonWrapper>
+          <AddDestinationButton onClick={() => handleOpenModal()} />
+        </AddDestinationButtonWrapper>
+        <AddDestinationModal
+          isModalOpen={isModalOpen}
+          handleCloseModal={handleCloseModal}
+        />
+      </ContentWrapper>
     </>
   );
 }
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index 5b11bc670..4c5ea0f48 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -10,7 +10,18 @@ import {
   SearchDropdownHandlers,
   ToggleCheckboxHandlers,
 } from './choose-sources-menu/type';
-
+import { SetupHeader } from '@/components';
+import styled from 'styled-components';
+import { useRouter } from 'next/navigation';
+
+const ContentWrapper = styled.div`
+  width: 640px;
+  padding-top: 64px;
+`;
+
+const HeaderWrapper = styled.div`
+  width: 100vw;
+`;
 export function ChooseSourcesContainer() {
   const [searchFilter, setSearchFilter] = useState('');
   const [showSelectedOnly, setShowSelectedOnly] = useState(false);
@@ -19,9 +30,9 @@ export function ChooseSourcesContainer() {
   const [selectedOption, setSelectedOption] = useState<DropdownOption>();
   const [selectedItems, setSelectedItems] = useState<K8sActualSource[]>([]);
   const [namespacesList, setNamespacesList] = useState<DropdownOption[]>([]);
-
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
 
+  const router = useRouter();
   const { error, data } = useComputePlatform();
   const { data: namespacesData } = useNamespace(selectedOption?.value);
 
@@ -118,26 +129,41 @@ export function ChooseSourcesContainer() {
 
   return (
     <>
-      <SectionTitle
-        title="Choose sources"
-        description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
-      />
-      <SearchAndDropdown
-        state={searchDropdownState}
-        handlers={searchDropdownHandlers}
-        dropdownOptions={namespacesList}
-      />
-      <Divider thickness={1} margin="16px 0" />
-      <TogglesAndCheckboxes
-        state={toggleCheckboxState}
-        handlers={toggleCheckboxHandlers}
-      />
-      <Divider thickness={1} margin="16px 0 24px" />
-      <SourcesList
-        selectedItems={selectedItems}
-        setSelectedItems={handleSelectItem}
-        items={getVisibleSources()}
-      />
+      <HeaderWrapper>
+        <SetupHeader
+          navigationButtons={[
+            {
+              label: 'NEXT',
+              iconSrc: '/icons/common/arrow-black.svg',
+              onClick: () => router.push('/setup/choose-destination'),
+              variant: 'primary',
+              disabled: selectedItems.length === 0,
+            },
+          ]}
+        />
+      </HeaderWrapper>
+      <ContentWrapper>
+        <SectionTitle
+          title="Choose sources"
+          description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
+        />
+        <SearchAndDropdown
+          state={searchDropdownState}
+          handlers={searchDropdownHandlers}
+          dropdownOptions={namespacesList}
+        />
+        <Divider thickness={1} margin="16px 0" />
+        <TogglesAndCheckboxes
+          state={toggleCheckboxState}
+          handlers={toggleCheckboxHandlers}
+        />
+        <Divider thickness={1} margin="16px 0 24px" />
+        <SourcesList
+          selectedItems={selectedItems}
+          setSelectedItems={handleSelectItem}
+          items={getVisibleSources()}
+        />
+      </ContentWrapper>
     </>
   );
 }
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index e4c3d3f18..a783b8320 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -57,8 +57,7 @@ const StyledButton = styled.button<ButtonProps>`
   ${({ isDisabled }) =>
     isDisabled &&
     css`
-      background-color: #eaeaea;
-      color: #888;
+      opacity: 0.5;
       cursor: not-allowed;
       &:hover,
       &:active {
@@ -74,7 +73,7 @@ export const Button: React.FC<ButtonProps> = ({
   ...props
 }) => {
   return (
-    <StyledButton variant={variant} disabled={isDisabled} {...props}>
+    <StyledButton variant={variant} isDisabled={isDisabled} {...props}>
       {children}
     </StyledButton>
   );
diff --git a/frontend/webapp/reuseable-components/navigation-buttons/index.tsx b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
index b0fc57919..ebd7aad27 100644
--- a/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
+++ b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
@@ -26,7 +26,9 @@ const ButtonsContainer = styled.div`
 const StyledButton = styled(Button)`
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
+  min-width: 91.6px;
 `;
 
 const ButtonText = styled(Text)`
@@ -43,7 +45,7 @@ export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
     button: NavigationButtonProps;
     index: number;
   }) {
-    return buttons.length > 0 && button.iconSrc && index === 0;
+    return buttons.length > 1 && button.iconSrc && index === 0;
   }
   return (
     <ButtonsContainer>
@@ -52,7 +54,7 @@ export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
           key={index}
           variant={button.variant || 'secondary'}
           onClick={button.onClick}
-          disabled={button.disabled}
+          isDisabled={button.disabled}
         >
           {renderBackButton({ button, index }) && (
             <Image

From 3487650d583f5445a71955036f612f35e4c7341a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 7 Aug 2024 17:44:37 +0300
Subject: [PATCH 140/374] chore: wip

---
 .../choose-sources-list/index.tsx             | 16 +--
 .../main/sources/choose-sources/index.tsx     | 97 ++++++++++++++-----
 .../reuseable-components/checkbox/index.tsx   |  6 +-
 frontend/webapp/types/sources.ts              |  1 +
 4 files changed, 86 insertions(+), 34 deletions(-)

diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index 81c62b849..87d8d76ab 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -1,4 +1,5 @@
 import { Text } from '@/reuseable-components';
+import { K8sActualSource } from '@/types';
 import Image from 'next/image';
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -66,12 +67,6 @@ const SelectedTextWrapper = styled.div`
   margin-right: 24px;
 `;
 
-interface K8sActualSource {
-  name: string;
-  kind: string;
-  numberOfInstances: number;
-}
-
 interface SourcesListProps {
   items: K8sActualSource[];
   selectedItems: K8sActualSource[];
@@ -83,12 +78,19 @@ const SourcesList: React.FC<SourcesListProps> = ({
   selectedItems,
   setSelectedItems,
 }) => {
+  function isItemSelected(item: K8sActualSource) {
+    const selected = selectedItems.find(
+      (selectedItem) => selectedItem.name === item.name
+    );
+    return !!selected;
+  }
+
   return (
     <Container>
       {items.map((item) => (
         <ListItem
           key={item.name}
-          selected={selectedItems.includes(item)}
+          selected={isItemSelected(item)}
           onClick={() => setSelectedItems(item)}
         >
           <ListItemContent>
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index 4c5ea0f48..8d7a2fe72 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -13,6 +13,8 @@ import {
 import { SetupHeader } from '@/components';
 import styled from 'styled-components';
 import { useRouter } from 'next/navigation';
+import { setSources } from '@/store';
+import { useDispatch } from 'react-redux';
 
 const ContentWrapper = styled.div`
   width: 640px;
@@ -26,13 +28,19 @@ export function ChooseSourcesContainer() {
   const [searchFilter, setSearchFilter] = useState('');
   const [showSelectedOnly, setShowSelectedOnly] = useState(false);
   const [selectAllCheckbox, setSelectAllCheckbox] = useState(false);
-  const [futureAppsCheckbox, setFutureAppsCheckbox] = useState(false);
+  const [futureAppsCheckbox, setFutureAppsCheckbox] = useState<{
+    [key: string]: boolean;
+  }>({});
   const [selectedOption, setSelectedOption] = useState<DropdownOption>();
-  const [selectedItems, setSelectedItems] = useState<K8sActualSource[]>([]);
+  const [selectedItems, setSelectedItems] = useState<{
+    [key: string]: K8sActualSource[];
+  }>({});
   const [namespacesList, setNamespacesList] = useState<DropdownOption[]>([]);
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
 
   const router = useRouter();
+  const dispatch = useDispatch();
+
   const { error, data } = useComputePlatform();
   const { data: namespacesData } = useNamespace(selectedOption?.value);
 
@@ -69,26 +77,40 @@ export function ChooseSourcesContainer() {
   }
 
   function selectAllSources() {
-    setSelectedItems(sourcesList);
+    if (selectedOption) {
+      setSelectedItems({
+        ...selectedItems,
+        [selectedOption.value]: sourcesList,
+      });
+    }
   }
 
   function handleSelectItem(item: K8sActualSource) {
-    if (selectedItems.includes(item)) {
-      const updatedSelectedItems = selectedItems.filter(
-        (selectedItem) => selectedItem !== item
-      );
-      setSelectedItems(updatedSelectedItems);
-      if (
-        selectAllCheckbox &&
-        updatedSelectedItems.length !== sourcesList.length
-      ) {
-        setSelectAllCheckbox(false);
-      }
-    } else {
-      const updatedSelectedItems = [...selectedItems, item];
-      setSelectedItems(updatedSelectedItems);
-      if (updatedSelectedItems.length === sourcesList.length) {
-        setSelectAllCheckbox(true);
+    if (selectedOption) {
+      const currentSelectedItems = selectedItems[selectedOption.value] || [];
+      if (currentSelectedItems.includes(item)) {
+        const updatedSelectedItems = currentSelectedItems.filter(
+          (selectedItem) => selectedItem !== item
+        );
+        setSelectedItems({
+          ...selectedItems,
+          [selectedOption.value]: updatedSelectedItems,
+        });
+        if (
+          selectAllCheckbox &&
+          updatedSelectedItems.length !== sourcesList.length
+        ) {
+          setSelectAllCheckbox(false);
+        }
+      } else {
+        const updatedSelectedItems = [...currentSelectedItems, item];
+        setSelectedItems({
+          ...selectedItems,
+          [selectedOption.value]: updatedSelectedItems,
+        });
+        if (updatedSelectedItems.length === sourcesList.length) {
+          setSelectAllCheckbox(true);
+        }
       }
     }
   }
@@ -100,21 +122,40 @@ export function ChooseSourcesContainer() {
       : allSources;
 
     return showSelectedOnly
-      ? filteredSources.filter((source) => selectedItems.includes(source))
+      ? filteredSources.filter((source) =>
+          selectedOption
+            ? (selectedItems[selectedOption.value] || []).includes(source)
+            : false
+        )
       : filteredSources;
   }
 
+  function onNextClick() {
+    if (selectedOption) {
+      dispatch(setSources(selectedItems[selectedOption.value] || []));
+    }
+    router.push('/setup/choose-destination');
+  }
+
   const toggleCheckboxState: ToggleCheckboxState = {
-    selectedAppsCount: selectedItems.length,
+    selectedAppsCount: selectedOption
+      ? (selectedItems[selectedOption.value] || []).length
+      : 0,
     selectAllCheckbox,
     showSelectedOnly,
-    futureAppsCheckbox,
+    futureAppsCheckbox:
+      futureAppsCheckbox[selectedOption?.value || ''] || false,
   };
 
   const toggleCheckboxHandlers: ToggleCheckboxHandlers = {
     setSelectAllCheckbox,
     setShowSelectedOnly,
-    setFutureAppsCheckbox,
+    setFutureAppsCheckbox: (value: boolean) => {
+      setFutureAppsCheckbox({
+        ...futureAppsCheckbox,
+        [selectedOption?.value || '']: value,
+      });
+    },
   };
 
   const searchDropdownState: SearchDropdownState = {
@@ -135,9 +176,11 @@ export function ChooseSourcesContainer() {
             {
               label: 'NEXT',
               iconSrc: '/icons/common/arrow-black.svg',
-              onClick: () => router.push('/setup/choose-destination'),
+              onClick: () => onNextClick(),
               variant: 'primary',
-              disabled: selectedItems.length === 0,
+              disabled:
+                !selectedOption ||
+                (selectedItems[selectedOption.value] || []).length === 0,
             },
           ]}
         />
@@ -159,7 +202,9 @@ export function ChooseSourcesContainer() {
         />
         <Divider thickness={1} margin="16px 0 24px" />
         <SourcesList
-          selectedItems={selectedItems}
+          selectedItems={
+            selectedOption ? selectedItems[selectedOption.value] || [] : []
+          }
           setSelectedItems={handleSelectItem}
           items={getVisibleSources()}
         />
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
index 92a3c1470..57a1066d0 100644
--- a/frontend/webapp/reuseable-components/checkbox/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Tooltip } from '../tooltip';
 import Image from 'next/image';
@@ -45,6 +45,10 @@ const Checkbox: React.FC<CheckboxProps> = ({
 }) => {
   const [isChecked, setIsChecked] = useState(initialValue);
 
+  useEffect(() => {
+    setIsChecked(initialValue);
+  }, [initialValue]);
+
   const handleToggle = () => {
     if (!disabled) {
       const newValue = !isChecked;
diff --git a/frontend/webapp/types/sources.ts b/frontend/webapp/types/sources.ts
index f7d8e9709..d34825c62 100644
--- a/frontend/webapp/types/sources.ts
+++ b/frontend/webapp/types/sources.ts
@@ -75,4 +75,5 @@ export type K8sActualSource = {
   name: string;
   kind: string;
   numberOfInstances: number;
+  selected?: boolean;
 };

From 801c3ae2a9f597a6d8bac0f048b8ed82a6a36282 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 8 Aug 2024 11:43:54 +0300
Subject: [PATCH 141/374] chore: use custom hook to manage setup state

---
 .../choose-sources-list/index.tsx             |   2 +-
 .../toggles-and-checkboxes.tsx                |  13 +-
 .../main/sources/choose-sources/index.tsx     | 169 ++++++------------
 frontend/webapp/hooks/sources/index.ts        |   2 +
 .../hooks/sources/useConnectSourcesList.ts    |  43 +++++
 .../sources/useConnectSourcesMenuState.ts     |  88 +++++++++
 frontend/webapp/store/slices/app-slice.ts     |  21 ++-
 7 files changed, 210 insertions(+), 128 deletions(-)
 create mode 100644 frontend/webapp/hooks/sources/useConnectSourcesList.ts
 create mode 100644 frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts

diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index 87d8d76ab..c6c42e8fd 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -109,7 +109,7 @@ const SourcesList: React.FC<SourcesListProps> = ({
               </Text>
             </TextWrapper>
           </ListItemContent>
-          {selectedItems.includes(item) && (
+          {isItemSelected(item) && (
             <SelectedTextWrapper>
               <Text size={12} family="secondary">
                 SELECTED
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
index 5a7c604db..6e52797ef 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
@@ -11,6 +11,7 @@ const Container = styled.div`
 
 const ToggleWrapper = styled.div`
   display: flex;
+  align-items: center;
   gap: 32px;
 `;
 
@@ -46,13 +47,13 @@ const TogglesAndCheckboxes: React.FC<ToggleCheckboxProps> = ({
           initialValue={showSelectedOnly}
           onChange={setShowSelectedOnly}
         />
+        <Checkbox
+          title="Future apps"
+          tooltip="Automatically instrument all future apps"
+          initialValue={futureAppsCheckbox}
+          onChange={setFutureAppsCheckbox}
+        />
       </ToggleWrapper>
-      <Checkbox
-        title="Future apps"
-        tooltip="Automatically instrument all future apps"
-        initialValue={futureAppsCheckbox}
-        onChange={setFutureAppsCheckbox}
-      />
     </Container>
   );
 };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index 8d7a2fe72..1a93ee898 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useDispatch } from 'react-redux';
+import { K8sActualSource } from '@/types';
+import { SetupHeader } from '@/components';
+import { useRouter } from 'next/navigation';
 import { SourcesList } from './choose-sources-list';
-import { useComputePlatform, useNamespace } from '@/hooks';
 import { SectionTitle, Divider } from '@/reuseable-components';
-import { DropdownOption, K8sActualNamespace, K8sActualSource } from '@/types';
+import { setNamespaceFutureSelectAppsList, setSources } from '@/store';
+import { useConnectSourcesList, useConnectSourcesMenuState } from '@/hooks';
 import { SearchAndDropdown, TogglesAndCheckboxes } from './choose-sources-menu';
 import {
   SearchDropdownState,
@@ -10,14 +15,9 @@ import {
   SearchDropdownHandlers,
   ToggleCheckboxHandlers,
 } from './choose-sources-menu/type';
-import { SetupHeader } from '@/components';
-import styled from 'styled-components';
-import { useRouter } from 'next/navigation';
-import { setSources } from '@/store';
-import { useDispatch } from 'react-redux';
 
 const ContentWrapper = styled.div`
-  width: 640px;
+  width: 660px;
   padding-top: 64px;
 `;
 
@@ -25,147 +25,76 @@ const HeaderWrapper = styled.div`
   width: 100vw;
 `;
 export function ChooseSourcesContainer() {
-  const [searchFilter, setSearchFilter] = useState('');
-  const [showSelectedOnly, setShowSelectedOnly] = useState(false);
-  const [selectAllCheckbox, setSelectAllCheckbox] = useState(false);
-  const [futureAppsCheckbox, setFutureAppsCheckbox] = useState<{
-    [key: string]: boolean;
-  }>({});
-  const [selectedOption, setSelectedOption] = useState<DropdownOption>();
-  const [selectedItems, setSelectedItems] = useState<{
-    [key: string]: K8sActualSource[];
-  }>({});
-  const [namespacesList, setNamespacesList] = useState<DropdownOption[]>([]);
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
 
+  const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
+    sourcesList,
+  });
+  const { namespacesList } = useConnectSourcesList({
+    stateMenu,
+    sourcesList,
+    setSourcesList,
+  });
+
   const router = useRouter();
   const dispatch = useDispatch();
 
-  const { error, data } = useComputePlatform();
-  const { data: namespacesData } = useNamespace(selectedOption?.value);
-
-  useEffect(() => {
-    data && buildNamespacesList();
-  }, [data, error]);
-
-  useEffect(() => {
-    namespacesData && setSourcesList(namespacesData.k8sActualSources || []);
-  }, [namespacesData]);
-
-  useEffect(() => {
-    selectAllCheckbox && selectAllSources();
-  }, [selectAllCheckbox]);
-
-  function buildNamespacesList() {
-    const namespaces = data?.computePlatform?.k8sActualNamespaces || [];
-    const namespacesList = namespaces.map((namespace: K8sActualNamespace) => ({
-      id: namespace.name,
-      value: namespace.name,
-    }));
-
-    setSelectedOption(namespacesList[0]);
-    setNamespacesList(namespacesList);
-  }
-
-  function filterSources(sources: K8sActualSource[]) {
-    return sources.filter((source: K8sActualSource) => {
-      return (
-        searchFilter === '' ||
-        source.name.toLowerCase().includes(searchFilter.toLowerCase())
-      );
-    });
-  }
-
-  function selectAllSources() {
-    if (selectedOption) {
-      setSelectedItems({
-        ...selectedItems,
-        [selectedOption.value]: sourcesList,
-      });
-    }
-  }
-
-  function handleSelectItem(item: K8sActualSource) {
-    if (selectedOption) {
-      const currentSelectedItems = selectedItems[selectedOption.value] || [];
-      if (currentSelectedItems.includes(item)) {
-        const updatedSelectedItems = currentSelectedItems.filter(
-          (selectedItem) => selectedItem !== item
-        );
-        setSelectedItems({
-          ...selectedItems,
-          [selectedOption.value]: updatedSelectedItems,
-        });
-        if (
-          selectAllCheckbox &&
-          updatedSelectedItems.length !== sourcesList.length
-        ) {
-          setSelectAllCheckbox(false);
-        }
-      } else {
-        const updatedSelectedItems = [...currentSelectedItems, item];
-        setSelectedItems({
-          ...selectedItems,
-          [selectedOption.value]: updatedSelectedItems,
-        });
-        if (updatedSelectedItems.length === sourcesList.length) {
-          setSelectAllCheckbox(true);
-        }
-      }
-    }
-  }
-
   function getVisibleSources() {
     const allSources = sourcesList || [];
-    const filteredSources = searchFilter
-      ? filterSources(allSources)
+    const filteredSources = stateMenu.searchFilter
+      ? stateHandlers.filterSources(allSources)
       : allSources;
 
-    return showSelectedOnly
+    return stateMenu.showSelectedOnly
       ? filteredSources.filter((source) =>
-          selectedOption
-            ? (selectedItems[selectedOption.value] || []).includes(source)
+          stateMenu.selectedOption
+            ? (
+                stateMenu.selectedItems[stateMenu.selectedOption.value] || []
+              ).find((selectedItem) => selectedItem.name === source.name)
             : false
         )
       : filteredSources;
   }
 
   function onNextClick() {
+    const { selectedOption, selectedItems, futureAppsCheckbox } = stateMenu;
     if (selectedOption) {
-      dispatch(setSources(selectedItems[selectedOption.value] || []));
+      dispatch(setSources(selectedItems));
+      dispatch(setNamespaceFutureSelectAppsList(futureAppsCheckbox));
     }
     router.push('/setup/choose-destination');
   }
 
   const toggleCheckboxState: ToggleCheckboxState = {
-    selectedAppsCount: selectedOption
-      ? (selectedItems[selectedOption.value] || []).length
+    selectedAppsCount: stateMenu.selectedOption
+      ? (stateMenu.selectedItems[stateMenu.selectedOption.value] || []).length
       : 0,
-    selectAllCheckbox,
-    showSelectedOnly,
+    selectAllCheckbox: stateMenu.selectAllCheckbox,
+    showSelectedOnly: stateMenu.showSelectedOnly,
     futureAppsCheckbox:
-      futureAppsCheckbox[selectedOption?.value || ''] || false,
+      stateMenu.futureAppsCheckbox[stateMenu.selectedOption?.value || ''] ||
+      false,
   };
 
   const toggleCheckboxHandlers: ToggleCheckboxHandlers = {
-    setSelectAllCheckbox,
-    setShowSelectedOnly,
+    setSelectAllCheckbox: stateMenu.setSelectAllCheckbox,
+    setShowSelectedOnly: stateMenu.setShowSelectedOnly,
     setFutureAppsCheckbox: (value: boolean) => {
-      setFutureAppsCheckbox({
-        ...futureAppsCheckbox,
-        [selectedOption?.value || '']: value,
+      stateMenu.setFutureAppsCheckbox({
+        ...stateMenu.futureAppsCheckbox,
+        [stateMenu.selectedOption?.value || '']: value,
       });
     },
   };
 
   const searchDropdownState: SearchDropdownState = {
-    selectedOption,
-    searchFilter,
+    selectedOption: stateMenu.selectedOption,
+    searchFilter: stateMenu.searchFilter,
   };
 
   const searchDropdownHandlers: SearchDropdownHandlers = {
-    setSelectedOption,
-    setSearchFilter,
+    setSelectedOption: stateMenu.setSelectedOption,
+    setSearchFilter: stateMenu.setSearchFilter,
   };
 
   return (
@@ -179,8 +108,10 @@ export function ChooseSourcesContainer() {
               onClick: () => onNextClick(),
               variant: 'primary',
               disabled:
-                !selectedOption ||
-                (selectedItems[selectedOption.value] || []).length === 0,
+                !stateMenu.selectedOption ||
+                Object.keys(stateMenu.selectedItems).every(
+                  (value) => stateMenu.selectedItems[value].length === 0
+                ),
             },
           ]}
         />
@@ -203,9 +134,11 @@ export function ChooseSourcesContainer() {
         <Divider thickness={1} margin="16px 0 24px" />
         <SourcesList
           selectedItems={
-            selectedOption ? selectedItems[selectedOption.value] || [] : []
+            stateMenu.selectedOption
+              ? stateMenu.selectedItems[stateMenu.selectedOption.value] || []
+              : []
           }
-          setSelectedItems={handleSelectItem}
+          setSelectedItems={stateHandlers.handleSelectItem}
           items={getVisibleSources()}
         />
       </ContentWrapper>
diff --git a/frontend/webapp/hooks/sources/index.ts b/frontend/webapp/hooks/sources/index.ts
index da4dcad8c..fa6665c03 100644
--- a/frontend/webapp/hooks/sources/index.ts
+++ b/frontend/webapp/hooks/sources/index.ts
@@ -1 +1,3 @@
 export * from './useSources';
+export * from './useConnectSourcesMenuState';
+export * from './useConnectSourcesList';
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesList.ts b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
new file mode 100644
index 000000000..7eae478c6
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
@@ -0,0 +1,43 @@
+import { DropdownOption, K8sActualNamespace, K8sActualSource } from '@/types';
+import { useEffect, useState } from 'react';
+import { useComputePlatform, useNamespace } from '../compute-platform';
+
+export const useConnectSourcesList = ({
+  stateMenu,
+  sourcesList,
+  setSourcesList,
+}) => {
+  const [namespacesList, setNamespacesList] = useState<DropdownOption[]>([]);
+
+  const { error, data } = useComputePlatform();
+  const { data: namespacesData } = useNamespace(
+    stateMenu.selectedOption?.value
+  );
+
+  useEffect(() => {
+    data && buildNamespacesList();
+  }, [data, error]);
+
+  useEffect(() => {
+    if (namespacesData && namespacesData.k8sActualSources) {
+      setSourcesList(namespacesData.k8sActualSources || []);
+      stateMenu.setSelectAllCheckbox(
+        namespacesData.k8sActualSources?.length ===
+          stateMenu.selectedItems[stateMenu.selectedOption?.value || '']
+            ?.length && namespacesData.k8sActualSources?.length > 0
+      );
+    }
+  }, [namespacesData]);
+
+  function buildNamespacesList() {
+    const namespaces = data?.computePlatform?.k8sActualNamespaces || [];
+    const namespacesList = namespaces.map((namespace: K8sActualNamespace) => ({
+      id: namespace.name,
+      value: namespace.name,
+    }));
+
+    stateMenu.setSelectedOption(namespacesList[0]);
+    setNamespacesList(namespacesList);
+  }
+  return { namespacesList };
+};
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
new file mode 100644
index 000000000..e52878362
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { DropdownOption, K8sActualSource } from '@/types';
+
+export const useConnectSourcesMenuState = ({ sourcesList }) => {
+  const [searchFilter, setSearchFilter] = useState('');
+  const [showSelectedOnly, setShowSelectedOnly] = useState(false);
+  const [selectAllCheckbox, setSelectAllCheckbox] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<DropdownOption>();
+  const [futureAppsCheckbox, setFutureAppsCheckbox] = useState<{
+    [key: string]: boolean;
+  }>({});
+
+  const [selectedItems, setSelectedItems] = useState<{
+    [key: string]: K8sActualSource[];
+  }>({});
+
+  useEffect(() => {
+    selectAllCheckbox && selectAllSources();
+  }, [selectAllCheckbox]);
+
+  function selectAllSources() {
+    if (selectedOption) {
+      setSelectedItems({
+        ...selectedItems,
+        [selectedOption.value]: sourcesList,
+      });
+    }
+  }
+
+  function filterSources(sources: K8sActualSource[]) {
+    return sources.filter((source: K8sActualSource) => {
+      return (
+        searchFilter === '' ||
+        source.name.toLowerCase().includes(searchFilter.toLowerCase())
+      );
+    });
+  }
+
+  function handleSelectItem(item: K8sActualSource) {
+    if (selectedOption) {
+      const currentSelectedItems = selectedItems[selectedOption.value] || [];
+      if (currentSelectedItems.includes(item)) {
+        const updatedSelectedItems = currentSelectedItems.filter(
+          (selectedItem) => selectedItem !== item
+        );
+        setSelectedItems({
+          ...selectedItems,
+          [selectedOption.value]: updatedSelectedItems,
+        });
+        if (
+          selectAllCheckbox &&
+          updatedSelectedItems.length !== sourcesList.length
+        ) {
+          setSelectAllCheckbox(false);
+        }
+      } else {
+        const updatedSelectedItems = [...currentSelectedItems, item];
+        setSelectedItems({
+          ...selectedItems,
+          [selectedOption.value]: updatedSelectedItems,
+        });
+        if (updatedSelectedItems.length === sourcesList.length) {
+          setSelectAllCheckbox(true);
+        }
+      }
+    }
+  }
+
+  return {
+    stateMenu: {
+      searchFilter,
+      setSearchFilter,
+      showSelectedOnly,
+      setShowSelectedOnly,
+      selectAllCheckbox,
+      setSelectAllCheckbox,
+      selectedOption,
+      setSelectedOption,
+      futureAppsCheckbox,
+      setFutureAppsCheckbox,
+      selectedItems,
+    },
+    stateHandlers: {
+      handleSelectItem,
+      filterSources,
+    },
+  };
+};
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
index 66266f246..643894c65 100644
--- a/frontend/webapp/store/slices/app-slice.ts
+++ b/frontend/webapp/store/slices/app-slice.ts
@@ -1,25 +1,40 @@
+import { K8sActualSource } from '@/types';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
 export interface IAppState {
-  sources: any;
+  sources: {
+    [key: string]: K8sActualSource[];
+  };
+  namespaceFutureSelectAppsList: { [key: string]: boolean };
 }
 
 const initialState: IAppState = {
   sources: {},
+  namespaceFutureSelectAppsList: {},
 };
 
 export const appSlice = createSlice({
   name: 'app',
   initialState,
   reducers: {
-    setSources: (state, action: PayloadAction<any>) => {
+    setSources: (
+      state,
+      action: PayloadAction<{ [key: string]: K8sActualSource[] }>
+    ) => {
       state.sources = action.payload;
     },
+    setNamespaceFutureSelectAppsList: (
+      state,
+      action: PayloadAction<{ [key: string]: boolean }>
+    ) => {
+      state.namespaceFutureSelectAppsList = action.payload;
+    },
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { setSources } = appSlice.actions;
+export const { setSources, setNamespaceFutureSelectAppsList } =
+  appSlice.actions;
 
 export const appReducer = appSlice.reducer;

From 9e0d46ad449c768b6af96b08d4c1ca0eef37da2d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 8 Aug 2024 13:49:24 +0300
Subject: [PATCH 142/374] chore: wip

---
 .../containers/main/sources/choose-sources/index.tsx |  5 ++---
 .../webapp/hooks/sources/useConnectSourcesList.ts    |  6 +-----
 .../hooks/sources/useConnectSourcesMenuState.ts      | 12 +++++++++++-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index 1a93ee898..84d85d18d 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -32,7 +32,6 @@ export function ChooseSourcesContainer() {
   });
   const { namespacesList } = useConnectSourcesList({
     stateMenu,
-    sourcesList,
     setSourcesList,
   });
 
@@ -126,12 +125,12 @@ export function ChooseSourcesContainer() {
           handlers={searchDropdownHandlers}
           dropdownOptions={namespacesList}
         />
-        <Divider thickness={1} margin="16px 0" />
+        <Divider margin="16px 0" />
         <TogglesAndCheckboxes
           state={toggleCheckboxState}
           handlers={toggleCheckboxHandlers}
         />
-        <Divider thickness={1} margin="16px 0 24px" />
+        <Divider margin="16px 0 24px" />
         <SourcesList
           selectedItems={
             stateMenu.selectedOption
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesList.ts b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
index 7eae478c6..9565453ec 100644
--- a/frontend/webapp/hooks/sources/useConnectSourcesList.ts
+++ b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
@@ -2,11 +2,7 @@ import { DropdownOption, K8sActualNamespace, K8sActualSource } from '@/types';
 import { useEffect, useState } from 'react';
 import { useComputePlatform, useNamespace } from '../compute-platform';
 
-export const useConnectSourcesList = ({
-  stateMenu,
-  sourcesList,
-  setSourcesList,
-}) => {
+export const useConnectSourcesList = ({ stateMenu, setSourcesList }) => {
   const [namespacesList, setNamespacesList] = useState<DropdownOption[]>([]);
 
   const { error, data } = useComputePlatform();
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
index e52878362..4fd64e62a 100644
--- a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
+++ b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { DropdownOption, K8sActualSource } from '@/types';
+import { useSelector } from 'react-redux';
 
 export const useConnectSourcesMenuState = ({ sourcesList }) => {
   const [searchFilter, setSearchFilter] = useState('');
@@ -9,11 +10,20 @@ export const useConnectSourcesMenuState = ({ sourcesList }) => {
   const [futureAppsCheckbox, setFutureAppsCheckbox] = useState<{
     [key: string]: boolean;
   }>({});
-
   const [selectedItems, setSelectedItems] = useState<{
     [key: string]: K8sActualSource[];
   }>({});
 
+  const { sources, namespaceFutureSelectAppsList } = useSelector(
+    ({ app }) => app
+  );
+
+  useEffect(() => {
+    sources && setSelectedItems(sources);
+    namespaceFutureSelectAppsList &&
+      setFutureAppsCheckbox(namespaceFutureSelectAppsList);
+  }, [namespaceFutureSelectAppsList, sources]);
+
   useEffect(() => {
     selectAllCheckbox && selectAllSources();
   }, [selectAllCheckbox]);

From 47dadd9a7a2a01fe925e84d2f6228389ac8c830d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 8 Aug 2024 13:54:07 +0300
Subject: [PATCH 143/374] chore: wip

---
 .../add-destination/choose-destination-menu/index.tsx        | 4 ++--
 .../add-destination/choose-destination-modal-body/index.tsx  | 2 +-
 .../containers/main/destinations/add-destination/index.tsx   | 5 ++---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
index 9a86b5ac5..76fecd5c9 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
@@ -15,7 +15,7 @@ interface FilterComponentProps {
 const InputAndDropdownContainer = styled.div`
   display: flex;
   gap: 12px;
-  width: 438px;
+  width: 370px;
 `;
 
 const FilterContainer = styled.div`
@@ -25,7 +25,7 @@ const FilterContainer = styled.div`
 `;
 
 const DROPDOWN_OPTIONS = [
-  { value: 'All', id: 'all' },
+  { value: 'All types', id: 'all' },
   { value: 'Managed', id: 'managed' },
   { value: 'Self-hosted', id: 'self hosted' },
 ];
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index 79dab2b4e..ae32bfb44 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -33,7 +33,7 @@ export function ChooseDestinationModalBody({
   const [selectedMonitors, setSelectedMonitors] = useState<string[]>([]);
   const [dropdownValue, setDropdownValue] = useState<DropdownOption>({
     id: 'all',
-    value: 'All',
+    value: 'All types',
   });
 
   function handleTagSelect(option: DropdownOption) {
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 65a578524..725049875 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { AddDestinationButton, SetupHeader } from '@/components';
+import { useRouter } from 'next/navigation';
 import { SectionTitle } from '@/reuseable-components';
 import { AddDestinationModal } from './add-destination-modal';
-import { useRouter } from 'next/navigation';
+import { AddDestinationButton, SetupHeader } from '@/components';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
@@ -39,7 +39,6 @@ export function ChooseDestinationContainer() {
             },
             {
               label: 'DONE',
-              // iconSrc: '/icons/common/arrow-black.svg',
               onClick: () => console.log('Next button clicked'),
               variant: 'primary',
             },

From 45f5f6d961b41b1715f5416357bc60ab3fa09b8e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 8 Aug 2024 14:27:25 +0300
Subject: [PATCH 144/374] chore: wip

---
 .../destinations/monitors-tap-list/index.tsx       | 11 ++++++++---
 .../choose-destination-menu/index.tsx              | 14 ++++++++------
 .../connect-destination-modal-body/index.tsx       |  1 +
 .../main/destinations/add-destination/styled.ts    |  3 ++-
 frontend/webapp/public/icons/monitors/logs.svg     |  3 +++
 frontend/webapp/public/icons/monitors/metrics.svg  |  3 +++
 frontend/webapp/public/icons/monitors/traces.svg   |  3 +++
 .../webapp/reuseable-components/input/index.tsx    |  1 +
 .../webapp/reuseable-components/modal/index.tsx    |  1 -
 frontend/webapp/reuseable-components/tag/index.tsx | 11 +++++------
 .../webapp/reuseable-components/tooltip/index.tsx  | 13 +++++--------
 11 files changed, 39 insertions(+), 25 deletions(-)
 create mode 100644 frontend/webapp/public/icons/monitors/logs.svg
 create mode 100644 frontend/webapp/public/icons/monitors/metrics.svg
 create mode 100644 frontend/webapp/public/icons/monitors/traces.svg

diff --git a/frontend/webapp/components/destinations/monitors-tap-list/index.tsx b/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
index c1f288894..198ea3471 100644
--- a/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
+++ b/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Text, Tag } from '@/reuseable-components';
 import { MONITORS_OPTIONS } from '@/utils';
+import Image from 'next/image';
 
 interface MonitorButtonsProps {
   selectedMonitors: string[];
@@ -34,9 +35,13 @@ const MonitorsTapList: React.FC<MonitorButtonsProps> = ({
             isSelected={selectedMonitors.includes(monitor.id)}
             onClick={() => onMonitorSelect(monitor.id)}
           >
-            <Text size={12} color="rgba(249, 249, 249, 0.8)">
-              {monitor.value}
-            </Text>
+            <Image
+              src={`/icons/monitors/${monitor.id}.svg`}
+              alt="monitor"
+              width={16}
+              height={16}
+            />
+            <Text size={14}>{monitor.value}</Text>
           </Tag>
         ))}
       </MonitorButtonsContainer>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
index 76fecd5c9..ecf42141e 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
@@ -48,12 +48,14 @@ const DestinationFilterComponent: React.FC<FilterComponentProps> = ({
   return (
     <FilterContainer>
       <InputAndDropdownContainer>
-        <Input
-          placeholder="Search..."
-          icon="/icons/common/search.svg"
-          value={searchTerm}
-          onChange={handleSearchChange}
-        />
+        <div>
+          <Input
+            placeholder="Search..."
+            icon="/icons/common/search.svg"
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+        </div>
         <Dropdown
           options={DROPDOWN_OPTIONS}
           selectedOption={selectedTag}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index dae60964a..965fc9de2 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -35,6 +35,7 @@ const SIDE_MENU_DATA: StepProps[] = [
 const FormContainer = styled.div`
   display: flex;
   width: 100%;
+  max-width: 500px;
   flex-direction: column;
   gap: 24px;
 `;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/styled.ts b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
index 6588c8936..5b614e091 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/styled.ts
+++ b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
@@ -4,7 +4,7 @@ export const Body = styled.div`
   padding: 32px 32px 0;
   border-left: 1px solid rgba(249, 249, 249, 0.08);
   min-height: 600px;
-  width: 692px;
+  width: 100%;
 `;
 
 export const SideMenuWrapper = styled.div`
@@ -14,4 +14,5 @@ export const SideMenuWrapper = styled.div`
 
 export const Container = styled.div`
   display: flex;
+  width: 1091px;
 `;
diff --git a/frontend/webapp/public/icons/monitors/logs.svg b/frontend/webapp/public/icons/monitors/logs.svg
new file mode 100644
index 000000000..b6e15eafe
--- /dev/null
+++ b/frontend/webapp/public/icons/monitors/logs.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M2.66699 8.5H6.66699M2.66699 12.5H6.66699M2.66699 4.5L13.3337 4.5M12.4765 12.0146C13.0334 11.61 13.5322 11.1357 13.96 10.6043C14.0138 10.5375 14.0138 10.4441 13.96 10.3773C13.5322 9.84585 13.0334 9.37156 12.4765 8.96696M10.1908 8.96696C9.63389 9.37156 9.13508 9.84585 8.7073 10.3773C8.65356 10.4441 8.65356 10.5375 8.7073 10.6043C9.13508 11.1357 9.63389 11.61 10.1908 12.0146" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/monitors/metrics.svg b/frontend/webapp/public/icons/monitors/metrics.svg
new file mode 100644
index 000000000..8ca883925
--- /dev/null
+++ b/frontend/webapp/public/icons/monitors/metrics.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M13.2389 9.1672C13.2389 12.4305 10.5935 15.0758 7.33025 15.0758V14.3373M13.2389 9.1672H14.0883C14.0883 5.43485 11.0626 2.40918 7.33025 2.40918V4.73571M13.2389 9.1672L7.33025 9.1672M7.33025 14.3373C4.47491 14.3373 2.16016 12.0225 2.16016 9.1672H2.89877M7.33025 14.3373L7.33025 9.1672M2.89877 9.1672C2.89877 6.71975 4.88281 4.73571 7.33025 4.73571M2.89877 9.1672H7.33025M7.33025 4.73571L7.33025 9.1672" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/monitors/traces.svg b/frontend/webapp/public/icons/monitors/traces.svg
new file mode 100644
index 000000000..ff6d822d8
--- /dev/null
+++ b/frontend/webapp/public/icons/monitors/traces.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M10.3337 8.5C10.3337 9.60457 11.2291 10.5 12.3337 10.5C13.4382 10.5 14.3337 9.60457 14.3337 8.5C14.3337 7.39543 13.4382 6.5 12.3337 6.5C11.2291 6.5 10.3337 7.39543 10.3337 8.5ZM10.3337 8.5L8.00032 8.5M8.00032 8.5L8.00032 9.3C8.00032 10.4201 8.00032 10.9802 7.78234 11.408C7.59059 11.7843 7.28463 12.0903 6.90831 12.282C6.60852 12.4348 6.24381 12.4805 5.66698 12.4942M8.00032 8.5L8.00032 7.7C8.00032 6.57989 8.00032 6.01984 7.78234 5.59202C7.59059 5.21569 7.28463 4.90973 6.90831 4.71799C6.60852 4.56524 6.24381 4.51952 5.66698 4.50584M5.66698 12.4942C5.66383 11.3923 4.76961 10.5 3.66699 10.5C2.56242 10.5 1.66699 11.3954 1.66699 12.5C1.66699 13.6046 2.56242 14.5 3.66699 14.5C4.77156 14.5 5.66699 13.6046 5.66699 12.5C5.66699 12.4981 5.66699 12.4961 5.66698 12.4942ZM5.66698 4.50584C5.66383 5.60773 4.76961 6.5 3.66699 6.5C2.56242 6.5 1.66699 5.60457 1.66699 4.5C1.66699 3.39543 2.56242 2.5 3.66699 2.5C4.77156 2.5 5.66699 3.39543 5.66699 4.5C5.66699 4.50195 5.66699 4.5039 5.66698 4.50584Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 7a908ea96..05e674ede 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -160,6 +160,7 @@ const Input: React.FC<InputProps> = ({
                 alt=""
                 width={16}
                 height={16}
+                style={{ marginBottom: 4 }}
               />
             )}
           </HeaderWrapper>
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index 7404ee698..ecb23a84f 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -33,7 +33,6 @@ const ModalWrapper = styled.div`
   background: ${({ theme }) => theme.colors.translucent_bg};
   border-radius: 40px;
   border: ${({ theme }) => `1px solid ${theme.colors.border}`};
-  width: 1080px;
   box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8),
     0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),
     0px 10px 10px 0px rgba(17, 17, 17, 0.8),
diff --git a/frontend/webapp/reuseable-components/tag/index.tsx b/frontend/webapp/reuseable-components/tag/index.tsx
index 4e0e32dd2..235d14469 100644
--- a/frontend/webapp/reuseable-components/tag/index.tsx
+++ b/frontend/webapp/reuseable-components/tag/index.tsx
@@ -13,8 +13,10 @@ const TagContainer = styled.div<{ isSelected: boolean; isDisabled: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8px 12px;
-  border-radius: 16px;
+  height: 36px;
+  gap: 6px;
+  padding: 0 12px;
+  border-radius: 32px;
   background-color: ${({ theme, isSelected }) =>
     isSelected ? theme.colors.primary : theme.colors.translucent_bg};
   cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
@@ -25,10 +27,7 @@ const TagContainer = styled.div<{ isSelected: boolean; isDisabled: boolean }>`
     !isDisabled &&
     css`
       &:hover {
-        background-color: ${theme.colors.secondary};
-        div {
-          color: ${theme.colors.primary};
-        }
+        background-color: ${theme.colors.primary};
       }
     `}
 `;
diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx
index 111e8bcb7..4c222c413 100644
--- a/frontend/webapp/reuseable-components/tooltip/index.tsx
+++ b/frontend/webapp/reuseable-components/tooltip/index.tsx
@@ -11,16 +11,17 @@ const TooltipContainer = styled.div`
   position: relative;
   display: inline-block;
   width: fit-content;
+
   cursor: pointer;
 `;
 
 const TooltipText = styled.div`
   visibility: hidden;
   background-color: ${({ theme }) => theme.colors.dark_grey};
-  background: #1a1a1a;
-  color: #fff;
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  color: ${({ theme }) => theme.text.primary};
   text-align: center;
-  border-radius: 4px;
+  border-radius: 32px;
   padding: 8px;
   position: absolute;
   z-index: 1;
@@ -38,10 +39,6 @@ const TooltipText = styled.div`
     z-index: 99999;
     top: 100%; /* At the bottom of the tooltip */
     left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #1a1a1a transparent transparent transparent;
   }
 `;
 
@@ -66,7 +63,7 @@ const Tooltip: React.FC<TooltipProps> = ({ text, children }) => {
         {children}
         {hasText && (
           <TooltipText>
-            <Text>{text}</Text>
+            <Text size={14}>{text}</Text>
           </TooltipText>
         )}
       </TooltipWrapper>

From d9a8420618985fc0e2bf48207c88b137fa8b7a5e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 8 Aug 2024 15:48:11 +0300
Subject: [PATCH 145/374] chore: wip

---
 .../connect-destination-modal-body/index.tsx  | 54 +++++++++++--------
 .../dynamic-form-fields/index.tsx             |  2 +-
 .../checkbox-list/index.tsx                   | 47 +++++++---------
 3 files changed, 51 insertions(+), 52 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 965fc9de2..304fb3fb8 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -19,6 +19,7 @@ import { useQuery } from '@apollo/client';
 import styled from 'styled-components';
 import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
 import { useConnectDestinationForm } from '@/hooks';
+
 const SIDE_MENU_DATA: StepProps[] = [
   {
     title: 'DESTINATIONS',
@@ -54,7 +55,7 @@ export function ConnectDestinationModalBody({
       skip: !destination,
     }
   );
-  const [checkedState, setCheckedState] = useState<boolean[]>([]);
+  const [exportedSignals, setExportedSignals] = useState({});
   const [destinationName, setDestinationName] = useState<string>('');
   const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
   const [formData, setFormData] = useState<Record<string, any>>({});
@@ -64,32 +65,23 @@ export function ConnectDestinationModalBody({
     if (!destination) return [];
 
     const { logs, metrics, traces } = destination.supportedSignals;
+
+    setExportedSignals({
+      logs: logs.supported,
+      metrics: metrics.supported,
+      traces: traces.supported,
+    });
+
     return [
-      logs.supported && {
-        id: 'logs',
-        title: 'Logs',
-      },
-      metrics.supported && {
-        id: 'metrics',
-        title: 'Metrics',
-      },
-      traces.supported && {
-        id: 'traces',
-        title: 'Traces',
-      },
+      logs.supported && { id: 'logs', title: 'Logs' },
+      metrics.supported && { id: 'metrics', title: 'Metrics' },
+      traces.supported && { id: 'traces', title: 'Traces' },
     ].filter(Boolean);
   }, [destination]);
 
   useEffect(() => {
-    data && console.log({ destination, data });
-
     if (data) {
       const df = buildFormDynamicFields(data.destinationTypeDetails.fields);
-      console.log(
-        'is missing fileds',
-        df.length !== data.destinationTypeDetails.fields.length
-      );
-      console.log({ df });
       setDynamicFields(df);
     }
   }, [data]);
@@ -98,8 +90,24 @@ export function ConnectDestinationModalBody({
     setFormData((prev) => ({ ...prev, [name]: value }));
   }
 
+  function handleSignalChange(signal: string, value: boolean) {
+    setExportedSignals((prev) => ({ ...prev, [signal]: value }));
+  }
+
   function handleSubmit() {
-    console.log({ formData });
+    const fields = Object.entries(formData).map(([name, value]) => ({
+      key: name,
+      value,
+    }));
+
+    const body = {
+      name: destinationName,
+      type: destination?.type,
+      exportedSignals,
+      fields,
+    };
+
+    console.log({ body });
   }
 
   if (!destination) return null;
@@ -120,10 +128,10 @@ export function ConnectDestinationModalBody({
         <Divider margin="24px 0" />
         <FormContainer>
           <CheckboxList
-            checkedState={checkedState}
-            setCheckedState={setCheckedState}
             monitors={monitors as []}
             title="This connection will monitor:"
+            exportedSignals={exportedSignals}
+            handleSignalChange={handleSignalChange}
           />
           <Input
             title="Destination name"
diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
index 6b955f2de..196767bcf 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -17,7 +17,7 @@ export function DynamicConnectDestinationFormFields({
           <Input
             key={field.name}
             {...field}
-            onChange={(value) => onChange(field.name, value)}
+            onChange={(e) => onChange(field.name, e.target.value)}
           />
         );
 
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index 3888efa9b..c84594284 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
+import { Text } from '../text';
 import styled from 'styled-components';
 import { Checkbox } from '../checkbox';
-import { Text } from '../text';
 
 interface Monitor {
   id: string;
@@ -12,8 +12,8 @@ interface Monitor {
 interface CheckboxListProps {
   monitors: Monitor[];
   title?: string;
-  checkedState?: boolean[];
-  setCheckedState: (checkedState: boolean[]) => void;
+  exportedSignals: { [key: string]: boolean };
+  handleSignalChange: (signal: string, value: boolean) => void;
 }
 
 const ListContainer = styled.div`
@@ -28,25 +28,19 @@ const TextWrapper = styled.div`
 const CheckboxList: React.FC<CheckboxListProps> = ({
   monitors,
   title,
-  checkedState = [],
-  setCheckedState,
+  exportedSignals,
+  handleSignalChange,
 }) => {
-  useEffect(() => {
-    // Initialize the checked state with all true if no initial values provided
-    setCheckedState(Array(monitors.length).fill(true));
-  }, [monitors.length]);
-
-  const handleCheckboxChange = (index: number, value: boolean) => {
-    const newCheckedState = [...checkedState];
-    newCheckedState[index] = value;
-
-    // Ensure at least one checkbox remains checked
-    if (newCheckedState.filter((checked) => checked).length === 0) {
-      return;
-    }
+  function isItemDisabled(item: Monitor) {
+    const selectedItems = Object.values(exportedSignals).filter(
+      (value) => value
+    );
 
-    setCheckedState(newCheckedState);
-  };
+    return (
+      monitors.length === 1 ||
+      (selectedItems.length === 1 && exportedSignals[item.id])
+    );
+  }
 
   return (
     <div>
@@ -58,16 +52,13 @@ const CheckboxList: React.FC<CheckboxListProps> = ({
         </TextWrapper>
       )}
       <ListContainer>
-        {monitors.map((monitor, index) => (
+        {monitors.map((monitor) => (
           <Checkbox
             key={monitor.id}
             title={monitor.title}
-            initialValue={checkedState[index]}
-            onChange={(value) => handleCheckboxChange(index, value)}
-            disabled={
-              checkedState.filter((checked) => checked).length === 1 &&
-              checkedState[index]
-            }
+            initialValue={exportedSignals[monitor.id]}
+            onChange={(value) => handleSignalChange(monitor.id, value)}
+            disabled={isItemDisabled(monitor)}
           />
         ))}
       </ListContainer>

From 80fb9a6d35714dba08523bcd88aa235d9ceddb01 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 8 Aug 2024 16:20:00 +0300
Subject: [PATCH 146/374] chore: create destination mutation

---
 .../connect-destination-modal-body/index.tsx  | 17 ++++++++++----
 frontend/webapp/graphql/index.ts              |  1 +
 .../destinations/useConnectDestinationForm.ts | 23 +++++++++++++++++--
 .../checkbox-list/index.tsx                   |  3 ++-
 frontend/webapp/types/destinations.ts         | 13 +++++++++++
 5 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 304fb3fb8..43d87c125 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,8 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   DestinationDetailsResponse,
+  DestinationInput,
   DestinationTypeItem,
   DynamicField,
+  ExportedSignals,
   StepProps,
 } from '@/types';
 import { SideMenu } from '@/components';
@@ -55,11 +57,16 @@ export function ConnectDestinationModalBody({
       skip: !destination,
     }
   );
-  const [exportedSignals, setExportedSignals] = useState({});
+  const [exportedSignals, setExportedSignals] = useState<ExportedSignals>({
+    logs: false,
+    metrics: false,
+    traces: false,
+  });
   const [destinationName, setDestinationName] = useState<string>('');
   const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
   const [formData, setFormData] = useState<Record<string, any>>({});
-  const { buildFormDynamicFields } = useConnectDestinationForm();
+  const { buildFormDynamicFields, createNewDestination } =
+    useConnectDestinationForm();
 
   const monitors = useMemo(() => {
     if (!destination) return [];
@@ -100,13 +107,15 @@ export function ConnectDestinationModalBody({
       value,
     }));
 
-    const body = {
+    const body: DestinationInput = {
       name: destinationName,
-      type: destination?.type,
+      type: destination?.type || '',
       exportedSignals,
       fields,
     };
 
+    createNewDestination(body);
+
     console.log({ body });
   }
 
diff --git a/frontend/webapp/graphql/index.ts b/frontend/webapp/graphql/index.ts
index 3cf1ef310..d0720956a 100644
--- a/frontend/webapp/graphql/index.ts
+++ b/frontend/webapp/graphql/index.ts
@@ -1 +1,2 @@
 export * from './queries';
+export * from './mutations';
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index aa1c71fca..6e9b2a2f9 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -1,7 +1,14 @@
 import { safeJsonParse } from '@/utils';
-import { DestinationDetailsField, DynamicField } from '@/types';
+import {
+  DestinationDetailsField,
+  DestinationInput,
+  DynamicField,
+} from '@/types';
+import { CREATE_DESTINATION } from '@/graphql';
+import { useMutation } from '@apollo/client';
 
 export function useConnectDestinationForm() {
+  const [createDestination] = useMutation(CREATE_DESTINATION);
   function buildFormDynamicFields(
     fields: DestinationDetailsField[]
   ): DynamicField[] {
@@ -61,5 +68,17 @@ export function useConnectDestinationForm() {
       .filter((field): field is DynamicField => field !== undefined);
   }
 
-  return { buildFormDynamicFields };
+  async function createNewDestination(destination: DestinationInput) {
+    try {
+      const { data } = await createDestination({
+        variables: { destination },
+      });
+      return data?.createNewDestination?.id;
+    } catch (error) {
+      console.error('Error creating new destination:', error);
+      throw error;
+    }
+  }
+
+  return { buildFormDynamicFields, createNewDestination };
 }
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index c84594284..47e8f2e17 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Text } from '../text';
 import styled from 'styled-components';
 import { Checkbox } from '../checkbox';
+import { ExportedSignals } from '@/types';
 
 interface Monitor {
   id: string;
@@ -12,7 +13,7 @@ interface Monitor {
 interface CheckboxListProps {
   monitors: Monitor[];
   title?: string;
-  exportedSignals: { [key: string]: boolean };
+  exportedSignals: ExportedSignals;
   handleSignalChange: (signal: string, value: boolean) => void;
 }
 
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 91cc52649..80bcfb7e0 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -48,6 +48,19 @@ export interface DestinationDetailsResponse {
   };
 }
 
+export interface ExportedSignals {
+  logs: boolean;
+  metrics: boolean;
+  traces: boolean;
+}
+
+export interface DestinationInput {
+  name: string;
+  type: string;
+  exportedSignals: ExportedSignals;
+  fields: { key: string; value: any }[];
+}
+
 export interface DestinationType {
   fields: any;
   display_name: string;

From b86f51d10d7ad06a8c897612ed654f2707806683 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 12 Aug 2024 16:33:37 +0300
Subject: [PATCH 147/374] chore: wip

---
 frontend/webapp/graphql/mutations/index.ts    |  2 +
 .../compute-platform/useConnectSources.ts     | 53 +++++++++++++++++++
 .../hooks/compute-platform/useNamespace.ts    | 24 +++++++--
 frontend/webapp/types/index.ts                |  1 +
 frontend/webapp/types/namespace.ts            |  4 ++
 5 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 frontend/webapp/hooks/compute-platform/useConnectSources.ts
 create mode 100644 frontend/webapp/types/namespace.ts

diff --git a/frontend/webapp/graphql/mutations/index.ts b/frontend/webapp/graphql/mutations/index.ts
index cb9273dc8..77b8f63f9 100644
--- a/frontend/webapp/graphql/mutations/index.ts
+++ b/frontend/webapp/graphql/mutations/index.ts
@@ -1 +1,3 @@
 export * from './destination';
+export * from './source';
+export * from './namespace';
diff --git a/frontend/webapp/hooks/compute-platform/useConnectSources.ts b/frontend/webapp/hooks/compute-platform/useConnectSources.ts
new file mode 100644
index 000000000..67a3cad2d
--- /dev/null
+++ b/frontend/webapp/hooks/compute-platform/useConnectSources.ts
@@ -0,0 +1,53 @@
+// hooks/useConnectSources.ts
+import { useMutation } from '@apollo/client';
+import { useSelector, useDispatch } from 'react-redux';
+import { CREATE_SOURCE } from '@/graphql';
+import { IAppState, setSources } from '@/store';
+import { K8sActualSource } from '@/types';
+import { useComputePlatform } from './useComputePlatform';
+
+type UseConnectSourcesHook = {
+  createSources: (
+    namespace: string,
+    sources: K8sActualSource[]
+  ) => Promise<void>;
+  loading: boolean;
+  error?: Error;
+};
+
+export const useConnectSources = (): UseConnectSourcesHook => {
+  const [persistSourcesMutation, { loading, error }] =
+    useMutation(CREATE_SOURCE);
+  const dispatch = useDispatch();
+  const sources = useSelector(({ app }: { app: IAppState }) => app.sources);
+  const { data } = useComputePlatform();
+
+  const createSources = async (namespace: string) => {
+    try {
+      let formattedSources = [];
+      Object.keys(sources).forEach((key) => {
+        const newSources = {
+          sources: sources[key].map((source) => ({
+            name: source.name,
+            kind: source.kind,
+            selected: source.selected,
+          })),
+        };
+
+        formattedSources.push(newSources);
+      });
+      await persistSourcesMutation({
+        variables: { namespace, sources: formattedSources },
+      });
+    } catch (e) {
+      console.error('Error creating sources:', e);
+      throw e;
+    }
+  };
+
+  return {
+    createSources,
+    loading,
+    error,
+  };
+};
diff --git a/frontend/webapp/hooks/compute-platform/useNamespace.ts b/frontend/webapp/hooks/compute-platform/useNamespace.ts
index f8a3cf818..5f9263b58 100644
--- a/frontend/webapp/hooks/compute-platform/useNamespace.ts
+++ b/frontend/webapp/hooks/compute-platform/useNamespace.ts
@@ -1,11 +1,16 @@
-import { useQuery } from '@apollo/client';
-import { GET_NAMESPACES } from '@/graphql';
-import { ComputePlatform, K8sActualNamespace } from '@/types';
+import { useMutation, useQuery } from '@apollo/client';
+import { GET_NAMESPACES, PERSIST_NAMESPACE } from '@/graphql';
+import {
+  ComputePlatform,
+  K8sActualNamespace,
+  PersistNamespaceItemInput,
+} from '@/types';
 
 type UseNamespaceHook = {
   data?: K8sActualNamespace;
   loading: boolean;
   error?: Error;
+  persistNamespace: (namespace: PersistNamespaceItemInput) => Promise<void>;
 };
 
 export const useNamespace = (
@@ -17,7 +22,20 @@ export const useNamespace = (
     fetchPolicy: 'cache-first',
   });
 
+  const [persistNamespaceMutation] = useMutation(PERSIST_NAMESPACE);
+
+  const persistNamespace = async (namespace: PersistNamespaceItemInput) => {
+    try {
+      await persistNamespaceMutation({
+        variables: { namespace },
+      });
+    } catch (e) {
+      console.error('Error persisting namespace:', e);
+    }
+  };
+
   return {
+    persistNamespace,
     data: data?.computePlatform.k8sActualNamespace,
     loading,
     error,
diff --git a/frontend/webapp/types/index.ts b/frontend/webapp/types/index.ts
index 1f91e3d5b..a19ce702c 100644
--- a/frontend/webapp/types/index.ts
+++ b/frontend/webapp/types/index.ts
@@ -4,3 +4,4 @@ export * from './actions';
 export * from './sources';
 export * from './common';
 export * from './compute-platform';
+export * from './namespace';
diff --git a/frontend/webapp/types/namespace.ts b/frontend/webapp/types/namespace.ts
new file mode 100644
index 000000000..765bdf783
--- /dev/null
+++ b/frontend/webapp/types/namespace.ts
@@ -0,0 +1,4 @@
+export interface PersistNamespaceItemInput {
+  name: string;
+  futureSelected: boolean;
+}

From 0469b22de1cbc2ced9ce4e8d19eb9714686801a5 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 15 Aug 2024 13:41:39 +0300
Subject: [PATCH 148/374] chore: testing setup apis

---
 .../connect-destination-modal-body/index.tsx  |  13 +-
 .../main/sources/choose-sources/index.tsx     |   1 +
 frontend/webapp/hooks/destinations/index.ts   |   1 +
 .../destinations/useConnectDestinationForm.ts |  23 +---
 .../destinations/useCreateDestination.ts      |  21 ++++
 frontend/webapp/hooks/setup/index.ts          |   1 +
 frontend/webapp/hooks/setup/useConnectEnv.ts  | 113 ++++++++++++++++++
 frontend/webapp/hooks/sources/index.ts        |   1 +
 .../webapp/hooks/sources/useCreateSources.ts  |  46 +++++++
 9 files changed, 191 insertions(+), 29 deletions(-)
 create mode 100644 frontend/webapp/hooks/destinations/useCreateDestination.ts
 create mode 100644 frontend/webapp/hooks/setup/useConnectEnv.ts
 create mode 100644 frontend/webapp/hooks/sources/useCreateSources.ts

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 43d87c125..7a4bfec2a 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -20,7 +20,7 @@ import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { useQuery } from '@apollo/client';
 import styled from 'styled-components';
 import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
-import { useConnectDestinationForm } from '@/hooks';
+import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -65,8 +65,8 @@ export function ConnectDestinationModalBody({
   const [destinationName, setDestinationName] = useState<string>('');
   const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
   const [formData, setFormData] = useState<Record<string, any>>({});
-  const { buildFormDynamicFields, createNewDestination } =
-    useConnectDestinationForm();
+  const { buildFormDynamicFields } = useConnectDestinationForm();
+  const { connectEnv, result, loading, error } = useConnectEnv();
 
   const monitors = useMemo(() => {
     if (!destination) return [];
@@ -101,7 +101,7 @@ export function ConnectDestinationModalBody({
     setExportedSignals((prev) => ({ ...prev, [signal]: value }));
   }
 
-  function handleSubmit() {
+  async function handleSubmit() {
     const fields = Object.entries(formData).map(([name, value]) => ({
       key: name,
       value,
@@ -113,10 +113,7 @@ export function ConnectDestinationModalBody({
       exportedSignals,
       fields,
     };
-
-    createNewDestination(body);
-
-    console.log({ body });
+    await connectEnv(body);
   }
 
   if (!destination) return null;
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index 84d85d18d..d782ec1f8 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -61,6 +61,7 @@ export function ChooseSourcesContainer() {
       dispatch(setSources(selectedItems));
       dispatch(setNamespaceFutureSelectAppsList(futureAppsCheckbox));
     }
+    console.log({ selectedOption, selectedItems, futureAppsCheckbox });
     router.push('/setup/choose-destination');
   }
 
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index fdf8dc796..ec9bba927 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -1,3 +1,4 @@
 export * from './useDestinations';
 export * from './useCheckConnection';
 export * from './useConnectDestinationForm';
+export * from './useCreateDestination';
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index 6e9b2a2f9..aa1c71fca 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -1,14 +1,7 @@
 import { safeJsonParse } from '@/utils';
-import {
-  DestinationDetailsField,
-  DestinationInput,
-  DynamicField,
-} from '@/types';
-import { CREATE_DESTINATION } from '@/graphql';
-import { useMutation } from '@apollo/client';
+import { DestinationDetailsField, DynamicField } from '@/types';
 
 export function useConnectDestinationForm() {
-  const [createDestination] = useMutation(CREATE_DESTINATION);
   function buildFormDynamicFields(
     fields: DestinationDetailsField[]
   ): DynamicField[] {
@@ -68,17 +61,5 @@ export function useConnectDestinationForm() {
       .filter((field): field is DynamicField => field !== undefined);
   }
 
-  async function createNewDestination(destination: DestinationInput) {
-    try {
-      const { data } = await createDestination({
-        variables: { destination },
-      });
-      return data?.createNewDestination?.id;
-    } catch (error) {
-      console.error('Error creating new destination:', error);
-      throw error;
-    }
-  }
-
-  return { buildFormDynamicFields, createNewDestination };
+  return { buildFormDynamicFields };
 }
diff --git a/frontend/webapp/hooks/destinations/useCreateDestination.ts b/frontend/webapp/hooks/destinations/useCreateDestination.ts
new file mode 100644
index 000000000..95b9186fa
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useCreateDestination.ts
@@ -0,0 +1,21 @@
+import { DestinationInput } from '@/types';
+import { CREATE_DESTINATION } from '@/graphql';
+import { useMutation } from '@apollo/client';
+
+export function useCreateDestination() {
+  const [createDestination] = useMutation(CREATE_DESTINATION);
+
+  async function createNewDestination(destination: DestinationInput) {
+    try {
+      const { data } = await createDestination({
+        variables: { destination },
+      });
+      return data?.createNewDestination?.id;
+    } catch (error) {
+      console.error('Error creating new destination:', error);
+      throw error;
+    }
+  }
+
+  return { createNewDestination };
+}
diff --git a/frontend/webapp/hooks/setup/index.ts b/frontend/webapp/hooks/setup/index.ts
index 8241525c2..31100a828 100644
--- a/frontend/webapp/hooks/setup/index.ts
+++ b/frontend/webapp/hooks/setup/index.ts
@@ -1 +1,2 @@
 export * from './useConnect';
+export * from './useConnectEnv';
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
new file mode 100644
index 000000000..0973d0591
--- /dev/null
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -0,0 +1,113 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useCreateSource } from '../sources';
+import { useCreateDestination } from '../destinations';
+
+import {
+  K8sActualSource,
+  DestinationInput,
+  PersistNamespaceItemInput,
+} from '@/types';
+import { useSelector } from 'react-redux';
+import { useNamespace } from '../compute-platform';
+import { IAppState } from '@/store';
+
+type ConnectEnvResult = {
+  success: boolean;
+  destinationId?: string;
+};
+
+export const useConnectEnv = () => {
+  const {
+    createSource,
+    success: sourceSuccess,
+    loading: sourceLoading,
+    error: sourceError,
+  } = useCreateSource();
+  const { createNewDestination } = useCreateDestination();
+  const { persistNamespace } = useNamespace(undefined);
+
+  const [result, setResult] = useState<ConnectEnvResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Getting data from Redux
+  const sourcesList = useSelector(({ app }: { app: IAppState }) => app.sources);
+  const namespaceFutureSelectAppsList = useSelector(
+    ({ app }: { app: IAppState }) => app.namespaceFutureSelectAppsList
+  );
+
+  useEffect(() => {
+    console.log({ sourcesList, namespaceFutureSelectAppsList });
+  }, [namespaceFutureSelectAppsList, sourcesList]);
+
+  const connectEnv = useCallback(
+    async (destination: DestinationInput) => {
+      setLoading(true);
+      setError(null);
+      setResult(null);
+
+      try {
+        // Persist namespaces based on namespaceFutureSelectAppsList
+        for (const namespaceName in namespaceFutureSelectAppsList) {
+          const futureSelected = namespaceFutureSelectAppsList[namespaceName];
+
+          const namespace: PersistNamespaceItemInput = {
+            name: namespaceName,
+            futureSelected,
+          };
+
+          await persistNamespace(namespace);
+        }
+
+        // Create sources for each namespace in sourcesList
+        for (const namespaceName in sourcesList) {
+          const sources = sourcesList[namespaceName].map((source) => ({
+            ...source,
+            selected: true,
+          }));
+          await createSource(namespaceName, sources);
+
+          if (sourceError) {
+            throw new Error(
+              `Error creating sources for namespace: ${namespaceName}`
+            );
+          }
+        }
+
+        // Create destination
+        const destinationId = await createNewDestination(destination);
+
+        if (!destinationId) {
+          throw new Error('Error creating destination.');
+        }
+
+        setResult({
+          success: true,
+          destinationId,
+        });
+      } catch (err) {
+        setError((err as Error).message);
+        setResult({
+          success: false,
+        });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [
+      createSource,
+      createNewDestination,
+      persistNamespace,
+      sourceError,
+      sourcesList,
+      namespaceFutureSelectAppsList,
+    ]
+  );
+
+  return {
+    connectEnv,
+    result,
+    loading,
+    error,
+  };
+};
diff --git a/frontend/webapp/hooks/sources/index.ts b/frontend/webapp/hooks/sources/index.ts
index fa6665c03..465944209 100644
--- a/frontend/webapp/hooks/sources/index.ts
+++ b/frontend/webapp/hooks/sources/index.ts
@@ -1,3 +1,4 @@
 export * from './useSources';
 export * from './useConnectSourcesMenuState';
 export * from './useConnectSourcesList';
+export * from './useCreateSources';
diff --git a/frontend/webapp/hooks/sources/useCreateSources.ts b/frontend/webapp/hooks/sources/useCreateSources.ts
new file mode 100644
index 000000000..10d91b79b
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useCreateSources.ts
@@ -0,0 +1,46 @@
+import { CREATE_SOURCE } from '@/graphql';
+import { K8sActualSource } from '@/types';
+import { useMutation } from '@apollo/client';
+import { useState } from 'react';
+
+type CreateSourceResponse = {
+  persistK8sSources: boolean;
+};
+
+type CreateSourceVariables = {
+  namespace: string;
+  sources: K8sActualSource[];
+};
+
+export const useCreateSource = () => {
+  const [createSourceMutation, { data, loading, error }] = useMutation<
+    CreateSourceResponse,
+    CreateSourceVariables
+  >(CREATE_SOURCE);
+
+  const [success, setSuccess] = useState<boolean | null>(null);
+
+  const createSource = async (
+    namespace: string,
+    sources: K8sActualSource[]
+  ) => {
+    try {
+      const result = await createSourceMutation({
+        variables: {
+          namespace,
+          sources,
+        },
+      });
+      setSuccess(result.data?.persistK8sSources ?? false);
+    } catch (err) {
+      setSuccess(false);
+    }
+  };
+
+  return {
+    createSource,
+    success,
+    loading,
+    error,
+  };
+};

From 96a3df78416045789b8a5354104835b7ac9737f4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 15 Aug 2024 13:52:23 +0300
Subject: [PATCH 149/374] chore: wip

---
 frontend/webapp/hooks/setup/useConnectEnv.ts      |  3 ++-
 frontend/webapp/hooks/sources/useCreateSources.ts | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 0973d0591..0d037e67c 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -62,7 +62,8 @@ export const useConnectEnv = () => {
         // Create sources for each namespace in sourcesList
         for (const namespaceName in sourcesList) {
           const sources = sourcesList[namespaceName].map((source) => ({
-            ...source,
+            kind: source.kind,
+            name: source.name,
             selected: true,
           }));
           await createSource(namespaceName, sources);
diff --git a/frontend/webapp/hooks/sources/useCreateSources.ts b/frontend/webapp/hooks/sources/useCreateSources.ts
index 10d91b79b..da75460ae 100644
--- a/frontend/webapp/hooks/sources/useCreateSources.ts
+++ b/frontend/webapp/hooks/sources/useCreateSources.ts
@@ -7,9 +7,15 @@ type CreateSourceResponse = {
   persistK8sSources: boolean;
 };
 
+type CreateSourcesArray = {
+  kind: string;
+  name: string;
+  selected: boolean;
+};
+
 type CreateSourceVariables = {
   namespace: string;
-  sources: K8sActualSource[];
+  sources: CreateSourcesArray[];
 };
 
 export const useCreateSource = () => {
@@ -22,7 +28,7 @@ export const useCreateSource = () => {
 
   const createSource = async (
     namespace: string,
-    sources: K8sActualSource[]
+    sources: CreateSourcesArray[]
   ) => {
     try {
       const result = await createSourceMutation({

From 35c2d73fb60149a331687722909cbc1bc954f677 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 15 Aug 2024 14:39:33 +0300
Subject: [PATCH 150/374] chore: wip

---
 frontend/webapp/app/(overview)/overview/page.tsx  | 15 ++++++++++++++-
 .../webapp/graphql/queries/compute-platform.ts    |  5 +++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/app/(overview)/overview/page.tsx b/frontend/webapp/app/(overview)/overview/page.tsx
index 06ba59a7a..633ecad9e 100644
--- a/frontend/webapp/app/(overview)/overview/page.tsx
+++ b/frontend/webapp/app/(overview)/overview/page.tsx
@@ -1,10 +1,23 @@
 'use client';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { OVERVIEW } from '@/utils';
 import { OverviewHeader } from '@/components';
 import { DataFlowContainer } from '@/containers';
+import { useQuery } from '@apollo/client';
+import { GET_COMPUTE_PLATFORM } from '@/graphql';
 
 export default function OverviewPage() {
+  const { data, loading, error } = useQuery(GET_COMPUTE_PLATFORM);
+
+  useEffect(() => {
+    if (error) {
+      console.error(error);
+    }
+    if (data) {
+      console.log(data);
+    }
+  }, [error, data]);
+
   return (
     <>
       <OverviewHeader title={OVERVIEW.MENU.OVERVIEW} />
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 548549f8d..6879bbbf3 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -6,6 +6,11 @@ export const GET_COMPUTE_PLATFORM = gql`
       name
       k8sActualNamespaces {
         name
+        k8sActualSources {
+          kind
+          name
+          numberOfInstances
+        }
       }
     }
   }

From e65f6919e8e38d9f5208d2f767558d0467b17ac4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 15 Aug 2024 16:30:47 +0300
Subject: [PATCH 151/374] chore: wip

---
 frontend/graph/schema.resolvers.go | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 4c69ce864..feac02ebb 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -23,7 +23,10 @@ import (
 
 // K8sActualNamespace is the resolver for the k8sActualNamespace field.
 func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error) {
-	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, nil)
+
+	instrumentationLabelEnabled := true
+
+	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, &instrumentationLabelEnabled)
 	if err != nil {
 		return nil, err
 	}
@@ -189,8 +192,31 @@ func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlat
 
 	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
 	for i, namespace := range namespacesResponse.Namespaces {
+
+		instrumentationLabelEnabled := true
+
+		namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, namespace.Name, &instrumentationLabelEnabled)
+		if err != nil {
+			return nil, err
+		}
+
+		// Convert namespaceActualSources to []*model.K8sActualSource
+		namespaceActualSourcesPointers := make([]*model.K8sActualSource, len(namespaceActualSources))
+		for i, source := range namespaceActualSources {
+			namespaceActualSourcesPointers[i] = &source
+		}
+
+		namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, namespace.Name, metav1.GetOptions{})
+		if err != nil {
+			return nil, err
+		}
+
+		nsInstrumented := workload.GetInstrumentationLabelValue(namespace.GetLabels())
+
 		K8sActualNamespaces[i] = &model.K8sActualNamespace{
-			Name: namespace.Name,
+			Name:                        namespace.Name,
+			InstrumentationLabelEnabled: nsInstrumented,
+			K8sActualSources:            namespaceActualSourcesPointers,
 		}
 	}
 

From acf7bda9ee8f6d19ccf6080a3d730809fdcbbe53 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 15 Aug 2024 17:00:11 +0300
Subject: [PATCH 152/374] chore: wip

---
 frontend/graph/schema.resolvers.go            | 31 ++++++++-----------
 .../graphql/queries/compute-platform.ts       | 11 +++++--
 .../hooks/compute-platform/useNamespace.ts    |  5 +--
 frontend/webapp/hooks/setup/useConnectEnv.ts  | 11 +++----
 .../hooks/sources/useConnectSourcesList.ts    |  3 +-
 frontend/webapp/store/slices/app-slice.ts     |  8 ++++-
 6 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index feac02ebb..2106e1c71 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -24,9 +24,7 @@ import (
 // K8sActualNamespace is the resolver for the k8sActualNamespace field.
 func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error) {
 
-	instrumentationLabelEnabled := true
-
-	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, &instrumentationLabelEnabled)
+	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, nil)
 	if err != nil {
 		return nil, err
 	}
@@ -82,7 +80,18 @@ func (r *destinationResolver) Conditions(ctx context.Context, obj *model.Destina
 
 // K8sActualSources is the resolver for the k8sActualSources field.
 func (r *k8sActualNamespaceResolver) K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error) {
-	return obj.K8sActualSources, nil
+	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, obj.Name, instrumentationLabeled)
+	if err != nil {
+		return nil, err
+	}
+
+	// Convert namespaceActualSources to []*model.K8sActualSource
+	namespaceActualSourcesPointers := make([]*model.K8sActualSource, len(namespaceActualSources))
+	for i, source := range namespaceActualSources {
+		namespaceActualSourcesPointers[i] = &source
+	}
+
+	return namespaceActualSourcesPointers, nil
 }
 
 // CreateNewDestination is the resolver for the createNewDestination field.
@@ -193,19 +202,6 @@ func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlat
 	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
 	for i, namespace := range namespacesResponse.Namespaces {
 
-		instrumentationLabelEnabled := true
-
-		namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, namespace.Name, &instrumentationLabelEnabled)
-		if err != nil {
-			return nil, err
-		}
-
-		// Convert namespaceActualSources to []*model.K8sActualSource
-		namespaceActualSourcesPointers := make([]*model.K8sActualSource, len(namespaceActualSources))
-		for i, source := range namespaceActualSources {
-			namespaceActualSourcesPointers[i] = &source
-		}
-
 		namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, namespace.Name, metav1.GetOptions{})
 		if err != nil {
 			return nil, err
@@ -216,7 +212,6 @@ func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlat
 		K8sActualNamespaces[i] = &model.K8sActualNamespace{
 			Name:                        namespace.Name,
 			InstrumentationLabelEnabled: nsInstrumented,
-			K8sActualSources:            namespaceActualSourcesPointers,
 		}
 	}
 
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 6879bbbf3..5866e2ff1 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -17,16 +17,23 @@ export const GET_COMPUTE_PLATFORM = gql`
 `;
 
 export const GET_NAMESPACES = gql`
-  query GetK8sActualNamespace($namespaceName: String!) {
+  query GetK8sActualNamespace(
+    $namespaceName: String!
+    $instrumentationLabeled: Boolean
+  ) {
     computePlatform {
       k8sActualNamespace(name: $namespaceName) {
         name
-        k8sActualSources {
+        instrumentationLabelEnabled
+        k8sActualSources(instrumentationLabeled: $instrumentationLabeled) {
           kind
           name
           numberOfInstances
         }
       }
+      k8sActualSources {
+        name
+      }
     }
   }
 `;
diff --git a/frontend/webapp/hooks/compute-platform/useNamespace.ts b/frontend/webapp/hooks/compute-platform/useNamespace.ts
index 5f9263b58..ef83e1b97 100644
--- a/frontend/webapp/hooks/compute-platform/useNamespace.ts
+++ b/frontend/webapp/hooks/compute-platform/useNamespace.ts
@@ -14,11 +14,12 @@ type UseNamespaceHook = {
 };
 
 export const useNamespace = (
-  namespaceName: string | undefined
+  namespaceName: string | undefined,
+  instrumentationLabeled = null as boolean | null
 ): UseNamespaceHook => {
   const { data, loading, error } = useQuery<ComputePlatform>(GET_NAMESPACES, {
     skip: !namespaceName,
-    variables: { namespaceName },
+    variables: { namespaceName, instrumentationLabeled },
     fetchPolicy: 'cache-first',
   });
 
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 0d037e67c..94834a032 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -7,9 +7,9 @@ import {
   DestinationInput,
   PersistNamespaceItemInput,
 } from '@/types';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useNamespace } from '../compute-platform';
-import { IAppState } from '@/store';
+import { IAppState, resetState } from '@/store';
 
 type ConnectEnvResult = {
   success: boolean;
@@ -31,15 +31,12 @@ export const useConnectEnv = () => {
   const [error, setError] = useState<string | null>(null);
 
   // Getting data from Redux
+  const dispatch = useDispatch();
   const sourcesList = useSelector(({ app }: { app: IAppState }) => app.sources);
   const namespaceFutureSelectAppsList = useSelector(
     ({ app }: { app: IAppState }) => app.namespaceFutureSelectAppsList
   );
 
-  useEffect(() => {
-    console.log({ sourcesList, namespaceFutureSelectAppsList });
-  }, [namespaceFutureSelectAppsList, sourcesList]);
-
   const connectEnv = useCallback(
     async (destination: DestinationInput) => {
       setLoading(true);
@@ -74,7 +71,7 @@ export const useConnectEnv = () => {
             );
           }
         }
-
+        dispatch(resetState());
         // Create destination
         const destinationId = await createNewDestination(destination);
 
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesList.ts b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
index 9565453ec..b5fee7aec 100644
--- a/frontend/webapp/hooks/sources/useConnectSourcesList.ts
+++ b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
@@ -7,7 +7,8 @@ export const useConnectSourcesList = ({ stateMenu, setSourcesList }) => {
 
   const { error, data } = useComputePlatform();
   const { data: namespacesData } = useNamespace(
-    stateMenu.selectedOption?.value
+    stateMenu.selectedOption?.value,
+    false
   );
 
   useEffect(() => {
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
index 643894c65..73364d103 100644
--- a/frontend/webapp/store/slices/app-slice.ts
+++ b/frontend/webapp/store/slices/app-slice.ts
@@ -30,11 +30,17 @@ export const appSlice = createSlice({
     ) => {
       state.namespaceFutureSelectAppsList = action.payload;
     },
+    // New resetState reducer to reset the state to initial values
+    resetState: (state) => {
+      state.sources = initialState.sources;
+      state.namespaceFutureSelectAppsList =
+        initialState.namespaceFutureSelectAppsList;
+    },
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { setSources, setNamespaceFutureSelectAppsList } =
+export const { setSources, setNamespaceFutureSelectAppsList, resetState } =
   appSlice.actions;
 
 export const appReducer = appSlice.reducer;

From 949d869b2c16dc772aae31215a5c126db366617b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 15 Aug 2024 17:22:21 +0300
Subject: [PATCH 153/374] chore: wip

---
 frontend/webapp/app/layout.tsx                |  2 +-
 .../add-destination-modal/index.tsx           | 21 ++++++++---
 .../connect-destination-modal-body/index.tsx  | 36 ++++++++++---------
 .../main/sources/choose-sources/index.tsx     |  6 ----
 4 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 9a7036926..dfee65de7 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -43,7 +43,7 @@ export default function RootLayout({
               {/* <ThemeProviderWrapper> */}
               <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
                 {children}
-                <NotificationManager />
+                {/* <NotificationManager /> */}
               </body>
               {/* </ThemeProviderWrapper> */}
             </ThemeProvider>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index 7378c2020..3ed14e370 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useQuery } from '@apollo/client';
 import { DestinationTypeItem } from '@/types';
 import { GET_DESTINATION_TYPE } from '@/graphql';
@@ -15,6 +15,7 @@ interface DestinationCategory {
   name: string;
   items: DestinationTypeItem[];
 }
+
 function ModalActionComponent({
   onNext,
   onBack,
@@ -37,7 +38,7 @@ function ModalActionComponent({
               },
               {
                 label: 'DONE',
-                onClick: onNext,
+                onClick: onNext, // This will trigger handleSubmit
                 variant: 'primary',
               },
             ]
@@ -57,6 +58,8 @@ export function AddDestinationModal({
     DestinationTypeItem[]
   >([]);
 
+  const submitRef = useRef<() => void | null>(null);
+
   useEffect(() => {
     data && buildDestinationTypeList();
   }, [data]);
@@ -86,7 +89,10 @@ export function AddDestinationModal({
 
   function renderModalBody() {
     return selectedItem ? (
-      <ConnectDestinationModalBody destination={selectedItem} />
+      <ConnectDestinationModalBody
+        destination={selectedItem}
+        onSubmitRef={submitRef}
+      />
     ) : (
       <ChooseDestinationModalBody
         data={destinationTypeList}
@@ -95,12 +101,19 @@ export function AddDestinationModal({
     );
   }
 
+  function handleNext() {
+    if (submitRef.current) {
+      submitRef.current();
+      handleCloseModal();
+    }
+  }
+
   return (
     <Modal
       isOpen={isModalOpen}
       actionComponent={
         <ModalActionComponent
-          onNext={() => {}}
+          onNext={handleNext}
           onBack={() => setSelectedItem(undefined)}
           item={selectedItem}
         />
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 7a4bfec2a..39fba8fa4 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,26 +1,25 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { SideMenu } from '@/components';
+import { useQuery } from '@apollo/client';
+import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
+import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
+import { Body, Container, SideMenuWrapper } from '../styled';
+import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
 import {
-  DestinationDetailsResponse,
-  DestinationInput,
-  DestinationTypeItem,
+  StepProps,
   DynamicField,
   ExportedSignals,
-  StepProps,
+  DestinationInput,
+  DestinationTypeItem,
+  DestinationDetailsResponse,
 } from '@/types';
-import { SideMenu } from '@/components';
 import {
-  Button,
   CheckboxList,
   Divider,
   Input,
   SectionTitle,
 } from '@/reuseable-components';
-import { Body, Container, SideMenuWrapper } from '../styled';
-import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
-import { useQuery } from '@apollo/client';
-import styled from 'styled-components';
-import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
-import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -45,10 +44,12 @@ const FormContainer = styled.div`
 
 interface ConnectDestinationModalBodyProps {
   destination: DestinationTypeItem | undefined;
+  onSubmitRef: React.MutableRefObject<(() => void) | null>;
 }
 
 export function ConnectDestinationModalBody({
   destination,
+  onSubmitRef,
 }: ConnectDestinationModalBodyProps) {
   const { data } = useQuery<DestinationDetailsResponse>(
     GET_DESTINATION_TYPE_DETAILS,
@@ -66,8 +67,7 @@ export function ConnectDestinationModalBody({
   const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
   const [formData, setFormData] = useState<Record<string, any>>({});
   const { buildFormDynamicFields } = useConnectDestinationForm();
-  const { connectEnv, result, loading, error } = useConnectEnv();
-
+  const { connectEnv } = useConnectEnv();
   const monitors = useMemo(() => {
     if (!destination) return [];
 
@@ -93,6 +93,11 @@ export function ConnectDestinationModalBody({
     }
   }, [data]);
 
+  useEffect(() => {
+    // Assign handleSubmit to the onSubmitRef so it can be triggered externally
+    onSubmitRef.current = handleSubmit;
+  }, [formData, destinationName, exportedSignals]);
+
   function handleDynamicFieldChange(name: string, value: any) {
     setFormData((prev) => ({ ...prev, [name]: value }));
   }
@@ -149,9 +154,6 @@ export function ConnectDestinationModalBody({
             fields={dynamicFields}
             onChange={handleDynamicFieldChange}
           />
-          <Button onClick={handleSubmit} disabled={!destinationName}>
-            <span>CONNECT</span>
-          </Button>
         </FormContainer>
       </Body>
     </Container>
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index d782ec1f8..6228bea41 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -61,7 +61,6 @@ export function ChooseSourcesContainer() {
       dispatch(setSources(selectedItems));
       dispatch(setNamespaceFutureSelectAppsList(futureAppsCheckbox));
     }
-    console.log({ selectedOption, selectedItems, futureAppsCheckbox });
     router.push('/setup/choose-destination');
   }
 
@@ -107,11 +106,6 @@ export function ChooseSourcesContainer() {
               iconSrc: '/icons/common/arrow-black.svg',
               onClick: () => onNextClick(),
               variant: 'primary',
-              disabled:
-                !stateMenu.selectedOption ||
-                Object.keys(stateMenu.selectedItems).every(
-                  (value) => stateMenu.selectedItems[value].length === 0
-                ),
             },
           ]}
         />

From f8f90f830044e46c1e1d60265cdbfa080885bd66 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 15 Aug 2024 17:34:56 +0300
Subject: [PATCH 154/374] chore: wip

---
 frontend/webapp/app/(overview)/overview/page.tsx | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/frontend/webapp/app/(overview)/overview/page.tsx b/frontend/webapp/app/(overview)/overview/page.tsx
index 633ecad9e..06ba59a7a 100644
--- a/frontend/webapp/app/(overview)/overview/page.tsx
+++ b/frontend/webapp/app/(overview)/overview/page.tsx
@@ -1,23 +1,10 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { OVERVIEW } from '@/utils';
 import { OverviewHeader } from '@/components';
 import { DataFlowContainer } from '@/containers';
-import { useQuery } from '@apollo/client';
-import { GET_COMPUTE_PLATFORM } from '@/graphql';
 
 export default function OverviewPage() {
-  const { data, loading, error } = useQuery(GET_COMPUTE_PLATFORM);
-
-  useEffect(() => {
-    if (error) {
-      console.error(error);
-    }
-    if (data) {
-      console.log(data);
-    }
-  }, [error, data]);
-
   return (
     <>
       <OverviewHeader title={OVERVIEW.MENU.OVERVIEW} />

From 617cdaf6ec7165fc20eff3afc8d6646bc898cf99 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 18 Aug 2024 10:46:46 +0300
Subject: [PATCH 155/374] chore: init configured destination

---
 frontend/graph/generated.go                   | 685 +++++++++++++++++-
 frontend/graph/model/destination.go           |  13 +-
 frontend/graph/schema.graphqls                |  11 +
 frontend/graph/schema.resolvers.go            |  48 +-
 frontend/services/destinations.go             |  38 +-
 .../configured-destinations-list/index.tsx    | 126 ++++
 .../destinations/add-destination/index.tsx    |   1 +
 7 files changed, 877 insertions(+), 45 deletions(-)
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index c6b8cc0c4..d11c12513 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -40,6 +40,7 @@ type Config struct {
 
 type ResolverRoot interface {
 	ComputePlatform() ComputePlatformResolver
+	ConfiguredDestination() ConfiguredDestinationResolver
 	Destination() DestinationResolver
 	K8sActualNamespace() K8sActualNamespaceResolver
 	Mutation() MutationResolver
@@ -67,6 +68,16 @@ type ComplexityRoot struct {
 		Type               func(childComplexity int) int
 	}
 
+	ConfiguredDestination struct {
+		Conditions      func(childComplexity int) int
+		DestinationType func(childComplexity int) int
+		ExportedSignals func(childComplexity int) int
+		Fields          func(childComplexity int) int
+		Id              func(childComplexity int) int
+		Name            func(childComplexity int) int
+		Type            func(childComplexity int) int
+	}
+
 	Destination struct {
 		Conditions      func(childComplexity int) int
 		DestinationType func(childComplexity int) int
@@ -155,6 +166,7 @@ type ComplexityRoot struct {
 		Config                 func(childComplexity int) int
 		DestinationTypeDetails func(childComplexity int, typeArg string) int
 		DestinationTypes       func(childComplexity int) int
+		Destinations           func(childComplexity int) int
 	}
 
 	SourceContainerRuntimeDetails struct {
@@ -174,9 +186,10 @@ type ComputePlatformResolver interface {
 
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
 }
+type ConfiguredDestinationResolver interface {
+	Conditions(ctx context.Context, obj *model.ConfiguredDestination) ([]*model.Condition, error)
+}
 type DestinationResolver interface {
-	Type(ctx context.Context, obj *model.Destination) (string, error)
-
 	Fields(ctx context.Context, obj *model.Destination) ([]string, error)
 
 	Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error)
@@ -192,6 +205,7 @@ type MutationResolver interface {
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
 	Config(ctx context.Context) (*model.GetConfigResponse, error)
+	Destinations(ctx context.Context) ([]*model.ConfiguredDestination, error)
 	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
 	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
 }
@@ -302,6 +316,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Condition.Type(childComplexity), true
 
+	case "ConfiguredDestination.conditions":
+		if e.complexity.ConfiguredDestination.Conditions == nil {
+			break
+		}
+
+		return e.complexity.ConfiguredDestination.Conditions(childComplexity), true
+
+	case "ConfiguredDestination.destinationType":
+		if e.complexity.ConfiguredDestination.DestinationType == nil {
+			break
+		}
+
+		return e.complexity.ConfiguredDestination.DestinationType(childComplexity), true
+
+	case "ConfiguredDestination.exportedSignals":
+		if e.complexity.ConfiguredDestination.ExportedSignals == nil {
+			break
+		}
+
+		return e.complexity.ConfiguredDestination.ExportedSignals(childComplexity), true
+
+	case "ConfiguredDestination.fields":
+		if e.complexity.ConfiguredDestination.Fields == nil {
+			break
+		}
+
+		return e.complexity.ConfiguredDestination.Fields(childComplexity), true
+
+	case "ConfiguredDestination.id":
+		if e.complexity.ConfiguredDestination.Id == nil {
+			break
+		}
+
+		return e.complexity.ConfiguredDestination.Id(childComplexity), true
+
+	case "ConfiguredDestination.name":
+		if e.complexity.ConfiguredDestination.Name == nil {
+			break
+		}
+
+		return e.complexity.ConfiguredDestination.Name(childComplexity), true
+
+	case "ConfiguredDestination.type":
+		if e.complexity.ConfiguredDestination.Type == nil {
+			break
+		}
+
+		return e.complexity.ConfiguredDestination.Type(childComplexity), true
+
 	case "Destination.conditions":
 		if e.complexity.Destination.Conditions == nil {
 			break
@@ -663,6 +726,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.DestinationTypes(childComplexity), true
 
+	case "Query.destinations":
+		if e.complexity.Query.Destinations == nil {
+			break
+		}
+
+		return e.complexity.Query.Destinations(childComplexity), true
+
 	case "SourceContainerRuntimeDetails.containerName":
 		if e.complexity.SourceContainerRuntimeDetails.ContainerName == nil {
 			break
@@ -1456,14 +1526,324 @@ func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, f
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_reason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Reason, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_message(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Message, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ConfiguredDestination_id(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ConfiguredDestination_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Id, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ConfiguredDestination_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ConfiguredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ConfiguredDestination_name(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ConfiguredDestination_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ConfiguredDestination_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ConfiguredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ConfiguredDestination_type(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ConfiguredDestination_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ConfiguredDestination_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ConfiguredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ConfiguredDestination_exportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ConfiguredDestination_exportedSignals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ExportedSignals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ExportedSignals)
+	fc.Result = res
+	return ec.marshalNExportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignals(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ConfiguredDestination_exportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ConfiguredDestination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "traces":
+				return ec.fieldContext_ExportedSignals_traces(ctx, field)
+			case "metrics":
+				return ec.fieldContext_ExportedSignals_metrics(ctx, field)
+			case "logs":
+				return ec.fieldContext_ExportedSignals_logs(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ExportedSignals", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ConfiguredDestination_fields(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ConfiguredDestination_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ConfiguredDestination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "ConfiguredDestination",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1474,8 +1854,8 @@ func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_reason(ctx, field)
+func (ec *executionContext) _ConfiguredDestination_destinationType(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ConfiguredDestination_destinationType(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1488,35 +1868,50 @@ func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Reason, nil
+		return obj.DestinationType, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(model.DestinationTypesCategoryItem)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ConfiguredDestination_destinationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "ConfiguredDestination",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationTypesCategoryItem_displayName(ctx, field)
+			case "imageUrl":
+				return ec.fieldContext_DestinationTypesCategoryItem_imageUrl(ctx, field)
+			case "supportedSignals":
+				return ec.fieldContext_DestinationTypesCategoryItem_supportedSignals(ctx, field)
+			case "testConnectionSupported":
+				return ec.fieldContext_DestinationTypesCategoryItem_testConnectionSupported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationTypesCategoryItem", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_message(ctx, field)
+func (ec *executionContext) _ConfiguredDestination_conditions(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ConfiguredDestination_conditions(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1529,7 +1924,7 @@ func (ec *executionContext) _Condition_message(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Message, nil
+		return ec.resolvers.ConfiguredDestination().Conditions(rctx, obj)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1538,19 +1933,31 @@ func (ec *executionContext) _Condition_message(ctx context.Context, field graphq
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]*model.Condition)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ConfiguredDestination_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "ConfiguredDestination",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_Condition_type(ctx, field)
+			case "status":
+				return ec.fieldContext_Condition_status(ctx, field)
+			case "lastTransitionTime":
+				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+			case "reason":
+				return ec.fieldContext_Condition_reason(ctx, field)
+			case "message":
+				return ec.fieldContext_Condition_message(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
 		},
 	}
 	return fc, nil
@@ -1658,7 +2065,7 @@ func (ec *executionContext) _Destination_type(ctx context.Context, field graphql
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Destination().Type(rctx, obj)
+		return obj.Type, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1679,8 +2086,8 @@ func (ec *executionContext) fieldContext_Destination_type(_ context.Context, fie
 	fc = &graphql.FieldContext{
 		Object:     "Destination",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
 		},
@@ -3738,6 +4145,66 @@ func (ec *executionContext) fieldContext_Query_config(_ context.Context, field g
 	return fc, nil
 }
 
+func (ec *executionContext) _Query_destinations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_destinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().Destinations(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.ConfiguredDestination)
+	fc.Result = res
+	return ec.marshalNConfiguredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConfiguredDestinationᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_ConfiguredDestination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_ConfiguredDestination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_ConfiguredDestination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_ConfiguredDestination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_ConfiguredDestination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_ConfiguredDestination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_ConfiguredDestination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ConfiguredDestination", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query_destinationTypes(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query_destinationTypes(ctx, field)
 	if err != nil {
@@ -6475,40 +6942,57 @@ func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet
 	return out
 }
 
-var destinationImplementors = []string{"Destination"}
+var configuredDestinationImplementors = []string{"ConfiguredDestination"}
 
-func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionSet, obj *model.Destination) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, destinationImplementors)
+func (ec *executionContext) _ConfiguredDestination(ctx context.Context, sel ast.SelectionSet, obj *model.ConfiguredDestination) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, configuredDestinationImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("Destination")
+			out.Values[i] = graphql.MarshalString("ConfiguredDestination")
 		case "id":
-			out.Values[i] = ec._Destination_id(ctx, field, obj)
+			out.Values[i] = ec._ConfiguredDestination_id(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "name":
-			out.Values[i] = ec._Destination_name(ctx, field, obj)
+			out.Values[i] = ec._ConfiguredDestination_name(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "type":
+			out.Values[i] = ec._ConfiguredDestination_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "exportedSignals":
+			out.Values[i] = ec._ConfiguredDestination_exportedSignals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "fields":
+			out.Values[i] = ec._ConfiguredDestination_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "destinationType":
+			out.Values[i] = ec._ConfiguredDestination_destinationType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "conditions":
 			field := field
 
-			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
 				defer func() {
 					if r := recover(); r != nil {
 						ec.Error(ctx, ec.Recover(ctx, r))
 					}
 				}()
-				res = ec._Destination_type(ctx, field, obj)
-				if res == graphql.Null {
-					atomic.AddUint32(&fs.Invalids, 1)
-				}
+				res = ec._ConfiguredDestination_conditions(ctx, field, obj)
 				return res
 			}
 
@@ -6532,6 +7016,55 @@ func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionS
 			}
 
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationImplementors = []string{"Destination"}
+
+func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionSet, obj *model.Destination) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Destination")
+		case "id":
+			out.Values[i] = ec._Destination_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "name":
+			out.Values[i] = ec._Destination_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "type":
+			out.Values[i] = ec._Destination_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
 		case "exportedSignals":
 			out.Values[i] = ec._Destination_exportedSignals(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
@@ -7301,6 +7834,28 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "destinations":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_destinations(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "destinationTypes":
 			field := field
@@ -7835,6 +8390,60 @@ func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑio
 	return v
 }
 
+func (ec *executionContext) marshalNConfiguredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConfiguredDestinationᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.ConfiguredDestination) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNConfiguredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConfiguredDestination(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNConfiguredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConfiguredDestination(ctx context.Context, sel ast.SelectionSet, v *model.ConfiguredDestination) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._ConfiguredDestination(ctx, sel, v)
+}
+
 func (ec *executionContext) marshalNDestination2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v model.Destination) graphql.Marshaler {
 	return ec._Destination(ctx, sel, &v)
 }
diff --git a/frontend/graph/model/destination.go b/frontend/graph/model/destination.go
index 58a8bea11..cfb462519 100644
--- a/frontend/graph/model/destination.go
+++ b/frontend/graph/model/destination.go
@@ -1,7 +1,6 @@
 package model
 
 import (
-	"github.com/odigos-io/odigos/common"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
@@ -40,9 +39,19 @@ type ExportedSignals struct {
 type Destination struct {
 	Id              string                       `json:"id"`
 	Name            string                       `json:"name"`
-	Type            common.DestinationType       `json:"type"`
+	Type            string                       `json:"type"`
 	ExportedSignals ExportedSignals              `json:"signals"`
 	Fields          map[string]string            `json:"fields"`
 	DestinationType DestinationTypesCategoryItem `json:"destination_type"`
 	Conditions      []metav1.Condition           `json:"conditions,omitempty"`
 }
+
+type ConfiguredDestination struct {
+	Id              string                       `json:"id"`
+	Name            string                       `json:"name"`
+	Type            string                       `json:"type"`
+	ExportedSignals ExportedSignals              `json:"signals"`
+	Fields          string                       `json:"fields"`
+	DestinationType DestinationTypesCategoryItem `json:"destination_type"`
+	Conditions      []metav1.Condition           `json:"conditions,omitempty"`
+}
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 95de2251e..1a50b7dda 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -154,6 +154,16 @@ type Destination {
   conditions: [Condition!]
 }
 
+type ConfiguredDestination {
+  id: ID!
+  name: String!
+  type: String!
+  exportedSignals: ExportedSignals!
+  fields: String!
+  destinationType: DestinationTypesCategoryItem!
+  conditions: [Condition!]
+}
+
 type GetConfigResponse {
   installation: InstallationStatus!
 }
@@ -204,6 +214,7 @@ input PersistNamespaceSourceInput {
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
+  destinations: [ConfiguredDestination!]!
   destinationTypes: GetDestinationTypesResponse
   destinationTypeDetails(type: String!): GetDestinationDetailsResponse
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 2106e1c71..e9511e77f 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -23,7 +23,6 @@ import (
 
 // K8sActualNamespace is the resolver for the k8sActualNamespace field.
 func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error) {
-
 	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, nil)
 	if err != nil {
 		return nil, err
@@ -63,9 +62,9 @@ func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *mode
 	return k8sActualSource, nil
 }
 
-// Type is the resolver for the type field.
-func (r *destinationResolver) Type(ctx context.Context, obj *model.Destination) (string, error) {
-	panic(fmt.Errorf("not implemented: Type - type"))
+// Conditions is the resolver for the conditions field.
+func (r *configuredDestinationResolver) Conditions(ctx context.Context, obj *model.ConfiguredDestination) ([]*model.Condition, error) {
+	panic(fmt.Errorf("not implemented: Conditions - conditions"))
 }
 
 // Fields is the resolver for the fields field.
@@ -232,6 +231,31 @@ func (r *queryResolver) Config(ctx context.Context) (*model.GetConfigResponse, e
 	return gqlResponse, nil
 }
 
+// // Destinations is the resolver for the destinations field.
+func (r *queryResolver) Destinations(ctx context.Context) ([]*model.ConfiguredDestination, error) {
+	// Fetch destinations from the Kubernetes client
+	odigosns := consts.DefaultOdigosNamespace
+	dests, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	var resp []*model.ConfiguredDestination
+	for _, dest := range dests.Items {
+		// Fetch secret fields for the destination
+		secretFields, err := services.GetDestinationSecretFields(ctx, odigosns, &dest)
+		if err != nil {
+			return nil, err
+		}
+
+		// Convert the k8s destination to the GraphQL destination format
+		endpointDest := services.K8sDestinationToConfiguredDestination(dest, secretFields)
+		resp = append(resp, &endpointDest)
+	}
+
+	return resp, nil
+}
+
 // DestinationTypes is the resolver for the destinationTypes field.
 func (r *queryResolver) DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error) {
 	destTypes := services.GetDestinationTypes()
@@ -270,6 +294,11 @@ func (r *queryResolver) DestinationTypeDetails(ctx context.Context, typeArg stri
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
+// ConfiguredDestination returns ConfiguredDestinationResolver implementation.
+func (r *Resolver) ConfiguredDestination() ConfiguredDestinationResolver {
+	return &configuredDestinationResolver{r}
+}
+
 // Destination returns DestinationResolver implementation.
 func (r *Resolver) Destination() DestinationResolver { return &destinationResolver{r} }
 
@@ -285,7 +314,18 @@ func (r *Resolver) Mutation() MutationResolver { return &mutationResolver{r} }
 func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
 
 type computePlatformResolver struct{ *Resolver }
+type configuredDestinationResolver struct{ *Resolver }
 type destinationResolver struct{ *Resolver }
 type k8sActualNamespaceResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
+
+// !!! WARNING !!!
+// The code below was going to be deleted when updating resolvers. It has been copied here so you have
+// one last chance to move it out of harms way if you want. There are two reasons this happens:
+//   - When renaming or deleting a resolver the old code will be put in here. You can safely delete
+//     it when you're done.
+//   - You have helper methods in this file. Move them out to keep these resolver files clean.
+func (r *configuredDestinationResolver) Fields(ctx context.Context, obj *model.ConfiguredDestination) ([]string, error) {
+	panic(fmt.Errorf("not implemented: Fields - fields"))
+}
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
index 30c1bc77a..22e60f529 100644
--- a/frontend/services/destinations.go
+++ b/frontend/services/destinations.go
@@ -170,7 +170,7 @@ func K8sDestinationToEndpointFormat(k8sDest v1alpha1.Destination, secretFields m
 	return model.Destination{
 		Id:   k8sDest.Name,
 		Name: destName,
-		Type: destType,
+		Type: string(destType),
 		ExportedSignals: model.ExportedSignals{
 			Traces:  isSignalExported(k8sDest, common.TracesObservabilitySignal),
 			Metrics: isSignalExported(k8sDest, common.MetricsObservabilitySignal),
@@ -182,6 +182,42 @@ func K8sDestinationToEndpointFormat(k8sDest v1alpha1.Destination, secretFields m
 	}
 }
 
+func K8sDestinationToConfiguredDestination(k8sDest v1alpha1.Destination, secretFields map[string]string) model.ConfiguredDestination {
+	destType := k8sDest.Spec.Type
+	destName := k8sDest.Spec.DestinationName
+	mergedFields := mergeDataAndSecrets(k8sDest.Spec.Data, secretFields)
+	destTypeConfig := DestinationTypeConfigToCategoryItem(destinations.GetDestinationByType(string(destType)))
+	mergedFieldsJSON, err := json.Marshal(mergedFields)
+	if err != nil {
+		// Handle error appropriately
+		mergedFieldsJSON = []byte("{}") // Default to empty JSON object if marshalling fails
+	}
+
+	var conditions []metav1.Condition
+	for _, condition := range k8sDest.Status.Conditions {
+		conditions = append(conditions, metav1.Condition{
+			Type:               condition.Type,
+			Status:             condition.Status,
+			Message:            condition.Message,
+			LastTransitionTime: condition.LastTransitionTime,
+		})
+	}
+
+	return model.ConfiguredDestination{
+		Id:   k8sDest.Name,
+		Name: destName,
+		Type: string(destType),
+		ExportedSignals: model.ExportedSignals{
+			Traces:  isSignalExported(k8sDest, common.TracesObservabilitySignal),
+			Metrics: isSignalExported(k8sDest, common.MetricsObservabilitySignal),
+			Logs:    isSignalExported(k8sDest, common.LogsObservabilitySignal),
+		},
+		Fields:          string(mergedFieldsJSON),
+		DestinationType: destTypeConfig,
+		Conditions:      conditions,
+	}
+}
+
 func isSignalExported(dest v1alpha1.Destination, signal common.ObservabilitySignal) bool {
 	for _, s := range dest.Spec.Signals {
 		if s == signal {
diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
new file mode 100644
index 000000000..bea90a189
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { DestinationTypeItem } from '@/types';
+import { Text } from '@/reuseable-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-radius: 16px;
+  height: 100%;
+  max-height: 548px;
+  overflow-y: auto;
+`;
+
+const ListItem = styled.div<{}>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  transition: background 0.3s;
+  border-radius: 16px;
+
+  cursor: pointer;
+  background: rgba(249, 249, 249, 0.04);
+
+  &:hover {
+    background: rgba(68, 74, 217, 0.24);
+  }
+  &:last-child {
+    margin-bottom: 32px;
+  }
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const DestinationIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const SignalsWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+const SignalText = styled(Text)`
+  color: rgba(249, 249, 249, 0.8);
+  font-size: 10px;
+  text-transform: capitalize;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+interface DestinationsListProps {
+  items: DestinationTypeItem[];
+  setSelectedItems: (item: DestinationTypeItem) => void;
+}
+
+const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({
+  items,
+  setSelectedItems,
+}) => {
+  function renderSupportedSignals(item: DestinationTypeItem) {
+    const supportedSignals = item.supportedSignals;
+    const signals = Object.keys(supportedSignals);
+    const supportedSignalsList = signals.filter(
+      (signal) => supportedSignals[signal].supported
+    );
+
+    return supportedSignalsList.map((signal, index) => (
+      <SignalsWrapper key={index}>
+        <SignalText>{signal}</SignalText>
+        {index < supportedSignalsList.length - 1 && <SignalText>·</SignalText>}
+      </SignalsWrapper>
+    ));
+  }
+
+  return (
+    <Container>
+      {items.map((item) => (
+        <ListItem key={item.displayName} onClick={() => setSelectedItems(item)}>
+          <ListItemContent>
+            <DestinationIconWrapper>
+              <Image
+                src={item.imageUrl}
+                width={20}
+                height={20}
+                alt="destination"
+              />
+            </DestinationIconWrapper>
+            <TextWrapper>
+              <Text size={14}>{item.displayName}</Text>
+              <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
+            </TextWrapper>
+          </ListItemContent>
+        </ListItem>
+      ))}
+    </Container>
+  );
+};
+
+export { ConfiguredDestinationsList };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 725049875..262542412 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -53,6 +53,7 @@ export function ChooseDestinationContainer() {
         <AddDestinationButtonWrapper>
           <AddDestinationButton onClick={() => handleOpenModal()} />
         </AddDestinationButtonWrapper>
+        <div>test</div>
         <AddDestinationModal
           isModalOpen={isModalOpen}
           handleCloseModal={handleCloseModal}

From 6f0d83d9309590b017c8d026fb4cfe20926e7496 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 18 Aug 2024 13:56:33 +0300
Subject: [PATCH 156/374] chore: wip

---
 .../configured-destinations-list/index.tsx    | 55 ++++++++++++-------
 .../connect-destination-modal-body/index.tsx  | 32 ++++++++++-
 .../destinations/add-destination/index.tsx    |  4 +-
 frontend/webapp/hooks/setup/useConnectEnv.ts  |  4 +-
 frontend/webapp/store/slices/app-slice.ts     | 29 ++++++++--
 frontend/webapp/types/destinations.ts         | 14 +++++
 6 files changed, 109 insertions(+), 29 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
index bea90a189..ddfe6c377 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
-import { DestinationTypeItem } from '@/types';
+import { ConfiguredDestination, DestinationTypeItem } from '@/types';
 import { Text } from '@/reuseable-components';
+import { useSelector } from 'react-redux';
+import { IAppState } from '@/store';
 
 const Container = styled.div`
   display: flex;
@@ -59,6 +61,7 @@ const DestinationIconWrapper = styled.div`
 
 const SignalsWrapper = styled.div`
   display: flex;
+  align-items: center;
   gap: 4px;
 `;
 
@@ -75,34 +78,44 @@ const TextWrapper = styled.div`
   justify-content: space-between;
 `;
 
-interface DestinationsListProps {
-  items: DestinationTypeItem[];
-  setSelectedItems: (item: DestinationTypeItem) => void;
-}
-
-const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({
-  items,
-  setSelectedItems,
-}) => {
-  function renderSupportedSignals(item: DestinationTypeItem) {
-    const supportedSignals = item.supportedSignals;
+interface DestinationsListProps {}
+
+const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({}) => {
+  const destinations = useSelector(
+    ({ app }: { app: IAppState }) => app.configuredDestinationsList
+  );
+
+  function renderSupportedSignals(item: ConfiguredDestination) {
+    const supportedSignals = item.exportedSignals;
     const signals = Object.keys(supportedSignals);
     const supportedSignalsList = signals.filter(
       (signal) => supportedSignals[signal].supported
     );
 
-    return supportedSignalsList.map((signal, index) => (
-      <SignalsWrapper key={index}>
-        <SignalText>{signal}</SignalText>
-        {index < supportedSignalsList.length - 1 && <SignalText>·</SignalText>}
-      </SignalsWrapper>
-    ));
+    return Object.keys(supportedSignals).map(
+      (signal, index) =>
+        supportedSignals[signal] && (
+          <SignalsWrapper key={index}>
+            <Image
+              src={`/icons/monitors/${signal}.svg`}
+              alt="monitor"
+              width={10}
+              height={16}
+            />
+
+            <SignalText>{signal}</SignalText>
+            {index < supportedSignalsList.length - 1 && (
+              <SignalText>·</SignalText>
+            )}
+          </SignalsWrapper>
+        )
+    );
   }
 
   return (
     <Container>
-      {items.map((item) => (
-        <ListItem key={item.displayName} onClick={() => setSelectedItems(item)}>
+      {destinations.map((item) => (
+        <ListItem key={item.displayName}>
           <ListItemContent>
             <DestinationIconWrapper>
               <Image
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 39fba8fa4..43297abf4 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -13,6 +13,7 @@ import {
   DestinationInput,
   DestinationTypeItem,
   DestinationDetailsResponse,
+  ConfiguredDestination,
 } from '@/types';
 import {
   CheckboxList,
@@ -20,6 +21,8 @@ import {
   Input,
   SectionTitle,
 } from '@/reuseable-components';
+import { addConfiguredDestination } from '@/store';
+import { useDispatch } from 'react-redux';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -68,6 +71,9 @@ export function ConnectDestinationModalBody({
   const [formData, setFormData] = useState<Record<string, any>>({});
   const { buildFormDynamicFields } = useConnectDestinationForm();
   const { connectEnv } = useConnectEnv();
+
+  const dispatch = useDispatch();
+
   const monitors = useMemo(() => {
     if (!destination) return [];
 
@@ -107,18 +113,42 @@ export function ConnectDestinationModalBody({
   }
 
   async function handleSubmit() {
+    console.log({ formData, destination, exportedSignals, dynamicFields });
     const fields = Object.entries(formData).map(([name, value]) => ({
       key: name,
       value,
     }));
 
+    function storeConfiguredDestination() {
+      const destinationTypeDetails = dynamicFields.map((field) => ({
+        title: field.title,
+        value: formData[field.name],
+      }));
+
+      destinationTypeDetails.unshift({
+        title: 'Destination name',
+        value: destinationName,
+      });
+
+      const storedDestination: ConfiguredDestination = {
+        exportedSignals,
+        destinationTypeDetails,
+        type: destination?.type || '',
+        imageUrl: destination?.imageUrl || '',
+        category: destination?.category || '',
+        displayName: destination?.displayName || '',
+      };
+
+      dispatch(addConfiguredDestination(storedDestination));
+    }
+
     const body: DestinationInput = {
       name: destinationName,
       type: destination?.type || '',
       exportedSignals,
       fields,
     };
-    await connectEnv(body);
+    await connectEnv(body, storeConfiguredDestination);
   }
 
   if (!destination) return null;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 262542412..b7c3693ea 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 import { SectionTitle } from '@/reuseable-components';
 import { AddDestinationModal } from './add-destination-modal';
 import { AddDestinationButton, SetupHeader } from '@/components';
+import { ConfiguredDestinationsList } from './configured-destinations-list';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
@@ -23,6 +24,7 @@ export function ChooseDestinationContainer() {
   const [isModalOpen, setModalOpen] = useState(false);
 
   const router = useRouter();
+
   const handleOpenModal = () => setModalOpen(true);
   const handleCloseModal = () => setModalOpen(false);
 
@@ -53,7 +55,7 @@ export function ChooseDestinationContainer() {
         <AddDestinationButtonWrapper>
           <AddDestinationButton onClick={() => handleOpenModal()} />
         </AddDestinationButtonWrapper>
-        <div>test</div>
+        <ConfiguredDestinationsList />
         <AddDestinationModal
           isModalOpen={isModalOpen}
           handleCloseModal={handleCloseModal}
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 94834a032..b3112b928 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -38,7 +38,7 @@ export const useConnectEnv = () => {
   );
 
   const connectEnv = useCallback(
-    async (destination: DestinationInput) => {
+    async (destination: DestinationInput, callback?: () => void) => {
       setLoading(true);
       setError(null);
       setResult(null);
@@ -78,7 +78,7 @@ export const useConnectEnv = () => {
         if (!destinationId) {
           throw new Error('Error creating destination.');
         }
-
+        callback && callback();
         setResult({
           success: true,
           destinationId,
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
index 73364d103..14f84f6a7 100644
--- a/frontend/webapp/store/slices/app-slice.ts
+++ b/frontend/webapp/store/slices/app-slice.ts
@@ -1,4 +1,4 @@
-import { K8sActualSource } from '@/types';
+import { ConfiguredDestination, K8sActualSource } from '@/types';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
@@ -7,11 +7,13 @@ export interface IAppState {
     [key: string]: K8sActualSource[];
   };
   namespaceFutureSelectAppsList: { [key: string]: boolean };
+  configuredDestinationsList: ConfiguredDestination[];
 }
 
 const initialState: IAppState = {
   sources: {},
   namespaceFutureSelectAppsList: {},
+  configuredDestinationsList: [],
 };
 
 export const appSlice = createSlice({
@@ -30,17 +32,36 @@ export const appSlice = createSlice({
     ) => {
       state.namespaceFutureSelectAppsList = action.payload;
     },
-    // New resetState reducer to reset the state to initial values
+    addConfiguredDestination: (
+      state,
+      action: PayloadAction<ConfiguredDestination>
+    ) => {
+      state.configuredDestinationsList.push(action.payload);
+    },
+
+    setConfiguredDestinationsList: (
+      state,
+      action: PayloadAction<ConfiguredDestination[]>
+    ) => {
+      state.configuredDestinationsList = action.payload;
+    },
     resetState: (state) => {
       state.sources = initialState.sources;
       state.namespaceFutureSelectAppsList =
         initialState.namespaceFutureSelectAppsList;
+      state.configuredDestinationsList =
+        initialState.configuredDestinationsList;
     },
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { setSources, setNamespaceFutureSelectAppsList, resetState } =
-  appSlice.actions;
+export const {
+  setSources,
+  setNamespaceFutureSelectAppsList,
+  setConfiguredDestinationsList,
+  addConfiguredDestination,
+  resetState,
+} = appSlice.actions;
 
 export const appReducer = appSlice.reducer;
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 80bcfb7e0..100778c9f 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -61,6 +61,20 @@ export interface DestinationInput {
   fields: { key: string; value: any }[];
 }
 
+type DestinationTypeDetail = {
+  title: string;
+  value: string;
+};
+
+export type ConfiguredDestination = {
+  displayName: string;
+  category: string;
+  type: string;
+  exportedSignals: ExportedSignals;
+  imageUrl: string;
+  destinationTypeDetails: DestinationTypeDetail[];
+};
+
 export interface DestinationType {
   fields: any;
   display_name: string;

From 5b561e56be8652a6a5d7d305b96862e9ca0ca974 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 18 Aug 2024 15:29:17 +0300
Subject: [PATCH 157/374] chore: wip

---
 .../configured-destination-fields/index.tsx   |  45 ++++++
 .../webapp/components/destinations/index.ts   |   1 +
 .../configured-destinations-list/index.tsx    | 136 +++++++++++++-----
 frontend/webapp/types/destinations.ts         |   2 +-
 4 files changed, 148 insertions(+), 36 deletions(-)
 create mode 100644 frontend/webapp/components/destinations/configured-destination-fields/index.tsx

diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
new file mode 100644
index 000000000..926dc0fc9
--- /dev/null
+++ b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
@@ -0,0 +1,45 @@
+import { Text } from '@/reuseable-components';
+import { DestinationTypeDetail } from '@/types';
+import React from 'react';
+import styled from 'styled-components';
+
+type ConfiguredDestinationFieldsProps = {
+  details: DestinationTypeDetail[];
+};
+
+const ListContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+`;
+
+const ListItem = styled.div``;
+
+const ItemTitle = styled(Text)`
+  color: #b8b8b8;
+  font-size: 10px;
+  line-height: 16px;
+`;
+
+const ItemValue = styled(Text)`
+  word-break: break-all;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 18px;
+`;
+
+export const ConfiguredDestinationFields: React.FC<
+  ConfiguredDestinationFieldsProps
+> = ({ details }) => {
+  return (
+    <ListContainer>
+      {details.map((detail, index) => (
+        <ListItem key={index}>
+          <ItemTitle>{detail.title}</ItemTitle>
+          <ItemValue>{detail.value}</ItemValue>
+        </ListItem>
+      ))}
+    </ListContainer>
+  );
+};
diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
index e7e4b7330..9ca5e77cb 100644
--- a/frontend/webapp/components/destinations/index.ts
+++ b/frontend/webapp/components/destinations/index.ts
@@ -1,2 +1,3 @@
 export * from './add-destination-button';
 export * from './monitors-tap-list';
+export * from './configured-destination-fields';
diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
index ddfe6c377..c9cc03751 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -1,10 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import Image from 'next/image';
+import { IAppState } from '@/store';
 import styled from 'styled-components';
-import { ConfiguredDestination, DestinationTypeItem } from '@/types';
-import { Text } from '@/reuseable-components';
 import { useSelector } from 'react-redux';
-import { IAppState } from '@/store';
+import { Divider, Text } from '@/reuseable-components';
+import { ConfiguredDestination } from '@/types';
+import { ConfiguredDestinationFields } from '@/components';
 
 const Container = styled.div`
   display: flex;
@@ -18,24 +19,27 @@ const Container = styled.div`
   overflow-y: auto;
 `;
 
-const ListItem = styled.div<{}>`
+const ListItem = styled.div`
+  width: 100%;
+  border-radius: 16px;
+  background: ${({ theme }) => theme.colors.translucent_bg};
+`;
+
+const ListItemBody = styled.div`
+  width: 100%;
+  padding: 16px;
+`;
+
+const ListItemHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 16px 0px;
-  transition: background 0.3s;
-  border-radius: 16px;
 
-  cursor: pointer;
-  background: rgba(249, 249, 249, 0.04);
-
-  &:hover {
-    background: rgba(68, 74, 217, 0.24);
-  }
-  &:last-child {
+  /* &:last-child {
     margin-bottom: 32px;
-  }
+  } */
 `;
 
 const ListItemContent = styled.div`
@@ -78,12 +82,43 @@ const TextWrapper = styled.div`
   justify-content: space-between;
 `;
 
+const ExpandIconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+`;
+
+const IconBorder = styled.div`
+  height: 16px;
+  width: 1px;
+  margin-right: 12px;
+  background: ${({ theme }) => theme.colors.border};
+`;
+
+const ExpandIconWrapper = styled.div<{ expand?: boolean }>`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  transition: background 0.3s ease 0s, transform 0.3s ease 0s;
+  transform: ${({ expand }) => (expand ? 'rotate(180deg)' : 'rotate(0deg)')};
+  &:hover {
+    background: ${({ theme }) => theme.colors.translucent_bg};
+  }
+`;
+
 interface DestinationsListProps {}
 
-const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({}) => {
-  const destinations = useSelector(
-    ({ app }: { app: IAppState }) => app.configuredDestinationsList
-  );
+function ConfiguredDestinationsListItem({
+  item,
+}: {
+  item: ConfiguredDestination;
+}) {
+  const [expand, setExpand] = React.useState(false);
 
   function renderSupportedSignals(item: ConfiguredDestination) {
     const supportedSignals = item.exportedSignals;
@@ -112,25 +147,56 @@ const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({}) => {
     );
   }
 
+  return (
+    <ListItem>
+      <ListItemHeader style={{ paddingBottom: expand ? 0 : 16 }}>
+        <ListItemContent>
+          <DestinationIconWrapper>
+            <Image
+              src={item.imageUrl}
+              width={20}
+              height={20}
+              alt="destination"
+            />
+          </DestinationIconWrapper>
+          <TextWrapper>
+            <Text size={14}>{item.displayName}</Text>
+            <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
+          </TextWrapper>
+        </ListItemContent>
+
+        <ExpandIconContainer>
+          <IconBorder />
+          <ExpandIconWrapper expand={expand} onClick={() => setExpand(!expand)}>
+            <Image
+              src={'/icons/common/extend-arrow.svg'}
+              width={16}
+              height={16}
+              alt="destination"
+            />
+          </ExpandIconWrapper>
+        </ExpandIconContainer>
+      </ListItemHeader>
+
+      {expand && (
+        <ListItemBody>
+          <Divider margin="0 0 16px 0" />
+          <ConfiguredDestinationFields details={item.destinationTypeDetails} />
+        </ListItemBody>
+      )}
+    </ListItem>
+  );
+}
+
+const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({}) => {
+  const destinations = useSelector(
+    ({ app }: { app: IAppState }) => app.configuredDestinationsList
+  );
+
   return (
     <Container>
       {destinations.map((item) => (
-        <ListItem key={item.displayName}>
-          <ListItemContent>
-            <DestinationIconWrapper>
-              <Image
-                src={item.imageUrl}
-                width={20}
-                height={20}
-                alt="destination"
-              />
-            </DestinationIconWrapper>
-            <TextWrapper>
-              <Text size={14}>{item.displayName}</Text>
-              <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
-            </TextWrapper>
-          </ListItemContent>
-        </ListItem>
+        <ConfiguredDestinationsListItem key={item.displayName} item={item} />
       ))}
     </Container>
   );
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 100778c9f..c08f24ba6 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -61,7 +61,7 @@ export interface DestinationInput {
   fields: { key: string; value: any }[];
 }
 
-type DestinationTypeDetail = {
+export type DestinationTypeDetail = {
   title: string;
   value: string;
 };

From 5fce209659c094c81459a7b8d5b2956fb3c7342b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 18 Aug 2024 15:43:31 +0300
Subject: [PATCH 158/374] chore: configured destinations list

---
 .../configured-destinations-list/index.tsx           |  8 ++------
 .../connect-destination-modal-body/index.tsx         |  1 -
 frontend/webapp/hooks/setup/useConnectEnv.ts         | 12 ++++--------
 frontend/webapp/store/slices/app-slice.ts            |  6 ++++++
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
index c9cc03751..c9a4730bf 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -3,8 +3,8 @@ import Image from 'next/image';
 import { IAppState } from '@/store';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
-import { Divider, Text } from '@/reuseable-components';
 import { ConfiguredDestination } from '@/types';
+import { Divider, Text } from '@/reuseable-components';
 import { ConfiguredDestinationFields } from '@/components';
 
 const Container = styled.div`
@@ -12,8 +12,8 @@ const Container = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
+  margin-top: 24px;
   align-self: stretch;
-  border-radius: 16px;
   height: 100%;
   max-height: 548px;
   overflow-y: auto;
@@ -36,10 +36,6 @@ const ListItemHeader = styled.div`
   justify-content: space-between;
   width: 100%;
   padding: 16px 0px;
-
-  /* &:last-child {
-    margin-bottom: 32px;
-  } */
 `;
 
 const ListItemContent = styled.div`
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 43297abf4..358b25daf 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -113,7 +113,6 @@ export function ConnectDestinationModalBody({
   }
 
   async function handleSubmit() {
-    console.log({ formData, destination, exportedSignals, dynamicFields });
     const fields = Object.entries(formData).map(([name, value]) => ({
       key: name,
       value,
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index b3112b928..16107b315 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -1,15 +1,11 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { useCreateSource } from '../sources';
 import { useCreateDestination } from '../destinations';
 
-import {
-  K8sActualSource,
-  DestinationInput,
-  PersistNamespaceItemInput,
-} from '@/types';
+import { DestinationInput, PersistNamespaceItemInput } from '@/types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNamespace } from '../compute-platform';
-import { IAppState, resetState } from '@/store';
+import { IAppState, resetSources } from '@/store';
 
 type ConnectEnvResult = {
   success: boolean;
@@ -71,7 +67,7 @@ export const useConnectEnv = () => {
             );
           }
         }
-        dispatch(resetState());
+        dispatch(resetSources());
         // Create destination
         const destinationId = await createNewDestination(destination);
 
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
index 14f84f6a7..3856944b6 100644
--- a/frontend/webapp/store/slices/app-slice.ts
+++ b/frontend/webapp/store/slices/app-slice.ts
@@ -45,6 +45,11 @@ export const appSlice = createSlice({
     ) => {
       state.configuredDestinationsList = action.payload;
     },
+    resetSources: (state) => {
+      state.sources = initialState.sources;
+      state.namespaceFutureSelectAppsList =
+        initialState.namespaceFutureSelectAppsList;
+    },
     resetState: (state) => {
       state.sources = initialState.sources;
       state.namespaceFutureSelectAppsList =
@@ -62,6 +67,7 @@ export const {
   setConfiguredDestinationsList,
   addConfiguredDestination,
   resetState,
+  resetSources,
 } = appSlice.actions;
 
 export const appReducer = appSlice.reducer;

From 3aa2c688b8f11fb2f4a4350b024589e8adbf0294 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 18 Aug 2024 16:06:59 +0300
Subject: [PATCH 159/374] chore: wip

---
 .../app/setup/choose-destination/page.tsx     | 11 ++++++
 .../webapp/app/setup/choose-sources/page.tsx  | 11 ++++++
 frontend/webapp/app/setup/layout.tsx          | 10 ------
 .../webapp/components/setup/menu/index.tsx    | 34 +++++++++++++++----
 4 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/frontend/webapp/app/setup/choose-destination/page.tsx b/frontend/webapp/app/setup/choose-destination/page.tsx
index 92ffac25a..5c3d45c92 100644
--- a/frontend/webapp/app/setup/choose-destination/page.tsx
+++ b/frontend/webapp/app/setup/choose-destination/page.tsx
@@ -1,10 +1,21 @@
 'use client';
 import React from 'react';
+import styled from 'styled-components';
+import { SideMenu } from '@/components';
 import { ChooseDestinationContainer } from '@/containers/main';
 
+const SideMenuWrapper = styled.div`
+  position: absolute;
+  left: 24px;
+  top: 144px;
+`;
+
 export default function ChooseDestinationPage() {
   return (
     <>
+      <SideMenuWrapper>
+        <SideMenu currentStep={3} />
+      </SideMenuWrapper>
       <ChooseDestinationContainer />
     </>
   );
diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index 3c0fbed5a..f26adbe68 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -1,10 +1,21 @@
 'use client';
 import React from 'react';
+import styled from 'styled-components';
+import { SideMenu } from '@/components';
 import { ChooseSourcesContainer } from '@/containers/main';
 
+const SideMenuWrapper = styled.div`
+  position: absolute;
+  left: 24px;
+  top: 144px;
+`;
+
 export default function ChooseSourcesPage() {
   return (
     <>
+      <SideMenuWrapper>
+        <SideMenu currentStep={2} />
+      </SideMenuWrapper>
       <ChooseSourcesContainer />
     </>
   );
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index 8de0ce226..6e7cab11e 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -1,7 +1,6 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { SideMenu } from '@/components';
 
 const LayoutContainer = styled.div`
   width: 100%;
@@ -12,12 +11,6 @@ const LayoutContainer = styled.div`
   flex-direction: column;
 `;
 
-const SideMenuWrapper = styled.div`
-  position: absolute;
-  left: 24px;
-  top: 144px;
-`;
-
 const MainContent = styled.div`
   display: flex;
   max-width: 1440px;
@@ -33,9 +26,6 @@ export default function SetupLayout({
 }) {
   return (
     <LayoutContainer>
-      <SideMenuWrapper>
-        <SideMenu />
-      </SideMenuWrapper>
       <MainContent>{children}</MainContent>
     </LayoutContainer>
   );
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index 7bf3d5e33..89249f8ec 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -1,7 +1,7 @@
-import { Text } from '@/reuseable-components';
-import { StepProps } from '@/types';
 import Image from 'next/image';
-import React from 'react';
+import { StepProps } from '@/types';
+import React, { useEffect } from 'react';
+import { Text } from '@/reuseable-components';
 import styled, { css } from 'styled-components';
 
 const Container = styled.div`
@@ -14,7 +14,7 @@ const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
   display: flex;
   gap: 16px;
   padding: 10px 0;
-  cursor: ${({ state }) => (state === 'disabled' ? 'not-allowed' : 'pointer')};
+  cursor: ${({ state }) => (state === 'disabled' ? 'auto' : 'auto')};
   opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
 
   transition: opacity 0.3s;
@@ -59,7 +59,11 @@ const StepTitle = styled(Text)`
 
 const StepSubtitle = styled(Text)``;
 
-const SideMenu: React.FC<{ data?: StepProps[] }> = ({ data }) => {
+const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
+  data,
+  currentStep,
+}) => {
+  const [stepsList, setStepsList] = React.useState<StepProps[]>([]);
   const steps: StepProps[] = data || [
     {
       title: 'INSTALLATION',
@@ -70,6 +74,8 @@ const SideMenu: React.FC<{ data?: StepProps[] }> = ({ data }) => {
     {
       title: 'SOURCES',
       state: 'active',
+      subtitle: '',
+
       stepNumber: 2,
     },
     {
@@ -78,10 +84,26 @@ const SideMenu: React.FC<{ data?: StepProps[] }> = ({ data }) => {
       stepNumber: 3,
     },
   ];
+  useEffect(() => {
+    console.log({ currentStep });
+    if (currentStep) {
+      const currentSteps = (data || steps).map((step, index) => {
+        if (index < currentStep - 1) {
+          return { ...step, state: 'finish' as const };
+        } else if (index === currentStep - 1) {
+          return { ...step, state: 'active' as const };
+        } else {
+          return { ...step, state: 'disabled' as const };
+        }
+      });
+      console.log({ currentSteps });
+      setStepsList(currentSteps);
+    }
+  }, [currentStep, data]);
 
   return (
     <Container>
-      {steps.map((step, index) => (
+      {stepsList.map((step, index) => (
         <Step key={index} state={step.state}>
           <IconWrapper state={step.state}>
             {step.state === 'finish' && (

From 99937735da1681552899487bb2a4ffdbc865074f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 18 Aug 2024 16:55:43 +0300
Subject: [PATCH 160/374] chore: notification note component

---
 .../destinations/add-destination/index.tsx    |  30 ++++-
 .../icons/notification/warning-icon.svg       |   3 +
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../notification-note/index.tsx               | 110 ++++++++++++++++++
 4 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 frontend/webapp/public/icons/notification/warning-icon.svg
 create mode 100644 frontend/webapp/reuseable-components/notification-note/index.tsx

diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index b7c3693ea..fa1bd340f 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useRouter } from 'next/navigation';
-import { SectionTitle } from '@/reuseable-components';
+import { NotificationNote, SectionTitle } from '@/reuseable-components';
 import { AddDestinationModal } from './add-destination-modal';
 import { AddDestinationButton, SetupHeader } from '@/components';
 import { ConfiguredDestinationsList } from './configured-destinations-list';
+import { useSelector } from 'react-redux';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
@@ -20,11 +21,33 @@ const HeaderWrapper = styled.div`
   width: 100vw;
 `;
 
+const NotificationNoteWrapper = styled.div`
+  margin-top: 24px;
+`;
+
 export function ChooseDestinationContainer() {
   const [isModalOpen, setModalOpen] = useState(false);
 
   const router = useRouter();
 
+  const sourcesList = useSelector(({ app }) => app.sources);
+  console.log({ sourcesList });
+
+  const isSourcesListEmpty = () => {
+    const sourceLen = Object.keys(sourcesList).length === 0;
+    if (sourceLen) {
+      return true;
+    }
+    let empty = true;
+    for (const source in sourcesList) {
+      if (sourcesList[source].length > 0) {
+        empty = false;
+        break;
+      }
+    }
+    return empty;
+  };
+
   const handleOpenModal = () => setModalOpen(true);
   const handleCloseModal = () => setModalOpen(false);
 
@@ -52,6 +75,11 @@ export function ChooseDestinationContainer() {
           title="Configure destinations"
           description="Add backend destinations where collected data will be sent and configure their settings."
         />
+        {isSourcesListEmpty() && (
+          <NotificationNoteWrapper>
+            <NotificationNote type={'warning'} text={'No sources selected.'} />
+          </NotificationNoteWrapper>
+        )}
         <AddDestinationButtonWrapper>
           <AddDestinationButton onClick={() => handleOpenModal()} />
         </AddDestinationButtonWrapper>
diff --git a/frontend/webapp/public/icons/notification/warning-icon.svg b/frontend/webapp/public/icons/notification/warning-icon.svg
new file mode 100644
index 000000000..eb152a716
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/warning-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M5.33333 2.66669C4.22876 2.66669 3.33333 3.46263 3.33333 4.44446V6.22224C3.33333 7.20408 2.4379 8.00002 1.33333 8.00002C2.4379 8.00002 3.33333 8.79596 3.33333 9.7778V11.5556C3.33333 12.5374 4.22876 13.3334 5.33333 13.3334M10.6667 2.66669C11.7712 2.66669 12.6667 3.46263 12.6667 4.44446V6.22224C12.6667 7.20408 13.5621 8.00002 14.6667 8.00002C13.5621 8.00002 12.6667 8.79596 12.6667 9.7778V11.5556C12.6667 12.5374 11.7712 13.3334 10.6667 13.3334" stroke="#E9CF35" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 1839e88d6..9054ef153 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -12,3 +12,4 @@ export * from './modal';
 export * from './navigation-buttons';
 export * from './tag';
 export * from './checkbox-list';
+export * from './notification-note';
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
new file mode 100644
index 000000000..385994f26
--- /dev/null
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import Image from 'next/image';
+import { Text } from '../text';
+
+// Define the notification types
+type NotificationType = 'warning' | 'error' | 'success' | 'info';
+
+interface NotificationProps {
+  type: NotificationType;
+  text: string;
+}
+
+const NotificationContainer = styled.div<{ type: NotificationType }>`
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 32px;
+
+  background-color: ${({ type }) => {
+    switch (type) {
+      case 'warning':
+        return '#472300'; // Orange
+      case 'error':
+        return '#FF4C4C'; // Red
+      case 'success':
+        return '#28A745'; // Green
+      case 'info':
+        return '#2B2D66'; // Blue
+      default:
+        return '#2B2D66'; // Default to info color
+    }
+  }};
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Title = styled(Text)<{ type: NotificationType }>`
+  font-size: 14px;
+  color: ${({ type }) => {
+    switch (type) {
+      case 'warning':
+        return '#E9CF35'; // Orange
+      case 'error':
+        return '#FF4C4C'; // Red
+      case 'success':
+        return '#28A745'; // Green
+      case 'info':
+        return '#2B2D66'; // Blue
+      default:
+        return '#2B2D66'; // Default to info color
+    }
+  }};
+`;
+
+// Icons can be dynamically rendered based on the type
+const NotificationIcon = ({ type }: { type: NotificationType }) => {
+  switch (type) {
+    case 'warning':
+      return (
+        <Image
+          src="/icons/notification/warning-icon.svg"
+          alt="warning"
+          width={16}
+          height={16}
+        />
+      );
+    case 'error':
+      return (
+        <Image
+          src="/icons/notification/error-icon.svg"
+          alt="error"
+          width={16}
+          height={16}
+        />
+      );
+    case 'success':
+      return (
+        <Image
+          src="/icons/notification/success-icon.svg"
+          alt="success"
+          width={16}
+          height={16}
+        />
+      );
+    case 'info':
+    default:
+      return (
+        <Image src="/icons/info-icon.svg" alt="info" width={16} height={16} />
+      );
+  }
+};
+
+const NotificationNote: React.FC<NotificationProps> = ({ type, text }) => {
+  return (
+    <NotificationContainer type={type}>
+      <IconWrapper>
+        <NotificationIcon type={type} />
+      </IconWrapper>
+      <Title type={type}>{text}</Title>
+    </NotificationContainer>
+  );
+};
+
+export { NotificationNote };

From 868593d881b829dba6f10e83c99271c803ea6b1d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 18 Aug 2024 17:05:14 +0300
Subject: [PATCH 161/374] chore: wip

---
 .../configured-destinations-list/index.tsx       | 16 +++++++---------
 .../main/destinations/add-destination/index.tsx  | 15 +++++++++------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
index c9a4730bf..a989f4164 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
-import { IAppState } from '@/store';
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
 import { ConfiguredDestination } from '@/types';
 import { Divider, Text } from '@/reuseable-components';
 import { ConfiguredDestinationFields } from '@/components';
@@ -107,7 +105,9 @@ const ExpandIconWrapper = styled.div<{ expand?: boolean }>`
   }
 `;
 
-interface DestinationsListProps {}
+interface DestinationsListProps {
+  data: ConfiguredDestination[];
+}
 
 function ConfiguredDestinationsListItem({
   item,
@@ -184,14 +184,12 @@ function ConfiguredDestinationsListItem({
   );
 }
 
-const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({}) => {
-  const destinations = useSelector(
-    ({ app }: { app: IAppState }) => app.configuredDestinationsList
-  );
-
+const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({
+  data,
+}) => {
   return (
     <Container>
-      {destinations.map((item) => (
+      {data.map((item) => (
         <ConfiguredDestinationsListItem key={item.displayName} item={item} />
       ))}
     </Container>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index fa1bd340f..0443c6bc3 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
+import { IAppState } from '@/store';
 import styled from 'styled-components';
+import { useSelector } from 'react-redux';
 import { useRouter } from 'next/navigation';
-import { NotificationNote, SectionTitle } from '@/reuseable-components';
 import { AddDestinationModal } from './add-destination-modal';
 import { AddDestinationButton, SetupHeader } from '@/components';
+import { NotificationNote, SectionTitle } from '@/reuseable-components';
 import { ConfiguredDestinationsList } from './configured-destinations-list';
-import { useSelector } from 'react-redux';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
@@ -31,13 +32,15 @@ export function ChooseDestinationContainer() {
   const router = useRouter();
 
   const sourcesList = useSelector(({ app }) => app.sources);
-  console.log({ sourcesList });
-
+  const destinations = useSelector(
+    ({ app }: { app: IAppState }) => app.configuredDestinationsList
+  );
   const isSourcesListEmpty = () => {
     const sourceLen = Object.keys(sourcesList).length === 0;
     if (sourceLen) {
       return true;
     }
+
     let empty = true;
     for (const source in sourcesList) {
       if (sourcesList[source].length > 0) {
@@ -75,7 +78,7 @@ export function ChooseDestinationContainer() {
           title="Configure destinations"
           description="Add backend destinations where collected data will be sent and configure their settings."
         />
-        {isSourcesListEmpty() && (
+        {isSourcesListEmpty() && destinations.length === 0 && (
           <NotificationNoteWrapper>
             <NotificationNote type={'warning'} text={'No sources selected.'} />
           </NotificationNoteWrapper>
@@ -83,7 +86,7 @@ export function ChooseDestinationContainer() {
         <AddDestinationButtonWrapper>
           <AddDestinationButton onClick={() => handleOpenModal()} />
         </AddDestinationButtonWrapper>
-        <ConfiguredDestinationsList />
+        <ConfiguredDestinationsList data={destinations} />
         <AddDestinationModal
           isModalOpen={isModalOpen}
           handleCloseModal={handleCloseModal}

From 9c8d603ddf9271bc9dc5950a813081f03de4afd5 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 18 Aug 2024 17:21:16 +0300
Subject: [PATCH 162/374] Revert "[GEN-1133] feat: configured destinations
 list"

---
 frontend/graph/generated.go                   | 685 +-----------------
 frontend/graph/model/destination.go           |  13 +-
 frontend/graph/schema.graphqls                |  11 -
 frontend/graph/schema.resolvers.go            |  48 +-
 frontend/services/destinations.go             |  38 +-
 .../app/setup/choose-destination/page.tsx     |  11 -
 .../webapp/app/setup/choose-sources/page.tsx  |  11 -
 frontend/webapp/app/setup/layout.tsx          |  10 +
 .../configured-destination-fields/index.tsx   |  45 --
 .../webapp/components/destinations/index.ts   |   1 -
 .../webapp/components/setup/menu/index.tsx    |  34 +-
 .../configured-destinations-list/index.tsx    | 199 -----
 .../connect-destination-modal-body/index.tsx  |  31 +-
 .../destinations/add-destination/index.tsx    |  36 +-
 frontend/webapp/hooks/setup/useConnectEnv.ts  |  16 +-
 .../icons/notification/warning-icon.svg       |   3 -
 frontend/webapp/reuseable-components/index.ts |   1 -
 .../notification-note/index.tsx               | 110 ---
 frontend/webapp/store/slices/app-slice.ts     |  35 +-
 frontend/webapp/types/destinations.ts         |  14 -
 20 files changed, 77 insertions(+), 1275 deletions(-)
 delete mode 100644 frontend/webapp/components/destinations/configured-destination-fields/index.tsx
 delete mode 100644 frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
 delete mode 100644 frontend/webapp/public/icons/notification/warning-icon.svg
 delete mode 100644 frontend/webapp/reuseable-components/notification-note/index.tsx

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index d11c12513..c6b8cc0c4 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -40,7 +40,6 @@ type Config struct {
 
 type ResolverRoot interface {
 	ComputePlatform() ComputePlatformResolver
-	ConfiguredDestination() ConfiguredDestinationResolver
 	Destination() DestinationResolver
 	K8sActualNamespace() K8sActualNamespaceResolver
 	Mutation() MutationResolver
@@ -68,16 +67,6 @@ type ComplexityRoot struct {
 		Type               func(childComplexity int) int
 	}
 
-	ConfiguredDestination struct {
-		Conditions      func(childComplexity int) int
-		DestinationType func(childComplexity int) int
-		ExportedSignals func(childComplexity int) int
-		Fields          func(childComplexity int) int
-		Id              func(childComplexity int) int
-		Name            func(childComplexity int) int
-		Type            func(childComplexity int) int
-	}
-
 	Destination struct {
 		Conditions      func(childComplexity int) int
 		DestinationType func(childComplexity int) int
@@ -166,7 +155,6 @@ type ComplexityRoot struct {
 		Config                 func(childComplexity int) int
 		DestinationTypeDetails func(childComplexity int, typeArg string) int
 		DestinationTypes       func(childComplexity int) int
-		Destinations           func(childComplexity int) int
 	}
 
 	SourceContainerRuntimeDetails struct {
@@ -186,10 +174,9 @@ type ComputePlatformResolver interface {
 
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
 }
-type ConfiguredDestinationResolver interface {
-	Conditions(ctx context.Context, obj *model.ConfiguredDestination) ([]*model.Condition, error)
-}
 type DestinationResolver interface {
+	Type(ctx context.Context, obj *model.Destination) (string, error)
+
 	Fields(ctx context.Context, obj *model.Destination) ([]string, error)
 
 	Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error)
@@ -205,7 +192,6 @@ type MutationResolver interface {
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
 	Config(ctx context.Context) (*model.GetConfigResponse, error)
-	Destinations(ctx context.Context) ([]*model.ConfiguredDestination, error)
 	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
 	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
 }
@@ -316,55 +302,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Condition.Type(childComplexity), true
 
-	case "ConfiguredDestination.conditions":
-		if e.complexity.ConfiguredDestination.Conditions == nil {
-			break
-		}
-
-		return e.complexity.ConfiguredDestination.Conditions(childComplexity), true
-
-	case "ConfiguredDestination.destinationType":
-		if e.complexity.ConfiguredDestination.DestinationType == nil {
-			break
-		}
-
-		return e.complexity.ConfiguredDestination.DestinationType(childComplexity), true
-
-	case "ConfiguredDestination.exportedSignals":
-		if e.complexity.ConfiguredDestination.ExportedSignals == nil {
-			break
-		}
-
-		return e.complexity.ConfiguredDestination.ExportedSignals(childComplexity), true
-
-	case "ConfiguredDestination.fields":
-		if e.complexity.ConfiguredDestination.Fields == nil {
-			break
-		}
-
-		return e.complexity.ConfiguredDestination.Fields(childComplexity), true
-
-	case "ConfiguredDestination.id":
-		if e.complexity.ConfiguredDestination.Id == nil {
-			break
-		}
-
-		return e.complexity.ConfiguredDestination.Id(childComplexity), true
-
-	case "ConfiguredDestination.name":
-		if e.complexity.ConfiguredDestination.Name == nil {
-			break
-		}
-
-		return e.complexity.ConfiguredDestination.Name(childComplexity), true
-
-	case "ConfiguredDestination.type":
-		if e.complexity.ConfiguredDestination.Type == nil {
-			break
-		}
-
-		return e.complexity.ConfiguredDestination.Type(childComplexity), true
-
 	case "Destination.conditions":
 		if e.complexity.Destination.Conditions == nil {
 			break
@@ -726,13 +663,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.DestinationTypes(childComplexity), true
 
-	case "Query.destinations":
-		if e.complexity.Query.Destinations == nil {
-			break
-		}
-
-		return e.complexity.Query.Destinations(childComplexity), true
-
 	case "SourceContainerRuntimeDetails.containerName":
 		if e.complexity.SourceContainerRuntimeDetails.ContainerName == nil {
 			break
@@ -1526,324 +1456,14 @@ func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, f
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Condition",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_reason(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Reason, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Condition",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_message(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Message, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Condition",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _ConfiguredDestination_id(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ConfiguredDestination_id(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Id, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNID2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_ConfiguredDestination_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "ConfiguredDestination",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ID does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _ConfiguredDestination_name(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ConfiguredDestination_name(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_ConfiguredDestination_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "ConfiguredDestination",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _ConfiguredDestination_type(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ConfiguredDestination_type(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
-	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_ConfiguredDestination_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "ConfiguredDestination",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _ConfiguredDestination_exportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ConfiguredDestination_exportedSignals(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.ExportedSignals, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(model.ExportedSignals)
-	fc.Result = res
-	return ec.marshalNExportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignals(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_ConfiguredDestination_exportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "ConfiguredDestination",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "traces":
-				return ec.fieldContext_ExportedSignals_traces(ctx, field)
-			case "metrics":
-				return ec.fieldContext_ExportedSignals_metrics(ctx, field)
-			case "logs":
-				return ec.fieldContext_ExportedSignals_logs(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ExportedSignals", field.Name)
-		},
-	}
-	return fc, nil
-}
-
-func (ec *executionContext) _ConfiguredDestination_fields(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ConfiguredDestination_fields(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Fields, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.(string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ConfiguredDestination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ConfiguredDestination",
+		Object:     "Condition",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1854,8 +1474,8 @@ func (ec *executionContext) fieldContext_ConfiguredDestination_fields(_ context.
 	return fc, nil
 }
 
-func (ec *executionContext) _ConfiguredDestination_destinationType(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ConfiguredDestination_destinationType(ctx, field)
+func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_reason(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1868,50 +1488,35 @@ func (ec *executionContext) _ConfiguredDestination_destinationType(ctx context.C
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.DestinationType, nil
+		return obj.Reason, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.DestinationTypesCategoryItem)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ConfiguredDestination_destinationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ConfiguredDestination",
+		Object:     "Condition",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "type":
-				return ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
-			case "displayName":
-				return ec.fieldContext_DestinationTypesCategoryItem_displayName(ctx, field)
-			case "imageUrl":
-				return ec.fieldContext_DestinationTypesCategoryItem_imageUrl(ctx, field)
-			case "supportedSignals":
-				return ec.fieldContext_DestinationTypesCategoryItem_supportedSignals(ctx, field)
-			case "testConnectionSupported":
-				return ec.fieldContext_DestinationTypesCategoryItem_testConnectionSupported(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DestinationTypesCategoryItem", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ConfiguredDestination_conditions(ctx context.Context, field graphql.CollectedField, obj *model.ConfiguredDestination) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ConfiguredDestination_conditions(ctx, field)
+func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_message(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1924,7 +1529,7 @@ func (ec *executionContext) _ConfiguredDestination_conditions(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.ConfiguredDestination().Conditions(rctx, obj)
+		return obj.Message, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1933,31 +1538,19 @@ func (ec *executionContext) _ConfiguredDestination_conditions(ctx context.Contex
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.([]*model.Condition)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ConfiguredDestination_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ConfiguredDestination",
+		Object:     "Condition",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "type":
-				return ec.fieldContext_Condition_type(ctx, field)
-			case "status":
-				return ec.fieldContext_Condition_status(ctx, field)
-			case "lastTransitionTime":
-				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
-			case "reason":
-				return ec.fieldContext_Condition_reason(ctx, field)
-			case "message":
-				return ec.fieldContext_Condition_message(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
@@ -2065,7 +1658,7 @@ func (ec *executionContext) _Destination_type(ctx context.Context, field graphql
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return ec.resolvers.Destination().Type(rctx, obj)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2086,8 +1679,8 @@ func (ec *executionContext) fieldContext_Destination_type(_ context.Context, fie
 	fc = &graphql.FieldContext{
 		Object:     "Destination",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
 		},
@@ -4145,66 +3738,6 @@ func (ec *executionContext) fieldContext_Query_config(_ context.Context, field g
 	return fc, nil
 }
 
-func (ec *executionContext) _Query_destinations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_destinations(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().Destinations(rctx)
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]*model.ConfiguredDestination)
-	fc.Result = res
-	return ec.marshalNConfiguredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConfiguredDestinationᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_ConfiguredDestination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_ConfiguredDestination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_ConfiguredDestination_type(ctx, field)
-			case "exportedSignals":
-				return ec.fieldContext_ConfiguredDestination_exportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_ConfiguredDestination_fields(ctx, field)
-			case "destinationType":
-				return ec.fieldContext_ConfiguredDestination_destinationType(ctx, field)
-			case "conditions":
-				return ec.fieldContext_ConfiguredDestination_conditions(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ConfiguredDestination", field.Name)
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _Query_destinationTypes(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query_destinationTypes(ctx, field)
 	if err != nil {
@@ -6942,57 +6475,40 @@ func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet
 	return out
 }
 
-var configuredDestinationImplementors = []string{"ConfiguredDestination"}
+var destinationImplementors = []string{"Destination"}
 
-func (ec *executionContext) _ConfiguredDestination(ctx context.Context, sel ast.SelectionSet, obj *model.ConfiguredDestination) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, configuredDestinationImplementors)
+func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionSet, obj *model.Destination) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("ConfiguredDestination")
+			out.Values[i] = graphql.MarshalString("Destination")
 		case "id":
-			out.Values[i] = ec._ConfiguredDestination_id(ctx, field, obj)
+			out.Values[i] = ec._Destination_id(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "name":
-			out.Values[i] = ec._ConfiguredDestination_name(ctx, field, obj)
+			out.Values[i] = ec._Destination_name(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "type":
-			out.Values[i] = ec._ConfiguredDestination_type(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "exportedSignals":
-			out.Values[i] = ec._ConfiguredDestination_exportedSignals(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "fields":
-			out.Values[i] = ec._ConfiguredDestination_fields(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "destinationType":
-			out.Values[i] = ec._ConfiguredDestination_destinationType(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "conditions":
 			field := field
 
-			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
 				defer func() {
 					if r := recover(); r != nil {
 						ec.Error(ctx, ec.Recover(ctx, r))
 					}
 				}()
-				res = ec._ConfiguredDestination_conditions(ctx, field, obj)
+				res = ec._Destination_type(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
 				return res
 			}
 
@@ -7016,55 +6532,6 @@ func (ec *executionContext) _ConfiguredDestination(ctx context.Context, sel ast.
 			}
 
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-		default:
-			panic("unknown field " + strconv.Quote(field.Name))
-		}
-	}
-	out.Dispatch(ctx)
-	if out.Invalids > 0 {
-		return graphql.Null
-	}
-
-	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
-
-	for label, dfs := range deferred {
-		ec.processDeferredGroup(graphql.DeferredGroup{
-			Label:    label,
-			Path:     graphql.GetPath(ctx),
-			FieldSet: dfs,
-			Context:  ctx,
-		})
-	}
-
-	return out
-}
-
-var destinationImplementors = []string{"Destination"}
-
-func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionSet, obj *model.Destination) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, destinationImplementors)
-
-	out := graphql.NewFieldSet(fields)
-	deferred := make(map[string]*graphql.FieldSet)
-	for i, field := range fields {
-		switch field.Name {
-		case "__typename":
-			out.Values[i] = graphql.MarshalString("Destination")
-		case "id":
-			out.Values[i] = ec._Destination_id(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "name":
-			out.Values[i] = ec._Destination_name(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
-		case "type":
-			out.Values[i] = ec._Destination_type(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
-			}
 		case "exportedSignals":
 			out.Values[i] = ec._Destination_exportedSignals(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
@@ -7834,28 +7301,6 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
-		case "destinations":
-			field := field
-
-			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Query_destinations(ctx, field)
-				if res == graphql.Null {
-					atomic.AddUint32(&fs.Invalids, 1)
-				}
-				return res
-			}
-
-			rrm := func(ctx context.Context) graphql.Marshaler {
-				return ec.OperationContext.RootResolverMiddleware(ctx,
-					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-			}
-
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "destinationTypes":
 			field := field
@@ -8390,60 +7835,6 @@ func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑio
 	return v
 }
 
-func (ec *executionContext) marshalNConfiguredDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConfiguredDestinationᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.ConfiguredDestination) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
-			}
-			ret[i] = ec.marshalNConfiguredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConfiguredDestination(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	for _, e := range ret {
-		if e == graphql.Null {
-			return graphql.Null
-		}
-	}
-
-	return ret
-}
-
-func (ec *executionContext) marshalNConfiguredDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConfiguredDestination(ctx context.Context, sel ast.SelectionSet, v *model.ConfiguredDestination) graphql.Marshaler {
-	if v == nil {
-		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
-			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
-		}
-		return graphql.Null
-	}
-	return ec._ConfiguredDestination(ctx, sel, v)
-}
-
 func (ec *executionContext) marshalNDestination2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v model.Destination) graphql.Marshaler {
 	return ec._Destination(ctx, sel, &v)
 }
diff --git a/frontend/graph/model/destination.go b/frontend/graph/model/destination.go
index cfb462519..58a8bea11 100644
--- a/frontend/graph/model/destination.go
+++ b/frontend/graph/model/destination.go
@@ -1,6 +1,7 @@
 package model
 
 import (
+	"github.com/odigos-io/odigos/common"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
@@ -39,19 +40,9 @@ type ExportedSignals struct {
 type Destination struct {
 	Id              string                       `json:"id"`
 	Name            string                       `json:"name"`
-	Type            string                       `json:"type"`
+	Type            common.DestinationType       `json:"type"`
 	ExportedSignals ExportedSignals              `json:"signals"`
 	Fields          map[string]string            `json:"fields"`
 	DestinationType DestinationTypesCategoryItem `json:"destination_type"`
 	Conditions      []metav1.Condition           `json:"conditions,omitempty"`
 }
-
-type ConfiguredDestination struct {
-	Id              string                       `json:"id"`
-	Name            string                       `json:"name"`
-	Type            string                       `json:"type"`
-	ExportedSignals ExportedSignals              `json:"signals"`
-	Fields          string                       `json:"fields"`
-	DestinationType DestinationTypesCategoryItem `json:"destination_type"`
-	Conditions      []metav1.Condition           `json:"conditions,omitempty"`
-}
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 1a50b7dda..95de2251e 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -154,16 +154,6 @@ type Destination {
   conditions: [Condition!]
 }
 
-type ConfiguredDestination {
-  id: ID!
-  name: String!
-  type: String!
-  exportedSignals: ExportedSignals!
-  fields: String!
-  destinationType: DestinationTypesCategoryItem!
-  conditions: [Condition!]
-}
-
 type GetConfigResponse {
   installation: InstallationStatus!
 }
@@ -214,7 +204,6 @@ input PersistNamespaceSourceInput {
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
-  destinations: [ConfiguredDestination!]!
   destinationTypes: GetDestinationTypesResponse
   destinationTypeDetails(type: String!): GetDestinationDetailsResponse
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index e9511e77f..2106e1c71 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -23,6 +23,7 @@ import (
 
 // K8sActualNamespace is the resolver for the k8sActualNamespace field.
 func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error) {
+
 	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, nil)
 	if err != nil {
 		return nil, err
@@ -62,9 +63,9 @@ func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *mode
 	return k8sActualSource, nil
 }
 
-// Conditions is the resolver for the conditions field.
-func (r *configuredDestinationResolver) Conditions(ctx context.Context, obj *model.ConfiguredDestination) ([]*model.Condition, error) {
-	panic(fmt.Errorf("not implemented: Conditions - conditions"))
+// Type is the resolver for the type field.
+func (r *destinationResolver) Type(ctx context.Context, obj *model.Destination) (string, error) {
+	panic(fmt.Errorf("not implemented: Type - type"))
 }
 
 // Fields is the resolver for the fields field.
@@ -231,31 +232,6 @@ func (r *queryResolver) Config(ctx context.Context) (*model.GetConfigResponse, e
 	return gqlResponse, nil
 }
 
-// // Destinations is the resolver for the destinations field.
-func (r *queryResolver) Destinations(ctx context.Context) ([]*model.ConfiguredDestination, error) {
-	// Fetch destinations from the Kubernetes client
-	odigosns := consts.DefaultOdigosNamespace
-	dests, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-
-	var resp []*model.ConfiguredDestination
-	for _, dest := range dests.Items {
-		// Fetch secret fields for the destination
-		secretFields, err := services.GetDestinationSecretFields(ctx, odigosns, &dest)
-		if err != nil {
-			return nil, err
-		}
-
-		// Convert the k8s destination to the GraphQL destination format
-		endpointDest := services.K8sDestinationToConfiguredDestination(dest, secretFields)
-		resp = append(resp, &endpointDest)
-	}
-
-	return resp, nil
-}
-
 // DestinationTypes is the resolver for the destinationTypes field.
 func (r *queryResolver) DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error) {
 	destTypes := services.GetDestinationTypes()
@@ -294,11 +270,6 @@ func (r *queryResolver) DestinationTypeDetails(ctx context.Context, typeArg stri
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
-// ConfiguredDestination returns ConfiguredDestinationResolver implementation.
-func (r *Resolver) ConfiguredDestination() ConfiguredDestinationResolver {
-	return &configuredDestinationResolver{r}
-}
-
 // Destination returns DestinationResolver implementation.
 func (r *Resolver) Destination() DestinationResolver { return &destinationResolver{r} }
 
@@ -314,18 +285,7 @@ func (r *Resolver) Mutation() MutationResolver { return &mutationResolver{r} }
 func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
 
 type computePlatformResolver struct{ *Resolver }
-type configuredDestinationResolver struct{ *Resolver }
 type destinationResolver struct{ *Resolver }
 type k8sActualNamespaceResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
-
-// !!! WARNING !!!
-// The code below was going to be deleted when updating resolvers. It has been copied here so you have
-// one last chance to move it out of harms way if you want. There are two reasons this happens:
-//   - When renaming or deleting a resolver the old code will be put in here. You can safely delete
-//     it when you're done.
-//   - You have helper methods in this file. Move them out to keep these resolver files clean.
-func (r *configuredDestinationResolver) Fields(ctx context.Context, obj *model.ConfiguredDestination) ([]string, error) {
-	panic(fmt.Errorf("not implemented: Fields - fields"))
-}
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
index 22e60f529..30c1bc77a 100644
--- a/frontend/services/destinations.go
+++ b/frontend/services/destinations.go
@@ -170,7 +170,7 @@ func K8sDestinationToEndpointFormat(k8sDest v1alpha1.Destination, secretFields m
 	return model.Destination{
 		Id:   k8sDest.Name,
 		Name: destName,
-		Type: string(destType),
+		Type: destType,
 		ExportedSignals: model.ExportedSignals{
 			Traces:  isSignalExported(k8sDest, common.TracesObservabilitySignal),
 			Metrics: isSignalExported(k8sDest, common.MetricsObservabilitySignal),
@@ -182,42 +182,6 @@ func K8sDestinationToEndpointFormat(k8sDest v1alpha1.Destination, secretFields m
 	}
 }
 
-func K8sDestinationToConfiguredDestination(k8sDest v1alpha1.Destination, secretFields map[string]string) model.ConfiguredDestination {
-	destType := k8sDest.Spec.Type
-	destName := k8sDest.Spec.DestinationName
-	mergedFields := mergeDataAndSecrets(k8sDest.Spec.Data, secretFields)
-	destTypeConfig := DestinationTypeConfigToCategoryItem(destinations.GetDestinationByType(string(destType)))
-	mergedFieldsJSON, err := json.Marshal(mergedFields)
-	if err != nil {
-		// Handle error appropriately
-		mergedFieldsJSON = []byte("{}") // Default to empty JSON object if marshalling fails
-	}
-
-	var conditions []metav1.Condition
-	for _, condition := range k8sDest.Status.Conditions {
-		conditions = append(conditions, metav1.Condition{
-			Type:               condition.Type,
-			Status:             condition.Status,
-			Message:            condition.Message,
-			LastTransitionTime: condition.LastTransitionTime,
-		})
-	}
-
-	return model.ConfiguredDestination{
-		Id:   k8sDest.Name,
-		Name: destName,
-		Type: string(destType),
-		ExportedSignals: model.ExportedSignals{
-			Traces:  isSignalExported(k8sDest, common.TracesObservabilitySignal),
-			Metrics: isSignalExported(k8sDest, common.MetricsObservabilitySignal),
-			Logs:    isSignalExported(k8sDest, common.LogsObservabilitySignal),
-		},
-		Fields:          string(mergedFieldsJSON),
-		DestinationType: destTypeConfig,
-		Conditions:      conditions,
-	}
-}
-
 func isSignalExported(dest v1alpha1.Destination, signal common.ObservabilitySignal) bool {
 	for _, s := range dest.Spec.Signals {
 		if s == signal {
diff --git a/frontend/webapp/app/setup/choose-destination/page.tsx b/frontend/webapp/app/setup/choose-destination/page.tsx
index 5c3d45c92..92ffac25a 100644
--- a/frontend/webapp/app/setup/choose-destination/page.tsx
+++ b/frontend/webapp/app/setup/choose-destination/page.tsx
@@ -1,21 +1,10 @@
 'use client';
 import React from 'react';
-import styled from 'styled-components';
-import { SideMenu } from '@/components';
 import { ChooseDestinationContainer } from '@/containers/main';
 
-const SideMenuWrapper = styled.div`
-  position: absolute;
-  left: 24px;
-  top: 144px;
-`;
-
 export default function ChooseDestinationPage() {
   return (
     <>
-      <SideMenuWrapper>
-        <SideMenu currentStep={3} />
-      </SideMenuWrapper>
       <ChooseDestinationContainer />
     </>
   );
diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index f26adbe68..3c0fbed5a 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -1,21 +1,10 @@
 'use client';
 import React from 'react';
-import styled from 'styled-components';
-import { SideMenu } from '@/components';
 import { ChooseSourcesContainer } from '@/containers/main';
 
-const SideMenuWrapper = styled.div`
-  position: absolute;
-  left: 24px;
-  top: 144px;
-`;
-
 export default function ChooseSourcesPage() {
   return (
     <>
-      <SideMenuWrapper>
-        <SideMenu currentStep={2} />
-      </SideMenuWrapper>
       <ChooseSourcesContainer />
     </>
   );
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index 6e7cab11e..8de0ce226 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
+import { SideMenu } from '@/components';
 
 const LayoutContainer = styled.div`
   width: 100%;
@@ -11,6 +12,12 @@ const LayoutContainer = styled.div`
   flex-direction: column;
 `;
 
+const SideMenuWrapper = styled.div`
+  position: absolute;
+  left: 24px;
+  top: 144px;
+`;
+
 const MainContent = styled.div`
   display: flex;
   max-width: 1440px;
@@ -26,6 +33,9 @@ export default function SetupLayout({
 }) {
   return (
     <LayoutContainer>
+      <SideMenuWrapper>
+        <SideMenu />
+      </SideMenuWrapper>
       <MainContent>{children}</MainContent>
     </LayoutContainer>
   );
diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
deleted file mode 100644
index 926dc0fc9..000000000
--- a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Text } from '@/reuseable-components';
-import { DestinationTypeDetail } from '@/types';
-import React from 'react';
-import styled from 'styled-components';
-
-type ConfiguredDestinationFieldsProps = {
-  details: DestinationTypeDetail[];
-};
-
-const ListContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 40px;
-`;
-
-const ListItem = styled.div``;
-
-const ItemTitle = styled(Text)`
-  color: #b8b8b8;
-  font-size: 10px;
-  line-height: 16px;
-`;
-
-const ItemValue = styled(Text)`
-  word-break: break-all;
-  color: ${({ theme }) => theme.colors.text};
-  font-size: 12px;
-  font-weight: 300;
-  line-height: 18px;
-`;
-
-export const ConfiguredDestinationFields: React.FC<
-  ConfiguredDestinationFieldsProps
-> = ({ details }) => {
-  return (
-    <ListContainer>
-      {details.map((detail, index) => (
-        <ListItem key={index}>
-          <ItemTitle>{detail.title}</ItemTitle>
-          <ItemValue>{detail.value}</ItemValue>
-        </ListItem>
-      ))}
-    </ListContainer>
-  );
-};
diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
index 9ca5e77cb..e7e4b7330 100644
--- a/frontend/webapp/components/destinations/index.ts
+++ b/frontend/webapp/components/destinations/index.ts
@@ -1,3 +1,2 @@
 export * from './add-destination-button';
 export * from './monitors-tap-list';
-export * from './configured-destination-fields';
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index 89249f8ec..7bf3d5e33 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -1,7 +1,7 @@
-import Image from 'next/image';
-import { StepProps } from '@/types';
-import React, { useEffect } from 'react';
 import { Text } from '@/reuseable-components';
+import { StepProps } from '@/types';
+import Image from 'next/image';
+import React from 'react';
 import styled, { css } from 'styled-components';
 
 const Container = styled.div`
@@ -14,7 +14,7 @@ const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
   display: flex;
   gap: 16px;
   padding: 10px 0;
-  cursor: ${({ state }) => (state === 'disabled' ? 'auto' : 'auto')};
+  cursor: ${({ state }) => (state === 'disabled' ? 'not-allowed' : 'pointer')};
   opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
 
   transition: opacity 0.3s;
@@ -59,11 +59,7 @@ const StepTitle = styled(Text)`
 
 const StepSubtitle = styled(Text)``;
 
-const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
-  data,
-  currentStep,
-}) => {
-  const [stepsList, setStepsList] = React.useState<StepProps[]>([]);
+const SideMenu: React.FC<{ data?: StepProps[] }> = ({ data }) => {
   const steps: StepProps[] = data || [
     {
       title: 'INSTALLATION',
@@ -74,8 +70,6 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
     {
       title: 'SOURCES',
       state: 'active',
-      subtitle: '',
-
       stepNumber: 2,
     },
     {
@@ -84,26 +78,10 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
       stepNumber: 3,
     },
   ];
-  useEffect(() => {
-    console.log({ currentStep });
-    if (currentStep) {
-      const currentSteps = (data || steps).map((step, index) => {
-        if (index < currentStep - 1) {
-          return { ...step, state: 'finish' as const };
-        } else if (index === currentStep - 1) {
-          return { ...step, state: 'active' as const };
-        } else {
-          return { ...step, state: 'disabled' as const };
-        }
-      });
-      console.log({ currentSteps });
-      setStepsList(currentSteps);
-    }
-  }, [currentStep, data]);
 
   return (
     <Container>
-      {stepsList.map((step, index) => (
+      {steps.map((step, index) => (
         <Step key={index} state={step.state}>
           <IconWrapper state={step.state}>
             {step.state === 'finish' && (
diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
deleted file mode 100644
index a989f4164..000000000
--- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import { ConfiguredDestination } from '@/types';
-import { Divider, Text } from '@/reuseable-components';
-import { ConfiguredDestinationFields } from '@/components';
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-  margin-top: 24px;
-  align-self: stretch;
-  height: 100%;
-  max-height: 548px;
-  overflow-y: auto;
-`;
-
-const ListItem = styled.div`
-  width: 100%;
-  border-radius: 16px;
-  background: ${({ theme }) => theme.colors.translucent_bg};
-`;
-
-const ListItemBody = styled.div`
-  width: 100%;
-  padding: 16px;
-`;
-
-const ListItemHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 16px 0px;
-`;
-
-const ListItemContent = styled.div`
-  margin-left: 16px;
-  display: flex;
-  gap: 12px;
-`;
-
-const DestinationIconWrapper = styled.div`
-  display: flex;
-  width: 36px;
-  height: 36px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(249, 249, 249, 0.06) 0%,
-    rgba(249, 249, 249, 0.02) 100%
-  );
-`;
-
-const SignalsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-
-const SignalText = styled(Text)`
-  color: rgba(249, 249, 249, 0.8);
-  font-size: 10px;
-  text-transform: capitalize;
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 36px;
-  justify-content: space-between;
-`;
-
-const ExpandIconContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 16px;
-`;
-
-const IconBorder = styled.div`
-  height: 16px;
-  width: 1px;
-  margin-right: 12px;
-  background: ${({ theme }) => theme.colors.border};
-`;
-
-const ExpandIconWrapper = styled.div<{ expand?: boolean }>`
-  display: flex;
-  width: 36px;
-  height: 36px;
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-  border-radius: 100%;
-  transition: background 0.3s ease 0s, transform 0.3s ease 0s;
-  transform: ${({ expand }) => (expand ? 'rotate(180deg)' : 'rotate(0deg)')};
-  &:hover {
-    background: ${({ theme }) => theme.colors.translucent_bg};
-  }
-`;
-
-interface DestinationsListProps {
-  data: ConfiguredDestination[];
-}
-
-function ConfiguredDestinationsListItem({
-  item,
-}: {
-  item: ConfiguredDestination;
-}) {
-  const [expand, setExpand] = React.useState(false);
-
-  function renderSupportedSignals(item: ConfiguredDestination) {
-    const supportedSignals = item.exportedSignals;
-    const signals = Object.keys(supportedSignals);
-    const supportedSignalsList = signals.filter(
-      (signal) => supportedSignals[signal].supported
-    );
-
-    return Object.keys(supportedSignals).map(
-      (signal, index) =>
-        supportedSignals[signal] && (
-          <SignalsWrapper key={index}>
-            <Image
-              src={`/icons/monitors/${signal}.svg`}
-              alt="monitor"
-              width={10}
-              height={16}
-            />
-
-            <SignalText>{signal}</SignalText>
-            {index < supportedSignalsList.length - 1 && (
-              <SignalText>·</SignalText>
-            )}
-          </SignalsWrapper>
-        )
-    );
-  }
-
-  return (
-    <ListItem>
-      <ListItemHeader style={{ paddingBottom: expand ? 0 : 16 }}>
-        <ListItemContent>
-          <DestinationIconWrapper>
-            <Image
-              src={item.imageUrl}
-              width={20}
-              height={20}
-              alt="destination"
-            />
-          </DestinationIconWrapper>
-          <TextWrapper>
-            <Text size={14}>{item.displayName}</Text>
-            <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
-          </TextWrapper>
-        </ListItemContent>
-
-        <ExpandIconContainer>
-          <IconBorder />
-          <ExpandIconWrapper expand={expand} onClick={() => setExpand(!expand)}>
-            <Image
-              src={'/icons/common/extend-arrow.svg'}
-              width={16}
-              height={16}
-              alt="destination"
-            />
-          </ExpandIconWrapper>
-        </ExpandIconContainer>
-      </ListItemHeader>
-
-      {expand && (
-        <ListItemBody>
-          <Divider margin="0 0 16px 0" />
-          <ConfiguredDestinationFields details={item.destinationTypeDetails} />
-        </ListItemBody>
-      )}
-    </ListItem>
-  );
-}
-
-const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({
-  data,
-}) => {
-  return (
-    <Container>
-      {data.map((item) => (
-        <ConfiguredDestinationsListItem key={item.displayName} item={item} />
-      ))}
-    </Container>
-  );
-};
-
-export { ConfiguredDestinationsList };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 358b25daf..39fba8fa4 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -13,7 +13,6 @@ import {
   DestinationInput,
   DestinationTypeItem,
   DestinationDetailsResponse,
-  ConfiguredDestination,
 } from '@/types';
 import {
   CheckboxList,
@@ -21,8 +20,6 @@ import {
   Input,
   SectionTitle,
 } from '@/reuseable-components';
-import { addConfiguredDestination } from '@/store';
-import { useDispatch } from 'react-redux';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -71,9 +68,6 @@ export function ConnectDestinationModalBody({
   const [formData, setFormData] = useState<Record<string, any>>({});
   const { buildFormDynamicFields } = useConnectDestinationForm();
   const { connectEnv } = useConnectEnv();
-
-  const dispatch = useDispatch();
-
   const monitors = useMemo(() => {
     if (!destination) return [];
 
@@ -118,36 +112,13 @@ export function ConnectDestinationModalBody({
       value,
     }));
 
-    function storeConfiguredDestination() {
-      const destinationTypeDetails = dynamicFields.map((field) => ({
-        title: field.title,
-        value: formData[field.name],
-      }));
-
-      destinationTypeDetails.unshift({
-        title: 'Destination name',
-        value: destinationName,
-      });
-
-      const storedDestination: ConfiguredDestination = {
-        exportedSignals,
-        destinationTypeDetails,
-        type: destination?.type || '',
-        imageUrl: destination?.imageUrl || '',
-        category: destination?.category || '',
-        displayName: destination?.displayName || '',
-      };
-
-      dispatch(addConfiguredDestination(storedDestination));
-    }
-
     const body: DestinationInput = {
       name: destinationName,
       type: destination?.type || '',
       exportedSignals,
       fields,
     };
-    await connectEnv(body, storeConfiguredDestination);
+    await connectEnv(body);
   }
 
   if (!destination) return null;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 0443c6bc3..725049875 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,12 +1,9 @@
 import React, { useState } from 'react';
-import { IAppState } from '@/store';
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
 import { useRouter } from 'next/navigation';
+import { SectionTitle } from '@/reuseable-components';
 import { AddDestinationModal } from './add-destination-modal';
 import { AddDestinationButton, SetupHeader } from '@/components';
-import { NotificationNote, SectionTitle } from '@/reuseable-components';
-import { ConfiguredDestinationsList } from './configured-destinations-list';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
@@ -22,35 +19,10 @@ const HeaderWrapper = styled.div`
   width: 100vw;
 `;
 
-const NotificationNoteWrapper = styled.div`
-  margin-top: 24px;
-`;
-
 export function ChooseDestinationContainer() {
   const [isModalOpen, setModalOpen] = useState(false);
 
   const router = useRouter();
-
-  const sourcesList = useSelector(({ app }) => app.sources);
-  const destinations = useSelector(
-    ({ app }: { app: IAppState }) => app.configuredDestinationsList
-  );
-  const isSourcesListEmpty = () => {
-    const sourceLen = Object.keys(sourcesList).length === 0;
-    if (sourceLen) {
-      return true;
-    }
-
-    let empty = true;
-    for (const source in sourcesList) {
-      if (sourcesList[source].length > 0) {
-        empty = false;
-        break;
-      }
-    }
-    return empty;
-  };
-
   const handleOpenModal = () => setModalOpen(true);
   const handleCloseModal = () => setModalOpen(false);
 
@@ -78,15 +50,9 @@ export function ChooseDestinationContainer() {
           title="Configure destinations"
           description="Add backend destinations where collected data will be sent and configure their settings."
         />
-        {isSourcesListEmpty() && destinations.length === 0 && (
-          <NotificationNoteWrapper>
-            <NotificationNote type={'warning'} text={'No sources selected.'} />
-          </NotificationNoteWrapper>
-        )}
         <AddDestinationButtonWrapper>
           <AddDestinationButton onClick={() => handleOpenModal()} />
         </AddDestinationButtonWrapper>
-        <ConfiguredDestinationsList data={destinations} />
         <AddDestinationModal
           isModalOpen={isModalOpen}
           handleCloseModal={handleCloseModal}
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 16107b315..94834a032 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -1,11 +1,15 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useCreateSource } from '../sources';
 import { useCreateDestination } from '../destinations';
 
-import { DestinationInput, PersistNamespaceItemInput } from '@/types';
+import {
+  K8sActualSource,
+  DestinationInput,
+  PersistNamespaceItemInput,
+} from '@/types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNamespace } from '../compute-platform';
-import { IAppState, resetSources } from '@/store';
+import { IAppState, resetState } from '@/store';
 
 type ConnectEnvResult = {
   success: boolean;
@@ -34,7 +38,7 @@ export const useConnectEnv = () => {
   );
 
   const connectEnv = useCallback(
-    async (destination: DestinationInput, callback?: () => void) => {
+    async (destination: DestinationInput) => {
       setLoading(true);
       setError(null);
       setResult(null);
@@ -67,14 +71,14 @@ export const useConnectEnv = () => {
             );
           }
         }
-        dispatch(resetSources());
+        dispatch(resetState());
         // Create destination
         const destinationId = await createNewDestination(destination);
 
         if (!destinationId) {
           throw new Error('Error creating destination.');
         }
-        callback && callback();
+
         setResult({
           success: true,
           destinationId,
diff --git a/frontend/webapp/public/icons/notification/warning-icon.svg b/frontend/webapp/public/icons/notification/warning-icon.svg
deleted file mode 100644
index eb152a716..000000000
--- a/frontend/webapp/public/icons/notification/warning-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M5.33333 2.66669C4.22876 2.66669 3.33333 3.46263 3.33333 4.44446V6.22224C3.33333 7.20408 2.4379 8.00002 1.33333 8.00002C2.4379 8.00002 3.33333 8.79596 3.33333 9.7778V11.5556C3.33333 12.5374 4.22876 13.3334 5.33333 13.3334M10.6667 2.66669C11.7712 2.66669 12.6667 3.46263 12.6667 4.44446V6.22224C12.6667 7.20408 13.5621 8.00002 14.6667 8.00002C13.5621 8.00002 12.6667 8.79596 12.6667 9.7778V11.5556C12.6667 12.5374 11.7712 13.3334 10.6667 13.3334" stroke="#E9CF35" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 9054ef153..1839e88d6 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -12,4 +12,3 @@ export * from './modal';
 export * from './navigation-buttons';
 export * from './tag';
 export * from './checkbox-list';
-export * from './notification-note';
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
deleted file mode 100644
index 385994f26..000000000
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import Image from 'next/image';
-import { Text } from '../text';
-
-// Define the notification types
-type NotificationType = 'warning' | 'error' | 'success' | 'info';
-
-interface NotificationProps {
-  type: NotificationType;
-  text: string;
-}
-
-const NotificationContainer = styled.div<{ type: NotificationType }>`
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  border-radius: 32px;
-
-  background-color: ${({ type }) => {
-    switch (type) {
-      case 'warning':
-        return '#472300'; // Orange
-      case 'error':
-        return '#FF4C4C'; // Red
-      case 'success':
-        return '#28A745'; // Green
-      case 'info':
-        return '#2B2D66'; // Blue
-      default:
-        return '#2B2D66'; // Default to info color
-    }
-  }};
-`;
-
-const IconWrapper = styled.div`
-  margin-right: 12px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Title = styled(Text)<{ type: NotificationType }>`
-  font-size: 14px;
-  color: ${({ type }) => {
-    switch (type) {
-      case 'warning':
-        return '#E9CF35'; // Orange
-      case 'error':
-        return '#FF4C4C'; // Red
-      case 'success':
-        return '#28A745'; // Green
-      case 'info':
-        return '#2B2D66'; // Blue
-      default:
-        return '#2B2D66'; // Default to info color
-    }
-  }};
-`;
-
-// Icons can be dynamically rendered based on the type
-const NotificationIcon = ({ type }: { type: NotificationType }) => {
-  switch (type) {
-    case 'warning':
-      return (
-        <Image
-          src="/icons/notification/warning-icon.svg"
-          alt="warning"
-          width={16}
-          height={16}
-        />
-      );
-    case 'error':
-      return (
-        <Image
-          src="/icons/notification/error-icon.svg"
-          alt="error"
-          width={16}
-          height={16}
-        />
-      );
-    case 'success':
-      return (
-        <Image
-          src="/icons/notification/success-icon.svg"
-          alt="success"
-          width={16}
-          height={16}
-        />
-      );
-    case 'info':
-    default:
-      return (
-        <Image src="/icons/info-icon.svg" alt="info" width={16} height={16} />
-      );
-  }
-};
-
-const NotificationNote: React.FC<NotificationProps> = ({ type, text }) => {
-  return (
-    <NotificationContainer type={type}>
-      <IconWrapper>
-        <NotificationIcon type={type} />
-      </IconWrapper>
-      <Title type={type}>{text}</Title>
-    </NotificationContainer>
-  );
-};
-
-export { NotificationNote };
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
index 3856944b6..73364d103 100644
--- a/frontend/webapp/store/slices/app-slice.ts
+++ b/frontend/webapp/store/slices/app-slice.ts
@@ -1,4 +1,4 @@
-import { ConfiguredDestination, K8sActualSource } from '@/types';
+import { K8sActualSource } from '@/types';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
@@ -7,13 +7,11 @@ export interface IAppState {
     [key: string]: K8sActualSource[];
   };
   namespaceFutureSelectAppsList: { [key: string]: boolean };
-  configuredDestinationsList: ConfiguredDestination[];
 }
 
 const initialState: IAppState = {
   sources: {},
   namespaceFutureSelectAppsList: {},
-  configuredDestinationsList: [],
 };
 
 export const appSlice = createSlice({
@@ -32,42 +30,17 @@ export const appSlice = createSlice({
     ) => {
       state.namespaceFutureSelectAppsList = action.payload;
     },
-    addConfiguredDestination: (
-      state,
-      action: PayloadAction<ConfiguredDestination>
-    ) => {
-      state.configuredDestinationsList.push(action.payload);
-    },
-
-    setConfiguredDestinationsList: (
-      state,
-      action: PayloadAction<ConfiguredDestination[]>
-    ) => {
-      state.configuredDestinationsList = action.payload;
-    },
-    resetSources: (state) => {
-      state.sources = initialState.sources;
-      state.namespaceFutureSelectAppsList =
-        initialState.namespaceFutureSelectAppsList;
-    },
+    // New resetState reducer to reset the state to initial values
     resetState: (state) => {
       state.sources = initialState.sources;
       state.namespaceFutureSelectAppsList =
         initialState.namespaceFutureSelectAppsList;
-      state.configuredDestinationsList =
-        initialState.configuredDestinationsList;
     },
   },
 });
 
 // Action creators are generated for each case reducer function
-export const {
-  setSources,
-  setNamespaceFutureSelectAppsList,
-  setConfiguredDestinationsList,
-  addConfiguredDestination,
-  resetState,
-  resetSources,
-} = appSlice.actions;
+export const { setSources, setNamespaceFutureSelectAppsList, resetState } =
+  appSlice.actions;
 
 export const appReducer = appSlice.reducer;
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index c08f24ba6..80bcfb7e0 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -61,20 +61,6 @@ export interface DestinationInput {
   fields: { key: string; value: any }[];
 }
 
-export type DestinationTypeDetail = {
-  title: string;
-  value: string;
-};
-
-export type ConfiguredDestination = {
-  displayName: string;
-  category: string;
-  type: string;
-  exportedSignals: ExportedSignals;
-  imageUrl: string;
-  destinationTypeDetails: DestinationTypeDetail[];
-};
-
 export interface DestinationType {
   fields: any;
   display_name: string;

From d304c3945e7c25fc0467903d5f82e4a1ea1d6e5e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 18 Aug 2024 17:21:40 +0300
Subject: [PATCH 163/374] chore: fixed pr comments"

---
 frontend/webapp/app/setup/choose-destination/page.tsx | 8 +-------
 frontend/webapp/app/setup/choose-sources/page.tsx     | 8 +-------
 frontend/webapp/app/setup/styled.ts                   | 7 +++++++
 frontend/webapp/components/setup/menu/index.tsx       | 3 +--
 4 files changed, 10 insertions(+), 16 deletions(-)
 create mode 100644 frontend/webapp/app/setup/styled.ts

diff --git a/frontend/webapp/app/setup/choose-destination/page.tsx b/frontend/webapp/app/setup/choose-destination/page.tsx
index 5c3d45c92..07187db2a 100644
--- a/frontend/webapp/app/setup/choose-destination/page.tsx
+++ b/frontend/webapp/app/setup/choose-destination/page.tsx
@@ -1,15 +1,9 @@
 'use client';
 import React from 'react';
-import styled from 'styled-components';
 import { SideMenu } from '@/components';
+import { SideMenuWrapper } from '../styled';
 import { ChooseDestinationContainer } from '@/containers/main';
 
-const SideMenuWrapper = styled.div`
-  position: absolute;
-  left: 24px;
-  top: 144px;
-`;
-
 export default function ChooseDestinationPage() {
   return (
     <>
diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index f26adbe68..a612ab2ae 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -1,14 +1,8 @@
 'use client';
 import React from 'react';
-import styled from 'styled-components';
 import { SideMenu } from '@/components';
 import { ChooseSourcesContainer } from '@/containers/main';
-
-const SideMenuWrapper = styled.div`
-  position: absolute;
-  left: 24px;
-  top: 144px;
-`;
+import { SideMenuWrapper } from '../styled';
 
 export default function ChooseSourcesPage() {
   return (
diff --git a/frontend/webapp/app/setup/styled.ts b/frontend/webapp/app/setup/styled.ts
new file mode 100644
index 000000000..2f543a644
--- /dev/null
+++ b/frontend/webapp/app/setup/styled.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const SideMenuWrapper = styled.div`
+  position: absolute;
+  left: 24px;
+  top: 144px;
+`;
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index 89249f8ec..6c88467fe 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -85,7 +85,6 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
     },
   ];
   useEffect(() => {
-    console.log({ currentStep });
     if (currentStep) {
       const currentSteps = (data || steps).map((step, index) => {
         if (index < currentStep - 1) {
@@ -96,7 +95,7 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
           return { ...step, state: 'disabled' as const };
         }
       });
-      console.log({ currentSteps });
+
       setStepsList(currentSteps);
     }
   }, [currentStep, data]);

From 68b2e044d9efab3400358a1225248894cd2ce7bd Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 19 Aug 2024 09:19:52 +0300
Subject: [PATCH 164/374] chore: wip

---
 .../connect-destination-modal-body/index.tsx                | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 358b25daf..629730301 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -2,9 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
-import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
+import { useDispatch } from 'react-redux';
+import { addConfiguredDestination } from '@/store';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { Body, Container, SideMenuWrapper } from '../styled';
+import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
 import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
 import {
   StepProps,
@@ -21,8 +23,6 @@ import {
   Input,
   SectionTitle,
 } from '@/reuseable-components';
-import { addConfiguredDestination } from '@/store';
-import { useDispatch } from 'react-redux';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {

From 7f7550e9060ee763a18ab956b94aff8ffd5e9bc7 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 19 Aug 2024 10:13:25 +0300
Subject: [PATCH 165/374] chore: wip

---
 .../webapp/app/setup/choose-sources/page.tsx  |   2 +-
 frontend/webapp/app/setup/layout.tsx          |  10 -
 .../configured-destination-fields/index.tsx   |  45 ++++
 .../webapp/components/destinations/index.ts   |   1 +
 .../webapp/components/setup/menu/index.tsx    |  14 +-
 .../choose-destination-modal-body/index.tsx   |   2 +-
 .../configured-destinations-list/index.tsx    | 199 ++++++++++++++++++
 .../connect-destination-modal-body/index.tsx  |  39 +++-
 .../destinations/add-destination/index.tsx    |  36 +++-
 frontend/webapp/hooks/setup/useConnectEnv.ts  |  16 +-
 .../icons/notification/warning-icon.svg       |   3 +
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../notification-note/index.tsx               | 110 ++++++++++
 frontend/webapp/store/slices/app-slice.ts     |  35 ++-
 frontend/webapp/types/destinations.ts         |  14 ++
 15 files changed, 488 insertions(+), 39 deletions(-)
 create mode 100644 frontend/webapp/components/destinations/configured-destination-fields/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
 create mode 100644 frontend/webapp/public/icons/notification/warning-icon.svg
 create mode 100644 frontend/webapp/reuseable-components/notification-note/index.tsx

diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
index 4e716f9b2..a612ab2ae 100644
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ b/frontend/webapp/app/setup/choose-sources/page.tsx
@@ -1,8 +1,8 @@
 'use client';
 import React from 'react';
 import { SideMenu } from '@/components';
-import { SideMenuWrapper } from '../styled';
 import { ChooseSourcesContainer } from '@/containers/main';
+import { SideMenuWrapper } from '../styled';
 
 export default function ChooseSourcesPage() {
   return (
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
index 8de0ce226..6e7cab11e 100644
--- a/frontend/webapp/app/setup/layout.tsx
+++ b/frontend/webapp/app/setup/layout.tsx
@@ -1,7 +1,6 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { SideMenu } from '@/components';
 
 const LayoutContainer = styled.div`
   width: 100%;
@@ -12,12 +11,6 @@ const LayoutContainer = styled.div`
   flex-direction: column;
 `;
 
-const SideMenuWrapper = styled.div`
-  position: absolute;
-  left: 24px;
-  top: 144px;
-`;
-
 const MainContent = styled.div`
   display: flex;
   max-width: 1440px;
@@ -33,9 +26,6 @@ export default function SetupLayout({
 }) {
   return (
     <LayoutContainer>
-      <SideMenuWrapper>
-        <SideMenu />
-      </SideMenuWrapper>
       <MainContent>{children}</MainContent>
     </LayoutContainer>
   );
diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
new file mode 100644
index 000000000..926dc0fc9
--- /dev/null
+++ b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
@@ -0,0 +1,45 @@
+import { Text } from '@/reuseable-components';
+import { DestinationTypeDetail } from '@/types';
+import React from 'react';
+import styled from 'styled-components';
+
+type ConfiguredDestinationFieldsProps = {
+  details: DestinationTypeDetail[];
+};
+
+const ListContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+`;
+
+const ListItem = styled.div``;
+
+const ItemTitle = styled(Text)`
+  color: #b8b8b8;
+  font-size: 10px;
+  line-height: 16px;
+`;
+
+const ItemValue = styled(Text)`
+  word-break: break-all;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 18px;
+`;
+
+export const ConfiguredDestinationFields: React.FC<
+  ConfiguredDestinationFieldsProps
+> = ({ details }) => {
+  return (
+    <ListContainer>
+      {details.map((detail, index) => (
+        <ListItem key={index}>
+          <ItemTitle>{detail.title}</ItemTitle>
+          <ItemValue>{detail.value}</ItemValue>
+        </ListItem>
+      ))}
+    </ListContainer>
+  );
+};
diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
index e7e4b7330..9ca5e77cb 100644
--- a/frontend/webapp/components/destinations/index.ts
+++ b/frontend/webapp/components/destinations/index.ts
@@ -1,2 +1,3 @@
 export * from './add-destination-button';
 export * from './monitors-tap-list';
+export * from './configured-destination-fields';
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index 925a9b42d..6c88467fe 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -1,7 +1,7 @@
-import { Text } from '@/reuseable-components';
-import { StepProps } from '@/types';
 import Image from 'next/image';
+import { StepProps } from '@/types';
 import React, { useEffect } from 'react';
+import { Text } from '@/reuseable-components';
 import styled, { css } from 'styled-components';
 
 const Container = styled.div`
@@ -14,7 +14,7 @@ const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
   display: flex;
   gap: 16px;
   padding: 10px 0;
-  cursor: ${({ state }) => (state === 'disabled' ? 'not-allowed' : 'pointer')};
+  cursor: ${({ state }) => (state === 'disabled' ? 'auto' : 'auto')};
   opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
 
   transition: opacity 0.3s;
@@ -63,9 +63,7 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
   data,
   currentStep,
 }) => {
-  const [stepsList, setStepsList] = React.useState<StepProps[] | null>(
-    null as any
-  );
+  const [stepsList, setStepsList] = React.useState<StepProps[]>([]);
   const steps: StepProps[] = data || [
     {
       title: 'INSTALLATION',
@@ -76,6 +74,8 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
     {
       title: 'SOURCES',
       state: 'active',
+      subtitle: '',
+
       stepNumber: 2,
     },
     {
@@ -102,7 +102,7 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
 
   return (
     <Container>
-      {stepsList?.map((step, index) => (
+      {stepsList.map((step, index) => (
         <Step key={index} state={step.state}>
           <IconWrapper state={step.state}>
             {step.state === 'finish' && (
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index 294c345f3..ae32bfb44 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -79,7 +79,7 @@ export function ChooseDestinationModalBody({
   return (
     <Container>
       <SideMenuWrapper>
-        <SideMenu data={SIDE_MENU_DATA} currentStep={1} />
+        <SideMenu data={SIDE_MENU_DATA} />
       </SideMenuWrapper>
       <Body>
         <SectionTitle
diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
new file mode 100644
index 000000000..a989f4164
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { ConfiguredDestination } from '@/types';
+import { Divider, Text } from '@/reuseable-components';
+import { ConfiguredDestinationFields } from '@/components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  margin-top: 24px;
+  align-self: stretch;
+  height: 100%;
+  max-height: 548px;
+  overflow-y: auto;
+`;
+
+const ListItem = styled.div`
+  width: 100%;
+  border-radius: 16px;
+  background: ${({ theme }) => theme.colors.translucent_bg};
+`;
+
+const ListItemBody = styled.div`
+  width: 100%;
+  padding: 16px;
+`;
+
+const ListItemHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const DestinationIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const SignalsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const SignalText = styled(Text)`
+  color: rgba(249, 249, 249, 0.8);
+  font-size: 10px;
+  text-transform: capitalize;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+const ExpandIconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+`;
+
+const IconBorder = styled.div`
+  height: 16px;
+  width: 1px;
+  margin-right: 12px;
+  background: ${({ theme }) => theme.colors.border};
+`;
+
+const ExpandIconWrapper = styled.div<{ expand?: boolean }>`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  transition: background 0.3s ease 0s, transform 0.3s ease 0s;
+  transform: ${({ expand }) => (expand ? 'rotate(180deg)' : 'rotate(0deg)')};
+  &:hover {
+    background: ${({ theme }) => theme.colors.translucent_bg};
+  }
+`;
+
+interface DestinationsListProps {
+  data: ConfiguredDestination[];
+}
+
+function ConfiguredDestinationsListItem({
+  item,
+}: {
+  item: ConfiguredDestination;
+}) {
+  const [expand, setExpand] = React.useState(false);
+
+  function renderSupportedSignals(item: ConfiguredDestination) {
+    const supportedSignals = item.exportedSignals;
+    const signals = Object.keys(supportedSignals);
+    const supportedSignalsList = signals.filter(
+      (signal) => supportedSignals[signal].supported
+    );
+
+    return Object.keys(supportedSignals).map(
+      (signal, index) =>
+        supportedSignals[signal] && (
+          <SignalsWrapper key={index}>
+            <Image
+              src={`/icons/monitors/${signal}.svg`}
+              alt="monitor"
+              width={10}
+              height={16}
+            />
+
+            <SignalText>{signal}</SignalText>
+            {index < supportedSignalsList.length - 1 && (
+              <SignalText>·</SignalText>
+            )}
+          </SignalsWrapper>
+        )
+    );
+  }
+
+  return (
+    <ListItem>
+      <ListItemHeader style={{ paddingBottom: expand ? 0 : 16 }}>
+        <ListItemContent>
+          <DestinationIconWrapper>
+            <Image
+              src={item.imageUrl}
+              width={20}
+              height={20}
+              alt="destination"
+            />
+          </DestinationIconWrapper>
+          <TextWrapper>
+            <Text size={14}>{item.displayName}</Text>
+            <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
+          </TextWrapper>
+        </ListItemContent>
+
+        <ExpandIconContainer>
+          <IconBorder />
+          <ExpandIconWrapper expand={expand} onClick={() => setExpand(!expand)}>
+            <Image
+              src={'/icons/common/extend-arrow.svg'}
+              width={16}
+              height={16}
+              alt="destination"
+            />
+          </ExpandIconWrapper>
+        </ExpandIconContainer>
+      </ListItemHeader>
+
+      {expand && (
+        <ListItemBody>
+          <Divider margin="0 0 16px 0" />
+          <ConfiguredDestinationFields details={item.destinationTypeDetails} />
+        </ListItemBody>
+      )}
+    </ListItem>
+  );
+}
+
+const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({
+  data,
+}) => {
+  return (
+    <Container>
+      {data.map((item) => (
+        <ConfiguredDestinationsListItem key={item.displayName} item={item} />
+      ))}
+    </Container>
+  );
+};
+
+export { ConfiguredDestinationsList };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 28b4d77a3..782dbc5a3 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -2,11 +2,9 @@ import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
-import { useDispatch } from 'react-redux';
-import { addConfiguredDestination } from '@/store';
+import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { Body, Container, SideMenuWrapper } from '../styled';
-import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
 import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
 import {
   StepProps,
@@ -15,6 +13,7 @@ import {
   DestinationInput,
   DestinationTypeItem,
   DestinationDetailsResponse,
+  ConfiguredDestination,
 } from '@/types';
 import {
   CheckboxList,
@@ -22,6 +21,8 @@ import {
   Input,
   SectionTitle,
 } from '@/reuseable-components';
+import { addConfiguredDestination } from '@/store';
+import { useDispatch } from 'react-redux';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -44,6 +45,8 @@ const FormContainer = styled.div`
   gap: 24px;
 `;
 
+//
+
 interface ConnectDestinationModalBodyProps {
   destination: DestinationTypeItem | undefined;
   onSubmitRef: React.MutableRefObject<(() => void) | null>;
@@ -70,6 +73,9 @@ export function ConnectDestinationModalBody({
   const [formData, setFormData] = useState<Record<string, any>>({});
   const { buildFormDynamicFields } = useConnectDestinationForm();
   const { connectEnv } = useConnectEnv();
+
+  const dispatch = useDispatch();
+
   const monitors = useMemo(() => {
     if (!destination) return [];
 
@@ -114,13 +120,36 @@ export function ConnectDestinationModalBody({
       value,
     }));
 
+    function storeConfiguredDestination() {
+      const destinationTypeDetails = dynamicFields.map((field) => ({
+        title: field.title,
+        value: formData[field.name],
+      }));
+
+      destinationTypeDetails.unshift({
+        title: 'Destination name',
+        value: destinationName,
+      });
+
+      const storedDestination: ConfiguredDestination = {
+        exportedSignals,
+        destinationTypeDetails,
+        type: destination?.type || '',
+        imageUrl: destination?.imageUrl || '',
+        category: destination?.category || '',
+        displayName: destination?.displayName || '',
+      };
+
+      dispatch(addConfiguredDestination(storedDestination));
+    }
+
     const body: DestinationInput = {
       name: destinationName,
       type: destination?.type || '',
       exportedSignals,
       fields,
     };
-    await connectEnv(body);
+    await connectEnv(body, storeConfiguredDestination);
   }
 
   if (!destination) return null;
@@ -128,7 +157,7 @@ export function ConnectDestinationModalBody({
   return (
     <Container>
       <SideMenuWrapper>
-        <SideMenu data={SIDE_MENU_DATA} currentStep={2} />
+        <SideMenu data={SIDE_MENU_DATA} />
       </SideMenuWrapper>
 
       <Body>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 725049875..0443c6bc3 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
+import { IAppState } from '@/store';
 import styled from 'styled-components';
+import { useSelector } from 'react-redux';
 import { useRouter } from 'next/navigation';
-import { SectionTitle } from '@/reuseable-components';
 import { AddDestinationModal } from './add-destination-modal';
 import { AddDestinationButton, SetupHeader } from '@/components';
+import { NotificationNote, SectionTitle } from '@/reuseable-components';
+import { ConfiguredDestinationsList } from './configured-destinations-list';
 
 const AddDestinationButtonWrapper = styled.div`
   width: 100%;
@@ -19,10 +22,35 @@ const HeaderWrapper = styled.div`
   width: 100vw;
 `;
 
+const NotificationNoteWrapper = styled.div`
+  margin-top: 24px;
+`;
+
 export function ChooseDestinationContainer() {
   const [isModalOpen, setModalOpen] = useState(false);
 
   const router = useRouter();
+
+  const sourcesList = useSelector(({ app }) => app.sources);
+  const destinations = useSelector(
+    ({ app }: { app: IAppState }) => app.configuredDestinationsList
+  );
+  const isSourcesListEmpty = () => {
+    const sourceLen = Object.keys(sourcesList).length === 0;
+    if (sourceLen) {
+      return true;
+    }
+
+    let empty = true;
+    for (const source in sourcesList) {
+      if (sourcesList[source].length > 0) {
+        empty = false;
+        break;
+      }
+    }
+    return empty;
+  };
+
   const handleOpenModal = () => setModalOpen(true);
   const handleCloseModal = () => setModalOpen(false);
 
@@ -50,9 +78,15 @@ export function ChooseDestinationContainer() {
           title="Configure destinations"
           description="Add backend destinations where collected data will be sent and configure their settings."
         />
+        {isSourcesListEmpty() && destinations.length === 0 && (
+          <NotificationNoteWrapper>
+            <NotificationNote type={'warning'} text={'No sources selected.'} />
+          </NotificationNoteWrapper>
+        )}
         <AddDestinationButtonWrapper>
           <AddDestinationButton onClick={() => handleOpenModal()} />
         </AddDestinationButtonWrapper>
+        <ConfiguredDestinationsList data={destinations} />
         <AddDestinationModal
           isModalOpen={isModalOpen}
           handleCloseModal={handleCloseModal}
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 94834a032..16107b315 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -1,15 +1,11 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { useCreateSource } from '../sources';
 import { useCreateDestination } from '../destinations';
 
-import {
-  K8sActualSource,
-  DestinationInput,
-  PersistNamespaceItemInput,
-} from '@/types';
+import { DestinationInput, PersistNamespaceItemInput } from '@/types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNamespace } from '../compute-platform';
-import { IAppState, resetState } from '@/store';
+import { IAppState, resetSources } from '@/store';
 
 type ConnectEnvResult = {
   success: boolean;
@@ -38,7 +34,7 @@ export const useConnectEnv = () => {
   );
 
   const connectEnv = useCallback(
-    async (destination: DestinationInput) => {
+    async (destination: DestinationInput, callback?: () => void) => {
       setLoading(true);
       setError(null);
       setResult(null);
@@ -71,14 +67,14 @@ export const useConnectEnv = () => {
             );
           }
         }
-        dispatch(resetState());
+        dispatch(resetSources());
         // Create destination
         const destinationId = await createNewDestination(destination);
 
         if (!destinationId) {
           throw new Error('Error creating destination.');
         }
-
+        callback && callback();
         setResult({
           success: true,
           destinationId,
diff --git a/frontend/webapp/public/icons/notification/warning-icon.svg b/frontend/webapp/public/icons/notification/warning-icon.svg
new file mode 100644
index 000000000..eb152a716
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/warning-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M5.33333 2.66669C4.22876 2.66669 3.33333 3.46263 3.33333 4.44446V6.22224C3.33333 7.20408 2.4379 8.00002 1.33333 8.00002C2.4379 8.00002 3.33333 8.79596 3.33333 9.7778V11.5556C3.33333 12.5374 4.22876 13.3334 5.33333 13.3334M10.6667 2.66669C11.7712 2.66669 12.6667 3.46263 12.6667 4.44446V6.22224C12.6667 7.20408 13.5621 8.00002 14.6667 8.00002C13.5621 8.00002 12.6667 8.79596 12.6667 9.7778V11.5556C12.6667 12.5374 11.7712 13.3334 10.6667 13.3334" stroke="#E9CF35" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 1839e88d6..9054ef153 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -12,3 +12,4 @@ export * from './modal';
 export * from './navigation-buttons';
 export * from './tag';
 export * from './checkbox-list';
+export * from './notification-note';
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
new file mode 100644
index 000000000..385994f26
--- /dev/null
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import Image from 'next/image';
+import { Text } from '../text';
+
+// Define the notification types
+type NotificationType = 'warning' | 'error' | 'success' | 'info';
+
+interface NotificationProps {
+  type: NotificationType;
+  text: string;
+}
+
+const NotificationContainer = styled.div<{ type: NotificationType }>`
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 32px;
+
+  background-color: ${({ type }) => {
+    switch (type) {
+      case 'warning':
+        return '#472300'; // Orange
+      case 'error':
+        return '#FF4C4C'; // Red
+      case 'success':
+        return '#28A745'; // Green
+      case 'info':
+        return '#2B2D66'; // Blue
+      default:
+        return '#2B2D66'; // Default to info color
+    }
+  }};
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Title = styled(Text)<{ type: NotificationType }>`
+  font-size: 14px;
+  color: ${({ type }) => {
+    switch (type) {
+      case 'warning':
+        return '#E9CF35'; // Orange
+      case 'error':
+        return '#FF4C4C'; // Red
+      case 'success':
+        return '#28A745'; // Green
+      case 'info':
+        return '#2B2D66'; // Blue
+      default:
+        return '#2B2D66'; // Default to info color
+    }
+  }};
+`;
+
+// Icons can be dynamically rendered based on the type
+const NotificationIcon = ({ type }: { type: NotificationType }) => {
+  switch (type) {
+    case 'warning':
+      return (
+        <Image
+          src="/icons/notification/warning-icon.svg"
+          alt="warning"
+          width={16}
+          height={16}
+        />
+      );
+    case 'error':
+      return (
+        <Image
+          src="/icons/notification/error-icon.svg"
+          alt="error"
+          width={16}
+          height={16}
+        />
+      );
+    case 'success':
+      return (
+        <Image
+          src="/icons/notification/success-icon.svg"
+          alt="success"
+          width={16}
+          height={16}
+        />
+      );
+    case 'info':
+    default:
+      return (
+        <Image src="/icons/info-icon.svg" alt="info" width={16} height={16} />
+      );
+  }
+};
+
+const NotificationNote: React.FC<NotificationProps> = ({ type, text }) => {
+  return (
+    <NotificationContainer type={type}>
+      <IconWrapper>
+        <NotificationIcon type={type} />
+      </IconWrapper>
+      <Title type={type}>{text}</Title>
+    </NotificationContainer>
+  );
+};
+
+export { NotificationNote };
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
index 73364d103..3856944b6 100644
--- a/frontend/webapp/store/slices/app-slice.ts
+++ b/frontend/webapp/store/slices/app-slice.ts
@@ -1,4 +1,4 @@
-import { K8sActualSource } from '@/types';
+import { ConfiguredDestination, K8sActualSource } from '@/types';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
@@ -7,11 +7,13 @@ export interface IAppState {
     [key: string]: K8sActualSource[];
   };
   namespaceFutureSelectAppsList: { [key: string]: boolean };
+  configuredDestinationsList: ConfiguredDestination[];
 }
 
 const initialState: IAppState = {
   sources: {},
   namespaceFutureSelectAppsList: {},
+  configuredDestinationsList: [],
 };
 
 export const appSlice = createSlice({
@@ -30,17 +32,42 @@ export const appSlice = createSlice({
     ) => {
       state.namespaceFutureSelectAppsList = action.payload;
     },
-    // New resetState reducer to reset the state to initial values
+    addConfiguredDestination: (
+      state,
+      action: PayloadAction<ConfiguredDestination>
+    ) => {
+      state.configuredDestinationsList.push(action.payload);
+    },
+
+    setConfiguredDestinationsList: (
+      state,
+      action: PayloadAction<ConfiguredDestination[]>
+    ) => {
+      state.configuredDestinationsList = action.payload;
+    },
+    resetSources: (state) => {
+      state.sources = initialState.sources;
+      state.namespaceFutureSelectAppsList =
+        initialState.namespaceFutureSelectAppsList;
+    },
     resetState: (state) => {
       state.sources = initialState.sources;
       state.namespaceFutureSelectAppsList =
         initialState.namespaceFutureSelectAppsList;
+      state.configuredDestinationsList =
+        initialState.configuredDestinationsList;
     },
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { setSources, setNamespaceFutureSelectAppsList, resetState } =
-  appSlice.actions;
+export const {
+  setSources,
+  setNamespaceFutureSelectAppsList,
+  setConfiguredDestinationsList,
+  addConfiguredDestination,
+  resetState,
+  resetSources,
+} = appSlice.actions;
 
 export const appReducer = appSlice.reducer;
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 80bcfb7e0..c08f24ba6 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -61,6 +61,20 @@ export interface DestinationInput {
   fields: { key: string; value: any }[];
 }
 
+export type DestinationTypeDetail = {
+  title: string;
+  value: string;
+};
+
+export type ConfiguredDestination = {
+  displayName: string;
+  category: string;
+  type: string;
+  exportedSignals: ExportedSignals;
+  imageUrl: string;
+  destinationTypeDetails: DestinationTypeDetail[];
+};
+
 export interface DestinationType {
   fields: any;
   display_name: string;

From bc58f29b78408f36bcbdb3dd6f1938e4f6340bce Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 19 Aug 2024 10:18:40 +0300
Subject: [PATCH 166/374] chore: init

---
 .../add-destination/choose-destination-modal-body/index.tsx     | 2 +-
 .../add-destination/connect-destination-modal-body/index.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index ae32bfb44..294c345f3 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -79,7 +79,7 @@ export function ChooseDestinationModalBody({
   return (
     <Container>
       <SideMenuWrapper>
-        <SideMenu data={SIDE_MENU_DATA} />
+        <SideMenu data={SIDE_MENU_DATA} currentStep={1} />
       </SideMenuWrapper>
       <Body>
         <SectionTitle
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 782dbc5a3..b99b4159f 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -157,7 +157,7 @@ export function ConnectDestinationModalBody({
   return (
     <Container>
       <SideMenuWrapper>
-        <SideMenu data={SIDE_MENU_DATA} />
+        <SideMenu data={SIDE_MENU_DATA} currentStep={2} />
       </SideMenuWrapper>
 
       <Body>

From c330de67c0b1bca6aac539a689de0f5878586786 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 19 Aug 2024 15:33:17 +0300
Subject: [PATCH 167/374] chore: wip

---
 frontend/graph/generated.go                   | 442 +++++++++++++++++-
 frontend/graph/model/models_gen.go            |   8 +
 frontend/graph/schema.graphqls                |  11 +
 frontend/graph/schema.resolvers.go            |  39 +-
 .../services/test_connection/conversion.go    |  58 +++
 .../test_connection/otlp_test_connection.go   |  37 ++
 .../otlphttp_test_connection.go               |  36 ++
 .../test_connection/test_connection.go        | 157 +++++++
 frontend/services/test_connection/utils.go    |  43 ++
 .../services/test_connection/utils_test.go    |  56 +++
 .../configured-destination-fields/index.tsx   |   2 +-
 .../create.connection.form.tsx                |  11 +-
 .../connect-destination-modal-body/index.tsx  |  37 +-
 .../add-destination/test-connection/index.tsx |  80 ++++
 .../webapp/graphql/mutations/destination.ts   |  12 +
 frontend/webapp/hooks/destinations/index.ts   |   2 +-
 .../hooks/destinations/useCheckConnection.ts  |  29 --
 .../hooks/destinations/useTestConnection.ts   |  42 ++
 .../icons/common/connection-succeeded.svg     |   3 +
 .../public/icons/notification/error-icon.svg  |   3 +
 .../fade-loader/helpers/animation.ts          |  27 ++
 .../fade-loader/helpers/unitConverter.ts      |  77 +++
 .../fade-loader/index.tsx                     | 137 ++++++
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../notification-note/index.tsx               |  13 +-
 .../section-title/index.tsx                   |  24 +-
 frontend/webapp/types/destinations.ts         |   7 +-
 27 files changed, 1322 insertions(+), 72 deletions(-)
 create mode 100644 frontend/services/test_connection/conversion.go
 create mode 100644 frontend/services/test_connection/otlp_test_connection.go
 create mode 100644 frontend/services/test_connection/otlphttp_test_connection.go
 create mode 100644 frontend/services/test_connection/test_connection.go
 create mode 100644 frontend/services/test_connection/utils.go
 create mode 100644 frontend/services/test_connection/utils_test.go
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
 delete mode 100644 frontend/webapp/hooks/destinations/useCheckConnection.ts
 create mode 100644 frontend/webapp/hooks/destinations/useTestConnection.ts
 create mode 100644 frontend/webapp/public/icons/common/connection-succeeded.svg
 create mode 100644 frontend/webapp/public/icons/notification/error-icon.svg
 create mode 100644 frontend/webapp/reuseable-components/fade-loader/helpers/animation.ts
 create mode 100644 frontend/webapp/reuseable-components/fade-loader/helpers/unitConverter.ts
 create mode 100644 frontend/webapp/reuseable-components/fade-loader/index.tsx

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index c6b8cc0c4..23247a13c 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -141,9 +141,10 @@ type ComplexityRoot struct {
 	}
 
 	Mutation struct {
-		CreateNewDestination func(childComplexity int, destination model.DestinationInput) int
-		PersistK8sNamespace  func(childComplexity int, namespace model.PersistNamespaceItemInput) int
-		PersistK8sSources    func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
+		CreateNewDestination         func(childComplexity int, destination model.DestinationInput) int
+		PersistK8sNamespace          func(childComplexity int, namespace model.PersistNamespaceItemInput) int
+		PersistK8sSources            func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
+		TestConnectionForDestination func(childComplexity int, destination model.DestinationInput) int
 	}
 
 	ObservabilitySignalSupport struct {
@@ -167,6 +168,14 @@ type ComplexityRoot struct {
 		Metrics func(childComplexity int) int
 		Traces  func(childComplexity int) int
 	}
+
+	TestConnectionResponse struct {
+		DestinationType func(childComplexity int) int
+		Message         func(childComplexity int) int
+		Reason          func(childComplexity int) int
+		StatusCode      func(childComplexity int) int
+		Succeeded       func(childComplexity int) int
+	}
 }
 
 type ComputePlatformResolver interface {
@@ -188,6 +197,7 @@ type MutationResolver interface {
 	CreateNewDestination(ctx context.Context, destination model.DestinationInput) (*model.Destination, error)
 	PersistK8sNamespace(ctx context.Context, namespace model.PersistNamespaceItemInput) (bool, error)
 	PersistK8sSources(ctx context.Context, namespace string, sources []*model.PersistNamespaceSourceInput) (bool, error)
+	TestConnectionForDestination(ctx context.Context, destination model.DestinationInput) (*model.TestConnectionResponse, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
@@ -623,6 +633,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.PersistK8sSources(childComplexity, args["namespace"].(string), args["sources"].([]*model.PersistNamespaceSourceInput)), true
 
+	case "Mutation.testConnectionForDestination":
+		if e.complexity.Mutation.TestConnectionForDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_testConnectionForDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.TestConnectionForDestination(childComplexity, args["destination"].(model.DestinationInput)), true
+
 	case "ObservabilitySignalSupport.supported":
 		if e.complexity.ObservabilitySignalSupport.Supported == nil {
 			break
@@ -698,6 +720,41 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.SupportedSignals.Traces(childComplexity), true
 
+	case "TestConnectionResponse.destinationType":
+		if e.complexity.TestConnectionResponse.DestinationType == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.DestinationType(childComplexity), true
+
+	case "TestConnectionResponse.message":
+		if e.complexity.TestConnectionResponse.Message == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.Message(childComplexity), true
+
+	case "TestConnectionResponse.reason":
+		if e.complexity.TestConnectionResponse.Reason == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.Reason(childComplexity), true
+
+	case "TestConnectionResponse.statusCode":
+		if e.complexity.TestConnectionResponse.StatusCode == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.StatusCode(childComplexity), true
+
+	case "TestConnectionResponse.succeeded":
+		if e.complexity.TestConnectionResponse.Succeeded == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.Succeeded(childComplexity), true
+
 	}
 	return 0, false
 }
@@ -948,6 +1005,21 @@ func (ec *executionContext) field_Mutation_persistK8sSources_args(ctx context.Co
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_testConnectionForDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.DestinationInput
+	if tmp, ok := rawArgs["destination"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
+		arg0, err = ec.unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destination"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Query___type_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -3594,6 +3666,73 @@ func (ec *executionContext) fieldContext_Mutation_persistK8sSources(ctx context.
 	return fc, nil
 }
 
+func (ec *executionContext) _Mutation_testConnectionForDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_testConnectionForDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().TestConnectionForDestination(rctx, fc.Args["destination"].(model.DestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.TestConnectionResponse)
+	fc.Result = res
+	return ec.marshalNTestConnectionResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐTestConnectionResponse(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_testConnectionForDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "succeeded":
+				return ec.fieldContext_TestConnectionResponse_succeeded(ctx, field)
+			case "statusCode":
+				return ec.fieldContext_TestConnectionResponse_statusCode(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_TestConnectionResponse_destinationType(ctx, field)
+			case "message":
+				return ec.fieldContext_TestConnectionResponse_message(ctx, field)
+			case "reason":
+				return ec.fieldContext_TestConnectionResponse_reason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type TestConnectionResponse", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_testConnectionForDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Context, field graphql.CollectedField, obj *model.ObservabilitySignalSupport) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
 	if err != nil {
@@ -4200,6 +4339,217 @@ func (ec *executionContext) fieldContext_SupportedSignals_logs(_ context.Context
 	return fc, nil
 }
 
+func (ec *executionContext) _TestConnectionResponse_succeeded(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_succeeded(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Succeeded, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_succeeded(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_statusCode(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_statusCode(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.StatusCode, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(int)
+	fc.Result = res
+	return ec.marshalNInt2int(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_statusCode(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_destinationType(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_destinationType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DestinationType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_destinationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_message(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_message(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Message, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_reason(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_reason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Reason, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) ___Directive_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext___Directive_name(ctx, field)
 	if err != nil {
@@ -7183,6 +7533,13 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "testConnectionForDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_testConnectionForDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -7464,6 +7821,56 @@ func (ec *executionContext) _SupportedSignals(ctx context.Context, sel ast.Selec
 	return out
 }
 
+var testConnectionResponseImplementors = []string{"TestConnectionResponse"}
+
+func (ec *executionContext) _TestConnectionResponse(ctx context.Context, sel ast.SelectionSet, obj *model.TestConnectionResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, testConnectionResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("TestConnectionResponse")
+		case "succeeded":
+			out.Values[i] = ec._TestConnectionResponse_succeeded(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "statusCode":
+			out.Values[i] = ec._TestConnectionResponse_statusCode(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "destinationType":
+			out.Values[i] = ec._TestConnectionResponse_destinationType(ctx, field, obj)
+		case "message":
+			out.Values[i] = ec._TestConnectionResponse_message(ctx, field, obj)
+		case "reason":
+			out.Values[i] = ec._TestConnectionResponse_reason(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var __DirectiveImplementors = []string{"__Directive"}
 
 func (ec *executionContext) ___Directive(ctx context.Context, sel ast.SelectionSet, obj *introspection.Directive) graphql.Marshaler {
@@ -8060,6 +8467,21 @@ func (ec *executionContext) marshalNInstallationStatus2githubᚗcomᚋodigosᚑi
 	return v
 }
 
+func (ec *executionContext) unmarshalNInt2int(ctx context.Context, v interface{}) (int, error) {
+	res, err := graphql.UnmarshalInt(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNInt2int(ctx context.Context, sel ast.SelectionSet, v int) graphql.Marshaler {
+	res := graphql.MarshalInt(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
 func (ec *executionContext) marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx context.Context, sel ast.SelectionSet, v []*model.K8sActualNamespace) graphql.Marshaler {
 	ret := make(graphql.Array, len(v))
 	var wg sync.WaitGroup
@@ -8238,6 +8660,20 @@ func (ec *executionContext) marshalNSupportedSignals2githubᚗcomᚋodigosᚑio
 	return ec._SupportedSignals(ctx, sel, &v)
 }
 
+func (ec *executionContext) marshalNTestConnectionResponse2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐTestConnectionResponse(ctx context.Context, sel ast.SelectionSet, v model.TestConnectionResponse) graphql.Marshaler {
+	return ec._TestConnectionResponse(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNTestConnectionResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐTestConnectionResponse(ctx context.Context, sel ast.SelectionSet, v *model.TestConnectionResponse) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._TestConnectionResponse(ctx, sel, v)
+}
+
 func (ec *executionContext) marshalN__Directive2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirective(ctx context.Context, sel ast.SelectionSet, v introspection.Directive) graphql.Marshaler {
 	return ec.___Directive(ctx, sel, &v)
 }
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index e09092c8b..e71638825 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -124,6 +124,14 @@ type SourceContainerRuntimeDetails struct {
 	Language      string `json:"language"`
 }
 
+type TestConnectionResponse struct {
+	Succeeded       bool    `json:"succeeded"`
+	StatusCode      int     `json:"statusCode"`
+	DestinationType *string `json:"destinationType,omitempty"`
+	Message         *string `json:"message,omitempty"`
+	Reason          *string `json:"reason,omitempty"`
+}
+
 type ComputePlatformType string
 
 const (
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 95de2251e..9cfed5381 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -201,6 +201,14 @@ input PersistNamespaceSourceInput {
   selected: Boolean
 }
 
+type TestConnectionResponse {
+  succeeded: Boolean!
+  statusCode: Int!
+  destinationType: String
+  message: String
+  reason: String
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
@@ -215,4 +223,7 @@ type Mutation {
     namespace: String!
     sources: [PersistNamespaceSourceInput!]!
   ): Boolean!
+  testConnectionForDestination(
+    destination: DestinationInput!
+  ): TestConnectionResponse!
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 2106e1c71..910c5273f 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -16,6 +16,7 @@ import (
 	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
 	"github.com/odigos-io/odigos/frontend/services"
+	testconnection "github.com/odigos-io/odigos/frontend/services/test_connection"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/types"
@@ -23,7 +24,6 @@ import (
 
 // K8sActualNamespace is the resolver for the k8sActualNamespace field.
 func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error) {
-
 	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, nil)
 	if err != nil {
 		return nil, err
@@ -195,6 +195,43 @@ func (r *mutationResolver) PersistK8sSources(ctx context.Context, namespace stri
 	return true, nil
 }
 
+// TestConnectionForDestination is the resolver for the testConnectionForDestination field.
+func (r *mutationResolver) TestConnectionForDestination(ctx context.Context, input model.DestinationInput) (*model.TestConnectionResponse, error) {
+	destType := common.DestinationType(input.Type)
+
+	destConfig, err := services.GetDestinationTypeConfig(destType)
+	if err != nil {
+		return nil, err
+	}
+
+	if !destConfig.Spec.TestConnectionSupported {
+		return nil, fmt.Errorf("destination type %s does not support test connection", input.Type)
+	}
+
+	configurer, err := testconnection.ConvertDestinationToConfigurer(input)
+	if err != nil {
+		return nil, err
+	}
+
+	// Assuming testconnection.TestConnection returns a struct with fields similar to res.Succeeded, res.StatusCode, etc.
+	res := testconnection.TestConnection(ctx, configurer)
+	if !res.Succeeded {
+		return &model.TestConnectionResponse{
+			Succeeded:       false,
+			StatusCode:      res.StatusCode,
+			DestinationType: (*string)(&res.DestinationType),
+			Message:         &res.Message,
+			Reason:          (*string)(&res.Reason),
+		}, nil
+	}
+
+	return &model.TestConnectionResponse{
+		Succeeded:       true,
+		StatusCode:      200,
+		DestinationType: (*string)(&res.DestinationType),
+	}, nil
+}
+
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
 	namespacesResponse := services.GetK8SNamespaces(ctx)
diff --git a/frontend/services/test_connection/conversion.go b/frontend/services/test_connection/conversion.go
new file mode 100644
index 000000000..aa26d882b
--- /dev/null
+++ b/frontend/services/test_connection/conversion.go
@@ -0,0 +1,58 @@
+package testconnection
+
+import (
+	"errors"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/config"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+)
+
+// Implement the ExporterConfigurer interface
+type DestinationConfigurer struct {
+	destination model.DestinationInput
+}
+
+func (dc *DestinationConfigurer) GetSignals() []common.ObservabilitySignal {
+	var signals []common.ObservabilitySignal
+	if dc.destination.ExportedSignals.Traces {
+		signals = append(signals, common.TracesObservabilitySignal)
+	}
+	if dc.destination.ExportedSignals.Metrics {
+		signals = append(signals, common.MetricsObservabilitySignal)
+	}
+	if dc.destination.ExportedSignals.Logs {
+		signals = append(signals, common.LogsObservabilitySignal)
+	}
+	return signals
+}
+
+func (dc *DestinationConfigurer) GetType() common.DestinationType {
+	// Convert the string type to common.DestinationType
+	return common.DestinationType(dc.destination.Type)
+}
+
+func (dc *DestinationConfigurer) GetID() string {
+	// Generate a unique ID for the Exporter, you can base this on the destination name or type
+	return dc.destination.Name
+}
+
+func (dc *DestinationConfigurer) GetConfig() map[string]string {
+	configMap := make(map[string]string)
+	for _, field := range dc.destination.Fields {
+		configMap[field.Key] = field.Value
+	}
+	return configMap
+}
+
+func ConvertDestinationToConfigurer(destination model.DestinationInput) (config.ExporterConfigurer, error) {
+
+	if destination.Type == "" {
+		return nil, errors.New("destination type is required")
+	}
+
+	// Additional validation or conversion logic can be added here if needed
+
+	// Return a new instance of DestinationConfigurer which implements ExporterConfigurer
+	return &DestinationConfigurer{destination: destination}, nil
+}
diff --git a/frontend/services/test_connection/otlp_test_connection.go b/frontend/services/test_connection/otlp_test_connection.go
new file mode 100644
index 000000000..6a137e31b
--- /dev/null
+++ b/frontend/services/test_connection/otlp_test_connection.go
@@ -0,0 +1,37 @@
+package testconnection
+
+import (
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/exporter"
+
+	"go.opentelemetry.io/collector/exporter/otlpexporter"
+)
+
+var _ ExporterConnectionTester = &otlpExporterConnectionTester{}
+
+type otlpExporterConnectionTester struct {
+	f exporter.Factory
+}
+
+func NewOTLPTester() *otlpExporterConnectionTester {
+	return &otlpExporterConnectionTester{
+		f: otlpexporter.NewFactory(),
+	}
+}
+
+func (t *otlpExporterConnectionTester) Factory() exporter.Factory {
+	return t.f
+}
+
+func (t *otlpExporterConnectionTester) ModifyConfigForConnectionTest(cfg component.Config) component.Config {
+	otlpConf, ok := cfg.(*otlpexporter.Config)
+	if !ok {
+		return nil
+	}
+
+	// currently using the default timeout config of the collector - 5 seconds
+	// Avoid batching and retries
+	otlpConf.QueueConfig.Enabled = false
+	otlpConf.RetryConfig.Enabled = false
+	return otlpConf
+}
diff --git a/frontend/services/test_connection/otlphttp_test_connection.go b/frontend/services/test_connection/otlphttp_test_connection.go
new file mode 100644
index 000000000..42c12c166
--- /dev/null
+++ b/frontend/services/test_connection/otlphttp_test_connection.go
@@ -0,0 +1,36 @@
+package testconnection
+
+import (
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/exporter"
+	"go.opentelemetry.io/collector/exporter/otlphttpexporter"
+)
+
+var _ ExporterConnectionTester = &otlphttpExporterConnectionTester{}
+
+type otlphttpExporterConnectionTester struct {
+	f exporter.Factory
+}
+
+func NewOTLPHTTPTester() *otlphttpExporterConnectionTester {
+	return &otlphttpExporterConnectionTester{
+		f: otlphttpexporter.NewFactory(),
+	}
+}
+
+func (t *otlphttpExporterConnectionTester) Factory() exporter.Factory {
+	return t.f
+}
+
+func (t *otlphttpExporterConnectionTester) ModifyConfigForConnectionTest(cfg component.Config) component.Config {
+	otlpConf, ok := cfg.(*otlphttpexporter.Config)
+	if !ok {
+		return nil
+	}
+
+	// currently using the default timeout config of the collector - 5 seconds
+	// Avoid batching and retries
+	otlpConf.QueueConfig.Enabled = false
+	otlpConf.RetryConfig.Enabled = false
+	return otlpConf
+}
diff --git a/frontend/services/test_connection/test_connection.go b/frontend/services/test_connection/test_connection.go
new file mode 100644
index 000000000..3d1acdcc0
--- /dev/null
+++ b/frontend/services/test_connection/test_connection.go
@@ -0,0 +1,157 @@
+package testconnection
+
+import (
+	"context"
+	"fmt"
+	"net/http"
+	"strings"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/config"
+
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/confmap"
+	"go.opentelemetry.io/collector/exporter"
+	"go.opentelemetry.io/collector/exporter/exportertest"
+	"go.opentelemetry.io/collector/pdata/ptrace"
+)
+
+var (
+	configres         map[common.DestinationType]config.Configer
+	connectionTesters = []ExporterConnectionTester{
+		NewOTLPTester(),     // "otlp/" prefix
+		NewOTLPHTTPTester(), // "otlphttp/" prefix
+	}
+)
+
+func init() {
+	var err error
+	configres, err = config.LoadConfigers()
+	if err != nil {
+		panic(1)
+	}
+}
+
+type TestConnectionErrorReason string
+
+const (
+	UnKnownDestination      TestConnectionErrorReason = "unknown destination"
+	InvalidConfig           TestConnectionErrorReason = "invalid config"
+	UnsupportedExporterType TestConnectionErrorReason = "unsupported exporter type"
+	FailedToConnect         TestConnectionErrorReason = "failed to connect"
+)
+
+type TestConnectionResult struct {
+	Succeeded       bool
+	Message         string
+	Reason          TestConnectionErrorReason
+	StatusCode      int
+	DestinationType common.DestinationType
+}
+
+type ExporterConnectionTester interface {
+	// Factory returns the exporter factory for the exporter type.
+	// This is used to create the exporter instance for testing the connection.
+	Factory() exporter.Factory
+	// ModifyConfigForConnectionTest modifies the exporter configuration for testing the connection.
+	// Since the default configuration may have batching, retries, etc. which may not be suitable for testing the connection.
+	ModifyConfigForConnectionTest(component.Config) component.Config
+}
+
+func getConnectionTester(exporterID string) ExporterConnectionTester {
+	for _, tester := range connectionTesters {
+		prefix := fmt.Sprintf("%s/", tester.Factory().Type().String())
+		if strings.HasPrefix(exporterID, prefix) {
+			return tester
+		}
+	}
+	return nil
+}
+
+func TestConnection(ctx context.Context, dest config.ExporterConfigurer) TestConnectionResult {
+	destType := dest.GetType()
+	configer, ok := configres[destType]
+	if !ok {
+		return TestConnectionResult{Succeeded: false, Reason: UnKnownDestination, DestinationType: destType, StatusCode: http.StatusNotImplemented}
+	}
+
+	currentConfig := config.Config{
+		Exporters: make(config.GenericMap),
+		Service: config.Service{
+			Pipelines: make(map[string]config.Pipeline),
+		},
+	}
+	err := configer.ModifyConfig(dest, &currentConfig)
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	exporters := currentConfig.Exporters
+	if len(exporters) == 0 {
+		return TestConnectionResult{Message: "no exporters found in config", Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError, Succeeded: false}
+	}
+
+	var exporterRawConfig config.GenericMap
+	var connectionTester ExporterConnectionTester
+	foundTester := false
+	for componentID, cfg := range exporters {
+		gm, ok := cfg.(config.GenericMap)
+		if !ok {
+			continue
+		}
+		ct := getConnectionTester(componentID)
+		if ct != nil {
+			connectionTester = ct
+			foundTester = true
+			exporterRawConfig = gm
+			break
+		}
+	}
+
+	if !foundTester {
+		return TestConnectionResult{Succeeded: false, Message: "no supported exporter found in config", Reason: UnsupportedExporterType, DestinationType: destType, StatusCode: http.StatusNotFound}
+	}
+
+	// before testing the connection, replace placeholders (if exists) in the config with actual values
+	replacePlaceholders(exporterRawConfig, dest.GetConfig())
+	defaultConfig := connectionTester.Factory().CreateDefaultConfig()
+	connectionTester.ModifyConfigForConnectionTest(defaultConfig)
+
+	// convert the user provided fields to a collector config
+	exportersConf := confmap.NewFromStringMap(exporterRawConfig)
+	if exportersConf == nil {
+		return TestConnectionResult{Succeeded: false, Message: "failed to create exporter config", Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	// unmarshal the user provided configuration into the default one, merging them
+	err = exportersConf.Unmarshal(&defaultConfig)
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	if validator, ok := defaultConfig.(component.ConfigValidator); ok {
+		// if the component has a Validate method, call it to validate the configuration
+		err = validator.Validate()
+		if err != nil {
+			return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+		}
+	}
+
+	exporter, err := connectionTester.Factory().CreateTracesExporter(ctx, exportertest.NewNopCreateSettings(), defaultConfig)
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	err = exporter.Start(ctx, nil)
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: FailedToConnect, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	defer exporter.Shutdown(ctx)
+	err = exporter.ConsumeTraces(ctx, ptrace.NewTraces())
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: FailedToConnect, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	return TestConnectionResult{Succeeded: true, DestinationType: destType, StatusCode: http.StatusOK}
+}
diff --git a/frontend/services/test_connection/utils.go b/frontend/services/test_connection/utils.go
new file mode 100644
index 000000000..aca670899
--- /dev/null
+++ b/frontend/services/test_connection/utils.go
@@ -0,0 +1,43 @@
+package testconnection
+
+import (
+	"regexp"
+	"strings"
+
+	"github.com/odigos-io/odigos/common/config"
+)
+
+// replacePlaceholders replaces placeholder values in the given GenericMap with values from the fields map.
+// It traverses the GenericMap recursively and processes each string value as a template.
+// If a string value contains placeholders in the format {KEY}, it replaces them with corresponding values from the fields map.
+// The function supports nested GenericMaps and map[string]interface{} structures.
+func replacePlaceholders(gmap config.GenericMap, fields map[string]string) {
+	// Regular expression to match the ${KEY} pattern
+	re := regexp.MustCompile(`\$\{([^}]+)\}`)
+	
+	for key, value := range gmap {
+		switch v := value.(type) {
+		case string:
+			// Find all matches of the pattern ${KEY}
+			matches := re.FindAllStringSubmatch(v, -1)
+			for _, match := range matches {
+				if len(match) == 2 {
+					// match[0] is the entire match (${KEY}), match[1] is the key (KEY)
+					extractedKey := match[1]
+					if replacement, ok := fields[extractedKey]; ok {
+						// Replace only the ${KEY} part in the original string
+						v = strings.Replace(v, match[0], replacement, -1)
+						// Update the map with the new value
+						gmap[key] = v
+					}
+				}
+			}
+		case config.GenericMap:
+			replacePlaceholders(v, fields)
+		case map[string]interface{}:
+			replacePlaceholders(v, fields)
+		default:
+			// If the value is not a string or a map, we leave it as it is
+		}
+	}
+}
\ No newline at end of file
diff --git a/frontend/services/test_connection/utils_test.go b/frontend/services/test_connection/utils_test.go
new file mode 100644
index 000000000..48787fc9c
--- /dev/null
+++ b/frontend/services/test_connection/utils_test.go
@@ -0,0 +1,56 @@
+package testconnection
+
+import (
+	"testing"
+
+	"github.com/odigos-io/odigos/common/config"
+	"github.com/stretchr/testify/assert"
+)
+
+func TestReplacePlaceholders(t *testing.T) {
+	// Fields map with replacements
+	fields := map[string]string{
+		"MY_KEY1": "MY_VALUE1",
+		"MY_KEY2": "MY_VALUE2",
+	}
+
+	gmap := config.GenericMap{
+		"key1": "${MY_KEY1}",
+		"key2": 123,
+		"key3": config.GenericMap{
+			"nestedKey1": "${MY_KEY2}", // replaced with MY_VALUE2
+			"nestedKey2": "someValue",  // no replacement
+			"nestedKey3": "${MY_KEY3}", // no replacement
+			"nestedKey4": "some prefix: ${MY_KEY2}", // replaced with "some prefix: MY_VALUE2"
+		},
+	}
+
+	replacePlaceholders(gmap, fields)
+	assert.Equal(t, "MY_VALUE1", gmap["key1"])
+	assert.Equal(t, config.GenericMap{
+		"nestedKey1": "MY_VALUE2",
+		"nestedKey2": "someValue",
+		"nestedKey3": "${MY_KEY3}",
+		"nestedKey4": "some prefix: MY_VALUE2",
+	}, gmap["key3"])
+	assert.Equal(t, 123, gmap["key2"])
+
+	// don't change the original map if no placeholders are found
+	gmap = config.GenericMap{
+		"key1": "value1",
+		"key2": 123,
+		"key3": config.GenericMap{
+			"nestedKey1": "value2",
+			"nestedKey2": "someValue",
+		},
+	}
+
+	replacePlaceholders(gmap, fields)
+	assert.Equal(t, "value1", gmap["key1"])
+	assert.Equal(t, config.GenericMap{
+		"nestedKey1": "value2",
+		"nestedKey2": "someValue",
+	}, gmap["key3"])
+	assert.Equal(t, 123, gmap["key2"])
+
+}
\ No newline at end of file
diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
index 926dc0fc9..b5d55f571 100644
--- a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
+++ b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
@@ -23,9 +23,9 @@ const ItemTitle = styled(Text)`
 
 const ItemValue = styled(Text)`
   word-break: break-all;
+  width: 90%;
   color: ${({ theme }) => theme.colors.text};
   font-size: 12px;
-  font-weight: 300;
   line-height: 18px;
 `;
 
diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
index ef12a6b33..1c50b0f4b 100644
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
+++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 import theme from '@/styles/palette';
-import { useCheckConnection, useKeyDown } from '@/hooks';
+import { useTestConnection, useKeyDown } from '@/hooks';
 import { Field, SelectedDestination } from '@/types';
 import { renderFields } from './dynamic.fields';
 import {
@@ -81,7 +81,7 @@ export function CreateConnectionForm({
     destinationNameValue || ''
   );
 
-  const { checkDestinationConnection, isLoading } = useCheckConnection();
+  const { testConnection } = useTestConnection();
 
   useEffect(() => {
     setInitialDynamicFields();
@@ -209,7 +209,7 @@ export function CreateConnectionForm({
       type: destination.type,
     };
     try {
-      checkDestinationConnection(body, setIsConnectionTested);
+      // testConnection(body);
     } catch (error) {}
   }
 
@@ -251,7 +251,8 @@ export function CreateConnectionForm({
             disabled={isCreateButtonDisabled}
             onClick={handleCheckDestinationConnection}
           >
-            {isLoading ? (
+            <div></div>
+            {/* {isLoading ? (
               <KeyvalLoader width={9} height={9} />
             ) : isConnectionTested.enabled === null ? (
               <KeyvalText color={theme.text.secondary} size={14} weight={600}>
@@ -265,7 +266,7 @@ export function CreateConnectionForm({
               <KeyvalText color={theme.colors.error} size={14} weight={600}>
                 {isConnectionTested.message}
               </KeyvalText>
-            )}
+            )} */}
           </KeyvalButton>
         )}
         <KeyvalButton
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index b99b4159f..7754fe78f 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -19,10 +19,12 @@ import {
   CheckboxList,
   Divider,
   Input,
+  NotificationNote,
   SectionTitle,
 } from '@/reuseable-components';
 import { addConfiguredDestination } from '@/store';
 import { useDispatch } from 'react-redux';
+import { TestConnection } from '../test-connection';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -45,7 +47,9 @@ const FormContainer = styled.div`
   gap: 24px;
 `;
 
-//
+const NotificationNoteWrapper = styled.div`
+  margin-top: 24px;
+`;
 
 interface ConnectDestinationModalBodyProps {
   destination: DestinationTypeItem | undefined;
@@ -68,6 +72,7 @@ export function ConnectDestinationModalBody({
     metrics: false,
     traces: false,
   });
+  const [showConnectionError, setShowConnectionError] = useState(false);
   const [destinationName, setDestinationName] = useState<string>('');
   const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
   const [formData, setFormData] = useState<Record<string, any>>({});
@@ -164,9 +169,35 @@ export function ConnectDestinationModalBody({
         <SectionTitle
           title="Create connection"
           description="Connect selected destination with Odigos."
-          buttonText="Check connection"
-          onButtonClick={() => {}}
+          actionButton={
+            destination.testConnectionSupported ? (
+              <TestConnection
+                onError={() => setShowConnectionError(true)}
+                destination={{
+                  name: destinationName,
+                  type: destination?.type || '',
+                  exportedSignals,
+                  fields: Object.entries(formData).map(([name, value]) => ({
+                    key: name,
+                    value,
+                  })),
+                }}
+              />
+            ) : (
+              <></>
+            )
+          }
         />
+        {showConnectionError && (
+          <NotificationNoteWrapper>
+            <NotificationNote
+              type="error"
+              text={
+                'Connection failed. Please check your input and try once again.'
+              }
+            />
+          </NotificationNoteWrapper>
+        )}
         <Divider margin="24px 0" />
         <FormContainer>
           <CheckboxList
diff --git a/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
new file mode 100644
index 000000000..e28683402
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
@@ -0,0 +1,80 @@
+import { useTestConnection } from '@/hooks';
+import { Button, FadeLoader, Text } from '@/reuseable-components';
+import { DestinationInput } from '@/types';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+interface TestConnectionProps {
+  destination: DestinationInput | undefined;
+  onError?: () => void;
+}
+
+const ActionButton = styled(Button)<{ isTestConnectionSuccess?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: ${({ theme, isTestConnectionSuccess }) =>
+    isTestConnectionSuccess ? 'rgba(129, 175, 101, 0.16)' : 'transparent'};
+`;
+
+const ActionButtonText = styled(Text)<{ isTestConnectionSuccess?: boolean }>`
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-weight: 500;
+  text-decoration: underline;
+  text-transform: uppercase;
+  font-size: 14px;
+  line-height: 157.143%;
+  color: ${({ theme, isTestConnectionSuccess }) =>
+    isTestConnectionSuccess ? '#81AF65' : theme.colors.white};
+`;
+
+const TestConnection: React.FC<TestConnectionProps> = ({
+  destination,
+  onError,
+}) => {
+  const [isTestConnectionSuccess, setIsTestConnectionSuccess] =
+    useState<boolean>(false);
+  const { testConnection, loading, error } = useTestConnection();
+
+  const onButtonClick = async () => {
+    if (!destination) {
+      return;
+    }
+
+    const res = await testConnection(destination);
+    if (res) {
+      setIsTestConnectionSuccess(res.succeeded);
+      !res.succeeded && onError && onError();
+    }
+  };
+  return (
+    <ActionButton
+      variant={'secondary'}
+      onClick={onButtonClick}
+      isTestConnectionSuccess={isTestConnectionSuccess}
+    >
+      {isTestConnectionSuccess && (
+        <Image
+          alt="checkmark"
+          src="/icons/common/connection-succeeded.svg"
+          width={16}
+          height={16}
+        />
+      )}
+      {loading && <FadeLoader />}
+      <ActionButtonText
+        isTestConnectionSuccess={isTestConnectionSuccess}
+        size={14}
+      >
+        {loading
+          ? 'Checking'
+          : isTestConnectionSuccess
+          ? 'Connection ok'
+          : 'Test Connection'}
+      </ActionButtonText>
+    </ActionButton>
+  );
+};
+
+export { TestConnection };
diff --git a/frontend/webapp/graphql/mutations/destination.ts b/frontend/webapp/graphql/mutations/destination.ts
index 0cbdcc12e..1c0f4ae01 100644
--- a/frontend/webapp/graphql/mutations/destination.ts
+++ b/frontend/webapp/graphql/mutations/destination.ts
@@ -7,3 +7,15 @@ export const CREATE_DESTINATION = gql`
     }
   }
 `;
+
+export const TEST_CONNECTION_MUTATION = gql`
+  mutation TestConnection($destination: DestinationInput!) {
+    testConnectionForDestination(destination: $destination) {
+      succeeded
+      statusCode
+      destinationType
+      message
+      reason
+    }
+  }
+`;
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index ec9bba927..ccb9e9a9d 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -1,4 +1,4 @@
 export * from './useDestinations';
-export * from './useCheckConnection';
+export * from './useTestConnection';
 export * from './useConnectDestinationForm';
 export * from './useCreateDestination';
diff --git a/frontend/webapp/hooks/destinations/useCheckConnection.ts b/frontend/webapp/hooks/destinations/useCheckConnection.ts
deleted file mode 100644
index 52b9e6624..000000000
--- a/frontend/webapp/hooks/destinations/useCheckConnection.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { AxiosError } from 'axios';
-import { useMutation } from 'react-query';
-import { checkConnection } from '@/services';
-
-export function useCheckConnection() {
-  const { mutateAsync, isLoading } = useMutation(checkConnection);
-
-  const checkDestinationConnection = async (body, callback) => {
-    try {
-      await mutateAsync(body, {
-        onSuccess: (res) =>
-          callback({
-            enabled: true,
-            message: res.message,
-          }),
-        onError: (error: AxiosError) =>
-          callback({
-            enabled: false,
-            message: 'Please check your input and try again.',
-          }),
-      });
-    } catch (error) {}
-  };
-
-  return {
-    isLoading,
-    checkDestinationConnection,
-  };
-}
diff --git a/frontend/webapp/hooks/destinations/useTestConnection.ts b/frontend/webapp/hooks/destinations/useTestConnection.ts
new file mode 100644
index 000000000..a5838db92
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useTestConnection.ts
@@ -0,0 +1,42 @@
+import { DestinationInput } from '@/types';
+import { useMutation } from '@apollo/client';
+import { TEST_CONNECTION_MUTATION } from '@/graphql';
+
+interface TestConnectionResponse {
+  succeeded: boolean;
+  statusCode: number;
+  destinationType: string;
+  message: string;
+  reason: string;
+}
+
+interface UseTestConnectionResult {
+  testConnection: (
+    destination: DestinationInput
+  ) => Promise<TestConnectionResponse | undefined>;
+  loading: boolean;
+  error?: Error;
+}
+
+export const useTestConnection = (): UseTestConnectionResult => {
+  const [testConnectionMutation, { loading, error }] = useMutation<
+    { testConnectionForDestination: TestConnectionResponse },
+    { destination: DestinationInput }
+  >(TEST_CONNECTION_MUTATION);
+
+  const testConnection = async (
+    destination: DestinationInput
+  ): Promise<TestConnectionResponse | undefined> => {
+    try {
+      const { data } = await testConnectionMutation({
+        variables: { destination },
+      });
+      return data?.testConnectionForDestination;
+    } catch (err) {
+      console.error('Error testing connection:', err);
+      return undefined;
+    }
+  };
+
+  return { testConnection, loading, error };
+};
diff --git a/frontend/webapp/public/icons/common/connection-succeeded.svg b/frontend/webapp/public/icons/common/connection-succeeded.svg
new file mode 100644
index 000000000..4a4e6b385
--- /dev/null
+++ b/frontend/webapp/public/icons/common/connection-succeeded.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+  <path d="M6.16659 9.29901L7.72738 10.8581C8.47807 9.5455 9.51695 8.4204 10.7657 7.56768L10.8333 7.52157M14.5999 8.95742C14.5999 12.3264 11.8688 15.0574 8.4999 15.0574C5.13097 15.0574 2.3999 12.3264 2.3999 8.95742C2.3999 5.58848 5.13097 2.85742 8.4999 2.85742C11.8688 2.85742 14.5999 5.58848 14.5999 8.95742Z" stroke="#81AF65" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/notification/error-icon.svg b/frontend/webapp/public/icons/notification/error-icon.svg
new file mode 100644
index 000000000..f4c444996
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/error-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+  <path d="M7 8.33673V6.00339M7 10.3055V10.3061M12.25 7.97266C12.25 10.8722 9.89949 13.2227 7 13.2227C4.1005 13.2227 1.75 10.8721 1.75 7.97265C1.75 5.07316 4.10051 2.72266 7 2.72266C9.8995 2.72266 12.25 5.07316 12.25 7.97266Z" stroke="#E25A5A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/fade-loader/helpers/animation.ts b/frontend/webapp/reuseable-components/fade-loader/helpers/animation.ts
new file mode 100644
index 000000000..b49f46caf
--- /dev/null
+++ b/frontend/webapp/reuseable-components/fade-loader/helpers/animation.ts
@@ -0,0 +1,27 @@
+export const createAnimation = (
+  loaderName: string,
+  frames: string,
+  suffix: string
+): string => {
+  const animationName = `react-spinners-${loaderName}-${suffix}`;
+
+  if (typeof window == 'undefined' || !window.document) {
+    return animationName;
+  }
+
+  const styleEl = document.createElement('style');
+  document.head.appendChild(styleEl);
+  const styleSheet = styleEl.sheet;
+
+  const keyFrames = `
+      @keyframes ${animationName} {
+        ${frames}
+      }
+    `;
+
+  if (styleSheet) {
+    styleSheet.insertRule(keyFrames, 0);
+  }
+
+  return animationName;
+};
diff --git a/frontend/webapp/reuseable-components/fade-loader/helpers/unitConverter.ts b/frontend/webapp/reuseable-components/fade-loader/helpers/unitConverter.ts
new file mode 100644
index 000000000..5579c1942
--- /dev/null
+++ b/frontend/webapp/reuseable-components/fade-loader/helpers/unitConverter.ts
@@ -0,0 +1,77 @@
+interface LengthObject {
+  value: number;
+  unit: string;
+}
+
+const cssUnit: { [unit: string]: boolean } = {
+  cm: true,
+  mm: true,
+  in: true,
+  px: true,
+  pt: true,
+  pc: true,
+  em: true,
+  ex: true,
+  ch: true,
+  rem: true,
+  vw: true,
+  vh: true,
+  vmin: true,
+  vmax: true,
+  '%': true,
+};
+
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+export function parseLengthAndUnit(size: number | string): LengthObject {
+  if (typeof size === 'number') {
+    return {
+      value: size,
+      unit: 'px',
+    };
+  }
+  let value: number;
+  const valueString: string = (size.match(/^[0-9.]*/) || '').toString();
+  if (valueString.includes('.')) {
+    value = parseFloat(valueString);
+  } else {
+    value = parseInt(valueString, 10);
+  }
+
+  const unit: string = (size.match(/[^0-9]*$/) || '').toString();
+
+  if (cssUnit[unit]) {
+    return {
+      value,
+      unit,
+    };
+  }
+
+  console.warn(
+    `React Spinners: ${size} is not a valid css value. Defaulting to ${value}px.`
+  );
+
+  return {
+    value,
+    unit: 'px',
+  };
+}
+
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+export function cssValue(value: number | string): string {
+  const lengthWithunit = parseLengthAndUnit(value);
+
+  return `${lengthWithunit.value}${lengthWithunit.unit}`;
+}
diff --git a/frontend/webapp/reuseable-components/fade-loader/index.tsx b/frontend/webapp/reuseable-components/fade-loader/index.tsx
new file mode 100644
index 000000000..b90c6c9d3
--- /dev/null
+++ b/frontend/webapp/reuseable-components/fade-loader/index.tsx
@@ -0,0 +1,137 @@
+import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes } from 'react';
+
+import { cssValue, parseLengthAndUnit } from './helpers/unitConverter';
+import { createAnimation } from './helpers/animation';
+import theme from '@/styles/theme';
+
+export type LengthType = number | string;
+
+interface CommonProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+  color?: string;
+  loading?: boolean;
+  cssOverride?: CSSProperties;
+  speedMultiplier?: number;
+}
+
+interface LoaderHeightWidthRadiusProps extends CommonProps {
+  height?: LengthType;
+  width?: LengthType;
+  radius?: LengthType;
+  margin?: LengthType;
+}
+
+const fade = createAnimation(
+  'FadeLoader',
+  '50% {opacity: 0.3} 100% {opacity: 1}',
+  'fade'
+);
+
+function FadeLoader({
+  loading = true,
+  color = theme.colors.text,
+  speedMultiplier = 1,
+  cssOverride = {},
+  height = 4,
+  width = 1.5,
+  radius = 2,
+  margin = 2,
+  ...additionalprops
+}: LoaderHeightWidthRadiusProps): JSX.Element | null {
+  const { value } = parseLengthAndUnit(margin);
+  const radiusValue = value + 4.2;
+  const quarter = radiusValue / 2 + radiusValue / 5.5;
+
+  const wrapper: React.CSSProperties = {
+    display: 'inherit',
+    position: 'relative',
+    fontSize: '0',
+    top: radiusValue,
+    left: radiusValue,
+    width: `${radiusValue * 3}px`,
+    height: `${radiusValue * 3}px`,
+    ...cssOverride,
+  };
+
+  const style = (i: number): React.CSSProperties => {
+    return {
+      position: 'absolute',
+      width: cssValue(width),
+      height: cssValue(height),
+      margin: cssValue(margin),
+      backgroundColor: color,
+      borderRadius: cssValue(radius),
+      transition: '2s',
+      animationFillMode: 'both',
+      animation: `${fade} ${1.2 / speedMultiplier}s ${
+        i * 0.12
+      }s infinite ease-in-out`,
+    };
+  };
+
+  const a: React.CSSProperties = {
+    ...style(1),
+    top: `${radiusValue}px`,
+    left: '0',
+  };
+  const b: React.CSSProperties = {
+    ...style(2),
+    top: `${quarter}px`,
+    left: `${quarter}px`,
+    transform: 'rotate(-45deg)',
+  };
+  const c: React.CSSProperties = {
+    ...style(3),
+    top: '0',
+    left: `${radiusValue}px`,
+    transform: 'rotate(90deg)',
+  };
+  const d: React.CSSProperties = {
+    ...style(4),
+    top: `${-1 * quarter}px`,
+    left: `${quarter}px`,
+    transform: 'rotate(45deg)',
+  };
+  const e: React.CSSProperties = {
+    ...style(5),
+    top: `${-1 * radiusValue}px`,
+    left: '0',
+  };
+  const f: React.CSSProperties = {
+    ...style(6),
+    top: `${-1 * quarter}px`,
+    left: `${-1 * quarter}px`,
+    transform: 'rotate(-45deg)',
+  };
+  const g: React.CSSProperties = {
+    ...style(7),
+    top: '0',
+    left: `${-1 * radiusValue}px`,
+    transform: 'rotate(90deg)',
+  };
+  const h: React.CSSProperties = {
+    ...style(8),
+    top: `${quarter}px`,
+    left: `${-1 * quarter}px`,
+    transform: 'rotate(45deg)',
+  };
+
+  if (!loading) {
+    return null;
+  }
+
+  return (
+    <span style={wrapper} {...additionalprops}>
+      <span style={a} />
+      <span style={b} />
+      <span style={c} />
+      <span style={d} />
+      <span style={e} />
+      <span style={f} />
+      <span style={g} />
+      <span style={h} />
+    </span>
+  );
+}
+
+export { FadeLoader };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 9054ef153..19d56da91 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -13,3 +13,4 @@ export * from './navigation-buttons';
 export * from './tag';
 export * from './checkbox-list';
 export * from './notification-note';
+export * from './fade-loader';
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
index 385994f26..cc0d9381f 100644
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -22,7 +22,7 @@ const NotificationContainer = styled.div<{ type: NotificationType }>`
       case 'warning':
         return '#472300'; // Orange
       case 'error':
-        return '#FF4C4C'; // Red
+        return 'rgba(226, 90, 90, 0.12);';
       case 'success':
         return '#28A745'; // Green
       case 'info':
@@ -45,20 +45,19 @@ const Title = styled(Text)<{ type: NotificationType }>`
   color: ${({ type }) => {
     switch (type) {
       case 'warning':
-        return '#E9CF35'; // Orange
+        return '#E9CF35';
       case 'error':
-        return '#FF4C4C'; // Red
+        return '#E25A5A';
       case 'success':
-        return '#28A745'; // Green
+        return '#28A745';
       case 'info':
-        return '#2B2D66'; // Blue
+        return '#2B2D66';
       default:
-        return '#2B2D66'; // Default to info color
+        return '#2B2D66';
     }
   }};
 `;
 
-// Icons can be dynamically rendered based on the type
 const NotificationIcon = ({ type }: { type: NotificationType }) => {
   switch (type) {
     case 'warning':
diff --git a/frontend/webapp/reuseable-components/section-title/index.tsx b/frontend/webapp/reuseable-components/section-title/index.tsx
index cbd024bc4..055a87448 100644
--- a/frontend/webapp/reuseable-components/section-title/index.tsx
+++ b/frontend/webapp/reuseable-components/section-title/index.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
 import { Text } from '../text';
-import { Button } from '../button';
 import styled from 'styled-components';
 
 interface SectionTitleProps {
   title: string;
   description: string;
-  buttonText?: string;
-  onButtonClick?: () => void;
+  actionButton?: React.ReactNode; // Accept a React node as the action button
 }
 
 const Container = styled.div`
@@ -27,22 +25,10 @@ const Title = styled(Text)``;
 
 const Description = styled(Text)``;
 
-const ActionButton = styled(Button)``;
-
-const ActionButtonText = styled(Text)`
-  font-family: ${({ theme }) => theme.font_family.secondary};
-  font-weight: 500;
-  text-decoration: underline;
-  text-transform: uppercase;
-  font-size: 14px;
-  line-height: 157.143%;
-`;
-
 const SectionTitle: React.FC<SectionTitleProps> = ({
   title,
   description,
-  buttonText,
-  onButtonClick,
+  actionButton, // Use the custom action button
 }) => {
   return (
     <Container>
@@ -54,11 +40,7 @@ const SectionTitle: React.FC<SectionTitleProps> = ({
           {description}
         </Description>
       </TitleContainer>
-      {buttonText && onButtonClick && (
-        <ActionButton variant={'secondary'} onClick={onButtonClick}>
-          <ActionButtonText size={14}>{buttonText}</ActionButtonText>
-        </ActionButton>
-      )}
+      {actionButton && <div>{actionButton}</div>}
     </Container>
   );
 };
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index c08f24ba6..47d3b088e 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -54,11 +54,16 @@ export interface ExportedSignals {
   traces: boolean;
 }
 
+interface FieldInput {
+  key: string;
+  value: string;
+}
+
 export interface DestinationInput {
   name: string;
   type: string;
   exportedSignals: ExportedSignals;
-  fields: { key: string; value: any }[];
+  fields: FieldInput[];
 }
 
 export type DestinationTypeDetail = {

From d201c37b9a90054d20edc687d2a580d0c9eb2782 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 19 Aug 2024 15:39:41 +0300
Subject: [PATCH 168/374] chore: wip

---
 .../connect-destination-modal-body/index.tsx           |  2 +-
 .../add-destination/test-connection/index.tsx          | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 7754fe78f..498b58c32 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -171,7 +171,7 @@ export function ConnectDestinationModalBody({
           description="Connect selected destination with Odigos."
           actionButton={
             destination.testConnectionSupported ? (
-              <TestConnection
+              <TestConnection // TODO: refactor this after add form validation
                 onError={() => setShowConnectionError(true)}
                 destination={{
                   name: destinationName,
diff --git a/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
index e28683402..48da795ca 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
@@ -1,9 +1,9 @@
-import { useTestConnection } from '@/hooks';
-import { Button, FadeLoader, Text } from '@/reuseable-components';
-import { DestinationInput } from '@/types';
 import Image from 'next/image';
-import React, { useState } from 'react';
 import styled from 'styled-components';
+import React, { useState } from 'react';
+import { DestinationInput } from '@/types';
+import { useTestConnection } from '@/hooks';
+import { Button, FadeLoader, Text } from '@/reuseable-components';
 
 interface TestConnectionProps {
   destination: DestinationInput | undefined;
@@ -14,7 +14,7 @@ const ActionButton = styled(Button)<{ isTestConnectionSuccess?: boolean }>`
   display: flex;
   align-items: center;
   gap: 8px;
-  background-color: ${({ theme, isTestConnectionSuccess }) =>
+  background-color: ${({ isTestConnectionSuccess }) =>
     isTestConnectionSuccess ? 'rgba(129, 175, 101, 0.16)' : 'transparent'};
 `;
 

From 7cdef05ca5d0220a6ec21f42ec73aaff590a9c2c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 19 Aug 2024 15:57:50 +0300
Subject: [PATCH 169/374] chore: init

---
 frontend/graph/schema.resolvers.go            |  1 -
 .../connect-destination-modal-body/index.tsx  | 35 ++++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 910c5273f..983b6a218 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -213,7 +213,6 @@ func (r *mutationResolver) TestConnectionForDestination(ctx context.Context, inp
 		return nil, err
 	}
 
-	// Assuming testconnection.TestConnection returns a struct with fields similar to res.Succeeded, res.StatusCode, etc.
 	res := testconnection.TestConnection(ctx, configurer)
 	if !res.Succeeded {
 		return &model.TestConnectionResponse{
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 498b58c32..aa3e0b4ed 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -2,9 +2,12 @@ import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
-import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
+import { useDispatch } from 'react-redux';
+import { addConfiguredDestination } from '@/store';
+import { TestConnection } from '../test-connection';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { Body, Container, SideMenuWrapper } from '../styled';
+import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
 import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
 import {
   StepProps,
@@ -22,9 +25,6 @@ import {
   NotificationNote,
   SectionTitle,
 } from '@/reuseable-components';
-import { addConfiguredDestination } from '@/store';
-import { useDispatch } from 'react-redux';
-import { TestConnection } from '../test-connection';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -60,26 +60,27 @@ export function ConnectDestinationModalBody({
   destination,
   onSubmitRef,
 }: ConnectDestinationModalBodyProps) {
-  const { data } = useQuery<DestinationDetailsResponse>(
-    GET_DESTINATION_TYPE_DETAILS,
-    {
-      variables: { type: destination?.type },
-      skip: !destination,
-    }
-  );
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [destinationName, setDestinationName] = useState<string>('');
+  const [showConnectionError, setShowConnectionError] = useState(false);
+  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
   const [exportedSignals, setExportedSignals] = useState<ExportedSignals>({
     logs: false,
     metrics: false,
     traces: false,
   });
-  const [showConnectionError, setShowConnectionError] = useState(false);
-  const [destinationName, setDestinationName] = useState<string>('');
-  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
-  const [formData, setFormData] = useState<Record<string, any>>({});
-  const { buildFormDynamicFields } = useConnectDestinationForm();
-  const { connectEnv } = useConnectEnv();
 
   const dispatch = useDispatch();
+  const { connectEnv } = useConnectEnv();
+  const { buildFormDynamicFields } = useConnectDestinationForm();
+
+  const { data } = useQuery<DestinationDetailsResponse>(
+    GET_DESTINATION_TYPE_DETAILS,
+    {
+      variables: { type: destination?.type },
+      skip: !destination,
+    }
+  );
 
   const monitors = useMemo(() => {
     if (!destination) return [];

From ffde50852a79a81d3ab5d0bed23f1ab6114a5787 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 19 Aug 2024 16:47:24 +0300
Subject: [PATCH 170/374] chore: wip

---
 .../dynamic-form-fields/index.tsx             |  10 +-
 .../destinations/useConnectDestinationForm.ts |  10 +-
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/textarea/index.tsx   | 157 ++++++++++++++++++
 4 files changed, 167 insertions(+), 11 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/textarea/index.tsx

diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
index 196767bcf..190be415d 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { INPUT_TYPES } from '@/utils/constants/string';
-import { Dropdown, Input } from '@/reuseable-components';
+import { Dropdown, Input, TextArea } from '@/reuseable-components';
 
 export function DynamicConnectDestinationFormFields({
   fields,
@@ -35,7 +35,13 @@ export function DynamicConnectDestinationFormFields({
       case INPUT_TYPES.KEY_VALUE_PAIR:
         return <div></div>;
       case INPUT_TYPES.TEXTAREA:
-        return <div></div>;
+        return (
+          <TextArea
+            key={field.name}
+            {...field}
+            onChange={(e) => onChange(field.name, e.target.value)}
+          />
+        );
       default:
         return null;
     }
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index aa1c71fca..d6c7d6620 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -35,6 +35,7 @@ export function useConnectDestinationForm() {
             };
 
           case 'input':
+          case 'textarea':
             componentPropertiesJson = safeJsonParse<string[]>(
               componentProperties,
               []
@@ -45,15 +46,6 @@ export function useConnectDestinationForm() {
               title: displayName,
               ...componentPropertiesJson,
             };
-
-          //   case 'multi_input':
-          //   case 'textarea':
-          //     return {
-          //       name,
-          //       componentType,
-          //       title: displayName,
-          //       ...componentPropertiesJson,
-          //     };
           default:
             return undefined;
         }
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 19d56da91..411a39fb2 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -14,3 +14,4 @@ export * from './tag';
 export * from './checkbox-list';
 export * from './notification-note';
 export * from './fade-loader';
+export * from './textarea';
diff --git a/frontend/webapp/reuseable-components/textarea/index.tsx b/frontend/webapp/reuseable-components/textarea/index.tsx
new file mode 100644
index 000000000..85e344706
--- /dev/null
+++ b/frontend/webapp/reuseable-components/textarea/index.tsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled, { css } from 'styled-components';
+
+interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  errorMessage?: string;
+  title?: string;
+  tooltip?: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+
+const InputWrapper = styled.div<{
+  isDisabled?: boolean;
+  hasError?: boolean;
+  isActive?: boolean;
+}>`
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  transition: border-color 0.3s;
+  border-radius: 48px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+  ${({ isDisabled }) =>
+    isDisabled &&
+    css`
+      background-color: #555;
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+
+  ${({ hasError }) =>
+    hasError &&
+    css`
+      border-color: red;
+    `}
+
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      border-color: ${({ theme }) => theme.colors.secondary};
+    `}
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const StyledTextArea = styled.textarea<{}>`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 14px;
+  padding: 12px 20px;
+  font-family: ${({ theme }) => theme.font_family.primary};
+  font-weight: 300;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text};
+    font-family: ${({ theme }) => theme.font_family.primary};
+    opacity: 0.4;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 22px; /* 157.143% */
+  }
+
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const ErrorWrapper = styled.div`
+  position: relative;
+`;
+
+const ErrorMessage = styled(Text)`
+  color: red;
+  font-size: 12px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+  margin-bottom: 4px;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const TextArea: React.FC<TextAreaProps> = ({
+  errorMessage,
+  title,
+  tooltip,
+  ...props
+}) => {
+  return (
+    <Container>
+      {title && (
+        <Tooltip text={tooltip || ''}>
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+                style={{ marginBottom: 4 }}
+              />
+            )}
+          </HeaderWrapper>
+        </Tooltip>
+      )}
+
+      <InputWrapper
+        isDisabled={props.disabled}
+        hasError={!!errorMessage}
+        isActive={!!props.autoFocus}
+      >
+        <StyledTextArea {...props} />
+      </InputWrapper>
+      {errorMessage && (
+        <ErrorWrapper>
+          <ErrorMessage>{errorMessage}</ErrorMessage>
+        </ErrorWrapper>
+      )}
+    </Container>
+  );
+};
+
+export { TextArea };

From 6517e3e61a9018cef9010db824c6ad1b313a6239 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 09:11:15 +0300
Subject: [PATCH 171/374] chore: wip

---
 .../add-destination/connect-destination-modal-body/index.tsx | 5 +++++
 .../destinations/add-destination/destinations-list/index.tsx | 4 +---
 frontend/webapp/reuseable-components/modal/index.tsx         | 1 +
 frontend/webapp/reuseable-components/textarea/index.tsx      | 4 ++--
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index aa3e0b4ed..eab788dee 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -45,6 +45,11 @@ const FormContainer = styled.div`
   max-width: 500px;
   flex-direction: column;
   gap: 24px;
+  height: 443px;
+  overflow-y: auto;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: overlay;
 `;
 
 const NotificationNoteWrapper = styled.div`
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 1d62f9bfd..066045a4b 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -10,9 +10,7 @@ const Container = styled.div`
   align-items: flex-start;
   gap: 12px;
   align-self: stretch;
-  border-radius: 16px;
-  height: 100%;
-  max-height: 548px;
+  height: 443px;
   overflow-y: auto;
 `;
 
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index ecb23a84f..c579ebfdc 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -32,6 +32,7 @@ const Overlay = styled.div`
 const ModalWrapper = styled.div`
   background: ${({ theme }) => theme.colors.translucent_bg};
   border-radius: 40px;
+  max-height: 84vh;
   border: ${({ theme }) => `1px solid ${theme.colors.border}`};
   box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8),
     0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),
diff --git a/frontend/webapp/reuseable-components/textarea/index.tsx b/frontend/webapp/reuseable-components/textarea/index.tsx
index 85e344706..93070398b 100644
--- a/frontend/webapp/reuseable-components/textarea/index.tsx
+++ b/frontend/webapp/reuseable-components/textarea/index.tsx
@@ -30,7 +30,7 @@ const InputWrapper = styled.div<{
   gap: 12px;
 
   transition: border-color 0.3s;
-  border-radius: 48px;
+  border-radius: 24px;
   border: 1px solid rgba(249, 249, 249, 0.24);
   ${({ isDisabled }) =>
     isDisabled &&
@@ -70,7 +70,7 @@ const StyledTextArea = styled.textarea<{}>`
   padding: 12px 20px;
   font-family: ${({ theme }) => theme.font_family.primary};
   font-weight: 300;
-
+  line-height: 22px;
   &::placeholder {
     color: ${({ theme }) => theme.colors.text};
     font-family: ${({ theme }) => theme.font_family.primary};

From 0936112423ecf4bef830e6946eecc81f5966de4f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 09:26:18 +0300
Subject: [PATCH 172/374] chore: wip

---
 frontend/webapp/app/setup/styled.ts           |  4 ++
 .../choose-sources-list/index.tsx             | 43 ++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/frontend/webapp/app/setup/styled.ts b/frontend/webapp/app/setup/styled.ts
index 2f543a644..a4d810aa6 100644
--- a/frontend/webapp/app/setup/styled.ts
+++ b/frontend/webapp/app/setup/styled.ts
@@ -4,4 +4,8 @@ export const SideMenuWrapper = styled.div`
   position: absolute;
   left: 24px;
   top: 144px;
+
+  @media (max-width: 1050px) {
+    display: none;
+  }
 `;
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index c6c42e8fd..252522e9e 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -1,19 +1,17 @@
-import { Text } from '@/reuseable-components';
-import { K8sActualSource } from '@/types';
+import React from 'react';
 import Image from 'next/image';
-import React, { useState } from 'react';
 import styled from 'styled-components';
+import { K8sActualSource } from '@/types';
+import { Text } from '@/reuseable-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
-  align-self: stretch;
-  border-radius: 16px;
   background: ${({ theme }) => theme.colors.primary};
   height: 100%;
-  max-height: 548px;
+  max-height: calc(100vh - 360px);
   overflow-y: auto;
 `;
 
@@ -87,7 +85,38 @@ const SourcesList: React.FC<SourcesListProps> = ({
 
   return (
     <Container>
-      {items.map((item) => (
+      {[
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+        ...items,
+      ].map((item) => (
         <ListItem
           key={item.name}
           selected={isItemSelected(item)}

From 0c8f22ba33f742fcc6769dd7f68d530f01790107 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 09:27:51 +0300
Subject: [PATCH 173/374] chore: wip

---
 .../choose-sources-list/index.tsx             | 33 +------------------
 1 file changed, 1 insertion(+), 32 deletions(-)

diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index 252522e9e..30739aa07 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -85,38 +85,7 @@ const SourcesList: React.FC<SourcesListProps> = ({
 
   return (
     <Container>
-      {[
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-        ...items,
-      ].map((item) => (
+      {items.map((item) => (
         <ListItem
           key={item.name}
           selected={isItemSelected(item)}

From e7363cb4641a3113566d636cb0565eff08152439 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 10:23:55 +0300
Subject: [PATCH 174/374] chore: wip

---
 .../add-destination/destinations-list/index.tsx             | 6 +++++-
 .../containers/main/destinations/add-destination/styled.ts  | 5 ++++-
 frontend/webapp/styles/theme.ts                             | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 066045a4b..9d71e35be 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -10,8 +10,12 @@ const Container = styled.div`
   align-items: flex-start;
   gap: 12px;
   align-self: stretch;
-  height: 443px;
+  max-height: calc(100vh - 410px);
   overflow-y: auto;
+
+  @media (height < 800px) {
+    max-height: calc(100vh - 400px);
+  }
 `;
 
 const ListItem = styled.div<{}>`
diff --git a/frontend/webapp/containers/main/destinations/add-destination/styled.ts b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
index 5b614e091..312f71b68 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/styled.ts
+++ b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
@@ -5,14 +5,17 @@ export const Body = styled.div`
   border-left: 1px solid rgba(249, 249, 249, 0.08);
   min-height: 600px;
   width: 100%;
+  min-width: 770px;
 `;
 
 export const SideMenuWrapper = styled.div`
   padding: 32px;
   width: 196px;
+  @media (max-width: 1050px) {
+    display: none;
+  }
 `;
 
 export const Container = styled.div`
   display: flex;
-  width: 1091px;
 `;
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index ebca17126..0dd345d0c 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -7,7 +7,7 @@ const colors = {
   dark_grey: '#151515',
   text: '#F9F9F9',
   border: 'rgba(249, 249, 249, 0.08)',
-  translucent_bg: 'rgba(249, 249, 249, 0.04)',
+  translucent_bg: '#1A1A1A',
   majestic_blue: '#444AD9',
 };
 

From 11adae6a88d9ca5dfc71234f91482c21cbd6e344 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 11:35:20 +0300
Subject: [PATCH 175/374] chore: wip

---
 .../connect-destination-modal-body/index.tsx  |   1 +
 .../dynamic-form-fields/index.tsx             |   4 +-
 .../destinations/useConnectDestinationForm.ts |  12 ++
 frontend/webapp/public/icons/common/trash.svg |   3 +
 .../reuseable-components/button/index.tsx     |   3 +-
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/input-list/index.tsx | 132 ++++++++++++++++++
 7 files changed, 153 insertions(+), 3 deletions(-)
 create mode 100644 frontend/webapp/public/icons/common/trash.svg
 create mode 100644 frontend/webapp/reuseable-components/input-list/index.tsx

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index eab788dee..c60ff44fc 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -50,6 +50,7 @@ const FormContainer = styled.div`
   padding-right: 16px;
   box-sizing: border-box;
   overflow: overlay;
+  max-height: calc(100vh - 410px);
 `;
 
 const NotificationNoteWrapper = styled.div`
diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
index 190be415d..6671fab98 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { INPUT_TYPES } from '@/utils/constants/string';
 import { Dropdown, Input, TextArea } from '@/reuseable-components';
+import InputList from '@/reuseable-components/input-list';
 
 export function DynamicConnectDestinationFormFields({
   fields,
@@ -30,7 +31,8 @@ export function DynamicConnectDestinationFormFields({
           />
         );
       case INPUT_TYPES.MULTI_INPUT:
-        return <div></div>;
+        console.log({ field });
+        return <InputList key={field.name} {...field} />;
 
       case INPUT_TYPES.KEY_VALUE_PAIR:
         return <div></div>;
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index d6c7d6620..76c24fb66 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -46,6 +46,18 @@ export function useConnectDestinationForm() {
               title: displayName,
               ...componentPropertiesJson,
             };
+
+          case 'multiInput':
+            componentPropertiesJson = safeJsonParse<string[]>(
+              componentProperties,
+              []
+            );
+            return {
+              name,
+              componentType,
+              title: displayName,
+              ...componentPropertiesJson,
+            };
           default:
             return undefined;
         }
diff --git a/frontend/webapp/public/icons/common/trash.svg b/frontend/webapp/public/icons/common/trash.svg
new file mode 100644
index 000000000..2e1d58831
--- /dev/null
+++ b/frontend/webapp/public/icons/common/trash.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M10.6665 4.00065L9.92946 2.52655C9.56401 1.79567 8.81699 1.33398 7.99984 1.33398C7.18268 1.33398 6.43566 1.79567 6.07022 2.52655L5.33317 4.00065M2.6665 4.00065H13.3332M3.99984 4.00065H11.9998V10.0007C11.9998 11.2432 11.9998 11.8644 11.7968 12.3545C11.5262 13.0079 11.0071 13.527 10.3537 13.7977C9.8636 14.0007 9.24235 14.0007 7.99984 14.0007C6.75733 14.0007 6.13607 14.0007 5.64601 13.7977C4.99261 13.527 4.47348 13.0079 4.20283 12.3545C3.99984 11.8644 3.99984 11.2432 3.99984 10.0007V4.00065Z" stroke="#E25A5A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index a783b8320..4be813ccd 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -38,10 +38,9 @@ const variantStyles = {
     border-radius: 32px;
     border: 2px solid rgba(249, 249, 249, 0.8);
     &:hover {
-      background-color: #eaeaea;
+      background: #151515;
     }
     &:active {
-      background-color: #ccc;
     }
   `,
 };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 411a39fb2..272b646c5 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -15,3 +15,4 @@ export * from './checkbox-list';
 export * from './notification-note';
 export * from './fade-loader';
 export * from './textarea';
+export * from './input-list';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
new file mode 100644
index 000000000..02140aaf8
--- /dev/null
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -0,0 +1,132 @@
+import Image from 'next/image';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+
+interface InputListProps {
+  initialValues?: string[];
+  title?: string;
+  tooltip?: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const InputRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+`;
+
+const DeleteButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+`;
+
+const AddButton = styled(Button)`
+  color: white;
+  background: transparent;
+  display: flex;
+  gap: 8px;
+  border: none;
+  cursor: pointer;
+  align-self: flex-start;
+`;
+
+const ButtonText = styled(Text)`
+  font-size: 14px;
+  font-weight: 500;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+  margin-bottom: 4px;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const InputList: React.FC<InputListProps> = ({
+  initialValues = [''],
+  title,
+  tooltip,
+}) => {
+  const [inputs, setInputs] = useState<string[]>(initialValues);
+
+  const handleAddInput = () => {
+    setInputs([...inputs, '']);
+  };
+
+  const handleDeleteInput = (index: number) => {
+    setInputs(inputs.filter((_, i) => i !== index));
+  };
+
+  const handleInputChange = (value: string, index: number) => {
+    const newInputs = [...inputs];
+    newInputs[index] = value;
+    setInputs(newInputs);
+  };
+
+  return (
+    <Container>
+      {title && (
+        <Tooltip text={tooltip || ''}>
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+                style={{ marginBottom: 4 }}
+              />
+            )}
+          </HeaderWrapper>
+        </Tooltip>
+      )}
+      {inputs.map((value, index) => (
+        <InputRow key={index}>
+          <Input
+            value={value}
+            onChange={(e) => handleInputChange(e.target.value, index)}
+          />
+          <DeleteButton onClick={() => handleDeleteInput(index)}>
+            <Image
+              src="/icons/common/trash.svg"
+              alt="Delete"
+              width={16}
+              height={16}
+            />
+          </DeleteButton>
+        </InputRow>
+      ))}
+      <AddButton variant={'tertiary'} onClick={handleAddInput}>
+        <Image
+          src="/icons/common/plus.svg"
+          alt="Delete"
+          width={16}
+          height={16}
+        />
+        <ButtonText>ADD ATTRIBUTE</ButtonText>
+      </AddButton>
+    </Container>
+  );
+};
+
+export default InputList;

From 482c0cbfc68ff44c2dc3ec0e6102af8a9da6629d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 12:32:26 +0300
Subject: [PATCH 176/374] chore: wip

---
 .../connect-destination-modal-body/index.tsx  |  1 +
 .../dynamic-form-fields/index.tsx             | 14 +++++---
 .../destinations/useConnectDestinationForm.ts | 12 ++++++-
 .../reuseable-components/button/index.tsx     |  1 -
 .../reuseable-components/input-list/index.tsx | 35 +++++++++++++------
 5 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index c60ff44fc..8e571a19e 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -161,6 +161,7 @@ export function ConnectDestinationModalBody({
       exportedSignals,
       fields,
     };
+
     await connectEnv(body, storeConfiguredDestination);
   }
 
diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
index 6671fab98..5bb0cc413 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { INPUT_TYPES } from '@/utils/constants/string';
-import { Dropdown, Input, TextArea } from '@/reuseable-components';
-import InputList from '@/reuseable-components/input-list';
+import { Dropdown, Input, TextArea, InputList } from '@/reuseable-components';
 
 export function DynamicConnectDestinationFormFields({
   fields,
@@ -31,8 +30,15 @@ export function DynamicConnectDestinationFormFields({
           />
         );
       case INPUT_TYPES.MULTI_INPUT:
-        console.log({ field });
-        return <InputList key={field.name} {...field} />;
+        return (
+          <InputList
+            key={field.name}
+            {...field}
+            onChange={(value: string[]) =>
+              onChange(field.name, JSON.stringify(value))
+            }
+          />
+        );
 
       case INPUT_TYPES.KEY_VALUE_PAIR:
         return <div></div>;
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index 76c24fb66..e6f1f82d8 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -7,9 +7,16 @@ export function useConnectDestinationForm() {
   ): DynamicField[] {
     return fields
       .map((field) => {
-        const { name, componentType, displayName, componentProperties } = field;
+        const {
+          name,
+          componentType,
+          displayName,
+          componentProperties,
+          initialValue,
+        } = field;
 
         let componentPropertiesJson;
+        let initialValuesJson;
         switch (componentType) {
           case 'dropdown':
             componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(
@@ -52,10 +59,13 @@ export function useConnectDestinationForm() {
               componentProperties,
               []
             );
+            initialValuesJson = safeJsonParse<string[]>(initialValue, []);
+
             return {
               name,
               componentType,
               title: displayName,
+              initialValues: initialValuesJson,
               ...componentPropertiesJson,
             };
           default:
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 4be813ccd..98af016ad 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -36,7 +36,6 @@ const variantStyles = {
   tertiary: css`
     background-color: transparent;
     border-radius: 32px;
-    border: 2px solid rgba(249, 249, 249, 0.8);
     &:hover {
       background: #151515;
     }
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 02140aaf8..0ea34d78a 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Input } from '../input';
 import { Button } from '../button';
@@ -10,6 +10,7 @@ interface InputListProps {
   initialValues?: string[];
   title?: string;
   tooltip?: string;
+  onChange: (values: string[]) => void;
 }
 
 const Container = styled.div`
@@ -31,14 +32,16 @@ const DeleteButton = styled.button`
   cursor: pointer;
 `;
 
-const AddButton = styled(Button)`
+const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
   background: transparent;
   display: flex;
   gap: 8px;
   border: none;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   align-self: flex-start;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  transition: opacity 0.3s;
 `;
 
 const ButtonText = styled(Text)`
@@ -65,9 +68,16 @@ const InputList: React.FC<InputListProps> = ({
   initialValues = [''],
   title,
   tooltip,
+  onChange,
 }) => {
   const [inputs, setInputs] = useState<string[]>(initialValues);
 
+  useEffect(() => {
+    if (initialValues.length > 0) {
+      onChange(initialValues);
+    }
+  }, [initialValues]);
+
   const handleAddInput = () => {
     setInputs([...inputs, '']);
   };
@@ -80,8 +90,12 @@ const InputList: React.FC<InputListProps> = ({
     const newInputs = [...inputs];
     newInputs[index] = value;
     setInputs(newInputs);
+    onChange(newInputs);
   };
 
+  // Check if any input field is empty
+  const isAddButtonDisabled = inputs.some((input) => input.trim() === '');
+
   return (
     <Container>
       {title && (
@@ -116,17 +130,16 @@ const InputList: React.FC<InputListProps> = ({
           </DeleteButton>
         </InputRow>
       ))}
-      <AddButton variant={'tertiary'} onClick={handleAddInput}>
-        <Image
-          src="/icons/common/plus.svg"
-          alt="Delete"
-          width={16}
-          height={16}
-        />
+      <AddButton
+        disabled={isAddButtonDisabled}
+        variant={'tertiary'}
+        onClick={handleAddInput}
+      >
+        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
   );
 };
 
-export default InputList;
+export { InputList };

From 536121e107f1cf55b6fc081b624761fc831a8c25 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 12:37:36 +0300
Subject: [PATCH 177/374] chore: wip

---
 .../configured-destination-fields/index.tsx   | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
index b5d55f571..59c7aa2ab 100644
--- a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
+++ b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
@@ -1,7 +1,7 @@
-import { Text } from '@/reuseable-components';
-import { DestinationTypeDetail } from '@/types';
 import React from 'react';
 import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+import { DestinationTypeDetail } from '@/types';
 
 type ConfiguredDestinationFieldsProps = {
   details: DestinationTypeDetail[];
@@ -22,8 +22,6 @@ const ItemTitle = styled(Text)`
 `;
 
 const ItemValue = styled(Text)`
-  word-break: break-all;
-  width: 90%;
   color: ${({ theme }) => theme.colors.text};
   font-size: 12px;
   line-height: 18px;
@@ -32,12 +30,25 @@ const ItemValue = styled(Text)`
 export const ConfiguredDestinationFields: React.FC<
   ConfiguredDestinationFieldsProps
 > = ({ details }) => {
+  const parseValue = (value: string) => {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) {
+        return parsed.join(', ');
+      }
+    } catch (error) {
+      // If parsing fails, just return the original value
+      return value;
+    }
+    return value;
+  };
+
   return (
     <ListContainer>
       {details.map((detail, index) => (
         <ListItem key={index}>
           <ItemTitle>{detail.title}</ItemTitle>
-          <ItemValue>{detail.value}</ItemValue>
+          <ItemValue>{parseValue(detail.value)}</ItemValue>
         </ListItem>
       ))}
     </ListContainer>

From e287e8f9cb62b03f53bab1d1a1a9c8412191ddcd Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 12:40:45 +0300
Subject: [PATCH 178/374] chore: wip

---
 .../add-destination/connect-destination-modal-body/index.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 8e571a19e..b9a325a09 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -51,6 +51,10 @@ const FormContainer = styled.div`
   box-sizing: border-box;
   overflow: overlay;
   max-height: calc(100vh - 410px);
+
+  @media (height < 768px) {
+    max-height: calc(100vh - 350px);
+  }
 `;
 
 const NotificationNoteWrapper = styled.div`

From 285192bd1218b219593d3527fdc32131d6f787b1 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 16:24:13 +0300
Subject: [PATCH 179/374] chore: wip

---
 .../configured-destination-fields/index.tsx   |  18 +-
 .../dynamic-form-fields/index.tsx             |  16 +-
 .../destinations/useConnectDestinationForm.ts |   7 +
 .../public/icons/common/arrow-right.svg       |  10 +
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/input/index.tsx      |   2 +-
 .../key-value-input-list/index.tsx            | 179 ++++++++++++++++++
 .../reuseable-components/tooltip/index.tsx    | 111 +++++------
 8 files changed, 286 insertions(+), 58 deletions(-)
 create mode 100644 frontend/webapp/public/icons/common/arrow-right.svg
 create mode 100644 frontend/webapp/reuseable-components/key-value-input-list/index.tsx

diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
index 59c7aa2ab..5c8cd899e 100644
--- a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
+++ b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
@@ -33,11 +33,25 @@ export const ConfiguredDestinationFields: React.FC<
   const parseValue = (value: string) => {
     try {
       const parsed = JSON.parse(value);
+
       if (Array.isArray(parsed)) {
-        return parsed.join(', ');
+        return parsed
+          .map((item) => {
+            if (typeof item === 'object' && item !== null) {
+              return `${item.key}: ${item.value}`;
+            }
+            return item;
+          })
+          .join(', ');
+      }
+
+      // Handle objects (non-array JSON objects)
+      if (typeof parsed === 'object' && parsed !== null) {
+        return Object.entries(parsed)
+          .map(([key, val]) => `${key}: ${val}`)
+          .join(', ');
       }
     } catch (error) {
-      // If parsing fails, just return the original value
       return value;
     }
     return value;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
index 5bb0cc413..813602dd8 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -1,7 +1,13 @@
 import React from 'react';
 
 import { INPUT_TYPES } from '@/utils/constants/string';
-import { Dropdown, Input, TextArea, InputList } from '@/reuseable-components';
+import {
+  Dropdown,
+  Input,
+  TextArea,
+  InputList,
+  KeyValueInputsList,
+} from '@/reuseable-components';
 
 export function DynamicConnectDestinationFormFields({
   fields,
@@ -41,7 +47,13 @@ export function DynamicConnectDestinationFormFields({
         );
 
       case INPUT_TYPES.KEY_VALUE_PAIR:
-        return <div></div>;
+        return (
+          <KeyValueInputsList
+            key={field.name}
+            {...field}
+            onChange={(value) => onChange(field.name, JSON.stringify(value))}
+          />
+        );
       case INPUT_TYPES.TEXTAREA:
         return (
           <TextArea
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index e6f1f82d8..8165c1194 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -68,6 +68,13 @@ export function useConnectDestinationForm() {
               initialValues: initialValuesJson,
               ...componentPropertiesJson,
             };
+          case 'keyValuePairs':
+            return {
+              name,
+              componentType,
+              title: displayName,
+              ...componentPropertiesJson,
+            };
           default:
             return undefined;
         }
diff --git a/frontend/webapp/public/icons/common/arrow-right.svg b/frontend/webapp/public/icons/common/arrow-right.svg
new file mode 100644
index 000000000..5f0e0dd64
--- /dev/null
+++ b/frontend/webapp/public/icons/common/arrow-right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none">
+  <g opacity="0.4">
+    <mask id="mask0_354_24411" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="8" height="13">
+      <rect x="0.0166016" y="0.5" width="7.96639" height="12" fill="black"/>
+    </mask>
+    <g mask="url(#mask0_354_24411)">
+      <path d="M7.43358 5.38408L7.43358 7.70878L-8.10156 7.70878L-8.10156 5.38408L7.43358 5.38408ZM-0.0611429 16.2319L-1.67591 14.5208L6.59496 6.54523L-1.67591 -1.49397L-0.126021 -3.20508L9.24298 5.83557V7.22367L-0.0611429 16.2319Z" fill="#F9F9F9"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 272b646c5..adb95e883 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -16,3 +16,4 @@ export * from './notification-note';
 export * from './fade-loader';
 export * from './textarea';
 export * from './input-list';
+export * from './key-value-input-list';
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 05e674ede..289002fec 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import React from 'react';
-import styled, { css } from 'styled-components';
 import { Text } from '../text';
+import styled, { css } from 'styled-components';
 import { Tooltip } from '../tooltip';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
new file mode 100644
index 000000000..c6a51fdd7
--- /dev/null
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -0,0 +1,179 @@
+import Image from 'next/image';
+import React, { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+
+interface KeyValueInputsListProps {
+  initialKeyValuePairs?: { key: string; value: string }[];
+  title?: string;
+  tooltip?: string;
+  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const Row = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+`;
+
+const DeleteButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+`;
+
+const AddButton = styled(Button)<{ disabled: boolean }>`
+  color: white;
+  background: transparent;
+  display: flex;
+  gap: 8px;
+  border: none;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  align-self: flex-start;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  transition: opacity 0.3s;
+`;
+
+const ButtonText = styled(Text)`
+  font-size: 14px;
+  font-weight: 500;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+  margin-bottom: 4px;
+`;
+
+export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
+  initialKeyValuePairs = [{ key: '', value: '' }],
+  title,
+  tooltip,
+  onChange,
+}) => {
+  const [keyValuePairs, setKeyValuePairs] =
+    useState<{ key: string; value: string }[]>(initialKeyValuePairs);
+
+  const validPairsRef = useRef<{ key: string; value: string }[]>([]);
+
+  useEffect(() => {
+    // Filter out rows where either key or value is empty
+    const validKeyValuePairs = keyValuePairs.filter(
+      (pair) => pair.key.trim() !== '' && pair.value.trim() !== ''
+    );
+
+    // Only trigger onChange if valid key-value pairs have changed
+    if (
+      JSON.stringify(validPairsRef.current) !==
+      JSON.stringify(validKeyValuePairs)
+    ) {
+      validPairsRef.current = validKeyValuePairs;
+      if (onChange) {
+        onChange(validKeyValuePairs);
+      }
+    }
+  }, [keyValuePairs, onChange]);
+
+  const handleAddRow = () => {
+    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }]);
+  };
+
+  const handleDeleteRow = (index: number) => {
+    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index));
+  };
+
+  const handleKeyChange = (key: string, index: number) => {
+    const newKeyValuePairs = [...keyValuePairs];
+    newKeyValuePairs[index].key = key;
+    setKeyValuePairs(newKeyValuePairs);
+  };
+
+  const handleValueChange = (value: string, index: number) => {
+    const newKeyValuePairs = [...keyValuePairs];
+    newKeyValuePairs[index].value = value;
+    setKeyValuePairs(newKeyValuePairs);
+  };
+
+  // Check if any key or value field is empty
+  const isAddButtonDisabled = keyValuePairs.some(
+    (pair) => pair.key.trim() === '' || pair.value.trim() === ''
+  );
+
+  return (
+    <Container>
+      {title && (
+        <Tooltip text={tooltip || ''}>
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+                style={{ marginBottom: 4 }}
+              />
+            )}
+          </HeaderWrapper>
+        </Tooltip>
+      )}
+      {keyValuePairs.map((pair, index) => (
+        <Row key={index}>
+          <Input
+            value={pair.key}
+            onChange={(e) => handleKeyChange(e.target.value, index)}
+            placeholder="Define attribute"
+          />
+          <Image
+            src="/icons/common/arrow-right.svg"
+            alt="Arrow"
+            width={16}
+            height={16}
+          />
+          <Input
+            value={pair.value}
+            onChange={(e) => handleValueChange(e.target.value, index)}
+            placeholder="Define value"
+          />
+          <DeleteButton onClick={() => handleDeleteRow(index)}>
+            <Image
+              src="/icons/common/trash.svg"
+              alt="Delete"
+              width={16}
+              height={16}
+            />
+          </DeleteButton>
+        </Row>
+      ))}
+      <AddButton
+        disabled={isAddButtonDisabled}
+        variant={'tertiary'}
+        onClick={handleAddRow}
+      >
+        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+        <ButtonText>ADD ATTRIBUTE</ButtonText>
+      </AddButton>
+    </Container>
+  );
+};
+
+export default KeyValueInputsList;
diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx
index 4c222c413..350cf9530 100644
--- a/frontend/webapp/reuseable-components/tooltip/index.tsx
+++ b/frontend/webapp/reuseable-components/tooltip/index.tsx
@@ -1,73 +1,78 @@
-import React from 'react';
+import React, { useState, useRef, ReactNode, useEffect } from 'react';
+import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import { Text } from '../text';
 
 interface TooltipProps {
-  text: string;
-  children: React.ReactNode;
+  text: ReactNode;
+  children: ReactNode;
 }
 
-const TooltipContainer = styled.div`
-  position: relative;
+const TooltipWrapper = styled.div`
   display: inline-block;
-  width: fit-content;
-
-  cursor: pointer;
+  position: relative;
 `;
 
-const TooltipText = styled.div`
-  visibility: hidden;
+const TooltipContent = styled.div<{ top: number; left: number }>`
+  position: absolute;
+  top: ${(props) => props.top}px;
+  left: ${(props) => props.left}px;
+  transform: translateY(-100%);
+  border-radius: 32px;
   background-color: ${({ theme }) => theme.colors.dark_grey};
   border: 1px solid ${({ theme }) => theme.colors.border};
   color: ${({ theme }) => theme.text.primary};
-  text-align: center;
-  border-radius: 32px;
-  padding: 8px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%; /* Position the tooltip above the text */
-  left: 50%;
-  transform: translateX(-50%);
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity 0.3s;
-
-  /* Tooltip arrow */
-  &::after {
-    content: '';
-    position: absolute;
-    z-index: 99999;
-    top: 100%; /* At the bottom of the tooltip */
-    left: 50%;
-  }
-`;
-
-const TooltipWrapper = styled.div<{ hasText: boolean }>`
-  &:hover ${TooltipText} {
-    ${({ hasText }) =>
-      hasText &&
-      `
-      visibility: visible;
-      opacity: 1;
-      z-index: 999;
-    `}
-  }
+  padding: 16px;
+  z-index: 9999;
+  pointer-events: none;
+  max-width: 300px;
 `;
 
 const Tooltip: React.FC<TooltipProps> = ({ text, children }) => {
-  const hasText = !!text;
+  const [isHovered, setIsHovered] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (wrapperRef.current) {
+        const { top, left, height } =
+          wrapperRef.current.getBoundingClientRect();
+        setPosition({
+          top: top + window.scrollY - 10, // Adjust the offset for the tooltip to be above the element
+          left: left + window.scrollX,
+        });
+      }
+    };
+
+    if (isHovered) {
+      document.addEventListener('mousemove', handleMouseMove);
+    } else {
+      document.removeEventListener('mousemove', handleMouseMove);
+    }
+
+    return () => document.removeEventListener('mousemove', handleMouseMove);
+  }, [isHovered]);
+
+  const tooltipContent = (
+    <TooltipContent top={position.top} left={position.left}>
+      <Text size={14}>{text}</Text>
+    </TooltipContent>
+  );
+
+  if (text === '') {
+    return <>{children}</>;
+  }
 
   return (
-    <TooltipContainer>
-      <TooltipWrapper hasText={hasText}>
-        {children}
-        {hasText && (
-          <TooltipText>
-            <Text size={14}>{text}</Text>
-          </TooltipText>
-        )}
-      </TooltipWrapper>
-    </TooltipContainer>
+    <TooltipWrapper
+      ref={wrapperRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {children}
+      {isHovered && ReactDOM.createPortal(tooltipContent, document.body)}
+    </TooltipWrapper>
   );
 };
 

From 451d15ec9f8bea44f0585e3b54ae87733cf2ffff Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 21 Aug 2024 16:56:29 +0300
Subject: [PATCH 180/374] chore: wip

---
 frontend/webapp/reuseable-components/input/index.tsx   | 10 +++++-----
 .../webapp/reuseable-components/textarea/index.tsx     | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 289002fec..66d16e77a 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -151,9 +151,9 @@ const Input: React.FC<InputProps> = ({
   return (
     <Container>
       {title && (
-        <Tooltip text={tooltip || ''}>
-          <HeaderWrapper>
-            <Title>{title}</Title>
+        <HeaderWrapper>
+          <Title>{title}</Title>
+          <Tooltip text={tooltip || ''}>
             {tooltip && (
               <Image
                 src="/icons/common/info.svg"
@@ -163,8 +163,8 @@ const Input: React.FC<InputProps> = ({
                 style={{ marginBottom: 4 }}
               />
             )}
-          </HeaderWrapper>
-        </Tooltip>
+          </Tooltip>
+        </HeaderWrapper>
       )}
 
       <InputWrapper
diff --git a/frontend/webapp/reuseable-components/textarea/index.tsx b/frontend/webapp/reuseable-components/textarea/index.tsx
index 93070398b..e38121b70 100644
--- a/frontend/webapp/reuseable-components/textarea/index.tsx
+++ b/frontend/webapp/reuseable-components/textarea/index.tsx
@@ -122,9 +122,9 @@ const TextArea: React.FC<TextAreaProps> = ({
   return (
     <Container>
       {title && (
-        <Tooltip text={tooltip || ''}>
-          <HeaderWrapper>
-            <Title>{title}</Title>
+        <HeaderWrapper>
+          <Title>{title}</Title>
+          <Tooltip text={tooltip || ''}>
             {tooltip && (
               <Image
                 src="/icons/common/info.svg"
@@ -134,8 +134,8 @@ const TextArea: React.FC<TextAreaProps> = ({
                 style={{ marginBottom: 4 }}
               />
             )}
-          </HeaderWrapper>
-        </Tooltip>
+          </Tooltip>
+        </HeaderWrapper>
       )}
 
       <InputWrapper

From bedc79c6f48760f99fa2f6590ef5ced1d94d37dc Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 22 Aug 2024 12:04:57 +0300
Subject: [PATCH 181/374] chore: no data component

---
 .../destinations-list/index.tsx               | 15 +++++-
 .../destinations/add-destination/index.tsx    |  9 +++-
 .../choose-sources-list/index.tsx             | 16 +++++-
 .../public/icons/common/no-data-found.svg     |  3 ++
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../no-data-found/index.tsx                   | 54 +++++++++++++++++++
 .../notification-note/index.tsx               | 46 ++++++++++++++--
 7 files changed, 134 insertions(+), 10 deletions(-)
 create mode 100644 frontend/webapp/public/icons/common/no-data-found.svg
 create mode 100644 frontend/webapp/reuseable-components/no-data-found/index.tsx

diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 9d71e35be..5240859f4 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
-import { Text } from '@/reuseable-components';
+import { NoDataFound, Text } from '@/reuseable-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   gap: 12px;
   align-self: stretch;
   max-height: calc(100vh - 410px);
@@ -76,6 +76,9 @@ const TextWrapper = styled.div`
   height: 36px;
   justify-content: space-between;
 `;
+const NoDataFoundWrapper = styled(Container)`
+  margin-top: 80px;
+`;
 
 interface DestinationsListProps {
   items: DestinationTypeItem[];
@@ -101,6 +104,14 @@ const DestinationsList: React.FC<DestinationsListProps> = ({
     ));
   }
 
+  if (!items.length) {
+    return (
+      <NoDataFoundWrapper>
+        <NoDataFound title="No sources found" />
+      </NoDataFoundWrapper>
+    );
+  }
+
   return (
     <Container>
       {items.map((item) => (
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 0443c6bc3..6c8020074 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -80,7 +80,14 @@ export function ChooseDestinationContainer() {
         />
         {isSourcesListEmpty() && destinations.length === 0 && (
           <NotificationNoteWrapper>
-            <NotificationNote type={'warning'} text={'No sources selected.'} />
+            <NotificationNote
+              type={'warning'}
+              text={'No sources selected.'}
+              action={{
+                label: 'Select sources',
+                onClick: () => router.push('/setup/choose-sources'),
+              }}
+            />
           </NotificationNoteWrapper>
         )}
         <AddDestinationButtonWrapper>
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index 30739aa07..6e1ba40cd 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 import { K8sActualSource } from '@/types';
-import { Text } from '@/reuseable-components';
+import { NoDataFound, Text } from '@/reuseable-components';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   gap: 12px;
   background: ${({ theme }) => theme.colors.primary};
   height: 100%;
@@ -65,6 +65,10 @@ const SelectedTextWrapper = styled.div`
   margin-right: 24px;
 `;
 
+const NoDataFoundWrapper = styled(Container)`
+  margin-top: 80px;
+`;
+
 interface SourcesListProps {
   items: K8sActualSource[];
   selectedItems: K8sActualSource[];
@@ -83,6 +87,14 @@ const SourcesList: React.FC<SourcesListProps> = ({
     return !!selected;
   }
 
+  if (!items.length) {
+    return (
+      <NoDataFoundWrapper>
+        <NoDataFound title="No sources found" />
+      </NoDataFoundWrapper>
+    );
+  }
+
   return (
     <Container>
       {items.map((item) => (
diff --git a/frontend/webapp/public/icons/common/no-data-found.svg b/frontend/webapp/public/icons/common/no-data-found.svg
new file mode 100644
index 000000000..0766b20e9
--- /dev/null
+++ b/frontend/webapp/public/icons/common/no-data-found.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M6.31647 10.9497L7.96639 9.29983M7.96639 9.29983L9.61631 7.64992M7.96639 9.29983L6.31647 7.64992M7.96639 9.29983L9.61631 10.9497M14.6666 8.26667V9.73333C14.6666 11.2268 14.6666 11.9735 14.3759 12.544C14.1203 13.0457 13.7123 13.4537 13.2106 13.7094C12.6401 14 11.8934 14 10.3999 14H5.59992C4.10645 14 3.35971 14 2.78928 13.7094C2.28751 13.4537 1.87956 13.0457 1.6239 12.544C1.33325 11.9735 1.33325 11.2268 1.33325 9.73333V6.26667C1.33325 4.77319 1.33325 4.02646 1.6239 3.45603C1.87956 2.95426 2.28751 2.54631 2.78928 2.29065C3.35971 2 4.10645 2 5.59992 2H5.81029C6.12336 2 6.2799 2 6.42199 2.04315C6.54778 2.08135 6.6648 2.14398 6.76636 2.22745C6.88108 2.32174 6.96791 2.45199 7.14157 2.71248L7.52493 3.28752C7.69859 3.54801 7.78542 3.67826 7.90014 3.77255C8.0017 3.85602 8.11873 3.91865 8.24452 3.95685C8.38661 4 8.54314 4 8.85621 4H10.3999C11.8934 4 12.6401 4 13.2106 4.29065C13.7123 4.54631 14.1203 4.95426 14.3759 5.45603C14.6666 6.02646 14.6666 6.77319 14.6666 8.26667Z" stroke="#7A7A7A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index adb95e883..ada40c8e4 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -17,3 +17,4 @@ export * from './fade-loader';
 export * from './textarea';
 export * from './input-list';
 export * from './key-value-input-list';
+export * from './no-data-found';
diff --git a/frontend/webapp/reuseable-components/no-data-found/index.tsx b/frontend/webapp/reuseable-components/no-data-found/index.tsx
new file mode 100644
index 000000000..9698f502d
--- /dev/null
+++ b/frontend/webapp/reuseable-components/no-data-found/index.tsx
@@ -0,0 +1,54 @@
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../text';
+
+type NoDataFoundProps = {
+  title: string;
+  subTitle?: string;
+};
+
+const Title = styled(Text)`
+  color: #7a7a7a;
+  line-height: 24px;
+`;
+
+const SubTitle = styled(Text)`
+  color: #525252;
+  font-size: 14px;
+  font-weight: 200;
+  line-height: 20px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const NoDataFound: React.FC<NoDataFoundProps> = ({
+  title,
+  subTitle = 'Check your search phrase and try one more time',
+}) => {
+  return (
+    <Container>
+      <TitleWrapper>
+        <Image
+          src="/icons/common/no-data-found.svg"
+          alt="no-found"
+          width={16}
+          height={16}
+        />
+        <Title>{title}</Title>
+      </TitleWrapper>
+      {subTitle && <SubTitle>{subTitle}</SubTitle>}
+    </Container>
+  );
+};
+
+export { NoDataFound };
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
index cc0d9381f..a7d5f94f9 100644
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -9,11 +9,16 @@ type NotificationType = 'warning' | 'error' | 'success' | 'info';
 interface NotificationProps {
   type: NotificationType;
   text: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
 }
 
 const NotificationContainer = styled.div<{ type: NotificationType }>`
   display: flex;
   align-items: center;
+  justify-content: space-between;
   padding: 12px 16px;
   border-radius: 32px;
 
@@ -58,6 +63,26 @@ const Title = styled(Text)<{ type: NotificationType }>`
   }};
 `;
 
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ActionButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+const ActionButton = styled(Text)`
+  text-decoration: underline;
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+`;
+
 const NotificationIcon = ({ type }: { type: NotificationType }) => {
   switch (type) {
     case 'warning':
@@ -95,13 +120,24 @@ const NotificationIcon = ({ type }: { type: NotificationType }) => {
   }
 };
 
-const NotificationNote: React.FC<NotificationProps> = ({ type, text }) => {
+const NotificationNote: React.FC<NotificationProps> = ({
+  type,
+  text,
+  action,
+}) => {
   return (
     <NotificationContainer type={type}>
-      <IconWrapper>
-        <NotificationIcon type={type} />
-      </IconWrapper>
-      <Title type={type}>{text}</Title>
+      <TitleWrapper>
+        <IconWrapper>
+          <NotificationIcon type={type} />
+        </IconWrapper>
+        <Title type={type}>{text}</Title>
+      </TitleWrapper>
+      {action && (
+        <ActionButtonWrapper onClick={action.onClick}>
+          <ActionButton decoration="under">{action.label}</ActionButton>
+        </ActionButtonWrapper>
+      )}
     </NotificationContainer>
   );
 };

From d7e6043512ab3cbc955de6b04c215ce4080b3587 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 22 Aug 2024 12:05:25 +0300
Subject: [PATCH 182/374] chore: change dest title

---
 .../destinations/add-destination/destinations-list/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 5240859f4..5f48f00a9 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -107,7 +107,7 @@ const DestinationsList: React.FC<DestinationsListProps> = ({
   if (!items.length) {
     return (
       <NoDataFoundWrapper>
-        <NoDataFound title="No sources found" />
+        <NoDataFound title="No destinations found" />
       </NoDataFoundWrapper>
     );
   }

From 1b14b3e654fba4560d05672273c762a5d509b06d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 22 Aug 2024 12:11:40 +0300
Subject: [PATCH 183/374] chore: wip

---
 .../reuseable-components/counter/index.tsx       | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/reuseable-components/counter/index.tsx b/frontend/webapp/reuseable-components/counter/index.tsx
index b9b242e63..baf34084a 100644
--- a/frontend/webapp/reuseable-components/counter/index.tsx
+++ b/frontend/webapp/reuseable-components/counter/index.tsx
@@ -13,7 +13,7 @@ const Container = styled.div`
   gap: 8px;
 `;
 
-const ValueContainer = styled.div`
+const ValueContainer = styled.div<{ value?: number }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -21,16 +21,22 @@ const ValueContainer = styled.div`
   height: 20px;
   border-radius: 32px;
   border: 1px solid rgba(249, 249, 249, 0.24);
+  background: ${({ value, theme }) =>
+    value ? theme.colors.majestic_blue : 'transparent'};
+`;
+
+const Value = styled(Text)<{ value?: number }>`
+  opacity: ${({ value }) => (value ? 1 : 0.8)};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-size: 12px;
 `;
 
 const Counter: React.FC<CounterProps> = ({ value, title }) => {
   return (
     <Container>
       <Text>{title}</Text>
-      <ValueContainer>
-        <Text size={12} opacity={0.8} family={'secondary'}>
-          {value}
-        </Text>
+      <ValueContainer value={value}>
+        <Value>{value}</Value>
       </ValueContainer>
     </Container>
   );

From 8d0984817c911513fd1bc09e462b5e654ef1b265 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 22 Aug 2024 16:48:04 +0300
Subject: [PATCH 184/374] chore: wip

---
 .../add-destination/destinations-list/index.tsx          | 2 +-
 .../sources/choose-sources/choose-sources-list/index.tsx | 9 ++++-----
 frontend/webapp/reuseable-components/checkbox/index.tsx  | 4 ++--
 frontend/webapp/reuseable-components/counter/index.tsx   | 1 +
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 5f48f00a9..a42ae43b9 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -31,7 +31,7 @@ const ListItem = styled.div<{}>`
   background: rgba(249, 249, 249, 0.04);
 
   &:hover {
-    background: rgba(68, 74, 217, 0.24);
+    background: rgba(249, 249, 249, 0.08);
   }
   &:last-child {
     margin-bottom: 32px;
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index 6e1ba40cd..b61a60fb6 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 import { K8sActualSource } from '@/types';
-import { NoDataFound, Text } from '@/reuseable-components';
+import { Checkbox, NoDataFound, Text } from '@/reuseable-components';
 
 const Container = styled.div`
   display: flex;
@@ -29,7 +29,8 @@ const ListItem = styled.div<{ selected: boolean }>`
     selected ? 'rgba(68, 74, 217, 0.24)' : 'rgba(249, 249, 249, 0.04)'};
 
   &:hover {
-    background: rgba(68, 74, 217, 0.24);
+    background: ${({ selected }) =>
+      selected ? 'rgba(68, 74, 217, 0.40)' : 'rgba(249, 249, 249, 0.08)'};
   }
 `;
 
@@ -121,9 +122,7 @@ const SourcesList: React.FC<SourcesListProps> = ({
           </ListItemContent>
           {isItemSelected(item) && (
             <SelectedTextWrapper>
-              <Text size={12} family="secondary">
-                SELECTED
-              </Text>
+              <Checkbox initialValue={true} />
             </SelectedTextWrapper>
           )}
         </ListItem>
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
index 57a1066d0..a04de440d 100644
--- a/frontend/webapp/reuseable-components/checkbox/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -5,7 +5,7 @@ import Image from 'next/image';
 import { Text } from '../text';
 
 interface CheckboxProps {
-  title: string;
+  title?: string;
   tooltip?: string;
   initialValue?: boolean;
   onChange?: (value: boolean) => void;
@@ -72,7 +72,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
             />
           )}
         </CheckboxWrapper>
-        <Text size={14}>{title}</Text>
+        {title && <Text size={14}>{title}</Text>}
         {tooltip && (
           <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
         )}
diff --git a/frontend/webapp/reuseable-components/counter/index.tsx b/frontend/webapp/reuseable-components/counter/index.tsx
index baf34084a..1087b4eda 100644
--- a/frontend/webapp/reuseable-components/counter/index.tsx
+++ b/frontend/webapp/reuseable-components/counter/index.tsx
@@ -21,6 +21,7 @@ const ValueContainer = styled.div<{ value?: number }>`
   height: 20px;
   border-radius: 32px;
   border: 1px solid rgba(249, 249, 249, 0.24);
+  transition: background-color 0.3s;
   background: ${({ value, theme }) =>
     value ? theme.colors.majestic_blue : 'transparent'};
 `;

From 79091b149b7a7456af64825d39187ee764355975 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 22 Aug 2024 16:58:13 +0300
Subject: [PATCH 185/374] chore: wip

---
 frontend/webapp/components/setup/menu/index.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
index 6c88467fe..5627c8e10 100644
--- a/frontend/webapp/components/setup/menu/index.tsx
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -13,14 +13,24 @@ const Container = styled.div`
 const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
   display: flex;
   gap: 16px;
-  padding: 10px 0;
-  cursor: ${({ state }) => (state === 'disabled' ? 'auto' : 'auto')};
+  padding: 8px;
   opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
+  transition: all 0.3s;
 
-  transition: opacity 0.3s;
+  ${({ state }) =>
+    state === 'finish' &&
+    css`
+      opacity: 0.8;
+    `}
 
   ${({ state }) => state === 'active' && css``}
 
+  ${({ state }) =>
+    state === 'disabled' &&
+    css`
+      opacity: 0.5;
+    `}
+
   & + & {
     margin-top: 10px;
   }

From d23621ecd1a84eff9060020dc55b270286e92199 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 22 Aug 2024 17:22:08 +0300
Subject: [PATCH 186/374] chore: wip

---
 .../choose-destination-menu/index.tsx         | 30 ++++++++++++++-----
 .../choose-destination-modal-body/index.tsx   | 10 ++++---
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
index ecf42141e..5c7474c74 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { DropdownOption } from '@/types';
-import { MonitorsTapList } from '@/components';
-import { Dropdown, Input } from '@/reuseable-components';
+import { MONITORS_OPTIONS } from '@/utils';
+import { Checkbox, Dropdown, Input } from '@/reuseable-components';
 
 interface FilterComponentProps {
   selectedTag: DropdownOption | undefined;
@@ -24,6 +24,12 @@ const FilterContainer = styled.div`
   padding: 24px 0;
 `;
 
+const MonitorButtonsContainer = styled.div`
+  display: flex;
+  gap: 32px;
+  margin-left: 32px;
+`;
+
 const DROPDOWN_OPTIONS = [
   { value: 'All types', id: 'all' },
   { value: 'Managed', id: 'managed' },
@@ -32,9 +38,9 @@ const DROPDOWN_OPTIONS = [
 
 const DestinationFilterComponent: React.FC<FilterComponentProps> = ({
   selectedTag,
+  selectedMonitors,
   onTagSelect,
   onSearch,
-  selectedMonitors,
   onMonitorSelect,
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
@@ -62,10 +68,20 @@ const DestinationFilterComponent: React.FC<FilterComponentProps> = ({
           onSelect={onTagSelect}
         />
       </InputAndDropdownContainer>
-      <MonitorsTapList
-        selectedMonitors={selectedMonitors}
-        onMonitorSelect={onMonitorSelect}
-      />
+      <MonitorButtonsContainer>
+        {MONITORS_OPTIONS.map((monitor) => (
+          <Checkbox
+            key={monitor.id}
+            title={monitor.value}
+            initialValue
+            onChange={() => onMonitorSelect(monitor.id)}
+            disabled={
+              selectedMonitors.length === 1 &&
+              selectedMonitors.includes(monitor.id)
+            }
+          />
+        ))}
+      </MonitorButtonsContainer>
     </FilterContainer>
   );
 };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index 294c345f3..5f4fdd619 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -30,7 +30,11 @@ export function ChooseDestinationModalBody({
   onSelect,
 }: ChooseDestinationModalBodyProps) {
   const [searchValue, setSearchValue] = useState('');
-  const [selectedMonitors, setSelectedMonitors] = useState<string[]>([]);
+  const [selectedMonitors, setSelectedMonitors] = useState<string[]>([
+    'logs',
+    'metrics',
+    'traces',
+  ]);
   const [dropdownValue, setDropdownValue] = useState<DropdownOption>({
     id: 'all',
     value: 'All types',
@@ -58,9 +62,7 @@ export function ChooseDestinationModalBody({
     if (selectedMonitors.length) {
       filteredData = filteredData.filter((item) =>
         selectedMonitors.some(
-          (monitor) =>
-            item.supportedSignals[monitor as keyof typeof item.supportedSignals]
-              .supported
+          (monitor) => item.supportedSignals[monitor].supported
         )
       );
     }

From 39743b8dbcbeb8084a1d42e347139dc0222500fa Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 25 Aug 2024 10:09:49 +0300
Subject: [PATCH 187/374] chore: wip

---
 .../add-destination/destinations-list/index.tsx            | 2 +-
 frontend/webapp/reuseable-components/input/index.tsx       | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index a42ae43b9..fd2f64388 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -10,7 +10,7 @@ const Container = styled.div`
   align-items: center;
   gap: 12px;
   align-self: stretch;
-  max-height: calc(100vh - 410px);
+  max-height: calc(100vh - 424px);
   overflow-y: auto;
 
   @media (height < 800px) {
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 66d16e77a..20a16d51b 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -11,6 +11,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   errorMessage?: string;
   title?: string;
   tooltip?: string;
+  required?: boolean;
 }
 
 const Container = styled.div`
@@ -146,6 +147,7 @@ const Input: React.FC<InputProps> = ({
   errorMessage,
   title,
   tooltip,
+  required,
   ...props
 }) => {
   return (
@@ -153,6 +155,11 @@ const Input: React.FC<InputProps> = ({
       {title && (
         <HeaderWrapper>
           <Title>{title}</Title>
+          {!required && (
+            <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+              (optional)
+            </Text>
+          )}
           <Tooltip text={tooltip || ''}>
             {tooltip && (
               <Image

From 4ec7d38ea35ba3b6877673079a1a46d8457315b3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 25 Aug 2024 10:13:29 +0300
Subject: [PATCH 188/374] chore: wip

---
 .../reuseable-components/checkbox/index.tsx   | 29 ++++++++-----------
 .../reuseable-components/tooltip/index.tsx    |  3 +-
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
index a04de440d..ada9b9fb3 100644
--- a/frontend/webapp/reuseable-components/checkbox/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -60,24 +60,19 @@ const Checkbox: React.FC<CheckboxProps> = ({
   };
 
   return (
-    <Tooltip text={tooltip || ''}>
-      <Container disabled={disabled} onClick={handleToggle}>
-        <CheckboxWrapper isChecked={isChecked} disabled={disabled}>
-          {isChecked && (
-            <Image
-              src="/icons/common/check.svg"
-              alt=""
-              width={12}
-              height={12}
-            />
-          )}
-        </CheckboxWrapper>
-        {title && <Text size={14}>{title}</Text>}
-        {tooltip && (
-          <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
+    <Container disabled={disabled} onClick={handleToggle}>
+      <CheckboxWrapper isChecked={isChecked} disabled={disabled}>
+        {isChecked && (
+          <Image src="/icons/common/check.svg" alt="" width={12} height={12} />
         )}
-      </Container>
-    </Tooltip>
+      </CheckboxWrapper>
+      {title && <Text size={14}>{title}</Text>}
+      {tooltip && (
+        <Tooltip text={tooltip || ''}>
+          <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
+        </Tooltip>
+      )}
+    </Container>
   );
 };
 
diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx
index 350cf9530..c5de22281 100644
--- a/frontend/webapp/reuseable-components/tooltip/index.tsx
+++ b/frontend/webapp/reuseable-components/tooltip/index.tsx
@@ -9,8 +9,9 @@ interface TooltipProps {
 }
 
 const TooltipWrapper = styled.div`
-  display: inline-block;
+  display: flex;
   position: relative;
+  align-items: center;
 `;
 
 const TooltipContent = styled.div<{ top: number; left: number }>`

From 394692e6151260d08271c6a260395646c8e6a998 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 25 Aug 2024 10:28:55 +0300
Subject: [PATCH 189/374] chore: wip

---
 frontend/endpoints/sources.go | 10 ----------
 frontend/go.mod               |  1 +
 frontend/go.sum               |  8 ++++++--
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/endpoints/sources.go b/frontend/endpoints/sources.go
index 99363f03a..a6640e066 100644
--- a/frontend/endpoints/sources.go
+++ b/frontend/endpoints/sources.go
@@ -80,17 +80,7 @@ func GetSources(c *gin.Context, odigosns string) {
 	}
 
 	for _, item := range items {
-<<<<<<< HEAD
 		println(item.nsItem.Name)
-=======
-		if item.nsItem.InstrumentationEffective {
-			id := common.SourceID{Namespace: item.namespace, Kind: workload.WorkloadKind(item.nsItem.Kind), Name: item.nsItem.Name}
-			effectiveInstrumentedSources[id] = ThinSource{
-				NumberOfRunningInstances: item.nsItem.Instances,
-				SourceID:                 id,
-			}
-		}
->>>>>>> 80f4d10b7a1e85d0e82d47d6b03454098a7d9b7b
 	}
 
 	sourcesResult := []ThinSource{}
diff --git a/frontend/go.mod b/frontend/go.mod
index 03d80e50f..7d8023836 100644
--- a/frontend/go.mod
+++ b/frontend/go.mod
@@ -12,6 +12,7 @@ require (
 	github.com/odigos-io/odigos/destinations v0.0.0-20240223090638-df3328a088bc
 	github.com/odigos-io/odigos/k8sutils v0.0.0
 	github.com/stretchr/testify v1.9.0
+	github.com/vektah/gqlparser/v2 v2.5.16
 	go.opentelemetry.io/collector/component v0.106.1
 	go.opentelemetry.io/collector/confmap v0.106.1
 	go.opentelemetry.io/collector/exporter v0.106.0
diff --git a/frontend/go.sum b/frontend/go.sum
index 3d4d63fea..e0fbf6842 100644
--- a/frontend/go.sum
+++ b/frontend/go.sum
@@ -25,10 +25,10 @@ github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311/go.mod h1:b583j
 github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48 h1:fRzb/w+pyskVMQ+UbP35JkH8yB7MYb4q/qhBarqZE6g=
-github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48/go.mod h1:if7Fbed8SFyPtHLHbg49SI7NAdJiC5WIA09pe59rfAA=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48 h1:fRzb/w+pyskVMQ+UbP35JkH8yB7MYb4q/qhBarqZE6g=
+github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48/go.mod h1:if7Fbed8SFyPtHLHbg49SI7NAdJiC5WIA09pe59rfAA=
 github.com/emicklei/go-restful/v3 v3.11.0 h1:rAQeMHw1c7zTmncogyy8VvRZwtkmkZ4FxERmMY4rD+g=
 github.com/emicklei/go-restful/v3 v3.11.0/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry+4bhvbpWn3mrbc=
 github.com/evanphx/json-patch/v5 v5.9.0 h1:kcBlZQbplgElYIlo/n1hJbls2z/1awpXxpRi0/FOJfg=
@@ -196,6 +196,10 @@ github.com/rogpeppe/go-internal v1.12.0 h1:exVL4IDcn6na9z1rAb56Vxr+CgyK3nn3O+epU
 github.com/rogpeppe/go-internal v1.12.0/go.mod h1:E+RYuTGaKKdloAfM02xzb0FW3Paa99yedzYV+kq4uf4=
 github.com/rs/cors v1.11.0 h1:0B9GE/r9Bc2UxRMMtymBkHTenPkHDv0CW4Y98GBY+po=
 github.com/rs/cors v1.11.0/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
+github.com/sergi/go-diff v1.3.1 h1:xkr+Oxo4BOQKmkn/B9eMK0g5Kg/983T9DqqPHwYqD+8=
+github.com/sergi/go-diff v1.3.1/go.mod h1:aMJSSKb2lpPvRNec0+w3fl7LP9IOFzdc9Pa4NFbPK1I=
+github.com/sosodev/duration v1.3.1 h1:qtHBDMQ6lvMQsL15g4aopM4HEfOaYuhWBw3NPTtlqq4=
+github.com/sosodev/duration v1.3.1/go.mod h1:RQIBBX0+fMLc/D9+Jb/fwvVmo0eZvDDEERAikUR6SDg=
 github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=

From 11e95c36b95c5de338f18746fd61cff9035847cc Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 25 Aug 2024 10:34:04 +0300
Subject: [PATCH 190/374] chore: wip

---
 frontend/services/sources.go                         | 2 +-
 frontend/services/test_connection/test_connection.go | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/services/sources.go b/frontend/services/sources.go
index abdd8dbb1..170ba15ab 100644
--- a/frontend/services/sources.go
+++ b/frontend/services/sources.go
@@ -63,7 +63,7 @@ type ThinSource struct {
 }
 
 func GetActualSource(ctx context.Context, ns string, kind string, name string) (*Source, error) {
-	k8sObjectName := workload.GetRuntimeObjectName(name, kind)
+	k8sObjectName := workload.CalculateWorkloadRuntimeObjectName(name, kind)
 	owner, numberOfRunningInstances := getWorkload(ctx, ns, kind, name)
 	if owner == nil {
 		return nil, fmt.Errorf("owner not found")
diff --git a/frontend/services/test_connection/test_connection.go b/frontend/services/test_connection/test_connection.go
index 3d1acdcc0..6c078f29a 100644
--- a/frontend/services/test_connection/test_connection.go
+++ b/frontend/services/test_connection/test_connection.go
@@ -137,7 +137,7 @@ func TestConnection(ctx context.Context, dest config.ExporterConfigurer) TestCon
 		}
 	}
 
-	exporter, err := connectionTester.Factory().CreateTracesExporter(ctx, exportertest.NewNopCreateSettings(), defaultConfig)
+	exporter, err := connectionTester.Factory().CreateTracesExporter(ctx, exportertest.NewNopSettings(), defaultConfig)
 	if err != nil {
 		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
 	}

From 2f1e32da2212562f361e84133350c5b3e2f6a82f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 25 Aug 2024 14:42:22 +0300
Subject: [PATCH 191/374] chore: get detected destinations from gql

---
 frontend/graph/generated.go                   | 345 ++++++++++++++++++
 frontend/graph/model/models_gen.go            |   6 +
 frontend/graph/schema.graphqls                |   7 +
 frontend/graph/schema.resolvers.go            |  30 +-
 .../destination_finder.go                     |  79 ++++
 .../destination_recognition/elasticsearch.go  |  45 +++
 .../destination_recognition/jaeger.go         |  46 +++
 frontend/services/destinations.go             |  24 ++
 frontend/services/utils.go                    |  15 +
 9 files changed, 593 insertions(+), 4 deletions(-)
 create mode 100644 frontend/services/destination_recognition/destination_finder.go
 create mode 100644 frontend/services/destination_recognition/elasticsearch.go
 create mode 100644 frontend/services/destination_recognition/jaeger.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 23247a13c..ec686160a 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -77,6 +77,12 @@ type ComplexityRoot struct {
 		Type            func(childComplexity int) int
 	}
 
+	DestinationDetails struct {
+		Fields    func(childComplexity int) int
+		Type      func(childComplexity int) int
+		URLString func(childComplexity int) int
+	}
+
 	DestinationTypesCategoryItem struct {
 		DisplayName             func(childComplexity int) int
 		ImageUrl                func(childComplexity int) int
@@ -156,6 +162,7 @@ type ComplexityRoot struct {
 		Config                 func(childComplexity int) int
 		DestinationTypeDetails func(childComplexity int, typeArg string) int
 		DestinationTypes       func(childComplexity int) int
+		PotentialDestinations  func(childComplexity int) int
 	}
 
 	SourceContainerRuntimeDetails struct {
@@ -204,6 +211,7 @@ type QueryResolver interface {
 	Config(ctx context.Context) (*model.GetConfigResponse, error)
 	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
 	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
+	PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error)
 }
 
 type executableSchema struct {
@@ -361,6 +369,27 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Destination.Type(childComplexity), true
 
+	case "DestinationDetails.fields":
+		if e.complexity.DestinationDetails.Fields == nil {
+			break
+		}
+
+		return e.complexity.DestinationDetails.Fields(childComplexity), true
+
+	case "DestinationDetails.type":
+		if e.complexity.DestinationDetails.Type == nil {
+			break
+		}
+
+		return e.complexity.DestinationDetails.Type(childComplexity), true
+
+	case "DestinationDetails.urlString":
+		if e.complexity.DestinationDetails.URLString == nil {
+			break
+		}
+
+		return e.complexity.DestinationDetails.URLString(childComplexity), true
+
 	case "DestinationTypesCategoryItem.displayName":
 		if e.complexity.DestinationTypesCategoryItem.DisplayName == nil {
 			break
@@ -685,6 +714,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.DestinationTypes(childComplexity), true
 
+	case "Query.potentialDestinations":
+		if e.complexity.Query.PotentialDestinations == nil {
+			break
+		}
+
+		return e.complexity.Query.PotentialDestinations(childComplexity), true
+
 	case "SourceContainerRuntimeDetails.containerName":
 		if e.complexity.SourceContainerRuntimeDetails.ContainerName == nil {
 			break
@@ -1965,6 +2001,138 @@ func (ec *executionContext) fieldContext_Destination_conditions(_ context.Contex
 	return fc, nil
 }
 
+func (ec *executionContext) _DestinationDetails_type(ctx context.Context, field graphql.CollectedField, obj *model.DestinationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationDetails_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationDetails_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationDetails_urlString(ctx context.Context, field graphql.CollectedField, obj *model.DestinationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationDetails_urlString(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.URLString, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationDetails_urlString(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationDetails_fields(ctx context.Context, field graphql.CollectedField, obj *model.DestinationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationDetails_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationDetails_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _DestinationTypesCategoryItem_type(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
 	if err != nil {
@@ -3978,6 +4146,58 @@ func (ec *executionContext) fieldContext_Query_destinationTypeDetails(ctx contex
 	return fc, nil
 }
 
+func (ec *executionContext) _Query_potentialDestinations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_potentialDestinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().PotentialDestinations(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.DestinationDetails)
+	fc.Result = res
+	return ec.marshalNDestinationDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationDetailsᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_potentialDestinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_DestinationDetails_type(ctx, field)
+			case "urlString":
+				return ec.fieldContext_DestinationDetails_urlString(ctx, field)
+			case "fields":
+				return ec.fieldContext_DestinationDetails_fields(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationDetails", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
@@ -6984,6 +7204,55 @@ func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionS
 	return out
 }
 
+var destinationDetailsImplementors = []string{"DestinationDetails"}
+
+func (ec *executionContext) _DestinationDetails(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationDetails) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationDetailsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationDetails")
+		case "type":
+			out.Values[i] = ec._DestinationDetails_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "urlString":
+			out.Values[i] = ec._DestinationDetails_urlString(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "fields":
+			out.Values[i] = ec._DestinationDetails_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var destinationTypesCategoryItemImplementors = []string{"DestinationTypesCategoryItem"}
 
 func (ec *executionContext) _DestinationTypesCategoryItem(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationTypesCategoryItem) graphql.Marshaler {
@@ -7696,6 +7965,28 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "potentialDestinations":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_potentialDestinations(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
@@ -8256,6 +8547,60 @@ func (ec *executionContext) marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋ
 	return ec._Destination(ctx, sel, v)
 }
 
+func (ec *executionContext) marshalNDestinationDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationDetailsᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationDetails) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestinationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationDetails(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDestinationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationDetails(ctx context.Context, sel ast.SelectionSet, v *model.DestinationDetails) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._DestinationDetails(ctx, sel, v)
+}
+
 func (ec *executionContext) unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx context.Context, v interface{}) (model.DestinationInput, error) {
 	res, err := ec.unmarshalInputDestinationInput(ctx, v)
 	return res, graphql.ErrorOnPath(ctx, err)
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index e71638825..52b137a14 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -25,6 +25,12 @@ type Condition struct {
 	Message            *string         `json:"message,omitempty"`
 }
 
+type DestinationDetails struct {
+	Type      string `json:"type"`
+	URLString string `json:"urlString"`
+	Fields    string `json:"fields"`
+}
+
 type DestinationInput struct {
 	Name            string                `json:"name"`
 	Type            string                `json:"type"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 9cfed5381..ac7d0f7e1 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -209,11 +209,18 @@ type TestConnectionResponse {
   reason: String
 }
 
+type DestinationDetails {
+  type: String!
+  urlString: String!
+  fields: String!
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
   destinationTypes: GetDestinationTypesResponse
   destinationTypeDetails(type: String!): GetDestinationDetailsResponse
+  potentialDestinations: [DestinationDetails!]!
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 983b6a218..372ae91fe 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -196,8 +196,8 @@ func (r *mutationResolver) PersistK8sSources(ctx context.Context, namespace stri
 }
 
 // TestConnectionForDestination is the resolver for the testConnectionForDestination field.
-func (r *mutationResolver) TestConnectionForDestination(ctx context.Context, input model.DestinationInput) (*model.TestConnectionResponse, error) {
-	destType := common.DestinationType(input.Type)
+func (r *mutationResolver) TestConnectionForDestination(ctx context.Context, destination model.DestinationInput) (*model.TestConnectionResponse, error) {
+	destType := common.DestinationType(destination.Type)
 
 	destConfig, err := services.GetDestinationTypeConfig(destType)
 	if err != nil {
@@ -205,10 +205,10 @@ func (r *mutationResolver) TestConnectionForDestination(ctx context.Context, inp
 	}
 
 	if !destConfig.Spec.TestConnectionSupported {
-		return nil, fmt.Errorf("destination type %s does not support test connection", input.Type)
+		return nil, fmt.Errorf("destination type %s does not support test connection", destination.Type)
 	}
 
-	configurer, err := testconnection.ConvertDestinationToConfigurer(input)
+	configurer, err := testconnection.ConvertDestinationToConfigurer(destination)
 	if err != nil {
 		return nil, err
 	}
@@ -303,6 +303,28 @@ func (r *queryResolver) DestinationTypeDetails(ctx context.Context, typeArg stri
 	return &resp, nil
 }
 
+// PotentialDestinations is the resolver for the potentialDestinations field.
+func (r *queryResolver) PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error) {
+	potentialDestinations := services.PotentialDestinations(ctx)
+	if potentialDestinations == nil {
+		return nil, fmt.Errorf("failed to fetch potential destinations")
+	}
+
+	// Convert []destination_recognition.DestinationDetails to []*DestinationDetails
+	var result []*model.DestinationDetails
+	for _, dest := range potentialDestinations {
+
+		fieldsString := services.ConvertFieldsToString(dest.Fields)
+
+		result = append(result, &model.DestinationDetails{
+			Type:   string(dest.Type),
+			Fields: fieldsString,
+		})
+	}
+
+	return result, nil
+}
+
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
diff --git a/frontend/services/destination_recognition/destination_finder.go b/frontend/services/destination_recognition/destination_finder.go
new file mode 100644
index 000000000..20258eff7
--- /dev/null
+++ b/frontend/services/destination_recognition/destination_finder.go
@@ -0,0 +1,79 @@
+package destination_recognition
+
+import (
+	"context"
+
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+	k8s "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+var SupportedDestinationType = []common.DestinationType{common.JaegerDestinationType, common.ElasticsearchDestinationType}
+
+type DestinationDetails struct {
+	Type   common.DestinationType `json:"type"`
+	Fields map[string]string      `json:"fields"`
+}
+
+type IDestinationFinder interface {
+	isPotentialService(k8s.Service) bool
+	fetchDestinationDetails(k8s.Service) DestinationDetails
+	getServiceURL() string
+}
+
+func GetAllPotentialDestinationDetails(ctx context.Context, namespaces []k8s.Namespace, dests *odigosv1.DestinationList) ([]DestinationDetails, error) {
+	var destinationFinder IDestinationFinder
+	var destinationDetails []DestinationDetails
+	var err error
+
+	for _, ns := range namespaces {
+		err = client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.CoreV1().Services(ns.Name).List,
+			ctx, metav1.ListOptions{}, func(services *k8s.ServiceList) error {
+				for _, service := range services.Items {
+					for _, destinationType := range SupportedDestinationType {
+						destinationFinder = getDestinationFinder(destinationType)
+
+						if destinationFinder.isPotentialService(service) {
+							potentialDestination := destinationFinder.fetchDestinationDetails(service)
+
+							if !destinationExist(dests, potentialDestination, destinationFinder) {
+								destinationDetails = append(destinationDetails, potentialDestination)
+							}
+							break
+						}
+					}
+				}
+				return nil
+			})
+	}
+
+	if err != nil {
+		return nil, err
+	}
+
+	return destinationDetails, nil
+}
+
+func getDestinationFinder(destinationType common.DestinationType) IDestinationFinder {
+	switch destinationType {
+	case common.JaegerDestinationType:
+		return &JaegerDestinationFinder{}
+	case common.ElasticsearchDestinationType:
+		return &ElasticSearchDestinationFinder{}
+	}
+
+	return nil
+}
+
+func destinationExist(dests *odigosv1.DestinationList, potentialDestination DestinationDetails, destinationFinder IDestinationFinder) bool {
+	for _, dest := range dests.Items {
+		if dest.Spec.Type == potentialDestination.Type && dest.GetConfig()[destinationFinder.getServiceURL()] == potentialDestination.Fields[destinationFinder.getServiceURL()] {
+			return true
+		}
+	}
+
+	return false
+}
diff --git a/frontend/services/destination_recognition/elasticsearch.go b/frontend/services/destination_recognition/elasticsearch.go
new file mode 100644
index 000000000..38c3e7093
--- /dev/null
+++ b/frontend/services/destination_recognition/elasticsearch.go
@@ -0,0 +1,45 @@
+package destination_recognition
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/config"
+	k8s "k8s.io/api/core/v1"
+)
+
+type ElasticSearchDestinationFinder struct{}
+
+const ElasticSearchHttpPort int32 = 9200
+const ElasticSearchHttpUrlFormat = "https://%s.%s:%d"
+
+func (j *ElasticSearchDestinationFinder) isPotentialService(service k8s.Service) bool {
+	for _, port := range service.Spec.Ports {
+		if isElasticSearchService(port.Port, service.Name) {
+			return true
+		}
+	}
+
+	return false
+}
+
+func isElasticSearchService(portNumber int32, name string) bool {
+	return portNumber == ElasticSearchHttpPort && strings.Contains(name, string(common.ElasticsearchDestinationType))
+}
+
+func (j *ElasticSearchDestinationFinder) fetchDestinationDetails(service k8s.Service) DestinationDetails {
+	urlString := fmt.Sprintf(ElasticSearchHttpUrlFormat, service.Name, service.Namespace, ElasticSearchHttpPort)
+	elasticServiceURL := j.getServiceURL()
+	fields := make(map[string]string)
+	fields[elasticServiceURL] = urlString
+
+	return DestinationDetails{
+		Type:   common.ElasticsearchDestinationType,
+		Fields: fields,
+	}
+}
+
+func (j *ElasticSearchDestinationFinder) getServiceURL() string {
+	return config.ElasticsearchUrlKey
+}
diff --git a/frontend/services/destination_recognition/jaeger.go b/frontend/services/destination_recognition/jaeger.go
new file mode 100644
index 000000000..f66fd9bdd
--- /dev/null
+++ b/frontend/services/destination_recognition/jaeger.go
@@ -0,0 +1,46 @@
+package destination_recognition
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/config"
+	k8s "k8s.io/api/core/v1"
+)
+
+type JaegerDestinationFinder struct{}
+
+const JaegerGrpcOtlpPort int32 = 4317
+const JaegerGrpcUrlFormat = "%s.%s:%d"
+
+func (j *JaegerDestinationFinder) isPotentialService(service k8s.Service) bool {
+	for _, port := range service.Spec.Ports {
+		if isJaegerService(port.Port, service.Name) {
+			return true
+		}
+	}
+
+	return false
+}
+
+func isJaegerService(portNumber int32, name string) bool {
+	return portNumber == JaegerGrpcOtlpPort && strings.Contains(name, string(common.JaegerDestinationType))
+}
+
+func (j *JaegerDestinationFinder) fetchDestinationDetails(service k8s.Service) DestinationDetails {
+	urlString := fmt.Sprintf(JaegerGrpcUrlFormat, service.Name, service.Namespace, JaegerGrpcOtlpPort)
+
+	jaegerServiceURL := j.getServiceURL()
+	fields := make(map[string]string)
+	fields[jaegerServiceURL] = urlString
+
+	return DestinationDetails{
+		Type:   common.JaegerDestinationType,
+		Fields: fields,
+	}
+}
+
+func (j *JaegerDestinationFinder) getServiceURL() string {
+	return config.JaegerUrlKey
+}
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
index 30c1bc77a..8a76180d4 100644
--- a/frontend/services/destinations.go
+++ b/frontend/services/destinations.go
@@ -7,9 +7,12 @@ import (
 
 	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/destinations"
 	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services/destination_recognition"
+	"github.com/odigos-io/odigos/k8sutils/pkg/env"
 	k8s "k8s.io/api/core/v1"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/types"
@@ -267,3 +270,24 @@ func AddDestinationOwnerReferenceToSecret(ctx context.Context, odigosns string,
 	}
 	return nil
 }
+
+func PotentialDestinations(ctx context.Context) []destination_recognition.DestinationDetails {
+	odigosns := consts.DefaultOdigosNamespace
+	relevantNamespaces, err := getRelevantNameSpaces(ctx, env.GetCurrentNamespace())
+	if err != nil {
+		return nil
+	}
+
+	// Existing Destinations
+	existingDestination, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil
+	}
+
+	destinationDetails, err := destination_recognition.GetAllPotentialDestinationDetails(ctx, relevantNamespaces, existingDestination)
+	if err != nil {
+		return nil
+	}
+
+	return destinationDetails
+}
diff --git a/frontend/services/utils.go b/frontend/services/utils.go
index 4464bb016..a85f6b8f3 100644
--- a/frontend/services/utils.go
+++ b/frontend/services/utils.go
@@ -3,7 +3,9 @@ package services
 import (
 	"context"
 	"errors"
+	"fmt"
 	"path"
+	"strings"
 
 	"github.com/odigos-io/odigos/frontend/kube"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
@@ -33,3 +35,16 @@ func setWorkloadInstrumentationLabel(ctx context.Context, nsName string, workloa
 		return errors.New("unsupported workload kind " + string(workloadKind))
 	}
 }
+
+func ConvertFieldsToString(fields map[string]string) string {
+	if len(fields) == 0 {
+		return ""
+	}
+
+	var parts []string
+	for key, value := range fields {
+		parts = append(parts, fmt.Sprintf("%s: %s", key, value))
+	}
+
+	return strings.Join(parts, ", ")
+}

From 40ca78cd51315bc68abaf9b35db4f231c0df35b5 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 25 Aug 2024 14:53:32 +0300
Subject: [PATCH 192/374] chore: wip

---
 .vscode/launch.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 1932951d2..a3ba143a6 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -28,6 +28,14 @@
       "cwd": "${workspaceFolder}/frontend",
       "args": ["--port", "8085", "--address", "0.0.0.0"]
     },
+    {
+      "name": "gql-playground",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/frontend/main.go",
+      "cwd": "${workspaceFolder}/frontend"
+    },
     {
       "name": "autoscaler local",
       "type": "go",

From 917c399e30d0f7da9ddfd5804ebcf14a0bc2c0f3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 25 Aug 2024 16:43:33 +0300
Subject: [PATCH 193/374] chore: skeleton component

---
 frontend/graph/schema.resolvers.go            |   7 +-
 .../add-destination-modal/index.tsx           |   1 -
 .../choose-destination-modal-body/index.tsx   |   7 +-
 .../destinations-list/index.tsx               |   1 -
 .../potential-destinations-list/index.tsx     | 159 ++++++++++++++++++
 .../webapp/graphql/queries/destination.ts     |   9 +
 frontend/webapp/hooks/destinations/index.ts   |   1 +
 .../destinations/usePotentialDestinations.ts  |  36 ++++
 frontend/webapp/public/brand/odigos-icon.svg  |  11 +-
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../section-title/index.tsx                   |  34 +++-
 .../skeleton-loader/index.tsx                 |  66 ++++++++
 12 files changed, 313 insertions(+), 20 deletions(-)
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/potential-destinations-list/index.tsx
 create mode 100644 frontend/webapp/hooks/destinations/usePotentialDestinations.ts
 create mode 100644 frontend/webapp/reuseable-components/skeleton-loader/index.tsx

diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 372ae91fe..b141a6dbf 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -314,11 +314,14 @@ func (r *queryResolver) PotentialDestinations(ctx context.Context) ([]*model.Des
 	var result []*model.DestinationDetails
 	for _, dest := range potentialDestinations {
 
-		fieldsString := services.ConvertFieldsToString(dest.Fields)
+		fieldsString, err := json.Marshal(dest.Fields)
+		if err != nil {
+			return nil, fmt.Errorf("error marshalling fields: %v", err)
+		}
 
 		result = append(result, &model.DestinationDetails{
 			Type:   string(dest.Type),
-			Fields: fieldsString,
+			Fields: string(fieldsString),
 		})
 	}
 
diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index 29b8b3b51..3ed14e370 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -65,7 +65,6 @@ export function AddDestinationModal({
   }, [data]);
 
   function buildDestinationTypeList() {
-    console.log({ data });
     const destinationTypes = data?.destinationTypes?.categories || [];
     const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
       (acc: DestinationTypeItem[], category: DestinationCategory) => {
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index 5f4fdd619..ffd30ba15 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -6,6 +6,7 @@ import { Body, Container, SideMenuWrapper } from '../styled';
 import { Divider, SectionTitle } from '@/reuseable-components';
 import { DestinationFilterComponent } from '../choose-destination-menu';
 import { DestinationTypeItem, DropdownOption, StepProps } from '@/types';
+import { PotentialDestinationsList } from '../potential-destinations-list';
 
 interface ChooseDestinationModalBodyProps {
   data: DestinationTypeItem[];
@@ -96,7 +97,11 @@ export function ChooseDestinationModalBody({
           onMonitorSelect={onMonitorSelect}
         />
         <Divider margin="0 0 24px 0" />
-        <DestinationsList items={filterData()} setSelectedItems={onSelect} />
+        <PotentialDestinationsList
+          items={filterData()}
+          setSelectedItems={onSelect}
+        />
+        {/* <DestinationsList items={filterData()} setSelectedItems={onSelect} /> */}
       </Body>
     </Container>
   );
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 05968c978..fd2f64388 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -89,7 +89,6 @@ const DestinationsList: React.FC<DestinationsListProps> = ({
   items,
   setSelectedItems,
 }) => {
-  console.log({ items });
   function renderSupportedSignals(item: DestinationTypeItem) {
     const supportedSignals = item.supportedSignals;
     const signals = Object.keys(supportedSignals);
diff --git a/frontend/webapp/containers/main/destinations/add-destination/potential-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/potential-destinations-list/index.tsx
new file mode 100644
index 000000000..4d044d2b3
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/potential-destinations-list/index.tsx
@@ -0,0 +1,159 @@
+import React, { useEffect } from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { DestinationTypeItem } from '@/types';
+import {
+  NoDataFound,
+  SectionTitle,
+  SkeletonLoader,
+  Text,
+} from '@/reuseable-components';
+import { usePotentialDestinations } from '@/hooks';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-self: stretch;
+  max-height: calc(100vh - 424px);
+  overflow-y: auto;
+
+  @media (height < 800px) {
+    max-height: calc(100vh - 400px);
+  }
+`;
+
+const ListItem = styled.div<{}>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  transition: background 0.3s;
+  border-radius: 16px;
+
+  cursor: pointer;
+  background: rgba(249, 249, 249, 0.04);
+
+  &:hover {
+    background: rgba(249, 249, 249, 0.08);
+  }
+  &:last-child {
+    margin-bottom: 32px;
+  }
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const DestinationIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const SignalsWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+const SignalText = styled(Text)`
+  color: rgba(249, 249, 249, 0.8);
+  font-size: 10px;
+  text-transform: capitalize;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+const NoDataFoundWrapper = styled(Container)`
+  margin-top: 80px;
+`;
+
+interface PotentialDestinationsListProps {
+  items: DestinationTypeItem[];
+  setSelectedItems: (item: DestinationTypeItem) => void;
+}
+
+const PotentialDestinationsList: React.FC<PotentialDestinationsListProps> = ({
+  items,
+  setSelectedItems,
+}) => {
+  const { loading, error, data: pd } = usePotentialDestinations();
+
+  useEffect(() => {
+    if (pd) {
+      console.log({ pd });
+    }
+  }, [pd]);
+
+  function renderSupportedSignals(item: DestinationTypeItem) {
+    const supportedSignals = item.supportedSignals;
+    const signals = Object.keys(supportedSignals);
+    const supportedSignalsList = signals.filter(
+      (signal) => supportedSignals[signal].supported
+    );
+
+    return supportedSignalsList.map((signal, index) => (
+      <SignalsWrapper key={index}>
+        <SignalText>{signal}</SignalText>
+        {index < supportedSignalsList.length - 1 && <SignalText>·</SignalText>}
+      </SignalsWrapper>
+    ));
+  }
+
+  if (!items.length) {
+    return (
+      <NoDataFoundWrapper>
+        <NoDataFound title="No destinations found" />
+      </NoDataFoundWrapper>
+    );
+  }
+
+  return (
+    <Container>
+      <SectionTitle
+        size="small"
+        icon="/brand/odigos-icon.svg"
+        title="Detected by Odigos"
+        description="Odigos detects destinations for which automatic connection is available. All data will be filled out automatically."
+      />
+      <SkeletonLoader size={1} />
+      {items.map((item) => (
+        <ListItem key={item.displayName} onClick={() => setSelectedItems(item)}>
+          <ListItemContent>
+            <DestinationIconWrapper>
+              <Image
+                src={item.imageUrl}
+                width={14}
+                height={11}
+                alt="destination"
+              />
+            </DestinationIconWrapper>
+            <TextWrapper>
+              <Text size={14}>{item.displayName}</Text>
+              <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
+            </TextWrapper>
+          </ListItemContent>
+        </ListItem>
+      ))}
+    </Container>
+  );
+};
+
+export { PotentialDestinationsList };
diff --git a/frontend/webapp/graphql/queries/destination.ts b/frontend/webapp/graphql/queries/destination.ts
index 993f302c4..1bc8a05d9 100644
--- a/frontend/webapp/graphql/queries/destination.ts
+++ b/frontend/webapp/graphql/queries/destination.ts
@@ -40,3 +40,12 @@ export const GET_DESTINATION_TYPE_DETAILS = gql`
     }
   }
 `;
+
+export const GET_POTENTIAL_DESTINATIONS = gql`
+  query GetPotentialDestinations {
+    potentialDestinations {
+      type
+      fields
+    }
+  }
+`;
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index ccb9e9a9d..ee99a9db8 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -2,3 +2,4 @@ export * from './useDestinations';
 export * from './useTestConnection';
 export * from './useConnectDestinationForm';
 export * from './useCreateDestination';
+export * from './usePotentialDestinations';
diff --git a/frontend/webapp/hooks/destinations/usePotentialDestinations.ts b/frontend/webapp/hooks/destinations/usePotentialDestinations.ts
new file mode 100644
index 000000000..951285954
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/usePotentialDestinations.ts
@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+import { GET_POTENTIAL_DESTINATIONS } from '@/graphql';
+import { safeJsonParse } from '@/utils';
+
+interface DestinationDetails {
+  type: string;
+  fields: string;
+}
+
+interface GetPotentialDestinationsData {
+  potentialDestinations: DestinationDetails[];
+}
+
+// Custom hook
+export const usePotentialDestinations = () => {
+  const { loading, error, data } = useQuery<GetPotentialDestinationsData>(
+    GET_POTENTIAL_DESTINATIONS
+  );
+
+  // Memoize the transformed data to avoid unnecessary recalculations
+  const transformedData = useMemo(() => {
+    if (!data) return null;
+
+    return data.potentialDestinations.map((destination) => ({
+      ...destination,
+      fields: safeJsonParse<Record<string, string>>(destination.fields, {}),
+    }));
+  }, [data]);
+
+  return {
+    loading,
+    error,
+    data: transformedData,
+  };
+};
diff --git a/frontend/webapp/public/brand/odigos-icon.svg b/frontend/webapp/public/brand/odigos-icon.svg
index 9247584f3..7690eb2ee 100644
--- a/frontend/webapp/public/brand/odigos-icon.svg
+++ b/frontend/webapp/public/brand/odigos-icon.svg
@@ -1,6 +1,5 @@
-<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="1000" height="1000" fill="#242023"/>
-<path d="M553.491 377.309V294.077H717.573C738.785 294.077 756 310.446 756 330.659V668.508C756 688.72 738.785 705.09 717.573 705.09H553.491V622.396L699.666 557.762C723.721 547.079 738.708 524.791 738.708 499.583C738.708 474.375 723.721 452.011 699.666 441.405L553.414 377.386L553.491 377.309Z" fill="#F9F9F9"/>
-<path d="M447.51 621.781V705.014H283.427C262.215 705.014 245 688.644 245 668.431V330.582C245 310.37 262.215 294 283.427 294H447.51V376.695L301.334 441.329C277.279 452.011 262.292 474.299 262.292 499.507C262.292 524.715 277.279 547.079 301.334 557.685L447.586 621.704L447.51 621.781Z" fill="#F9F9F9"/>
-<path d="M500.462 584.507C547.363 584.507 585.385 546.485 585.385 499.584C585.385 452.682 547.363 414.66 500.462 414.66C453.56 414.66 415.538 452.682 415.538 499.584C415.538 546.485 453.56 584.507 500.462 584.507Z" fill="#F9F9F9"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="552" height="431" viewBox="0 0 552 431" fill="none">
+<path d="M308.491 83.3091V0.0765381H472.573C493.785 0.0765381 511 16.4464 511 36.6589V374.508C511 394.72 493.785 411.09 472.573 411.09H308.491V328.396L454.666 263.762C478.721 253.079 493.708 230.791 493.708 205.583C493.708 180.375 478.721 158.011 454.666 147.405L308.414 83.3859L308.491 83.3091Z" fill="#F9F9F9"/>
+<path d="M202.51 327.781V411.014H38.4269C17.2152 411.014 0 394.644 0 374.431V36.5824C0 16.3698 17.2152 0 38.4269 0H202.51V82.6946L56.3338 147.329C32.2786 158.011 17.2921 180.299 17.2921 205.507C17.2921 230.715 32.2786 253.079 56.3338 263.685L202.586 327.704L202.51 327.781Z" fill="#F9F9F9"/>
+<path d="M255.462 290.507C302.363 290.507 340.385 252.485 340.385 205.584C340.385 158.682 302.363 120.66 255.462 120.66C208.56 120.66 170.538 158.682 170.538 205.584C170.538 252.485 208.56 290.507 255.462 290.507Z" fill="#F9F9F9"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index ada40c8e4..c772ffb8c 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -18,3 +18,4 @@ export * from './textarea';
 export * from './input-list';
 export * from './key-value-input-list';
 export * from './no-data-found';
+export * from './skeleton-loader';
diff --git a/frontend/webapp/reuseable-components/section-title/index.tsx b/frontend/webapp/reuseable-components/section-title/index.tsx
index 055a87448..7bc506680 100644
--- a/frontend/webapp/reuseable-components/section-title/index.tsx
+++ b/frontend/webapp/reuseable-components/section-title/index.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import { Text } from '../text';
 import styled from 'styled-components';
+import Image from 'next/image';
 
 interface SectionTitleProps {
   title: string;
   description: string;
-  actionButton?: React.ReactNode; // Accept a React node as the action button
+  actionButton?: React.ReactNode;
+  size?: 'small' | 'medium' | 'large';
+  icon?: string;
 }
 
 const Container = styled.div`
@@ -15,12 +18,18 @@ const Container = styled.div`
   gap: 16px;
 `;
 
-const TitleContainer = styled.div`
+const HeaderWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
 `;
 
+const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
 const Title = styled(Text)``;
 
 const Description = styled(Text)``;
@@ -28,18 +37,25 @@ const Description = styled(Text)``;
 const SectionTitle: React.FC<SectionTitleProps> = ({
   title,
   description,
-  actionButton, // Use the custom action button
+  actionButton,
+  size = 'medium',
+  icon,
 }) => {
+  const titleSize = size === 'small' ? 16 : size === 'medium' ? 20 : 24;
+  const descriptionSize = size === 'small' ? 12 : size === 'medium' ? 14 : 16;
   return (
     <Container>
-      <TitleContainer>
-        <Title weight={300} size={20}>
-          {title}
-        </Title>
-        <Description weight={200} opacity={0.8} size={14}>
+      <HeaderWrapper>
+        <TitleContainer>
+          {icon && <Image alt="icon" src={icon} width={14} height={24} />}
+          <Title weight={300} size={titleSize}>
+            {title}
+          </Title>
+        </TitleContainer>
+        <Description weight={200} opacity={0.8} size={descriptionSize}>
           {description}
         </Description>
-      </TitleContainer>
+      </HeaderWrapper>
       {actionButton && <div>{actionButton}</div>}
     </Container>
   );
diff --git a/frontend/webapp/reuseable-components/skeleton-loader/index.tsx b/frontend/webapp/reuseable-components/skeleton-loader/index.tsx
new file mode 100644
index 000000000..0b99a5cf7
--- /dev/null
+++ b/frontend/webapp/reuseable-components/skeleton-loader/index.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const shimmer = keyframes`
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+`;
+
+const SkeletonLoaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const SkeletonItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const SkeletonThumbnail = styled.div`
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  background: ${({ theme }) =>
+    `linear-gradient(90deg, ${theme.colors.primary} 25%, ${theme.colors.primary} 50%, ${theme.colors.dark_grey} 75%)`};
+  background-size: 200% 100%;
+  animation: ${shimmer} 10s infinite linear;
+`;
+
+const SkeletonText = styled.div`
+  flex: 1;
+`;
+
+const SkeletonLine = styled.div<{ width: string }>`
+  height: 16px;
+  margin-bottom: 0.5rem;
+  background: ${({ theme }) =>
+    `linear-gradient(90deg, ${theme.colors.primary} 25%, ${theme.colors.primary} 50%, ${theme.colors.dark_grey} 75%)`};
+  background-size: 200% 100%;
+  animation: ${shimmer} 1.5s infinite linear;
+  width: ${(props) => props.width};
+  border-radius: 4px;
+`;
+
+const SkeletonLoader: React.FC<{ size: number }> = ({ size = 5 }) => {
+  return (
+    <SkeletonLoaderWrapper>
+      {[...Array(size)].map((_, index) => (
+        <SkeletonItem key={index}>
+          <SkeletonThumbnail />
+          <SkeletonText>
+            <SkeletonLine width="80%" />
+            <SkeletonLine width="100%" />
+          </SkeletonText>
+        </SkeletonItem>
+      ))}
+    </SkeletonLoaderWrapper>
+  );
+};
+
+export { SkeletonLoader };

From d84f1441855aea6c967935af81406ca2aca46aed Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 26 Aug 2024 12:10:34 +0300
Subject: [PATCH 194/374] chore: wip

---
 .../add-destination-modal/index.tsx           |   4 +-
 .../choose-destination-modal-body/index.tsx   | 107 +++++++-----
 .../destination-list-item/index.tsx           | 102 +++++++++++
 .../destinations-list/index.tsx               | 134 ++++-----------
 .../potential-destinations-list/index.tsx     |  50 ++++++
 .../potential-destinations-list/index.tsx     | 159 ------------------
 .../destinations/usePotentialDestinations.ts  |  48 ++++--
 frontend/webapp/types/destinations.ts         |  55 ++++--
 8 files changed, 336 insertions(+), 323 deletions(-)
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/destinations-list/potential-destinations-list/index.tsx
 delete mode 100644 frontend/webapp/containers/main/destinations/add-destination/potential-destinations-list/index.tsx

diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index 3ed14e370..220283340 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useQuery } from '@apollo/client';
-import { DestinationTypeItem } from '@/types';
+import { DestinationTypeItem, GetDestinationTypesResponse } from '@/types';
 import { GET_DESTINATION_TYPE } from '@/graphql';
 import { Modal, NavigationButtons } from '@/reuseable-components';
 import { ConnectDestinationModalBody } from '../connect-destination-modal-body';
@@ -52,7 +52,7 @@ export function AddDestinationModal({
   isModalOpen,
   handleCloseModal,
 }: AddDestinationModalProps) {
-  const { data } = useQuery(GET_DESTINATION_TYPE);
+  const { data } = useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
   const [selectedItem, setSelectedItem] = useState<DestinationTypeItem>();
   const [destinationTypeList, setDestinationTypeList] = useState<
     DestinationTypeItem[]
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index ffd30ba15..b0031e186 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -1,12 +1,20 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { SideMenu } from '@/components';
 import { DestinationsList } from '../destinations-list';
 import { Body, Container, SideMenuWrapper } from '../styled';
 import { Divider, SectionTitle } from '@/reuseable-components';
 import { DestinationFilterComponent } from '../choose-destination-menu';
-import { DestinationTypeItem, DropdownOption, StepProps } from '@/types';
-import { PotentialDestinationsList } from '../potential-destinations-list';
+import {
+  DestinationsCategory,
+  DestinationTypeItem,
+  DropdownOption,
+  GetDestinationTypesResponse,
+  StepProps,
+} from '@/types';
+import { PotentialDestinationsList } from '../destinations-list/potential-destinations-list';
+import { useQuery } from '@apollo/client';
+import { GET_DESTINATION_TYPE } from '@/graphql';
 
 interface ChooseDestinationModalBodyProps {
   data: DestinationTypeItem[];
@@ -26,50 +34,75 @@ const SIDE_MENU_DATA: StepProps[] = [
   },
 ];
 
+const DEFAULT_MONITORS = ['logs', 'metrics', 'traces'];
+const DEFAULT_DROPDOWN_VALUE = { id: 'all', value: 'All types' };
+
+const CATEGORIES_DESCRIPTION = {
+  managed: 'Effortless Monitoring with Scalable Performance Management',
+  'self hosted':
+    'Full Control and Customization for Advanced Application Monitoring',
+};
+
+export interface IDestinationListItem extends DestinationsCategory {
+  description: string;
+}
+
 export function ChooseDestinationModalBody({
-  data,
   onSelect,
 }: ChooseDestinationModalBodyProps) {
+  const { data } = useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
   const [searchValue, setSearchValue] = useState('');
-  const [selectedMonitors, setSelectedMonitors] = useState<string[]>([
-    'logs',
-    'metrics',
-    'traces',
-  ]);
-  const [dropdownValue, setDropdownValue] = useState<DropdownOption>({
-    id: 'all',
-    value: 'All types',
-  });
+  const [destinations, setDestinations] = useState<IDestinationListItem[]>([]);
+  const [selectedMonitors, setSelectedMonitors] =
+    useState<string[]>(DEFAULT_MONITORS);
+  const [dropdownValue, setDropdownValue] = useState<DropdownOption>(
+    DEFAULT_DROPDOWN_VALUE
+  );
+
+  useEffect(() => {
+    if (data) {
+      const destinationsCategories = data.destinationTypes.categories.map(
+        (category) => {
+          return {
+            name: category.name,
+            description: CATEGORIES_DESCRIPTION[category.name],
+            items: category.items,
+          };
+        }
+      );
+      setDestinations(destinationsCategories);
+    }
+  }, [data]);
 
   function handleTagSelect(option: DropdownOption) {
     setDropdownValue(option);
   }
 
-  function filterData() {
-    let filteredData = data;
+  // function filterData() {
+  //   let filteredData = data;
 
-    if (searchValue) {
-      filteredData = filteredData.filter((item) =>
-        item.displayName.toLowerCase().includes(searchValue.toLowerCase())
-      );
-    }
+  //   if (searchValue) {
+  //     filteredData = filteredData.filter((item) =>
+  //       item.displayName.toLowerCase().includes(searchValue.toLowerCase())
+  //     );
+  //   }
 
-    if (dropdownValue.id !== 'all') {
-      filteredData = filteredData.filter(
-        (item) => item.category === dropdownValue.id
-      );
-    }
+  //   if (dropdownValue.id !== 'all') {
+  //     filteredData = filteredData.filter(
+  //       (item) => item.category === dropdownValue.id
+  //     );
+  //   }
 
-    if (selectedMonitors.length) {
-      filteredData = filteredData.filter((item) =>
-        selectedMonitors.some(
-          (monitor) => item.supportedSignals[monitor].supported
-        )
-      );
-    }
+  //   if (selectedMonitors.length) {
+  //     filteredData = filteredData.filter((item) =>
+  //       selectedMonitors.some(
+  //         (monitor) => item.supportedSignals[monitor].supported
+  //       )
+  //     );
+  //   }
 
-    return filteredData;
-  }
+  //   return filteredData;
+  // }
 
   function onMonitorSelect(monitor: string) {
     if (selectedMonitors.includes(monitor)) {
@@ -97,11 +130,7 @@ export function ChooseDestinationModalBody({
           onMonitorSelect={onMonitorSelect}
         />
         <Divider margin="0 0 24px 0" />
-        <PotentialDestinationsList
-          items={filterData()}
-          setSelectedItems={onSelect}
-        />
-        {/* <DestinationsList items={filterData()} setSelectedItems={onSelect} /> */}
+        <DestinationsList items={destinations} setSelectedItems={onSelect} />
       </Body>
     </Container>
   );
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
new file mode 100644
index 000000000..e6caabc08
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { DestinationTypeItem } from '@/types';
+import { Text } from '@/reuseable-components';
+
+const ListItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  transition: background 0.3s;
+  border-radius: 16px;
+  cursor: pointer;
+  background: rgba(249, 249, 249, 0.04);
+
+  &:hover {
+    background: rgba(249, 249, 249, 0.08);
+  }
+  &:last-child {
+    margin-bottom: 24px;
+  }
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const DestinationIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const SignalsWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+const SignalText = styled(Text)`
+  color: rgba(249, 249, 249, 0.8);
+  font-size: 10px;
+  text-transform: capitalize;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+interface DestinationListItemProps {
+  item: DestinationTypeItem;
+  onSelect: (item: DestinationTypeItem) => void;
+}
+
+const DestinationListItem: React.FC<DestinationListItemProps> = ({
+  item,
+  onSelect,
+}) => {
+  const renderSupportedSignals = () => {
+    const signals = Object.keys(item.supportedSignals).filter(
+      (signal) => item.supportedSignals[signal].supported
+    );
+
+    return signals.map((signal, index) => (
+      <SignalsWrapper key={index}>
+        <SignalText>{signal}</SignalText>
+        {index < signals.length - 1 && <SignalText>·</SignalText>}
+      </SignalsWrapper>
+    ));
+  };
+
+  return (
+    <ListItem onClick={() => onSelect(item)}>
+      <ListItemContent>
+        <DestinationIconWrapper>
+          <Image src={item.imageUrl} width={20} height={20} alt="destination" />
+        </DestinationIconWrapper>
+        <TextWrapper>
+          <Text size={14}>{item.displayName}</Text>
+          <SignalsWrapper>{renderSupportedSignals()}</SignalsWrapper>
+        </TextWrapper>
+      </ListItemContent>
+    </ListItem>
+  );
+};
+
+export { DestinationListItem };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index fd2f64388..701ccf317 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import Image from 'next/image';
 import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
-import { NoDataFound, Text } from '@/reuseable-components';
+import { capitalizeFirstLetter } from '@/utils';
+import { DestinationListItem } from './destination-list-item';
+import { NoDataFound, SectionTitle } from '@/reuseable-components';
+import { IDestinationListItem } from '../choose-destination-modal-body';
+import { PotentialDestinationsList } from './potential-destinations-list';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 12px;
   align-self: stretch;
   max-height: calc(100vh - 424px);
   overflow-y: auto;
@@ -18,70 +19,18 @@ const Container = styled.div`
   }
 `;
 
-const ListItem = styled.div<{}>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 16px 0px;
-  transition: background 0.3s;
-  border-radius: 16px;
-
-  cursor: pointer;
-  background: rgba(249, 249, 249, 0.04);
-
-  &:hover {
-    background: rgba(249, 249, 249, 0.08);
-  }
-  &:last-child {
-    margin-bottom: 32px;
-  }
-`;
-
-const ListItemContent = styled.div`
-  margin-left: 16px;
+const ListsWrapper = styled.div`
   display: flex;
+  flex-direction: column;
   gap: 12px;
 `;
 
-const DestinationIconWrapper = styled.div`
-  display: flex;
-  width: 36px;
-  height: 36px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(249, 249, 249, 0.06) 0%,
-    rgba(249, 249, 249, 0.02) 100%
-  );
-`;
-
-const SignalsWrapper = styled.div`
-  display: flex;
-  gap: 4px;
-`;
-
-const SignalText = styled(Text)`
-  color: rgba(249, 249, 249, 0.8);
-  font-size: 10px;
-  text-transform: capitalize;
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 36px;
-  justify-content: space-between;
-`;
 const NoDataFoundWrapper = styled(Container)`
   margin-top: 80px;
 `;
 
 interface DestinationsListProps {
-  items: DestinationTypeItem[];
+  items: IDestinationListItem[];
   setSelectedItems: (item: DestinationTypeItem) => void;
 }
 
@@ -89,49 +38,38 @@ const DestinationsList: React.FC<DestinationsListProps> = ({
   items,
   setSelectedItems,
 }) => {
-  function renderSupportedSignals(item: DestinationTypeItem) {
-    const supportedSignals = item.supportedSignals;
-    const signals = Object.keys(supportedSignals);
-    const supportedSignalsList = signals.filter(
-      (signal) => supportedSignals[signal].supported
-    );
-
-    return supportedSignalsList.map((signal, index) => (
-      <SignalsWrapper key={index}>
-        <SignalText>{signal}</SignalText>
-        {index < supportedSignalsList.length - 1 && <SignalText>·</SignalText>}
-      </SignalsWrapper>
-    ));
-  }
-
-  if (!items.length) {
-    return (
-      <NoDataFoundWrapper>
-        <NoDataFound title="No destinations found" />
-      </NoDataFoundWrapper>
-    );
+  function renderCategoriesList() {
+    if (!items.length) {
+      return (
+        <NoDataFoundWrapper>
+          <NoDataFound title="No destinations found" />
+        </NoDataFoundWrapper>
+      );
+    }
+
+    return items.map((item) => {
+      return (
+        <ListsWrapper>
+          <SectionTitle
+            size="small"
+            title={capitalizeFirstLetter(item.name)}
+            description={item.description}
+          />
+          {item.items.map((categoryItem) => (
+            <DestinationListItem
+              item={categoryItem}
+              onSelect={setSelectedItems}
+            />
+          ))}
+        </ListsWrapper>
+      );
+    });
   }
 
   return (
     <Container>
-      {items.map((item) => (
-        <ListItem key={item.displayName} onClick={() => setSelectedItems(item)}>
-          <ListItemContent>
-            <DestinationIconWrapper>
-              <Image
-                src={item.imageUrl}
-                width={20}
-                height={20}
-                alt="destination"
-              />
-            </DestinationIconWrapper>
-            <TextWrapper>
-              <Text size={14}>{item.displayName}</Text>
-              <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
-            </TextWrapper>
-          </ListItemContent>
-        </ListItem>
-      ))}
+      <PotentialDestinationsList setSelectedItems={setSelectedItems} />
+      {renderCategoriesList()}
     </Container>
   );
 };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/potential-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/potential-destinations-list/index.tsx
new file mode 100644
index 000000000..8470f2e81
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/potential-destinations-list/index.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { DestinationTypeItem } from '@/types';
+import { usePotentialDestinations } from '@/hooks';
+import { DestinationListItem } from '../destination-list-item';
+import { SectionTitle, SkeletonLoader } from '@/reuseable-components';
+
+const ListsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+interface PotentialDestinationsListProps {
+  setSelectedItems: (item: DestinationTypeItem) => void;
+}
+
+const PotentialDestinationsList: React.FC<PotentialDestinationsListProps> = ({
+  setSelectedItems,
+}) => {
+  const { loading, data } = usePotentialDestinations();
+
+  if (!data.length) {
+    return null;
+  }
+
+  return (
+    <ListsWrapper>
+      <SectionTitle
+        size="small"
+        icon="/brand/odigos-icon.svg"
+        title="Detected by Odigos"
+        description="Odigos detects destinations for which automatic connection is available. All data will be filled out automatically."
+      />
+      {loading ? (
+        <SkeletonLoader size={1} />
+      ) : (
+        data.map((item) => (
+          <DestinationListItem
+            key={item.displayName}
+            item={item}
+            onSelect={setSelectedItems}
+          />
+        ))
+      )}
+    </ListsWrapper>
+  );
+};
+
+export { PotentialDestinationsList };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/potential-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/potential-destinations-list/index.tsx
deleted file mode 100644
index 4d044d2b3..000000000
--- a/frontend/webapp/containers/main/destinations/add-destination/potential-destinations-list/index.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { useEffect } from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import { DestinationTypeItem } from '@/types';
-import {
-  NoDataFound,
-  SectionTitle,
-  SkeletonLoader,
-  Text,
-} from '@/reuseable-components';
-import { usePotentialDestinations } from '@/hooks';
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  align-self: stretch;
-  max-height: calc(100vh - 424px);
-  overflow-y: auto;
-
-  @media (height < 800px) {
-    max-height: calc(100vh - 400px);
-  }
-`;
-
-const ListItem = styled.div<{}>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 16px 0px;
-  transition: background 0.3s;
-  border-radius: 16px;
-
-  cursor: pointer;
-  background: rgba(249, 249, 249, 0.04);
-
-  &:hover {
-    background: rgba(249, 249, 249, 0.08);
-  }
-  &:last-child {
-    margin-bottom: 32px;
-  }
-`;
-
-const ListItemContent = styled.div`
-  margin-left: 16px;
-  display: flex;
-  gap: 12px;
-`;
-
-const DestinationIconWrapper = styled.div`
-  display: flex;
-  width: 36px;
-  height: 36px;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  border-radius: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(249, 249, 249, 0.06) 0%,
-    rgba(249, 249, 249, 0.02) 100%
-  );
-`;
-
-const SignalsWrapper = styled.div`
-  display: flex;
-  gap: 4px;
-`;
-
-const SignalText = styled(Text)`
-  color: rgba(249, 249, 249, 0.8);
-  font-size: 10px;
-  text-transform: capitalize;
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 36px;
-  justify-content: space-between;
-`;
-const NoDataFoundWrapper = styled(Container)`
-  margin-top: 80px;
-`;
-
-interface PotentialDestinationsListProps {
-  items: DestinationTypeItem[];
-  setSelectedItems: (item: DestinationTypeItem) => void;
-}
-
-const PotentialDestinationsList: React.FC<PotentialDestinationsListProps> = ({
-  items,
-  setSelectedItems,
-}) => {
-  const { loading, error, data: pd } = usePotentialDestinations();
-
-  useEffect(() => {
-    if (pd) {
-      console.log({ pd });
-    }
-  }, [pd]);
-
-  function renderSupportedSignals(item: DestinationTypeItem) {
-    const supportedSignals = item.supportedSignals;
-    const signals = Object.keys(supportedSignals);
-    const supportedSignalsList = signals.filter(
-      (signal) => supportedSignals[signal].supported
-    );
-
-    return supportedSignalsList.map((signal, index) => (
-      <SignalsWrapper key={index}>
-        <SignalText>{signal}</SignalText>
-        {index < supportedSignalsList.length - 1 && <SignalText>·</SignalText>}
-      </SignalsWrapper>
-    ));
-  }
-
-  if (!items.length) {
-    return (
-      <NoDataFoundWrapper>
-        <NoDataFound title="No destinations found" />
-      </NoDataFoundWrapper>
-    );
-  }
-
-  return (
-    <Container>
-      <SectionTitle
-        size="small"
-        icon="/brand/odigos-icon.svg"
-        title="Detected by Odigos"
-        description="Odigos detects destinations for which automatic connection is available. All data will be filled out automatically."
-      />
-      <SkeletonLoader size={1} />
-      {items.map((item) => (
-        <ListItem key={item.displayName} onClick={() => setSelectedItems(item)}>
-          <ListItemContent>
-            <DestinationIconWrapper>
-              <Image
-                src={item.imageUrl}
-                width={14}
-                height={11}
-                alt="destination"
-              />
-            </DestinationIconWrapper>
-            <TextWrapper>
-              <Text size={14}>{item.displayName}</Text>
-              <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
-            </TextWrapper>
-          </ListItemContent>
-        </ListItem>
-      ))}
-    </Container>
-  );
-};
-
-export { PotentialDestinationsList };
diff --git a/frontend/webapp/hooks/destinations/usePotentialDestinations.ts b/frontend/webapp/hooks/destinations/usePotentialDestinations.ts
index 951285954..d4ab2d837 100644
--- a/frontend/webapp/hooks/destinations/usePotentialDestinations.ts
+++ b/frontend/webapp/hooks/destinations/usePotentialDestinations.ts
@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
-import { useQuery } from '@apollo/client';
-import { GET_POTENTIAL_DESTINATIONS } from '@/graphql';
 import { safeJsonParse } from '@/utils';
+import { useQuery } from '@apollo/client';
+import { GetDestinationTypesResponse } from '@/types';
+import { GET_DESTINATION_TYPE, GET_POTENTIAL_DESTINATIONS } from '@/graphql';
 
 interface DestinationDetails {
   type: string;
@@ -12,25 +13,48 @@ interface GetPotentialDestinationsData {
   potentialDestinations: DestinationDetails[];
 }
 
-// Custom hook
 export const usePotentialDestinations = () => {
+  const { data: destinationTypesData } =
+    useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
   const { loading, error, data } = useQuery<GetPotentialDestinationsData>(
     GET_POTENTIAL_DESTINATIONS
   );
 
-  // Memoize the transformed data to avoid unnecessary recalculations
-  const transformedData = useMemo(() => {
-    if (!data) return null;
+  const mappedPotentialDestinations = useMemo(() => {
+    if (!destinationTypesData || !data) return [];
+
+    // Create a deep copy of destination types to manipulate
+    const destinationTypesCopy = JSON.parse(
+      JSON.stringify(destinationTypesData.destinationTypes.categories)
+    );
 
-    return data.potentialDestinations.map((destination) => ({
-      ...destination,
-      fields: safeJsonParse<Record<string, string>>(destination.fields, {}),
-    }));
-  }, [data]);
+    // Map over the potential destinations
+    return data.potentialDestinations.map((destination) => {
+      for (const category of destinationTypesCopy) {
+        const index = category.items.findIndex(
+          (item) => item.type === destination.type
+        );
+        if (index !== -1) {
+          // Spread the matched destination type data into the potential destination
+          const matchedType = category.items[index];
+          category.items.splice(index, 1); // Remove the matched item from destination types
+          return {
+            ...destination,
+            ...matchedType,
+            fields: safeJsonParse<{ [key: string]: string }>(
+              destination.fields,
+              {}
+            ),
+          };
+        }
+      }
+      return destination;
+    });
+  }, [destinationTypesData, data]);
 
   return {
     loading,
     error,
-    data: transformedData,
+    data: mappedPotentialDestinations,
   };
 };
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 47d3b088e..6d92b87cd 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -5,22 +5,51 @@ export enum DestinationsSortType {
   TYPE = 'type',
 }
 
+// export interface DestinationTypeItem {
+//   displayName: string;
+//   imageUrl: string;
+//   category: 'managed' | 'self-hosted';
+//   type: string;
+//   testConnectionSupported: boolean;
+//   supportedSignals: {
+//     logs: {
+//       supported: boolean;
+//     };
+//     metrics: {
+//       supported: boolean;
+//     };
+//     traces: {
+//       supported: boolean;
+//     };
+//   };
+// }
+
+interface ObservabilitySignalSupport {
+  supported: boolean;
+}
+
+interface SupportedSignals {
+  logs: ObservabilitySignalSupport;
+  metrics: ObservabilitySignalSupport;
+  traces: ObservabilitySignalSupport;
+}
+
 export interface DestinationTypeItem {
-  displayName: string;
-  imageUrl: string;
-  category: 'managed' | 'self-hosted';
   type: string;
   testConnectionSupported: boolean;
-  supportedSignals: {
-    logs: {
-      supported: boolean;
-    };
-    metrics: {
-      supported: boolean;
-    };
-    traces: {
-      supported: boolean;
-    };
+  displayName: string;
+  imageUrl: string;
+  supportedSignals: SupportedSignals;
+}
+
+export interface DestinationsCategory {
+  name: string;
+  items: DestinationTypeItem[];
+}
+
+export interface GetDestinationTypesResponse {
+  destinationTypes: {
+    categories: DestinationsCategory[];
   };
 }
 

From 508ebc2cb64bc4d1ae912efd9c0e7cfbcc2cba31 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 26 Aug 2024 12:26:40 +0300
Subject: [PATCH 195/374] chore: wip

---
 .../add-destination-modal/index.tsx           | 50 +++----------------
 .../choose-destination-modal-body/index.tsx   |  3 +-
 2 files changed, 7 insertions(+), 46 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index 220283340..0844174d0 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -1,21 +1,14 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { useQuery } from '@apollo/client';
-import { DestinationTypeItem, GetDestinationTypesResponse } from '@/types';
-import { GET_DESTINATION_TYPE } from '@/graphql';
+import React, { useState, useRef } from 'react';
+import { DestinationTypeItem } from '@/types';
 import { Modal, NavigationButtons } from '@/reuseable-components';
-import { ConnectDestinationModalBody } from '../connect-destination-modal-body';
 import { ChooseDestinationModalBody } from '../choose-destination-modal-body';
+import { ConnectDestinationModalBody } from '../connect-destination-modal-body';
 
 interface AddDestinationModalProps {
   isModalOpen: boolean;
   handleCloseModal: () => void;
 }
 
-interface DestinationCategory {
-  name: string;
-  items: DestinationTypeItem[];
-}
-
 function ModalActionComponent({
   onNext,
   onBack,
@@ -38,7 +31,7 @@ function ModalActionComponent({
               },
               {
                 label: 'DONE',
-                onClick: onNext, // This will trigger handleSubmit
+                onClick: onNext,
                 variant: 'primary',
               },
             ]
@@ -52,36 +45,8 @@ export function AddDestinationModal({
   isModalOpen,
   handleCloseModal,
 }: AddDestinationModalProps) {
-  const { data } = useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
-  const [selectedItem, setSelectedItem] = useState<DestinationTypeItem>();
-  const [destinationTypeList, setDestinationTypeList] = useState<
-    DestinationTypeItem[]
-  >([]);
-
   const submitRef = useRef<() => void | null>(null);
-
-  useEffect(() => {
-    data && buildDestinationTypeList();
-  }, [data]);
-
-  function buildDestinationTypeList() {
-    const destinationTypes = data?.destinationTypes?.categories || [];
-    const destinationTypeList: DestinationTypeItem[] = destinationTypes.reduce(
-      (acc: DestinationTypeItem[], category: DestinationCategory) => {
-        const items = category.items.map((item: DestinationTypeItem) => ({
-          category: category.name,
-          displayName: item.displayName,
-          imageUrl: item.imageUrl,
-          supportedSignals: item.supportedSignals,
-          testConnectionSupported: item.testConnectionSupported,
-          type: item.type,
-        }));
-        return [...acc, ...items];
-      },
-      []
-    );
-    setDestinationTypeList(destinationTypeList);
-  }
+  const [selectedItem, setSelectedItem] = useState<DestinationTypeItem>();
 
   function handleNextStep(item: DestinationTypeItem) {
     setSelectedItem(item);
@@ -94,10 +59,7 @@ export function AddDestinationModal({
         onSubmitRef={submitRef}
       />
     ) : (
-      <ChooseDestinationModalBody
-        data={destinationTypeList}
-        onSelect={handleNextStep}
-      />
+      <ChooseDestinationModalBody onSelect={handleNextStep} />
     );
   }
 
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index b0031e186..8b6ba5a9f 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -12,12 +12,11 @@ import {
   GetDestinationTypesResponse,
   StepProps,
 } from '@/types';
-import { PotentialDestinationsList } from '../destinations-list/potential-destinations-list';
+
 import { useQuery } from '@apollo/client';
 import { GET_DESTINATION_TYPE } from '@/graphql';
 
 interface ChooseDestinationModalBodyProps {
-  data: DestinationTypeItem[];
   onSelect: (item: DestinationTypeItem) => void;
 }
 

From 0e2906945b42dcf774e7b0a9df99c541cc3ede61 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 26 Aug 2024 12:45:51 +0300
Subject: [PATCH 196/374] chore: wip

---
 .../choose-destination-modal-body/index.tsx          | 12 +++++-------
 .../add-destination/destinations-list/index.tsx      |  2 +-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index 8b6ba5a9f..5b409aba5 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -1,21 +1,20 @@
 import React, { useEffect, useState } from 'react';
 
 import { SideMenu } from '@/components';
+import { useQuery } from '@apollo/client';
+import { GET_DESTINATION_TYPE } from '@/graphql';
 import { DestinationsList } from '../destinations-list';
 import { Body, Container, SideMenuWrapper } from '../styled';
 import { Divider, SectionTitle } from '@/reuseable-components';
 import { DestinationFilterComponent } from '../choose-destination-menu';
 import {
-  DestinationsCategory,
-  DestinationTypeItem,
+  StepProps,
   DropdownOption,
+  DestinationTypeItem,
+  DestinationsCategory,
   GetDestinationTypesResponse,
-  StepProps,
 } from '@/types';
 
-import { useQuery } from '@apollo/client';
-import { GET_DESTINATION_TYPE } from '@/graphql';
-
 interface ChooseDestinationModalBodyProps {
   onSelect: (item: DestinationTypeItem) => void;
 }
@@ -35,7 +34,6 @@ const SIDE_MENU_DATA: StepProps[] = [
 
 const DEFAULT_MONITORS = ['logs', 'metrics', 'traces'];
 const DEFAULT_DROPDOWN_VALUE = { id: 'all', value: 'All types' };
-
 const CATEGORIES_DESCRIPTION = {
   managed: 'Effortless Monitoring with Scalable Performance Management',
   'self hosted':
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 701ccf317..1e2c67109 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
 import { capitalizeFirstLetter } from '@/utils';
 import { DestinationListItem } from './destination-list-item';
-import { NoDataFound, SectionTitle } from '@/reuseable-components';
+import { Counter, NoDataFound, SectionTitle } from '@/reuseable-components';
 import { IDestinationListItem } from '../choose-destination-modal-body';
 import { PotentialDestinationsList } from './potential-destinations-list';
 

From 5ce5d5b2eb9e45d5aa12e32f6a1a7f6baa094c73 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 26 Aug 2024 15:04:56 +0300
Subject: [PATCH 197/374] chore: wip

---
 .../choose-destination-modal-body/index.tsx   | 52 ++++++++++---------
 .../destination-list-item/index.tsx           | 19 +++++++
 2 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index 5b409aba5..160e9b77e 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
@@ -47,7 +47,6 @@ export interface IDestinationListItem extends DestinationsCategory {
 export function ChooseDestinationModalBody({
   onSelect,
 }: ChooseDestinationModalBodyProps) {
-  const { data } = useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
   const [searchValue, setSearchValue] = useState('');
   const [destinations, setDestinations] = useState<IDestinationListItem[]>([]);
   const [selectedMonitors, setSelectedMonitors] =
@@ -56,6 +55,7 @@ export function ChooseDestinationModalBody({
     DEFAULT_DROPDOWN_VALUE
   );
 
+  const { data } = useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
   useEffect(() => {
     if (data) {
       const destinationsCategories = data.destinationTypes.categories.map(
@@ -75,31 +75,32 @@ export function ChooseDestinationModalBody({
     setDropdownValue(option);
   }
 
-  // function filterData() {
-  //   let filteredData = data;
+  const filteredDestinations = useMemo(() => {
+    return destinations
+      .map((category) => {
+        const filteredItems = category.items.filter((item) => {
+          const matchesSearch = searchValue
+            ? item.displayName.toLowerCase().includes(searchValue.toLowerCase())
+            : true;
 
-  //   if (searchValue) {
-  //     filteredData = filteredData.filter((item) =>
-  //       item.displayName.toLowerCase().includes(searchValue.toLowerCase())
-  //     );
-  //   }
+          const matchesDropdown =
+            dropdownValue.id !== 'all'
+              ? category.name === dropdownValue.id
+              : true;
 
-  //   if (dropdownValue.id !== 'all') {
-  //     filteredData = filteredData.filter(
-  //       (item) => item.category === dropdownValue.id
-  //     );
-  //   }
+          const matchesMonitor = selectedMonitors.length
+            ? selectedMonitors.some(
+                (monitor) => item.supportedSignals[monitor]?.supported
+              )
+            : true;
 
-  //   if (selectedMonitors.length) {
-  //     filteredData = filteredData.filter((item) =>
-  //       selectedMonitors.some(
-  //         (monitor) => item.supportedSignals[monitor].supported
-  //       )
-  //     );
-  //   }
+          return matchesSearch && matchesDropdown && matchesMonitor;
+        });
 
-  //   return filteredData;
-  // }
+        return { ...category, items: filteredItems };
+      })
+      .filter((category) => category.items.length > 0); // Filter out empty categories
+  }, [destinations, searchValue, dropdownValue, selectedMonitors]);
 
   function onMonitorSelect(monitor: string) {
     if (selectedMonitors.includes(monitor)) {
@@ -127,7 +128,10 @@ export function ChooseDestinationModalBody({
           onMonitorSelect={onMonitorSelect}
         />
         <Divider margin="0 0 24px 0" />
-        <DestinationsList items={destinations} setSelectedItems={onSelect} />
+        <DestinationsList
+          items={filteredDestinations}
+          setSelectedItems={onSelect}
+        />
       </Body>
     </Container>
   );
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
index e6caabc08..aa16aea36 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
@@ -4,6 +4,10 @@ import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
 import { Text } from '@/reuseable-components';
 
+const HoverTextWrapper = styled.div`
+  visibility: hidden;
+`;
+
 const ListItem = styled.div`
   display: flex;
   align-items: center;
@@ -21,6 +25,12 @@ const ListItem = styled.div`
   &:last-child {
     margin-bottom: 24px;
   }
+
+  &:hover {
+    ${HoverTextWrapper} {
+      visibility: visible;
+    }
+  }
 `;
 
 const ListItemContent = styled.div`
@@ -62,6 +72,12 @@ const TextWrapper = styled.div`
   justify-content: space-between;
 `;
 
+const HoverText = styled(Text)`
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-transform: uppercase;
+  margin-right: 16px;
+`;
+
 interface DestinationListItemProps {
   item: DestinationTypeItem;
   onSelect: (item: DestinationTypeItem) => void;
@@ -95,6 +111,9 @@ const DestinationListItem: React.FC<DestinationListItemProps> = ({
           <SignalsWrapper>{renderSupportedSignals()}</SignalsWrapper>
         </TextWrapper>
       </ListItemContent>
+      <HoverTextWrapper>
+        <HoverText size={14}>{'Select'}</HoverText>
+      </HoverTextWrapper>
     </ListItem>
   );
 };

From 6d25e8d354d0c34cbc232d33395648269a3fa304 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 26 Aug 2024 15:48:55 +0300
Subject: [PATCH 198/374] chore: wip

---
 .../add-destination-modal/index.tsx           |  6 ++++-
 .../connect-destination-modal-body/index.tsx  | 26 ++++++++++++++++---
 .../reuseable-components/input/index.tsx      | 21 +++++++++++++--
 .../notification-note/index.tsx               |  6 ++---
 frontend/webapp/types/destinations.ts         | 22 +++-------------
 5 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index 0844174d0..afadab7f3 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -66,6 +66,7 @@ export function AddDestinationModal({
   function handleNext() {
     if (submitRef.current) {
       submitRef.current();
+      setSelectedItem(undefined);
       handleCloseModal();
     }
   }
@@ -81,7 +82,10 @@ export function AddDestinationModal({
         />
       }
       header={{ title: 'Add destination' }}
-      onClose={handleCloseModal}
+      onClose={() => {
+        setSelectedItem(undefined);
+        handleCloseModal();
+      }}
     >
       {renderModalBody()}
     </Modal>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index b9a325a09..3f59b33a1 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -111,11 +111,21 @@ export function ConnectDestinationModalBody({
   }, [destination]);
 
   useEffect(() => {
-    if (data) {
+    if (data && destination) {
       const df = buildFormDynamicFields(data.destinationTypeDetails.fields);
-      setDynamicFields(df);
+
+      const newDynamicFields = df.map((field) => {
+        if (destination.fields && field?.name in destination.fields) {
+          return {
+            ...field,
+            initialValue: destination.fields[field.name],
+          };
+        }
+        return field;
+      });
+      setDynamicFields(newDynamicFields);
     }
-  }, [data]);
+  }, [data, destination]);
 
   useEffect(() => {
     // Assign handleSubmit to the onSubmitRef so it can be triggered externally
@@ -152,7 +162,7 @@ export function ConnectDestinationModalBody({
         destinationTypeDetails,
         type: destination?.type || '',
         imageUrl: destination?.imageUrl || '',
-        category: destination?.category || '',
+        category: '',
         displayName: destination?.displayName || '',
       };
 
@@ -210,6 +220,14 @@ export function ConnectDestinationModalBody({
             />
           </NotificationNoteWrapper>
         )}
+        {destination.fields && !showConnectionError && (
+          <NotificationNoteWrapper>
+            <NotificationNote
+              type="info"
+              text={`Odigos autocompleted ${destination.displayName} connection details.`}
+            />
+          </NotificationNoteWrapper>
+        )}
         <Divider margin="24px 0" />
         <FormContainer>
           <CheckboxList
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 20a16d51b..082c88623 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React from 'react';
+import React, { useState } from 'react';
 import { Text } from '../text';
 import styled, { css } from 'styled-components';
 import { Tooltip } from '../tooltip';
@@ -12,6 +12,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   title?: string;
   tooltip?: string;
   required?: boolean;
+  initialValue?: string;
 }
 
 const Container = styled.div`
@@ -148,8 +149,19 @@ const Input: React.FC<InputProps> = ({
   title,
   tooltip,
   required,
+  initialValue,
+  onChange,
   ...props
 }) => {
+  const [value, setValue] = useState<string>(initialValue || '');
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
   return (
     <Container>
       {title && (
@@ -184,7 +196,12 @@ const Input: React.FC<InputProps> = ({
             <Image src={icon} alt="" width={14} height={14} />
           </IconWrapper>
         )}
-        <StyledInput hasIcon={icon} {...props} />
+        <StyledInput
+          hasIcon={icon}
+          value={value}
+          onChange={handleInputChange}
+          {...props}
+        />
         {buttonLabel && onButtonClick && (
           <Button onClick={onButtonClick} disabled={props.disabled}>
             {buttonLabel}
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
index a7d5f94f9..457ec7cf4 100644
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -31,7 +31,7 @@ const NotificationContainer = styled.div<{ type: NotificationType }>`
       case 'success':
         return '#28A745'; // Green
       case 'info':
-        return '#2B2D66'; // Blue
+        return '#181944'; // Blue
       default:
         return '#2B2D66'; // Default to info color
     }
@@ -56,7 +56,7 @@ const Title = styled(Text)<{ type: NotificationType }>`
       case 'success':
         return '#28A745';
       case 'info':
-        return '#2B2D66';
+        return '#AABEF7';
       default:
         return '#2B2D66';
     }
@@ -115,7 +115,7 @@ const NotificationIcon = ({ type }: { type: NotificationType }) => {
     case 'info':
     default:
       return (
-        <Image src="/icons/info-icon.svg" alt="info" width={16} height={16} />
+        <Image src="/brand/odigos-icon.svg" alt="info" width={16} height={16} />
       );
   }
 };
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 6d92b87cd..33ac89b15 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -5,25 +5,6 @@ export enum DestinationsSortType {
   TYPE = 'type',
 }
 
-// export interface DestinationTypeItem {
-//   displayName: string;
-//   imageUrl: string;
-//   category: 'managed' | 'self-hosted';
-//   type: string;
-//   testConnectionSupported: boolean;
-//   supportedSignals: {
-//     logs: {
-//       supported: boolean;
-//     };
-//     metrics: {
-//       supported: boolean;
-//     };
-//     traces: {
-//       supported: boolean;
-//     };
-//   };
-// }
-
 interface ObservabilitySignalSupport {
   supported: boolean;
 }
@@ -40,6 +21,9 @@ export interface DestinationTypeItem {
   displayName: string;
   imageUrl: string;
   supportedSignals: SupportedSignals;
+  fields: {
+    [key: string]: string;
+  };
 }
 
 export interface DestinationsCategory {

From 9b973807783f23974c7b91240b118e78ccb17732 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 27 Aug 2024 14:26:53 +0300
Subject: [PATCH 199/374] chore: wip

---
 .../add-destination-modal/index.tsx           |  8 ++-
 .../configured-destinations-list/index.tsx    |  2 +-
 .../connect-destination-modal-body/index.tsx  | 55 ++++++++++++++++---
 .../dynamic-form-fields/index.tsx             |  5 +-
 .../destinations/useConnectDestinationForm.ts |  2 +-
 .../reuseable-components/dropdown/index.tsx   | 12 ++--
 6 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index afadab7f3..27aa87bfb 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -13,9 +13,11 @@ function ModalActionComponent({
   onNext,
   onBack,
   item,
+  isFormValid,
 }: {
   onNext: () => void;
   onBack: () => void;
+  isFormValid?: boolean;
   item: DestinationTypeItem | undefined;
 }) {
   return (
@@ -33,6 +35,7 @@ function ModalActionComponent({
                 label: 'DONE',
                 onClick: onNext,
                 variant: 'primary',
+                disabled: !isFormValid,
               },
             ]
           : []
@@ -47,6 +50,7 @@ export function AddDestinationModal({
 }: AddDestinationModalProps) {
   const submitRef = useRef<() => void | null>(null);
   const [selectedItem, setSelectedItem] = useState<DestinationTypeItem>();
+  const [isFormValid, setIsFormValid] = useState(false);
 
   function handleNextStep(item: DestinationTypeItem) {
     setSelectedItem(item);
@@ -55,8 +59,9 @@ export function AddDestinationModal({
   function renderModalBody() {
     return selectedItem ? (
       <ConnectDestinationModalBody
-        destination={selectedItem}
         onSubmitRef={submitRef}
+        destination={selectedItem}
+        onFormValidChange={setIsFormValid}
       />
     ) : (
       <ChooseDestinationModalBody onSelect={handleNextStep} />
@@ -78,6 +83,7 @@ export function AddDestinationModal({
         <ModalActionComponent
           onNext={handleNext}
           onBack={() => setSelectedItem(undefined)}
+          isFormValid={isFormValid}
           item={selectedItem}
         />
       }
diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
index a989f4164..f79ffe5a2 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -115,7 +115,7 @@ function ConfiguredDestinationsListItem({
   item: ConfiguredDestination;
 }) {
   const [expand, setExpand] = React.useState(false);
-
+  console.log({ item });
   function renderSupportedSignals(item: ConfiguredDestination) {
     const supportedSignals = item.exportedSignals;
     const signals = Object.keys(supportedSignals);
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 3f59b33a1..25dfedbe0 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -64,11 +64,13 @@ const NotificationNoteWrapper = styled.div`
 interface ConnectDestinationModalBodyProps {
   destination: DestinationTypeItem | undefined;
   onSubmitRef: React.MutableRefObject<(() => void) | null>;
+  onFormValidChange: (isValid: boolean) => void;
 }
 
 export function ConnectDestinationModalBody({
   destination,
   onSubmitRef,
+  onFormValidChange,
 }: ConnectDestinationModalBodyProps) {
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [destinationName, setDestinationName] = useState<string>('');
@@ -118,11 +120,13 @@ export function ConnectDestinationModalBody({
         if (destination.fields && field?.name in destination.fields) {
           return {
             ...field,
-            initialValue: destination.fields[field.name],
+            value: destination.fields[field.name],
+            // initialValue: destination.fields[field.name],
           };
         }
         return field;
       });
+
       setDynamicFields(newDynamicFields);
     }
   }, [data, destination]);
@@ -132,8 +136,26 @@ export function ConnectDestinationModalBody({
     onSubmitRef.current = handleSubmit;
   }, [formData, destinationName, exportedSignals]);
 
+  useEffect(() => {
+    const isFormValid =
+      dynamicFields.every(
+        (field) =>
+          formData[field.name] !== undefined && formData[field.name] !== ''
+      ) && Object.keys(formData).length > 0;
+
+    onFormValidChange(isFormValid);
+  }, [formData]);
+
   function handleDynamicFieldChange(name: string, value: any) {
     setFormData((prev) => ({ ...prev, [name]: value }));
+    setDynamicFields((prev) => {
+      return prev.map((field) => {
+        if (field.name === name) {
+          return { ...field, value };
+        }
+        return field;
+      });
+    });
   }
 
   function handleSignalChange(signal: string, value: boolean) {
@@ -141,34 +163,47 @@ export function ConnectDestinationModalBody({
   }
 
   async function handleSubmit() {
-    const fields = Object.entries(formData).map(([name, value]) => ({
-      key: name,
-      value,
+    // Helper function to process field values
+    function processFieldValue(field) {
+      return field.componentType === 'dropdown'
+        ? field.value.value
+        : field.value;
+    }
+
+    // Prepare fields for the request body
+    const fields = dynamicFields.map((field) => ({
+      key: field.name,
+      value: processFieldValue(field),
     }));
 
+    // Function to store configured destination
     function storeConfiguredDestination() {
       const destinationTypeDetails = dynamicFields.map((field) => ({
         title: field.title,
-        value: formData[field.name],
+        value: processFieldValue(field),
       }));
 
+      // Add 'Destination name' as the first item
       destinationTypeDetails.unshift({
         title: 'Destination name',
         value: destinationName,
       });
 
+      // Construct the configured destination object
       const storedDestination: ConfiguredDestination = {
         exportedSignals,
         destinationTypeDetails,
         type: destination?.type || '',
         imageUrl: destination?.imageUrl || '',
-        category: '',
+        category: '', // Could be handled in a more dynamic way if needed
         displayName: destination?.displayName || '',
       };
 
+      // Dispatch action to store the destination
       dispatch(addConfiguredDestination(storedDestination));
     }
 
+    // Prepare the request body
     const body: DestinationInput = {
       name: destinationName,
       type: destination?.type || '',
@@ -176,7 +211,13 @@ export function ConnectDestinationModalBody({
       fields,
     };
 
-    await connectEnv(body, storeConfiguredDestination);
+    try {
+      // Await connection and store the configured destination if successful
+      await connectEnv(body, storeConfiguredDestination);
+    } catch (error) {
+      console.error('Failed to submit destination configuration:', error);
+      // Handle error (e.g., show notification or alert)
+    }
   }
 
   if (!destination) return null;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
index 813602dd8..6fd9f3edd 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -16,6 +16,7 @@ export function DynamicConnectDestinationFormFields({
   fields: any[];
   onChange: (name: string, value: any) => void;
 }) {
+  console.log({ fields });
   return fields?.map((field: any) => {
     switch (field.componentType) {
       case INPUT_TYPES.INPUT:
@@ -32,7 +33,9 @@ export function DynamicConnectDestinationFormFields({
           <Dropdown
             key={field.name}
             {...field}
-            onSelect={(option) => onChange(field.name, option.value)}
+            onSelect={(option) =>
+              onChange(field.name, { id: option.id, value: option.value })
+            }
           />
         );
       case INPUT_TYPES.MULTI_INPUT:
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index 8165c1194..7f95908c5 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -37,7 +37,7 @@ export function useConnectDestinationForm() {
               title: displayName,
               onSelect: () => {},
               options,
-              selectedOption: options[0],
+              placeholder: 'Select an option',
               ...componentPropertiesJson,
             };
 
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index b43634117..1e7fafbb5 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -10,10 +10,11 @@ import { useOnClickOutside } from '@/hooks';
 
 interface DropdownProps {
   options: DropdownOption[];
-  selectedOption: DropdownOption | undefined;
+  value: DropdownOption | undefined;
   onSelect: (option: DropdownOption) => void;
   title?: string;
   tooltip?: string;
+  placeholder?: string;
 }
 
 const Container = styled.div`
@@ -105,10 +106,11 @@ const OpenDropdownIcon = styled(Image)<{ isOpen: boolean }>`
 
 const Dropdown: React.FC<DropdownProps> = ({
   options,
-  selectedOption,
+  value,
   onSelect,
   title,
   tooltip,
+  placeholder,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -143,7 +145,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         </Tooltip>
       )}
       <DropdownHeader isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
-        <Text size={14}>{selectedOption?.value}</Text>
+        <Text size={14}>{value?.value || placeholder}</Text>
 
         <OpenDropdownIcon
           src="/icons/common/extend-arrow.svg"
@@ -167,12 +169,12 @@ const Dropdown: React.FC<DropdownProps> = ({
           {filteredOptions.map((option) => (
             <DropdownItem
               key={option.id}
-              isSelected={option.id === selectedOption?.id}
+              isSelected={option.id === value?.id}
               onClick={() => handleSelect(option)}
             >
               <Text size={14}>{option.value}</Text>
 
-              {option.id === selectedOption?.id && (
+              {option.id === value?.id && (
                 <Image
                   src="/icons/common/check.svg"
                   alt=""

From 18d6ef90817a1d34a54888f7638544643837872c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 27 Aug 2024 14:34:20 +0300
Subject: [PATCH 200/374] chore: wip

---
 .../destinations/configured-destination-fields/index.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
index 5c8cd899e..22d2f94fe 100644
--- a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
+++ b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
@@ -30,8 +30,12 @@ const ItemValue = styled(Text)`
 export const ConfiguredDestinationFields: React.FC<
   ConfiguredDestinationFieldsProps
 > = ({ details }) => {
-  const parseValue = (value: string) => {
+  const parseValue = (value: any) => {
     try {
+      if (typeof value === 'string') {
+        return value;
+      }
+
       const parsed = JSON.parse(value);
 
       if (Array.isArray(parsed)) {

From f9e2f86a48f5952bde047c77e67f8bbc71dfdc69 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 27 Aug 2024 15:01:36 +0300
Subject: [PATCH 201/374] chore: wip

---
 .../connect-destination-modal-body/index.tsx  | 38 +++++++++++--------
 .../dynamic-form-fields/index.tsx             |  1 -
 .../reuseable-components/input-list/index.tsx |  9 ++++-
 .../key-value-input-list/index.tsx            |  9 ++++-
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 25dfedbe0..d91324649 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -72,7 +72,6 @@ export function ConnectDestinationModalBody({
   onSubmitRef,
   onFormValidChange,
 }: ConnectDestinationModalBodyProps) {
-  const [formData, setFormData] = useState<Record<string, any>>({});
   const [destinationName, setDestinationName] = useState<string>('');
   const [showConnectionError, setShowConnectionError] = useState(false);
   const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
@@ -134,20 +133,19 @@ export function ConnectDestinationModalBody({
   useEffect(() => {
     // Assign handleSubmit to the onSubmitRef so it can be triggered externally
     onSubmitRef.current = handleSubmit;
-  }, [formData, destinationName, exportedSignals]);
+  }, [dynamicFields, destinationName, exportedSignals]);
 
   useEffect(() => {
-    const isFormValid =
-      dynamicFields.every(
-        (field) =>
-          formData[field.name] !== undefined && formData[field.name] !== ''
-      ) && Object.keys(formData).length > 0;
+    const isFormValid = dynamicFields.every((field) =>
+      field.required ? field.value : true
+    );
+
+    console.log({ isFormValid, dynamicFields });
 
     onFormValidChange(isFormValid);
-  }, [formData]);
+  }, [dynamicFields]);
 
   function handleDynamicFieldChange(name: string, value: any) {
-    setFormData((prev) => ({ ...prev, [name]: value }));
     setDynamicFields((prev) => {
       return prev.map((field) => {
         if (field.name === name) {
@@ -162,8 +160,7 @@ export function ConnectDestinationModalBody({
     setExportedSignals((prev) => ({ ...prev, [signal]: value }));
   }
 
-  async function handleSubmit() {
-    // Helper function to process field values
+  function processFormFields() {
     function processFieldValue(field) {
       return field.componentType === 'dropdown'
         ? field.value.value
@@ -171,10 +168,22 @@ export function ConnectDestinationModalBody({
     }
 
     // Prepare fields for the request body
-    const fields = dynamicFields.map((field) => ({
+    return dynamicFields.map((field) => ({
       key: field.name,
       value: processFieldValue(field),
     }));
+  }
+
+  async function handleSubmit() {
+    // Helper function to process field values
+    function processFieldValue(field) {
+      return field.componentType === 'dropdown'
+        ? field.value.value
+        : field.value;
+    }
+
+    // Prepare fields for the request body
+    const fields = processFormFields();
 
     // Function to store configured destination
     function storeConfiguredDestination() {
@@ -240,10 +249,7 @@ export function ConnectDestinationModalBody({
                   name: destinationName,
                   type: destination?.type || '',
                   exportedSignals,
-                  fields: Object.entries(formData).map(([name, value]) => ({
-                    key: name,
-                    value,
-                  })),
+                  fields: processFormFields(),
                 }}
               />
             ) : (
diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
index 6fd9f3edd..b935a558c 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -16,7 +16,6 @@ export function DynamicConnectDestinationFormFields({
   fields: any[];
   onChange: (name: string, value: any) => void;
 }) {
-  console.log({ fields });
   return fields?.map((field: any) => {
     switch (field.componentType) {
       case INPUT_TYPES.INPUT:
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 0ea34d78a..43d6fffe5 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -10,6 +10,7 @@ interface InputListProps {
   initialValues?: string[];
   title?: string;
   tooltip?: string;
+  required?: boolean;
   onChange: (values: string[]) => void;
 }
 
@@ -55,19 +56,20 @@ const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-  margin-bottom: 4px;
 `;
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
+  margin-bottom: 4px;
 `;
 
 const InputList: React.FC<InputListProps> = ({
   initialValues = [''],
   title,
   tooltip,
+  required,
   onChange,
 }) => {
   const [inputs, setInputs] = useState<string[]>(initialValues);
@@ -102,6 +104,11 @@ const InputList: React.FC<InputListProps> = ({
         <Tooltip text={tooltip || ''}>
           <HeaderWrapper>
             <Title>{title}</Title>
+            {!required && (
+              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+                (optional)
+              </Text>
+            )}
             {tooltip && (
               <Image
                 src="/icons/common/info.svg"
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index c6a51fdd7..1b25a0fbe 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -10,6 +10,7 @@ interface KeyValueInputsListProps {
   initialKeyValuePairs?: { key: string; value: string }[];
   title?: string;
   tooltip?: string;
+  required?: boolean;
   onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void;
 }
 
@@ -23,6 +24,7 @@ const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
+  margin-bottom: 4px;
 `;
 
 const Row = styled.div`
@@ -61,13 +63,13 @@ const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-  margin-bottom: 4px;
 `;
 
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   initialKeyValuePairs = [{ key: '', value: '' }],
   title,
   tooltip,
+  required,
   onChange,
 }) => {
   const [keyValuePairs, setKeyValuePairs] =
@@ -124,6 +126,11 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
         <Tooltip text={tooltip || ''}>
           <HeaderWrapper>
             <Title>{title}</Title>
+            {!required && (
+              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+                (optional)
+              </Text>
+            )}
             {tooltip && (
               <Image
                 src="/icons/common/info.svg"

From 63ae46dad7863376a11cc1956087590264abea1e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 27 Aug 2024 15:10:01 +0300
Subject: [PATCH 202/374] chore: wip

---
 .../destinations/configured-destination-fields/index.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
index 22d2f94fe..a813a0427 100644
--- a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
+++ b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
@@ -32,11 +32,10 @@ export const ConfiguredDestinationFields: React.FC<
 > = ({ details }) => {
   const parseValue = (value: any) => {
     try {
-      if (typeof value === 'string') {
-        return value;
-      }
-
       const parsed = JSON.parse(value);
+      if (typeof parsed === 'string') {
+        return parsed;
+      }
 
       if (Array.isArray(parsed)) {
         return parsed
@@ -44,6 +43,7 @@ export const ConfiguredDestinationFields: React.FC<
             if (typeof item === 'object' && item !== null) {
               return `${item.key}: ${item.value}`;
             }
+
             return item;
           })
           .join(', ');

From 722b3766c4e1fa3d57c68b7df506ea0b45c98efd Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 27 Aug 2024 15:42:19 +0300
Subject: [PATCH 203/374] chore: wip

---
 .../add-destination/choose-destination-menu/index.tsx     | 2 +-
 .../configured-destinations-list/index.tsx                | 2 +-
 .../connect-destination-modal-body/index.tsx              | 8 +++++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
index 5c7474c74..1e31c9dac 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
@@ -64,7 +64,7 @@ const DestinationFilterComponent: React.FC<FilterComponentProps> = ({
         </div>
         <Dropdown
           options={DROPDOWN_OPTIONS}
-          selectedOption={selectedTag}
+          value={selectedTag}
           onSelect={onTagSelect}
         />
       </InputAndDropdownContainer>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
index f79ffe5a2..a989f4164 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -115,7 +115,7 @@ function ConfiguredDestinationsListItem({
   item: ConfiguredDestination;
 }) {
   const [expand, setExpand] = React.useState(false);
-  console.log({ item });
+
   function renderSupportedSignals(item: ConfiguredDestination) {
     const supportedSignals = item.exportedSignals;
     const signals = Object.keys(supportedSignals);
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index d91324649..ab10247f7 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -140,12 +140,11 @@ export function ConnectDestinationModalBody({
       field.required ? field.value : true
     );
 
-    console.log({ isFormValid, dynamicFields });
-
     onFormValidChange(isFormValid);
   }, [dynamicFields]);
 
   function handleDynamicFieldChange(name: string, value: any) {
+    setShowConnectionError(false);
     setDynamicFields((prev) => {
       return prev.map((field) => {
         if (field.name === name) {
@@ -244,7 +243,10 @@ export function ConnectDestinationModalBody({
           actionButton={
             destination.testConnectionSupported ? (
               <TestConnection // TODO: refactor this after add form validation
-                onError={() => setShowConnectionError(true)}
+                onError={() => {
+                  setShowConnectionError(true);
+                  onFormValidChange(false);
+                }}
                 destination={{
                   name: destinationName,
                   type: destination?.type || '',

From 6ae83846d0f2aab7796dc74891095a02b730154c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 27 Aug 2024 15:51:25 +0300
Subject: [PATCH 204/374] chore: fixed pr commentd

---
 .../add-destination/connect-destination-modal-body/index.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index ab10247f7..f316b7e14 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -120,7 +120,6 @@ export function ConnectDestinationModalBody({
           return {
             ...field,
             value: destination.fields[field.name],
-            // initialValue: destination.fields[field.name],
           };
         }
         return field;

From 608d6a8dc76c40fa806f0a29c481c5e687f3beb4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 3 Sep 2024 11:15:17 +0300
Subject: [PATCH 205/374] chore: wip

---
 frontend/services/namespaces.go               | 15 ++++--
 .../hooks/sources/useConnectSourcesList.ts    |  1 +
 frontend/webapp/package.json                  |  2 +-
 frontend/webapp/yarn.lock                     | 51 +++++++++++++++----
 4 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/frontend/services/namespaces.go b/frontend/services/namespaces.go
index c2fe67d48..fce287517 100644
--- a/frontend/services/namespaces.go
+++ b/frontend/services/namespaces.go
@@ -4,13 +4,14 @@ import (
 	"context"
 	"fmt"
 
+	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+	"sigs.k8s.io/yaml"
 
 	"k8s.io/apimachinery/pkg/runtime/schema"
 
 	"golang.org/x/sync/errgroup"
 
-	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/common/utils"
 
@@ -78,14 +79,20 @@ func GetK8SNamespaces(ctx context.Context) GetNamespacesResponse {
 // Taking into account the ignored namespaces from the OdigosConfiguration.
 func getRelevantNameSpaces(ctx context.Context, odigosns string) ([]v1.Namespace, error) {
 	var (
-		odigosConfig *v1alpha1.OdigosConfiguration
+		odigosConfig *common.OdigosConfiguration
 		list         *v1.NamespaceList
 	)
 
 	g, ctx := errgroup.WithContext(ctx)
 	g.Go(func() error {
 		var err error
-		odigosConfig, err = kube.DefaultClient.OdigosClient.OdigosConfigurations(odigosns).Get(ctx, consts.OdigosConfigurationName, metav1.GetOptions{})
+		configMap, err := kube.DefaultClient.CoreV1().ConfigMaps(odigosns).Get(ctx, consts.OdigosConfigurationName, metav1.GetOptions{})
+		if err != nil {
+			return err
+		}
+		if err := yaml.Unmarshal([]byte(configMap.Data[consts.OdigosConfigurationFileName]), &odigosConfig); err != nil {
+			return err
+		}
 		return err
 	})
 
@@ -101,7 +108,7 @@ func getRelevantNameSpaces(ctx context.Context, odigosns string) ([]v1.Namespace
 
 	result := []v1.Namespace{}
 	for _, namespace := range list.Items {
-		if utils.IsItemIgnored(namespace.Name, odigosConfig.Spec.IgnoredNamespaces) {
+		if utils.IsItemIgnored(namespace.Name, odigosConfig.IgnoredNamespaces) {
 			continue
 		}
 
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesList.ts b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
index b5fee7aec..cc2e2671a 100644
--- a/frontend/webapp/hooks/sources/useConnectSourcesList.ts
+++ b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
@@ -12,6 +12,7 @@ export const useConnectSourcesList = ({ stateMenu, setSourcesList }) => {
   );
 
   useEffect(() => {
+    console.log({ data });
     data && buildNamespacesList();
   }, [data, error]);
 
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index 99c786a7e..b040d463e 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -13,7 +13,7 @@
     "@apollo/client": "^3.11.0-rc.2",
     "@apollo/experimental-nextjs-app-support": "^0.11.2",
     "@focus-reactive/react-yaml": "^1.1.2",
-    "@keyval-dev/design-system": "^2.1.0",
+    "@keyval-dev/design-system": "^2.3.1",
     "@next/font": "^13.4.7",
     "@reduxjs/toolkit": "^2.2.1",
     "@svgr/webpack": "^6.2.1",
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index a0e099df5..cb99c7edc 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -1521,10 +1521,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@keyval-dev/design-system@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@keyval-dev/design-system/-/design-system-2.1.0.tgz#9b7b35449d7843e4ff06c81716dab1e447e0b8fb"
-  integrity sha512-JmCdW63WAzpBOnDZFgjzwrQaaKoONjuNAR0r8fLxPXc7vYTjnDmgPLqdo4t5Ha8GLCSSvgf+cNvQW/KfPJptDw==
+"@keyval-dev/design-system@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@keyval-dev/design-system/-/design-system-2.3.1.tgz#d679fdb7f97848e7cd58e17a0efc1589443dba81"
+  integrity sha512-mePVh+Nu5+lb3uGc2ukT/8KM5I65BlQ5rACVkAOK9CGDqoAm55lcPXXpKH6BYXYTRcsd+6VtoD2okzpAjkck8g==
   dependencies:
     "@focus-reactive/react-yaml" "^1.1.2"
     "@svgr/core" "^8.0.0"
@@ -4308,6 +4308,13 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
@@ -5136,6 +5143,16 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
+optimism@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.18.0.tgz#e7bb38b24715f3fdad8a9a7fc18e999144bbfa63"
+  integrity sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==
+  dependencies:
+    "@wry/caches" "^1.0.0"
+    "@wry/context" "^0.7.0"
+    "@wry/trie" "^0.4.3"
+    tslib "^2.3.0"
+
 optionator@^0.9.1:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
@@ -5307,7 +5324,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5548,6 +5565,11 @@ resolve@^2.0.0-next.5:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+response-iterator@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/response-iterator/-/response-iterator-0.2.6.tgz#249005fb14d2e4eeb478a3f735a28fd8b4c9f3da"
+  integrity sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -5994,6 +6016,11 @@ swr@^2.1.5:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
 
+symbol-observable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
+  integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
+
 tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -6041,6 +6068,13 @@ tough-cookie@^4.1.3:
     universalify "^0.2.0"
     url-parse "^1.5.3"
 
+ts-invariant@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
+  integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==
+  dependencies:
+    tslib "^2.1.0"
+
 tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
@@ -6061,12 +6095,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.5.0:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
-  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
-
-tslib@^2.1.0, tslib@^2.3.0:
+tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==

From 66d11f684b00b066702dfa0620e99c6250e5f0f4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 3 Sep 2024 11:22:04 +0300
Subject: [PATCH 206/374] chore: tidy

---
 frontend/go.sum | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/go.sum b/frontend/go.sum
index 08db3b12c..2095ca658 100644
--- a/frontend/go.sum
+++ b/frontend/go.sum
@@ -146,10 +146,8 @@ github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
 github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
 github.com/mailru/easyjson v0.7.7 h1:UGYAvKxe3sBsEDzO8ZeWOSlIQfWFlxbzLZe7hwFURr0=
 github.com/mailru/easyjson v0.7.7/go.mod h1:xzfreul335JAWq5oZzymOObrkdz5UnU4kGfJJLY9Nlc=
-github.com/mattn/go-colorable v0.1.8/go.mod h1:u6P/XSegPjTcexA+o6vUJrdnUu04hMope9wVRipJSqc=
 github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
 github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
 github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=

From ed21ccfff31486045c753b7426728f2cf2721a28 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 3 Sep 2024 11:46:49 +0300
Subject: [PATCH 207/374] chore: wip

---
 .../app/(setup)/choose-destination/page.tsx   | 20 ++++-----
 .../app/(setup)/choose-sources/page.tsx       | 20 ++++-----
 .../app/(setup)/connect-destination/page.tsx  | 17 --------
 frontend/webapp/app/(setup)/layout.tsx        | 29 +++++++++----
 .../webapp/app/{setup => (setup)}/styled.ts   |  0
 frontend/webapp/app/(setup)/styled.tsx        | 41 -------------------
 .../app/setup/choose-destination/page.tsx     | 16 --------
 .../webapp/app/setup/choose-sources/page.tsx  | 16 --------
 frontend/webapp/app/setup/layout.tsx          | 32 ---------------
 .../destinations/monitors-tap-list/index.tsx  |  1 +
 .../main/sources/choose-sources/index.tsx     |  2 +-
 11 files changed, 41 insertions(+), 153 deletions(-)
 delete mode 100644 frontend/webapp/app/(setup)/connect-destination/page.tsx
 rename frontend/webapp/app/{setup => (setup)}/styled.ts (100%)
 delete mode 100644 frontend/webapp/app/(setup)/styled.tsx
 delete mode 100644 frontend/webapp/app/setup/choose-destination/page.tsx
 delete mode 100644 frontend/webapp/app/setup/choose-sources/page.tsx
 delete mode 100644 frontend/webapp/app/setup/layout.tsx

diff --git a/frontend/webapp/app/(setup)/choose-destination/page.tsx b/frontend/webapp/app/(setup)/choose-destination/page.tsx
index 66b0badb5..07187db2a 100644
--- a/frontend/webapp/app/(setup)/choose-destination/page.tsx
+++ b/frontend/webapp/app/(setup)/choose-destination/page.tsx
@@ -1,18 +1,16 @@
 'use client';
 import React from 'react';
-import { StepsList } from '@/components';
-import { ChooseDestinationContainer } from '@/containers';
-import { CardWrapper, PageContainer, StepListWrapper } from '../styled';
+import { SideMenu } from '@/components';
+import { SideMenuWrapper } from '../styled';
+import { ChooseDestinationContainer } from '@/containers/main';
 
 export default function ChooseDestinationPage() {
   return (
-    <PageContainer>
-      <StepListWrapper>
-        <StepsList currentStepIndex={1} />
-      </StepListWrapper>
-      <CardWrapper>
-        <ChooseDestinationContainer />
-      </CardWrapper>
-    </PageContainer>
+    <>
+      <SideMenuWrapper>
+        <SideMenu currentStep={3} />
+      </SideMenuWrapper>
+      <ChooseDestinationContainer />
+    </>
   );
 }
diff --git a/frontend/webapp/app/(setup)/choose-sources/page.tsx b/frontend/webapp/app/(setup)/choose-sources/page.tsx
index 495ec2f21..a612ab2ae 100644
--- a/frontend/webapp/app/(setup)/choose-sources/page.tsx
+++ b/frontend/webapp/app/(setup)/choose-sources/page.tsx
@@ -1,18 +1,16 @@
 'use client';
 import React from 'react';
-import { StepsList } from '@/components';
-import { ChooseSourcesContainer } from '@/containers';
-import { CardWrapper, PageContainer, StepListWrapper } from '../styled';
+import { SideMenu } from '@/components';
+import { ChooseSourcesContainer } from '@/containers/main';
+import { SideMenuWrapper } from '../styled';
 
 export default function ChooseSourcesPage() {
   return (
-    <PageContainer>
-      <StepListWrapper>
-        <StepsList currentStepIndex={0} />
-      </StepListWrapper>
-      <CardWrapper>
-        <ChooseSourcesContainer />
-      </CardWrapper>
-    </PageContainer>
+    <>
+      <SideMenuWrapper>
+        <SideMenu currentStep={2} />
+      </SideMenuWrapper>
+      <ChooseSourcesContainer />
+    </>
   );
 }
diff --git a/frontend/webapp/app/(setup)/connect-destination/page.tsx b/frontend/webapp/app/(setup)/connect-destination/page.tsx
deleted file mode 100644
index 5217c328c..000000000
--- a/frontend/webapp/app/(setup)/connect-destination/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-import { StepsList } from '@/components';
-import { ConnectDestinationContainer } from '@/containers';
-import { CardWrapper, PageContainer, StepListWrapper } from '../styled';
-
-export default function ConnectDestinationPage() {
-  return (
-    <PageContainer>
-      <StepListWrapper>
-        <StepsList currentStepIndex={2} />
-      </StepListWrapper>
-      <CardWrapper>
-        <ConnectDestinationContainer />
-      </CardWrapper>
-    </PageContainer>
-  );
-}
diff --git a/frontend/webapp/app/(setup)/layout.tsx b/frontend/webapp/app/(setup)/layout.tsx
index d93a42f6f..6e7cab11e 100644
--- a/frontend/webapp/app/(setup)/layout.tsx
+++ b/frontend/webapp/app/(setup)/layout.tsx
@@ -1,7 +1,23 @@
 'use client';
 import React from 'react';
-import Logo from '@/assets/logos/odigos-gradient.svg';
-import { LogoWrapper, SetupPageContainer } from './styled';
+import styled from 'styled-components';
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const MainContent = styled.div`
+  display: flex;
+  max-width: 1440px;
+  width: 100vh;
+  flex-direction: column;
+  align-items: center;
+`;
 
 export default function SetupLayout({
   children,
@@ -9,11 +25,8 @@ export default function SetupLayout({
   children: React.ReactNode;
 }) {
   return (
-    <SetupPageContainer>
-      <LogoWrapper>
-        <Logo />
-      </LogoWrapper>
-      {children}
-    </SetupPageContainer>
+    <LayoutContainer>
+      <MainContent>{children}</MainContent>
+    </LayoutContainer>
   );
 }
diff --git a/frontend/webapp/app/setup/styled.ts b/frontend/webapp/app/(setup)/styled.ts
similarity index 100%
rename from frontend/webapp/app/setup/styled.ts
rename to frontend/webapp/app/(setup)/styled.ts
diff --git a/frontend/webapp/app/(setup)/styled.tsx b/frontend/webapp/app/(setup)/styled.tsx
deleted file mode 100644
index 4e3e49040..000000000
--- a/frontend/webapp/app/(setup)/styled.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import styled from 'styled-components';
-
-export const SetupPageContainer = styled.div`
-  width: 100vw;
-  height: 100vh;
-
-  background: var(
-    --gradient-dark,
-    radial-gradient(
-      44.09% 58.18% at 100% -14%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
-    linear-gradient(181deg, #091824 0%, #2b2f56 100%)
-  );
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export const LogoWrapper = styled.div`
-  position: absolute;
-  top: 20px;
-  left: 20px;
-`;
-
-export const StepListWrapper = styled.div`
-  height: 5%;
-  padding: 32px;
-  width: 100%;
-  display: inline-flex;
-  justify-content: center;
-`;
-
-export const PageContainer = styled.div`
-  height: 100vh;
-`;
-
-export const CardWrapper = styled.div`
-  height: 85%;
-`;
diff --git a/frontend/webapp/app/setup/choose-destination/page.tsx b/frontend/webapp/app/setup/choose-destination/page.tsx
deleted file mode 100644
index 07187db2a..000000000
--- a/frontend/webapp/app/setup/choose-destination/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-import React from 'react';
-import { SideMenu } from '@/components';
-import { SideMenuWrapper } from '../styled';
-import { ChooseDestinationContainer } from '@/containers/main';
-
-export default function ChooseDestinationPage() {
-  return (
-    <>
-      <SideMenuWrapper>
-        <SideMenu currentStep={3} />
-      </SideMenuWrapper>
-      <ChooseDestinationContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/setup/choose-sources/page.tsx b/frontend/webapp/app/setup/choose-sources/page.tsx
deleted file mode 100644
index a612ab2ae..000000000
--- a/frontend/webapp/app/setup/choose-sources/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-import React from 'react';
-import { SideMenu } from '@/components';
-import { ChooseSourcesContainer } from '@/containers/main';
-import { SideMenuWrapper } from '../styled';
-
-export default function ChooseSourcesPage() {
-  return (
-    <>
-      <SideMenuWrapper>
-        <SideMenu currentStep={2} />
-      </SideMenuWrapper>
-      <ChooseSourcesContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/setup/layout.tsx b/frontend/webapp/app/setup/layout.tsx
deleted file mode 100644
index 6e7cab11e..000000000
--- a/frontend/webapp/app/setup/layout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-
-const LayoutContainer = styled.div`
-  width: 100%;
-  height: 100vh;
-  background-color: ${({ theme }) => theme.colors.primary};
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-`;
-
-const MainContent = styled.div`
-  display: flex;
-  max-width: 1440px;
-  width: 100vh;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export default function SetupLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <LayoutContainer>
-      <MainContent>{children}</MainContent>
-    </LayoutContainer>
-  );
-}
diff --git a/frontend/webapp/components/destinations/monitors-tap-list/index.tsx b/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
index 198ea3471..fbc4685b4 100644
--- a/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
+++ b/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
@@ -31,6 +31,7 @@ const MonitorsTapList: React.FC<MonitorButtonsProps> = ({
       <MonitorButtonsContainer>
         {MONITORS_OPTIONS.map((monitor) => (
           <Tag
+            key={monitor.id}
             id={monitor.id}
             isSelected={selectedMonitors.includes(monitor.id)}
             onClick={() => onMonitorSelect(monitor.id)}
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index 6228bea41..6430c1ad7 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -61,7 +61,7 @@ export function ChooseSourcesContainer() {
       dispatch(setSources(selectedItems));
       dispatch(setNamespaceFutureSelectAppsList(futureAppsCheckbox));
     }
-    router.push('/setup/choose-destination');
+    router.push('/choose-destination');
   }
 
   const toggleCheckboxState: ToggleCheckboxState = {

From 9bc0049b79a1b71bd247ad6974f6cb4419efbf0f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 3 Sep 2024 15:44:20 +0300
Subject: [PATCH 208/374] chore: overview header

---
 frontend/webapp/app/main/layout.tsx           | 36 +++++++++++++++++++
 frontend/webapp/app/main/page.tsx             |  6 ++++
 frontend/webapp/components/index.ts           |  1 +
 .../webapp/components/main/header/index.tsx   | 36 +++++++++++++++++++
 frontend/webapp/components/main/index.tsx     |  1 +
 .../destinations/add-destination/index.tsx    |  2 +-
 .../search-and-dropdown.tsx                   |  2 +-
 7 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/app/main/layout.tsx
 create mode 100644 frontend/webapp/app/main/page.tsx
 create mode 100644 frontend/webapp/components/main/header/index.tsx
 create mode 100644 frontend/webapp/components/main/index.tsx

diff --git a/frontend/webapp/app/main/layout.tsx b/frontend/webapp/app/main/layout.tsx
new file mode 100644
index 000000000..219352c92
--- /dev/null
+++ b/frontend/webapp/app/main/layout.tsx
@@ -0,0 +1,36 @@
+'use client';
+import { MainHeader } from '@/components';
+import React from 'react';
+import styled from 'styled-components';
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const MainContent = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 76px;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutContainer>
+      <MainContent>
+        <MainHeader />
+        {children}
+      </MainContent>
+    </LayoutContainer>
+  );
+}
diff --git a/frontend/webapp/app/main/page.tsx b/frontend/webapp/app/main/page.tsx
new file mode 100644
index 000000000..b5433ada1
--- /dev/null
+++ b/frontend/webapp/app/main/page.tsx
@@ -0,0 +1,6 @@
+'use client';
+import React from 'react';
+
+export default function MainPage() {
+  return <></>;
+}
diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
index 5a7406ea6..df046dc30 100644
--- a/frontend/webapp/components/index.ts
+++ b/frontend/webapp/components/index.ts
@@ -5,3 +5,4 @@ export * from './common';
 export * from './notification/notification-manager';
 export * from './notification/notification-list';
 export * from './destinations';
+export * from './main';
diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
new file mode 100644
index 000000000..e2f9ac28a
--- /dev/null
+++ b/frontend/webapp/components/main/header/index.tsx
@@ -0,0 +1,36 @@
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+
+interface SetupHeaderProps {}
+
+const HeaderContainer = styled.div`
+  display: flex;
+  padding: 20px 24px 20px 32px;
+  justify-content: space-between;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  border-bottom: 1px solid rgba(249, 249, 249, 0.16);
+  width: 100%;
+`;
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 32px;
+`;
+
+export const MainHeader: React.FC<SetupHeaderProps> = () => {
+  return (
+    <HeaderContainer>
+      <Logo>
+        <Image
+          src="/brand/transparent-logo-white.svg"
+          alt="logo"
+          width={84}
+          height={20}
+        />
+      </Logo>
+    </HeaderContainer>
+  );
+};
diff --git a/frontend/webapp/components/main/index.tsx b/frontend/webapp/components/main/index.tsx
new file mode 100644
index 000000000..677ca79d4
--- /dev/null
+++ b/frontend/webapp/components/main/index.tsx
@@ -0,0 +1 @@
+export * from './header';
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 6c8020074..825dafecf 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -67,7 +67,7 @@ export function ChooseDestinationContainer() {
             },
             {
               label: 'DONE',
-              onClick: () => console.log('Next button clicked'),
+              onClick: () => router.push('/main'),
               variant: 'primary',
             },
           ]}
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
index abf53b1be..c9270f250 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
@@ -27,7 +27,7 @@ const SearchAndDropdown: React.FC<SearchDropdownProps> = ({
       />
       <Dropdown
         options={dropdownOptions}
-        selectedOption={selectedOption}
+        value={selectedOption}
         onSelect={setSelectedOption}
       />
     </Container>

From 4d1aa519c81c2daf32cbd06712c1e245f70f9474 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 3 Sep 2024 16:14:44 +0300
Subject: [PATCH 209/374] chore: wip

---
 .../webapp/components/main/header/index.tsx   |  9 +-
 .../public/icons/notification/error-icon2.svg |  3 +
 .../icons/notification/success-icon.svg       |  3 +
 .../connection-status/index.tsx               | 88 +++++++++++++++++++
 frontend/webapp/reuseable-components/index.ts |  1 +
 frontend/webapp/styles/theme.ts               |  2 +
 6 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/public/icons/notification/error-icon2.svg
 create mode 100644 frontend/webapp/public/icons/notification/success-icon.svg
 create mode 100644 frontend/webapp/reuseable-components/connection-status/index.tsx

diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
index e2f9ac28a..215142924 100644
--- a/frontend/webapp/components/main/header/index.tsx
+++ b/frontend/webapp/components/main/header/index.tsx
@@ -1,13 +1,13 @@
-import Image from 'next/image';
 import React from 'react';
+import Image from 'next/image';
 import styled from 'styled-components';
+import { ConnectionStatus } from '@/reuseable-components';
 
 interface SetupHeaderProps {}
 
 const HeaderContainer = styled.div`
   display: flex;
   padding: 20px 24px 20px 32px;
-  justify-content: space-between;
   align-items: center;
   background-color: ${({ theme }) => theme.colors.dark_grey};
   border-bottom: 1px solid rgba(249, 249, 249, 0.16);
@@ -31,6 +31,11 @@ export const MainHeader: React.FC<SetupHeaderProps> = () => {
           height={20}
         />
       </Logo>
+      <ConnectionStatus
+        title="Connection Status"
+        status="lost"
+        subtitle="Please check your internet connection"
+      />
     </HeaderContainer>
   );
 };
diff --git a/frontend/webapp/public/icons/notification/error-icon2.svg b/frontend/webapp/public/icons/notification/error-icon2.svg
new file mode 100644
index 000000000..143f67c63
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/error-icon2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8 8.66673V6.00006M8 10.9167V10.9175M7.07337 2.18915C7.66595 1.93695 8.33405 1.93695 8.92662 2.18915C10.6942 2.94145 14.8697 9.61453 14.7474 11.3981C14.6994 12.0972 14.3529 12.7408 13.7982 13.1614C12.323 14.2795 3.67698 14.2795 2.20185 13.1614C1.64705 12.7408 1.3006 12.0972 1.25263 11.3981C1.13026 9.61453 5.30575 2.94145 7.07337 2.18915Z" stroke="#EF7676" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/notification/success-icon.svg b/frontend/webapp/public/icons/notification/success-icon.svg
new file mode 100644
index 000000000..b0552cd59
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/success-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path stroke="#81AF65" stroke-linecap="round" stroke-linejoin="round" d="m5.667 8.341 1.56 1.56a9.99 9.99 0 0 1 3.039-3.29l.067-.047M14.1 8A6.1 6.1 0 1 1 1.9 8a6.1 6.1 0 0 1 12.2 0Z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/connection-status/index.tsx b/frontend/webapp/reuseable-components/connection-status/index.tsx
new file mode 100644
index 000000000..3bac9f2ce
--- /dev/null
+++ b/frontend/webapp/reuseable-components/connection-status/index.tsx
@@ -0,0 +1,88 @@
+import Image from 'next/image';
+import React from 'react';
+import { Text } from '../text';
+import styled from 'styled-components';
+
+interface ConnectionStatusProps {
+  title: string;
+  subtitle?: string;
+  status: 'alive' | 'lost';
+}
+
+const StatusWrapper = styled.div<{ status: 'alive' | 'lost' }>`
+  display: flex;
+  align-items: center;
+  padding: 8px 24px;
+  border-radius: 32px;
+  background: ${({ status }) =>
+    status === 'alive'
+      ? `linear-gradient(
+    90deg,
+    rgba(23, 32, 19, 0) 0%,
+    rgba(23, 32, 19, 0.8) 50%,
+    #172013 100%
+  )`
+      : `linear-gradient(90deg, rgba(51, 21, 21, 0.00) 0%, rgba(51, 21, 21, 0.80) 50%, #331515 100%)`};
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Title = styled(Text)<{ status: 'alive' | 'lost' }>`
+  font-weight: 400;
+  color: ${({ status, theme }) =>
+    status === 'alive' ? theme.text.success : theme.text.error};
+`;
+
+const Subtitle = styled(Text)`
+  font-size: 12px;
+  font-weight: 400;
+  color: #db5151;
+`;
+
+const TextDivider = styled.div`
+  width: 1px;
+  height: 12px;
+  background: rgba(237, 124, 124, 0.16);
+  margin: 0 8px;
+`;
+
+const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
+  title,
+  subtitle,
+  status,
+}) => {
+  return (
+    <StatusWrapper status={status}>
+      <IconWrapper>
+        <Image
+          src={`/icons/notification/${
+            status === 'alive' ? 'success-icon' : 'error-icon2'
+          }.svg`}
+          alt="status"
+          width={16}
+          height={16}
+        />
+      </IconWrapper>
+      <TextWrapper>
+        <Title status={status}>{title}</Title>
+        {subtitle && (
+          <TextWrapper>
+            <TextDivider />
+            <Subtitle>{subtitle}</Subtitle>
+          </TextWrapper>
+        )}
+      </TextWrapper>
+    </StatusWrapper>
+  );
+};
+
+export { ConnectionStatus };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index c772ffb8c..d61b5bb5d 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -19,3 +19,4 @@ export * from './input-list';
 export * from './key-value-input-list';
 export * from './no-data-found';
 export * from './skeleton-loader';
+export * from './connection-status';
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 0dd345d0c..a45623bb3 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -18,6 +18,8 @@ const text = {
   light_grey: '#CCD0D2',
   grey: '#8b92a5',
   dark_button: '#0A1824',
+  success: '#81AF65',
+  error: '#EF7676',
 };
 
 const font_family = {

From 5fa8896ffc6c97983c074f880c1f003e0f7e2df6 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 3 Sep 2024 16:54:08 +0300
Subject: [PATCH 210/374] chore: wip

---
 .../components/main/header/cp-title/index.tsx | 51 +++++++++++++++++++
 .../webapp/components/main/header/index.tsx   | 14 +++--
 frontend/webapp/public/icons/cp/k8s.svg       |  4 ++
 .../connection-status/index.tsx               |  1 +
 4 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 frontend/webapp/components/main/header/cp-title/index.tsx
 create mode 100644 frontend/webapp/public/icons/cp/k8s.svg

diff --git a/frontend/webapp/components/main/header/cp-title/index.tsx b/frontend/webapp/components/main/header/cp-title/index.tsx
new file mode 100644
index 000000000..c7bf856d2
--- /dev/null
+++ b/frontend/webapp/components/main/header/cp-title/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+interface PlatformProps {
+  type: 'k8s' | 'vm';
+}
+
+const PlatformWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 10px;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  margin-right: 10px;
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const PlatformTitle: React.FC<PlatformProps> = ({ type }) => {
+  return (
+    <PlatformWrapper>
+      <IconWrapper>
+        <Image
+          src={`/icons/cp/${type}.svg`}
+          alt={type}
+          width={28}
+          height={28}
+        />
+      </IconWrapper>
+      <TextWrapper>
+        <Title>
+          {type === 'k8s' ? 'Kubernetes Cluster' : 'Virtual Machine'}
+        </Title>
+      </TextWrapper>
+    </PlatformWrapper>
+  );
+};
+
+export { PlatformTitle };
diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
index 215142924..a10e5dc21 100644
--- a/frontend/webapp/components/main/header/index.tsx
+++ b/frontend/webapp/components/main/header/index.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 import { ConnectionStatus } from '@/reuseable-components';
+import { PlatformTitle } from './cp-title';
 
-interface SetupHeaderProps {}
+interface MainHeaderProps {}
 
 const HeaderContainer = styled.div`
   display: flex;
-  padding: 20px 24px 20px 32px;
+  padding: 10px 0;
   align-items: center;
   background-color: ${({ theme }) => theme.colors.dark_grey};
   border-bottom: 1px solid rgba(249, 249, 249, 0.16);
@@ -20,7 +21,11 @@ const Logo = styled.div`
   margin-left: 32px;
 `;
 
-export const MainHeader: React.FC<SetupHeaderProps> = () => {
+const PlatformTitleWrapper = styled.div`
+  margin-left: 32px;
+`;
+
+export const MainHeader: React.FC<MainHeaderProps> = () => {
   return (
     <HeaderContainer>
       <Logo>
@@ -31,6 +36,9 @@ export const MainHeader: React.FC<SetupHeaderProps> = () => {
           height={20}
         />
       </Logo>
+      <PlatformTitleWrapper>
+        <PlatformTitle type="k8s" />
+      </PlatformTitleWrapper>
       <ConnectionStatus
         title="Connection Status"
         status="lost"
diff --git a/frontend/webapp/public/icons/cp/k8s.svg b/frontend/webapp/public/icons/cp/k8s.svg
new file mode 100644
index 000000000..71b84f5a5
--- /dev/null
+++ b/frontend/webapp/public/icons/cp/k8s.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
+  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#242424"/>
+  <path d="M21.5645 15.7452C21.5495 15.7452 21.5495 15.7452 21.5645 15.7452H21.5495C21.5345 15.7452 21.5195 15.7452 21.5195 15.7297C21.4894 15.7297 21.4594 15.7143 21.4294 15.7143C21.3243 15.6988 21.2342 15.6834 21.1441 15.6834C21.099 15.6834 21.054 15.6834 20.9939 15.668H20.9789C20.6635 15.6371 20.4082 15.6062 20.168 15.529C20.0629 15.4826 20.0328 15.4208 20.0028 15.3591C20.0028 15.3436 19.9878 15.3436 19.9878 15.3282L19.7926 15.2664C19.8827 14.556 19.8526 13.8147 19.6875 13.0888C19.5223 12.3629 19.237 11.6834 18.8465 11.0656L18.9967 10.9266V10.8958C18.9967 10.8185 19.0117 10.7413 19.0718 10.6641C19.252 10.4942 19.4772 10.3552 19.7475 10.1853C19.7926 10.1544 19.8376 10.139 19.8827 10.1081C19.9728 10.0618 20.0478 10.0154 20.1379 9.95367C20.153 9.93822 20.183 9.92278 20.213 9.89189C20.228 9.87645 20.2431 9.87645 20.2431 9.861C20.4533 9.67568 20.4983 9.3668 20.3482 9.16602C20.2731 9.05792 20.1379 8.99614 20.0028 8.99614C19.8827 8.99614 19.7776 9.04247 19.6724 9.11969C19.6574 9.13514 19.6574 9.13514 19.6424 9.15058C19.6124 9.16602 19.5974 9.19691 19.5673 9.21236C19.4922 9.28958 19.4322 9.35135 19.3721 9.42857C19.3421 9.45946 19.312 9.50579 19.267 9.53668C19.0568 9.76834 18.8615 9.95367 18.6663 10.0927C18.6213 10.1236 18.5762 10.139 18.5312 10.139C18.5011 10.139 18.4711 10.139 18.4411 10.1236H18.411L18.2308 10.2471C18.0356 10.0309 17.8254 9.84556 17.6152 9.66023C16.7142 8.93436 15.618 8.48649 14.4767 8.37838L14.4617 8.17761C14.4467 8.16216 14.4467 8.16216 14.4317 8.14672C14.3866 8.10039 14.3265 8.05405 14.3115 7.94595C14.2965 7.69884 14.3265 7.42085 14.3566 7.11197V7.09653C14.3566 7.05019 14.3716 6.98842 14.3866 6.94208C14.4016 6.84942 14.4166 6.75676 14.4317 6.64865V6.55598V6.50965C14.4317 6.23166 14.2214 6 13.9661 6C13.846 6 13.7259 6.06178 13.6358 6.15444C13.5457 6.2471 13.5006 6.37066 13.5006 6.50965V6.54054V6.6332C13.5006 6.74131 13.5157 6.83398 13.5457 6.92664C13.5607 6.97297 13.5607 7.0193 13.5757 7.08108V7.09653C13.6057 7.40541 13.6508 7.6834 13.6208 7.9305C13.6057 8.03861 13.5457 8.08494 13.5006 8.13127C13.4856 8.14672 13.4856 8.14672 13.4706 8.16216L13.4556 8.36293C13.1853 8.39382 12.915 8.42471 12.6447 8.48649C11.4884 8.74903 10.4673 9.35135 9.67141 10.2162L9.52125 10.1081H9.49121C9.46118 10.1081 9.43115 10.1236 9.40112 10.1236C9.35607 10.1236 9.31102 10.1081 9.26597 10.0772C9.07075 9.93822 8.87554 9.73745 8.6653 9.50579C8.63527 9.4749 8.60524 9.42857 8.56019 9.39768C8.50012 9.32046 8.44006 9.25869 8.36497 9.18147C8.34996 9.16602 8.31992 9.15058 8.28989 9.11969C8.27487 9.10425 8.25986 9.10425 8.25986 9.0888C8.16976 9.01158 8.04963 8.96525 7.92949 8.96525C7.79434 8.96525 7.6592 9.02703 7.58411 9.13514C7.43395 9.33591 7.479 9.64479 7.68923 9.83012C7.70425 9.83012 7.70425 9.84556 7.71926 9.84556C7.74929 9.861 7.76431 9.89189 7.79434 9.90734C7.88444 9.96911 7.95953 10.0154 8.04963 10.0618C8.09468 10.0772 8.13972 10.1081 8.18477 10.139C8.45507 10.3089 8.68032 10.4479 8.86052 10.6178C8.9356 10.695 8.9356 10.7722 8.9356 10.8494V10.8803L9.08577 11.0193C9.05573 11.0656 9.0257 11.0965 9.01068 11.1429C8.25986 12.3629 7.97454 13.7992 8.16976 15.2201L7.97454 15.2819C7.97454 15.2973 7.95953 15.2973 7.95953 15.3127C7.92949 15.3745 7.88444 15.4363 7.79434 15.4826C7.5691 15.5598 7.2988 15.5907 6.98345 15.6216H6.96843C6.92338 15.6216 6.86332 15.6216 6.81827 15.6371C6.72817 15.6371 6.63807 15.6525 6.53295 15.668C6.50292 15.668 6.47289 15.6834 6.44285 15.6834C6.42784 15.6834 6.41282 15.6834 6.39781 15.6988C6.12751 15.7606 5.96233 16.0232 6.00737 16.2703C6.05242 16.4865 6.24764 16.6255 6.4879 16.6255C6.53295 16.6255 6.56299 16.6255 6.60804 16.61C6.62305 16.61 6.63807 16.61 6.63807 16.5946C6.6681 16.5946 6.69814 16.5792 6.72817 16.5792C6.83329 16.5483 6.90837 16.5174 6.99847 16.471C7.04352 16.4556 7.08857 16.4247 7.13362 16.4093H7.14863C7.43395 16.3012 7.68923 16.2085 7.92949 16.1776H7.95953C8.04963 16.1776 8.10969 16.2239 8.15474 16.2548C8.16976 16.2548 8.16976 16.2703 8.18477 16.2703L8.39501 16.2394C8.7554 17.3822 9.44616 18.4015 10.3622 19.1429C10.5724 19.3127 10.7826 19.4517 11.0079 19.5907L10.9178 19.7915C10.9178 19.807 10.9328 19.807 10.9328 19.8224C10.9628 19.8842 10.9929 19.9614 10.9628 20.0695C10.8727 20.3012 10.7376 20.5328 10.5724 20.7954V20.8108C10.5424 20.8571 10.5123 20.888 10.4823 20.9344C10.4222 21.0116 10.3772 21.0888 10.3171 21.1815C10.3021 21.1969 10.2871 21.2278 10.2721 21.2587C10.2721 21.2741 10.2571 21.2896 10.2571 21.2896C10.1369 21.5521 10.227 21.8456 10.4523 21.9537C10.5123 21.9846 10.5724 22 10.6325 22C10.8127 22 10.9929 21.8764 11.083 21.7066C11.083 21.6911 11.098 21.6757 11.098 21.6757C11.113 21.6448 11.128 21.6139 11.143 21.5985C11.1881 21.4903 11.2031 21.4131 11.2331 21.3205C11.2482 21.2741 11.2632 21.2278 11.2782 21.1815C11.3833 20.8726 11.4584 20.6255 11.5935 20.4093C11.6536 20.3166 11.7287 20.3012 11.7887 20.2703C11.8038 20.2703 11.8038 20.2703 11.8188 20.2548L11.9239 20.0541C12.5846 20.3166 13.3054 20.4556 14.0262 20.4556C14.4617 20.4556 14.9122 20.4093 15.3327 20.3012C15.603 20.2394 15.8582 20.1622 16.1135 20.0695L16.2036 20.2394C16.2186 20.2394 16.2186 20.2394 16.2336 20.2548C16.3087 20.2703 16.3688 20.3012 16.4289 20.3938C16.549 20.61 16.6391 20.8726 16.7442 21.166V21.1815C16.7592 21.2278 16.7742 21.2741 16.7893 21.3205C16.8193 21.4131 16.8343 21.5058 16.8794 21.5985C16.8944 21.6293 16.9094 21.6448 16.9244 21.6757C16.9244 21.6911 16.9394 21.7066 16.9394 21.7066C17.0295 21.8919 17.2097 22 17.3899 22C17.45 22 17.5101 21.9846 17.5701 21.9537C17.6752 21.8919 17.7653 21.7992 17.7954 21.6757C17.8254 21.5521 17.8254 21.4131 17.7653 21.2896C17.7653 21.2741 17.7503 21.2741 17.7503 21.2587C17.7353 21.2278 17.7203 21.1969 17.7053 21.1815C17.6602 21.0888 17.6002 21.0116 17.5401 20.9344C17.5101 20.888 17.48 20.8571 17.45 20.8108V20.7954C17.2848 20.5328 17.1346 20.3012 17.0596 20.0695C17.0295 19.9614 17.0596 19.8996 17.0746 19.8224C17.0746 19.807 17.0896 19.807 17.0896 19.7915L17.0145 19.6062C17.8104 19.1274 18.4861 18.4479 18.9967 17.6139C19.267 17.1815 19.4772 16.7027 19.6274 16.2239L19.8076 16.2548C19.8226 16.2548 19.8226 16.2394 19.8376 16.2394C19.8977 16.2085 19.9427 16.1622 20.0328 16.1622H20.0629C20.3031 16.1931 20.5584 16.2857 20.8437 16.3938H20.8587C20.9038 16.4093 20.9488 16.4402 20.9939 16.4556C21.084 16.5019 21.1591 16.5328 21.2642 16.5637C21.2942 16.5637 21.3243 16.5792 21.3543 16.5792C21.3693 16.5792 21.3843 16.5792 21.3993 16.5946C21.4444 16.61 21.4744 16.61 21.5195 16.61C21.7447 16.61 21.9399 16.4556 22 16.2548C22 16.0695 21.8348 15.8224 21.5645 15.7452ZM14.6119 14.9884L13.9511 15.3127L13.2904 14.9884L13.1252 14.2625L13.5757 13.6757H14.3115L14.762 14.2625L14.6119 14.9884ZM18.5312 13.3822C18.6513 13.9073 18.6813 14.4324 18.6363 14.9421L16.3388 14.2625C16.1285 14.2008 16.0084 13.9846 16.0534 13.7683C16.0685 13.7066 16.0985 13.6448 16.1435 13.5985L17.9605 11.9151C18.2158 12.3475 18.411 12.8417 18.5312 13.3822ZM17.2398 10.9884L15.2726 12.4247C15.1074 12.5328 14.8822 12.5019 14.747 12.332C14.702 12.2857 14.6869 12.2239 14.6719 12.1622L14.5368 9.64479C15.5729 9.76834 16.519 10.2471 17.2398 10.9884ZM12.885 9.72201C13.0501 9.69112 13.2003 9.66023 13.3655 9.62934L13.2303 12.1004C13.2153 12.3166 13.0501 12.5019 12.8249 12.5019C12.7648 12.5019 12.6897 12.4865 12.6447 12.4556L10.6475 10.9884C11.2632 10.3552 12.029 9.92278 12.885 9.72201ZM9.92669 11.9151L11.7137 13.5521C11.8788 13.6911 11.8939 13.9537 11.7587 14.1236C11.7137 14.1853 11.6536 14.2317 11.5785 14.2471L9.25095 14.9421C9.16085 13.8919 9.3861 12.8263 9.92669 11.9151ZM9.52125 16.1004L11.9089 15.6834C12.1041 15.668 12.2843 15.807 12.3293 16.0077C12.3444 16.1004 12.3444 16.1776 12.3143 16.2548L11.3983 18.5251C10.5574 17.9691 9.88164 17.1197 9.52125 16.1004ZM15.0023 19.1737C14.6569 19.251 14.3115 19.2973 13.9511 19.2973C13.4256 19.2973 12.915 19.2046 12.4345 19.0502L13.6208 16.8417C13.7409 16.7027 13.9361 16.6409 14.1013 16.7336C14.1764 16.7799 14.2364 16.8417 14.2815 16.9035L15.4378 19.0502C15.3026 19.0965 15.1525 19.1274 15.0023 19.1737ZM17.9305 17.027C17.5551 17.6448 17.0596 18.139 16.4889 18.5251L15.5429 16.1931C15.4978 16.0077 15.5729 15.807 15.7531 15.7143C15.8132 15.6834 15.8883 15.668 15.9633 15.668L18.366 16.0849C18.2759 16.4247 18.1257 16.7336 17.9305 17.027Z" fill="#B8B8B8"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/connection-status/index.tsx b/frontend/webapp/reuseable-components/connection-status/index.tsx
index 3bac9f2ce..be67caa13 100644
--- a/frontend/webapp/reuseable-components/connection-status/index.tsx
+++ b/frontend/webapp/reuseable-components/connection-status/index.tsx
@@ -38,6 +38,7 @@ const TextWrapper = styled.div`
 
 const Title = styled(Text)<{ status: 'alive' | 'lost' }>`
   font-weight: 400;
+  font-size: 14px;
   color: ${({ status, theme }) =>
     status === 'alive' ? theme.text.success : theme.text.error};
 `;

From a9959b98b61ee8278c436f820314a4f5fa8830f5 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 11 Sep 2024 15:30:19 +0300
Subject: [PATCH 211/374] fix: add react types

---
 .../components/setup/headers/header/index.tsx |  10 +-
 .../destinations/add-destination/index.tsx    |   2 +-
 frontend/webapp/package.json                  |   2 +-
 .../reuseable-components/dropdown/index.tsx   | 101 +++++++++++-------
 frontend/webapp/yarn.lock                     |  17 ++-
 5 files changed, 81 insertions(+), 51 deletions(-)

diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
index ceaa4c468..b2a763af6 100644
--- a/frontend/webapp/components/setup/headers/header/index.tsx
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -31,6 +31,11 @@ const Logo = styled.div`
   font-size: 1.2em;
 `;
 
+const NavigationButtonsWrapper = styled.div`
+  position: absolute;
+  right: 24px;
+`;
+
 export const SetupHeader: React.FC<SetupHeaderProps> = ({
   navigationButtons,
 }) => {
@@ -45,7 +50,10 @@ export const SetupHeader: React.FC<SetupHeaderProps> = ({
         />
       </Logo>
       <Title family={'secondary'}>START WITH ODIGOS</Title>
-      <NavigationButtons buttons={navigationButtons} />
+      <div style={{ width: 84 }} />
+      <NavigationButtonsWrapper>
+        <NavigationButtons buttons={navigationButtons} />
+      </NavigationButtonsWrapper>
     </HeaderContainer>
   );
 };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 825dafecf..7bf56029e 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -85,7 +85,7 @@ export function ChooseDestinationContainer() {
               text={'No sources selected.'}
               action={{
                 label: 'Select sources',
-                onClick: () => router.push('/setup/choose-sources'),
+                onClick: () => router.push('/choose-sources'),
               }}
             />
           </NotificationNoteWrapper>
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index b040d463e..6f8453d0c 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -18,7 +18,7 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@svgr/webpack": "^6.2.1",
     "@types/node": "20.3.3",
-    "@types/react": "18.2.11",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "18.2.4",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index 1e7fafbb5..1424d776d 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Input } from '../input';
 import styled, { css } from 'styled-components';
 import { Tooltip } from '../tooltip';
@@ -7,6 +7,7 @@ import { Text } from '../text';
 import { Divider } from '../divider';
 import { DropdownOption } from '@/types';
 import { useOnClickOutside } from '@/hooks';
+import ReactDOM from 'react-dom';
 
 interface DropdownProps {
   options: DropdownOption[];
@@ -36,7 +37,6 @@ const DropdownHeader = styled.div<{ isOpen: boolean }>`
   border: 1px solid rgba(249, 249, 249, 0.24);
   cursor: pointer;
   background-color: transparent;
-  border-radius: 32px;
   ${({ isOpen, theme }) =>
     isOpen &&
     css`
@@ -54,8 +54,6 @@ const DropdownHeader = styled.div<{ isOpen: boolean }>`
 
 const DropdownListContainer = styled.div`
   position: absolute;
-  top: 60px;
-  left: 0;
   width: 100%;
   max-height: 200px;
   overflow-y: auto;
@@ -66,8 +64,7 @@ const DropdownListContainer = styled.div`
   background-color: #242424;
   border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: 32px;
-  margin-top: 4px;
-  z-index: 999;
+  z-index: 9999;
 `;
 
 const SearchInputContainer = styled.div`
@@ -114,10 +111,27 @@ const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
+  useEffect(() => {
+    if (isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY, // Ensure correct vertical position
+        left: rect.left + window.scrollX, // Ensure correct horizontal position
+        width: rect.width, // Ensure dropdown matches the width of the input
+      });
+    }
+  }, [isOpen]);
+
   const filteredOptions = options.filter((option) =>
     option.value.toLowerCase().includes(searchTerm.toLowerCase())
   );
@@ -127,8 +141,48 @@ const Dropdown: React.FC<DropdownProps> = ({
     setIsOpen(false);
   };
 
+  const dropdownContent = (
+    <div
+      style={{
+        position: 'absolute',
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        width: dropdownPosition.width,
+      }}
+    >
+      <DropdownListContainer>
+        <SearchInputContainer>
+          <Input
+            placeholder="Search..."
+            icon={'/icons/common/search.svg'}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <Divider thickness={1} margin="8px 0 0 0" />
+        </SearchInputContainer>
+        {filteredOptions.map((option) => (
+          <DropdownItem
+            key={option.id}
+            isSelected={option.id === value?.id}
+            onClick={() => handleSelect(option)}
+          >
+            <Text size={14}>{option.value}</Text>
+            {option.id === value?.id && (
+              <Image
+                src="/icons/common/check.svg"
+                alt=""
+                width={16}
+                height={16}
+              />
+            )}
+          </DropdownItem>
+        ))}
+      </DropdownListContainer>
+    </div>
+  );
+
   return (
-    <Container ref={dropdownRef}>
+    <Container ref={containerRef}>
       {title && (
         <Tooltip text={tooltip || ''}>
           <HeaderWrapper>
@@ -146,7 +200,6 @@ const Dropdown: React.FC<DropdownProps> = ({
       )}
       <DropdownHeader isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
         <Text size={14}>{value?.value || placeholder}</Text>
-
         <OpenDropdownIcon
           src="/icons/common/extend-arrow.svg"
           alt="open-dropdown"
@@ -155,37 +208,7 @@ const Dropdown: React.FC<DropdownProps> = ({
           isOpen={isOpen}
         />
       </DropdownHeader>
-      {isOpen && (
-        <DropdownListContainer>
-          <SearchInputContainer>
-            <Input
-              placeholder="Search..."
-              icon={'/icons/common/search.svg'}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-            <Divider thickness={1} margin="8px 0 0 0" />
-          </SearchInputContainer>
-          {filteredOptions.map((option) => (
-            <DropdownItem
-              key={option.id}
-              isSelected={option.id === value?.id}
-              onClick={() => handleSelect(option)}
-            >
-              <Text size={14}>{option.value}</Text>
-
-              {option.id === value?.id && (
-                <Image
-                  src="/icons/common/check.svg"
-                  alt=""
-                  width={16}
-                  height={16}
-                />
-              )}
-            </DropdownItem>
-          ))}
-        </DropdownListContainer>
-      )}
+      {isOpen && ReactDOM.createPortal(dropdownContent, document.body)}
     </Container>
   );
 };
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index cb99c7edc..a4330e52d 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -2291,15 +2291,6 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@18.2.11":
-  version "18.2.11"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.11.tgz#168f7dbb421ed214fcf8c5fe8e587765a3e02fd1"
-  integrity sha512-+hsJr9hmwyDecSMQAmX7drgbDpyE+EgSF6t7+5QEBAn1tQK7kl1vWZ4iRf6SjQ8lk7dyEULxUmZOIpN0W5baZA==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/react@18.2.19":
   version "18.2.19"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.19.tgz#f77cb2c8307368e624d464a25b9675fa35f95a8b"
@@ -2309,6 +2300,14 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.3.5":
+  version "18.3.5"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.5.tgz#5f524c2ad2089c0ff372bbdabc77ca2c4dbadf8f"
+  integrity sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/scheduler@*":
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.23.0.tgz#0a6655b3e2708eaabca00b7372fafd7a792a7b09"

From 14aba8f746236a32c606432999d6dc8717ab62e2 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 12 Sep 2024 10:37:11 +0300
Subject: [PATCH 212/374] feat: add destination  gqlgen and custom query from
 client

---
 frontend/graph/generated.go                   | 135 ++++++++++++++++++
 frontend/graph/schema.graphqls                |   1 +
 frontend/graph/schema.resolvers.go            |  23 +++
 .../webapp/graphql/queries/destination.ts     |  30 ++++
 .../destinations/useActualDestinations.ts     |  15 ++
 .../hooks/sources/useConnectSourcesList.ts    |   3 +-
 6 files changed, 205 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/hooks/destinations/useActualDestinations.ts

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index ec686160a..d1fae5835 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -162,6 +162,7 @@ type ComplexityRoot struct {
 		Config                 func(childComplexity int) int
 		DestinationTypeDetails func(childComplexity int, typeArg string) int
 		DestinationTypes       func(childComplexity int) int
+		Destinations           func(childComplexity int) int
 		PotentialDestinations  func(childComplexity int) int
 	}
 
@@ -212,6 +213,7 @@ type QueryResolver interface {
 	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
 	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
 	PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error)
+	Destinations(ctx context.Context) ([]*model.Destination, error)
 }
 
 type executableSchema struct {
@@ -714,6 +716,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.DestinationTypes(childComplexity), true
 
+	case "Query.destinations":
+		if e.complexity.Query.Destinations == nil {
+			break
+		}
+
+		return e.complexity.Query.Destinations(childComplexity), true
+
 	case "Query.potentialDestinations":
 		if e.complexity.Query.PotentialDestinations == nil {
 			break
@@ -4198,6 +4207,66 @@ func (ec *executionContext) fieldContext_Query_potentialDestinations(_ context.C
 	return fc, nil
 }
 
+func (ec *executionContext) _Query_destinations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_destinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().Destinations(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
@@ -7987,6 +8056,28 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "destinations":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_destinations(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
@@ -8537,6 +8628,50 @@ func (ec *executionContext) marshalNDestination2githubᚗcomᚋodigosᚑioᚋodi
 	return ec._Destination(ctx, sel, &v)
 }
 
+func (ec *executionContext) marshalNDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.Destination) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
 func (ec *executionContext) marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v *model.Destination) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index ac7d0f7e1..82ea3820a 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -221,6 +221,7 @@ type Query {
   destinationTypes: GetDestinationTypesResponse
   destinationTypeDetails(type: String!): GetDestinationDetailsResponse
   potentialDestinations: [DestinationDetails!]!
+  destinations: [Destination!]!
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index b141a6dbf..645fe17ed 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -328,6 +328,29 @@ func (r *queryResolver) PotentialDestinations(ctx context.Context) ([]*model.Des
 	return result, nil
 }
 
+// Destinations is the resolver for the destinations field.
+func (r *queryResolver) Destinations(ctx context.Context) ([]*model.Destination, error) {
+	odigosns := consts.DefaultOdigosNamespace
+	dests, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	var destinations []*model.Destination
+	for _, dest := range dests.Items {
+		secretFields, err := services.GetDestinationSecretFields(ctx, odigosns, &dest)
+		if err != nil {
+			return nil, err
+		}
+
+		// Convert the k8s destination format to the expected endpoint format
+		endpointDest := services.K8sDestinationToEndpointFormat(dest, secretFields)
+		destinations = append(destinations, &endpointDest)
+	}
+
+	return destinations, nil
+}
+
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
diff --git a/frontend/webapp/graphql/queries/destination.ts b/frontend/webapp/graphql/queries/destination.ts
index 1bc8a05d9..119392884 100644
--- a/frontend/webapp/graphql/queries/destination.ts
+++ b/frontend/webapp/graphql/queries/destination.ts
@@ -49,3 +49,33 @@ export const GET_POTENTIAL_DESTINATIONS = gql`
     }
   }
 `;
+
+export const GET_DESTINATIONS = gql`
+  query GetDestinations {
+    destinations {
+      id
+      name
+      exportedSignals {
+        traces
+        metrics
+        logs
+      }
+      destinationType {
+        type
+        displayName
+        imageUrl
+        supportedSignals {
+          traces {
+            supported
+          }
+          metrics {
+            supported
+          }
+          logs {
+            supported
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/hooks/destinations/useActualDestinations.ts b/frontend/webapp/hooks/destinations/useActualDestinations.ts
new file mode 100644
index 000000000..e110aeaa0
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useActualDestinations.ts
@@ -0,0 +1,15 @@
+import { GET_DESTINATIONS } from '@/graphql';
+import { Destination } from '@/types';
+import { useQuery } from '@apollo/client';
+
+export const useActualDestination = () => {
+  const { loading, error, data } = useQuery<{ destinations: Destination[] }>(
+    GET_DESTINATIONS
+  );
+
+  return {
+    loading,
+    error,
+    destinations: data?.destinations || [],
+  };
+};
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesList.ts b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
index cc2e2671a..0fa1708c5 100644
--- a/frontend/webapp/hooks/sources/useConnectSourcesList.ts
+++ b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
@@ -1,5 +1,5 @@
-import { DropdownOption, K8sActualNamespace, K8sActualSource } from '@/types';
 import { useEffect, useState } from 'react';
+import { DropdownOption, K8sActualNamespace } from '@/types';
 import { useComputePlatform, useNamespace } from '../compute-platform';
 
 export const useConnectSourcesList = ({ stateMenu, setSourcesList }) => {
@@ -12,7 +12,6 @@ export const useConnectSourcesList = ({ stateMenu, setSourcesList }) => {
   );
 
   useEffect(() => {
-    console.log({ data });
     data && buildNamespacesList();
   }, [data, error]);
 

From f71866f1b61e42e99d692602be5a2c9315b1c59a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 12 Sep 2024 16:00:37 +0300
Subject: [PATCH 213/374] feat: query actual sources

---
 frontend/graph/conversions.go                 |  58 ++
 frontend/graph/generated.go                   | 588 +++++++++++++++++-
 frontend/graph/model/models_gen.go            |  15 +-
 frontend/graph/schema.graphqls                |  12 +
 frontend/graph/schema.resolvers.go            |  19 +
 frontend/webapp/graphql/queries/index.ts      |   1 +
 frontend/webapp/graphql/queries/sources.ts    |  20 +
 .../compute-platform/useConnectSources.ts     |  53 --
 frontend/webapp/hooks/sources/index.ts        |   1 +
 .../webapp/hooks/sources/useActualSources.tsx |  17 +
 10 files changed, 727 insertions(+), 57 deletions(-)
 create mode 100644 frontend/webapp/graphql/queries/sources.ts
 delete mode 100644 frontend/webapp/hooks/compute-platform/useConnectSources.ts
 create mode 100644 frontend/webapp/hooks/sources/useActualSources.tsx

diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
index 79e400002..8c69022af 100644
--- a/frontend/graph/conversions.go
+++ b/frontend/graph/conversions.go
@@ -3,6 +3,7 @@ package graph
 import (
 	"time"
 
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	gqlmodel "github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/services"
 	v1 "k8s.io/apimachinery/pkg/apis/meta/v1"
@@ -90,3 +91,60 @@ func k8sSourceToGql(k8sSource *services.Source) *gqlmodel.K8sActualSource {
 		ServiceName:                    &k8sSource.ReportedName,
 	}
 }
+
+func instrumentedApplicationToActualSource(instrumentedApp v1alpha1.InstrumentedApplication) *gqlmodel.K8sActualSource {
+	// Map the container runtime details
+	var containers []*gqlmodel.SourceContainerRuntimeDetails
+	for _, container := range instrumentedApp.Spec.RuntimeDetails {
+		containers = append(containers, &gqlmodel.SourceContainerRuntimeDetails{
+			ContainerName: container.ContainerName,
+			Language:      string(container.Language),
+		})
+	}
+
+	// Map the conditions of the application
+	var conditions []*gqlmodel.Condition
+	for _, condition := range instrumentedApp.Status.Conditions {
+		conditions = append(conditions, &gqlmodel.Condition{
+			Type:               condition.Type,
+			Status:             k8sConditionStatusToGql(condition.Status),
+			Reason:             &condition.Reason,
+			LastTransitionTime: k8sLastTransitionTimeToGql(condition.LastTransitionTime),
+			Message:            &condition.Message,
+		})
+	}
+
+	// Map the options for instrumentation libraries
+	var instrumentationOptions []*gqlmodel.InstrumentedApplicationDetails
+	for _, option := range instrumentedApp.Spec.Options {
+		for _, libOptions := range option.InstrumentationLibraries {
+			var libraries []*gqlmodel.InstrumentationOption
+			for _, configOption := range libOptions.Options {
+				libraries = append(libraries, &gqlmodel.InstrumentationOption{
+					OptionKey: configOption.OptionKey,
+					SpanKind:  gqlmodel.SpanKind(configOption.SpanKind),
+				})
+			}
+
+			instrumentationOptions = append(instrumentationOptions, &gqlmodel.InstrumentedApplicationDetails{
+				Containers: containers,
+				Conditions: conditions,
+			})
+		}
+	}
+
+	// Return the converted K8sActualSource object
+	return &gqlmodel.K8sActualSource{
+		Namespace:                instrumentedApp.Namespace,
+		Kind:                     k8sKindToGql(instrumentedApp.OwnerReferences[0].Kind),
+		Name:                     instrumentedApp.OwnerReferences[0].Name,
+		ServiceName:              &instrumentedApp.Name, // Assuming serviceName is derived from the app name
+		NumberOfInstances:        nil,                   // Assuming this is handled separately; can be updated if needed
+		AutoInstrumented:         instrumentedApp.Spec.Options != nil,
+		AutoInstrumentedDecision: "", // Assuming this comes from another source, add if applicable
+		InstrumentedApplicationDetails: &gqlmodel.InstrumentedApplicationDetails{
+			Containers: containers,
+			Conditions: conditions,
+		},
+	}
+}
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index d1fae5835..df799aa48 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -124,9 +124,20 @@ type ComplexityRoot struct {
 		Categories func(childComplexity int) int
 	}
 
+	InstrumentationLibrary struct {
+		LibraryName func(childComplexity int) int
+		Options     func(childComplexity int) int
+	}
+
+	InstrumentationOption struct {
+		OptionKey func(childComplexity int) int
+		SpanKind  func(childComplexity int) int
+	}
+
 	InstrumentedApplicationDetails struct {
-		Conditions func(childComplexity int) int
-		Containers func(childComplexity int) int
+		Conditions             func(childComplexity int) int
+		Containers             func(childComplexity int) int
+		InstrumentationOptions func(childComplexity int) int
 	}
 
 	K8sActualNamespace struct {
@@ -158,6 +169,7 @@ type ComplexityRoot struct {
 	}
 
 	Query struct {
+		ActualSources          func(childComplexity int) int
 		ComputePlatform        func(childComplexity int) int
 		Config                 func(childComplexity int) int
 		DestinationTypeDetails func(childComplexity int, typeArg string) int
@@ -214,6 +226,7 @@ type QueryResolver interface {
 	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
 	PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error)
 	Destinations(ctx context.Context) ([]*model.Destination, error)
+	ActualSources(ctx context.Context) ([]*model.K8sActualSource, error)
 }
 
 type executableSchema struct {
@@ -532,6 +545,34 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.GetDestinationTypesResponse.Categories(childComplexity), true
 
+	case "InstrumentationLibrary.libraryName":
+		if e.complexity.InstrumentationLibrary.LibraryName == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationLibrary.LibraryName(childComplexity), true
+
+	case "InstrumentationLibrary.options":
+		if e.complexity.InstrumentationLibrary.Options == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationLibrary.Options(childComplexity), true
+
+	case "InstrumentationOption.optionKey":
+		if e.complexity.InstrumentationOption.OptionKey == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationOption.OptionKey(childComplexity), true
+
+	case "InstrumentationOption.spanKind":
+		if e.complexity.InstrumentationOption.SpanKind == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationOption.SpanKind(childComplexity), true
+
 	case "InstrumentedApplicationDetails.conditions":
 		if e.complexity.InstrumentedApplicationDetails.Conditions == nil {
 			break
@@ -546,6 +587,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.InstrumentedApplicationDetails.Containers(childComplexity), true
 
+	case "InstrumentedApplicationDetails.instrumentationOptions":
+		if e.complexity.InstrumentedApplicationDetails.InstrumentationOptions == nil {
+			break
+		}
+
+		return e.complexity.InstrumentedApplicationDetails.InstrumentationOptions(childComplexity), true
+
 	case "K8sActualNamespace.instrumentationLabelEnabled":
 		if e.complexity.K8sActualNamespace.InstrumentationLabelEnabled == nil {
 			break
@@ -683,6 +731,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
 
+	case "Query.actualSources":
+		if e.complexity.Query.ActualSources == nil {
+			break
+		}
+
+		return e.complexity.Query.ActualSources(childComplexity), true
+
 	case "Query.computePlatform":
 		if e.complexity.Query.ComputePlatform == nil {
 			break
@@ -3055,6 +3110,188 @@ func (ec *executionContext) fieldContext_GetDestinationTypesResponse_categories(
 	return fc, nil
 }
 
+func (ec *executionContext) _InstrumentationLibrary_libraryName(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationLibrary) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationLibrary_libraryName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.LibraryName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentationLibrary_libraryName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentationLibrary",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentationLibrary_options(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationLibrary) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationLibrary_options(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Options, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.InstrumentationOption)
+	fc.Result = res
+	return ec.marshalNInstrumentationOption2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOptionᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentationLibrary_options(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentationLibrary",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "optionKey":
+				return ec.fieldContext_InstrumentationOption_optionKey(ctx, field)
+			case "spanKind":
+				return ec.fieldContext_InstrumentationOption_spanKind(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationOption", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentationOption_optionKey(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationOption) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationOption_optionKey(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.OptionKey, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentationOption_optionKey(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentationOption",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentationOption_spanKind(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationOption) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationOption_spanKind(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SpanKind, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.SpanKind)
+	fc.Result = res
+	return ec.marshalNSpanKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentationOption_spanKind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentationOption",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SpanKind does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
 	if err != nil {
@@ -3155,6 +3392,56 @@ func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditio
 	return fc, nil
 }
 
+func (ec *executionContext) _InstrumentedApplicationDetails_instrumentationOptions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_instrumentationOptions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InstrumentationOptions, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.InstrumentationLibrary)
+	fc.Result = res
+	return ec.marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_instrumentationOptions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentedApplicationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "libraryName":
+				return ec.fieldContext_InstrumentationLibrary_libraryName(ctx, field)
+			case "options":
+				return ec.fieldContext_InstrumentationLibrary_options(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationLibrary", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
 	if err != nil {
@@ -3655,6 +3942,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplication
 				return ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
 			case "conditions":
 				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+			case "instrumentationOptions":
+				return ec.fieldContext_InstrumentedApplicationDetails_instrumentationOptions(ctx, field)
 			}
 			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
 		},
@@ -4267,6 +4556,68 @@ func (ec *executionContext) fieldContext_Query_destinations(_ context.Context, f
 	return fc, nil
 }
 
+func (ec *executionContext) _Query_actualSources(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_actualSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().ActualSources(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_actualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
@@ -7651,6 +8002,94 @@ func (ec *executionContext) _GetDestinationTypesResponse(ctx context.Context, se
 	return out
 }
 
+var instrumentationLibraryImplementors = []string{"InstrumentationLibrary"}
+
+func (ec *executionContext) _InstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationLibrary) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationLibraryImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("InstrumentationLibrary")
+		case "libraryName":
+			out.Values[i] = ec._InstrumentationLibrary_libraryName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "options":
+			out.Values[i] = ec._InstrumentationLibrary_options(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var instrumentationOptionImplementors = []string{"InstrumentationOption"}
+
+func (ec *executionContext) _InstrumentationOption(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationOption) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationOptionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("InstrumentationOption")
+		case "optionKey":
+			out.Values[i] = ec._InstrumentationOption_optionKey(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "spanKind":
+			out.Values[i] = ec._InstrumentationOption_spanKind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var instrumentedApplicationDetailsImplementors = []string{"InstrumentedApplicationDetails"}
 
 func (ec *executionContext) _InstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentedApplicationDetails) graphql.Marshaler {
@@ -7666,6 +8105,11 @@ func (ec *executionContext) _InstrumentedApplicationDetails(ctx context.Context,
 			out.Values[i] = ec._InstrumentedApplicationDetails_containers(ctx, field, obj)
 		case "conditions":
 			out.Values[i] = ec._InstrumentedApplicationDetails_conditions(ctx, field, obj)
+		case "instrumentationOptions":
+			out.Values[i] = ec._InstrumentedApplicationDetails_instrumentationOptions(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8078,6 +8522,28 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "actualSources":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_actualSources(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
@@ -8947,6 +9413,114 @@ func (ec *executionContext) marshalNInstallationStatus2githubᚗcomᚋodigosᚑi
 	return v
 }
 
+func (ec *executionContext) marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationLibrary) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNInstrumentationLibrary2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibrary(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNInstrumentationLibrary2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationLibrary) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._InstrumentationLibrary(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalNInstrumentationOption2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOptionᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationOption) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNInstrumentationOption2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOption(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNInstrumentationOption2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOption(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationOption) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._InstrumentationOption(ctx, sel, v)
+}
+
 func (ec *executionContext) unmarshalNInt2int(ctx context.Context, v interface{}) (int, error) {
 	res, err := graphql.UnmarshalInt(v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -9089,6 +9663,16 @@ func (ec *executionContext) marshalNSourceContainerRuntimeDetails2ᚖgithubᚗco
 	return ec._SourceContainerRuntimeDetails(ctx, sel, v)
 }
 
+func (ec *executionContext) unmarshalNSpanKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx context.Context, v interface{}) (model.SpanKind, error) {
+	var res model.SpanKind
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNSpanKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx context.Context, sel ast.SelectionSet, v model.SpanKind) graphql.Marshaler {
+	return v
+}
+
 func (ec *executionContext) unmarshalNString2string(ctx context.Context, v interface{}) (string, error) {
 	res, err := graphql.UnmarshalString(v)
 	return res, graphql.ErrorOnPath(ctx, err)
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 52b137a14..791480143 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -67,9 +67,20 @@ type GetDestinationDetailsResponse struct {
 	Fields []*Field `json:"fields"`
 }
 
+type InstrumentationLibrary struct {
+	LibraryName string                   `json:"libraryName"`
+	Options     []*InstrumentationOption `json:"options"`
+}
+
+type InstrumentationOption struct {
+	OptionKey string   `json:"optionKey"`
+	SpanKind  SpanKind `json:"spanKind"`
+}
+
 type InstrumentedApplicationDetails struct {
-	Containers []*SourceContainerRuntimeDetails `json:"containers,omitempty"`
-	Conditions []*Condition                     `json:"conditions,omitempty"`
+	Containers             []*SourceContainerRuntimeDetails `json:"containers,omitempty"`
+	Conditions             []*Condition                     `json:"conditions,omitempty"`
+	InstrumentationOptions []*InstrumentationLibrary        `json:"instrumentationOptions"`
 }
 
 type K8sActualNamespace struct {
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 82ea3820a..854fde6c1 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -49,9 +49,20 @@ type SourceContainerRuntimeDetails {
   language: String!
 }
 
+type InstrumentationOption {
+  optionKey: String!
+  spanKind: SpanKind!
+}
+
+type InstrumentationLibrary {
+  libraryName: String!
+  options: [InstrumentationOption!]!
+}
+
 type InstrumentedApplicationDetails {
   containers: [SourceContainerRuntimeDetails!]
   conditions: [Condition!]
+  instrumentationOptions: [InstrumentationLibrary!]!
 }
 
 type Condition {
@@ -222,6 +233,7 @@ type Query {
   destinationTypeDetails(type: String!): GetDestinationDetailsResponse
   potentialDestinations: [DestinationDetails!]!
   destinations: [Destination!]!
+  actualSources: [K8sActualSource]!
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 645fe17ed..0b7eda53e 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -351,6 +351,25 @@ func (r *queryResolver) Destinations(ctx context.Context) ([]*model.Destination,
 	return destinations, nil
 }
 
+// ActualSources is the resolver for the actualSources field.
+func (r *queryResolver) ActualSources(ctx context.Context) ([]*model.K8sActualSource, error) {
+	instrumentedApplications, err := kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	// Initialize an empty list of K8sActualSource
+	var actualSources []*model.K8sActualSource
+
+	// Convert each instrumented application to the K8sActualSource type
+	for _, app := range instrumentedApplications.Items {
+		actualSource := instrumentedApplicationToActualSource(app)
+		actualSources = append(actualSources, actualSource)
+	}
+
+	return actualSources, nil
+}
+
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
diff --git a/frontend/webapp/graphql/queries/index.ts b/frontend/webapp/graphql/queries/index.ts
index 498bd90f5..4869a93d6 100644
--- a/frontend/webapp/graphql/queries/index.ts
+++ b/frontend/webapp/graphql/queries/index.ts
@@ -1,3 +1,4 @@
 export * from './config';
 export * from './compute-platform';
 export * from './destination';
+export * from './sources';
diff --git a/frontend/webapp/graphql/queries/sources.ts b/frontend/webapp/graphql/queries/sources.ts
new file mode 100644
index 000000000..2ea59c0b0
--- /dev/null
+++ b/frontend/webapp/graphql/queries/sources.ts
@@ -0,0 +1,20 @@
+import { gql } from '@apollo/client';
+export const GET_SOURCES = gql`
+  query GetSources {
+    actualSources {
+      name
+      serviceName
+      instrumentedApplicationDetails {
+        containers {
+          language
+          containerName
+        }
+        conditions {
+          type
+          status
+          message
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/hooks/compute-platform/useConnectSources.ts b/frontend/webapp/hooks/compute-platform/useConnectSources.ts
deleted file mode 100644
index 67a3cad2d..000000000
--- a/frontend/webapp/hooks/compute-platform/useConnectSources.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// hooks/useConnectSources.ts
-import { useMutation } from '@apollo/client';
-import { useSelector, useDispatch } from 'react-redux';
-import { CREATE_SOURCE } from '@/graphql';
-import { IAppState, setSources } from '@/store';
-import { K8sActualSource } from '@/types';
-import { useComputePlatform } from './useComputePlatform';
-
-type UseConnectSourcesHook = {
-  createSources: (
-    namespace: string,
-    sources: K8sActualSource[]
-  ) => Promise<void>;
-  loading: boolean;
-  error?: Error;
-};
-
-export const useConnectSources = (): UseConnectSourcesHook => {
-  const [persistSourcesMutation, { loading, error }] =
-    useMutation(CREATE_SOURCE);
-  const dispatch = useDispatch();
-  const sources = useSelector(({ app }: { app: IAppState }) => app.sources);
-  const { data } = useComputePlatform();
-
-  const createSources = async (namespace: string) => {
-    try {
-      let formattedSources = [];
-      Object.keys(sources).forEach((key) => {
-        const newSources = {
-          sources: sources[key].map((source) => ({
-            name: source.name,
-            kind: source.kind,
-            selected: source.selected,
-          })),
-        };
-
-        formattedSources.push(newSources);
-      });
-      await persistSourcesMutation({
-        variables: { namespace, sources: formattedSources },
-      });
-    } catch (e) {
-      console.error('Error creating sources:', e);
-      throw e;
-    }
-  };
-
-  return {
-    createSources,
-    loading,
-    error,
-  };
-};
diff --git a/frontend/webapp/hooks/sources/index.ts b/frontend/webapp/hooks/sources/index.ts
index 465944209..be668afed 100644
--- a/frontend/webapp/hooks/sources/index.ts
+++ b/frontend/webapp/hooks/sources/index.ts
@@ -2,3 +2,4 @@ export * from './useSources';
 export * from './useConnectSourcesMenuState';
 export * from './useConnectSourcesList';
 export * from './useCreateSources';
+export * from './useActualSources';
diff --git a/frontend/webapp/hooks/sources/useActualSources.tsx b/frontend/webapp/hooks/sources/useActualSources.tsx
new file mode 100644
index 000000000..883c8c426
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useActualSources.tsx
@@ -0,0 +1,17 @@
+import { GET_SOURCES } from '@/graphql';
+import { ManagedSource } from '@/types';
+import { useQuery } from '@apollo/client';
+
+export function useActualSources() {
+  const { loading, error, data } = useQuery<{ actualSources: ManagedSource[] }>(
+    GET_SOURCES
+  );
+
+  return {
+    loading,
+    error,
+    sources: data?.actualSources || [],
+  };
+
+  return {};
+}

From 9c35d682fa6a6dcb8e7ce821725dca44ae73b68f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 15 Sep 2024 13:52:50 +0300
Subject: [PATCH 214/374] chore: query actions

---
 frontend/graph/generated.go                   | 345 ++++++++++++++++++
 frontend/graph/model/models_gen.go            |   6 +
 frontend/graph/schema.graphqls                |   7 +
 frontend/graph/schema.resolvers.go            | 127 +++++++
 frontend/webapp/graphql/queries/actions.ts    |  10 +
 .../graphql/queries/compute-platform.ts       |   5 +
 frontend/webapp/graphql/queries/index.ts      |   1 +
 frontend/webapp/hooks/actions/index.ts        |   1 +
 .../webapp/hooks/actions/useGetActions.ts     |  28 ++
 9 files changed, 530 insertions(+)
 create mode 100644 frontend/webapp/graphql/queries/actions.ts
 create mode 100644 frontend/webapp/hooks/actions/useGetActions.ts

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index df799aa48..8236f182d 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -124,6 +124,12 @@ type ComplexityRoot struct {
 		Categories func(childComplexity int) int
 	}
 
+	IcaInstanceResponse struct {
+		ID   func(childComplexity int) int
+		Spec func(childComplexity int) int
+		Type func(childComplexity int) int
+	}
+
 	InstrumentationLibrary struct {
 		LibraryName func(childComplexity int) int
 		Options     func(childComplexity int) int
@@ -169,6 +175,7 @@ type ComplexityRoot struct {
 	}
 
 	Query struct {
+		Actions                func(childComplexity int) int
 		ActualSources          func(childComplexity int) int
 		ComputePlatform        func(childComplexity int) int
 		Config                 func(childComplexity int) int
@@ -227,6 +234,7 @@ type QueryResolver interface {
 	PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error)
 	Destinations(ctx context.Context) ([]*model.Destination, error)
 	ActualSources(ctx context.Context) ([]*model.K8sActualSource, error)
+	Actions(ctx context.Context) ([]*model.IcaInstanceResponse, error)
 }
 
 type executableSchema struct {
@@ -545,6 +553,27 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.GetDestinationTypesResponse.Categories(childComplexity), true
 
+	case "IcaInstanceResponse.id":
+		if e.complexity.IcaInstanceResponse.ID == nil {
+			break
+		}
+
+		return e.complexity.IcaInstanceResponse.ID(childComplexity), true
+
+	case "IcaInstanceResponse.spec":
+		if e.complexity.IcaInstanceResponse.Spec == nil {
+			break
+		}
+
+		return e.complexity.IcaInstanceResponse.Spec(childComplexity), true
+
+	case "IcaInstanceResponse.type":
+		if e.complexity.IcaInstanceResponse.Type == nil {
+			break
+		}
+
+		return e.complexity.IcaInstanceResponse.Type(childComplexity), true
+
 	case "InstrumentationLibrary.libraryName":
 		if e.complexity.InstrumentationLibrary.LibraryName == nil {
 			break
@@ -731,6 +760,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
 
+	case "Query.actions":
+		if e.complexity.Query.Actions == nil {
+			break
+		}
+
+		return e.complexity.Query.Actions(childComplexity), true
+
 	case "Query.actualSources":
 		if e.complexity.Query.ActualSources == nil {
 			break
@@ -3110,6 +3146,138 @@ func (ec *executionContext) fieldContext_GetDestinationTypesResponse_categories(
 	return fc, nil
 }
 
+func (ec *executionContext) _IcaInstanceResponse_id(ctx context.Context, field graphql.CollectedField, obj *model.IcaInstanceResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_IcaInstanceResponse_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_IcaInstanceResponse_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "IcaInstanceResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _IcaInstanceResponse_type(ctx context.Context, field graphql.CollectedField, obj *model.IcaInstanceResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_IcaInstanceResponse_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_IcaInstanceResponse_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "IcaInstanceResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _IcaInstanceResponse_spec(ctx context.Context, field graphql.CollectedField, obj *model.IcaInstanceResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_IcaInstanceResponse_spec(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Spec, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_IcaInstanceResponse_spec(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "IcaInstanceResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _InstrumentationLibrary_libraryName(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationLibrary) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_InstrumentationLibrary_libraryName(ctx, field)
 	if err != nil {
@@ -4618,6 +4786,58 @@ func (ec *executionContext) fieldContext_Query_actualSources(_ context.Context,
 	return fc, nil
 }
 
+func (ec *executionContext) _Query_actions(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_actions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().Actions(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.IcaInstanceResponse)
+	fc.Result = res
+	return ec.marshalNIcaInstanceResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponseᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_actions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_IcaInstanceResponse_id(ctx, field)
+			case "type":
+				return ec.fieldContext_IcaInstanceResponse_type(ctx, field)
+			case "spec":
+				return ec.fieldContext_IcaInstanceResponse_spec(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type IcaInstanceResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
@@ -8002,6 +8222,55 @@ func (ec *executionContext) _GetDestinationTypesResponse(ctx context.Context, se
 	return out
 }
 
+var icaInstanceResponseImplementors = []string{"IcaInstanceResponse"}
+
+func (ec *executionContext) _IcaInstanceResponse(ctx context.Context, sel ast.SelectionSet, obj *model.IcaInstanceResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, icaInstanceResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("IcaInstanceResponse")
+		case "id":
+			out.Values[i] = ec._IcaInstanceResponse_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._IcaInstanceResponse_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "spec":
+			out.Values[i] = ec._IcaInstanceResponse_spec(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var instrumentationLibraryImplementors = []string{"InstrumentationLibrary"}
 
 func (ec *executionContext) _InstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationLibrary) graphql.Marshaler {
@@ -8544,6 +8813,28 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "actions":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_actions(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
@@ -9403,6 +9694,60 @@ func (ec *executionContext) marshalNID2string(ctx context.Context, sel ast.Selec
 	return res
 }
 
+func (ec *executionContext) marshalNIcaInstanceResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponseᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.IcaInstanceResponse) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNIcaInstanceResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponse(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNIcaInstanceResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponse(ctx context.Context, sel ast.SelectionSet, v *model.IcaInstanceResponse) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._IcaInstanceResponse(ctx, sel, v)
+}
+
 func (ec *executionContext) unmarshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx context.Context, v interface{}) (model.InstallationStatus, error) {
 	var res model.InstallationStatus
 	err := res.UnmarshalGQL(v)
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 791480143..d9117ccc0 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -67,6 +67,12 @@ type GetDestinationDetailsResponse struct {
 	Fields []*Field `json:"fields"`
 }
 
+type IcaInstanceResponse struct {
+	ID   string `json:"id"`
+	Type string `json:"type"`
+	Spec string `json:"spec"`
+}
+
 type InstrumentationLibrary struct {
 	LibraryName string                   `json:"libraryName"`
 	Options     []*InstrumentationOption `json:"options"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 854fde6c1..d22e1f545 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -226,6 +226,12 @@ type DestinationDetails {
   fields: String!
 }
 
+type IcaInstanceResponse {
+  id: String!
+  type: String!
+  spec: String!
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
@@ -234,6 +240,7 @@ type Query {
   potentialDestinations: [DestinationDetails!]!
   destinations: [Destination!]!
   actualSources: [K8sActualSource]!
+  actions: [IcaInstanceResponse!]!
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 0b7eda53e..badcc6ba6 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -370,6 +370,133 @@ func (r *queryResolver) ActualSources(ctx context.Context) ([]*model.K8sActualSo
 	return actualSources, nil
 }
 
+// Actions is the resolver for the actions field.
+func (r *queryResolver) Actions(ctx context.Context) ([]*model.IcaInstanceResponse, error) {
+	var response []*model.IcaInstanceResponse
+	odigosns := consts.DefaultOdigosNamespace
+
+	// AddClusterInfos actions
+	icaActions, err := kube.DefaultClient.ActionsClient.AddClusterInfos(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range icaActions.Items {
+		specStr, err := json.Marshal(action.Spec) // Convert spec to JSON string
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr), // Return the JSON string
+		})
+	}
+
+	// DeleteAttributes actions
+	daActions, err := kube.DefaultClient.ActionsClient.DeleteAttributes(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range daActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// RenameAttributes actions
+	raActions, err := kube.DefaultClient.ActionsClient.RenameAttributes(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range raActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// ErrorSamplers actions
+	esActions, err := kube.DefaultClient.ActionsClient.ErrorSamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range esActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// LatencySamplers actions
+	lsActions, err := kube.DefaultClient.ActionsClient.LatencySamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range lsActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// ProbabilisticSamplers actions
+	psActions, err := kube.DefaultClient.ActionsClient.ProbabilisticSamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range psActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// PiiMaskings actions
+	piActions, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range piActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	return response, nil
+}
+
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
diff --git a/frontend/webapp/graphql/queries/actions.ts b/frontend/webapp/graphql/queries/actions.ts
new file mode 100644
index 000000000..cf56f4828
--- /dev/null
+++ b/frontend/webapp/graphql/queries/actions.ts
@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+export const GET_ACTIONS = gql`
+  query GetActions {
+    actions {
+      id
+      type
+      spec
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 5866e2ff1..2c64df2ae 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -10,6 +10,11 @@ export const GET_COMPUTE_PLATFORM = gql`
           kind
           name
           numberOfInstances
+          instrumentedApplicationDetails {
+            conditions {
+              status
+            }
+          }
         }
       }
     }
diff --git a/frontend/webapp/graphql/queries/index.ts b/frontend/webapp/graphql/queries/index.ts
index 4869a93d6..9d9821358 100644
--- a/frontend/webapp/graphql/queries/index.ts
+++ b/frontend/webapp/graphql/queries/index.ts
@@ -2,3 +2,4 @@ export * from './config';
 export * from './compute-platform';
 export * from './destination';
 export * from './sources';
+export * from './actions';
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 292f46b54..7fd95ef9d 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,2 +1,3 @@
 export * from './useActionState';
 export * from './useActions';
+export * from './useGetActions';
diff --git a/frontend/webapp/hooks/actions/useGetActions.ts b/frontend/webapp/hooks/actions/useGetActions.ts
new file mode 100644
index 000000000..7dd0ee166
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useGetActions.ts
@@ -0,0 +1,28 @@
+import { GET_ACTIONS } from '@/graphql';
+import { useQuery } from '@apollo/client';
+
+// Define the type for an individual action
+interface IcaInstanceResponse {
+  id: string;
+  type: string;
+  spec: string; // The spec is returned as a JSON string
+}
+
+// Define the response type for the query
+interface GetActionsData {
+  actions: IcaInstanceResponse[];
+}
+
+// Define the hook
+export const useGetActions = () => {
+  // Use Apollo's useQuery hook to fetch the actions
+  const { loading, error, data, refetch } =
+    useQuery<GetActionsData>(GET_ACTIONS);
+
+  return {
+    actions: data?.actions || [], // Return the actions or an empty array if not available
+    loading, // Return the loading state
+    error, // Return the error state
+    refetch, // Function to refetch the data manually if needed
+  };
+};

From 7099ef95062ec35501347ca2d42a1b6da3a0db0f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 15 Sep 2024 15:01:54 +0300
Subject: [PATCH 215/374] chore: insert destinations and action to cp and
 create resolvers

---
 frontend/gqlgen.yml                |   4 +
 frontend/graph/generated.go        | 434 ++++++++++++++---------------
 frontend/graph/model/models_gen.go |  13 +-
 frontend/graph/schema.graphqls     |   5 +-
 frontend/graph/schema.resolvers.go | 300 ++++++++++----------
 5 files changed, 370 insertions(+), 386 deletions(-)

diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
index c4161c003..53c4fc46a 100644
--- a/frontend/gqlgen.yml
+++ b/frontend/gqlgen.yml
@@ -48,6 +48,10 @@ models:
         resolver: true
       k8sActualSource:
         resolver: true
+      destinations:
+        resolver: true
+      actions:
+        resolver: true
   K8sActualNamespace:
     fields:
       k8sActualSources:
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 8236f182d..ba50a7bed 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -51,12 +51,13 @@ type DirectiveRoot struct {
 
 type ComplexityRoot struct {
 	ComputePlatform struct {
+		Actions             func(childComplexity int) int
 		ComputePlatformType func(childComplexity int) int
+		Destinations        func(childComplexity int) int
 		K8sActualNamespace  func(childComplexity int, name string) int
 		K8sActualNamespaces func(childComplexity int) int
 		K8sActualSource     func(childComplexity int, name *string, namespace *string, kind *string) int
 		K8sActualSources    func(childComplexity int) int
-		Name                func(childComplexity int) int
 	}
 
 	Condition struct {
@@ -175,13 +176,11 @@ type ComplexityRoot struct {
 	}
 
 	Query struct {
-		Actions                func(childComplexity int) int
 		ActualSources          func(childComplexity int) int
 		ComputePlatform        func(childComplexity int) int
 		Config                 func(childComplexity int) int
 		DestinationTypeDetails func(childComplexity int, typeArg string) int
 		DestinationTypes       func(childComplexity int) int
-		Destinations           func(childComplexity int) int
 		PotentialDestinations  func(childComplexity int) int
 	}
 
@@ -209,6 +208,9 @@ type ComputePlatformResolver interface {
 	K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error)
 
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
+
+	Destinations(ctx context.Context, obj *model.ComputePlatform) ([]*model.Destination, error)
+	Actions(ctx context.Context, obj *model.ComputePlatform) ([]*model.IcaInstanceResponse, error)
 }
 type DestinationResolver interface {
 	Type(ctx context.Context, obj *model.Destination) (string, error)
@@ -232,9 +234,7 @@ type QueryResolver interface {
 	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
 	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
 	PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error)
-	Destinations(ctx context.Context) ([]*model.Destination, error)
 	ActualSources(ctx context.Context) ([]*model.K8sActualSource, error)
-	Actions(ctx context.Context) ([]*model.IcaInstanceResponse, error)
 }
 
 type executableSchema struct {
@@ -256,6 +256,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 	_ = ec
 	switch typeName + "." + field {
 
+	case "ComputePlatform.actions":
+		if e.complexity.ComputePlatform.Actions == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.Actions(childComplexity), true
+
 	case "ComputePlatform.computePlatformType":
 		if e.complexity.ComputePlatform.ComputePlatformType == nil {
 			break
@@ -263,6 +270,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ComputePlatform.ComputePlatformType(childComplexity), true
 
+	case "ComputePlatform.destinations":
+		if e.complexity.ComputePlatform.Destinations == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.Destinations(childComplexity), true
+
 	case "ComputePlatform.k8sActualNamespace":
 		if e.complexity.ComputePlatform.K8sActualNamespace == nil {
 			break
@@ -301,13 +315,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ComputePlatform.K8sActualSources(childComplexity), true
 
-	case "ComputePlatform.name":
-		if e.complexity.ComputePlatform.Name == nil {
-			break
-		}
-
-		return e.complexity.ComputePlatform.Name(childComplexity), true
-
 	case "Condition.lastTransitionTime":
 		if e.complexity.Condition.LastTransitionTime == nil {
 			break
@@ -760,13 +767,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
 
-	case "Query.actions":
-		if e.complexity.Query.Actions == nil {
-			break
-		}
-
-		return e.complexity.Query.Actions(childComplexity), true
-
 	case "Query.actualSources":
 		if e.complexity.Query.ActualSources == nil {
 			break
@@ -807,13 +807,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.DestinationTypes(childComplexity), true
 
-	case "Query.destinations":
-		if e.complexity.Query.Destinations == nil {
-			break
-		}
-
-		return e.complexity.Query.Destinations(childComplexity), true
-
 	case "Query.potentialDestinations":
 		if e.complexity.Query.PotentialDestinations == nil {
 			break
@@ -1224,47 +1217,6 @@ func (ec *executionContext) field___Type_fields_args(ctx context.Context, rawArg
 
 // region    **************************** field.gotpl *****************************
 
-func (ec *executionContext) _ComputePlatform_name(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_name(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		return graphql.Null
-	}
-	res := resTmp.(*string)
-	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_ComputePlatform_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
-		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
 	if err != nil {
@@ -1553,6 +1505,118 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ cont
 	return fc, nil
 }
 
+func (ec *executionContext) _ComputePlatform_destinations(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_destinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().Destinations(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_actions(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_actions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().Actions(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.IcaInstanceResponse)
+	fc.Result = res
+	return ec.marshalNIcaInstanceResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponseᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_actions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_IcaInstanceResponse_id(ctx, field)
+			case "type":
+				return ec.fieldContext_IcaInstanceResponse_type(ctx, field)
+			case "spec":
+				return ec.fieldContext_IcaInstanceResponse_spec(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type IcaInstanceResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Condition_type(ctx, field)
 	if err != nil {
@@ -4447,8 +4511,6 @@ func (ec *executionContext) fieldContext_Query_computePlatform(_ context.Context
 		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "name":
-				return ec.fieldContext_ComputePlatform_name(ctx, field)
 			case "computePlatformType":
 				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
 			case "k8sActualNamespace":
@@ -4459,6 +4521,10 @@ func (ec *executionContext) fieldContext_Query_computePlatform(_ context.Context
 				return ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
 			case "k8sActualSources":
 				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+			case "destinations":
+				return ec.fieldContext_ComputePlatform_destinations(ctx, field)
+			case "actions":
+				return ec.fieldContext_ComputePlatform_actions(ctx, field)
 			}
 			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
 		},
@@ -4664,66 +4730,6 @@ func (ec *executionContext) fieldContext_Query_potentialDestinations(_ context.C
 	return fc, nil
 }
 
-func (ec *executionContext) _Query_destinations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_destinations(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().Destinations(rctx)
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]*model.Destination)
-	fc.Result = res
-	return ec.marshalNDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_Destination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_Destination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_Destination_type(ctx, field)
-			case "exportedSignals":
-				return ec.fieldContext_Destination_exportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_Destination_fields(ctx, field)
-			case "destinationType":
-				return ec.fieldContext_Destination_destinationType(ctx, field)
-			case "conditions":
-				return ec.fieldContext_Destination_conditions(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _Query_actualSources(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query_actualSources(ctx, field)
 	if err != nil {
@@ -4786,58 +4792,6 @@ func (ec *executionContext) fieldContext_Query_actualSources(_ context.Context,
 	return fc, nil
 }
 
-func (ec *executionContext) _Query_actions(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_actions(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().Actions(rctx)
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]*model.IcaInstanceResponse)
-	fc.Result = res
-	return ec.marshalNIcaInstanceResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponseᚄ(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query_actions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_IcaInstanceResponse_id(ctx, field)
-			case "type":
-				return ec.fieldContext_IcaInstanceResponse_type(ctx, field)
-			case "spec":
-				return ec.fieldContext_IcaInstanceResponse_spec(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type IcaInstanceResponse", field.Name)
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
@@ -7529,8 +7483,6 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 		switch field.Name {
 		case "__typename":
 			out.Values[i] = graphql.MarshalString("ComputePlatform")
-		case "name":
-			out.Values[i] = ec._ComputePlatform_name(ctx, field, obj)
 		case "computePlatformType":
 			out.Values[i] = ec._ComputePlatform_computePlatformType(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
@@ -7612,6 +7564,78 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 			if out.Values[i] == graphql.Null {
 				atomic.AddUint32(&out.Invalids, 1)
 			}
+		case "destinations":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_destinations(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "actions":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_actions(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8769,28 +8793,6 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
-		case "destinations":
-			field := field
-
-			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Query_destinations(ctx, field)
-				if res == graphql.Null {
-					atomic.AddUint32(&fs.Invalids, 1)
-				}
-				return res
-			}
-
-			rrm := func(ctx context.Context) graphql.Marshaler {
-				return ec.OperationContext.RootResolverMiddleware(ctx,
-					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-			}
-
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "actualSources":
 			field := field
@@ -8813,28 +8815,6 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
-		case "actions":
-			field := field
-
-			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Query_actions(ctx, field)
-				if res == graphql.Null {
-					atomic.AddUint32(&fs.Invalids, 1)
-				}
-				return res
-			}
-
-			rrm := func(ctx context.Context) graphql.Marshaler {
-				return ec.OperationContext.RootResolverMiddleware(ctx,
-					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-			}
-
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index d9117ccc0..abb004824 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -9,12 +9,13 @@ import (
 )
 
 type ComputePlatform struct {
-	Name                *string               `json:"name,omitempty"`
-	ComputePlatformType ComputePlatformType   `json:"computePlatformType"`
-	K8sActualNamespace  *K8sActualNamespace   `json:"k8sActualNamespace,omitempty"`
-	K8sActualNamespaces []*K8sActualNamespace `json:"k8sActualNamespaces"`
-	K8sActualSource     *K8sActualSource      `json:"k8sActualSource,omitempty"`
-	K8sActualSources    []*K8sActualSource    `json:"k8sActualSources"`
+	ComputePlatformType ComputePlatformType    `json:"computePlatformType"`
+	K8sActualNamespace  *K8sActualNamespace    `json:"k8sActualNamespace,omitempty"`
+	K8sActualNamespaces []*K8sActualNamespace  `json:"k8sActualNamespaces"`
+	K8sActualSource     *K8sActualSource       `json:"k8sActualSource,omitempty"`
+	K8sActualSources    []*K8sActualSource     `json:"k8sActualSources"`
+	Destinations        []*Destination         `json:"destinations"`
+	Actions             []*IcaInstanceResponse `json:"actions"`
 }
 
 type Condition struct {
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index d22e1f545..c560e10ad 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -110,7 +110,6 @@ input K8sSourceId {
 }
 
 type ComputePlatform {
-  name: String
   computePlatformType: ComputePlatformType!
   k8sActualNamespace(name: String!): K8sActualNamespace
   k8sActualNamespaces: [K8sActualNamespace]!
@@ -120,6 +119,8 @@ type ComputePlatform {
     kind: String
   ): K8sActualSource
   k8sActualSources: [K8sActualSource]!
+  destinations: [Destination!]!
+  actions: [IcaInstanceResponse!]!
 }
 
 type SupportedSignals {
@@ -238,9 +239,7 @@ type Query {
   destinationTypes: GetDestinationTypesResponse
   destinationTypeDetails(type: String!): GetDestinationDetailsResponse
   potentialDestinations: [DestinationDetails!]!
-  destinations: [Destination!]!
   actualSources: [K8sActualSource]!
-  actions: [IcaInstanceResponse!]!
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index badcc6ba6..488b0b765 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -63,6 +63,156 @@ func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *mode
 	return k8sActualSource, nil
 }
 
+// Destinations is the resolver for the destinations field.
+func (r *computePlatformResolver) Destinations(ctx context.Context, obj *model.ComputePlatform) ([]*model.Destination, error) {
+	odigosns := consts.DefaultOdigosNamespace
+	dests, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	var destinations []*model.Destination
+	for _, dest := range dests.Items {
+		secretFields, err := services.GetDestinationSecretFields(ctx, odigosns, &dest)
+		if err != nil {
+			return nil, err
+		}
+
+		// Convert the k8s destination format to the expected endpoint format
+		endpointDest := services.K8sDestinationToEndpointFormat(dest, secretFields)
+		destinations = append(destinations, &endpointDest)
+	}
+
+	return destinations, nil
+}
+
+// Actions is the resolver for the actions field.
+func (r *computePlatformResolver) Actions(ctx context.Context, obj *model.ComputePlatform) ([]*model.IcaInstanceResponse, error) {
+	var response []*model.IcaInstanceResponse
+	odigosns := consts.DefaultOdigosNamespace
+
+	// AddClusterInfos actions
+	icaActions, err := kube.DefaultClient.ActionsClient.AddClusterInfos(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range icaActions.Items {
+		specStr, err := json.Marshal(action.Spec) // Convert spec to JSON string
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr), // Return the JSON string
+		})
+	}
+
+	// DeleteAttributes actions
+	daActions, err := kube.DefaultClient.ActionsClient.DeleteAttributes(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range daActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// RenameAttributes actions
+	raActions, err := kube.DefaultClient.ActionsClient.RenameAttributes(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range raActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// ErrorSamplers actions
+	esActions, err := kube.DefaultClient.ActionsClient.ErrorSamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range esActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// LatencySamplers actions
+	lsActions, err := kube.DefaultClient.ActionsClient.LatencySamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range lsActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// ProbabilisticSamplers actions
+	psActions, err := kube.DefaultClient.ActionsClient.ProbabilisticSamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range psActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// PiiMaskings actions
+	piActions, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range piActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	return response, nil
+}
+
 // Type is the resolver for the type field.
 func (r *destinationResolver) Type(ctx context.Context, obj *model.Destination) (string, error) {
 	panic(fmt.Errorf("not implemented: Type - type"))
@@ -328,29 +478,6 @@ func (r *queryResolver) PotentialDestinations(ctx context.Context) ([]*model.Des
 	return result, nil
 }
 
-// Destinations is the resolver for the destinations field.
-func (r *queryResolver) Destinations(ctx context.Context) ([]*model.Destination, error) {
-	odigosns := consts.DefaultOdigosNamespace
-	dests, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-
-	var destinations []*model.Destination
-	for _, dest := range dests.Items {
-		secretFields, err := services.GetDestinationSecretFields(ctx, odigosns, &dest)
-		if err != nil {
-			return nil, err
-		}
-
-		// Convert the k8s destination format to the expected endpoint format
-		endpointDest := services.K8sDestinationToEndpointFormat(dest, secretFields)
-		destinations = append(destinations, &endpointDest)
-	}
-
-	return destinations, nil
-}
-
 // ActualSources is the resolver for the actualSources field.
 func (r *queryResolver) ActualSources(ctx context.Context) ([]*model.K8sActualSource, error) {
 	instrumentedApplications, err := kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
@@ -370,133 +497,6 @@ func (r *queryResolver) ActualSources(ctx context.Context) ([]*model.K8sActualSo
 	return actualSources, nil
 }
 
-// Actions is the resolver for the actions field.
-func (r *queryResolver) Actions(ctx context.Context) ([]*model.IcaInstanceResponse, error) {
-	var response []*model.IcaInstanceResponse
-	odigosns := consts.DefaultOdigosNamespace
-
-	// AddClusterInfos actions
-	icaActions, err := kube.DefaultClient.ActionsClient.AddClusterInfos(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-	for _, action := range icaActions.Items {
-		specStr, err := json.Marshal(action.Spec) // Convert spec to JSON string
-		if err != nil {
-			return nil, err
-		}
-		response = append(response, &model.IcaInstanceResponse{
-			ID:   action.Name,
-			Type: action.Kind,
-			Spec: string(specStr), // Return the JSON string
-		})
-	}
-
-	// DeleteAttributes actions
-	daActions, err := kube.DefaultClient.ActionsClient.DeleteAttributes(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-	for _, action := range daActions.Items {
-		specStr, err := json.Marshal(action.Spec)
-		if err != nil {
-			return nil, err
-		}
-		response = append(response, &model.IcaInstanceResponse{
-			ID:   action.Name,
-			Type: action.Kind,
-			Spec: string(specStr),
-		})
-	}
-
-	// RenameAttributes actions
-	raActions, err := kube.DefaultClient.ActionsClient.RenameAttributes(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-	for _, action := range raActions.Items {
-		specStr, err := json.Marshal(action.Spec)
-		if err != nil {
-			return nil, err
-		}
-		response = append(response, &model.IcaInstanceResponse{
-			ID:   action.Name,
-			Type: action.Kind,
-			Spec: string(specStr),
-		})
-	}
-
-	// ErrorSamplers actions
-	esActions, err := kube.DefaultClient.ActionsClient.ErrorSamplers(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-	for _, action := range esActions.Items {
-		specStr, err := json.Marshal(action.Spec)
-		if err != nil {
-			return nil, err
-		}
-		response = append(response, &model.IcaInstanceResponse{
-			ID:   action.Name,
-			Type: action.Kind,
-			Spec: string(specStr),
-		})
-	}
-
-	// LatencySamplers actions
-	lsActions, err := kube.DefaultClient.ActionsClient.LatencySamplers(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-	for _, action := range lsActions.Items {
-		specStr, err := json.Marshal(action.Spec)
-		if err != nil {
-			return nil, err
-		}
-		response = append(response, &model.IcaInstanceResponse{
-			ID:   action.Name,
-			Type: action.Kind,
-			Spec: string(specStr),
-		})
-	}
-
-	// ProbabilisticSamplers actions
-	psActions, err := kube.DefaultClient.ActionsClient.ProbabilisticSamplers(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-	for _, action := range psActions.Items {
-		specStr, err := json.Marshal(action.Spec)
-		if err != nil {
-			return nil, err
-		}
-		response = append(response, &model.IcaInstanceResponse{
-			ID:   action.Name,
-			Type: action.Kind,
-			Spec: string(specStr),
-		})
-	}
-
-	// PiiMaskings actions
-	piActions, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-	for _, action := range piActions.Items {
-		specStr, err := json.Marshal(action.Spec)
-		if err != nil {
-			return nil, err
-		}
-		response = append(response, &model.IcaInstanceResponse{
-			ID:   action.Name,
-			Type: action.Kind,
-			Spec: string(specStr),
-		})
-	}
-
-	return response, nil
-}
-
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 

From a64109846e01c020b06854570a6b9f619a8d5027 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 15 Sep 2024 15:10:14 +0300
Subject: [PATCH 216/374] chore: insert actual source to cp

---
 frontend/gqlgen.yml                           |   2 +
 frontend/graph/generated.go                   | 138 +++++-------------
 frontend/graph/schema.graphqls                |   1 -
 frontend/graph/schema.resolvers.go            |  38 ++---
 frontend/webapp/app/main/layout.tsx           |  16 +-
 .../graphql/queries/compute-platform.ts       |   3 +
 6 files changed, 76 insertions(+), 122 deletions(-)

diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
index 53c4fc46a..ca2bbb115 100644
--- a/frontend/gqlgen.yml
+++ b/frontend/gqlgen.yml
@@ -52,6 +52,8 @@ models:
         resolver: true
       actions:
         resolver: true
+      k8sActualSources:
+        resolver: true
   K8sActualNamespace:
     fields:
       k8sActualSources:
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index ba50a7bed..7b6fcb4cd 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -176,7 +176,6 @@ type ComplexityRoot struct {
 	}
 
 	Query struct {
-		ActualSources          func(childComplexity int) int
 		ComputePlatform        func(childComplexity int) int
 		Config                 func(childComplexity int) int
 		DestinationTypeDetails func(childComplexity int, typeArg string) int
@@ -208,7 +207,7 @@ type ComputePlatformResolver interface {
 	K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error)
 
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
-
+	K8sActualSources(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualSource, error)
 	Destinations(ctx context.Context, obj *model.ComputePlatform) ([]*model.Destination, error)
 	Actions(ctx context.Context, obj *model.ComputePlatform) ([]*model.IcaInstanceResponse, error)
 }
@@ -234,7 +233,6 @@ type QueryResolver interface {
 	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
 	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
 	PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error)
-	ActualSources(ctx context.Context) ([]*model.K8sActualSource, error)
 }
 
 type executableSchema struct {
@@ -767,13 +765,6 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
 
-	case "Query.actualSources":
-		if e.complexity.Query.ActualSources == nil {
-			break
-		}
-
-		return e.complexity.Query.ActualSources(childComplexity), true
-
 	case "Query.computePlatform":
 		if e.complexity.Query.ComputePlatform == nil {
 			break
@@ -1457,7 +1448,7 @@ func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.K8sActualSources, nil
+		return ec.resolvers.ComputePlatform().K8sActualSources(rctx, obj)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1478,8 +1469,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ cont
 	fc = &graphql.FieldContext{
 		Object:     "ComputePlatform",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
 			case "namespace":
@@ -4730,68 +4721,6 @@ func (ec *executionContext) fieldContext_Query_potentialDestinations(_ context.C
 	return fc, nil
 }
 
-func (ec *executionContext) _Query_actualSources(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Query_actualSources(ctx, field)
-	if err != nil {
-		return graphql.Null
-	}
-	ctx = graphql.WithFieldContext(ctx, fc)
-	defer func() {
-		if r := recover(); r != nil {
-			ec.Error(ctx, ec.Recover(ctx, r))
-			ret = graphql.Null
-		}
-	}()
-	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
-		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Query().ActualSources(rctx)
-	})
-	if err != nil {
-		ec.Error(ctx, err)
-		return graphql.Null
-	}
-	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
-		return graphql.Null
-	}
-	res := resTmp.([]*model.K8sActualSource)
-	fc.Result = res
-	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
-}
-
-func (ec *executionContext) fieldContext_Query_actualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
-	fc = &graphql.FieldContext{
-		Object:     "Query",
-		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
-		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "namespace":
-				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
-			case "kind":
-				return ec.fieldContext_K8sActualSource_kind(ctx, field)
-			case "name":
-				return ec.fieldContext_K8sActualSource_name(ctx, field)
-			case "serviceName":
-				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "numberOfInstances":
-				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "autoInstrumentedDecision":
-				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
-			case "instrumentedApplicationDetails":
-				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
-		},
-	}
-	return fc, nil
-}
-
 func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
@@ -7560,10 +7489,41 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "k8sActualSources":
-			out.Values[i] = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
 			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "destinations":
 			field := field
 
@@ -8793,28 +8753,6 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
-		case "actualSources":
-			field := field
-
-			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Query_actualSources(ctx, field)
-				if res == graphql.Null {
-					atomic.AddUint32(&fs.Invalids, 1)
-				}
-				return res
-			}
-
-			rrm := func(ctx context.Context) graphql.Marshaler {
-				return ec.OperationContext.RootResolverMiddleware(ctx,
-					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-			}
-
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index c560e10ad..fec8b9063 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -239,7 +239,6 @@ type Query {
   destinationTypes: GetDestinationTypesResponse
   destinationTypeDetails(type: String!): GetDestinationDetailsResponse
   potentialDestinations: [DestinationDetails!]!
-  actualSources: [K8sActualSource]!
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 488b0b765..dafb8b816 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -63,6 +63,25 @@ func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *mode
 	return k8sActualSource, nil
 }
 
+// K8sActualSources is the resolver for the k8sActualSources field.
+func (r *computePlatformResolver) K8sActualSources(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualSource, error) {
+	instrumentedApplications, err := kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	// Initialize an empty list of K8sActualSource
+	var actualSources []*model.K8sActualSource
+
+	// Convert each instrumented application to the K8sActualSource type
+	for _, app := range instrumentedApplications.Items {
+		actualSource := instrumentedApplicationToActualSource(app)
+		actualSources = append(actualSources, actualSource)
+	}
+
+	return actualSources, nil
+}
+
 // Destinations is the resolver for the destinations field.
 func (r *computePlatformResolver) Destinations(ctx context.Context, obj *model.ComputePlatform) ([]*model.Destination, error) {
 	odigosns := consts.DefaultOdigosNamespace
@@ -478,25 +497,6 @@ func (r *queryResolver) PotentialDestinations(ctx context.Context) ([]*model.Des
 	return result, nil
 }
 
-// ActualSources is the resolver for the actualSources field.
-func (r *queryResolver) ActualSources(ctx context.Context) ([]*model.K8sActualSource, error) {
-	instrumentedApplications, err := kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return nil, err
-	}
-
-	// Initialize an empty list of K8sActualSource
-	var actualSources []*model.K8sActualSource
-
-	// Convert each instrumented application to the K8sActualSource type
-	for _, app := range instrumentedApplications.Items {
-		actualSource := instrumentedApplicationToActualSource(app)
-		actualSources = append(actualSources, actualSource)
-	}
-
-	return actualSources, nil
-}
-
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
diff --git a/frontend/webapp/app/main/layout.tsx b/frontend/webapp/app/main/layout.tsx
index 219352c92..1acec4b72 100644
--- a/frontend/webapp/app/main/layout.tsx
+++ b/frontend/webapp/app/main/layout.tsx
@@ -1,7 +1,9 @@
 'use client';
-import { MainHeader } from '@/components';
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import { MainHeader } from '@/components';
+import { useActualSources, useComputePlatform, useGetActions } from '@/hooks';
+import { useActualDestination } from '@/hooks/destinations/useActualDestinations';
 
 const LayoutContainer = styled.div`
   width: 100%;
@@ -25,6 +27,16 @@ export default function MainLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const { data } = useComputePlatform();
+  const { actions } = useGetActions();
+  const { sources } = useActualSources();
+  const { destinations } = useActualDestination();
+
+  useEffect(() => {
+    if (data || destinations) {
+      console.log('data', actions, sources, destinations, data);
+    }
+  }, [destinations, data, actions, sources]);
   return (
     <LayoutContainer>
       <MainContent>
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 2c64df2ae..c5e793b48 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -4,6 +4,9 @@ export const GET_COMPUTE_PLATFORM = gql`
   query GetComputePlatform {
     computePlatform {
       name
+      k8sActualSources {
+        name
+      }
       k8sActualNamespaces {
         name
         k8sActualSources {

From c60eb18b765604eb8f3fc5479ef43c1a3968bca5 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 15 Sep 2024 15:27:11 +0300
Subject: [PATCH 217/374] chore: generate resolver for cp namespaces

---
 frontend/gqlgen.yml                |  2 ++
 frontend/graph/generated.go        | 45 +++++++++++++++++++++++++-----
 frontend/graph/schema.resolvers.go | 41 +++++++++++++++------------
 3 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
index ca2bbb115..7212cc7cb 100644
--- a/frontend/gqlgen.yml
+++ b/frontend/gqlgen.yml
@@ -46,6 +46,8 @@ models:
     fields:
       k8sActualNamespace:
         resolver: true
+      k8sActualNamespaces:
+        resolver: true
       k8sActualSource:
         resolver: true
       destinations:
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 7b6fcb4cd..45a71b256 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -205,7 +205,7 @@ type ComplexityRoot struct {
 
 type ComputePlatformResolver interface {
 	K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error)
-
+	K8sActualNamespaces(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualNamespace, error)
 	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
 	K8sActualSources(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualSource, error)
 	Destinations(ctx context.Context, obj *model.ComputePlatform) ([]*model.Destination, error)
@@ -1326,7 +1326,7 @@ func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.K8sActualNamespaces, nil
+		return ec.resolvers.ComputePlatform().K8sActualNamespaces(rctx, obj)
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1347,8 +1347,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ c
 	fc = &graphql.FieldContext{
 		Object:     "ComputePlatform",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
 			case "name":
@@ -7451,10 +7451,41 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "k8sActualNamespaces":
-			out.Values[i] = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				atomic.AddUint32(&out.Invalids, 1)
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
 			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "k8sActualSource":
 			field := field
 
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index dafb8b816..f71eeb055 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -49,6 +49,29 @@ func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *m
 	}, nil
 }
 
+// K8sActualNamespaces is the resolver for the k8sActualNamespaces field.
+func (r *computePlatformResolver) K8sActualNamespaces(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualNamespace, error) {
+	namespacesResponse := services.GetK8SNamespaces(ctx)
+
+	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
+	for i, namespace := range namespacesResponse.Namespaces {
+
+		namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, namespace.Name, metav1.GetOptions{})
+		if err != nil {
+			return nil, err
+		}
+
+		nsInstrumented := workload.GetInstrumentationLabelValue(namespace.GetLabels())
+
+		K8sActualNamespaces[i] = &model.K8sActualNamespace{
+			Name:                        namespace.Name,
+			InstrumentationLabelEnabled: nsInstrumented,
+		}
+	}
+
+	return K8sActualNamespaces, nil
+}
+
 // K8sActualSource is the resolver for the k8sActualSource field.
 func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error) {
 	source, err := services.GetActualSource(ctx, *namespace, *kind, *name)
@@ -402,27 +425,9 @@ func (r *mutationResolver) TestConnectionForDestination(ctx context.Context, des
 
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
-	namespacesResponse := services.GetK8SNamespaces(ctx)
-
-	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
-	for i, namespace := range namespacesResponse.Namespaces {
-
-		namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, namespace.Name, metav1.GetOptions{})
-		if err != nil {
-			return nil, err
-		}
-
-		nsInstrumented := workload.GetInstrumentationLabelValue(namespace.GetLabels())
-
-		K8sActualNamespaces[i] = &model.K8sActualNamespace{
-			Name:                        namespace.Name,
-			InstrumentationLabelEnabled: nsInstrumented,
-		}
-	}
 
 	return &model.ComputePlatform{
 		ComputePlatformType: model.ComputePlatformTypeK8s,
-		K8sActualNamespaces: K8sActualNamespaces,
 	}, nil
 }
 

From 65ebab8c29790c416cd485212c6c2ec20eb0aa65 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 15 Sep 2024 16:10:47 +0300
Subject: [PATCH 218/374] chore: change api to new schema and delete unused
 files

---
 frontend/webapp/app/main/layout.tsx           | 14 +--------
 frontend/webapp/graphql/queries/actions.ts    | 10 -------
 .../graphql/queries/compute-platform.ts       |  7 ++++-
 .../webapp/graphql/queries/destination.ts     | 30 -------------------
 frontend/webapp/graphql/queries/index.ts      |  2 --
 frontend/webapp/graphql/queries/sources.ts    | 20 -------------
 .../webapp/hooks/actions/useGetActions.ts     | 24 ++-------------
 .../destinations/useActualDestinations.ts     | 12 ++------
 .../webapp/hooks/sources/useActualSources.tsx | 14 ++-------
 frontend/webapp/types/compute-platform.ts     |  5 ++++
 10 files changed, 21 insertions(+), 117 deletions(-)
 delete mode 100644 frontend/webapp/graphql/queries/actions.ts
 delete mode 100644 frontend/webapp/graphql/queries/sources.ts

diff --git a/frontend/webapp/app/main/layout.tsx b/frontend/webapp/app/main/layout.tsx
index 1acec4b72..f6eecf660 100644
--- a/frontend/webapp/app/main/layout.tsx
+++ b/frontend/webapp/app/main/layout.tsx
@@ -1,9 +1,7 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { MainHeader } from '@/components';
-import { useActualSources, useComputePlatform, useGetActions } from '@/hooks';
-import { useActualDestination } from '@/hooks/destinations/useActualDestinations';
 
 const LayoutContainer = styled.div`
   width: 100%;
@@ -27,16 +25,6 @@ export default function MainLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const { data } = useComputePlatform();
-  const { actions } = useGetActions();
-  const { sources } = useActualSources();
-  const { destinations } = useActualDestination();
-
-  useEffect(() => {
-    if (data || destinations) {
-      console.log('data', actions, sources, destinations, data);
-    }
-  }, [destinations, data, actions, sources]);
   return (
     <LayoutContainer>
       <MainContent>
diff --git a/frontend/webapp/graphql/queries/actions.ts b/frontend/webapp/graphql/queries/actions.ts
deleted file mode 100644
index cf56f4828..000000000
--- a/frontend/webapp/graphql/queries/actions.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_ACTIONS = gql`
-  query GetActions {
-    actions {
-      id
-      type
-      spec
-    }
-  }
-`;
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index c5e793b48..457e67fe4 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -3,10 +3,15 @@ import { gql } from '@apollo/client';
 export const GET_COMPUTE_PLATFORM = gql`
   query GetComputePlatform {
     computePlatform {
-      name
       k8sActualSources {
         name
       }
+      destinations {
+        name
+      }
+      actions {
+        type
+      }
       k8sActualNamespaces {
         name
         k8sActualSources {
diff --git a/frontend/webapp/graphql/queries/destination.ts b/frontend/webapp/graphql/queries/destination.ts
index 119392884..1bc8a05d9 100644
--- a/frontend/webapp/graphql/queries/destination.ts
+++ b/frontend/webapp/graphql/queries/destination.ts
@@ -49,33 +49,3 @@ export const GET_POTENTIAL_DESTINATIONS = gql`
     }
   }
 `;
-
-export const GET_DESTINATIONS = gql`
-  query GetDestinations {
-    destinations {
-      id
-      name
-      exportedSignals {
-        traces
-        metrics
-        logs
-      }
-      destinationType {
-        type
-        displayName
-        imageUrl
-        supportedSignals {
-          traces {
-            supported
-          }
-          metrics {
-            supported
-          }
-          logs {
-            supported
-          }
-        }
-      }
-    }
-  }
-`;
diff --git a/frontend/webapp/graphql/queries/index.ts b/frontend/webapp/graphql/queries/index.ts
index 9d9821358..498bd90f5 100644
--- a/frontend/webapp/graphql/queries/index.ts
+++ b/frontend/webapp/graphql/queries/index.ts
@@ -1,5 +1,3 @@
 export * from './config';
 export * from './compute-platform';
 export * from './destination';
-export * from './sources';
-export * from './actions';
diff --git a/frontend/webapp/graphql/queries/sources.ts b/frontend/webapp/graphql/queries/sources.ts
deleted file mode 100644
index 2ea59c0b0..000000000
--- a/frontend/webapp/graphql/queries/sources.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_SOURCES = gql`
-  query GetSources {
-    actualSources {
-      name
-      serviceName
-      instrumentedApplicationDetails {
-        containers {
-          language
-          containerName
-        }
-        conditions {
-          type
-          status
-          message
-        }
-      }
-    }
-  }
-`;
diff --git a/frontend/webapp/hooks/actions/useGetActions.ts b/frontend/webapp/hooks/actions/useGetActions.ts
index 7dd0ee166..f4e0ebd1a 100644
--- a/frontend/webapp/hooks/actions/useGetActions.ts
+++ b/frontend/webapp/hooks/actions/useGetActions.ts
@@ -1,28 +1,10 @@
-import { GET_ACTIONS } from '@/graphql';
-import { useQuery } from '@apollo/client';
-
-// Define the type for an individual action
-interface IcaInstanceResponse {
-  id: string;
-  type: string;
-  spec: string; // The spec is returned as a JSON string
-}
-
-// Define the response type for the query
-interface GetActionsData {
-  actions: IcaInstanceResponse[];
-}
+import { useComputePlatform } from '../compute-platform';
 
 // Define the hook
 export const useGetActions = () => {
-  // Use Apollo's useQuery hook to fetch the actions
-  const { loading, error, data, refetch } =
-    useQuery<GetActionsData>(GET_ACTIONS);
+  const { data } = useComputePlatform();
 
   return {
-    actions: data?.actions || [], // Return the actions or an empty array if not available
-    loading, // Return the loading state
-    error, // Return the error state
-    refetch, // Function to refetch the data manually if needed
+    actions: data?.computePlatform.actions || [], // Return the actions or an empty array if not available
   };
 };
diff --git a/frontend/webapp/hooks/destinations/useActualDestinations.ts b/frontend/webapp/hooks/destinations/useActualDestinations.ts
index e110aeaa0..5a01d89b1 100644
--- a/frontend/webapp/hooks/destinations/useActualDestinations.ts
+++ b/frontend/webapp/hooks/destinations/useActualDestinations.ts
@@ -1,15 +1,9 @@
-import { GET_DESTINATIONS } from '@/graphql';
-import { Destination } from '@/types';
-import { useQuery } from '@apollo/client';
+import { useComputePlatform } from '../compute-platform';
 
 export const useActualDestination = () => {
-  const { loading, error, data } = useQuery<{ destinations: Destination[] }>(
-    GET_DESTINATIONS
-  );
+  const { data } = useComputePlatform();
 
   return {
-    loading,
-    error,
-    destinations: data?.destinations || [],
+    destinations: data?.computePlatform.destinations || [],
   };
 };
diff --git a/frontend/webapp/hooks/sources/useActualSources.tsx b/frontend/webapp/hooks/sources/useActualSources.tsx
index 883c8c426..15ef9fc85 100644
--- a/frontend/webapp/hooks/sources/useActualSources.tsx
+++ b/frontend/webapp/hooks/sources/useActualSources.tsx
@@ -1,17 +1,9 @@
-import { GET_SOURCES } from '@/graphql';
-import { ManagedSource } from '@/types';
-import { useQuery } from '@apollo/client';
+import { useComputePlatform } from '../compute-platform';
 
 export function useActualSources() {
-  const { loading, error, data } = useQuery<{ actualSources: ManagedSource[] }>(
-    GET_SOURCES
-  );
+  const { data } = useComputePlatform();
 
   return {
-    loading,
-    error,
-    sources: data?.actualSources || [],
+    sources: data?.computePlatform.k8sActualSources || [],
   };
-
-  return {};
 }
diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts
index 5bc647d63..1943944a0 100644
--- a/frontend/webapp/types/compute-platform.ts
+++ b/frontend/webapp/types/compute-platform.ts
@@ -1,3 +1,5 @@
+import { ActionData } from './actions';
+import { Destination } from './destinations';
 import { K8sActualSource } from './sources';
 export type K8sActualNamespace = {
   name: string;
@@ -10,6 +12,9 @@ type ComputePlatformData = {
   computePlatformType: string;
   k8sActualNamespace?: K8sActualNamespace;
   k8sActualNamespaces: K8sActualNamespace[];
+  actions: ActionData[];
+  k8sActualSources: K8sActualSource[];
+  destinations: Destination[];
 };
 
 export type ComputePlatform = {

From c5d6b7b1d292e2856b77ab16965f38200a0b4207 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 15 Sep 2024 16:52:19 +0300
Subject: [PATCH 219/374] chore: wip

---
 frontend/webapp/reuseable-components/dropdown/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index 1424d776d..679171bcc 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -119,7 +119,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   const dropdownRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  useOnClickOutside(dropdownRef, () => setIsOpen(false));
+  // useOnClickOutside(dropdownRef, () => setIsOpen(false)); //TODO:: find a way to use it without breaking the dropdown click event
 
   useEffect(() => {
     if (isOpen && containerRef.current) {

From 70e40ac638aeb2fe1fcf51769bbc82f6946aef6a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 16 Sep 2024 17:03:55 +0300
Subject: [PATCH 220/374] chore: match button and dropdown to ds

---
 .../reuseable-components/button/index.tsx     | 50 +++++++++---
 .../reuseable-components/dropdown/index.tsx   |  4 +
 frontend/webapp/styles/theme.ts               | 78 +++++++++++++++++++
 3 files changed, 121 insertions(+), 11 deletions(-)

diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 98af016ad..79f2934b8 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -10,36 +10,49 @@ const variantStyles = {
   primary: css`
     border-radius: 32px;
     border: 1px solid rgba(249, 249, 249, 0.24);
-    background: rgba(249, 249, 249, 0.8);
+    background: ${({ theme }) => theme.colors.secondary};
     height: 36px;
     padding: 8px 14px 8px 16px;
 
     &:hover {
-      background: rgba(249, 249, 249, 0.6);
+      background: rgba(224, 224, 224, 1);
     }
     &:active {
-      background: rgba(249, 249, 249, 0.5);
+      background: rgba(184, 184, 184, 1);
+    }
+    &:focus {
+      background: ${({ theme }) => theme.colors.secondary};
     }
   `,
   secondary: css`
-    background: #151515;
-    border: 1px solid rgba(249, 249, 249, 0.24);
+    background: rgba(249, 249, 249, 0);
+    border: 1px solid rgba(82, 82, 82, 1);
     border-radius: 32px;
     &:hover {
       border: 1px solid rgba(249, 249, 249, 0.32);
       background: rgba(249, 249, 249, 0.04);
     }
     &:active {
-      background: #1515158d;
+      background: rgba(249, 249, 249, 0.08);
+      border: 1px solid rgba(143, 143, 143, 1);
+    }
+    &:focus {
+      background: rgba(249, 249, 249, 0);
     }
   `,
   tertiary: css`
-    background-color: transparent;
+    border-color: transparent;
+    background: transparent;
+
     border-radius: 32px;
     &:hover {
-      background: #151515;
+      background: rgba(249, 249, 249, 0.04);
     }
     &:active {
+      background: rgba(249, 249, 249, 0.08);
+    }
+    &:focus {
+      background: rgba(249, 249, 249, 0);
     }
   `,
 };
@@ -64,6 +77,19 @@ const StyledButton = styled.button<ButtonProps>`
     `}
 `;
 
+const ButtonContainer = styled.div<{
+  variant?: 'primary' | 'secondary' | 'tertiary';
+}>`
+  border: 2px solid transparent;
+  padding: 2px;
+  border-radius: 32px;
+  background-color: transparent;
+  transition: border-color 0.3s ease;
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
 export const Button: React.FC<ButtonProps> = ({
   children,
   variant = 'primary',
@@ -71,8 +97,10 @@ export const Button: React.FC<ButtonProps> = ({
   ...props
 }) => {
   return (
-    <StyledButton variant={variant} isDisabled={isDisabled} {...props}>
-      {children}
-    </StyledButton>
+    <ButtonContainer variant={variant}>
+      <StyledButton variant={variant} isDisabled={isDisabled} {...props}>
+        {children}
+      </StyledButton>
+    </ButtonContainer>
   );
 };
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index 679171bcc..0af92bfa6 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -8,6 +8,7 @@ import { Divider } from '../divider';
 import { DropdownOption } from '@/types';
 import { useOnClickOutside } from '@/hooks';
 import ReactDOM from 'react-dom';
+import { NoDataFound } from '../no-data-found';
 
 interface DropdownProps {
   options: DropdownOption[];
@@ -61,6 +62,7 @@ const DropdownListContainer = styled.div`
   flex-direction: column;
   gap: 8px;
   padding: 8px;
+  margin-top: 12px;
   background-color: #242424;
   border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: 32px;
@@ -98,6 +100,7 @@ const HeaderWrapper = styled.div`
 `;
 
 const OpenDropdownIcon = styled(Image)<{ isOpen: boolean }>`
+  transition: transform 0.3s;
   transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
 `;
 
@@ -160,6 +163,7 @@ const Dropdown: React.FC<DropdownProps> = ({
           />
           <Divider thickness={1} margin="8px 0 0 0" />
         </SearchInputContainer>
+        {filteredOptions.length === 0 && <NoDataFound title="No data found" />}
         {filteredOptions.map((option) => (
           <DropdownItem
             key={option.id}
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index a45623bb3..ac80f697c 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -9,6 +9,84 @@ const colors = {
   border: 'rgba(249, 249, 249, 0.08)',
   translucent_bg: '#1A1A1A',
   majestic_blue: '#444AD9',
+  gray: {
+    '50': '#F7F7F8',
+    '100': '#EBEBEF',
+    '200': '#D1D1D8',
+    '300': '#A9A9BC',
+    '400': '#8A8AA3',
+    '500': '#6C6C89',
+    '600': '#55555D',
+    '700': '#3F3F50',
+    '800': '#282833',
+    '900': '#121217',
+    '950': '#121217',
+  },
+  blue: {
+    '50': '#F4F1FD',
+    '100': '#E2DAFB',
+    '200': '#C6B6F7',
+    '300': '#A99F3F3',
+    '400': '#80C8EF',
+    '500': '#7047EB',
+    '600': '#543E7',
+    '700': '#4316CA',
+    '800': '#3712A5',
+    '900': '#280E81',
+    '950': '#280E81',
+  },
+  green: {
+    '50': '#EEFBF4',
+    '100': '#DFEBEA',
+    '200': '#B2EECC',
+    '300': '#84E4AE',
+    '400': '#5BD990',
+    '500': '#2DCA72',
+    '600': '#26A95F',
+    '700': '#4DDBAC',
+    '800': '#17663A',
+    '900': '#0F4527',
+    '950': '#0F4527',
+  },
+  red: {
+    '50': '#FEF0F4',
+    '100': '#FDD8E1',
+    '200': '#FBB1C4',
+    '300': '#F98BA6',
+    '400': '#F76489',
+    '500': '#F53D6B',
+    '600': '#F3164E',
+    '700': '#D5083E',
+    '800': '#AF0932',
+    '900': '#880727',
+    '950': '#880727',
+  },
+  orange: {
+    '50': '#FFF2EE',
+    '100': '#FFEBE1',
+    '200': '#FFDCBD',
+    '300': '#FFB399',
+    '400': '#FF9876',
+    '500': '#FF7D52',
+    '600': '#FF571F',
+    '700': '#EB3A00',
+    '800': '#B82200',
+    '900': '#852100',
+    '950': '#852100',
+  },
+  yellow: {
+    '50': '#FFF9EB',
+    '100': '#FFF3D6',
+    '200': '#FFEFAD',
+    '300': '#FFDAB5',
+    '400': '#FFEC5C',
+    '500': '#FFC233',
+    '600': '#AFAF00',
+    '700': '#C28800',
+    '800': '#8A6100',
+    '900': '#523900',
+    '950': '#523900',
+  },
 };
 
 const text = {

From f7160f8fe2fbe9808ba2700be6605d83cd689c57 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 16 Sep 2024 17:22:39 +0300
Subject: [PATCH 221/374] chore: wip

---
 .../reuseable-components/button/index.tsx     | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 79f2934b8..6e108a046 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -8,12 +8,8 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const variantStyles = {
   primary: css`
-    border-radius: 32px;
     border: 1px solid rgba(249, 249, 249, 0.24);
     background: ${({ theme }) => theme.colors.secondary};
-    height: 36px;
-    padding: 8px 14px 8px 16px;
-
     &:hover {
       background: rgba(224, 224, 224, 1);
     }
@@ -27,7 +23,7 @@ const variantStyles = {
   secondary: css`
     background: rgba(249, 249, 249, 0);
     border: 1px solid rgba(82, 82, 82, 1);
-    border-radius: 32px;
+
     &:hover {
       border: 1px solid rgba(249, 249, 249, 0.32);
       background: rgba(249, 249, 249, 0.04);
@@ -43,8 +39,6 @@ const variantStyles = {
   tertiary: css`
     border-color: transparent;
     background: transparent;
-
-    border-radius: 32px;
     &:hover {
       background: rgba(249, 249, 249, 0.04);
     }
@@ -58,9 +52,8 @@ const variantStyles = {
 };
 
 const StyledButton = styled.button<ButtonProps>`
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
+  height: 36px;
+  border-radius: 32px;
   cursor: pointer;
   transition: background-color 0.3s ease;
 
@@ -70,8 +63,7 @@ const StyledButton = styled.button<ButtonProps>`
     css`
       opacity: 0.5;
       cursor: not-allowed;
-      &:hover,
-      &:active {
+      &:hover {
         background-color: #eaeaea;
       }
     `}
@@ -98,7 +90,12 @@ export const Button: React.FC<ButtonProps> = ({
 }) => {
   return (
     <ButtonContainer variant={variant}>
-      <StyledButton variant={variant} isDisabled={isDisabled} {...props}>
+      <StyledButton
+        variant={variant}
+        disabled={isDisabled}
+        isDisabled={isDisabled}
+        {...props}
+      >
         {children}
       </StyledButton>
     </ButtonContainer>

From 869929926ff0fe603203822ce91f68517898b971 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 16 Sep 2024 17:36:19 +0300
Subject: [PATCH 222/374] chore: wip

---
 .../choose-destination-menu/index.tsx         |  1 +
 .../reuseable-components/checkbox/index.tsx   |  1 +
 .../reuseable-components/dropdown/index.tsx   | 26 ++++++++++++-------
 .../reuseable-components/toggle/index.tsx     |  1 +
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
index 1e31c9dac..f8f730168 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
@@ -66,6 +66,7 @@ const DestinationFilterComponent: React.FC<FilterComponentProps> = ({
           options={DROPDOWN_OPTIONS}
           value={selectedTag}
           onSelect={onTagSelect}
+          showSearch={false}
         />
       </InputAndDropdownContainer>
       <MonitorButtonsContainer>
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
index ada9b9fb3..39b15255f 100644
--- a/frontend/webapp/reuseable-components/checkbox/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -34,6 +34,7 @@ const CheckboxWrapper = styled.div<{ isChecked: boolean; disabled?: boolean }>`
   background-color: ${({ isChecked, theme }) =>
     isChecked ? theme.colors.majestic_blue : 'transparent'};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  transition: border 0.3s, background-color 0.3s;
 `;
 
 const Checkbox: React.FC<CheckboxProps> = ({
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index 0af92bfa6..b9829f00a 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -17,6 +17,7 @@ interface DropdownProps {
   title?: string;
   tooltip?: string;
   placeholder?: string;
+  showSearch?: boolean;
 }
 
 const Container = styled.div`
@@ -111,6 +112,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   title,
   tooltip,
   placeholder,
+  showSearch = true,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -154,16 +156,20 @@ const Dropdown: React.FC<DropdownProps> = ({
       }}
     >
       <DropdownListContainer>
-        <SearchInputContainer>
-          <Input
-            placeholder="Search..."
-            icon={'/icons/common/search.svg'}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <Divider thickness={1} margin="8px 0 0 0" />
-        </SearchInputContainer>
-        {filteredOptions.length === 0 && <NoDataFound title="No data found" />}
+        {showSearch && (
+          <SearchInputContainer>
+            <Input
+              placeholder="Search..."
+              icon={'/icons/common/search.svg'}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Divider thickness={1} margin="8px 0 0 0" />
+          </SearchInputContainer>
+        )}
+        {filteredOptions.length === 0 && (
+          <NoDataFound title="No data found" subTitle=" " />
+        )}
         {filteredOptions.map((option) => (
           <DropdownItem
             key={option.id}
diff --git a/frontend/webapp/reuseable-components/toggle/index.tsx b/frontend/webapp/reuseable-components/toggle/index.tsx
index d0435143c..c3c42cfa3 100644
--- a/frontend/webapp/reuseable-components/toggle/index.tsx
+++ b/frontend/webapp/reuseable-components/toggle/index.tsx
@@ -33,6 +33,7 @@ const ToggleSwitch = styled.div<{ isActive: boolean; disabled?: boolean }>`
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ isActive }) => (isActive ? 1 : 0.4)};
+  transition: background-color 0.3s, opacity 0.3s;
   &::before {
     content: '';
     width: 12px;

From 7a53647338de1403d7e7f8493dae4b0397f8a279 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 17 Sep 2024 10:14:53 +0300
Subject: [PATCH 223/374] chore: wip

---
 .../destinations-list/index.tsx               |  4 +--
 .../destinations/add-destination/styled.ts    |  2 +-
 frontend/webapp/hooks/useOnClickOutside.tsx   | 23 +++++++--------
 .../reuseable-components/button/index.tsx     |  2 +-
 .../reuseable-components/dropdown/index.tsx   | 28 ++++++++++++++++---
 .../reuseable-components/toggle/index.tsx     |  6 ++--
 6 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 1e2c67109..88b78bc83 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
 import { capitalizeFirstLetter } from '@/utils';
 import { DestinationListItem } from './destination-list-item';
-import { Counter, NoDataFound, SectionTitle } from '@/reuseable-components';
+import { NoDataFound, SectionTitle } from '@/reuseable-components';
 import { IDestinationListItem } from '../choose-destination-modal-body';
 import { PotentialDestinationsList } from './potential-destinations-list';
 
@@ -11,7 +11,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-self: stretch;
-  max-height: calc(100vh - 424px);
+  max-height: calc(100vh - 450px);
   overflow-y: auto;
 
   @media (height < 800px) {
diff --git a/frontend/webapp/containers/main/destinations/add-destination/styled.ts b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
index 312f71b68..579e93e6d 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/styled.ts
+++ b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const Body = styled.div`
-  padding: 32px 32px 0;
+  padding: 32px 24px 0;
   border-left: 1px solid rgba(249, 249, 249, 0.08);
   min-height: 600px;
   width: 100%;
diff --git a/frontend/webapp/hooks/useOnClickOutside.tsx b/frontend/webapp/hooks/useOnClickOutside.tsx
index 08dd372ed..fe6b22234 100644
--- a/frontend/webapp/hooks/useOnClickOutside.tsx
+++ b/frontend/webapp/hooks/useOnClickOutside.tsx
@@ -1,19 +1,16 @@
-'use client';
-import { useEffect, RefObject } from 'react';
+import { useEffect } from 'react';
 
-type Event = MouseEvent | TouchEvent;
-
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T>,
-  handler: (event: Event) => void
+export function useOnClickOutside(
+  ref: React.RefObject<HTMLElement>,
+  handler: () => void
 ) {
   useEffect(() => {
-    const listener = (event: Event) => {
-      const el = ref?.current;
-      if (el?.contains(event?.target as Node)) return null;
-
-      // Call the handler only if the click is outside of the element passed.
-      handler(event);
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler();
     };
 
     document.addEventListener('mousedown', listener);
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 6e108a046..4aa8a2dff 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -56,7 +56,7 @@ const StyledButton = styled.button<ButtonProps>`
   border-radius: 32px;
   cursor: pointer;
   transition: background-color 0.3s ease;
-
+  padding: 0 12px;
   ${({ variant }) => variant && variantStyles[variant]}
   ${({ isDisabled }) =>
     isDisabled &&
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index b9829f00a..25177ca7a 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -121,10 +121,12 @@ const Dropdown: React.FC<DropdownProps> = ({
     left: 0,
     width: 0,
   });
-  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [isDisabled, setIsDisabled] = useState(false); // Disable flag for debounce
   const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // useOnClickOutside(dropdownRef, () => setIsOpen(false)); //TODO:: find a way to use it without breaking the dropdown click event
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
   useEffect(() => {
     if (isOpen && containerRef.current) {
@@ -146,6 +148,23 @@ const Dropdown: React.FC<DropdownProps> = ({
     setIsOpen(false);
   };
 
+  const handleDropdownToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if (isDisabled) {
+      return; // Prevent multiple clicks if debounce is active
+    }
+
+    // Toggle dropdown open/close state
+    setIsOpen((prev) => !prev);
+
+    // Set the disable flag to true and reset after 1 second
+    setIsDisabled(true);
+    setTimeout(() => {
+      setIsDisabled(false);
+    }, 1000); // 1 second debounce delay
+  };
+
   const dropdownContent = (
     <div
       style={{
@@ -154,8 +173,9 @@ const Dropdown: React.FC<DropdownProps> = ({
         left: dropdownPosition.left,
         width: dropdownPosition.width,
       }}
+      onClick={(e) => e.stopPropagation()}
     >
-      <DropdownListContainer>
+      <DropdownListContainer ref={dropdownRef}>
         {showSearch && (
           <SearchInputContainer>
             <Input
@@ -208,7 +228,7 @@ const Dropdown: React.FC<DropdownProps> = ({
           </HeaderWrapper>
         </Tooltip>
       )}
-      <DropdownHeader isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
+      <DropdownHeader isOpen={isOpen} onClick={handleDropdownToggle}>
         <Text size={14}>{value?.value || placeholder}</Text>
         <OpenDropdownIcon
           src="/icons/common/extend-arrow.svg"
diff --git a/frontend/webapp/reuseable-components/toggle/index.tsx b/frontend/webapp/reuseable-components/toggle/index.tsx
index c3c42cfa3..893fd788e 100644
--- a/frontend/webapp/reuseable-components/toggle/index.tsx
+++ b/frontend/webapp/reuseable-components/toggle/index.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
-import styled, { css } from 'styled-components';
-import { Tooltip } from '../tooltip';
 import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
 
 interface ToggleProps {
   title: string;

From af3a85d649f30a3dcb06ada1af2c99d2a58ccff4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 17 Sep 2024 10:39:19 +0300
Subject: [PATCH 224/374] chore: fixed sources issue

---
 .../choose-sources/choose-sources-list/index.tsx       |  1 +
 .../webapp/hooks/sources/useConnectSourcesMenuState.ts | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index b61a60fb6..59d2aea37 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -81,6 +81,7 @@ const SourcesList: React.FC<SourcesListProps> = ({
   selectedItems,
   setSelectedItems,
 }) => {
+  console.log({ items, selectedItems, setSelectedItems });
   function isItemSelected(item: K8sActualSource) {
     const selected = selectedItems.find(
       (selectedItem) => selectedItem.name === item.name
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
index 4fd64e62a..225cf41f8 100644
--- a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
+++ b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
@@ -49,9 +49,15 @@ export const useConnectSourcesMenuState = ({ sourcesList }) => {
   function handleSelectItem(item: K8sActualSource) {
     if (selectedOption) {
       const currentSelectedItems = selectedItems[selectedOption.value] || [];
-      if (currentSelectedItems.includes(item)) {
+
+      const isItemSelected = currentSelectedItems.some(
+        (currentSelectedItem) => currentSelectedItem.name === item.name
+      );
+
+      if (isItemSelected) {
         const updatedSelectedItems = currentSelectedItems.filter(
-          (selectedItem) => selectedItem !== item
+          (selectedItem) =>
+            JSON.stringify(selectedItem) !== JSON.stringify(item)
         );
         setSelectedItems({
           ...selectedItems,

From e9cfa83f9e52274d417ad158a3138aaa0f438ab4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 17 Sep 2024 10:44:27 +0300
Subject: [PATCH 225/374] chore: remove clg

---
 .../main/sources/choose-sources/choose-sources-list/index.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index 59d2aea37..b61a60fb6 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -81,7 +81,6 @@ const SourcesList: React.FC<SourcesListProps> = ({
   selectedItems,
   setSelectedItems,
 }) => {
-  console.log({ items, selectedItems, setSelectedItems });
   function isItemSelected(item: K8sActualSource) {
     const selected = selectedItems.find(
       (selectedItem) => selectedItem.name === item.name

From 60c197c68b004d1f81f7a420632d4732c1154059 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 17 Sep 2024 10:46:24 +0300
Subject: [PATCH 226/374] chore: wip

---
 frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
index 225cf41f8..8a97b9609 100644
--- a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
+++ b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
@@ -51,7 +51,9 @@ export const useConnectSourcesMenuState = ({ sourcesList }) => {
       const currentSelectedItems = selectedItems[selectedOption.value] || [];
 
       const isItemSelected = currentSelectedItems.some(
-        (currentSelectedItem) => currentSelectedItem.name === item.name
+        (currentSelectedItem) =>
+          currentSelectedItem.name === item.name &&
+          currentSelectedItem.kind === item.kind
       );
 
       if (isItemSelected) {

From dd8f75ba7233e910af56b10eaedd405cb45448c3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 17 Sep 2024 14:56:12 +0300
Subject: [PATCH 227/374] chore: init sources nodes

---
 frontend/webapp/app/main/page.tsx             |  7 +-
 .../webapp/components/main/header/index.tsx   |  6 +-
 .../webapp/containers/main/overview/index.ts  |  1 +
 .../overview-data-flow/graph/index.tsx        | 45 +++++++++
 .../graph/nodes/base-node.tsx                 | 93 +++++++++++++++++++
 .../overview/overview-data-flow/index.tsx     | 17 ++++
 .../graphql/queries/compute-platform.ts       | 26 +++---
 .../compute-platform/useComputePlatform.ts    |  2 +-
 frontend/webapp/hooks/destinations/index.ts   |  1 +
 frontend/webapp/package.json                  |  1 +
 .../reuseable-components/button/index.tsx     |  2 +-
 frontend/webapp/styles/theme.ts               | 13 +++
 frontend/webapp/types/sources.ts              |  9 ++
 .../utils/constants/programming-languages.ts  | 92 ++++++++++++++++++
 frontend/webapp/yarn.lock                     | 39 +++++++-
 15 files changed, 328 insertions(+), 26 deletions(-)
 create mode 100644 frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
 create mode 100644 frontend/webapp/utils/constants/programming-languages.ts

diff --git a/frontend/webapp/app/main/page.tsx b/frontend/webapp/app/main/page.tsx
index b5433ada1..9dd0aa6a7 100644
--- a/frontend/webapp/app/main/page.tsx
+++ b/frontend/webapp/app/main/page.tsx
@@ -1,6 +1,11 @@
 'use client';
+import { OverviewDataFlowContainer } from '@/containers';
 import React from 'react';
 
 export default function MainPage() {
-  return <></>;
+  return (
+    <>
+      <OverviewDataFlowContainer />
+    </>
+  );
 }
diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
index a10e5dc21..f0b5ad986 100644
--- a/frontend/webapp/components/main/header/index.tsx
+++ b/frontend/webapp/components/main/header/index.tsx
@@ -39,11 +39,7 @@ export const MainHeader: React.FC<MainHeaderProps> = () => {
       <PlatformTitleWrapper>
         <PlatformTitle type="k8s" />
       </PlatformTitleWrapper>
-      <ConnectionStatus
-        title="Connection Status"
-        status="lost"
-        subtitle="Please check your internet connection"
-      />
+      <ConnectionStatus title="Connection Status" status="alive" />
     </HeaderContainer>
   );
 };
diff --git a/frontend/webapp/containers/main/overview/index.ts b/frontend/webapp/containers/main/overview/index.ts
index a5200cb12..69be1eacf 100644
--- a/frontend/webapp/containers/main/overview/index.ts
+++ b/frontend/webapp/containers/main/overview/index.ts
@@ -1 +1,2 @@
 export * from './data.flow';
+export * from './overview-data-flow';
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
new file mode 100644
index 000000000..fe9ca22a8
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
@@ -0,0 +1,45 @@
+'use client';
+import React, { useMemo } from 'react';
+import { ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import BaseNode, { NodeDataProps } from './nodes/base-node';
+import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
+import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+
+const nodeTypes = {
+  base: BaseNode,
+};
+
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
+
+export function NodeBaseDataFlow() {
+  const { actions } = useGetActions();
+  const { sources } = useActualSources();
+  const { destinations } = useActualDestination();
+
+  const sourcesNode = useMemo(() => {
+    return sources.map((source, index) => ({
+      type: 'base',
+      id: `source-${index}`,
+      position: { x: 0, y: 100 * (index + 1) },
+      data: {
+        title: source.name,
+        subTitle: source.kind,
+        imageUri: getMainContainerLanguageLogo(source),
+        status: 'healthy',
+        onClick: () => {
+          console.log(source);
+        },
+      },
+    }));
+  }, [sources]);
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <ReactFlow
+        nodeTypes={nodeTypes}
+        nodes={sourcesNode}
+        edges={initialEdges}
+      />
+    </div>
+  );
+}
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
new file mode 100644
index 000000000..94c1cf132
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
@@ -0,0 +1,93 @@
+import { Text } from '@/reuseable-components';
+import { Handle, Position } from '@xyflow/react';
+import Image from 'next/image';
+import React, { memo } from 'react';
+import styled from 'styled-components';
+
+const BaseNodeContainer = styled.div`
+  display: flex;
+  padding: 16px 24px 16px 16px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 16px;
+  min-width: 296px;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.colors.white_opacity['004']};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.white_opacity['008']};
+  }
+`;
+
+const ListItemContent = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+const SourceIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+export interface NodeDataProps {
+  title: string;
+  subTitle: string;
+  imageUri: string;
+  monitors?: string[];
+  status: 'healthy' | 'unhealthy';
+  onClick: () => void;
+}
+
+interface BaseNodeProps {
+  data: NodeDataProps;
+  isConnectable: boolean;
+}
+
+export default memo(({ isConnectable, data }: BaseNodeProps) => {
+  console.log({ data });
+
+  const { title, subTitle, imageUri, status, onClick } = data;
+  return (
+    <BaseNodeContainer onClick={onClick}>
+      <SourceIconWrapper>
+        <Image
+          src={imageUri || '/icons/common/folder.svg'}
+          width={20}
+          height={20}
+          alt="source"
+        />
+      </SourceIconWrapper>
+      <TextWrapper>
+        <Text>{title}</Text>
+        <Text opacity={0.8} size={10}>
+          {subTitle}
+        </Text>
+      </TextWrapper>
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="a"
+        isConnectable={isConnectable}
+        style={{ visibility: 'hidden' }}
+      />
+    </BaseNodeContainer>
+  );
+});
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
new file mode 100644
index 000000000..10f5a3d4c
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -0,0 +1,17 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { NodeBaseDataFlow } from './graph';
+
+export const OverviewDataFlowWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+export function OverviewDataFlowContainer() {
+  return (
+    <OverviewDataFlowWrapper>
+      <NodeBaseDataFlow />
+    </OverviewDataFlowWrapper>
+  );
+}
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 457e67fe4..1ac5db5c9 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -5,6 +5,19 @@ export const GET_COMPUTE_PLATFORM = gql`
     computePlatform {
       k8sActualSources {
         name
+        kind
+        numberOfInstances
+        instrumentedApplicationDetails {
+          containers {
+            containerName
+            language
+          }
+          conditions {
+            type
+            status
+            message
+          }
+        }
       }
       destinations {
         name
@@ -14,16 +27,6 @@ export const GET_COMPUTE_PLATFORM = gql`
       }
       k8sActualNamespaces {
         name
-        k8sActualSources {
-          kind
-          name
-          numberOfInstances
-          instrumentedApplicationDetails {
-            conditions {
-              status
-            }
-          }
-        }
       }
     }
   }
@@ -44,9 +47,6 @@ export const GET_NAMESPACES = gql`
           numberOfInstances
         }
       }
-      k8sActualSources {
-        name
-      }
     }
   }
 `;
diff --git a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
index 805dc835f..d24e016ed 100644
--- a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
+++ b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
@@ -1,6 +1,6 @@
 import { ComputePlatform } from '@/types';
 import { useQuery } from '@apollo/client';
-import { GET_COMPUTE_PLATFORM, GET_NAMESPACES } from '@/graphql';
+import { GET_COMPUTE_PLATFORM } from '@/graphql';
 
 type UseComputePlatformHook = {
   data?: ComputePlatform;
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index ee99a9db8..11b11a37a 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -3,3 +3,4 @@ export * from './useTestConnection';
 export * from './useConnectDestinationForm';
 export * from './useCreateDestination';
 export * from './usePotentialDestinations';
+export * from './useActualDestinations';
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index 6f8453d0c..2a3942389 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -20,6 +20,7 @@
     "@types/node": "20.3.3",
     "@types/react": "^18.3.5",
     "@types/react-dom": "18.2.4",
+    "@xyflow/react": "^12.3.0",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "eslint": "8.42.0",
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 4aa8a2dff..76bdd68be 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -55,7 +55,7 @@ const StyledButton = styled.button<ButtonProps>`
   height: 36px;
   border-radius: 32px;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+
   padding: 0 12px;
   ${({ variant }) => variant && variantStyles[variant]}
   ${({ isDisabled }) =>
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index ac80f697c..797779268 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -9,6 +9,19 @@ const colors = {
   border: 'rgba(249, 249, 249, 0.08)',
   translucent_bg: '#1A1A1A',
   majestic_blue: '#444AD9',
+  white_opacity: {
+    '004': 'rgba(249, 249, 249, 0.04)',
+    '008': 'rgba(249, 249, 249, 0.08)',
+    '10': 'rgba(255, 255, 255, 0.1)',
+    '20': 'rgba(255, 255, 255, 0.2)',
+    '30': 'rgba(255, 255, 255, 0.3)',
+    '40': 'rgba(255, 255, 255, 0.4)',
+    '50': 'rgba(255, 255, 255, 0.5)',
+    '60': 'rgba(255, 255, 255, 0.6)',
+    '70': 'rgba(255, 255, 255, 0.7)',
+    '80': 'rgba(255, 255, 255, 0.8)',
+    '90': 'rgba(255, 255, 255, 0.9)',
+  },
   gray: {
     '50': '#F7F7F8',
     '100': '#EBEBEF',
diff --git a/frontend/webapp/types/sources.ts b/frontend/webapp/types/sources.ts
index 4807a3e7e..c8b009afe 100644
--- a/frontend/webapp/types/sources.ts
+++ b/frontend/webapp/types/sources.ts
@@ -73,11 +73,20 @@ export interface SelectedSources {
   };
 }
 
+export type SourceContainer = {
+  containerName: string;
+  language: string;
+};
+
 export type K8sActualSource = {
   name: string;
   kind: string;
   numberOfInstances: number;
   selected?: boolean;
+  instrumentedApplicationDetails: {
+    containers: Array<SourceContainer>;
+    conditions: Array<Condition>;
+  };
 };
 export interface InstrumentationConfig {
   optionKey: string;
diff --git a/frontend/webapp/utils/constants/programming-languages.ts b/frontend/webapp/utils/constants/programming-languages.ts
new file mode 100644
index 000000000..3e709db77
--- /dev/null
+++ b/frontend/webapp/utils/constants/programming-languages.ts
@@ -0,0 +1,92 @@
+import { K8sActualSource } from '@/types';
+
+const BASE_URL = 'https://d1n7d4xz7fr8b4.cloudfront.net/';
+
+// while odigos lists language per container, we want to aggregate one single language for the workload.
+// the process is mostly heuristic, we iterate over the containers and return the first valid language we find.
+// there are additional cases for when the workload programming language is not available.
+export enum WORKLOAD_PROGRAMMING_LANGUAGES {
+  JAVA = 'java',
+  GO = 'go',
+  JAVASCRIPT = 'javascript',
+  PYTHON = 'python',
+  DOTNET = 'dotnet',
+  MYSQL = 'mysql',
+  UNKNOWN = 'unknown', // language detection completed but could not find a supported language
+  PROCESSING = 'processing', // language detection is not yet complotted, data is not available
+  NO_CONTAINERS = 'no containers', // language detection completed but no containers found or they are ignored
+  NO_RUNNING_PODS = 'no running pods', // no running pods are available for language detection
+  NGINX = 'nginx',
+}
+
+export const LANGUAGES_LOGOS: Record<WORKLOAD_PROGRAMMING_LANGUAGES, string> = {
+  [WORKLOAD_PROGRAMMING_LANGUAGES.JAVA]: `${BASE_URL}java.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.GO]: `${BASE_URL}go.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.JAVASCRIPT]: `${BASE_URL}nodejs.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.PYTHON]: `${BASE_URL}python.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.DOTNET]: `${BASE_URL}dotnet.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.MYSQL]: `${BASE_URL}mysql.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN]: `${BASE_URL}default.svg`, // TODO: good icon
+  [WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING]: `${BASE_URL}default.svg`, // TODO: good icon
+  [WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS]: `${BASE_URL}default.svg`, // TODO: good icon
+  [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: `${BASE_URL}default.svg`, // TODO: good icon
+  [WORKLOAD_PROGRAMMING_LANGUAGES.NGINX]: `${BASE_URL}nginx.svg`,
+};
+
+export const LANGUAGES_COLORS: Record<WORKLOAD_PROGRAMMING_LANGUAGES, string> =
+  {
+    [WORKLOAD_PROGRAMMING_LANGUAGES.JAVA]: '#B07219',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.GO]: '#00ADD8',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.JAVASCRIPT]: '#F7DF1E',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.PYTHON]: '#306998',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.DOTNET]: '#512BD4',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.MYSQL]: '#00758F',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN]: '#8b92a6',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING]: '#3367d9',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS]: '#111111',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: '#666666',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.NGINX]: '#009237',
+  };
+
+export const getMainContainerLanguage = (
+  source: K8sActualSource
+): WORKLOAD_PROGRAMMING_LANGUAGES => {
+  const ia = source?.instrumentedApplicationDetails;
+
+  if (!ia) {
+    if (source?.numberOfInstances > 0) {
+      return WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING;
+    } else {
+      return WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS;
+    }
+  }
+
+  const containers = ia.containers;
+  if (!containers) {
+    return WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING;
+  }
+
+  // we will filter out the ignored languages as we don't want to account them in the main language
+  const noneIgnoredLanguages = containers.filter(
+    (container) => container.language !== 'ignored'
+  );
+  if (noneIgnoredLanguages.length === 0) {
+    return WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS;
+  }
+
+  // find the first container with valid language
+  const mainContainer = noneIgnoredLanguages.find(
+    (container) => container.language !== 'unknown'
+  );
+  if (!mainContainer) {
+    return WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN; // no valid language found, return the first one
+  }
+  return mainContainer.language as WORKLOAD_PROGRAMMING_LANGUAGES;
+};
+
+export const getMainContainerLanguageLogo = (
+  source: K8sActualSource
+): string => {
+  const language = getMainContainerLanguage(source);
+  return LANGUAGES_LOGOS[language];
+};
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index a4330e52d..23701319a 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -2069,7 +2069,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz#096efdf55eb97480e3f5621ff9a8da552f0961e7"
   integrity sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==
 
-"@types/d3-drag@*", "@types/d3-drag@^3.0.1":
+"@types/d3-drag@*", "@types/d3-drag@^3.0.1", "@types/d3-drag@^3.0.7":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.7.tgz#b13aba8b2442b4068c9a9e6d1d82f8bcea77fc02"
   integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
@@ -2154,7 +2154,7 @@
   dependencies:
     "@types/d3-time" "*"
 
-"@types/d3-selection@*", "@types/d3-selection@^3.0.3":
+"@types/d3-selection@*", "@types/d3-selection@^3.0.10", "@types/d3-selection@^3.0.3":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.10.tgz#98cdcf986d0986de6912b5892e7c015a95ca27fe"
   integrity sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==
@@ -2181,14 +2181,14 @@
   resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
   integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
 
-"@types/d3-transition@*":
+"@types/d3-transition@*", "@types/d3-transition@^3.0.8":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.8.tgz#677707f5eed5b24c66a1918cde05963021351a8f"
   integrity sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==
   dependencies:
     "@types/d3-selection" "*"
 
-"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1":
+"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1", "@types/d3-zoom@^3.0.8":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
   integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
@@ -2424,6 +2424,28 @@
   dependencies:
     tslib "^2.3.0"
 
+"@xyflow/react@^12.3.0":
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/@xyflow/react/-/react-12.3.0.tgz#611bf68e0580ff2eab0a5cdf4b997d923a8cae85"
+  integrity sha512-dujEbjOn+5gMGg/wsojxtI7v2CfWm7ieRyiOHiZTPyw6p/VIdCoS3nLfSBP3TT+swoHSAXZ78iomHSKoUl4tMg==
+  dependencies:
+    "@xyflow/system" "0.0.42"
+    classcat "^5.0.3"
+    zustand "^4.4.0"
+
+"@xyflow/system@0.0.42":
+  version "0.0.42"
+  resolved "https://registry.yarnpkg.com/@xyflow/system/-/system-0.0.42.tgz#359b274fe072a28191ecfbc61bb7a3601de80e1e"
+  integrity sha512-kWYj+Y0GOct0jKYTdyRMNOLPxGNbb2TYvPg2gTmJnZ31DOOMkL5uRBLX825DR2gOACDu+i5FHLxPJUPf/eGOJw==
+  dependencies:
+    "@types/d3-drag" "^3.0.7"
+    "@types/d3-selection" "^3.0.10"
+    "@types/d3-transition" "^3.0.8"
+    "@types/d3-zoom" "^3.0.8"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -6278,7 +6300,7 @@ use-sync-external-store@1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@1.2.2, use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
@@ -6441,3 +6463,10 @@ zustand@^4.3.1, zustand@^4.4.1:
   integrity sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==
   dependencies:
     use-sync-external-store "1.2.0"
+
+zustand@^4.4.0:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.5.tgz#f8c713041543715ec81a2adda0610e1dc82d4ad1"
+  integrity sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==
+  dependencies:
+    use-sync-external-store "1.2.2"

From 4bdad2a7b9bad72ae2b8a4b5a7b6108aec3762e2 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 17 Sep 2024 15:22:55 +0300
Subject: [PATCH 228/374] chore: init actions and destination nodes

---
 .../overview-data-flow/graph/index.tsx        | 40 ++++++++++++++++++-
 .../graphql/queries/compute-platform.ts       |  9 +++++
 frontend/webapp/types/compute-platform.ts     |  4 +-
 frontend/webapp/types/destinations.ts         | 18 +++++++++
 4 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
index fe9ca22a8..46abea3e5 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
@@ -23,6 +23,7 @@ export function NodeBaseDataFlow() {
       id: `source-${index}`,
       position: { x: 0, y: 100 * (index + 1) },
       data: {
+        type: 'source',
         title: source.name,
         subTitle: source.kind,
         imageUri: getMainContainerLanguageLogo(source),
@@ -33,11 +34,48 @@ export function NodeBaseDataFlow() {
       },
     }));
   }, [sources]);
+
+  const destinationNode = useMemo(() => {
+    return destinations.map((destination, index) => ({
+      type: 'base',
+      id: `destination-${index}`,
+      position: { x: 1000, y: 100 * (index + 1) },
+      data: {
+        type: 'destination',
+        title: destination.destinationType.displayName,
+        subTitle: 'Destination',
+        imageUri: destination.destinationType.imageUrl,
+        status: 'healthy',
+        onClick: () => {
+          console.log(destination);
+        },
+      },
+    }));
+  }, [destinations]);
+
+  const actionsNode = useMemo(() => {
+    return actions.map((action, index) => ({
+      type: 'base',
+      id: `action-${index}`,
+      position: { x: 500, y: 100 * (index + 1) },
+      data: {
+        type: 'action',
+        title: action.type,
+        subTitle: 'Action',
+        imageUri: '/icons/common/action.svg',
+        status: 'healthy',
+        onClick: () => {
+          console.log(action);
+        },
+      },
+    }));
+  }, [actions]);
+
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <ReactFlow
         nodeTypes={nodeTypes}
-        nodes={sourcesNode}
+        nodes={[...sourcesNode, ...destinationNode, ...actionsNode]}
         edges={initialEdges}
       />
     </div>
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 1ac5db5c9..cb7abdaa9 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -21,6 +21,15 @@ export const GET_COMPUTE_PLATFORM = gql`
       }
       destinations {
         name
+        exportedSignals {
+          logs
+          metrics
+          traces
+        }
+        destinationType {
+          imageUrl
+          displayName
+        }
       }
       actions {
         type
diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts
index 1943944a0..b00d6223d 100644
--- a/frontend/webapp/types/compute-platform.ts
+++ b/frontend/webapp/types/compute-platform.ts
@@ -1,5 +1,5 @@
 import { ActionData } from './actions';
-import { Destination } from './destinations';
+import { ActualDestination } from './destinations';
 import { K8sActualSource } from './sources';
 export type K8sActualNamespace = {
   name: string;
@@ -14,7 +14,7 @@ type ComputePlatformData = {
   k8sActualNamespaces: K8sActualNamespace[];
   actions: ActionData[];
   k8sActualSources: K8sActualSource[];
-  destinations: Destination[];
+  destinations: ActualDestination[];
 };
 
 export type ComputePlatform = {
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 33ac89b15..9d46db707 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -164,3 +164,21 @@ export interface DestinationConfig {
     [key: string]: string;
   };
 }
+
+export interface ActualDestination {
+  id: string;
+  name: string;
+  type: string;
+  signals: {
+    traces: boolean;
+    metrics: boolean;
+    logs: boolean;
+  };
+  fields: Record<string, any>;
+  conditions: Condition[];
+  destinationType: {
+    type: string;
+    displayName: string;
+    imageUrl: string;
+  };
+}

From 4e0b17f5c902109a992e44be1dd1cf0e30c56c6e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 17 Sep 2024 17:16:00 +0300
Subject: [PATCH 229/374] chore: wip

---
 .../overview-data-flow/graph/header/index.tsx | 58 +++++++++++++++++++
 .../overview-data-flow/graph/index.tsx        | 30 +++++++++-
 .../graph/nodes/base-node.tsx                 |  1 +
 .../webapp/public/icons/overview/actions.svg  |  3 +
 .../public/icons/overview/destinations.svg    |  5 ++
 .../webapp/public/icons/overview/sources.svg  |  3 +
 frontend/webapp/styles/theme.ts               |  4 +-
 frontend/webapp/types/destinations.ts         |  2 +-
 go.work                                       | 18 ++++++
 9 files changed, 120 insertions(+), 4 deletions(-)
 create mode 100644 frontend/webapp/containers/main/overview/overview-data-flow/graph/header/index.tsx
 create mode 100644 frontend/webapp/public/icons/overview/actions.svg
 create mode 100644 frontend/webapp/public/icons/overview/destinations.svg
 create mode 100644 frontend/webapp/public/icons/overview/sources.svg
 create mode 100644 go.work

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/header/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/header/index.tsx
new file mode 100644
index 000000000..500468f6e
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/header/index.tsx
@@ -0,0 +1,58 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+interface Column {
+  icon: string;
+  title: string;
+  tagValue: number;
+}
+
+interface DataFlowHeaderProps {
+  columns: Column[];
+}
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 32px;
+  width: calc(100% - 64px);
+`;
+
+const ColumnContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const TagValueContainer = styled.div`
+  border: 1px solid ${theme.colors.border};
+  padding: 0px 8px;
+  border-radius: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+`;
+
+const TagText = styled(Text)`
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  color: ${({ theme }) => theme.text.grey};
+`;
+
+export const DataFlowHeader: React.FC<DataFlowHeaderProps> = ({ columns }) => (
+  <HeaderContainer>
+    {columns.map((column, index) => (
+      <ColumnContainer key={index}>
+        <Image src={column.icon} width={16} height={16} alt={column.title} />
+        <Text size={14}>{column.title}</Text>
+        <TagValueContainer>
+          <TagText size={12}>{column.tagValue}</TagText>
+        </TagValueContainer>
+      </ColumnContainer>
+    ))}
+  </HeaderContainer>
+);
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
index 46abea3e5..9cd88ee63 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
@@ -5,6 +5,10 @@ import '@xyflow/react/dist/style.css';
 import BaseNode, { NodeDataProps } from './nodes/base-node';
 import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+import Image from 'next/image';
+import { Text } from '@/reuseable-components';
+import theme from '@/styles/theme';
+import { DataFlowHeader } from './header';
 
 const nodeTypes = {
   base: BaseNode,
@@ -17,6 +21,8 @@ export function NodeBaseDataFlow() {
   const { sources } = useActualSources();
   const { destinations } = useActualDestination();
 
+  console.log({ destinations });
+
   const sourcesNode = useMemo(() => {
     return sources.map((source, index) => ({
       type: 'base',
@@ -45,6 +51,7 @@ export function NodeBaseDataFlow() {
         title: destination.destinationType.displayName,
         subTitle: 'Destination',
         imageUri: destination.destinationType.imageUrl,
+        monitors: destination.exportedSignals,
         status: 'healthy',
         onClick: () => {
           console.log(destination);
@@ -71,8 +78,29 @@ export function NodeBaseDataFlow() {
     }));
   }, [actions]);
 
+  const COLUMNS = [
+    {
+      icon: '/icons/overview/sources.svg',
+      title: 'Sources',
+      tagValue: sources.length,
+    },
+    {
+      icon: '/icons/overview/actions.svg',
+      title: 'Actions',
+      tagValue: actions.length,
+    },
+    {
+      icon: '/icons/overview/destinations.svg',
+      title: 'Destinations',
+      tagValue: destinations.length,
+    },
+  ];
+
   return (
-    <div style={{ width: '100vw', height: '100vh' }}>
+    <div
+      style={{ height: '100vh', padding: '0 32px', width: 'calc(100% - 64px)' }}
+    >
+      <DataFlowHeader columns={COLUMNS} />
       <ReactFlow
         nodeTypes={nodeTypes}
         nodes={[...sourcesNode, ...destinationNode, ...actionsNode]}
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
index 94c1cf132..38f29ad40 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
@@ -65,6 +65,7 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
   console.log({ data });
 
   const { title, subTitle, imageUri, status, onClick } = data;
+
   return (
     <BaseNodeContainer onClick={onClick}>
       <SourceIconWrapper>
diff --git a/frontend/webapp/public/icons/overview/actions.svg b/frontend/webapp/public/icons/overview/actions.svg
new file mode 100644
index 000000000..5779cebbe
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/actions.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M4.03577 5.58623L7.87311 2.57807C8.96507 1.72206 9.51105 1.29405 9.88484 1.33635C10.2084 1.37297 10.4931 1.58015 10.6428 1.88795C10.8158 2.24356 10.6404 2.94122 10.2895 4.33655L9.99556 5.50565C9.85509 6.06426 9.78486 6.34357 9.83323 6.58606C9.87578 6.79937 9.9806 6.99284 10.1327 7.13876C10.3056 7.30464 10.5677 7.37948 11.0919 7.52916L11.432 7.62628C12.4401 7.91412 12.9442 8.05804 13.1457 8.35103C13.3209 8.60578 13.3771 8.93198 13.2982 9.23643C13.2074 9.58657 12.7841 9.91181 11.9376 10.5623L8.16976 13.4575C7.08454 14.2914 6.54192 14.7083 6.16999 14.6636C5.84799 14.6248 5.56547 14.4171 5.41715 14.1101C5.24584 13.7555 5.41898 13.0669 5.76527 11.6898L6.02808 10.6446C6.16855 10.0859 6.23878 9.80664 6.19041 9.56415C6.14786 9.35085 6.04304 9.15737 5.89096 9.01146C5.71807 8.84557 5.45596 8.77073 4.93173 8.62105L4.55326 8.51299C3.55574 8.22817 3.05698 8.08576 2.8556 7.79472C2.68046 7.5416 2.62311 7.21724 2.6998 6.91357C2.78798 6.5644 3.20391 6.23834 4.03577 5.58623Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/overview/destinations.svg b/frontend/webapp/public/icons/overview/destinations.svg
new file mode 100644
index 000000000..2547dbae7
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/destinations.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.9999 14.0999C11.3688 14.0999 14.0999 11.3688 14.0999 7.9999C14.0999 4.63096 11.3688 1.8999 7.9999 1.8999C4.63096 1.8999 1.8999 4.63096 1.8999 7.9999C1.8999 11.3688 4.63096 14.0999 7.9999 14.0999Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.99984 11.3332C9.84077 11.3332 11.3332 9.84077 11.3332 7.99984C11.3332 6.15889 9.84077 4.6665 7.99984 4.6665C6.15889 4.6665 4.6665 6.15889 4.6665 7.99984C4.6665 9.84077 6.15889 11.3332 7.99984 11.3332Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.6665 7.99984C8.6665 8.36804 8.36804 8.6665 7.99984 8.6665C7.63164 8.6665 7.33317 8.36804 7.33317 7.99984C7.33317 7.63164 7.63164 7.33317 7.99984 7.33317C8.36804 7.33317 8.6665 7.63164 8.6665 7.99984Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/overview/sources.svg b/frontend/webapp/public/icons/overview/sources.svg
new file mode 100644
index 000000000..cdefda568
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/sources.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M13.3332 3.8V8M13.3332 3.8C13.3332 4.79411 10.9454 5.6 7.99984 5.6C5.05432 5.6 2.6665 4.79411 2.6665 3.8M13.3332 3.8C13.3332 2.80589 10.9454 2 7.99984 2C5.05432 2 2.6665 2.80589 2.6665 3.8M13.3332 8V12.0875C13.3332 13.1437 10.9454 14 7.99984 14C5.05432 14 2.6665 13.1437 2.6665 12.0875V8M13.3332 8C13.3332 8.99413 10.9454 9.8 7.99984 9.8C5.05432 9.8 2.6665 8.99413 2.6665 8M2.6665 8V3.8M10.6665 7.33333H10.6732M10.6665 11.3333H10.6732" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 797779268..c41e757d8 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -6,7 +6,7 @@ const colors = {
   secondary: '#F9F9F9',
   dark_grey: '#151515',
   text: '#F9F9F9',
-  border: 'rgba(249, 249, 249, 0.08)',
+  border: '#525252',
   translucent_bg: '#1A1A1A',
   majestic_blue: '#444AD9',
   white_opacity: {
@@ -105,9 +105,9 @@ const colors = {
 const text = {
   primary: '#07111A',
   secondary: '#0EE6F3',
+  grey: '#B8B8B8',
   white: '#fff',
   light_grey: '#CCD0D2',
-  grey: '#8b92a5',
   dark_button: '#0A1824',
   success: '#81AF65',
   error: '#EF7676',
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 9d46db707..540995e71 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -169,7 +169,7 @@ export interface ActualDestination {
   id: string;
   name: string;
   type: string;
-  signals: {
+  exportedSignals: {
     traces: boolean;
     metrics: boolean;
     logs: boolean;
diff --git a/go.work b/go.work
new file mode 100644
index 000000000..d6db3b93c
--- /dev/null
+++ b/go.work
@@ -0,0 +1,18 @@
+go 1.22.0
+
+use (
+	./api
+	./autoscaler
+	./cli
+	./collector/odigosotelcol
+	./common
+	./destinations
+	./frontend
+	./instrumentor
+	./k8sutils
+	./odiglet
+	./opampserver
+	./procdiscovery
+	./scheduler
+	./collector/processors/odigostrafficmetrics
+)
\ No newline at end of file

From 8161a58ef57a560c83784f1b431e0cdf07a29329 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 18 Sep 2024 13:59:00 +0300
Subject: [PATCH 230/374] chore: added edges

---
 .../overview-data-flow/graph/header/index.tsx |  58 ------
 .../overview-data-flow/graph/index.tsx        | 116 +++---------
 .../graph/nodes/base-node.tsx                 |  67 ++++++-
 .../graph/nodes/header-node.tsx               |  54 ++++++
 .../overview/overview-data-flow/index.tsx     | 178 +++++++++++++++++-
 5 files changed, 304 insertions(+), 169 deletions(-)
 delete mode 100644 frontend/webapp/containers/main/overview/overview-data-flow/graph/header/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/header-node.tsx

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/header/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/header/index.tsx
deleted file mode 100644
index 500468f6e..000000000
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/header/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-import React from 'react';
-import Image from 'next/image';
-import theme from '@/styles/theme';
-import styled from 'styled-components';
-import { Text } from '@/reuseable-components';
-
-interface Column {
-  icon: string;
-  title: string;
-  tagValue: number;
-}
-
-interface DataFlowHeaderProps {
-  columns: Column[];
-}
-
-const HeaderContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0 32px;
-  width: calc(100% - 64px);
-`;
-
-const ColumnContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const TagValueContainer = styled.div`
-  border: 1px solid ${theme.colors.border};
-  padding: 0px 8px;
-  border-radius: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-`;
-
-const TagText = styled(Text)`
-  font-family: ${({ theme }) => theme.font_family.secondary};
-  color: ${({ theme }) => theme.text.grey};
-`;
-
-export const DataFlowHeader: React.FC<DataFlowHeaderProps> = ({ columns }) => (
-  <HeaderContainer>
-    {columns.map((column, index) => (
-      <ColumnContainer key={index}>
-        <Image src={column.icon} width={16} height={16} alt={column.title} />
-        <Text size={14}>{column.title}</Text>
-        <TagValueContainer>
-          <TagText size={12}>{column.tagValue}</TagText>
-        </TagValueContainer>
-      </ColumnContainer>
-    ))}
-  </HeaderContainer>
-);
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
index 9cd88ee63..74671043d 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
@@ -1,110 +1,36 @@
 'use client';
-import React, { useMemo } from 'react';
-import { ReactFlow } from '@xyflow/react';
+import React, { useEffect } from 'react';
 import '@xyflow/react/dist/style.css';
-import BaseNode, { NodeDataProps } from './nodes/base-node';
-import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
-import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import Image from 'next/image';
-import { Text } from '@/reuseable-components';
-import theme from '@/styles/theme';
-import { DataFlowHeader } from './header';
+import BaseNode from './nodes/base-node';
+import headerNode from './nodes/header-node';
+import { ReactFlow, useReactFlow } from '@xyflow/react';
 
 const nodeTypes = {
   base: BaseNode,
+  header: headerNode,
 };
 
-const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
-
-export function NodeBaseDataFlow() {
-  const { actions } = useGetActions();
-  const { sources } = useActualSources();
-  const { destinations } = useActualDestination();
-
-  console.log({ destinations });
-
-  const sourcesNode = useMemo(() => {
-    return sources.map((source, index) => ({
-      type: 'base',
-      id: `source-${index}`,
-      position: { x: 0, y: 100 * (index + 1) },
-      data: {
-        type: 'source',
-        title: source.name,
-        subTitle: source.kind,
-        imageUri: getMainContainerLanguageLogo(source),
-        status: 'healthy',
-        onClick: () => {
-          console.log(source);
-        },
-      },
-    }));
-  }, [sources]);
-
-  const destinationNode = useMemo(() => {
-    return destinations.map((destination, index) => ({
-      type: 'base',
-      id: `destination-${index}`,
-      position: { x: 1000, y: 100 * (index + 1) },
-      data: {
-        type: 'destination',
-        title: destination.destinationType.displayName,
-        subTitle: 'Destination',
-        imageUri: destination.destinationType.imageUrl,
-        monitors: destination.exportedSignals,
-        status: 'healthy',
-        onClick: () => {
-          console.log(destination);
-        },
-      },
-    }));
-  }, [destinations]);
-
-  const actionsNode = useMemo(() => {
-    return actions.map((action, index) => ({
-      type: 'base',
-      id: `action-${index}`,
-      position: { x: 500, y: 100 * (index + 1) },
-      data: {
-        type: 'action',
-        title: action.type,
-        subTitle: 'Action',
-        imageUri: '/icons/common/action.svg',
-        status: 'healthy',
-        onClick: () => {
-          console.log(action);
-        },
-      },
-    }));
-  }, [actions]);
+interface NodeBaseDataFlowProps {
+  nodes: any[];
+  edges: any[];
+}
 
-  const COLUMNS = [
-    {
-      icon: '/icons/overview/sources.svg',
-      title: 'Sources',
-      tagValue: sources.length,
-    },
-    {
-      icon: '/icons/overview/actions.svg',
-      title: 'Actions',
-      tagValue: actions.length,
-    },
-    {
-      icon: '/icons/overview/destinations.svg',
-      title: 'Destinations',
-      tagValue: destinations.length,
-    },
-  ];
+export function NodeBaseDataFlow({ nodes, edges }: NodeBaseDataFlowProps) {
+  const { fitView } = useReactFlow();
 
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     fitView();
+  //   }, 100);
+  // }, [fitView, nodes, edges]);
   return (
-    <div
-      style={{ height: '100vh', padding: '0 32px', width: 'calc(100% - 64px)' }}
-    >
-      <DataFlowHeader columns={COLUMNS} />
+    <div style={{ height: 'calc(100vh - 100px)' }}>
       <ReactFlow
         nodeTypes={nodeTypes}
-        nodes={[...sourcesNode, ...destinationNode, ...actionsNode]}
-        edges={initialEdges}
+        nodes={nodes}
+        edges={edges}
+        // panOnDrag={false}
+        zoomOnScroll={false}
       />
     </div>
   );
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
index 38f29ad40..301abafb8 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
@@ -11,7 +11,7 @@ const BaseNodeContainer = styled.div`
   gap: 8px;
   align-self: stretch;
   border-radius: 16px;
-  min-width: 296px;
+  width: 296px;
   cursor: pointer;
   background-color: ${({ theme }) => theme.colors.white_opacity['004']};
 
@@ -48,6 +48,7 @@ const TextWrapper = styled.div`
 `;
 
 export interface NodeDataProps {
+  type: 'source' | 'action' | 'destination';
   title: string;
   subTitle: string;
   imageUri: string;
@@ -62,9 +63,60 @@ interface BaseNodeProps {
 }
 
 export default memo(({ isConnectable, data }: BaseNodeProps) => {
-  console.log({ data });
+  const { title, subTitle, imageUri, status, onClick, type } = data;
 
-  const { title, subTitle, imageUri, status, onClick } = data;
+  function renderHandles() {
+    switch (type) {
+      case 'source':
+        return (
+          <>
+            {/* Source nodes have an output handle */}
+            <Handle
+              type="source"
+              position={Position.Right}
+              id="source-output"
+              style={{ visibility: 'hidden' }}
+              isConnectable={isConnectable}
+            />
+          </>
+        );
+      case 'action':
+        return (
+          <>
+            {/* Action nodes have both input and output handles */}
+            <Handle
+              type="target"
+              position={Position.Left}
+              id="action-input"
+              isConnectable={isConnectable}
+              style={{ visibility: 'hidden' }}
+            />
+            <Handle
+              type="source"
+              position={Position.Right}
+              id="action-output"
+              isConnectable={isConnectable}
+              style={{ visibility: 'hidden' }}
+            />
+          </>
+        );
+      case 'destination':
+        return (
+          <>
+            {/* Destination nodes only have an input handle */}
+            <Handle
+              style={{ visibility: 'hidden' }}
+              type="target"
+              position={Position.Left}
+              id="destination-input"
+              isConnectable={isConnectable}
+            />
+          </>
+        );
+      default:
+        return null;
+    }
+  }
 
   return (
     <BaseNodeContainer onClick={onClick}>
@@ -82,13 +134,8 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
           {subTitle}
         </Text>
       </TextWrapper>
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="a"
-        isConnectable={isConnectable}
-        style={{ visibility: 'hidden' }}
-      />
+      {/* Conditionally render handles based on node type */}
+      {renderHandles()}
     </BaseNodeContainer>
   );
 });
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/header-node.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/header-node.tsx
new file mode 100644
index 000000000..f8060475b
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/header-node.tsx
@@ -0,0 +1,54 @@
+'use client';
+import React, { memo } from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+const ColumnContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0px 16px 0px;
+  width: 336px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+`;
+
+const TagValueContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  padding: 0px 8px;
+  border-radius: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+`;
+
+const Title = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+`;
+
+const TagText = styled(Title)`
+  font-family: ${({ theme }) => theme.font_family.secondary};
+`;
+
+interface Column {
+  icon: string;
+  title: string;
+  tagValue: number;
+}
+
+interface HeaderNodeProps {
+  data: Column;
+}
+
+export default memo(({ data }: HeaderNodeProps) => {
+  return (
+    <ColumnContainer>
+      <Image src={data.icon} width={16} height={16} alt={data.title} />
+      <Title size={14}>{data.title}</Title>
+      <TagValueContainer>
+        <TagText size={12}>{data.tagValue}</TagText>
+      </TagValueContainer>
+    </ColumnContainer>
+  );
+});
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 10f5a3d4c..aa0d806a2 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,17 +1,183 @@
 'use client';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useMemo, useRef, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { NodeBaseDataFlow } from './graph';
+import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
+import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+import { ReactFlowProvider } from '@xyflow/react';
 
 export const OverviewDataFlowWrapper = styled.div`
-  width: 100%;
-  height: 100%;
+  width: calc(100% - 64px);
+  height: calc(100vh - 100px);
+  position: relative;
 `;
 
 export function OverviewDataFlowContainer() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+
+  const { actions } = useGetActions();
+  const { sources } = useActualSources();
+  const { destinations } = useActualDestination();
+
+  // Get the width of the container dynamically
+  useEffect(() => {
+    if (containerRef.current) {
+      setContainerWidth(
+        containerRef.current.getBoundingClientRect().width - 64
+      );
+    }
+
+    const handleResize = () => {
+      if (containerRef.current) {
+        setContainerWidth(
+          containerRef.current.getBoundingClientRect().width - 64
+        );
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const columnWidth = 296; // Assuming each column's width is 296px
+  const leftColumnX = 0;
+  const rightColumnX = containerWidth - columnWidth;
+  const centerColumnX = (containerWidth - columnWidth) / 2;
+
+  // Source Nodes
+  const sourcesNode = useMemo(() => {
+    const headerSource = {
+      type: 'header',
+      id: 'header-source',
+      position: { x: leftColumnX, y: 0 },
+      data: {
+        icon: '/icons/overview/sources.svg',
+        title: 'Sources',
+        tagValue: sources.length,
+      },
+    };
+
+    return [
+      headerSource,
+      ...sources.map((source, index) => ({
+        type: 'base',
+        id: `source-${index}`,
+        position: { x: leftColumnX, y: 80 * (index + 1) },
+        data: {
+          type: 'source',
+          title: source.name,
+          subTitle: source.kind,
+          imageUri: getMainContainerLanguageLogo(source),
+          status: 'healthy',
+          onClick: () => {
+            console.log(source);
+          },
+        },
+      })),
+    ];
+  }, [sources, leftColumnX]);
+
+  // Destination Nodes
+  const destinationNode = useMemo(() => {
+    const headerDestination = {
+      type: 'header',
+      id: 'header-destination',
+      position: { x: rightColumnX, y: 0 },
+      data: {
+        icon: '/icons/overview/destinations.svg',
+        title: 'Destinations',
+        tagValue: destinations.length,
+      },
+    };
+
+    return [
+      headerDestination,
+      ...destinations.map((destination, index) => ({
+        type: 'base',
+        id: `destination-${index}`,
+        position: { x: rightColumnX, y: 80 * (index + 1) },
+        data: {
+          type: 'destination',
+          title: destination.destinationType.displayName,
+          subTitle: 'Destination',
+          imageUri: destination.destinationType.imageUrl,
+          monitors: destination.exportedSignals,
+          status: 'healthy',
+          onClick: () => {
+            console.log(destination);
+          },
+        },
+      })),
+    ];
+  }, [destinations, rightColumnX]);
+
+  // Actions Nodes
+  const actionsNode = useMemo(() => {
+    const headerAction = {
+      type: 'header',
+      id: 'header-action',
+      position: { x: centerColumnX, y: 0 },
+      data: {
+        icon: '/icons/overview/actions.svg',
+        title: 'Actions',
+        tagValue: actions.length,
+      },
+    };
+
+    return [
+      headerAction,
+      ...actions.map((action, index) => ({
+        type: 'base',
+        id: `action-${index}`,
+        position: { x: centerColumnX, y: 80 * (index + 1) },
+        data: {
+          type: 'action',
+          title: action.type,
+          subTitle: 'Action',
+          imageUri: '/icons/common/action.svg',
+          status: 'healthy',
+          onClick: () => {
+            console.log(action);
+          },
+        },
+      })),
+    ];
+  }, [actions, centerColumnX]);
+
+  // Create edges connecting sources to actions, and actions to destinations
+  const edges = useMemo(() => {
+    const sourceToActionEdges = sources.map((_, sourceIndex) => {
+      const actionIndex = sourceIndex % actions.length;
+      return {
+        id: `source-${sourceIndex}-to-action-${actionIndex}`,
+        source: `source-${sourceIndex}`,
+        target: `action-${actionIndex}`,
+        style: { stroke: '#525252' },
+      };
+    });
+
+    const actionToDestinationEdges = actions.flatMap((_, actionIndex) => {
+      // Create an edge from each action to each destination
+      return destinations.map((_, destinationIndex) => ({
+        id: `action-${actionIndex}-to-destination-${destinationIndex}`,
+        source: `action-${actionIndex}`,
+        target: `destination-${destinationIndex}`,
+        style: { stroke: '#525252' },
+      }));
+    });
+
+    return [...sourceToActionEdges, ...actionToDestinationEdges];
+  }, [sources, actions, destinations]);
+
   return (
-    <OverviewDataFlowWrapper>
-      <NodeBaseDataFlow />
-    </OverviewDataFlowWrapper>
+    <ReactFlowProvider>
+      <OverviewDataFlowWrapper ref={containerRef} className="nowheel">
+        <NodeBaseDataFlow
+          nodes={[...sourcesNode, ...destinationNode, ...actionsNode]}
+          edges={edges}
+        />
+      </OverviewDataFlowWrapper>
+    </ReactFlowProvider>
   );
 }

From 078fc5b2159a95c31855e815bb66bec8f964a6f4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 18 Sep 2024 15:11:24 +0300
Subject: [PATCH 231/374] chore: wip

---
 .../overview-data-flow/graph/builder.ts       | 137 ++++++++++++++++
 .../overview-data-flow/graph/index.tsx        |  12 +-
 .../overview/overview-data-flow/index.tsx     | 153 ++----------------
 frontend/webapp/package.json                  |   1 +
 frontend/webapp/yarn.lock                     |  31 ++++
 5 files changed, 186 insertions(+), 148 deletions(-)
 create mode 100644 frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts b/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts
new file mode 100644
index 000000000..c7134e054
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts
@@ -0,0 +1,137 @@
+import { Node, Edge } from 'react-flow-renderer';
+import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+import { ActionData, ActualDestination, K8sActualSource } from '@/types';
+
+interface BuildNodesAndEdgesProps {
+  sources: K8sActualSource[];
+  actions: ActionData[];
+  destinations: ActualDestination[];
+  columnWidth: number;
+  containerWidth: number;
+}
+
+export const buildNodesAndEdges = ({
+  sources,
+  actions,
+  destinations,
+  columnWidth,
+  containerWidth,
+}: BuildNodesAndEdgesProps) => {
+  const leftColumnX = 0;
+  const rightColumnX = containerWidth - columnWidth;
+  const centerColumnX = (containerWidth - columnWidth) / 2;
+
+  const nodes: Node[] = [];
+
+  // Source Nodes
+  const sourcesNode: Node[] = [
+    {
+      type: 'header',
+      id: 'header-source',
+      position: { x: leftColumnX, y: 0 },
+      data: {
+        icon: '/icons/overview/sources.svg',
+        title: 'Sources',
+        tagValue: sources.length,
+      },
+    },
+    ...sources.map((source, index) => ({
+      id: `source-${index}`,
+      type: 'base',
+      position: { x: leftColumnX, y: 80 * (index + 1) },
+      data: {
+        type: 'source',
+        title: source.name,
+        subTitle: source.kind,
+        imageUri: getMainContainerLanguageLogo(source),
+        status: 'healthy',
+        onClick: () => console.log(source),
+      },
+    })),
+  ];
+
+  // Destination Nodes
+  const destinationNode: Node[] = [
+    {
+      type: 'header',
+      id: 'header-destination',
+      position: { x: rightColumnX, y: 0 },
+      data: {
+        icon: '/icons/overview/destinations.svg',
+        title: 'Destinations',
+        tagValue: destinations.length,
+      },
+    },
+    ...destinations.map((destination, index) => ({
+      id: `destination-${index}`,
+      type: 'base',
+      position: { x: rightColumnX, y: 80 * (index + 1) },
+      data: {
+        type: 'destination',
+        title: destination.destinationType.displayName,
+        subTitle: 'Destination',
+        imageUri: destination.destinationType.imageUrl,
+        status: 'healthy',
+        onClick: () => console.log(destination),
+      },
+    })),
+  ];
+
+  // Actions Nodes
+  const actionsNode: Node[] = [
+    {
+      type: 'header',
+      id: 'header-action',
+      position: { x: centerColumnX, y: 0 },
+      data: {
+        icon: '/icons/overview/actions.svg',
+        title: 'Actions',
+        tagValue: actions.length,
+      },
+    },
+    ...actions.map((action, index) => ({
+      id: `action-${index}`,
+      type: 'base',
+      position: { x: centerColumnX, y: 80 * (index + 1) },
+      data: {
+        type: 'action',
+        title: action.type,
+        subTitle: 'Action',
+        imageUri: '/icons/common/action.svg',
+        status: 'healthy',
+        onClick: () => console.log(action),
+      },
+    })),
+  ];
+
+  // Combine all nodes
+  nodes.push(...sourcesNode, ...destinationNode, ...actionsNode);
+
+  // Edges - Connecting sources to actions and actions to destinations
+  const edges: Edge[] = [];
+
+  const sourceToActionEdges: Edge[] = sources.map((_, sourceIndex) => {
+    const actionIndex = sourceIndex % actions.length;
+    return {
+      id: `source-${sourceIndex}-to-action-${actionIndex}`,
+      source: `source-${sourceIndex}`,
+      target: `action-${actionIndex}`,
+      animated: true,
+      style: { stroke: '#525252' },
+    };
+  });
+
+  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) => {
+    return destinations.map((_, destinationIndex) => ({
+      id: `action-${actionIndex}-to-destination-${destinationIndex}`,
+      source: `action-${actionIndex}`,
+      target: `destination-${destinationIndex}`,
+      animated: true,
+      style: { stroke: '#525252' },
+    }));
+  });
+
+  edges.push(...sourceToActionEdges, ...actionToDestinationEdges);
+
+  return { nodes, edges };
+};
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
index 74671043d..256644769 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
@@ -1,9 +1,9 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import '@xyflow/react/dist/style.css';
 import BaseNode from './nodes/base-node';
 import headerNode from './nodes/header-node';
-import { ReactFlow, useReactFlow } from '@xyflow/react';
+import { ReactFlow } from '@xyflow/react';
 
 const nodeTypes = {
   base: BaseNode,
@@ -16,20 +16,12 @@ interface NodeBaseDataFlowProps {
 }
 
 export function NodeBaseDataFlow({ nodes, edges }: NodeBaseDataFlowProps) {
-  const { fitView } = useReactFlow();
-
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     fitView();
-  //   }, 100);
-  // }, [fitView, nodes, edges]);
   return (
     <div style={{ height: 'calc(100vh - 100px)' }}>
       <ReactFlow
         nodeTypes={nodeTypes}
         nodes={nodes}
         edges={edges}
-        // panOnDrag={false}
         zoomOnScroll={false}
       />
     </div>
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index aa0d806a2..6a7768cf9 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,10 +1,9 @@
 'use client';
-import React, { useMemo, useRef, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { NodeBaseDataFlow } from './graph';
+import { buildNodesAndEdges } from './graph/builder';
+import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
-import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import { ReactFlowProvider } from '@xyflow/react';
 
 export const OverviewDataFlowWrapper = styled.div`
   width: calc(100% - 64px);
@@ -40,144 +39,22 @@ export function OverviewDataFlowContainer() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  const columnWidth = 296; // Assuming each column's width is 296px
-  const leftColumnX = 0;
-  const rightColumnX = containerWidth - columnWidth;
-  const centerColumnX = (containerWidth - columnWidth) / 2;
-
-  // Source Nodes
-  const sourcesNode = useMemo(() => {
-    const headerSource = {
-      type: 'header',
-      id: 'header-source',
-      position: { x: leftColumnX, y: 0 },
-      data: {
-        icon: '/icons/overview/sources.svg',
-        title: 'Sources',
-        tagValue: sources.length,
-      },
-    };
-
-    return [
-      headerSource,
-      ...sources.map((source, index) => ({
-        type: 'base',
-        id: `source-${index}`,
-        position: { x: leftColumnX, y: 80 * (index + 1) },
-        data: {
-          type: 'source',
-          title: source.name,
-          subTitle: source.kind,
-          imageUri: getMainContainerLanguageLogo(source),
-          status: 'healthy',
-          onClick: () => {
-            console.log(source);
-          },
-        },
-      })),
-    ];
-  }, [sources, leftColumnX]);
-
-  // Destination Nodes
-  const destinationNode = useMemo(() => {
-    const headerDestination = {
-      type: 'header',
-      id: 'header-destination',
-      position: { x: rightColumnX, y: 0 },
-      data: {
-        icon: '/icons/overview/destinations.svg',
-        title: 'Destinations',
-        tagValue: destinations.length,
-      },
-    };
-
-    return [
-      headerDestination,
-      ...destinations.map((destination, index) => ({
-        type: 'base',
-        id: `destination-${index}`,
-        position: { x: rightColumnX, y: 80 * (index + 1) },
-        data: {
-          type: 'destination',
-          title: destination.destinationType.displayName,
-          subTitle: 'Destination',
-          imageUri: destination.destinationType.imageUrl,
-          monitors: destination.exportedSignals,
-          status: 'healthy',
-          onClick: () => {
-            console.log(destination);
-          },
-        },
-      })),
-    ];
-  }, [destinations, rightColumnX]);
-
-  // Actions Nodes
-  const actionsNode = useMemo(() => {
-    const headerAction = {
-      type: 'header',
-      id: 'header-action',
-      position: { x: centerColumnX, y: 0 },
-      data: {
-        icon: '/icons/overview/actions.svg',
-        title: 'Actions',
-        tagValue: actions.length,
-      },
-    };
-
-    return [
-      headerAction,
-      ...actions.map((action, index) => ({
-        type: 'base',
-        id: `action-${index}`,
-        position: { x: centerColumnX, y: 80 * (index + 1) },
-        data: {
-          type: 'action',
-          title: action.type,
-          subTitle: 'Action',
-          imageUri: '/icons/common/action.svg',
-          status: 'healthy',
-          onClick: () => {
-            console.log(action);
-          },
-        },
-      })),
-    ];
-  }, [actions, centerColumnX]);
+  const columnWidth = 296;
 
-  // Create edges connecting sources to actions, and actions to destinations
-  const edges = useMemo(() => {
-    const sourceToActionEdges = sources.map((_, sourceIndex) => {
-      const actionIndex = sourceIndex % actions.length;
-      return {
-        id: `source-${sourceIndex}-to-action-${actionIndex}`,
-        source: `source-${sourceIndex}`,
-        target: `action-${actionIndex}`,
-        style: { stroke: '#525252' },
-      };
+  // Memoized node and edge builder to improve performance
+  const { nodes, edges } = useMemo(() => {
+    return buildNodesAndEdges({
+      sources,
+      actions,
+      destinations,
+      columnWidth,
+      containerWidth,
     });
-
-    const actionToDestinationEdges = actions.flatMap((_, actionIndex) => {
-      // Create an edge from each action to each destination
-      return destinations.map((_, destinationIndex) => ({
-        id: `action-${actionIndex}-to-destination-${destinationIndex}`,
-        source: `action-${actionIndex}`,
-        target: `destination-${destinationIndex}`,
-        style: { stroke: '#525252' },
-      }));
-    });
-
-    return [...sourceToActionEdges, ...actionToDestinationEdges];
-  }, [sources, actions, destinations]);
+  }, [sources, actions, destinations, columnWidth, containerWidth]);
 
   return (
-    <ReactFlowProvider>
-      <OverviewDataFlowWrapper ref={containerRef} className="nowheel">
-        <NodeBaseDataFlow
-          nodes={[...sourcesNode, ...destinationNode, ...actionsNode]}
-          edges={edges}
-        />
-      </OverviewDataFlowWrapper>
-    </ReactFlowProvider>
+    <OverviewDataFlowWrapper ref={containerRef}>
+      <NodeBaseDataFlow nodes={nodes} edges={edges} />
+    </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index 2a3942389..8c720154e 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -31,6 +31,7 @@
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-flow-renderer": "^10.3.17",
     "react-query": "^3.39.3",
     "react-redux": "^9.1.0",
     "styled-components": "^6.0.2",
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index 23701319a..6f1455469 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -1065,6 +1065,13 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime@^7.18.9":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.23.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
@@ -2308,6 +2315,11 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/resize-observer-browser@^0.1.7":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz#d3c98d788489d8376b7beac23863b1eebdd3c13c"
+  integrity sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==
+
 "@types/scheduler@*":
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.23.0.tgz#0a6655b3e2708eaabca00b7372fafd7a792a7b09"
@@ -5407,6 +5419,20 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-flow-renderer@^10.3.17:
+  version "10.3.17"
+  resolved "https://registry.yarnpkg.com/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz#06d6ecef5559ba5d3e64d2c8dcb74c43071d62b1"
+  integrity sha512-bywiqVErlh5kCDqw3x0an5Ur3mT9j9CwJsDwmhmz4i1IgYM1a0SPqqEhClvjX+s5pU4nHjmVaGXWK96pwsiGcQ==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@types/d3" "^7.4.0"
+    "@types/resize-observer-browser" "^0.1.7"
+    classcat "^5.0.3"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^3.7.2"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -6457,6 +6483,11 @@ zod@3.21.4:
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
   integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
 
+zustand@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
+  integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==
+
 zustand@^4.3.1, zustand@^4.4.1:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.4.tgz#63abdd81edfb190bc61e0bbae045cc4d52158a05"

From 5250a0140cf78061313ba3a1ef6f469dc4b3355f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 18 Sep 2024 16:51:40 +0300
Subject: [PATCH 232/374] chore: wip

---
 .../overview-data-flow/graph/builder.ts       | 243 ++++++++++--------
 .../graph/nodes/base-node.tsx                 |  53 +++-
 .../graphql/queries/compute-platform.ts       |   1 +
 .../public/icons/actions/piimasking.svg       |   3 +
 frontend/webapp/types/actions.ts              |   2 +-
 5 files changed, 187 insertions(+), 115 deletions(-)
 create mode 100644 frontend/webapp/public/icons/actions/piimasking.svg

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts b/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts
index c7134e054..3923479cc 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts
@@ -1,14 +1,54 @@
 import { Node, Edge } from 'react-flow-renderer';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import { ActionData, ActualDestination, K8sActualSource } from '@/types';
+import {
+  ActionData,
+  ActionItem,
+  ActualDestination,
+  K8sActualSource,
+} from '@/types';
+import theme from '@/styles/theme';
 
-interface BuildNodesAndEdgesProps {
-  sources: K8sActualSource[];
-  actions: ActionData[];
-  destinations: ActualDestination[];
-  columnWidth: number;
-  containerWidth: number;
-}
+// Constants
+const NODE_HEIGHT = 80;
+const COLUMN_WIDTH = 296;
+const STROKE_COLOR = theme.colors.border;
+const ACTION_ICON_PATH = '/icons/actions/';
+const HEADER_ICON_PATH = '/icons/overview/';
+const POSITION_OFFSET = 64;
+
+// Helper to create a node
+const createNode = (
+  id: string,
+  type: string,
+  x: number,
+  y: number,
+  data: Record<string, any>
+): Node => ({
+  id,
+  type,
+  position: { x, y },
+  data,
+});
+
+// Helper to create an edge
+const createEdge = (
+  id: string,
+  source: string,
+  target: string,
+  animated = true
+): Edge => ({
+  id,
+  source,
+  target,
+  animated,
+  style: { stroke: STROKE_COLOR },
+});
+
+// Extract the monitors from exported signals
+const extractMonitors = (exportedSignals: Record<string, boolean>) =>
+  Object.keys(exportedSignals).filter(
+    (signal) => exportedSignals[signal] === true
+  );
 
 export const buildNodesAndEdges = ({
   sources,
@@ -16,121 +56,122 @@ export const buildNodesAndEdges = ({
   destinations,
   columnWidth,
   containerWidth,
-}: BuildNodesAndEdgesProps) => {
+}) => {
+  // Calculate x positions for each column
   const leftColumnX = 0;
   const rightColumnX = containerWidth - columnWidth;
   const centerColumnX = (containerWidth - columnWidth) / 2;
 
-  const nodes: Node[] = [];
-
-  // Source Nodes
+  // Build Source Nodes
   const sourcesNode: Node[] = [
-    {
-      type: 'header',
-      id: 'header-source',
-      position: { x: leftColumnX, y: 0 },
-      data: {
-        icon: '/icons/overview/sources.svg',
-        title: 'Sources',
-        tagValue: sources.length,
-      },
-    },
-    ...sources.map((source, index) => ({
-      id: `source-${index}`,
-      type: 'base',
-      position: { x: leftColumnX, y: 80 * (index + 1) },
-      data: {
-        type: 'source',
-        title: source.name,
-        subTitle: source.kind,
-        imageUri: getMainContainerLanguageLogo(source),
-        status: 'healthy',
-        onClick: () => console.log(source),
-      },
-    })),
+    createNode('header-source', 'header', leftColumnX, 0, {
+      icon: `${HEADER_ICON_PATH}sources.svg`,
+      title: 'Sources',
+      tagValue: sources.length,
+    }),
+    ...sources.map((source, index) =>
+      createNode(
+        `source-${index}`,
+        'base',
+        leftColumnX,
+        NODE_HEIGHT * (index + 1),
+        {
+          type: 'source',
+          title: source.name,
+          subTitle: source.kind,
+          imageUri: getMainContainerLanguageLogo(source),
+          status: 'healthy',
+          onClick: () => console.log(source),
+        }
+      )
+    ),
   ];
 
-  // Destination Nodes
+  // Build Destination Nodes
   const destinationNode: Node[] = [
-    {
-      type: 'header',
-      id: 'header-destination',
-      position: { x: rightColumnX, y: 0 },
-      data: {
-        icon: '/icons/overview/destinations.svg',
-        title: 'Destinations',
-        tagValue: destinations.length,
-      },
-    },
-    ...destinations.map((destination, index) => ({
-      id: `destination-${index}`,
-      type: 'base',
-      position: { x: rightColumnX, y: 80 * (index + 1) },
-      data: {
-        type: 'destination',
-        title: destination.destinationType.displayName,
-        subTitle: 'Destination',
-        imageUri: destination.destinationType.imageUrl,
-        status: 'healthy',
-        onClick: () => console.log(destination),
-      },
-    })),
+    createNode('header-destination', 'header', rightColumnX, 0, {
+      icon: `${HEADER_ICON_PATH}destinations.svg`,
+      title: 'Destinations',
+      tagValue: destinations.length,
+    }),
+    ...destinations.map((destination, index) =>
+      createNode(
+        `destination-${index}`,
+        'base',
+        rightColumnX,
+        NODE_HEIGHT * (index + 1),
+        {
+          type: 'destination',
+          title: destination.name,
+          subTitle: destination.destinationType.displayName,
+          imageUri: destination.destinationType.imageUrl,
+          status: 'healthy',
+          monitors: extractMonitors(destination.exportedSignals),
+          onClick: () => console.log(destination),
+        }
+      )
+    ),
   ];
 
-  // Actions Nodes
+  // Build Action Nodes
   const actionsNode: Node[] = [
-    {
-      type: 'header',
-      id: 'header-action',
-      position: { x: centerColumnX, y: 0 },
-      data: {
-        icon: '/icons/overview/actions.svg',
-        title: 'Actions',
-        tagValue: actions.length,
-      },
-    },
-    ...actions.map((action, index) => ({
-      id: `action-${index}`,
-      type: 'base',
-      position: { x: centerColumnX, y: 80 * (index + 1) },
-      data: {
-        type: 'action',
-        title: action.type,
-        subTitle: 'Action',
-        imageUri: '/icons/common/action.svg',
-        status: 'healthy',
-        onClick: () => console.log(action),
-      },
-    })),
+    createNode('header-action', 'header', centerColumnX, 0, {
+      icon: `${HEADER_ICON_PATH}actions.svg`,
+      title: 'Actions',
+      tagValue: actions.length,
+    }),
+    ...actions.map((action, index) => {
+      const actionSpec: ActionItem =
+        typeof action.spec === 'string'
+          ? JSON.parse(action.spec)
+          : (action.spec as ActionItem);
+
+      return createNode(
+        `action-${index}`,
+        'base',
+        centerColumnX,
+        NODE_HEIGHT * (index + 1),
+        {
+          type: 'action',
+          title: actionSpec.actionName,
+          subTitle: action.type,
+          imageUri: `${ACTION_ICON_PATH}${action.type.toLowerCase()}.svg`,
+          monitors: actionSpec.signals,
+          status: 'healthy',
+          onClick: () => console.log(action),
+        }
+      );
+    }),
   ];
 
   // Combine all nodes
-  nodes.push(...sourcesNode, ...destinationNode, ...actionsNode);
+  const nodes = [...sourcesNode, ...destinationNode, ...actionsNode];
 
-  // Edges - Connecting sources to actions and actions to destinations
+  // Build edges - connecting sources to actions, and actions to destinations
   const edges: Edge[] = [];
 
+  // Connect sources to actions
   const sourceToActionEdges: Edge[] = sources.map((_, sourceIndex) => {
     const actionIndex = sourceIndex % actions.length;
-    return {
-      id: `source-${sourceIndex}-to-action-${actionIndex}`,
-      source: `source-${sourceIndex}`,
-      target: `action-${actionIndex}`,
-      animated: true,
-      style: { stroke: '#525252' },
-    };
+    return createEdge(
+      `source-${sourceIndex}-to-action-${actionIndex}`,
+      `source-${sourceIndex}`,
+      `action-${actionIndex}`
+    );
   });
 
-  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) => {
-    return destinations.map((_, destinationIndex) => ({
-      id: `action-${actionIndex}-to-destination-${destinationIndex}`,
-      source: `action-${actionIndex}`,
-      target: `destination-${destinationIndex}`,
-      animated: true,
-      style: { stroke: '#525252' },
-    }));
-  });
+  // Connect actions to destinations
+  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) =>
+    destinations.map((_, destinationIndex) =>
+      createEdge(
+        `action-${actionIndex}-to-destination-${destinationIndex}`,
+        `action-${actionIndex}`,
+        `destination-${destinationIndex}`
+      )
+    )
+  );
 
+  // Combine all edges
   edges.push(...sourceToActionEdges, ...actionToDestinationEdges);
 
   return { nodes, edges };
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
index 301abafb8..393d1c2ee 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
@@ -20,11 +20,6 @@ const BaseNodeContainer = styled.div`
   }
 `;
 
-const ListItemContent = styled.div`
-  display: flex;
-  gap: 12px;
-`;
-
 const SourceIconWrapper = styled.div`
   display: flex;
   width: 36px;
@@ -40,13 +35,24 @@ const SourceIconWrapper = styled.div`
   );
 `;
 
-const TextWrapper = styled.div`
+const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   height: 36px;
   justify-content: space-between;
 `;
 
+const FooterWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+
+const FooterText = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  font-size: 10px;
+`;
+
 export interface NodeDataProps {
   type: 'source' | 'action' | 'destination';
   title: string;
@@ -63,7 +69,7 @@ interface BaseNodeProps {
 }
 
 export default memo(({ isConnectable, data }: BaseNodeProps) => {
-  const { title, subTitle, imageUri, status, onClick, type } = data;
+  const { title, subTitle, imageUri, status, onClick, type, monitors } = data;
 
   function renderHandles() {
     switch (type) {
@@ -118,6 +124,26 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
     }
   }
 
+  function renderMonitors() {
+    if (monitors) {
+      return (
+        <FooterWrapper>
+          <FooterText>{'·'}</FooterText>
+          {monitors.map((monitor, index) => (
+            <Image
+              key={index}
+              src={`/icons/monitors/${monitor}.svg`}
+              width={10}
+              height={10}
+              alt={monitor}
+            />
+          ))}
+        </FooterWrapper>
+      );
+    }
+    return null;
+  }
+
   return (
     <BaseNodeContainer onClick={onClick}>
       <SourceIconWrapper>
@@ -128,13 +154,14 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
           alt="source"
         />
       </SourceIconWrapper>
-      <TextWrapper>
+      <BodyWrapper>
         <Text>{title}</Text>
-        <Text opacity={0.8} size={10}>
-          {subTitle}
-        </Text>
-      </TextWrapper>
-      {/* Conditionally render handles based on node type */}
+        <FooterWrapper>
+          <FooterText>{subTitle}</FooterText>
+
+          {renderMonitors()}
+        </FooterWrapper>
+      </BodyWrapper>
       {renderHandles()}
     </BaseNodeContainer>
   );
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index cb7abdaa9..9f579becf 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -33,6 +33,7 @@ export const GET_COMPUTE_PLATFORM = gql`
       }
       actions {
         type
+        spec
       }
       k8sActualNamespaces {
         name
diff --git a/frontend/webapp/public/icons/actions/piimasking.svg b/frontend/webapp/public/icons/actions/piimasking.svg
new file mode 100644
index 000000000..524de812e
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/piimasking.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M13.9486 9.71582C13.8698 9.87282 13.6245 9.98885 13.1338 10.2209L8.95284 12.198C8.60345 12.3632 8.42876 12.4458 8.24552 12.4783C8.08323 12.5071 7.91669 12.5071 7.7544 12.4783C7.57117 12.4458 7.39647 12.3632 7.04709 12.198L2.86615 10.2209C2.37544 9.98885 2.13008 9.87282 2.05135 9.71582M8.95288 9.19806L13.1338 7.22096C13.6245 6.98891 13.8699 6.87289 13.9486 6.71588C14.0171 6.57926 14.0171 6.42074 13.9486 6.28412C13.8699 6.12711 13.6245 6.01109 13.1338 5.77904L8.95288 3.80194C8.60349 3.63672 8.4288 3.55411 8.24556 3.5216C8.08327 3.4928 7.91673 3.4928 7.75444 3.5216C7.5712 3.55411 7.39651 3.63672 7.04712 3.80194L2.86618 5.77904C2.37547 6.01109 2.13012 6.12711 2.05139 6.28412C1.98287 6.42074 1.98287 6.57926 2.05139 6.71588C2.13012 6.87289 2.37547 6.98891 2.86618 7.22096L7.04712 9.19806C7.39651 9.36328 7.5712 9.44589 7.75444 9.4784C7.91673 9.5072 8.08327 9.5072 8.24556 9.4784C8.4288 9.44589 8.60349 9.36328 8.95288 9.19806Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/types/actions.ts b/frontend/webapp/types/actions.ts
index 3e2ea1bb9..37ba58dbe 100644
--- a/frontend/webapp/types/actions.ts
+++ b/frontend/webapp/types/actions.ts
@@ -34,7 +34,7 @@ export interface ActionItem {
 export interface ActionData {
   id: string;
   type: string;
-  spec: ActionItem;
+  spec: ActionItem | string;
 }
 
 interface Monitor {

From d1b9a68f09ea73e833175143a2d7b7623954a8db Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Wed, 18 Sep 2024 16:55:43 +0300
Subject: [PATCH 233/374] Delete go.work

---
 go.work | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 go.work

diff --git a/go.work b/go.work
deleted file mode 100644
index d6db3b93c..000000000
--- a/go.work
+++ /dev/null
@@ -1,18 +0,0 @@
-go 1.22.0
-
-use (
-	./api
-	./autoscaler
-	./cli
-	./collector/odigosotelcol
-	./common
-	./destinations
-	./frontend
-	./instrumentor
-	./k8sutils
-	./odiglet
-	./opampserver
-	./procdiscovery
-	./scheduler
-	./collector/processors/odigostrafficmetrics
-)
\ No newline at end of file

From 271468352829e25b4024ba79396a1f917c8ca44e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 18 Sep 2024 17:10:31 +0300
Subject: [PATCH 234/374] chore: move data flow to design stem

---
 .../main/overview/overview-data-flow/index.tsx         |  3 +--
 frontend/webapp/reuseable-components/index.ts          |  1 +
 .../nodes-data-flow}/builder.ts                        | 10 ++--------
 .../nodes-data-flow}/index.tsx                         |  2 ++
 .../nodes-data-flow}/nodes/base-node.tsx               |  0
 .../nodes-data-flow}/nodes/header-node.tsx             |  0
 6 files changed, 6 insertions(+), 10 deletions(-)
 rename frontend/webapp/{containers/main/overview/overview-data-flow/graph => reuseable-components/nodes-data-flow}/builder.ts (96%)
 rename frontend/webapp/{containers/main/overview/overview-data-flow/graph => reuseable-components/nodes-data-flow}/index.tsx (95%)
 rename frontend/webapp/{containers/main/overview/overview-data-flow/graph => reuseable-components/nodes-data-flow}/nodes/base-node.tsx (100%)
 rename frontend/webapp/{containers/main/overview/overview-data-flow/graph => reuseable-components/nodes-data-flow}/nodes/header-node.tsx (100%)

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 6a7768cf9..c7dfef309 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,9 +1,8 @@
 'use client';
 import styled from 'styled-components';
-import { NodeBaseDataFlow } from './graph';
-import { buildNodesAndEdges } from './graph/builder';
 import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
+import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
 
 export const OverviewDataFlowWrapper = styled.div`
   width: calc(100% - 64px);
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index d61b5bb5d..3d5ceee37 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -20,3 +20,4 @@ export * from './key-value-input-list';
 export * from './no-data-found';
 export * from './skeleton-loader';
 export * from './connection-status';
+export * from './nodes-data-flow';
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
similarity index 96%
rename from frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts
rename to frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 3923479cc..bb12eb90b 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,20 +1,14 @@
 import { Node, Edge } from 'react-flow-renderer';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import {
-  ActionData,
-  ActionItem,
-  ActualDestination,
-  K8sActualSource,
-} from '@/types';
+import { ActionItem } from '@/types';
 import theme from '@/styles/theme';
 
 // Constants
 const NODE_HEIGHT = 80;
-const COLUMN_WIDTH = 296;
+
 const STROKE_COLOR = theme.colors.border;
 const ACTION_ICON_PATH = '/icons/actions/';
 const HEADER_ICON_PATH = '/icons/overview/';
-const POSITION_OFFSET = 64;
 
 // Helper to create a node
 const createNode = (
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
similarity index 95%
rename from frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
rename to frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
index 256644769..67bdfa4f0 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/graph/index.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -27,3 +27,5 @@ export function NodeBaseDataFlow({ nodes, edges }: NodeBaseDataFlowProps) {
     </div>
   );
 }
+
+export * from './builder';
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
similarity index 100%
rename from frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/base-node.tsx
rename to frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/header-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
similarity index 100%
rename from frontend/webapp/containers/main/overview/overview-data-flow/graph/nodes/header-node.tsx
rename to frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx

From afb5a5ce684943d5d87e3a37d3eb86b3f7c1720f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 23 Sep 2024 12:16:15 +0300
Subject: [PATCH 235/374] refactor: init zustand

---
 .../connect-destination-modal-body/index.tsx  |  9 +--
 .../destinations/add-destination/index.tsx    | 10 ++--
 .../main/sources/choose-sources/index.tsx     |  9 ++-
 .../webapp/containers/setup/sources/index.tsx |  9 ++-
 frontend/webapp/hooks/setup/useConnectEnv.ts  | 17 +++---
 .../sources/useConnectSourcesMenuState.ts     |  7 ++-
 frontend/webapp/package.json                  |  3 +-
 frontend/webapp/store/index.ts                |  1 +
 frontend/webapp/store/slices/app-slice.ts     |  4 +-
 frontend/webapp/store/useAppStore.ts          | 56 +++++++++++++++++++
 frontend/webapp/yarn.lock                     |  5 ++
 11 files changed, 94 insertions(+), 36 deletions(-)
 create mode 100644 frontend/webapp/store/useAppStore.ts

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index f316b7e14..118c46744 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { useAppStore } from '@/store';
 import styled from 'styled-components';
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
-import { useDispatch } from 'react-redux';
-import { addConfiguredDestination } from '@/store';
 import { TestConnection } from '../test-connection';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { Body, Container, SideMenuWrapper } from '../styled';
@@ -81,9 +80,11 @@ export function ConnectDestinationModalBody({
     traces: false,
   });
 
-  const dispatch = useDispatch();
   const { connectEnv } = useConnectEnv();
   const { buildFormDynamicFields } = useConnectDestinationForm();
+  const addConfiguredDestination = useAppStore(
+    ({ addConfiguredDestination }) => addConfiguredDestination
+  );
 
   const { data } = useQuery<DestinationDetailsResponse>(
     GET_DESTINATION_TYPE_DETAILS,
@@ -207,7 +208,7 @@ export function ConnectDestinationModalBody({
       };
 
       // Dispatch action to store the destination
-      dispatch(addConfiguredDestination(storedDestination));
+      addConfiguredDestination(storedDestination);
     }
 
     // Prepare the request body
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 7bf56029e..0312cd4bb 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { IAppState } from '@/store';
+import { useAppStore } from '@/store';
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
 import { useRouter } from 'next/navigation';
 import { AddDestinationModal } from './add-destination-modal';
 import { AddDestinationButton, SetupHeader } from '@/components';
@@ -31,10 +30,9 @@ export function ChooseDestinationContainer() {
 
   const router = useRouter();
 
-  const sourcesList = useSelector(({ app }) => app.sources);
-  const destinations = useSelector(
-    ({ app }: { app: IAppState }) => app.configuredDestinationsList
-  );
+  const sourcesList = useAppStore((state) => state.sources);
+  const destinations = useAppStore((state) => state.configuredDestinationsList);
+
   const isSourcesListEmpty = () => {
     const sourceLen = Object.keys(sourcesList).length === 0;
     if (sourceLen) {
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index 6430c1ad7..dd3906179 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { useDispatch } from 'react-redux';
+import { useAppStore } from '@/store';
 import { K8sActualSource } from '@/types';
 import { SetupHeader } from '@/components';
 import { useRouter } from 'next/navigation';
 import { SourcesList } from './choose-sources-list';
 import { SectionTitle, Divider } from '@/reuseable-components';
-import { setNamespaceFutureSelectAppsList, setSources } from '@/store';
 import { useConnectSourcesList, useConnectSourcesMenuState } from '@/hooks';
 import { SearchAndDropdown, TogglesAndCheckboxes } from './choose-sources-menu';
 import {
@@ -36,7 +35,7 @@ export function ChooseSourcesContainer() {
   });
 
   const router = useRouter();
-  const dispatch = useDispatch();
+  const { setSources, setNamespaceFutureSelectAppsList } = useAppStore();
 
   function getVisibleSources() {
     const allSources = sourcesList || [];
@@ -58,8 +57,8 @@ export function ChooseSourcesContainer() {
   function onNextClick() {
     const { selectedOption, selectedItems, futureAppsCheckbox } = stateMenu;
     if (selectedOption) {
-      dispatch(setSources(selectedItems));
-      dispatch(setNamespaceFutureSelectAppsList(futureAppsCheckbox));
+      setSources(selectedItems);
+      setNamespaceFutureSelectAppsList(futureAppsCheckbox);
     }
     router.push('/choose-destination');
   }
diff --git a/frontend/webapp/containers/setup/sources/index.tsx b/frontend/webapp/containers/setup/sources/index.tsx
index 5c24abd55..8acea23ae 100644
--- a/frontend/webapp/containers/setup/sources/index.tsx
+++ b/frontend/webapp/containers/setup/sources/index.tsx
@@ -1,18 +1,17 @@
 'use client';
 import React, { useEffect } from 'react';
 import { ROUTES } from '@/utils';
-import { setSources } from '@/store';
+import { useAppStore } from '@/store';
 import { useSectionData } from '@/hooks';
 import { useRouter } from 'next/navigation';
 import { KeyvalCard } from '@/design.system';
 import { SourcesSection } from './sources.section';
-import { useDispatch, useSelector } from 'react-redux';
 import { ChooseSourcesHeader } from '@/components/setup/headers';
 export function ChooseSourcesContainer() {
   const router = useRouter();
 
-  const dispatch = useDispatch();
-  const selectedSources = useSelector(({ app }) => app.sources);
+  const selectedSources = useAppStore((state) => state.sources);
+  const setSources = useAppStore((state) => state.setSources);
 
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
 
@@ -23,7 +22,7 @@ export function ChooseSourcesContainer() {
   }
 
   async function onNextClick() {
-    dispatch(setSources(sectionData));
+    setSources(sectionData);
     router.push(ROUTES.CHOOSE_DESTINATION);
   }
 
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 16107b315..06787da9c 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -1,11 +1,9 @@
 import { useState, useCallback } from 'react';
 import { useCreateSource } from '../sources';
+import { useNamespace } from '../compute-platform';
+import { resetSources, useAppStore } from '@/store';
 import { useCreateDestination } from '../destinations';
-
 import { DestinationInput, PersistNamespaceItemInput } from '@/types';
-import { useDispatch, useSelector } from 'react-redux';
-import { useNamespace } from '../compute-platform';
-import { IAppState, resetSources } from '@/store';
 
 type ConnectEnvResult = {
   success: boolean;
@@ -26,11 +24,10 @@ export const useConnectEnv = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Getting data from Redux
-  const dispatch = useDispatch();
-  const sourcesList = useSelector(({ app }: { app: IAppState }) => app.sources);
-  const namespaceFutureSelectAppsList = useSelector(
-    ({ app }: { app: IAppState }) => app.namespaceFutureSelectAppsList
+  const sourcesList = useAppStore((state) => state.sources);
+  const resetSources = useAppStore((state) => state.resetSources);
+  const namespaceFutureSelectAppsList = useAppStore(
+    (state) => state.namespaceFutureSelectAppsList
   );
 
   const connectEnv = useCallback(
@@ -67,7 +64,7 @@ export const useConnectEnv = () => {
             );
           }
         }
-        dispatch(resetSources());
+        resetSources();
         // Create destination
         const destinationId = await createNewDestination(destination);
 
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
index 8a97b9609..b893870c6 100644
--- a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
+++ b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
+import { useAppStore } from '@/store';
 import { DropdownOption, K8sActualSource } from '@/types';
-import { useSelector } from 'react-redux';
 
 export const useConnectSourcesMenuState = ({ sourcesList }) => {
   const [searchFilter, setSearchFilter] = useState('');
@@ -14,8 +14,9 @@ export const useConnectSourcesMenuState = ({ sourcesList }) => {
     [key: string]: K8sActualSource[];
   }>({});
 
-  const { sources, namespaceFutureSelectAppsList } = useSelector(
-    ({ app }) => app
+  const sources = useAppStore((state) => state.sources);
+  const namespaceFutureSelectAppsList = useAppStore(
+    (state) => state.namespaceFutureSelectAppsList
   );
 
   useEffect(() => {
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index 8c720154e..e3f798c1f 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -36,7 +36,8 @@
     "react-redux": "^9.1.0",
     "styled-components": "^6.0.2",
     "swr": "^2.1.5",
-    "typescript": "5.1.3"
+    "typescript": "5.1.3",
+    "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {
     "babel-plugin-styled-components": "^2.1.4",
diff --git a/frontend/webapp/store/index.ts b/frontend/webapp/store/index.ts
index 2d6312c61..1b6142925 100644
--- a/frontend/webapp/store/index.ts
+++ b/frontend/webapp/store/index.ts
@@ -16,3 +16,4 @@ export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 
 export * from './slices';
+export * from './useAppStore';
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
index 3856944b6..821365e32 100644
--- a/frontend/webapp/store/slices/app-slice.ts
+++ b/frontend/webapp/store/slices/app-slice.ts
@@ -2,7 +2,7 @@ import { ConfiguredDestination, K8sActualSource } from '@/types';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 
-export interface IAppState {
+export interface IAppStoreState {
   sources: {
     [key: string]: K8sActualSource[];
   };
@@ -10,7 +10,7 @@ export interface IAppState {
   configuredDestinationsList: ConfiguredDestination[];
 }
 
-const initialState: IAppState = {
+const initialState: IAppStoreState = {
   sources: {},
   namespaceFutureSelectAppsList: {},
   configuredDestinationsList: [],
diff --git a/frontend/webapp/store/useAppStore.ts b/frontend/webapp/store/useAppStore.ts
new file mode 100644
index 000000000..7a814c514
--- /dev/null
+++ b/frontend/webapp/store/useAppStore.ts
@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+import { ConfiguredDestination, K8sActualSource } from '@/types';
+
+export interface IAppState {
+  sources: { [key: string]: K8sActualSource[] };
+  namespaceFutureSelectAppsList: { [key: string]: boolean };
+  configuredDestinationsList: ConfiguredDestination[];
+}
+
+const useAppStore = create<
+  IAppState & {
+    setSources: (sources: { [key: string]: K8sActualSource[] }) => void;
+    setNamespaceFutureSelectAppsList: (list: {
+      [key: string]: boolean;
+    }) => void;
+    addConfiguredDestination: (destination: ConfiguredDestination) => void;
+    setConfiguredDestinationsList: (list: ConfiguredDestination[]) => void;
+    resetSources: () => void;
+    resetState: () => void;
+  }
+>((set) => ({
+  sources: {},
+  namespaceFutureSelectAppsList: {},
+  configuredDestinationsList: [],
+
+  setSources: (sources) => set({ sources }),
+
+  setNamespaceFutureSelectAppsList: (list) =>
+    set({ namespaceFutureSelectAppsList: list }),
+
+  addConfiguredDestination: (destination) =>
+    set((state) => ({
+      configuredDestinationsList: [
+        ...state.configuredDestinationsList,
+        destination,
+      ],
+    })),
+
+  setConfiguredDestinationsList: (list) =>
+    set({ configuredDestinationsList: list }),
+
+  resetSources: () =>
+    set((state) => ({
+      sources: {},
+      namespaceFutureSelectAppsList: {},
+    })),
+
+  resetState: () =>
+    set(() => ({
+      sources: {},
+      namespaceFutureSelectAppsList: {},
+      configuredDestinationsList: [],
+    })),
+}));
+
+export { useAppStore };
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index 6f1455469..224328a7c 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -6501,3 +6501,8 @@ zustand@^4.4.0:
   integrity sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==
   dependencies:
     use-sync-external-store "1.2.2"
+
+zustand@^5.0.0-rc.2:
+  version "5.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.0-rc.2.tgz#d28d95ffb6f0b20cadbaea39210f18446a5bf989"
+  integrity sha512-o2Nwuvnk8vQBX7CcHL8WfFkZNJdxB/VKeWw0tNglw8p4cypsZ3tRT7rTRTDNeUPFS0qaMBRSKe+fVwL5xpcE3A==

From 1f7f0c3fa5b6b68f4b5740da9285fbc8f167b486 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 23 Sep 2024 12:21:40 +0300
Subject: [PATCH 236/374] chore: delete app store

---
 frontend/webapp/store/index.ts            |  3 +-
 frontend/webapp/store/slices/app-slice.ts | 73 -----------------------
 frontend/webapp/store/slices/index.ts     |  1 -
 3 files changed, 1 insertion(+), 76 deletions(-)
 delete mode 100644 frontend/webapp/store/slices/app-slice.ts

diff --git a/frontend/webapp/store/index.ts b/frontend/webapp/store/index.ts
index 1b6142925..0f3f6137d 100644
--- a/frontend/webapp/store/index.ts
+++ b/frontend/webapp/store/index.ts
@@ -1,8 +1,7 @@
-import { appReducer, notificationReducer } from './slices';
+import { notificationReducer } from './slices';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 
 const rootReducer = combineReducers({
-  app: appReducer,
   notification: notificationReducer,
 });
 
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
deleted file mode 100644
index 821365e32..000000000
--- a/frontend/webapp/store/slices/app-slice.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ConfiguredDestination, K8sActualSource } from '@/types';
-import { createSlice } from '@reduxjs/toolkit';
-import type { PayloadAction } from '@reduxjs/toolkit';
-
-export interface IAppStoreState {
-  sources: {
-    [key: string]: K8sActualSource[];
-  };
-  namespaceFutureSelectAppsList: { [key: string]: boolean };
-  configuredDestinationsList: ConfiguredDestination[];
-}
-
-const initialState: IAppStoreState = {
-  sources: {},
-  namespaceFutureSelectAppsList: {},
-  configuredDestinationsList: [],
-};
-
-export const appSlice = createSlice({
-  name: 'app',
-  initialState,
-  reducers: {
-    setSources: (
-      state,
-      action: PayloadAction<{ [key: string]: K8sActualSource[] }>
-    ) => {
-      state.sources = action.payload;
-    },
-    setNamespaceFutureSelectAppsList: (
-      state,
-      action: PayloadAction<{ [key: string]: boolean }>
-    ) => {
-      state.namespaceFutureSelectAppsList = action.payload;
-    },
-    addConfiguredDestination: (
-      state,
-      action: PayloadAction<ConfiguredDestination>
-    ) => {
-      state.configuredDestinationsList.push(action.payload);
-    },
-
-    setConfiguredDestinationsList: (
-      state,
-      action: PayloadAction<ConfiguredDestination[]>
-    ) => {
-      state.configuredDestinationsList = action.payload;
-    },
-    resetSources: (state) => {
-      state.sources = initialState.sources;
-      state.namespaceFutureSelectAppsList =
-        initialState.namespaceFutureSelectAppsList;
-    },
-    resetState: (state) => {
-      state.sources = initialState.sources;
-      state.namespaceFutureSelectAppsList =
-        initialState.namespaceFutureSelectAppsList;
-      state.configuredDestinationsList =
-        initialState.configuredDestinationsList;
-    },
-  },
-});
-
-// Action creators are generated for each case reducer function
-export const {
-  setSources,
-  setNamespaceFutureSelectAppsList,
-  setConfiguredDestinationsList,
-  addConfiguredDestination,
-  resetState,
-  resetSources,
-} = appSlice.actions;
-
-export const appReducer = appSlice.reducer;
diff --git a/frontend/webapp/store/slices/index.ts b/frontend/webapp/store/slices/index.ts
index d40a089ee..981b2f31a 100644
--- a/frontend/webapp/store/slices/index.ts
+++ b/frontend/webapp/store/slices/index.ts
@@ -1,2 +1 @@
-export * from './app-slice';
 export * from './notification-slice';

From 8eda48b666fce975f4dd8c8c2036f14b504b775d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 23 Sep 2024 15:47:14 +0300
Subject: [PATCH 237/374] chore: init overview action header

---
 .../overview/overview-actions-menu/index.tsx  | 48 +++++++++++
 .../overview/overview-data-flow/index.tsx     |  6 +-
 .../webapp/public/icons/overview/overview.svg |  3 +
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../reuseable-components/tab-list/index.tsx   | 82 +++++++++++++++++++
 frontend/webapp/styles/theme.ts               |  2 +
 6 files changed, 140 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
 create mode 100644 frontend/webapp/public/icons/overview/overview.svg
 create mode 100644 frontend/webapp/reuseable-components/tab-list/index.tsx

diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
new file mode 100644
index 000000000..64b384ab2
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Input, TabList } from '@/reuseable-components';
+
+const MenuContainer = styled.div`
+  width: calc(100% - 64px);
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+`;
+
+const SearchInputContainer = styled.div`
+  width: 200px;
+`;
+
+const DividerContainer = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: 24px;
+  background-color: ${({ theme }) => theme.colors.card};
+  margin: 0 16px;
+`;
+
+export function OverviewActionMenuContainer() {
+  const [searchFilter, setSearchFilter] = useState<string>('');
+
+  return (
+    <MenuContainer>
+      <TabList />
+      <DividerContainer>
+        <Divider />
+      </DividerContainer>
+      <SearchInputContainer>
+        <Input
+          placeholder="Search "
+          icon={'/icons/common/search.svg'}
+          value={searchFilter}
+          onChange={(e) => setSearchFilter(e.target.value)}
+        />
+      </SearchInputContainer>
+    </MenuContainer>
+  );
+}
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index c7dfef309..23df95436 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,12 +1,13 @@
 'use client';
 import styled from 'styled-components';
 import React, { useMemo, useRef, useEffect, useState } from 'react';
-import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
+import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
+import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
 
 export const OverviewDataFlowWrapper = styled.div`
   width: calc(100% - 64px);
-  height: calc(100vh - 100px);
+  height: calc(100vh - 176px);
   position: relative;
 `;
 
@@ -53,6 +54,7 @@ export function OverviewDataFlowContainer() {
 
   return (
     <OverviewDataFlowWrapper ref={containerRef}>
+      <OverviewActionMenuContainer />
       <NodeBaseDataFlow nodes={nodes} edges={edges} />
     </OverviewDataFlowWrapper>
   );
diff --git a/frontend/webapp/public/icons/overview/overview.svg b/frontend/webapp/public/icons/overview/overview.svg
new file mode 100644
index 000000000..847c8aeb1
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/overview.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+  <path d="M1.75 8.79362H12.25M1.75 11.7103H12.25M3.5 5.87695H10.5C11.4665 5.87695 12.25 5.09345 12.25 4.12695C12.25 3.16045 11.4665 2.37695 10.5 2.37695H3.5C2.5335 2.37695 1.75 3.16045 1.75 4.12695C1.75 5.09345 2.5335 5.87695 3.5 5.87695Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 3d5ceee37..de50dd16b 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -21,3 +21,4 @@ export * from './no-data-found';
 export * from './skeleton-loader';
 export * from './connection-status';
 export * from './nodes-data-flow';
+export * from './tab-list';
diff --git a/frontend/webapp/reuseable-components/tab-list/index.tsx b/frontend/webapp/reuseable-components/tab-list/index.tsx
new file mode 100644
index 000000000..0b092c475
--- /dev/null
+++ b/frontend/webapp/reuseable-components/tab-list/index.tsx
@@ -0,0 +1,82 @@
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../text';
+
+// Define types for the Tab component props
+interface TabProps {
+  title: string;
+  icon: string;
+  selected: boolean;
+  onClick: () => void;
+}
+
+// Define types for the TabList component props
+interface TabListProps {
+  tabs?: TabProps[];
+}
+
+// Styled-components for Tab and TabList
+const TabContainer = styled.div<{ selected: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0px 12px;
+  border-radius: 32px;
+  cursor: pointer;
+  background-color: ${({ selected, theme }) =>
+    selected ? theme.colors.selected_hover : theme.colors.card};
+  transition: background-color 0.3s, color 0.3s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.selected_hover};
+  }
+
+  svg {
+    margin-right: 8px;
+  }
+`;
+
+const TabListContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+// Tab component
+const Tab: React.FC<TabProps> = ({ title, icon, selected, onClick }) => {
+  return (
+    <TabContainer selected={selected} onClick={onClick}>
+      <Image src={icon} width={14} height={14} alt={title} />
+      <Text size={14}>{title}</Text>
+    </TabContainer>
+  );
+};
+
+const TABS = [
+  {
+    title: 'Overview',
+    icon: '/icons/overview/overview.svg',
+    selected: true,
+    onClick: () => {},
+  },
+];
+
+// TabList component
+const TabList: React.FC<TabListProps> = ({ tabs = TABS }) => {
+  return (
+    <TabListContainer>
+      {tabs.map((tab, index) => (
+        <Tab
+          key={index}
+          title={tab.title}
+          icon={tab.icon}
+          selected={tab.selected}
+          onClick={tab.onClick}
+        />
+      ))}
+    </TabListContainer>
+  );
+};
+
+export { TabList };
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index c41e757d8..c16f9acf9 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -9,6 +9,8 @@ const colors = {
   border: '#525252',
   translucent_bg: '#1A1A1A',
   majestic_blue: '#444AD9',
+  selected_hover: '#444AD93D',
+  card: '#F9F9F90A',
   white_opacity: {
     '004': 'rgba(249, 249, 249, 0.04)',
     '008': 'rgba(249, 249, 249, 0.08)',

From f84f1b49b6f099926cfeb1377bb6a191ff88f523 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 23 Sep 2024 16:49:41 +0300
Subject: [PATCH 238/374] chore: add options

---
 .../main/overview/add-entity/index.tsx        | 132 ++++++++++++++++++
 .../overview/overview-actions-menu/index.tsx  |  15 +-
 .../webapp/public/icons/common/plus-black.svg |   3 +
 frontend/webapp/styles/theme.ts               |   4 +-
 4 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 frontend/webapp/containers/main/overview/add-entity/index.tsx
 create mode 100644 frontend/webapp/public/icons/common/plus-black.svg

diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
new file mode 100644
index 000000000..636b1caec
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -0,0 +1,132 @@
+import React, { useState, useRef } from 'react';
+import Image from 'next/image';
+import { DropdownOption } from '@/types';
+import { useOnClickOutside } from '@/hooks';
+import styled, { css } from 'styled-components';
+import { Button, Text } from '@/reuseable-components';
+
+interface AddEntityButtonDropdownProps {
+  options?: DropdownOption[];
+  onSelect: (option: DropdownOption) => void;
+  placeholder?: string;
+}
+
+const Container = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 100px;
+`;
+
+const DropdownListContainer = styled.div`
+  position: absolute;
+  right: 0px;
+  top: 48px;
+  border-radius: 24px;
+  width: 131px;
+  overflow-y: auto;
+  background-color: ${({ theme }) => theme.colors.dropdown_bg};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  z-index: 9999;
+  padding: 12px;
+`;
+
+const DropdownItem = styled.div<{ isSelected: boolean }>`
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 24px;
+  gap: 8px;
+  display: flex;
+
+  align-items: center;
+  &:hover {
+    background: ${({ theme }) => theme.colors.white_opacity['008']};
+  }
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      background: rgba(68, 74, 217, 0.24);
+    `}
+`;
+
+const ButtonText = styled(Text)`
+  color: ${({ theme }) => theme.text.primary};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-weight: 600;
+`;
+
+const OPTIONS = [
+  {
+    id: 'sources',
+    value: 'Source',
+  },
+  {
+    id: 'actions',
+    value: 'Action',
+  },
+  {
+    id: 'destinations',
+    value: 'Destination',
+  },
+];
+
+const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
+  options = OPTIONS,
+  onSelect,
+  placeholder = 'ADD...',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
+
+  const handleToggle = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleSelect = (option: DropdownOption) => {
+    onSelect(option);
+    setIsOpen(false);
+  };
+
+  return (
+    <Container ref={dropdownRef}>
+      <StyledButton onClick={handleToggle}>
+        <Image
+          src="/icons/common/plus-black.svg"
+          width={16}
+          height={16}
+          alt="Add"
+        />
+        <ButtonText size={14}>{placeholder}</ButtonText>
+      </StyledButton>
+      {isOpen && (
+        <DropdownListContainer>
+          {options.map((option) => (
+            <DropdownItem
+              key={option.id}
+              isSelected={false}
+              onClick={() => handleSelect(option)}
+            >
+              <Image
+                src={`/icons/overview/${option.id}.svg`}
+                width={16}
+                height={16}
+                alt="Add"
+              />
+              <Text size={14}>{option.value}</Text>
+            </DropdownItem>
+          ))}
+        </DropdownListContainer>
+      )}
+    </Container>
+  );
+};
+
+export { AddEntityButtonDropdown };
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
index 64b384ab2..79d6b0c7f 100644
--- a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Input, TabList } from '@/reuseable-components';
+import { AddEntityButtonDropdown } from '../add-entity';
+import { DropdownOption } from '@/types';
 
 const MenuContainer = styled.div`
-  width: calc(100% - 64px);
   display: flex;
   align-items: center;
   margin: 20px 0;
@@ -26,6 +27,11 @@ const Divider = styled.div`
   margin: 0 16px;
 `;
 
+// Aligns the AddEntityButtonDropdown to the right
+const StyledAddEntityButtonDropdownWrapper = styled.div`
+  margin-left: auto;
+`;
+
 export function OverviewActionMenuContainer() {
   const [searchFilter, setSearchFilter] = useState<string>('');
 
@@ -43,6 +49,13 @@ export function OverviewActionMenuContainer() {
           onChange={(e) => setSearchFilter(e.target.value)}
         />
       </SearchInputContainer>
+      <StyledAddEntityButtonDropdownWrapper>
+        <AddEntityButtonDropdown
+          onSelect={(option: DropdownOption) => {
+            console.log({ option });
+          }}
+        />
+      </StyledAddEntityButtonDropdownWrapper>
     </MenuContainer>
   );
 }
diff --git a/frontend/webapp/public/icons/common/plus-black.svg b/frontend/webapp/public/icons/common/plus-black.svg
new file mode 100644
index 000000000..2025d777a
--- /dev/null
+++ b/frontend/webapp/public/icons/common/plus-black.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.99992 12.6663V7.99967M7.99992 7.99967V3.33301M7.99992 7.99967L3.33325 7.99967M7.99992 7.99967L12.6666 7.99967" stroke="#111111" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index c16f9acf9..00533f63c 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -1,3 +1,4 @@
+import { drop } from 'cypress/types/lodash';
 import { DefaultTheme } from 'styled-components';
 
 // Define your color palette
@@ -11,6 +12,7 @@ const colors = {
   majestic_blue: '#444AD9',
   selected_hover: '#444AD93D',
   card: '#F9F9F90A',
+  dropdown_bg: '#242424',
   white_opacity: {
     '004': 'rgba(249, 249, 249, 0.04)',
     '008': 'rgba(249, 249, 249, 0.08)',
@@ -105,7 +107,7 @@ const colors = {
 };
 
 const text = {
-  primary: '#07111A',
+  primary: '#111',
   secondary: '#0EE6F3',
   grey: '#B8B8B8',
   white: '#fff',

From 3bec3249f1efcc2c61190eca90328f26e272b961 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 24 Sep 2024 09:58:02 +0300
Subject: [PATCH 239/374] chore: wip

---
 .../main/overview/add-entity/index.tsx        |  33 ++++-
 .../choose-sources-body/index.tsx             | 120 ++++++++++++++++++
 .../main/sources/choose-sources/index.tsx     | 104 ++-------------
 3 files changed, 159 insertions(+), 98 deletions(-)
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx

diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index 636b1caec..2ef27f7f0 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -1,9 +1,12 @@
 import React, { useState, useRef } from 'react';
 import Image from 'next/image';
-import { DropdownOption } from '@/types';
-import { useOnClickOutside } from '@/hooks';
+import { DropdownOption, K8sActualSource } from '@/types';
+import { useConnectSourcesMenuState, useOnClickOutside } from '@/hooks';
 import styled, { css } from 'styled-components';
-import { Button, Text } from '@/reuseable-components';
+import { Button, Modal, Text } from '@/reuseable-components';
+import { ChooseSourcesContainer } from '../../sources';
+import { useAppStore } from '@/store';
+import { ChooseSourcesBody } from '../../sources/choose-sources/choose-sources-body';
 
 interface AddEntityButtonDropdownProps {
   options?: DropdownOption[];
@@ -83,6 +86,12 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
+
+  const { setSources, setNamespaceFutureSelectAppsList } = useAppStore();
+  const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
+    sourcesList,
+  });
 
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
@@ -125,6 +134,24 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
           ))}
         </DropdownListContainer>
       )}
+      <Modal isOpen={true} header={{ title: 'ADD SOURCE' }} onClose={() => {}}>
+        <div
+          style={{
+            width: '1080px',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+          }}
+        >
+          <ChooseSourcesBody
+            stateMenu={stateMenu}
+            stateHandlers={stateHandlers}
+            sourcesList={sourcesList}
+            setSourcesList={setSourcesList}
+          />
+        </div>
+      </Modal>
     </Container>
   );
 };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
new file mode 100644
index 000000000..024187cf3
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import styled from 'styled-components';
+import { K8sActualSource } from '@/types';
+import { useConnectSourcesList } from '@/hooks';
+import { SourcesList } from '../choose-sources-list';
+import { SectionTitle, Divider } from '@/reuseable-components';
+import {
+  SearchAndDropdown,
+  TogglesAndCheckboxes,
+} from '../choose-sources-menu';
+import {
+  SearchDropdownState,
+  ToggleCheckboxState,
+  SearchDropdownHandlers,
+  ToggleCheckboxHandlers,
+} from '../choose-sources-menu/type';
+
+const ContentWrapper = styled.div`
+  width: 660px;
+  padding-top: 64px;
+`;
+
+interface ChooseSourcesContentProps {
+  stateMenu: any;
+  stateHandlers: any;
+  sourcesList: K8sActualSource[];
+  setSourcesList: React.Dispatch<React.SetStateAction<K8sActualSource[]>>;
+}
+
+const ChooseSourcesBody: React.FC<ChooseSourcesContentProps> = ({
+  stateMenu,
+  stateHandlers,
+  sourcesList,
+  setSourcesList,
+}) => {
+  const { namespacesList } = useConnectSourcesList({
+    stateMenu,
+    setSourcesList,
+  });
+
+  function getVisibleSources() {
+    const allSources = sourcesList || [];
+    const filteredSources = stateMenu.searchFilter
+      ? stateHandlers.filterSources(allSources)
+      : allSources;
+
+    return stateMenu.showSelectedOnly
+      ? filteredSources.filter((source) =>
+          stateMenu.selectedOption
+            ? (
+                stateMenu.selectedItems[stateMenu.selectedOption.value] || []
+              ).find((selectedItem) => selectedItem.name === source.name)
+            : false
+        )
+      : filteredSources;
+  }
+
+  const toggleCheckboxState: ToggleCheckboxState = {
+    selectedAppsCount: stateMenu.selectedOption
+      ? (stateMenu.selectedItems[stateMenu.selectedOption.value] || []).length
+      : 0,
+    selectAllCheckbox: stateMenu.selectAllCheckbox,
+    showSelectedOnly: stateMenu.showSelectedOnly,
+    futureAppsCheckbox:
+      stateMenu.futureAppsCheckbox[stateMenu.selectedOption?.value || ''] ||
+      false,
+  };
+
+  const toggleCheckboxHandlers: ToggleCheckboxHandlers = {
+    setSelectAllCheckbox: stateMenu.setSelectAllCheckbox,
+    setShowSelectedOnly: stateMenu.setShowSelectedOnly,
+    setFutureAppsCheckbox: (value: boolean) => {
+      stateMenu.setFutureAppsCheckbox({
+        ...stateMenu.futureAppsCheckbox,
+        [stateMenu.selectedOption?.value || '']: value,
+      });
+    },
+  };
+
+  const searchDropdownState: SearchDropdownState = {
+    selectedOption: stateMenu.selectedOption,
+    searchFilter: stateMenu.searchFilter,
+  };
+
+  const searchDropdownHandlers: SearchDropdownHandlers = {
+    setSelectedOption: stateMenu.setSelectedOption,
+    setSearchFilter: stateMenu.setSearchFilter,
+  };
+
+  return (
+    <ContentWrapper>
+      <SectionTitle
+        title="Choose sources"
+        description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
+      />
+      <SearchAndDropdown
+        state={searchDropdownState}
+        handlers={searchDropdownHandlers}
+        dropdownOptions={namespacesList}
+      />
+      <Divider margin="16px 0" />
+      <TogglesAndCheckboxes
+        state={toggleCheckboxState}
+        handlers={toggleCheckboxHandlers}
+      />
+      <Divider margin="16px 0 24px" />
+      <SourcesList
+        selectedItems={
+          stateMenu.selectedOption
+            ? stateMenu.selectedItems[stateMenu.selectedOption.value] || []
+            : []
+        }
+        setSelectedItems={stateHandlers.handleSelectItem}
+        items={getVisibleSources()}
+      />
+    </ContentWrapper>
+  );
+};
+
+export { ChooseSourcesBody };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
index dd3906179..61a8a1e4a 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -4,21 +4,8 @@ import { useAppStore } from '@/store';
 import { K8sActualSource } from '@/types';
 import { SetupHeader } from '@/components';
 import { useRouter } from 'next/navigation';
-import { SourcesList } from './choose-sources-list';
-import { SectionTitle, Divider } from '@/reuseable-components';
-import { useConnectSourcesList, useConnectSourcesMenuState } from '@/hooks';
-import { SearchAndDropdown, TogglesAndCheckboxes } from './choose-sources-menu';
-import {
-  SearchDropdownState,
-  ToggleCheckboxState,
-  SearchDropdownHandlers,
-  ToggleCheckboxHandlers,
-} from './choose-sources-menu/type';
-
-const ContentWrapper = styled.div`
-  width: 660px;
-  padding-top: 64px;
-`;
+import { useConnectSourcesMenuState } from '@/hooks';
+import { ChooseSourcesBody } from './choose-sources-body';
 
 const HeaderWrapper = styled.div`
   width: 100vw;
@@ -26,33 +13,12 @@ const HeaderWrapper = styled.div`
 export function ChooseSourcesContainer() {
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
 
+  const { setSources, setNamespaceFutureSelectAppsList } = useAppStore();
   const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
     sourcesList,
   });
-  const { namespacesList } = useConnectSourcesList({
-    stateMenu,
-    setSourcesList,
-  });
 
   const router = useRouter();
-  const { setSources, setNamespaceFutureSelectAppsList } = useAppStore();
-
-  function getVisibleSources() {
-    const allSources = sourcesList || [];
-    const filteredSources = stateMenu.searchFilter
-      ? stateHandlers.filterSources(allSources)
-      : allSources;
-
-    return stateMenu.showSelectedOnly
-      ? filteredSources.filter((source) =>
-          stateMenu.selectedOption
-            ? (
-                stateMenu.selectedItems[stateMenu.selectedOption.value] || []
-              ).find((selectedItem) => selectedItem.name === source.name)
-            : false
-        )
-      : filteredSources;
-  }
 
   function onNextClick() {
     const { selectedOption, selectedItems, futureAppsCheckbox } = stateMenu;
@@ -63,38 +29,6 @@ export function ChooseSourcesContainer() {
     router.push('/choose-destination');
   }
 
-  const toggleCheckboxState: ToggleCheckboxState = {
-    selectedAppsCount: stateMenu.selectedOption
-      ? (stateMenu.selectedItems[stateMenu.selectedOption.value] || []).length
-      : 0,
-    selectAllCheckbox: stateMenu.selectAllCheckbox,
-    showSelectedOnly: stateMenu.showSelectedOnly,
-    futureAppsCheckbox:
-      stateMenu.futureAppsCheckbox[stateMenu.selectedOption?.value || ''] ||
-      false,
-  };
-
-  const toggleCheckboxHandlers: ToggleCheckboxHandlers = {
-    setSelectAllCheckbox: stateMenu.setSelectAllCheckbox,
-    setShowSelectedOnly: stateMenu.setShowSelectedOnly,
-    setFutureAppsCheckbox: (value: boolean) => {
-      stateMenu.setFutureAppsCheckbox({
-        ...stateMenu.futureAppsCheckbox,
-        [stateMenu.selectedOption?.value || '']: value,
-      });
-    },
-  };
-
-  const searchDropdownState: SearchDropdownState = {
-    selectedOption: stateMenu.selectedOption,
-    searchFilter: stateMenu.searchFilter,
-  };
-
-  const searchDropdownHandlers: SearchDropdownHandlers = {
-    setSelectedOption: stateMenu.setSelectedOption,
-    setSearchFilter: stateMenu.setSearchFilter,
-  };
-
   return (
     <>
       <HeaderWrapper>
@@ -109,32 +43,12 @@ export function ChooseSourcesContainer() {
           ]}
         />
       </HeaderWrapper>
-      <ContentWrapper>
-        <SectionTitle
-          title="Choose sources"
-          description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
-        />
-        <SearchAndDropdown
-          state={searchDropdownState}
-          handlers={searchDropdownHandlers}
-          dropdownOptions={namespacesList}
-        />
-        <Divider margin="16px 0" />
-        <TogglesAndCheckboxes
-          state={toggleCheckboxState}
-          handlers={toggleCheckboxHandlers}
-        />
-        <Divider margin="16px 0 24px" />
-        <SourcesList
-          selectedItems={
-            stateMenu.selectedOption
-              ? stateMenu.selectedItems[stateMenu.selectedOption.value] || []
-              : []
-          }
-          setSelectedItems={stateHandlers.handleSelectItem}
-          items={getVisibleSources()}
-        />
-      </ContentWrapper>
+      <ChooseSourcesBody
+        stateMenu={stateMenu}
+        stateHandlers={stateHandlers}
+        sourcesList={sourcesList}
+        setSourcesList={setSourcesList}
+      />
     </>
   );
 }

From ab236540d8327da7ebced9d60cf6bf7065aa203b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 24 Sep 2024 16:45:41 +0300
Subject: [PATCH 240/374] chore: wip

---
 frontend/webapp/package.json |  6 +++---
 frontend/webapp/yarn.lock    | 35 +++++++++++++++++++++--------------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index e3f798c1f..c63d15009 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -17,8 +17,8 @@
     "@next/font": "^13.4.7",
     "@reduxjs/toolkit": "^2.2.1",
     "@svgr/webpack": "^6.2.1",
-    "@types/node": "20.3.3",
-    "@types/react": "^18.3.5",
+    "@types/node": "22.6.1",
+    "@types/react": "18.3.8",
     "@types/react-dom": "18.2.4",
     "@xyflow/react": "^12.3.0",
     "autoprefixer": "^10.4.14",
@@ -36,7 +36,7 @@
     "react-redux": "^9.1.0",
     "styled-components": "^6.0.2",
     "swr": "^2.1.5",
-    "typescript": "5.1.3",
+    "typescript": "5.6.2",
     "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index 224328a7c..166a81370 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -2256,16 +2256,18 @@
   dependencies:
     undici-types "~6.13.0"
 
-"@types/node@20.3.3":
-  version "20.3.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.3.tgz#329842940042d2b280897150e023e604d11657d6"
-  integrity sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw==
-
 "@types/node@20.4.8":
   version "20.4.8"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.8.tgz#b5dda19adaa473a9bf0ab5cbd8f30ec7d43f5c85"
   integrity sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==
 
+"@types/node@22.6.1":
+  version "22.6.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.6.1.tgz#e531a45f4d78f14a8468cb9cdc29dc9602afc7ac"
+  integrity sha512-V48tCfcKb/e6cVUigLAaJDAILdMP0fUW6BidkPK4GpGjXcfbnoHasCZDwz3N3yVt5we2RHm4XTQCpv0KJz9zqw==
+  dependencies:
+    undici-types "~6.19.2"
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -2307,10 +2309,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^18.3.5":
-  version "18.3.5"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.5.tgz#5f524c2ad2089c0ff372bbdabc77ca2c4dbadf8f"
-  integrity sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==
+"@types/react@18.3.8":
+  version "18.3.8"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.8.tgz#1672ab19993f8aca7c7dc844c07d5d9e467d5a79"
+  integrity sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
@@ -6227,16 +6229,16 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.3.tgz#8d84219244a6b40b6fb2b33cc1c062f715b9e826"
-  integrity sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==
-
 typescript@5.1.6:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
   integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
+typescript@5.6.2:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.2.tgz#d1de67b6bef77c41823f822df8f0b3bcff60a5a0"
+  integrity sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -6252,6 +6254,11 @@ undici-types@~6.13.0:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.13.0.tgz#e3e79220ab8c81ed1496b5812471afd7cf075ea5"
   integrity sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==
 
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"

From 77b608671916c45d63b41636a0f97eef47953582 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 25 Sep 2024 12:42:34 +0300
Subject: [PATCH 241/374] chore: wip

---
 .../main/overview/add-entity/index.tsx        |  6 +--
 .../overview/overview-actions-menu/index.tsx  |  6 +--
 .../choose-sources-body/index.tsx             | 37 ++++++++++++++-----
 .../choose-sources-list/index.tsx             | 24 +++++-------
 4 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index 2ef27f7f0..4f0f264cc 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -10,7 +10,6 @@ import { ChooseSourcesBody } from '../../sources/choose-sources/choose-sources-b
 
 interface AddEntityButtonDropdownProps {
   options?: DropdownOption[];
-  onSelect: (option: DropdownOption) => void;
   placeholder?: string;
 }
 
@@ -81,7 +80,6 @@ const OPTIONS = [
 
 const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
   options = OPTIONS,
-  onSelect,
   placeholder = 'ADD...',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -100,7 +98,6 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
   };
 
   const handleSelect = (option: DropdownOption) => {
-    onSelect(option);
     setIsOpen(false);
   };
 
@@ -145,9 +142,10 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
           }}
         >
           <ChooseSourcesBody
+            isModal={true}
             stateMenu={stateMenu}
             stateHandlers={stateHandlers}
-            sourcesList={sourcesList}
+            sourcesList={[...sourcesList, ...sourcesList, ...sourcesList]}
             setSourcesList={setSourcesList}
           />
         </div>
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
index 79d6b0c7f..eb1237421 100644
--- a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -50,11 +50,7 @@ export function OverviewActionMenuContainer() {
         />
       </SearchInputContainer>
       <StyledAddEntityButtonDropdownWrapper>
-        <AddEntityButtonDropdown
-          onSelect={(option: DropdownOption) => {
-            console.log({ option });
-          }}
-        />
+        <AddEntityButtonDropdown />
       </StyledAddEntityButtonDropdownWrapper>
     </MenuContainer>
   );
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
index 024187cf3..30391f905 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
@@ -20,8 +20,22 @@ const ContentWrapper = styled.div`
   padding-top: 64px;
 `;
 
+const SourcesListWrapper = styled.div<{ isModal: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  padding-bottom: ${({ isModal }) =>
+    isModal ? 'calc(100vh - 500px)' : 'calc(100vh - 360px)'};
+  max-height: ${({ isModal }) =>
+    isModal ? 'calc(100vh - 500px)' : 'calc(100vh - 360px)'};
+  overflow-y: auto;
+`;
+
 interface ChooseSourcesContentProps {
   stateMenu: any;
+  isModal?: boolean;
   stateHandlers: any;
   sourcesList: K8sActualSource[];
   setSourcesList: React.Dispatch<React.SetStateAction<K8sActualSource[]>>;
@@ -29,8 +43,9 @@ interface ChooseSourcesContentProps {
 
 const ChooseSourcesBody: React.FC<ChooseSourcesContentProps> = ({
   stateMenu,
-  stateHandlers,
+  isModal = false,
   sourcesList,
+  stateHandlers,
   setSourcesList,
 }) => {
   const { namespacesList } = useConnectSourcesList({
@@ -104,15 +119,17 @@ const ChooseSourcesBody: React.FC<ChooseSourcesContentProps> = ({
         handlers={toggleCheckboxHandlers}
       />
       <Divider margin="16px 0 24px" />
-      <SourcesList
-        selectedItems={
-          stateMenu.selectedOption
-            ? stateMenu.selectedItems[stateMenu.selectedOption.value] || []
-            : []
-        }
-        setSelectedItems={stateHandlers.handleSelectItem}
-        items={getVisibleSources()}
-      />
+      <SourcesListWrapper isModal={isModal}>
+        <SourcesList
+          selectedItems={
+            stateMenu.selectedOption
+              ? stateMenu.selectedItems[stateMenu.selectedOption.value] || []
+              : []
+          }
+          setSelectedItems={stateHandlers.handleSelectItem}
+          items={getVisibleSources()}
+        />
+      </SourcesListWrapper>
     </ContentWrapper>
   );
 };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
index b61a60fb6..7f2d9df5a 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -4,17 +4,6 @@ import styled from 'styled-components';
 import { K8sActualSource } from '@/types';
 import { Checkbox, NoDataFound, Text } from '@/reuseable-components';
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  background: ${({ theme }) => theme.colors.primary};
-  height: 100%;
-  max-height: calc(100vh - 360px);
-  overflow-y: auto;
-`;
-
 const ListItem = styled.div<{ selected: boolean }>`
   display: flex;
   align-items: center;
@@ -66,8 +55,15 @@ const SelectedTextWrapper = styled.div`
   margin-right: 24px;
 `;
 
-const NoDataFoundWrapper = styled(Container)`
+const NoDataFoundWrapper = styled.div`
   margin-top: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  max-height: calc(100vh - 360px);
+  overflow-y: auto;
 `;
 
 interface SourcesListProps {
@@ -97,7 +93,7 @@ const SourcesList: React.FC<SourcesListProps> = ({
   }
 
   return (
-    <Container>
+    <>
       {items.map((item) => (
         <ListItem
           key={item.name}
@@ -127,7 +123,7 @@ const SourcesList: React.FC<SourcesListProps> = ({
           )}
         </ListItem>
       ))}
-    </Container>
+    </>
   );
 };
 

From 12f7e5a4b9bca439d62e1dd5621afc2e0f90ff65 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 25 Sep 2024 15:59:02 +0300
Subject: [PATCH 242/374] chore: wip

---
 .../main/overview/add-entity/index.tsx        | 96 +++++++++++++++----
 .../choose-sources-body/index.tsx             |  5 +-
 frontend/webapp/hooks/setup/useConnectEnv.ts  | 49 ++++------
 .../webapp/hooks/sources/useActualSources.ts  | 38 ++++++++
 .../webapp/hooks/sources/useActualSources.tsx |  9 --
 5 files changed, 135 insertions(+), 62 deletions(-)
 create mode 100644 frontend/webapp/hooks/sources/useActualSources.ts
 delete mode 100644 frontend/webapp/hooks/sources/useActualSources.tsx

diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index 4f0f264cc..f5073cacf 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -1,12 +1,18 @@
 import React, { useState, useRef } from 'react';
 import Image from 'next/image';
-import { DropdownOption, K8sActualSource } from '@/types';
-import { useConnectSourcesMenuState, useOnClickOutside } from '@/hooks';
 import styled, { css } from 'styled-components';
-import { Button, Modal, Text } from '@/reuseable-components';
-import { ChooseSourcesContainer } from '../../sources';
-import { useAppStore } from '@/store';
+import {
+  DropdownOption,
+  K8sActualSource,
+  PersistNamespaceItemInput,
+} from '@/types';
+import { Button, Modal, NavigationButtons, Text } from '@/reuseable-components';
 import { ChooseSourcesBody } from '../../sources/choose-sources/choose-sources-body';
+import {
+  useActualSources,
+  useOnClickOutside,
+  useConnectSourcesMenuState,
+} from '@/hooks';
 
 interface AddEntityButtonDropdownProps {
   options?: DropdownOption[];
@@ -63,6 +69,14 @@ const ButtonText = styled(Text)`
   font-weight: 600;
 `;
 
+const ChooseSourcesBodyWrapper = styled.div`
+  width: 1080px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
 const OPTIONS = [
   {
     id: 'sources',
@@ -78,15 +92,31 @@ const OPTIONS = [
   },
 ];
 
+function ModalActionComponent({ onNext }: { onNext: () => void }) {
+  return (
+    <NavigationButtons
+      buttons={[
+        {
+          label: 'DONE',
+          onClick: onNext,
+          variant: 'primary',
+        },
+      ]}
+    />
+  );
+}
+
 const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
   options = OPTIONS,
   placeholder = 'ADD...',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [currentModal, setCurrentModal] = useState<string>('');
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
 
-  const { setSources, setNamespaceFutureSelectAppsList } = useAppStore();
+  const { createSourcesForNamespace, persistNamespaceItems } =
+    useActualSources();
   const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
     sourcesList,
   });
@@ -98,9 +128,40 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
   };
 
   const handleSelect = (option: DropdownOption) => {
+    setCurrentModal(option.id);
     setIsOpen(false);
   };
 
+  async function onNextClick() {
+    console.log('object');
+    try {
+      // Persist the selected namespaces
+      const namespaceItems: PersistNamespaceItemInput[] = Object.entries(
+        stateMenu.futureAppsCheckbox
+      ).map(([namespaceName, futureSelected]) => ({
+        name: namespaceName,
+        futureSelected,
+      }));
+
+      await persistNamespaceItems(namespaceItems);
+
+      // Create sources for each namespace
+      for (const namespaceName in stateMenu.selectedItems) {
+        const sources = stateMenu.selectedItems[namespaceName].map(
+          (source) => ({
+            kind: source.kind,
+            name: source.name,
+            selected: true,
+          })
+        );
+        await createSourcesForNamespace(namespaceName, sources);
+      }
+      setCurrentModal('');
+    } catch (error) {
+      console.error('Error during onNextClick:', error);
+    }
+  }
+
   return (
     <Container ref={dropdownRef}>
       <StyledButton onClick={handleToggle}>
@@ -131,24 +192,21 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
           ))}
         </DropdownListContainer>
       )}
-      <Modal isOpen={true} header={{ title: 'ADD SOURCE' }} onClose={() => {}}>
-        <div
-          style={{
-            width: '1080px',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flexDirection: 'column',
-          }}
-        >
+      <Modal
+        isOpen={currentModal === 'sources'}
+        header={{ title: `ADD ${currentModal.toUpperCase()}` }}
+        actionComponent={<ModalActionComponent onNext={onNextClick} />}
+        onClose={() => setCurrentModal('')}
+      >
+        <ChooseSourcesBodyWrapper>
           <ChooseSourcesBody
-            isModal={true}
+            isModal
             stateMenu={stateMenu}
+            sourcesList={sourcesList}
             stateHandlers={stateHandlers}
-            sourcesList={[...sourcesList, ...sourcesList, ...sourcesList]}
             setSourcesList={setSourcesList}
           />
-        </div>
+        </ChooseSourcesBodyWrapper>
       </Modal>
     </Container>
   );
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
index 30391f905..5e7e28d2e 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
@@ -26,10 +26,9 @@ const SourcesListWrapper = styled.div<{ isModal: boolean }>`
   align-items: center;
   gap: 12px;
   height: 100%;
-  padding-bottom: ${({ isModal }) =>
-    isModal ? 'calc(100vh - 500px)' : 'calc(100vh - 360px)'};
+  padding-bottom: ${({ isModal }) => (isModal ? '48px' : '0')};
   max-height: ${({ isModal }) =>
-    isModal ? 'calc(100vh - 500px)' : 'calc(100vh - 360px)'};
+    isModal ? 'calc(100vh - 548px)' : 'calc(100vh - 360px)'};
   overflow-y: auto;
 `;
 
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 06787da9c..9206729b9 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -1,9 +1,8 @@
+import { useAppStore } from '@/store';
+import { DestinationInput } from '@/types';
+import { useActualSources } from '../sources';
 import { useState, useCallback } from 'react';
-import { useCreateSource } from '../sources';
-import { useNamespace } from '../compute-platform';
-import { resetSources, useAppStore } from '@/store';
 import { useCreateDestination } from '../destinations';
-import { DestinationInput, PersistNamespaceItemInput } from '@/types';
 
 type ConnectEnvResult = {
   success: boolean;
@@ -11,14 +10,9 @@ type ConnectEnvResult = {
 };
 
 export const useConnectEnv = () => {
-  const {
-    createSource,
-    success: sourceSuccess,
-    loading: sourceLoading,
-    error: sourceError,
-  } = useCreateSource();
   const { createNewDestination } = useCreateDestination();
-  const { persistNamespace } = useNamespace(undefined);
+  const { createSourcesForNamespace, persistNamespaceItems } =
+    useActualSources();
 
   const [result, setResult] = useState<ConnectEnvResult | null>(null);
   const [loading, setLoading] = useState(false);
@@ -38,16 +32,14 @@ export const useConnectEnv = () => {
 
       try {
         // Persist namespaces based on namespaceFutureSelectAppsList
-        for (const namespaceName in namespaceFutureSelectAppsList) {
-          const futureSelected = namespaceFutureSelectAppsList[namespaceName];
+        const namespaceItems = Object.entries(
+          namespaceFutureSelectAppsList
+        ).map(([namespaceName, futureSelected]) => ({
+          name: namespaceName,
+          futureSelected,
+        }));
 
-          const namespace: PersistNamespaceItemInput = {
-            name: namespaceName,
-            futureSelected,
-          };
-
-          await persistNamespace(namespace);
-        }
+        await persistNamespaceItems(namespaceItems);
 
         // Create sources for each namespace in sourcesList
         for (const namespaceName in sourcesList) {
@@ -56,15 +48,11 @@ export const useConnectEnv = () => {
             name: source.name,
             selected: true,
           }));
-          await createSource(namespaceName, sources);
-
-          if (sourceError) {
-            throw new Error(
-              `Error creating sources for namespace: ${namespaceName}`
-            );
-          }
+          await createSourcesForNamespace(namespaceName, sources);
         }
+
         resetSources();
+
         // Create destination
         const destinationId = await createNewDestination(destination);
 
@@ -86,11 +74,10 @@ export const useConnectEnv = () => {
       }
     },
     [
-      createSource,
-      createNewDestination,
-      persistNamespace,
-      sourceError,
       sourcesList,
+      createNewDestination,
+      persistNamespaceItems,
+      createSourcesForNamespace,
       namespaceFutureSelectAppsList,
     ]
   );
diff --git a/frontend/webapp/hooks/sources/useActualSources.ts b/frontend/webapp/hooks/sources/useActualSources.ts
new file mode 100644
index 000000000..77d57e73b
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useActualSources.ts
@@ -0,0 +1,38 @@
+import { useCreateSource } from '../sources';
+import { useNamespace } from '../compute-platform';
+import { PersistNamespaceItemInput } from '@/types';
+import { useComputePlatform } from '../compute-platform';
+
+export function useActualSources() {
+  const { data } = useComputePlatform();
+  const {
+    createSource,
+    success: sourceSuccess,
+    error: sourceError,
+  } = useCreateSource();
+  const { persistNamespace } = useNamespace(undefined);
+
+  const createSourcesForNamespace = async (
+    namespaceName: string,
+    sources: any[]
+  ) => {
+    await createSource(namespaceName, sources);
+    if (sourceError) {
+      throw new Error(`Error creating sources for namespace: ${namespaceName}`);
+    }
+  };
+
+  const persistNamespaceItems = async (
+    namespaceItems: PersistNamespaceItemInput[]
+  ) => {
+    for (const namespace of namespaceItems) {
+      await persistNamespace(namespace);
+    }
+  };
+
+  return {
+    sources: data?.computePlatform.k8sActualSources || [],
+    createSourcesForNamespace,
+    persistNamespaceItems,
+  };
+}
diff --git a/frontend/webapp/hooks/sources/useActualSources.tsx b/frontend/webapp/hooks/sources/useActualSources.tsx
deleted file mode 100644
index 15ef9fc85..000000000
--- a/frontend/webapp/hooks/sources/useActualSources.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useComputePlatform } from '../compute-platform';
-
-export function useActualSources() {
-  const { data } = useComputePlatform();
-
-  return {
-    sources: data?.computePlatform.k8sActualSources || [],
-  };
-}

From 907ad4f26602277043aa82cde9b245b827e7fa01 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 25 Sep 2024 17:21:25 +0300
Subject: [PATCH 243/374] chore: refactor code

---
 .../main/overview/add-entity/index.tsx        | 131 +++++++++---------
 .../webapp/containers/main/sources/index.ts   |   1 +
 .../compute-platform/useComputePlatform.ts    |   5 +-
 .../webapp/hooks/sources/useActualSources.ts  |  32 +++--
 4 files changed, 96 insertions(+), 73 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index f5073cacf..1a1afbc24 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -1,24 +1,27 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import Image from 'next/image';
 import styled, { css } from 'styled-components';
+import theme from '@/styles/theme';
+import { ChooseSourcesBody } from '../../sources';
 import {
   DropdownOption,
   K8sActualSource,
   PersistNamespaceItemInput,
 } from '@/types';
-import { Button, Modal, NavigationButtons, Text } from '@/reuseable-components';
-import { ChooseSourcesBody } from '../../sources/choose-sources/choose-sources-body';
+import {
+  Button,
+  FadeLoader,
+  Modal,
+  NavigationButtons,
+  Text,
+} from '@/reuseable-components';
 import {
   useActualSources,
   useOnClickOutside,
   useConnectSourcesMenuState,
 } from '@/hooks';
 
-interface AddEntityButtonDropdownProps {
-  options?: DropdownOption[];
-  placeholder?: string;
-}
-
+// Styled components for the dropdown UI
 const Container = styled.div`
   position: relative;
   display: inline-block;
@@ -34,7 +37,7 @@ const StyledButton = styled(Button)`
 
 const DropdownListContainer = styled.div`
   position: absolute;
-  right: 0px;
+  right: 0;
   top: 48px;
   border-radius: 24px;
   width: 131px;
@@ -51,7 +54,6 @@ const DropdownItem = styled.div<{ isSelected: boolean }>`
   border-radius: 24px;
   gap: 8px;
   display: flex;
-
   align-items: center;
   &:hover {
     background: ${({ theme }) => theme.colors.white_opacity['008']};
@@ -77,37 +79,33 @@ const ChooseSourcesBodyWrapper = styled.div`
   flex-direction: column;
 `;
 
-const OPTIONS = [
-  {
-    id: 'sources',
-    value: 'Source',
-  },
-  {
-    id: 'actions',
-    value: 'Action',
-  },
-  {
-    id: 'destinations',
-    value: 'Destination',
-  },
+// Default options for the dropdown
+const DEFAULT_OPTIONS: DropdownOption[] = [
+  { id: 'sources', value: 'Source' },
+  { id: 'actions', value: 'Action' },
+  { id: 'destinations', value: 'Destination' },
 ];
 
-function ModalActionComponent({ onNext }: { onNext: () => void }) {
-  return (
-    <NavigationButtons
-      buttons={[
-        {
-          label: 'DONE',
-          onClick: onNext,
-          variant: 'primary',
-        },
-      ]}
-    />
-  );
+// Action component for the modal's footer
+const ModalActionComponent: React.FC<{ onNext: () => void }> = ({ onNext }) => (
+  <NavigationButtons
+    buttons={[
+      {
+        label: 'DONE',
+        onClick: onNext,
+        variant: 'primary',
+      },
+    ]}
+  />
+);
+
+interface AddEntityButtonDropdownProps {
+  options?: DropdownOption[];
+  placeholder?: string;
 }
 
 const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
-  options = OPTIONS,
+  options = DEFAULT_OPTIONS,
   placeholder = 'ADD...',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -115,7 +113,7 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
   const [currentModal, setCurrentModal] = useState<string>('');
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
 
-  const { createSourcesForNamespace, persistNamespaceItems } =
+  const { createSourcesForNamespace, persistNamespaceItems, isPolling } =
     useActualSources();
   const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
     sourcesList,
@@ -123,19 +121,21 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
 
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
-  const handleToggle = () => {
+  // Toggle dropdown open state
+  const handleToggle = useCallback(() => {
     setIsOpen((prev) => !prev);
-  };
+  }, []);
 
-  const handleSelect = (option: DropdownOption) => {
+  // Handle selection of dropdown items
+  const handleSelect = useCallback((option: DropdownOption) => {
     setCurrentModal(option.id);
     setIsOpen(false);
-  };
+  }, []);
 
-  async function onNextClick() {
-    console.log('object');
+  // Handle next click action in the modal
+  const onNextClick = useCallback(async () => {
     try {
-      // Persist the selected namespaces
+      // Prepare namespace items for persistence
       const namespaceItems: PersistNamespaceItemInput[] = Object.entries(
         stateMenu.futureAppsCheckbox
       ).map(([namespaceName, futureSelected]) => ({
@@ -146,31 +146,38 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
       await persistNamespaceItems(namespaceItems);
 
       // Create sources for each namespace
-      for (const namespaceName in stateMenu.selectedItems) {
-        const sources = stateMenu.selectedItems[namespaceName].map(
-          (source) => ({
-            kind: source.kind,
-            name: source.name,
-            selected: true,
-          })
-        );
-        await createSourcesForNamespace(namespaceName, sources);
-      }
+      await Promise.all(
+        Object.entries(stateMenu.selectedItems).map(
+          async ([namespaceName, sources]) => {
+            const formattedSources = sources.map((source) => ({
+              kind: source.kind,
+              name: source.name,
+              selected: true,
+            }));
+            await createSourcesForNamespace(namespaceName, formattedSources);
+          }
+        )
+      );
+
       setCurrentModal('');
     } catch (error) {
       console.error('Error during onNextClick:', error);
     }
-  }
+  }, [persistNamespaceItems, stateMenu, createSourcesForNamespace]);
 
   return (
     <Container ref={dropdownRef}>
       <StyledButton onClick={handleToggle}>
-        <Image
-          src="/icons/common/plus-black.svg"
-          width={16}
-          height={16}
-          alt="Add"
-        />
+        {isPolling ? (
+          <FadeLoader color={theme.colors.primary} />
+        ) : (
+          <Image
+            src="/icons/common/plus-black.svg"
+            width={16}
+            height={16}
+            alt="Add"
+          />
+        )}
         <ButtonText size={14}>{placeholder}</ButtonText>
       </StyledButton>
       {isOpen && (
@@ -185,7 +192,7 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
                 src={`/icons/overview/${option.id}.svg`}
                 width={16}
                 height={16}
-                alt="Add"
+                alt={`Add ${option.value}`}
               />
               <Text size={14}>{option.value}</Text>
             </DropdownItem>
diff --git a/frontend/webapp/containers/main/sources/index.ts b/frontend/webapp/containers/main/sources/index.ts
index c81126c2b..66bd8d844 100644
--- a/frontend/webapp/containers/main/sources/index.ts
+++ b/frontend/webapp/containers/main/sources/index.ts
@@ -2,3 +2,4 @@ export * from './managed';
 export * from './choose.sources';
 export * from './choose-sources';
 export * from './edit.source';
+export * from './choose-sources/choose-sources-body';
diff --git a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
index d24e016ed..1ebcc42b0 100644
--- a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
+++ b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
@@ -6,11 +6,12 @@ type UseComputePlatformHook = {
   data?: ComputePlatform;
   loading: boolean;
   error?: Error;
+  refetch: () => void;
 };
 
 export const useComputePlatform = (): UseComputePlatformHook => {
-  const { data, loading, error } =
+  const { data, loading, error, refetch } =
     useQuery<ComputePlatform>(GET_COMPUTE_PLATFORM);
 
-  return { data, loading, error };
+  return { data, loading, error, refetch };
 };
diff --git a/frontend/webapp/hooks/sources/useActualSources.ts b/frontend/webapp/hooks/sources/useActualSources.ts
index 77d57e73b..3cd531a51 100644
--- a/frontend/webapp/hooks/sources/useActualSources.ts
+++ b/frontend/webapp/hooks/sources/useActualSources.ts
@@ -1,30 +1,43 @@
 import { useCreateSource } from '../sources';
 import { useNamespace } from '../compute-platform';
-import { PersistNamespaceItemInput } from '@/types';
 import { useComputePlatform } from '../compute-platform';
+import { useState, useCallback } from 'react';
 
 export function useActualSources() {
-  const { data } = useComputePlatform();
+  const { data, refetch } = useComputePlatform();
   const {
     createSource,
     success: sourceSuccess,
     error: sourceError,
   } = useCreateSource();
   const { persistNamespace } = useNamespace(undefined);
+  const [isPolling, setIsPolling] = useState(false);
 
-  const createSourcesForNamespace = async (
-    namespaceName: string,
-    sources: any[]
-  ) => {
+  const startPolling = useCallback(async () => {
+    setIsPolling(true);
+    const maxRetries = 5;
+    const retryInterval = 1000; // Poll every second
+    let retries = 0;
+
+    while (retries < maxRetries) {
+      await new Promise((resolve) => setTimeout(resolve, retryInterval));
+      refetch();
+      retries++;
+    }
+
+    setIsPolling(false);
+  }, [refetch]);
+
+  const createSourcesForNamespace = async (namespaceName, sources) => {
     await createSource(namespaceName, sources);
+
+    startPolling();
     if (sourceError) {
       throw new Error(`Error creating sources for namespace: ${namespaceName}`);
     }
   };
 
-  const persistNamespaceItems = async (
-    namespaceItems: PersistNamespaceItemInput[]
-  ) => {
+  const persistNamespaceItems = async (namespaceItems) => {
     for (const namespace of namespaceItems) {
       await persistNamespace(namespace);
     }
@@ -34,5 +47,6 @@ export function useActualSources() {
     sources: data?.computePlatform.k8sActualSources || [],
     createSourcesForNamespace,
     persistNamespaceItems,
+    isPolling,
   };
 }

From 76cfe63d15b8f0d825c7cf87cb3f37fe90c5bfa6 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 26 Sep 2024 10:18:16 +0300
Subject: [PATCH 244/374] chore: wip

---
 .../add-destination-modal/index.tsx           | 113 +++++++++---------
 .../main/overview/add-entity/index.tsx        | 113 +++---------------
 .../choose-source-modal/index.tsx             |  99 +++++++++++++++
 3 files changed, 176 insertions(+), 149 deletions(-)
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx

diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index 27aa87bfb..ffb5de923 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import { DestinationTypeItem } from '@/types';
 import { Modal, NavigationButtons } from '@/reuseable-components';
 import { ChooseDestinationModalBody } from '../choose-destination-modal-body';
@@ -9,54 +9,68 @@ interface AddDestinationModalProps {
   handleCloseModal: () => void;
 }
 
-function ModalActionComponent({
-  onNext,
-  onBack,
-  item,
-  isFormValid,
-}: {
+interface ModalActionComponentProps {
   onNext: () => void;
   onBack: () => void;
   isFormValid?: boolean;
-  item: DestinationTypeItem | undefined;
-}) {
-  return (
-    <NavigationButtons
-      buttons={
-        item
-          ? [
-              {
-                label: 'BACK',
-                iconSrc: '/icons/common/arrow-white.svg',
-                onClick: onBack,
-                variant: 'secondary',
-              },
-              {
-                label: 'DONE',
-                onClick: onNext,
-                variant: 'primary',
-                disabled: !isFormValid,
-              },
-            ]
-          : []
-      }
-    />
-  );
+  item?: DestinationTypeItem;
 }
 
-export function AddDestinationModal({
+const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(
+  ({ onNext, onBack, isFormValid, item }) => {
+    if (!item) return null;
+
+    const buttons = [
+      {
+        label: 'BACK',
+        iconSrc: '/icons/common/arrow-white.svg',
+        onClick: onBack,
+        variant: 'secondary' as const,
+      },
+      {
+        label: 'DONE',
+        onClick: onNext,
+        variant: 'primary' as const,
+        disabled: !isFormValid,
+      },
+    ];
+
+    return <NavigationButtons buttons={buttons} />;
+  }
+);
+
+export const AddDestinationModal: React.FC<AddDestinationModalProps> = ({
   isModalOpen,
   handleCloseModal,
-}: AddDestinationModalProps) {
-  const submitRef = useRef<() => void | null>(null);
-  const [selectedItem, setSelectedItem] = useState<DestinationTypeItem>();
-  const [isFormValid, setIsFormValid] = useState(false);
+}) => {
+  const submitRef = useRef<(() => void) | null>(null);
+  const [selectedItem, setSelectedItem] = useState<
+    DestinationTypeItem | undefined
+  >();
+  const [isFormValid, setIsFormValid] = useState<boolean>(false);
 
-  function handleNextStep(item: DestinationTypeItem) {
+  const handleNextStep = useCallback((item: DestinationTypeItem) => {
     setSelectedItem(item);
-  }
+  }, []);
 
-  function renderModalBody() {
+  const handleNext = useCallback(() => {
+    if (submitRef.current) {
+      submitRef.current();
+      setSelectedItem(undefined);
+      handleCloseModal();
+    }
+  }, [handleCloseModal]);
+
+  const handleBack = useCallback(() => {
+    setSelectedItem(undefined);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setSelectedItem(undefined);
+    handleCloseModal();
+  }, [handleCloseModal]);
+
+  const renderModalBody = () => {
     return selectedItem ? (
       <ConnectDestinationModalBody
         onSubmitRef={submitRef}
@@ -66,15 +80,7 @@ export function AddDestinationModal({
     ) : (
       <ChooseDestinationModalBody onSelect={handleNextStep} />
     );
-  }
-
-  function handleNext() {
-    if (submitRef.current) {
-      submitRef.current();
-      setSelectedItem(undefined);
-      handleCloseModal();
-    }
-  }
+  };
 
   return (
     <Modal
@@ -82,18 +88,15 @@ export function AddDestinationModal({
       actionComponent={
         <ModalActionComponent
           onNext={handleNext}
-          onBack={() => setSelectedItem(undefined)}
+          onBack={handleBack}
           isFormValid={isFormValid}
           item={selectedItem}
         />
       }
-      header={{ title: 'Add destination' }}
-      onClose={() => {
-        setSelectedItem(undefined);
-        handleCloseModal();
-      }}
+      header={{ title: 'Add Destination' }}
+      onClose={handleClose}
     >
       {renderModalBody()}
     </Modal>
   );
-}
+};
diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index 1a1afbc24..9ac6f41ef 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -1,25 +1,12 @@
 import React, { useState, useRef, useCallback } from 'react';
 import Image from 'next/image';
-import styled, { css } from 'styled-components';
 import theme from '@/styles/theme';
-import { ChooseSourcesBody } from '../../sources';
-import {
-  DropdownOption,
-  K8sActualSource,
-  PersistNamespaceItemInput,
-} from '@/types';
-import {
-  Button,
-  FadeLoader,
-  Modal,
-  NavigationButtons,
-  Text,
-} from '@/reuseable-components';
-import {
-  useActualSources,
-  useOnClickOutside,
-  useConnectSourcesMenuState,
-} from '@/hooks';
+import { DropdownOption } from '@/types';
+import styled, { css } from 'styled-components';
+import { useActualSources, useOnClickOutside } from '@/hooks';
+import { Button, FadeLoader, Text } from '@/reuseable-components';
+import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal';
+import { AddDestinationModal } from '../../destinations/add-destination/add-destination-modal';
 
 // Styled components for the dropdown UI
 const Container = styled.div`
@@ -71,14 +58,6 @@ const ButtonText = styled(Text)`
   font-weight: 600;
 `;
 
-const ChooseSourcesBodyWrapper = styled.div`
-  width: 1080px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-`;
-
 // Default options for the dropdown
 const DEFAULT_OPTIONS: DropdownOption[] = [
   { id: 'sources', value: 'Source' },
@@ -86,19 +65,6 @@ const DEFAULT_OPTIONS: DropdownOption[] = [
   { id: 'destinations', value: 'Destination' },
 ];
 
-// Action component for the modal's footer
-const ModalActionComponent: React.FC<{ onNext: () => void }> = ({ onNext }) => (
-  <NavigationButtons
-    buttons={[
-      {
-        label: 'DONE',
-        onClick: onNext,
-        variant: 'primary',
-      },
-    ]}
-  />
-);
-
 interface AddEntityButtonDropdownProps {
   options?: DropdownOption[];
   placeholder?: string;
@@ -111,59 +77,24 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [currentModal, setCurrentModal] = useState<string>('');
-  const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
 
-  const { createSourcesForNamespace, persistNamespaceItems, isPolling } =
+  const { isPolling, createSourcesForNamespace, persistNamespaceItems } =
     useActualSources();
-  const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
-    sourcesList,
-  });
 
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
-  // Toggle dropdown open state
   const handleToggle = useCallback(() => {
     setIsOpen((prev) => !prev);
   }, []);
 
-  // Handle selection of dropdown items
   const handleSelect = useCallback((option: DropdownOption) => {
     setCurrentModal(option.id);
     setIsOpen(false);
   }, []);
 
-  // Handle next click action in the modal
-  const onNextClick = useCallback(async () => {
-    try {
-      // Prepare namespace items for persistence
-      const namespaceItems: PersistNamespaceItemInput[] = Object.entries(
-        stateMenu.futureAppsCheckbox
-      ).map(([namespaceName, futureSelected]) => ({
-        name: namespaceName,
-        futureSelected,
-      }));
-
-      await persistNamespaceItems(namespaceItems);
-
-      // Create sources for each namespace
-      await Promise.all(
-        Object.entries(stateMenu.selectedItems).map(
-          async ([namespaceName, sources]) => {
-            const formattedSources = sources.map((source) => ({
-              kind: source.kind,
-              name: source.name,
-              selected: true,
-            }));
-            await createSourcesForNamespace(namespaceName, formattedSources);
-          }
-        )
-      );
-
-      setCurrentModal('');
-    } catch (error) {
-      console.error('Error during onNextClick:', error);
-    }
-  }, [persistNamespaceItems, stateMenu, createSourcesForNamespace]);
+  const handleCloseModal = useCallback(() => {
+    setCurrentModal('');
+  }, []);
 
   return (
     <Container ref={dropdownRef}>
@@ -199,22 +130,16 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
           ))}
         </DropdownListContainer>
       )}
-      <Modal
+      <AddSourceModal
         isOpen={currentModal === 'sources'}
-        header={{ title: `ADD ${currentModal.toUpperCase()}` }}
-        actionComponent={<ModalActionComponent onNext={onNextClick} />}
-        onClose={() => setCurrentModal('')}
-      >
-        <ChooseSourcesBodyWrapper>
-          <ChooseSourcesBody
-            isModal
-            stateMenu={stateMenu}
-            sourcesList={sourcesList}
-            stateHandlers={stateHandlers}
-            setSourcesList={setSourcesList}
-          />
-        </ChooseSourcesBodyWrapper>
-      </Modal>
+        onClose={handleCloseModal}
+        createSourcesForNamespace={createSourcesForNamespace}
+        persistNamespaceItems={persistNamespaceItems}
+      />
+      <AddDestinationModal
+        isModalOpen={currentModal === 'destinations'}
+        handleCloseModal={handleCloseModal}
+      />
     </Container>
   );
 };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
new file mode 100644
index 000000000..44c566f2c
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
@@ -0,0 +1,99 @@
+import React, { useState, useCallback } from 'react';
+import styled from 'styled-components';
+import { Modal, NavigationButtons } from '@/reuseable-components';
+import { K8sActualSource, PersistNamespaceItemInput } from '@/types';
+import { useConnectSourcesMenuState } from '@/hooks';
+import { ChooseSourcesBody } from '../choose-sources-body';
+
+const ChooseSourcesBodyWrapper = styled.div`
+  width: 1080px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+interface AddSourceModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  createSourcesForNamespace: (
+    namespaceName: string,
+    sources: { kind: string; name: string; selected: boolean }[]
+  ) => Promise<void>;
+  persistNamespaceItems: (
+    namespaceItems: PersistNamespaceItemInput[]
+  ) => Promise<void>;
+}
+
+export const AddSourceModal: React.FC<AddSourceModalProps> = ({
+  isOpen,
+  onClose,
+  createSourcesForNamespace,
+  persistNamespaceItems,
+}) => {
+  const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
+  const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
+    sourcesList,
+  });
+
+  const handleNextClick = useCallback(async () => {
+    try {
+      const namespaceItems: PersistNamespaceItemInput[] = Object.entries(
+        stateMenu.futureAppsCheckbox
+      ).map(([namespaceName, futureSelected]) => ({
+        name: namespaceName,
+        futureSelected,
+      }));
+
+      await persistNamespaceItems(namespaceItems);
+
+      await Promise.all(
+        Object.entries(stateMenu.selectedItems).map(
+          async ([namespaceName, sources]) => {
+            const formattedSources = sources.map((source) => ({
+              kind: source.kind,
+              name: source.name,
+              selected: true,
+            }));
+            await createSourcesForNamespace(namespaceName, formattedSources);
+          }
+        )
+      );
+
+      onClose();
+    } catch (error) {
+      console.error('Error during handleNextClick:', error);
+    }
+  }, [createSourcesForNamespace, persistNamespaceItems, stateMenu, onClose]);
+
+  const ModalActionComponent = (
+    <NavigationButtons
+      buttons={[
+        {
+          label: 'DONE',
+          onClick: handleNextClick,
+          variant: 'primary',
+        },
+      ]}
+    />
+  );
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      header={{ title: 'Add Source' }}
+      actionComponent={ModalActionComponent}
+      onClose={onClose}
+    >
+      <ChooseSourcesBodyWrapper>
+        <ChooseSourcesBody
+          isModal
+          stateMenu={stateMenu}
+          sourcesList={sourcesList}
+          stateHandlers={stateHandlers}
+          setSourcesList={setSourcesList}
+        />
+      </ChooseSourcesBodyWrapper>
+    </Modal>
+  );
+};

From 6fcbeaf72f35da0002dd0bdbf50f6c2ca596031f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 26 Sep 2024 11:47:52 +0300
Subject: [PATCH 245/374] chore: add new node

---
 .../nodes-data-flow/builder.ts                | 45 ++++++++--
 .../nodes-data-flow/index.tsx                 |  4 +-
 .../nodes-data-flow/nodes/add-action-node.tsx | 90 +++++++++++++++++++
 3 files changed, 131 insertions(+), 8 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx

diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index bb12eb90b..c9aa64474 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -138,6 +138,25 @@ export const buildNodesAndEdges = ({
     }),
   ];
 
+  if (actionsNode.length === 1) {
+    actionsNode.push(
+      createNode(
+        `action-0`,
+        'addAction',
+        centerColumnX,
+        NODE_HEIGHT * (actions.length + 1),
+        {
+          type: 'addAction',
+          title: 'ADD ACTION',
+          subTitle: '',
+          imageUri: `${ACTION_ICON_PATH}add-action.svg`,
+          status: 'healthy',
+          onClick: () => console.log('Add Action'),
+        }
+      )
+    );
+  }
+
   // Combine all nodes
   const nodes = [...sourcesNode, ...destinationNode, ...actionsNode];
 
@@ -146,24 +165,36 @@ export const buildNodesAndEdges = ({
 
   // Connect sources to actions
   const sourceToActionEdges: Edge[] = sources.map((_, sourceIndex) => {
-    const actionIndex = sourceIndex % actions.length;
+    const actionIndex =
+      actionsNode.length === 2 ? 0 : sourceIndex % actions.length;
     return createEdge(
       `source-${sourceIndex}-to-action-${actionIndex}`,
       `source-${sourceIndex}`,
-      `action-${actionIndex}`
+      `action-${actionIndex}`,
+      false
     );
   });
-
   // Connect actions to destinations
-  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) =>
-    destinations.map((_, destinationIndex) =>
+  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) => {
+    return destinations.map((_, destinationIndex) =>
       createEdge(
         `action-${actionIndex}-to-destination-${destinationIndex}`,
         `action-${actionIndex}`,
         `destination-${destinationIndex}`
       )
-    )
-  );
+    );
+  });
+
+  if (actions.length === 0) {
+    actionToDestinationEdges.push(
+      createEdge(
+        `action-0-to-destination-0`,
+        `action-0`,
+        `destination-0`,
+        false
+      )
+    );
+  }
 
   // Combine all edges
   edges.push(...sourceToActionEdges, ...actionToDestinationEdges);
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
index 67bdfa4f0..91a2719ac 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -2,12 +2,14 @@
 import React from 'react';
 import '@xyflow/react/dist/style.css';
 import BaseNode from './nodes/base-node';
-import headerNode from './nodes/header-node';
 import { ReactFlow } from '@xyflow/react';
+import headerNode from './nodes/header-node';
+import AddActionNode from './nodes/add-action-node';
 
 const nodeTypes = {
   base: BaseNode,
   header: headerNode,
+  addAction: AddActionNode,
 };
 
 interface NodeBaseDataFlowProps {
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
new file mode 100644
index 000000000..78a3cc9a5
--- /dev/null
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
@@ -0,0 +1,90 @@
+import Image from 'next/image';
+import React, { memo } from 'react';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+import { Handle, Position } from '@xyflow/react';
+
+const BaseNodeContainer = styled.div`
+  display: flex;
+  width: 296px;
+  padding: 16px 24px 16px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: 16px;
+  border: 1px dashed ${({ theme }) => theme.colors.border};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.white_opacity['004']};
+  }
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  font-weight: 600;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+`;
+
+const SubTitle = styled(Text)`
+  font-size: 12px;
+  color: ${({ theme }) => theme.text.grey};
+`;
+
+export interface NodeDataProps {
+  type: 'source' | 'action' | 'destination';
+  title: string;
+  subTitle: string;
+  imageUri: string;
+  monitors?: string[];
+  status: 'healthy' | 'unhealthy';
+  onClick: () => void;
+}
+
+interface BaseNodeProps {
+  data: NodeDataProps;
+  isConnectable: boolean;
+}
+
+export default memo(({ isConnectable, data }: BaseNodeProps) => {
+  const { onClick } = data;
+
+  return (
+    <BaseNodeContainer onClick={onClick}>
+      <TitleWrapper>
+        <Image
+          src={'/icons/common/plus.svg'}
+          width={16}
+          height={16}
+          alt="plus"
+        />
+        <Title>{'ADD ACTION'}</Title>
+      </TitleWrapper>
+      <SubTitle>{'Add first action to modify the OpenTelemetry data'}</SubTitle>
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="action-input"
+        isConnectable={isConnectable}
+        style={{ visibility: 'hidden' }}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="action-output"
+        isConnectable={isConnectable}
+        style={{ visibility: 'hidden' }}
+      />
+    </BaseNodeContainer>
+  );
+});

From e44b87d19273a2005d4f509f1cbf86ac38247d28 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Thu, 26 Sep 2024 17:02:45 +0300
Subject: [PATCH 246/374] chore: init auto-complete input

---
 .../choose-action-modal/action-options.ts     |  59 +++++
 .../actions/choose-action-modal/index.tsx     |  92 +++++++
 .../webapp/containers/main/actions/index.ts   |   1 +
 .../main/overview/add-entity/index.tsx        |   5 +
 .../public/icons/actions/addclusterinfo.svg   |   3 +
 .../public/icons/actions/deleteattribute.svg  |   3 +
 .../public/icons/actions/renameattribute.svg  |   3 +
 .../webapp/public/icons/actions/sampler.svg   |   3 +
 .../auto-complete-input/index.tsx             | 242 ++++++++++++++++++
 frontend/webapp/reuseable-components/index.ts |   1 +
 10 files changed, 412 insertions(+)
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
 create mode 100644 frontend/webapp/public/icons/actions/addclusterinfo.svg
 create mode 100644 frontend/webapp/public/icons/actions/deleteattribute.svg
 create mode 100644 frontend/webapp/public/icons/actions/renameattribute.svg
 create mode 100644 frontend/webapp/public/icons/actions/sampler.svg
 create mode 100644 frontend/webapp/reuseable-components/auto-complete-input/index.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
new file mode 100644
index 000000000..b0e342e3c
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -0,0 +1,59 @@
+import { ActionsType } from '@/types';
+
+export const ACTION_OPTIONS = [
+  {
+    id: 'add_cluster_info',
+    label: 'Add Cluster Info',
+    description: 'Add static cluster-scoped attributes to your data.',
+    type: ActionsType.ADD_CLUSTER_INFO,
+    icon: '/icons/actions/addclusterinfo.svg',
+  },
+  {
+    id: 'delete_attribute',
+    label: 'Delete Attribute',
+    description: 'Delete attributes from logs, metrics, and traces.',
+    type: ActionsType.DELETE_ATTRIBUTES,
+    icon: '/icons/actions/deleteattribute.svg',
+  },
+  {
+    id: 'rename_attribute',
+    label: 'Rename Attribute',
+    description: 'Rename attributes in logs, metrics, and traces.',
+    type: ActionsType.RENAME_ATTRIBUTES,
+    icon: '/icons/actions/renameattribute.svg',
+  },
+  {
+    id: 'pii-masking',
+    label: 'PII Masking',
+    description: 'Mask PII data in your traces.',
+    type: ActionsType.PII_MASKING,
+    icon: '/icons/actions/piimasking.svg',
+  },
+  {
+    id: 'sampler',
+    label: 'Samplers',
+    description: '',
+    type: ActionsType.PROBABILISTIC_SAMPLER,
+    icon: '/icons/actions/sampler.svg',
+    items: [
+      {
+        id: 'error-sampler',
+        label: 'Error Sampler',
+        description: 'Sample errors based on percentage.',
+        type: ActionsType.ERROR_SAMPLER,
+      },
+      {
+        id: 'probabilistic-sampler',
+        label: 'Probabilistic Sampler',
+        description: 'Sample traces based on percentage.',
+        type: ActionsType.PROBABILISTIC_SAMPLER,
+      },
+      {
+        id: 'latency-action',
+        label: 'Latency Action',
+        description: 'Add latency to your traces.',
+        type: ActionsType.LATENCY_SAMPLER,
+      },
+    ],
+  },
+];
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
new file mode 100644
index 000000000..977d632b2
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -0,0 +1,92 @@
+import React, { useRef, useCallback } from 'react';
+import {
+  AutocompleteInput,
+  Modal,
+  NavigationButtons,
+  Text,
+} from '@/reuseable-components';
+import styled from 'styled-components';
+import { ACTION_OPTIONS } from './action-options';
+
+const DefineActionContainer = styled.section`
+  height: 640px;
+  padding: 0px 220px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 16px;
+  max-width: 640px;
+  margin: 32px 0 24px 0;
+`;
+
+const SubTitle = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  line-height: 150%;
+`;
+
+interface AddActionModalProps {
+  isModalOpen: boolean;
+  handleCloseModal: () => void;
+}
+
+interface ModalActionComponentProps {
+  onNext: () => void;
+}
+
+const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(
+  ({ onNext }) => {
+    const buttons = [
+      {
+        label: 'DONE',
+        onClick: onNext,
+        variant: 'primary' as const,
+      },
+    ];
+
+    return <NavigationButtons buttons={buttons} />;
+  }
+);
+
+export const AddActionModal: React.FC<AddActionModalProps> = ({
+  isModalOpen,
+  handleCloseModal,
+}) => {
+  const submitRef = useRef<(() => void) | null>(null);
+
+  const handleNext = useCallback(() => {
+    if (submitRef.current) {
+      handleCloseModal();
+    }
+  }, [handleCloseModal]);
+
+  const handleClose = useCallback(() => {
+    handleCloseModal();
+  }, [handleCloseModal]);
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      actionComponent={<ModalActionComponent onNext={handleNext} />}
+      header={{ title: 'Add Action' }}
+      onClose={handleClose}
+    >
+      <DefineActionContainer>
+        <HeaderWrapper>
+          <Text size={20}>{'Define Action'}</Text>
+          <SubTitle>
+            {
+              'Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
+            }
+          </SubTitle>
+        </HeaderWrapper>
+        <AutocompleteInput options={ACTION_OPTIONS} />
+      </DefineActionContainer>
+    </Modal>
+  );
+};
diff --git a/frontend/webapp/containers/main/actions/index.ts b/frontend/webapp/containers/main/actions/index.ts
index 53803aef1..7fce4982a 100644
--- a/frontend/webapp/containers/main/actions/index.ts
+++ b/frontend/webapp/containers/main/actions/index.ts
@@ -2,3 +2,4 @@ export * from './managed';
 export * from './choose-action';
 export * from './edit-action';
 export * from './create-action';
+export * from './choose-action-modal';
diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index 9ac6f41ef..913123bbf 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -7,6 +7,7 @@ import { useActualSources, useOnClickOutside } from '@/hooks';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
 import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal';
 import { AddDestinationModal } from '../../destinations/add-destination/add-destination-modal';
+import { AddActionModal } from '../../actions';
 
 // Styled components for the dropdown UI
 const Container = styled.div`
@@ -140,6 +141,10 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
         isModalOpen={currentModal === 'destinations'}
         handleCloseModal={handleCloseModal}
       />
+      <AddActionModal
+        isModalOpen={currentModal === 'actions'}
+        handleCloseModal={handleCloseModal}
+      />
     </Container>
   );
 };
diff --git a/frontend/webapp/public/icons/actions/addclusterinfo.svg b/frontend/webapp/public/icons/actions/addclusterinfo.svg
new file mode 100644
index 000000000..681f7225d
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/addclusterinfo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.99992 11.3333V9.33333M7.99992 9.33333V7.33333M7.99992 9.33333H5.99992M7.99992 9.33333H9.99992M14.6666 8.26667V9.73333C14.6666 11.2268 14.6666 11.9735 14.3759 12.544C14.1203 13.0457 13.7123 13.4537 13.2106 13.7094C12.6401 14 11.8934 14 10.3999 14H5.59992C4.10645 14 3.35971 14 2.78928 13.7094C2.28751 13.4537 1.87956 13.0457 1.6239 12.544C1.33325 11.9735 1.33325 11.2268 1.33325 9.73333V6.26667C1.33325 4.77319 1.33325 4.02646 1.6239 3.45603C1.87956 2.95426 2.28751 2.54631 2.78928 2.29065C3.35971 2 4.10645 2 5.59992 2H5.81029C6.12336 2 6.2799 2 6.42199 2.04315C6.54778 2.08135 6.6648 2.14398 6.76636 2.22745C6.88108 2.32174 6.96791 2.45199 7.14157 2.71248L7.52493 3.28752C7.69859 3.54801 7.78542 3.67826 7.90014 3.77255C8.0017 3.85602 8.11873 3.91865 8.24452 3.95685C8.38661 4 8.54314 4 8.85621 4H10.3999C11.8934 4 12.6401 4 13.2106 4.29065C13.7123 4.54631 14.1203 4.95426 14.3759 5.45603C14.6666 6.02646 14.6666 6.77319 14.6666 8.26667Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/actions/deleteattribute.svg b/frontend/webapp/public/icons/actions/deleteattribute.svg
new file mode 100644
index 000000000..6467c1865
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/deleteattribute.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M10.6666 10.0007L8.66659 8.00065M8.66659 8.00065L6.66659 6.00065M8.66659 8.00065L10.6666 6.00065M8.66659 8.00065L6.66659 10.0007M4.41666 4.01431C3.33136 5.06369 2.34376 6.24491 1.47059 7.5384C1.37903 7.67404 1.33325 7.83734 1.33325 8.00065C1.33325 8.16396 1.37903 8.32726 1.47059 8.4629C2.34376 9.75639 3.33136 10.9376 4.41666 11.987C4.65522 12.2177 4.77449 12.333 4.94023 12.4319C5.07791 12.514 5.25728 12.5866 5.41337 12.6232C5.60126 12.6673 5.78723 12.6673 6.15917 12.6673H11.3332C12.2667 12.6673 12.7334 12.6673 13.0899 12.4857C13.4035 12.3259 13.6585 12.0709 13.8183 11.7573C13.9999 11.4008 13.9999 10.9341 13.9999 10.0007V6.00065C13.9999 5.06723 13.9999 4.60052 13.8183 4.244C13.6585 3.9304 13.4035 3.67543 13.0899 3.51564C12.7334 3.33398 12.2667 3.33398 11.3332 3.33398H6.15917C5.78723 3.33398 5.60126 3.33398 5.41337 3.37809C5.25728 3.41473 5.07791 3.48727 4.94023 3.56943C4.77449 3.66832 4.65522 3.78365 4.41666 4.01431Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/actions/renameattribute.svg b/frontend/webapp/public/icons/actions/renameattribute.svg
new file mode 100644
index 000000000..229225569
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/renameattribute.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M14.6666 8.00065V12.0007M1.33325 12.6673L4.23847 4.1055C4.40371 3.64283 4.84196 3.33398 5.33325 3.33398C5.83824 3.33398 6.28547 3.66 6.43999 4.14076L9.33325 12.6673M2.69054 8.66732H7.97596M14.6666 10.0007C14.6666 11.1052 13.7712 12.0007 12.6666 12.0007C11.562 12.0007 10.6666 11.1052 10.6666 10.0007C10.6666 8.89608 11.562 8.00065 12.6666 8.00065C13.7712 8.00065 14.6666 8.89608 14.6666 10.0007Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/actions/sampler.svg b/frontend/webapp/public/icons/actions/sampler.svg
new file mode 100644
index 000000000..79ee6d969
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/sampler.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M5.67367 5.67497H5.687M10.515 3.91532L12.1293 5.52965C13.0067 6.40707 13.4454 6.84578 13.6851 7.31618C14.1695 8.2669 14.1695 9.39207 13.6851 10.3428C13.4454 10.8132 13.0067 11.2519 12.1293 12.1293C11.2519 13.0067 10.8132 13.4454 10.3428 13.6851C9.39207 14.1695 8.2669 14.1695 7.31618 13.6851C6.84578 13.4454 6.40707 13.0067 5.52965 12.1293L3.91532 10.515C3.17317 9.77284 2.8021 9.40176 2.54483 8.96668C2.31682 8.58108 2.15521 8.15991 2.06673 7.72076C1.9669 7.22527 1.99448 6.70122 2.04965 5.65312L2.07845 5.10584C2.13195 4.0893 2.1587 3.58104 2.36993 3.18719C2.55598 2.84028 2.84028 2.55598 3.18719 2.36993C3.58104 2.1587 4.0893 2.13195 5.10584 2.07845L5.65312 2.04965C6.70122 1.99448 7.22527 1.9669 7.72076 2.06673C8.15991 2.15521 8.58108 2.31682 8.96668 2.54483C9.40176 2.8021 9.77284 3.17317 10.515 3.91532ZM6.32633 5.65853C6.32633 6.02672 6.02786 6.3252 5.65967 6.3252C5.29148 6.3252 4.993 6.02672 4.993 5.65853C4.993 5.29034 5.29148 4.99186 5.65967 4.99186C6.02786 4.99186 6.32633 5.29034 6.32633 5.65853Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
new file mode 100644
index 000000000..9c13db288
--- /dev/null
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -0,0 +1,242 @@
+import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
+import styled, { css } from 'styled-components';
+import { Text } from '../text';
+import Image from 'next/image';
+
+interface Option {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  items?: Option[]; // For handling a list of items
+}
+
+interface AutocompleteInputProps {
+  options: Option[];
+  placeholder?: string;
+  onOptionSelect?: (option: Option) => void;
+}
+
+const AutocompleteInput: FC<AutocompleteInputProps> = ({
+  options,
+  placeholder = 'Type to search...',
+  onOptionSelect,
+}) => {
+  const [query, setQuery] = useState('');
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>([]);
+  const [showOptions, setShowOptions] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value;
+    setQuery(input);
+    if (input) {
+      const filtered = filterOptions(options, input);
+      setFilteredOptions(filtered);
+      setShowOptions(true);
+    } else {
+      setShowOptions(false);
+    }
+  };
+
+  const filterOptions = (optionsList: Option[], input: string): Option[] => {
+    return optionsList.reduce<Option[]>((acc, option) => {
+      if (option.items) {
+        const filteredSubItems = filterOptions(option.items, input);
+        if (filteredSubItems.length) {
+          acc.push({ ...option, items: filteredSubItems });
+        }
+      } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
+        acc.push(option);
+      }
+      return acc;
+    }, []);
+  };
+
+  const handleOptionClick = (option: Option) => {
+    setQuery(option.label);
+    setShowOptions(false);
+    if (onOptionSelect) {
+      onOptionSelect(option);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowDown' && activeIndex < filteredOptions.length - 1) {
+      setActiveIndex(activeIndex + 1);
+    } else if (e.key === 'ArrowUp' && activeIndex > 0) {
+      setActiveIndex(activeIndex - 1);
+    } else if (e.key === 'Enter' && activeIndex >= 0) {
+      handleOptionClick(filteredOptions[activeIndex]);
+    }
+  };
+
+  return (
+    <AutocompleteContainer>
+      <InputWrapper>
+        <StyledInput
+          type="text"
+          value={query}
+          placeholder={placeholder}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onBlur={() => setShowOptions(false)}
+          onFocus={() => query && setShowOptions(true)}
+        />
+      </InputWrapper>
+      {showOptions && (
+        <OptionsList>
+          {filteredOptions.map((option, index) => (
+            <OptionItem
+              key={option.id}
+              option={option}
+              isActive={index === activeIndex}
+              onClick={() => handleOptionClick(option)}
+            />
+          ))}
+        </OptionsList>
+      )}
+    </AutocompleteContainer>
+  );
+};
+
+interface OptionItemProps {
+  option: Option;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
+  return (
+    <OptionItemContainer
+      isActive={isActive}
+      isList={!!option.items && option.items.length > 0}
+      onMouseDown={onClick}
+    >
+      {option.icon && (
+        <Image width={16} height={16} src={option.icon} alt={option.label} />
+      )}
+      <div>
+        <OptionLabelWrapper>
+          <OptionLabel>{option.label}</OptionLabel>
+          <OptionDescription>{option.description}</OptionDescription>
+        </OptionLabelWrapper>
+        {option.items && option.items.length > 0 && (
+          <SubOptionsList>
+            {option.items.map((subOption) => (
+              <OptionItem
+                key={subOption.id}
+                option={subOption}
+                isActive={false}
+                onClick={() => onClick()}
+              />
+            ))}
+          </SubOptionsList>
+        )}
+      </div>
+    </OptionItemContainer>
+  );
+};
+
+export { AutocompleteInput };
+
+/** Styled Components */
+
+const AutocompleteContainer = styled.div`
+  position: relative;
+`;
+
+const InputWrapper = styled.div<{}>`
+  width: calc(100% - 16px);
+  display: flex;
+  align-items: center;
+  height: 36px;
+  gap: 12px;
+  padding: 0 8px;
+  transition: border-color 0.3s;
+  border-radius: 32px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const StyledInput = styled.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 14px;
+  font-family: ${({ theme }) => theme.font_family.primary};
+  font-weight: 300;
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text};
+    font-family: ${({ theme }) => theme.font_family.primary};
+    opacity: 0.4;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 22px; /* 157.143% */
+  }
+
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const OptionsList = styled.ul`
+  position: absolute;
+  max-height: 348px;
+  top: 32px;
+  border-radius: 24px;
+  width: calc(100% - 16px);
+  overflow-y: auto;
+  background-color: ${({ theme }) => theme.colors.dropdown_bg};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  z-index: 9999;
+  padding: 12px;
+`;
+
+interface OptionItemContainerProps {
+  isActive: boolean;
+  isList: boolean;
+}
+
+const OptionItemContainer = styled.li<OptionItemContainerProps>`
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 24px;
+  gap: 8px;
+  display: flex;
+  align-items: ${({ isList }) => (isList ? 'flex-start' : 'center')};
+  &:hover {
+    background: ${({ theme }) => theme.colors.white_opacity['008']};
+  }
+`;
+
+const OptionLabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const OptionLabel = styled(Text)`
+  flex: 1;
+  font-size: 14px;
+`;
+
+const OptionDescription = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  font-size: 10px;
+  line-height: 150%;
+`;
+const SubOptionsList = styled.ul`
+  padding-left: 16px;
+  margin: 4px 0 0 0;
+  list-style: none;
+`;
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index de50dd16b..b749f5fa0 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -22,3 +22,4 @@ export * from './skeleton-loader';
 export * from './connection-status';
 export * from './nodes-data-flow';
 export * from './tab-list';
+export * from './auto-complete-input';

From 174d8af157afa171465fcc5918db8562f758c89c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 6 Oct 2024 10:27:35 +0300
Subject: [PATCH 247/374] wip: fixed style

---
 .../auto-complete-input/index.tsx             | 79 ++++++++++++++-----
 1 file changed, 59 insertions(+), 20 deletions(-)

diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 9c13db288..2b31ea584 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { Text } from '../text';
 import Image from 'next/image';
 
@@ -61,13 +61,26 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
     }
   };
 
+  const flattenOptions = (options: Option[]): Option[] => {
+    return options.reduce<Option[]>((acc, option) => {
+      acc.push(option);
+      if (option.items) {
+        acc = acc.concat(flattenOptions(option.items));
+      }
+      return acc;
+    }, []);
+  };
+
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'ArrowDown' && activeIndex < filteredOptions.length - 1) {
+    // Flatten the options to handle keyboard navigation - TODO: Refactor this
+    return;
+    const flatOptions = flattenOptions(filteredOptions);
+    if (e.key === 'ArrowDown' && activeIndex < flatOptions.length - 1) {
       setActiveIndex(activeIndex + 1);
     } else if (e.key === 'ArrowUp' && activeIndex > 0) {
       setActiveIndex(activeIndex - 1);
     } else if (e.key === 'Enter' && activeIndex >= 0) {
-      handleOptionClick(filteredOptions[activeIndex]);
+      handleOptionClick(flatOptions[activeIndex]);
     }
   };
 
@@ -91,7 +104,7 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
               key={option.id}
               option={option}
               isActive={index === activeIndex}
-              onClick={() => handleOptionClick(option)}
+              onClick={handleOptionClick}
             />
           ))}
         </OptionsList>
@@ -103,20 +116,22 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
 interface OptionItemProps {
   option: Option;
   isActive: boolean;
-  onClick: () => void;
+  onClick: (option: Option) => void;
 }
 
 const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
+  const hasSubItems = !!option.items && option.items.length > 0;
+
   return (
     <OptionItemContainer
       isActive={isActive}
-      isList={!!option.items && option.items.length > 0}
-      onMouseDown={onClick}
+      isList={hasSubItems}
+      onMouseDown={() => onClick(option)}
     >
       {option.icon && (
         <Image width={16} height={16} src={option.icon} alt={option.label} />
       )}
-      <div>
+      <OptionContent>
         <OptionLabelWrapper>
           <OptionLabel>{option.label}</OptionLabel>
           <OptionDescription>{option.description}</OptionDescription>
@@ -124,16 +139,18 @@ const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
         {option.items && option.items.length > 0 && (
           <SubOptionsList>
             {option.items.map((subOption) => (
-              <OptionItem
-                key={subOption.id}
-                option={subOption}
-                isActive={false}
-                onClick={() => onClick()}
-              />
+              <SubOptionContainer key={subOption.id}>
+                <VerticalLine />
+                <OptionItem
+                  option={subOption}
+                  isActive={false}
+                  onClick={onClick}
+                />
+              </SubOptionContainer>
             ))}
           </SubOptionsList>
         )}
-      </div>
+      </OptionContent>
     </OptionItemContainer>
   );
 };
@@ -146,7 +163,7 @@ const AutocompleteContainer = styled.div`
   position: relative;
 `;
 
-const InputWrapper = styled.div<{}>`
+const InputWrapper = styled.div`
   width: calc(100% - 16px);
   display: flex;
   align-items: center;
@@ -180,7 +197,7 @@ const StyledInput = styled.input`
     opacity: 0.4;
     font-size: 14px;
     font-weight: 300;
-    line-height: 22px; /* 157.143% */
+    line-height: 22px;
   }
 
   &:disabled {
@@ -209,16 +226,37 @@ interface OptionItemContainerProps {
 
 const OptionItemContainer = styled.li<OptionItemContainerProps>`
   padding: 8px 12px;
-  cursor: pointer;
+  cursor: ${({ isList }) => (isList ? 'default' : 'pointer')};
   border-radius: 24px;
   gap: 8px;
   display: flex;
   align-items: ${({ isList }) => (isList ? 'flex-start' : 'center')};
+  background: ${({ isActive, theme }) =>
+    isActive ? theme.colors.activeBackground : 'transparent'};
+
   &:hover {
-    background: ${({ theme }) => theme.colors.white_opacity['008']};
+    background: ${({ theme, isList }) =>
+      !isList && theme.colors.white_opacity['008']};
   }
 `;
 
+const OptionContent = styled.div`
+  width: 100%;
+`;
+
+const SubOptionContainer = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+const VerticalLine = styled.div`
+  width: 1px;
+  height: 52px;
+  background-color: ${({ theme }) => theme.colors.white_opacity['008']};
+  position: absolute;
+  left: 33px;
+`;
+
 const OptionLabelWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -235,8 +273,9 @@ const OptionDescription = styled(Text)`
   font-size: 10px;
   line-height: 150%;
 `;
+
 const SubOptionsList = styled.ul`
-  padding-left: 16px;
+  padding-left: 0px;
   margin: 4px 0 0 0;
   list-style: none;
 `;

From 5d4d0af54b2a75a6b6824dfdf5bbbd31154167bc Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 6 Oct 2024 17:10:19 +0300
Subject: [PATCH 248/374] wip: init drawer architcture

---
 .../overview/overview-data-flow/index.tsx     |  8 +-
 .../main/overview/overview-drawer/index.tsx   | 23 ++++++
 .../reuseable-components/drawer/index.tsx     | 76 +++++++++++++++++++
 .../nodes-data-flow/builder.ts                |  9 ++-
 .../nodes-data-flow/index.tsx                 |  8 +-
 .../nodes-data-flow/nodes/add-action-node.tsx | 17 +----
 .../nodes-data-flow/nodes/base-node.tsx       |  5 +-
 frontend/webapp/store/index.ts                |  1 +
 frontend/webapp/store/useDrawerStore.tsx      | 26 +++++++
 frontend/webapp/styles/theme.ts               |  1 +
 10 files changed, 151 insertions(+), 23 deletions(-)
 create mode 100644 frontend/webapp/containers/main/overview/overview-drawer/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/drawer/index.tsx
 create mode 100644 frontend/webapp/store/useDrawerStore.tsx

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 23df95436..9f3ae6433 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 import styled from 'styled-components';
+import { OverviewDrawer } from '../overview-drawer';
 import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
@@ -52,10 +53,15 @@ export function OverviewDataFlowContainer() {
     });
   }, [sources, actions, destinations, columnWidth, containerWidth]);
 
+  function onNodeClick(_, object: any) {
+    console.log(object);
+  }
+
   return (
     <OverviewDataFlowWrapper ref={containerRef}>
+      <OverviewDrawer />
       <OverviewActionMenuContainer />
-      <NodeBaseDataFlow nodes={nodes} edges={edges} />
+      <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={onNodeClick} />
     </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
new file mode 100644
index 000000000..2551acce4
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -0,0 +1,23 @@
+import { useDrawerStore } from '@/store';
+
+const componentMap = {
+  source: () => <div>Source</div>,
+  action: () => <div>Action</div>,
+  destination: () => <div>Destination</div>,
+};
+
+const OverviewDrawer = () => {
+  const selectedItem = useDrawerStore((state) => state.selectedItem);
+
+  if (!selectedItem) return null;
+
+  const SpecificComponent = componentMap[selectedItem.type];
+
+  return SpecificComponent ? (
+    <SpecificComponent />
+  ) : (
+    <div>Component not found</div>
+  );
+};
+
+export { OverviewDrawer };
diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
new file mode 100644
index 000000000..177fe7cb4
--- /dev/null
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  position?: 'left' | 'right'; // Optional prop to specify the drawer opening side
+  width?: string; // Optional width control, defaults to 300px
+  children: React.ReactNode;
+}
+
+// Styled-component for overlay
+const Overlay = styled.div<{ isOpen: boolean }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
+  transition: opacity 0.3s ease;
+  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
+  z-index: 999;
+`;
+
+// Styled-component for drawer container
+const DrawerContainer = styled.div<{
+  isOpen: boolean;
+  position: 'left' | 'right';
+  width: string;
+}>`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  ${({ position, width }) => position}: 0;
+  width: ${({ width }) => width};
+  background-color: ${({ theme }) => theme.colors.blank_background};
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  transform: translateX(
+    ${({ isOpen, position }) =>
+      isOpen ? '0' : position === 'left' ? '-100%' : '100%'}
+  );
+  transition: transform 0.3s ease;
+  z-index: 1000;
+  overflow-y: auto;
+`;
+
+export const Drawer: React.FC<DrawerProps> = ({
+  isOpen,
+  onClose,
+  position = 'right',
+  width = '300px',
+  children,
+}) => {
+  // Handle closing the drawer when escape key is pressed
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <>
+      <Overlay isOpen={isOpen} onClick={onClose} />
+      <DrawerContainer isOpen={isOpen} position={position} width={width}>
+        {children}
+      </DrawerContainer>
+    </>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index c9aa64474..0a9e6d111 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -2,6 +2,7 @@ import { Node, Edge } from 'react-flow-renderer';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 import { ActionItem } from '@/types';
 import theme from '@/styles/theme';
+import { useDrawerStore } from '@/store';
 
 // Constants
 const NODE_HEIGHT = 80;
@@ -56,6 +57,8 @@ export const buildNodesAndEdges = ({
   const rightColumnX = containerWidth - columnWidth;
   const centerColumnX = (containerWidth - columnWidth) / 2;
 
+  const setSelectedItem = useDrawerStore((state) => state.setSelectedItem);
+
   // Build Source Nodes
   const sourcesNode: Node[] = [
     createNode('header-source', 'header', leftColumnX, 0, {
@@ -75,7 +78,7 @@ export const buildNodesAndEdges = ({
           subTitle: source.kind,
           imageUri: getMainContainerLanguageLogo(source),
           status: 'healthy',
-          onClick: () => console.log(source),
+          onClick: () => setSelectedItem(source),
         }
       )
     ),
@@ -101,7 +104,7 @@ export const buildNodesAndEdges = ({
           imageUri: destination.destinationType.imageUrl,
           status: 'healthy',
           monitors: extractMonitors(destination.exportedSignals),
-          onClick: () => console.log(destination),
+          onClick: () => setSelectedItem(destination),
         }
       )
     ),
@@ -132,7 +135,7 @@ export const buildNodesAndEdges = ({
           imageUri: `${ACTION_ICON_PATH}${action.type.toLowerCase()}.svg`,
           monitors: actionSpec.signals,
           status: 'healthy',
-          onClick: () => console.log(action),
+          onClick: () => setSelectedItem(action),
         }
       );
     }),
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
index 91a2719ac..53e684fd9 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -15,9 +15,14 @@ const nodeTypes = {
 interface NodeBaseDataFlowProps {
   nodes: any[];
   edges: any[];
+  onNodeClick?: (event: React.MouseEvent, object: any) => void;
 }
 
-export function NodeBaseDataFlow({ nodes, edges }: NodeBaseDataFlowProps) {
+export function NodeBaseDataFlow({
+  nodes,
+  edges,
+  onNodeClick,
+}: NodeBaseDataFlowProps) {
   return (
     <div style={{ height: 'calc(100vh - 100px)' }}>
       <ReactFlow
@@ -25,6 +30,7 @@ export function NodeBaseDataFlow({ nodes, edges }: NodeBaseDataFlowProps) {
         nodes={nodes}
         edges={edges}
         zoomOnScroll={false}
+        onNodeClick={onNodeClick}
       />
     </div>
   );
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
index 78a3cc9a5..a9bddaf50 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
@@ -41,26 +41,13 @@ const SubTitle = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
 `;
 
-export interface NodeDataProps {
-  type: 'source' | 'action' | 'destination';
-  title: string;
-  subTitle: string;
-  imageUri: string;
-  monitors?: string[];
-  status: 'healthy' | 'unhealthy';
-  onClick: () => void;
-}
-
 interface BaseNodeProps {
-  data: NodeDataProps;
   isConnectable: boolean;
 }
 
-export default memo(({ isConnectable, data }: BaseNodeProps) => {
-  const { onClick } = data;
-
+export default memo(({ isConnectable }: BaseNodeProps) => {
   return (
-    <BaseNodeContainer onClick={onClick}>
+    <BaseNodeContainer>
       <TitleWrapper>
         <Image
           src={'/icons/common/plus.svg'}
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
index 393d1c2ee..2d2ecb397 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
@@ -60,7 +60,6 @@ export interface NodeDataProps {
   imageUri: string;
   monitors?: string[];
   status: 'healthy' | 'unhealthy';
-  onClick: () => void;
 }
 
 interface BaseNodeProps {
@@ -69,7 +68,7 @@ interface BaseNodeProps {
 }
 
 export default memo(({ isConnectable, data }: BaseNodeProps) => {
-  const { title, subTitle, imageUri, status, onClick, type, monitors } = data;
+  const { title, subTitle, imageUri, type, monitors } = data;
 
   function renderHandles() {
     switch (type) {
@@ -145,7 +144,7 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
   }
 
   return (
-    <BaseNodeContainer onClick={onClick}>
+    <BaseNodeContainer>
       <SourceIconWrapper>
         <Image
           src={imageUri || '/icons/common/folder.svg'}
diff --git a/frontend/webapp/store/index.ts b/frontend/webapp/store/index.ts
index 0f3f6137d..aa72ad258 100644
--- a/frontend/webapp/store/index.ts
+++ b/frontend/webapp/store/index.ts
@@ -16,3 +16,4 @@ export type AppDispatch = typeof store.dispatch;
 
 export * from './slices';
 export * from './useAppStore';
+export * from './useDrawerStore';
diff --git a/frontend/webapp/store/useDrawerStore.tsx b/frontend/webapp/store/useDrawerStore.tsx
new file mode 100644
index 000000000..54f80dadd
--- /dev/null
+++ b/frontend/webapp/store/useDrawerStore.tsx
@@ -0,0 +1,26 @@
+// drawerStore.ts
+import { create } from 'zustand';
+
+type ItemType = 'source' | 'action' | 'destination';
+
+interface BaseItem {
+  id: string;
+  type: ItemType;
+  // Add common properties here
+}
+
+interface DrawerStoreState {
+  selectedItem: BaseItem | null;
+  setSelectedItem: (item: BaseItem | null) => void;
+  isDrawerOpen: boolean;
+  openDrawer: () => void;
+  closeDrawer: () => void;
+}
+
+export const useDrawerStore = create<DrawerStoreState>((set) => ({
+  selectedItem: null,
+  setSelectedItem: (item) => set({ selectedItem: item }),
+  isDrawerOpen: false,
+  openDrawer: () => set({ isDrawerOpen: true }),
+  closeDrawer: () => set({ isDrawerOpen: false }),
+}));
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 00533f63c..57dbe3ff6 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -13,6 +13,7 @@ const colors = {
   selected_hover: '#444AD93D',
   card: '#F9F9F90A',
   dropdown_bg: '#242424',
+  blank_background: '#11111100',
   white_opacity: {
     '004': 'rgba(249, 249, 249, 0.04)',
     '008': 'rgba(249, 249, 249, 0.08)',

From a62798746318b73120ffeb2f0e041037e0c3cac8 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 6 Oct 2024 17:33:23 +0300
Subject: [PATCH 249/374] chore: add id to entities on overview

---
 .../main/overview/overview-data-flow/index.tsx         |  1 +
 frontend/webapp/graphql/queries/compute-platform.ts    |  2 ++
 .../reuseable-components/nodes-data-flow/builder.ts    | 10 +++++++---
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 9f3ae6433..7eca8da3d 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -44,6 +44,7 @@ export function OverviewDataFlowContainer() {
 
   // Memoized node and edge builder to improve performance
   const { nodes, edges } = useMemo(() => {
+    console.log({ sources, actions, destinations });
     return buildNodesAndEdges({
       sources,
       actions,
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 9f579becf..523d0621e 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -6,6 +6,7 @@ export const GET_COMPUTE_PLATFORM = gql`
       k8sActualSources {
         name
         kind
+        namespace
         numberOfInstances
         instrumentedApplicationDetails {
           containers {
@@ -20,6 +21,7 @@ export const GET_COMPUTE_PLATFORM = gql`
         }
       }
       destinations {
+        id
         name
         exportedSignals {
           logs
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 0a9e6d111..d8282e968 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -78,7 +78,11 @@ export const buildNodesAndEdges = ({
           subTitle: source.kind,
           imageUri: getMainContainerLanguageLogo(source),
           status: 'healthy',
-          onClick: () => setSelectedItem(source),
+          id: {
+            kind: source.kind,
+            name: source.name,
+            namespace: source.namespace,
+          },
         }
       )
     ),
@@ -104,7 +108,7 @@ export const buildNodesAndEdges = ({
           imageUri: destination.destinationType.imageUrl,
           status: 'healthy',
           monitors: extractMonitors(destination.exportedSignals),
-          onClick: () => setSelectedItem(destination),
+          id: destination.id,
         }
       )
     ),
@@ -135,7 +139,7 @@ export const buildNodesAndEdges = ({
           imageUri: `${ACTION_ICON_PATH}${action.type.toLowerCase()}.svg`,
           monitors: actionSpec.signals,
           status: 'healthy',
-          onClick: () => setSelectedItem(action),
+          id: action.id,
         }
       );
     }),

From fcc6e7f9ad9e8ca15ad6bbf154f70a6b23f3a131 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Oct 2024 10:36:48 +0300
Subject: [PATCH 250/374] wip: on node click

---
 .../overview/overview-data-flow/index.tsx     | 28 +++++++++++++++++--
 .../main/overview/overview-drawer/index.tsx   | 14 ++++++----
 .../reuseable-components/drawer/index.tsx     |  2 +-
 frontend/webapp/reuseable-components/index.ts |  1 +
 frontend/webapp/store/useDrawerStore.tsx      |  4 ++-
 frontend/webapp/types/sources.ts              |  7 +++++
 6 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 7eca8da3d..1ce924336 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -5,6 +5,7 @@ import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
 import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
+import { useDrawerStore } from '@/store';
 
 export const OverviewDataFlowWrapper = styled.div`
   width: calc(100% - 64px);
@@ -19,7 +20,9 @@ export function OverviewDataFlowContainer() {
   const { actions } = useGetActions();
   const { sources } = useActualSources();
   const { destinations } = useActualDestination();
-
+  const setSelectedItem = useDrawerStore(
+    ({ setSelectedItem }) => setSelectedItem
+  );
   // Get the width of the container dynamically
   useEffect(() => {
     if (containerRef.current) {
@@ -44,7 +47,6 @@ export function OverviewDataFlowContainer() {
 
   // Memoized node and edge builder to improve performance
   const { nodes, edges } = useMemo(() => {
-    console.log({ sources, actions, destinations });
     return buildNodesAndEdges({
       sources,
       actions,
@@ -55,7 +57,27 @@ export function OverviewDataFlowContainer() {
   }, [sources, actions, destinations, columnWidth, containerWidth]);
 
   function onNodeClick(_, object: any) {
-    console.log(object);
+    if (object.data.type === 'source') {
+      const selectedDrawerItem = sources.find(
+        (source) =>
+          source.kind === object.data.id.kind &&
+          source.name === object.data.id.name &&
+          source.namespace === object.data.id.namespace
+      );
+      if (!selectedDrawerItem) {
+        return;
+      }
+
+      setSelectedItem({
+        id: {
+          kind: selectedDrawerItem.kind,
+          name: selectedDrawerItem.name,
+          namespace: selectedDrawerItem.namespace,
+        },
+        item: selectedDrawerItem,
+        type: 'source',
+      });
+    }
   }
 
   return (
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 2551acce4..fc0fb3c04 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,4 +1,5 @@
 import { useDrawerStore } from '@/store';
+import { Drawer } from '@/reuseable-components';
 
 const componentMap = {
   source: () => <div>Source</div>,
@@ -7,17 +8,20 @@ const componentMap = {
 };
 
 const OverviewDrawer = () => {
-  const selectedItem = useDrawerStore((state) => state.selectedItem);
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const setDrawerItem = useDrawerStore(
+    ({ setSelectedItem }) => setSelectedItem
+  );
 
   if (!selectedItem) return null;
 
   const SpecificComponent = componentMap[selectedItem.type];
 
   return SpecificComponent ? (
-    <SpecificComponent />
-  ) : (
-    <div>Component not found</div>
-  );
+    <Drawer isOpen onClose={() => setDrawerItem(null)}>
+      <SpecificComponent />
+    </Drawer>
+  ) : null;
 };
 
 export { OverviewDrawer };
diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
index 177fe7cb4..99b0d4bfe 100644
--- a/frontend/webapp/reuseable-components/drawer/index.tsx
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -34,7 +34,7 @@ const DrawerContainer = styled.div<{
   bottom: 0;
   ${({ position, width }) => position}: 0;
   width: ${({ width }) => width};
-  background-color: ${({ theme }) => theme.colors.blank_background};
+  background-color: ${({ theme }) => theme.colors.translucent_bg};
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   transform: translateX(
     ${({ isOpen, position }) =>
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index b749f5fa0..110f5c759 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -23,3 +23,4 @@ export * from './connection-status';
 export * from './nodes-data-flow';
 export * from './tab-list';
 export * from './auto-complete-input';
+export * from './drawer';
diff --git a/frontend/webapp/store/useDrawerStore.tsx b/frontend/webapp/store/useDrawerStore.tsx
index 54f80dadd..b69349fe2 100644
--- a/frontend/webapp/store/useDrawerStore.tsx
+++ b/frontend/webapp/store/useDrawerStore.tsx
@@ -1,10 +1,12 @@
 // drawerStore.ts
 import { create } from 'zustand';
+import { Destination, K8sActualSource, WorkloadId } from '@/types';
 
 type ItemType = 'source' | 'action' | 'destination';
 
 interface BaseItem {
-  id: string;
+  id: string | WorkloadId;
+  item?: K8sActualSource | Destination;
   type: ItemType;
   // Add common properties here
 }
diff --git a/frontend/webapp/types/sources.ts b/frontend/webapp/types/sources.ts
index c8b009afe..57164bb59 100644
--- a/frontend/webapp/types/sources.ts
+++ b/frontend/webapp/types/sources.ts
@@ -81,6 +81,7 @@ export type SourceContainer = {
 export type K8sActualSource = {
   name: string;
   kind: string;
+  namespace: string;
   numberOfInstances: number;
   selected?: boolean;
   instrumentedApplicationDetails: {
@@ -100,3 +101,9 @@ export interface InstrumentationConfigLibrary {
   language: string;
   selected?: boolean;
 }
+
+export type WorkloadId = {
+  kind: string;
+  name: string;
+  namespace: string;
+};

From 7dddc5eb4f36209367ec41c667771cd3e7b1eeec Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Oct 2024 13:12:46 +0300
Subject: [PATCH 251/374] wip: clean up code

---
 .../overview/overview-data-flow/index.tsx     | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 1ce924336..56dd18293 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,11 +1,11 @@
 'use client';
 import styled from 'styled-components';
+import { useDrawerStore } from '@/store';
 import { OverviewDrawer } from '../overview-drawer';
 import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
 import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
-import { useDrawerStore } from '@/store';
 
 export const OverviewDataFlowWrapper = styled.div`
   width: calc(100% - 64px);
@@ -13,6 +13,8 @@ export const OverviewDataFlowWrapper = styled.div`
   position: relative;
 `;
 
+const TYPE_SOURCE = 'source';
+
 export function OverviewDataFlowContainer() {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [containerWidth, setContainerWidth] = useState<number>(0);
@@ -57,25 +59,20 @@ export function OverviewDataFlowContainer() {
   }, [sources, actions, destinations, columnWidth, containerWidth]);
 
   function onNodeClick(_, object: any) {
-    if (object.data.type === 'source') {
+    if (object.data.type === TYPE_SOURCE) {
+      const { id } = object.data;
       const selectedDrawerItem = sources.find(
-        (source) =>
-          source.kind === object.data.id.kind &&
-          source.name === object.data.id.name &&
-          source.namespace === object.data.id.namespace
+        ({ kind, name, namespace }) =>
+          kind === id.kind && name === id.name && namespace === id.namespace
       );
-      if (!selectedDrawerItem) {
-        return;
-      }
+      if (!selectedDrawerItem) return;
+
+      const { kind, name, namespace } = selectedDrawerItem;
 
       setSelectedItem({
-        id: {
-          kind: selectedDrawerItem.kind,
-          name: selectedDrawerItem.name,
-          namespace: selectedDrawerItem.namespace,
-        },
+        id: { kind, name, namespace },
         item: selectedDrawerItem,
-        type: 'source',
+        type: TYPE_SOURCE,
       });
     }
   }

From 99ea9323dffa696f3a2c38e2209f438c443b1e52 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Oct 2024 14:18:20 +0300
Subject: [PATCH 252/374] wip: drawer header and footer

---
 .../overview-drawer/drawer-footer/index.tsx   | 38 ++++++++++++
 .../overview-drawer/drawer-header/index.tsx   | 61 +++++++++++++++++++
 .../main/overview/overview-drawer/index.tsx   | 40 +++++++++++-
 .../webapp/containers/main/sources/index.ts   |  1 +
 .../actual-source-content/index.tsx           | 12 ++++
 .../sources/source-drawer-container/index.tsx | 18 ++++++
 6 files changed, 169 insertions(+), 1 deletion(-)
 create mode 100644 frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
 create mode 100644 frontend/webapp/containers/main/sources/source-drawer-container/actual-source-content/index.tsx
 create mode 100644 frontend/webapp/containers/main/sources/source-drawer-container/index.tsx

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
new file mode 100644
index 000000000..dbee918e6
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
@@ -0,0 +1,38 @@
+// DrawerFooter.tsx
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from '@/reuseable-components'; // Adjust the path if needed
+
+const FooterContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  border-top: 1px solid rgba(249, 249, 249, 0.24);
+`;
+
+interface DrawerFooterProps {
+  onSave: () => void;
+  onCancel: () => void;
+  onDelete: () => void;
+}
+
+const DrawerFooter: React.FC<DrawerFooterProps> = ({
+  onSave,
+  onCancel,
+  onDelete,
+}) => (
+  <FooterContainer>
+    <Button variant="primary" onClick={onSave}>
+      Save
+    </Button>
+    <Button variant="secondary" onClick={onCancel}>
+      Cancel
+    </Button>
+    <Button variant="tertiary" onClick={onDelete}>
+      Delete
+    </Button>
+  </FooterContainer>
+);
+
+export default DrawerFooter;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
new file mode 100644
index 000000000..3a7107021
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
@@ -0,0 +1,61 @@
+// DrawerHeader.tsx
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Input, Text } from '@/reuseable-components'; // Adjust the path if needed
+
+const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  border-bottom: 1px solid rgba(249, 249, 249, 0.24);
+`;
+
+const Title = styled(Text)`
+  font-size: 18px;
+  font-weight: 600;
+`;
+
+const EditIcon = styled.div`
+  cursor: pointer;
+  /* Add styling for the edit icon if necessary */
+`;
+
+interface DrawerHeaderProps {
+  title: string;
+  onSave: (newTitle: string) => void;
+}
+
+const DrawerHeader: React.FC<DrawerHeaderProps> = ({ title, onSave }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [inputValue, setInputValue] = useState(title);
+
+  const handleSave = () => {
+    onSave(inputValue);
+    setIsEditing(false);
+  };
+
+  return (
+    <HeaderContainer>
+      {isEditing ? (
+        <Input
+          initialValue={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onBlur={handleSave}
+          autoFocus
+        />
+      ) : (
+        <>
+          <Title>{title}</Title>
+          <EditIcon onClick={() => setIsEditing(true)}>
+            {/* Replace with an actual icon if needed */}
+            ✏️
+          </EditIcon>
+        </>
+      )}
+    </HeaderContainer>
+  );
+};
+
+export default DrawerHeader;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index fc0fb3c04..5a0cc72a3 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,8 +1,12 @@
 import { useDrawerStore } from '@/store';
 import { Drawer } from '@/reuseable-components';
+import { SourceDrawer } from '@/containers';
+import DrawerHeader from './drawer-header';
+import DrawerFooter from './drawer-footer';
+import { useEffect, useState } from 'react';
 
 const componentMap = {
-  source: () => <div>Source</div>,
+  source: SourceDrawer,
   action: () => <div>Action</div>,
   destination: () => <div>Destination</div>,
 };
@@ -12,6 +16,32 @@ const OverviewDrawer = () => {
   const setDrawerItem = useDrawerStore(
     ({ setSelectedItem }) => setSelectedItem
   );
+  const [isEditing, setIsEditing] = useState(false);
+  const [title, setTitle] = useState(selectedItem?.item?.name || '');
+
+  useEffect(() => {
+    console.log({ selectedItem });
+  }, [selectedItem]);
+
+  const handleSaveTitle = (newTitle: string) => {
+    setTitle(newTitle);
+    // Add any save logic if needed
+  };
+
+  const handleSave = () => {
+    // Add save logic here
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setTitle(selectedItem?.item?.name || ''); // Revert to original title on cancel
+  };
+
+  const handleDelete = () => {
+    // Add delete logic here
+    setDrawerItem(null); // Close the drawer on delete
+  };
 
   if (!selectedItem) return null;
 
@@ -19,7 +49,15 @@ const OverviewDrawer = () => {
 
   return SpecificComponent ? (
     <Drawer isOpen onClose={() => setDrawerItem(null)}>
+      <DrawerHeader title={title} onSave={handleSaveTitle} />
       <SpecificComponent />
+      <DrawerFooter
+        onSave={handleSave}
+        onCancel={handleCancel}
+        onDelete={handleDelete}
+      />
+      {/* {isEditing && (
+      )} */}
     </Drawer>
   ) : null;
 };
diff --git a/frontend/webapp/containers/main/sources/index.ts b/frontend/webapp/containers/main/sources/index.ts
index 66bd8d844..9194ff6c7 100644
--- a/frontend/webapp/containers/main/sources/index.ts
+++ b/frontend/webapp/containers/main/sources/index.ts
@@ -3,3 +3,4 @@ export * from './choose.sources';
 export * from './choose-sources';
 export * from './edit.source';
 export * from './choose-sources/choose-sources-body';
+export * from './source-drawer-container';
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/actual-source-content/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/actual-source-content/index.tsx
new file mode 100644
index 000000000..4e3af19d8
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/actual-source-content/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ActualSourceContent: React.FC = () => {
+  return (
+    <div>
+      <h2>Source Details</h2>
+      <p>Here are the details for the selected source...</p>
+    </div>
+  );
+};
+
+export default ActualSourceContent;
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
new file mode 100644
index 000000000..acb63b404
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import ActualSourceContent from './actual-source-content';
+
+const SourceDrawer: React.FC = () => {
+  return (
+    <SourceDrawerContainer>
+      <ActualSourceContent />
+    </SourceDrawerContainer>
+  );
+};
+
+export { SourceDrawer };
+
+const SourceDrawerContainer = styled.div`
+  padding: 16px;
+  overflow-y: auto;
+`;

From 2c8e22f753fa1855285ecf9c282c16258435b24e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Oct 2024 15:26:03 +0300
Subject: [PATCH 253/374] chore: drawer footer

---
 .../overview-drawer/drawer-footer/index.tsx   | 72 ++++++++++++++-----
 .../overview-drawer/drawer-header/index.tsx   | 11 ++-
 .../main/overview/overview-drawer/index.tsx   | 29 ++++----
 .../reuseable-components/button/index.tsx     |  4 +-
 frontend/webapp/styles/theme.ts               |  2 +-
 5 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
index dbee918e6..1b2c0a916 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
@@ -1,15 +1,8 @@
 // DrawerFooter.tsx
 import React from 'react';
 import styled from 'styled-components';
-import { Button } from '@/reuseable-components'; // Adjust the path if needed
-
-const FooterContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 16px;
-  background-color: ${({ theme }) => theme.colors.translucent_bg};
-  border-top: 1px solid rgba(249, 249, 249, 0.24);
-`;
+import { Button, Text } from '@/reuseable-components'; // Adjust the path if needed
+import Image from 'next/image';
 
 interface DrawerFooterProps {
   onSave: () => void;
@@ -23,16 +16,59 @@ const DrawerFooter: React.FC<DrawerFooterProps> = ({
   onDelete,
 }) => (
   <FooterContainer>
-    <Button variant="primary" onClick={onSave}>
-      Save
-    </Button>
-    <Button variant="secondary" onClick={onCancel}>
-      Cancel
-    </Button>
-    <Button variant="tertiary" onClick={onDelete}>
-      Delete
-    </Button>
+    <LeftButtonsWrapper>
+      <FooterButton disabled variant="primary" onClick={onSave}>
+        <ButtonText variant="primary">Save</ButtonText>
+      </FooterButton>
+      <FooterButton variant="secondary" onClick={onCancel}>
+        <ButtonText>Cancel</ButtonText>
+      </FooterButton>
+    </LeftButtonsWrapper>
+    <FooterButton variant="tertiary" onClick={onDelete}>
+      <Image
+        src="/icons/common/trash.svg"
+        alt="Delete"
+        width={16}
+        height={16}
+      />
+      <ButtonText variant="tertiary">Delete</ButtonText>
+    </FooterButton>
   </FooterContainer>
 );
 
 export default DrawerFooter;
+
+const FooterContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  border-top: 1px solid rgba(249, 249, 249, 0.24);
+`;
+
+const LeftButtonsWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const FooterButton = styled(Button)`
+  width: 140px;
+  gap: 8px;
+`;
+
+const ButtonText = styled(Text)<{
+  variant?: 'primary' | 'secondary' | 'tertiary';
+}>`
+  color: ${({ theme, variant }) =>
+    variant === 'primary'
+      ? theme.text.primary
+      : variant === 'tertiary'
+      ? theme.text.error
+      : theme.text.secondary};
+  font-size: 14px;
+  font-weight: 600;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+  text-transform: uppercase;
+  width: fit-content;
+`;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
index 3a7107021..a2c2a2ca0 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
@@ -25,10 +25,16 @@ const EditIcon = styled.div`
 interface DrawerHeaderProps {
   title: string;
   onSave: (newTitle: string) => void;
+  isEditing: boolean;
+  setIsEditing: (isEditing: boolean) => void;
 }
 
-const DrawerHeader: React.FC<DrawerHeaderProps> = ({ title, onSave }) => {
-  const [isEditing, setIsEditing] = useState(false);
+const DrawerHeader: React.FC<DrawerHeaderProps> = ({
+  title,
+  onSave,
+  isEditing,
+  setIsEditing,
+}) => {
   const [inputValue, setInputValue] = useState(title);
 
   const handleSave = () => {
@@ -42,7 +48,6 @@ const DrawerHeader: React.FC<DrawerHeaderProps> = ({ title, onSave }) => {
         <Input
           initialValue={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
-          onBlur={handleSave}
           autoFocus
         />
       ) : (
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 5a0cc72a3..f6cb17e3b 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,9 +1,9 @@
+import { useEffect, useState } from 'react';
 import { useDrawerStore } from '@/store';
-import { Drawer } from '@/reuseable-components';
-import { SourceDrawer } from '@/containers';
 import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
-import { useEffect, useState } from 'react';
+import { Drawer } from '@/reuseable-components';
+import { SourceDrawer } from '../../sources';
 
 const componentMap = {
   source: SourceDrawer,
@@ -21,6 +21,7 @@ const OverviewDrawer = () => {
 
   useEffect(() => {
     console.log({ selectedItem });
+    setTitle(selectedItem?.item?.name || '');
   }, [selectedItem]);
 
   const handleSaveTitle = (newTitle: string) => {
@@ -48,16 +49,20 @@ const OverviewDrawer = () => {
   const SpecificComponent = componentMap[selectedItem.type];
 
   return SpecificComponent ? (
-    <Drawer isOpen onClose={() => setDrawerItem(null)}>
-      <DrawerHeader title={title} onSave={handleSaveTitle} />
-      <SpecificComponent />
-      <DrawerFooter
-        onSave={handleSave}
-        onCancel={handleCancel}
-        onDelete={handleDelete}
+    <Drawer isOpen onClose={() => setDrawerItem(null)} width="560px">
+      <DrawerHeader
+        title={title}
+        onSave={handleSaveTitle}
+        {...{ isEditing, setIsEditing }}
       />
-      {/* {isEditing && (
-      )} */}
+      <SpecificComponent />
+      {isEditing && (
+        <DrawerFooter
+          onSave={handleSave}
+          onCancel={handleCancel}
+          onDelete={handleDelete}
+        />
+      )}
     </Drawer>
   ) : null;
 };
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 76bdd68be..e644c01a2 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -55,7 +55,9 @@ const StyledButton = styled.button<ButtonProps>`
   height: 36px;
   border-radius: 32px;
   cursor: pointer;
-
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 0 12px;
   ${({ variant }) => variant && variantStyles[variant]}
   ${({ isDisabled }) =>
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 57dbe3ff6..db0000ec3 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -109,7 +109,7 @@ const colors = {
 
 const text = {
   primary: '#111',
-  secondary: '#0EE6F3',
+  secondary: '#F9F9F9',
   grey: '#B8B8B8',
   white: '#fff',
   light_grey: '#CCD0D2',

From e012609444df780b198ec23e18db70441e58af29 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 7 Oct 2024 17:37:44 +0300
Subject: [PATCH 254/374] wip: card details component

---
 .../components/common/card-details/index.tsx  |  41 +++++++
 frontend/webapp/components/common/index.ts    |   1 +
 .../configured-destination-fields/index.tsx   |   2 +-
 .../webapp/components/main/header/index.tsx   |   4 +-
 .../overview-drawer/drawer-header/index.tsx   | 111 ++++++++++++++----
 .../main/overview/overview-drawer/index.tsx   |  18 ++-
 .../actual-source-content/index.tsx           |  12 --
 .../sources/source-drawer-container/index.tsx |  37 +++++-
 frontend/webapp/public/icons/common/edit.svg  |   3 +
 9 files changed, 181 insertions(+), 48 deletions(-)
 create mode 100644 frontend/webapp/components/common/card-details/index.tsx
 delete mode 100644 frontend/webapp/containers/main/sources/source-drawer-container/actual-source-content/index.tsx
 create mode 100644 frontend/webapp/public/icons/common/edit.svg

diff --git a/frontend/webapp/components/common/card-details/index.tsx b/frontend/webapp/components/common/card-details/index.tsx
new file mode 100644
index 000000000..f653f8b1a
--- /dev/null
+++ b/frontend/webapp/components/common/card-details/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ConfiguredDestinationFields } from '@/components';
+import { Text } from '@/reuseable-components';
+interface CardDetailsProps {
+  data: {
+    title: string;
+    value: string;
+  }[];
+  title?: string;
+}
+
+const CardDetails: React.FC<CardDetailsProps> = ({
+  data,
+  title = 'Details',
+}) => {
+  return (
+    <Container>
+      <TitleWrapper>
+        <Text>{title}</Text>
+      </TitleWrapper>
+      <ConfiguredDestinationFields details={data} />
+    </Container>
+  );
+};
+
+export { CardDetails };
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px 24px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 24px;
+  border: 1px solid ${({ theme }) => theme.colors.border};
+`;
+
+const TitleWrapper = styled.div``;
diff --git a/frontend/webapp/components/common/index.ts b/frontend/webapp/components/common/index.ts
index d60373d11..d4cc38292 100644
--- a/frontend/webapp/components/common/index.ts
+++ b/frontend/webapp/components/common/index.ts
@@ -1,2 +1,3 @@
 export * from './multi.checkbox';
 export * from './conditions.check';
+export * from './card-details';
diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
index a813a0427..740afd776 100644
--- a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
+++ b/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
@@ -10,7 +10,7 @@ type ConfiguredDestinationFieldsProps = {
 const ListContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 40px;
+  gap: 24px 40px;
 `;
 
 const ListItem = styled.div``;
diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
index f0b5ad986..aa33bb0c2 100644
--- a/frontend/webapp/components/main/header/index.tsx
+++ b/frontend/webapp/components/main/header/index.tsx
@@ -8,7 +8,7 @@ interface MainHeaderProps {}
 
 const HeaderContainer = styled.div`
   display: flex;
-  padding: 10px 0;
+  padding: 12px 0;
   align-items: center;
   background-color: ${({ theme }) => theme.colors.dark_grey};
   border-bottom: 1px solid rgba(249, 249, 249, 0.16);
@@ -39,7 +39,7 @@ export const MainHeader: React.FC<MainHeaderProps> = () => {
       <PlatformTitleWrapper>
         <PlatformTitle type="k8s" />
       </PlatformTitleWrapper>
-      <ConnectionStatus title="Connection Status" status="alive" />
+      <ConnectionStatus title="Connection Alive" status="alive" />
     </HeaderContainer>
   );
 };
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
index a2c2a2ca0..0c0805f4f 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
@@ -1,42 +1,86 @@
 // DrawerHeader.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Input, Text } from '@/reuseable-components'; // Adjust the path if needed
+import { Button, Input, Text } from '@/reuseable-components'; // Adjust the path if needed
+import Image from 'next/image';
 
-const HeaderContainer = styled.div`
+const HeaderContainer = styled.section`
   display: flex;
-  align-items: center;
+  height: 76px;
+  padding: 0px 32px;
   justify-content: space-between;
-  padding: 16px;
-  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  flex-shrink: 0;
+  align-self: stretch;
   border-bottom: 1px solid rgba(249, 249, 249, 0.24);
 `;
 
+const SectionItemsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const InputWrapper = styled(SectionItemsWrapper)`
+  width: 75%;
+`;
+
 const Title = styled(Text)`
   font-size: 18px;
   font-weight: 600;
 `;
 
-const EditIcon = styled.div`
-  cursor: pointer;
-  /* Add styling for the edit icon if necessary */
+const DrawerItemImageWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const EditButton = styled(Button)`
+  gap: 8px;
+`;
+
+const CloseButton = styled(Button)``;
+
+const ButtonText = styled(Text)`
+  font-size: 14px;
+  font-weight: 600;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+
+  text-decoration-line: underline;
+  text-transform: uppercase;
+  width: fit-content;
 `;
 
 interface DrawerHeaderProps {
   title: string;
-  onSave: (newTitle: string) => void;
+  imageUri: string;
   isEditing: boolean;
+  onSave: (newTitle: string) => void;
   setIsEditing: (isEditing: boolean) => void;
 }
 
 const DrawerHeader: React.FC<DrawerHeaderProps> = ({
   title,
-  onSave,
+  imageUri,
   isEditing,
+  onSave,
   setIsEditing,
 }) => {
   const [inputValue, setInputValue] = useState(title);
 
+  useEffect(() => {
+    setInputValue(title);
+  }, [title]);
+
   const handleSave = () => {
     onSave(inputValue);
     setIsEditing(false);
@@ -44,21 +88,38 @@ const DrawerHeader: React.FC<DrawerHeaderProps> = ({
 
   return (
     <HeaderContainer>
-      {isEditing ? (
-        <Input
-          initialValue={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          autoFocus
-        />
-      ) : (
-        <>
-          <Title>{title}</Title>
-          <EditIcon onClick={() => setIsEditing(true)}>
-            {/* Replace with an actual icon if needed */}
-            ✏️
-          </EditIcon>
-        </>
+      <SectionItemsWrapper>
+        <DrawerItemImageWrapper>
+          <Image src={imageUri} alt="Drawer Item" width={16} height={16} />
+        </DrawerItemImageWrapper>
+        {!isEditing && <Title>{title}</Title>}
+      </SectionItemsWrapper>
+      {isEditing && (
+        <InputWrapper>
+          <Input
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            autoFocus
+          />
+        </InputWrapper>
       )}
+
+      <SectionItemsWrapper>
+        {!isEditing && (
+          <EditButton variant="tertiary" onClick={() => setIsEditing(true)}>
+            <Image
+              src="/icons/common/edit.svg"
+              alt="Edit"
+              width={16}
+              height={16}
+            />
+            <ButtonText>Edit</ButtonText>
+          </EditButton>
+        )}
+        <CloseButton variant="secondary" onClick={handleSave}>
+          <Image src="/icons/common/x.svg" alt="Edit" width={11} height={10} />
+        </CloseButton>
+      </SectionItemsWrapper>
     </HeaderContainer>
   );
 };
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index f6cb17e3b..358f3042d 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useDrawerStore } from '@/store';
+import { K8sActualSource } from '@/types';
 import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
-import { Drawer } from '@/reuseable-components';
 import { SourceDrawer } from '../../sources';
+import { Drawer } from '@/reuseable-components';
+import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+import styled from 'styled-components';
 
 const componentMap = {
   source: SourceDrawer,
@@ -52,10 +55,17 @@ const OverviewDrawer = () => {
     <Drawer isOpen onClose={() => setDrawerItem(null)} width="560px">
       <DrawerHeader
         title={title}
+        imageUri={
+          selectedItem?.item
+            ? getMainContainerLanguageLogo(selectedItem.item as K8sActualSource) //TODO: get image based on type
+            : ''
+        }
         onSave={handleSaveTitle}
         {...{ isEditing, setIsEditing }}
       />
-      <SpecificComponent />
+      <SpecificComponentWrapper>
+        <SpecificComponent />
+      </SpecificComponentWrapper>
       {isEditing && (
         <DrawerFooter
           onSave={handleSave}
@@ -68,3 +78,7 @@ const OverviewDrawer = () => {
 };
 
 export { OverviewDrawer };
+
+const SpecificComponentWrapper = styled.div`
+  padding: 20px 32px;
+`;
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/actual-source-content/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/actual-source-content/index.tsx
deleted file mode 100644
index 4e3af19d8..000000000
--- a/frontend/webapp/containers/main/sources/source-drawer-container/actual-source-content/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-const ActualSourceContent: React.FC = () => {
-  return (
-    <div>
-      <h2>Source Details</h2>
-      <p>Here are the details for the selected source...</p>
-    </div>
-  );
-};
-
-export default ActualSourceContent;
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
index acb63b404..fbe84b687 100644
--- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
@@ -1,18 +1,43 @@
 import React from 'react';
 import styled from 'styled-components';
-import ActualSourceContent from './actual-source-content';
+import { CardDetails, ConfiguredDestinationFields } from '@/components';
+import { Text } from '@/reuseable-components';
 
 const SourceDrawer: React.FC = () => {
   return (
-    <SourceDrawerContainer>
-      <ActualSourceContent />
-    </SourceDrawerContainer>
+    <>
+      <CardDetails
+        data={[
+          {
+            title: 'key1',
+            value: 'value1',
+          },
+          {
+            title: 'key2',
+            value: 'value2',
+          },
+          {
+            title: 'key3',
+            value: 'value3',
+          },
+        ]}
+      />
+    </>
   );
 };
 
 export { SourceDrawer };
 
 const SourceDrawerContainer = styled.div`
-  padding: 16px;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px 24px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 24px;
+  border: 1px solid ${({ theme }) => theme.colors.border};
 `;
+
+const TitleWrapper = styled.div``;
diff --git a/frontend/webapp/public/icons/common/edit.svg b/frontend/webapp/public/icons/common/edit.svg
new file mode 100644
index 000000000..49c264e88
--- /dev/null
+++ b/frontend/webapp/public/icons/common/edit.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8 14C10.6787 11.8171 10.7261 16.2383 14 12.6667M2 13.997L3.81777 13.9999C4.07739 14.0003 4.2072 14.0005 4.32937 13.9712C4.43769 13.9452 4.54125 13.9022 4.63623 13.8438C4.74337 13.778 4.83516 13.6858 5.01874 13.5014L13.6676 4.81451C14.021 4.4596 14.1088 3.91087 13.8396 3.47722C13.5142 2.95298 13.0691 2.50221 12.5511 2.16754C12.136 1.8993 11.5908 1.95805 11.2417 2.30864L2.53993 11.0487C2.36296 11.2264 2.27447 11.3153 2.21029 11.4188C2.15338 11.5105 2.11072 11.6104 2.08378 11.7151C2.05341 11.8331 2.05031 11.9588 2.04411 12.2101L2 13.997Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file

From 49a12ff3fd4ef4284a8a3ea9577b16aa04b337e9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 8 Oct 2024 10:47:20 +0300
Subject: [PATCH 255/374] wip: smooth transmition between components

---
 .../overview-drawer/drawer-footer/index.tsx   |  73 +++++---
 .../overview-drawer/drawer-header/index.tsx   | 116 ++++++-------
 .../main/overview/overview-drawer/index.tsx   |  79 +++++----
 .../sources/source-drawer-container/index.tsx |  68 ++++----
 .../reuseable-components/input/index.tsx      | 162 +++++++++---------
 5 files changed, 264 insertions(+), 234 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
index 1b2c0a916..39e3edbeb 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
@@ -1,8 +1,8 @@
 // DrawerFooter.tsx
-import React from 'react';
-import styled from 'styled-components';
-import { Button, Text } from '@/reuseable-components'; // Adjust the path if needed
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
+import styled, { css } from 'styled-components';
+import { Button, Text } from '@/reuseable-components';
 
 interface DrawerFooterProps {
   onSave: () => void;
@@ -14,36 +14,59 @@ const DrawerFooter: React.FC<DrawerFooterProps> = ({
   onSave,
   onCancel,
   onDelete,
-}) => (
-  <FooterContainer>
-    <LeftButtonsWrapper>
-      <FooterButton disabled variant="primary" onClick={onSave}>
-        <ButtonText variant="primary">Save</ButtonText>
-      </FooterButton>
-      <FooterButton variant="secondary" onClick={onCancel}>
-        <ButtonText>Cancel</ButtonText>
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Trigger animation on mount
+    setIsVisible(true);
+  }, []);
+
+  return (
+    <FooterContainer isVisible={isVisible}>
+      <LeftButtonsWrapper>
+        <FooterButton variant="primary" onClick={onSave}>
+          <ButtonText variant="primary">Save</ButtonText>
+        </FooterButton>
+        <FooterButton variant="secondary" onClick={onCancel}>
+          <ButtonText>Cancel</ButtonText>
+        </FooterButton>
+      </LeftButtonsWrapper>
+      <FooterButton
+        style={{ width: 100 }}
+        variant="tertiary"
+        onClick={onDelete}
+      >
+        <Image
+          src="/icons/common/trash.svg"
+          alt="Delete"
+          width={16}
+          height={16}
+        />
+        <ButtonText variant="tertiary">Delete</ButtonText>
       </FooterButton>
-    </LeftButtonsWrapper>
-    <FooterButton variant="tertiary" onClick={onDelete}>
-      <Image
-        src="/icons/common/trash.svg"
-        alt="Delete"
-        width={16}
-        height={16}
-      />
-      <ButtonText variant="tertiary">Delete</ButtonText>
-    </FooterButton>
-  </FooterContainer>
-);
+    </FooterContainer>
+  );
+};
 
 export default DrawerFooter;
 
-const FooterContainer = styled.div`
+const FooterContainer = styled.div<{ isVisible: boolean }>`
   display: flex;
   justify-content: space-between;
-  padding: 16px;
+  padding: 24px 18px 24px 32px;
   background-color: ${({ theme }) => theme.colors.translucent_bg};
   border-top: 1px solid rgba(249, 249, 249, 0.24);
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+
+  ${({ isVisible }) =>
+    isVisible &&
+    css`
+      opacity: 1;
+      transform: translateY(0);
+    `}
 `;
 
 const LeftButtonsWrapper = styled.div`
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
index 0c0805f4f..444a81bd3 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
@@ -1,8 +1,8 @@
 // DrawerHeader.tsx
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Button, Input, Text } from '@/reuseable-components'; // Adjust the path if needed
+import React, { useEffect, useState, forwardRef } from 'react';
 import Image from 'next/image';
+import styled from 'styled-components';
+import { Button, Input, Text } from '@/reuseable-components';
 
 const HeaderContainer = styled.section`
   display: flex;
@@ -14,10 +14,10 @@ const HeaderContainer = styled.section`
   border-bottom: 1px solid rgba(249, 249, 249, 0.24);
 `;
 
-const SectionItemsWrapper = styled.div`
+const SectionItemsWrapper = styled.div<{ gap?: number }>`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: ${({ gap }) => gap || 16}px;
 `;
 
 const InputWrapper = styled(SectionItemsWrapper)`
@@ -26,7 +26,7 @@ const InputWrapper = styled(SectionItemsWrapper)`
 
 const Title = styled(Text)`
   font-size: 18px;
-  font-weight: 600;
+  line-height: 26px;
 `;
 
 const DrawerItemImageWrapper = styled.div`
@@ -54,7 +54,6 @@ const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 600;
   font-family: ${({ theme }) => theme.font_family.secondary};
-
   text-decoration-line: underline;
   text-transform: uppercase;
   width: fit-content;
@@ -64,64 +63,59 @@ interface DrawerHeaderProps {
   title: string;
   imageUri: string;
   isEditing: boolean;
-  onSave: (newTitle: string) => void;
   setIsEditing: (isEditing: boolean) => void;
 }
 
-const DrawerHeader: React.FC<DrawerHeaderProps> = ({
-  title,
-  imageUri,
-  isEditing,
-  onSave,
-  setIsEditing,
-}) => {
-  const [inputValue, setInputValue] = useState(title);
-
-  useEffect(() => {
-    setInputValue(title);
-  }, [title]);
-
-  const handleSave = () => {
-    onSave(inputValue);
-    setIsEditing(false);
-  };
-
-  return (
-    <HeaderContainer>
-      <SectionItemsWrapper>
-        <DrawerItemImageWrapper>
-          <Image src={imageUri} alt="Drawer Item" width={16} height={16} />
-        </DrawerItemImageWrapper>
-        {!isEditing && <Title>{title}</Title>}
-      </SectionItemsWrapper>
-      {isEditing && (
-        <InputWrapper>
-          <Input
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            autoFocus
-          />
-        </InputWrapper>
-      )}
-
-      <SectionItemsWrapper>
-        {!isEditing && (
-          <EditButton variant="tertiary" onClick={() => setIsEditing(true)}>
-            <Image
-              src="/icons/common/edit.svg"
-              alt="Edit"
-              width={16}
-              height={16}
+const DrawerHeader = forwardRef<HTMLInputElement, DrawerHeaderProps>(
+  ({ title, imageUri, isEditing, setIsEditing }, ref) => {
+    const [inputValue, setInputValue] = useState(title);
+
+    useEffect(() => {
+      setInputValue(title);
+    }, [title]);
+
+    return (
+      <HeaderContainer>
+        <SectionItemsWrapper>
+          <DrawerItemImageWrapper>
+            <Image src={imageUri} alt="Drawer Item" width={16} height={16} />
+          </DrawerItemImageWrapper>
+          {!isEditing && <Title>{title}</Title>}
+        </SectionItemsWrapper>
+        {isEditing && (
+          <InputWrapper>
+            <Input
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              autoFocus
+              ref={ref}
             />
-            <ButtonText>Edit</ButtonText>
-          </EditButton>
+          </InputWrapper>
         )}
-        <CloseButton variant="secondary" onClick={handleSave}>
-          <Image src="/icons/common/x.svg" alt="Edit" width={11} height={10} />
-        </CloseButton>
-      </SectionItemsWrapper>
-    </HeaderContainer>
-  );
-};
+        <SectionItemsWrapper gap={8}>
+          {!isEditing && (
+            <EditButton variant="tertiary" onClick={() => setIsEditing(true)}>
+              <Image
+                src="/icons/common/edit.svg"
+                alt="Edit"
+                width={16}
+                height={16}
+              />
+              <ButtonText>Edit</ButtonText>
+            </EditButton>
+          )}
+          <CloseButton variant="secondary" onClick={() => setIsEditing(false)}>
+            <Image
+              src="/icons/common/x.svg"
+              alt="Close"
+              width={11}
+              height={10}
+            />
+          </CloseButton>
+        </SectionItemsWrapper>
+      </HeaderContainer>
+    );
+  }
+);
 
 export default DrawerHeader;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 358f3042d..2af53c646 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
 import { K8sActualSource } from '@/types';
 import DrawerHeader from './drawer-header';
@@ -6,7 +7,6 @@ import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import styled from 'styled-components';
 
 const componentMap = {
   source: SourceDrawer,
@@ -14,6 +14,8 @@ const componentMap = {
   destination: () => <div>Destination</div>,
 };
 
+const DRAWER_WIDTH = '560px';
+
 const OverviewDrawer = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const setDrawerItem = useDrawerStore(
@@ -22,17 +24,17 @@ const OverviewDrawer = () => {
   const [isEditing, setIsEditing] = useState(false);
   const [title, setTitle] = useState(selectedItem?.item?.name || '');
 
+  const titleRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
-    console.log({ selectedItem });
     setTitle(selectedItem?.item?.name || '');
   }, [selectedItem]);
 
-  const handleSaveTitle = (newTitle: string) => {
-    setTitle(newTitle);
-    // Add any save logic if needed
-  };
-
   const handleSave = () => {
+    if (titleRef.current) {
+      const newTitle = titleRef.current.value;
+      setTitle(newTitle);
+    }
     // Add save logic here
     setIsEditing(false);
   };
@@ -47,38 +49,55 @@ const OverviewDrawer = () => {
     setDrawerItem(null); // Close the drawer on delete
   };
 
+  const handleClose = () => {
+    setIsEditing(false);
+    setDrawerItem(null);
+  };
+
   if (!selectedItem) return null;
 
   const SpecificComponent = componentMap[selectedItem.type];
 
   return SpecificComponent ? (
-    <Drawer isOpen onClose={() => setDrawerItem(null)} width="560px">
-      <DrawerHeader
-        title={title}
-        imageUri={
-          selectedItem?.item
-            ? getMainContainerLanguageLogo(selectedItem.item as K8sActualSource) //TODO: get image based on type
-            : ''
-        }
-        onSave={handleSaveTitle}
-        {...{ isEditing, setIsEditing }}
-      />
-      <SpecificComponentWrapper>
-        <SpecificComponent />
-      </SpecificComponentWrapper>
-      {isEditing && (
-        <DrawerFooter
-          onSave={handleSave}
-          onCancel={handleCancel}
-          onDelete={handleDelete}
+    <Drawer isOpen onClose={handleClose} width={DRAWER_WIDTH}>
+      <DrawerContent>
+        <DrawerHeader
+          ref={titleRef}
+          title={title}
+          imageUri={
+            selectedItem?.item
+              ? getMainContainerLanguageLogo(
+                  selectedItem.item as K8sActualSource
+                )
+              : ''
+          }
+          {...{ isEditing, setIsEditing }}
         />
-      )}
+        <ContentArea>
+          <SpecificComponent />
+        </ContentArea>
+        {isEditing && (
+          <DrawerFooter
+            onSave={handleSave}
+            onCancel={handleCancel}
+            onDelete={handleDelete}
+          />
+        )}
+      </DrawerContent>
     </Drawer>
   ) : null;
 };
 
 export { OverviewDrawer };
 
-const SpecificComponentWrapper = styled.div`
-  padding: 20px 32px;
+const DrawerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const ContentArea = styled.div`
+  flex-grow: 1;
+  padding: 24px 32px;
+  overflow-y: auto;
 `;
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
index fbe84b687..12d77bb46 100644
--- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
@@ -1,43 +1,35 @@
-import React from 'react';
-import styled from 'styled-components';
-import { CardDetails, ConfiguredDestinationFields } from '@/components';
-import { Text } from '@/reuseable-components';
+import React, { useEffect, useMemo } from 'react';
+import { CardDetails } from '@/components';
+import { useDrawerStore } from '@/store';
+import { K8sActualSource } from '@/types';
 
 const SourceDrawer: React.FC = () => {
-  return (
-    <>
-      <CardDetails
-        data={[
-          {
-            title: 'key1',
-            value: 'value1',
-          },
-          {
-            title: 'key2',
-            value: 'value2',
-          },
-          {
-            title: 'key3',
-            value: 'value3',
-          },
-        ]}
-      />
-    </>
-  );
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+
+  useEffect(() => {
+    console.log({ selectedItem });
+  }, [selectedItem]);
+
+  const cardData = useMemo(() => {
+    if (!selectedItem) return [];
+
+    // Destructure necessary fields from the selected item
+    const { name, kind, namespace, instrumentedApplicationDetails } =
+      selectedItem.item as K8sActualSource;
+
+    // Extract the first container and condition if available
+    const container = instrumentedApplicationDetails?.containers?.[0];
+
+    return [
+      { title: 'Name', value: name || 'N/A' },
+      { title: 'Kind', value: kind || 'N/A' },
+      { title: 'Namespace', value: namespace || 'N/A' },
+      { title: 'Container Name', value: container?.containerName || 'N/A' },
+      { title: 'Language', value: container?.language || 'N/A' },
+    ];
+  }, [selectedItem]);
+
+  return <CardDetails data={cardData} />;
 };
 
 export { SourceDrawer };
-
-const SourceDrawerContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 16px 24px 24px 24px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  align-self: stretch;
-  border-radius: 24px;
-  border: 1px solid ${({ theme }) => theme.colors.border};
-`;
-
-const TitleWrapper = styled.div``;
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 082c88623..4e64e8151 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import { Text } from '../text';
 import styled, { css } from 'styled-components';
 import { Tooltip } from '../tooltip';
@@ -15,6 +15,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   initialValue?: string;
 }
 
+// Styled components remain the same as before
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -32,7 +33,6 @@ const InputWrapper = styled.div<{
   align-items: center;
   height: 36px;
   gap: 12px;
-
   transition: border-color 0.3s;
   border-radius: 32px;
   border: 1px solid rgba(249, 249, 249, 0.24);
@@ -43,19 +43,16 @@ const InputWrapper = styled.div<{
       cursor: not-allowed;
       opacity: 0.6;
     `}
-
   ${({ hasError }) =>
     hasError &&
     css`
       border-color: red;
     `}
-
   ${({ isActive }) =>
     isActive &&
     css`
       border-color: ${({ theme }) => theme.colors.secondary};
     `}
-
   &:hover {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
@@ -82,7 +79,6 @@ const StyledInput = styled.input<{ hasIcon?: string }>`
     font-weight: 300;
     line-height: 22px; /* 157.143% */
   }
-
   &:disabled {
     background-color: #555;
     cursor: not-allowed;
@@ -103,11 +99,9 @@ const Button = styled.button`
   border-radius: 20px;
   cursor: pointer;
   margin-left: 8px;
-
   &:hover {
     background-color: ${({ theme }) => theme.colors.secondary};
   }
-
   &:disabled {
     background-color: #555;
     cursor: not-allowed;
@@ -141,80 +135,88 @@ const HeaderWrapper = styled.div`
   margin-bottom: 4px;
 `;
 
-const Input: React.FC<InputProps> = ({
-  icon,
-  buttonLabel,
-  onButtonClick,
-  errorMessage,
-  title,
-  tooltip,
-  required,
-  initialValue,
-  onChange,
-  ...props
-}) => {
-  const [value, setValue] = useState<string>(initialValue || '');
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-    if (onChange) {
-      onChange(e);
-    }
-  };
-
-  return (
-    <Container>
-      {title && (
-        <HeaderWrapper>
-          <Title>{title}</Title>
-          {!required && (
-            <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
-              (optional)
-            </Text>
-          )}
-          <Tooltip text={tooltip || ''}>
-            {tooltip && (
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
+// Wrap Input with forwardRef to handle the ref prop
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      icon,
+      buttonLabel,
+      onButtonClick,
+      errorMessage,
+      title,
+      tooltip,
+      required,
+      initialValue,
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useState<string>(initialValue || '');
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value);
+      if (onChange) {
+        onChange(e);
+      }
+    };
+
+    return (
+      <Container>
+        {title && (
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {!required && (
+              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+                (optional)
+              </Text>
             )}
-          </Tooltip>
-        </HeaderWrapper>
-      )}
-
-      <InputWrapper
-        isDisabled={props.disabled}
-        hasError={!!errorMessage}
-        isActive={!!props.autoFocus}
-      >
-        {icon && (
-          <IconWrapper>
-            <Image src={icon} alt="" width={14} height={14} />
-          </IconWrapper>
+            <Tooltip text={tooltip || ''}>
+              {tooltip && (
+                <Image
+                  src="/icons/common/info.svg"
+                  alt=""
+                  width={16}
+                  height={16}
+                  style={{ marginBottom: 4 }}
+                />
+              )}
+            </Tooltip>
+          </HeaderWrapper>
         )}
-        <StyledInput
-          hasIcon={icon}
-          value={value}
-          onChange={handleInputChange}
-          {...props}
-        />
-        {buttonLabel && onButtonClick && (
-          <Button onClick={onButtonClick} disabled={props.disabled}>
-            {buttonLabel}
-          </Button>
+
+        <InputWrapper
+          isDisabled={props.disabled}
+          hasError={!!errorMessage}
+          isActive={!!props.autoFocus}
+        >
+          {icon && (
+            <IconWrapper>
+              <Image src={icon} alt="" width={14} height={14} />
+            </IconWrapper>
+          )}
+          <StyledInput
+            ref={ref} // Pass ref to the StyledInput
+            hasIcon={icon}
+            value={value}
+            onChange={handleInputChange}
+            {...props}
+          />
+          {buttonLabel && onButtonClick && (
+            <Button onClick={onButtonClick} disabled={props.disabled}>
+              {buttonLabel}
+            </Button>
+          )}
+        </InputWrapper>
+        {errorMessage && (
+          <ErrorWrapper>
+            <ErrorMessage>{errorMessage}</ErrorMessage>
+          </ErrorWrapper>
         )}
-      </InputWrapper>
-      {errorMessage && (
-        <ErrorWrapper>
-          <ErrorMessage>{errorMessage}</ErrorMessage>
-        </ErrorWrapper>
-      )}
-    </Container>
-  );
-};
+      </Container>
+    );
+  }
+);
 
+Input.displayName = 'Input'; // Set a display name for easier debugging
 export { Input };

From 63a485233cd1d5f9d143b2d4f6a3e04b5c5caa76 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 8 Oct 2024 11:08:28 +0300
Subject: [PATCH 256/374] wip: fixed pr comments

---
 .../components/common/card-details/index.tsx     |  4 ++--
 .../configured-fields}/index.tsx                 | 16 ++++++++++------
 frontend/webapp/components/common/index.ts       |  1 +
 frontend/webapp/components/destinations/index.ts |  1 -
 .../configured-destinations-list/index.tsx       |  4 ++--
 5 files changed, 15 insertions(+), 11 deletions(-)
 rename frontend/webapp/components/{destinations/configured-destination-fields => common/configured-fields}/index.tsx (86%)

diff --git a/frontend/webapp/components/common/card-details/index.tsx b/frontend/webapp/components/common/card-details/index.tsx
index f653f8b1a..184ebb2af 100644
--- a/frontend/webapp/components/common/card-details/index.tsx
+++ b/frontend/webapp/components/common/card-details/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { ConfiguredDestinationFields } from '@/components';
+import { ConfiguredFields } from '@/components';
 import { Text } from '@/reuseable-components';
 interface CardDetailsProps {
   data: {
@@ -19,7 +19,7 @@ const CardDetails: React.FC<CardDetailsProps> = ({
       <TitleWrapper>
         <Text>{title}</Text>
       </TitleWrapper>
-      <ConfiguredDestinationFields details={data} />
+      <ConfiguredFields details={data} />
     </Container>
   );
 };
diff --git a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx b/frontend/webapp/components/common/configured-fields/index.tsx
similarity index 86%
rename from frontend/webapp/components/destinations/configured-destination-fields/index.tsx
rename to frontend/webapp/components/common/configured-fields/index.tsx
index 740afd776..591e1e550 100644
--- a/frontend/webapp/components/destinations/configured-destination-fields/index.tsx
+++ b/frontend/webapp/components/common/configured-fields/index.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Text } from '@/reuseable-components';
-import { DestinationTypeDetail } from '@/types';
 
-type ConfiguredDestinationFieldsProps = {
-  details: DestinationTypeDetail[];
+type TypeDetail = {
+  title: string;
+  value: string;
+};
+
+type ConfiguredFieldsProps = {
+  details: TypeDetail[];
 };
 
 const ListContainer = styled.div`
@@ -27,9 +31,9 @@ const ItemValue = styled(Text)`
   line-height: 18px;
 `;
 
-export const ConfiguredDestinationFields: React.FC<
-  ConfiguredDestinationFieldsProps
-> = ({ details }) => {
+export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({
+  details,
+}) => {
   const parseValue = (value: any) => {
     try {
       const parsed = JSON.parse(value);
diff --git a/frontend/webapp/components/common/index.ts b/frontend/webapp/components/common/index.ts
index d4cc38292..bc8f954d1 100644
--- a/frontend/webapp/components/common/index.ts
+++ b/frontend/webapp/components/common/index.ts
@@ -1,3 +1,4 @@
 export * from './multi.checkbox';
 export * from './conditions.check';
 export * from './card-details';
+export * from './configured-fields';
diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
index 9ca5e77cb..e7e4b7330 100644
--- a/frontend/webapp/components/destinations/index.ts
+++ b/frontend/webapp/components/destinations/index.ts
@@ -1,3 +1,2 @@
 export * from './add-destination-button';
 export * from './monitors-tap-list';
-export * from './configured-destination-fields';
diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
index a989f4164..f650c2980 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
+import { ConfiguredFields } from '@/components';
 import { ConfiguredDestination } from '@/types';
 import { Divider, Text } from '@/reuseable-components';
-import { ConfiguredDestinationFields } from '@/components';
 
 const Container = styled.div`
   display: flex;
@@ -177,7 +177,7 @@ function ConfiguredDestinationsListItem({
       {expand && (
         <ListItemBody>
           <Divider margin="0 0 16px 0" />
-          <ConfiguredDestinationFields details={item.destinationTypeDetails} />
+          <ConfiguredFields details={item.destinationTypeDetails} />
         </ListItemBody>
       )}
     </ListItem>

From 9c92b0b7e6374354803c2d4e00738fb3dd007ea2 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 8 Oct 2024 11:13:12 +0300
Subject: [PATCH 257/374] wip: fix pr comments

---
 .../main/sources/source-drawer-container/index.tsx        | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
index 12d77bb46..3676e2d43 100644
--- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
@@ -1,15 +1,11 @@
-import React, { useEffect, useMemo } from 'react';
-import { CardDetails } from '@/components';
+import React, { useMemo } from 'react';
 import { useDrawerStore } from '@/store';
 import { K8sActualSource } from '@/types';
+import { CardDetails } from '@/components';
 
 const SourceDrawer: React.FC = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
 
-  useEffect(() => {
-    console.log({ selectedItem });
-  }, [selectedItem]);
-
   const cardData = useMemo(() => {
     if (!selectedItem) return [];
 

From 68a424c596a386880a8a4f145c51da261e6035d7 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 8 Oct 2024 15:32:10 +0300
Subject: [PATCH 258/374] chore: update source api call and custom hook

---
 frontend/graph/conversions.go                 |   6 +-
 frontend/graph/generated.go                   | 195 ++++++++++++++++++
 frontend/graph/model/models_gen.go            |   5 +
 frontend/graph/schema.graphqls                |   9 +
 frontend/graph/schema.resolvers.go            |  31 ++-
 frontend/services/sources.go                  |  50 ++++-
 .../main/overview/overview-drawer/index.tsx   |  43 +++-
 frontend/webapp/graphql/mutations/source.ts   |  12 ++
 .../graphql/queries/compute-platform.ts       |   1 +
 .../webapp/hooks/sources/useActualSources.ts  |  26 ++-
 .../webapp/hooks/sources/useUpdateSource.ts   |  35 ++++
 frontend/webapp/types/sources.ts              |   5 +
 12 files changed, 399 insertions(+), 19 deletions(-)
 create mode 100644 frontend/webapp/hooks/sources/useUpdateSource.ts

diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
index 8c69022af..71b7df4fa 100644
--- a/frontend/graph/conversions.go
+++ b/frontend/graph/conversions.go
@@ -138,10 +138,10 @@ func instrumentedApplicationToActualSource(instrumentedApp v1alpha1.Instrumented
 		Namespace:                instrumentedApp.Namespace,
 		Kind:                     k8sKindToGql(instrumentedApp.OwnerReferences[0].Kind),
 		Name:                     instrumentedApp.OwnerReferences[0].Name,
-		ServiceName:              &instrumentedApp.Name, // Assuming serviceName is derived from the app name
-		NumberOfInstances:        nil,                   // Assuming this is handled separately; can be updated if needed
+		ServiceName:              &instrumentedApp.Name,
+		NumberOfInstances:        nil,
 		AutoInstrumented:         instrumentedApp.Spec.Options != nil,
-		AutoInstrumentedDecision: "", // Assuming this comes from another source, add if applicable
+		AutoInstrumentedDecision: "",
 		InstrumentedApplicationDetails: &gqlmodel.InstrumentedApplicationDetails{
 			Containers: containers,
 			Conditions: conditions,
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 45a71b256..9e2dc0ffc 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -161,6 +161,7 @@ type ComplexityRoot struct {
 		Name                           func(childComplexity int) int
 		Namespace                      func(childComplexity int) int
 		NumberOfInstances              func(childComplexity int) int
+		ReportedName                   func(childComplexity int) int
 		ServiceName                    func(childComplexity int) int
 	}
 
@@ -169,6 +170,7 @@ type ComplexityRoot struct {
 		PersistK8sNamespace          func(childComplexity int, namespace model.PersistNamespaceItemInput) int
 		PersistK8sSources            func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
 		TestConnectionForDestination func(childComplexity int, destination model.DestinationInput) int
+		UpdateK8sActualSource        func(childComplexity int, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) int
 	}
 
 	ObservabilitySignalSupport struct {
@@ -226,6 +228,7 @@ type MutationResolver interface {
 	PersistK8sNamespace(ctx context.Context, namespace model.PersistNamespaceItemInput) (bool, error)
 	PersistK8sSources(ctx context.Context, namespace string, sources []*model.PersistNamespaceSourceInput) (bool, error)
 	TestConnectionForDestination(ctx context.Context, destination model.DestinationInput) (*model.TestConnectionResponse, error)
+	UpdateK8sActualSource(ctx context.Context, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) (bool, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
@@ -703,6 +706,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualSource.NumberOfInstances(childComplexity), true
 
+	case "K8sActualSource.reportedName":
+		if e.complexity.K8sActualSource.ReportedName == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.ReportedName(childComplexity), true
+
 	case "K8sActualSource.serviceName":
 		if e.complexity.K8sActualSource.ServiceName == nil {
 			break
@@ -758,6 +768,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.TestConnectionForDestination(childComplexity, args["destination"].(model.DestinationInput)), true
 
+	case "Mutation.updateK8sActualSource":
+		if e.complexity.Mutation.UpdateK8sActualSource == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_updateK8sActualSource_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.UpdateK8sActualSource(childComplexity, args["sourceId"].(model.K8sSourceID), args["patchSourceRequest"].(model.PatchSourceRequestInput)), true
+
 	case "ObservabilitySignalSupport.supported":
 		if e.complexity.ObservabilitySignalSupport.Supported == nil {
 			break
@@ -890,6 +912,7 @@ func (e *executableSchema) Exec(ctx context.Context) graphql.ResponseHandler {
 		ec.unmarshalInputK8sDesiredSourceInput,
 		ec.unmarshalInputK8sNamespaceId,
 		ec.unmarshalInputK8sSourceId,
+		ec.unmarshalInputPatchSourceRequestInput,
 		ec.unmarshalInputPersistNamespaceItemInput,
 		ec.unmarshalInputPersistNamespaceSourceInput,
 	)
@@ -1140,6 +1163,30 @@ func (ec *executionContext) field_Mutation_testConnectionForDestination_args(ctx
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_updateK8sActualSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.K8sSourceID
+	if tmp, ok := rawArgs["sourceId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("sourceId"))
+		arg0, err = ec.unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["sourceId"] = arg0
+	var arg1 model.PatchSourceRequestInput
+	if tmp, ok := rawArgs["patchSourceRequest"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("patchSourceRequest"))
+		arg1, err = ec.unmarshalNPatchSourceRequestInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPatchSourceRequestInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["patchSourceRequest"] = arg1
+	return args, nil
+}
+
 func (ec *executionContext) field_Query___type_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -1410,6 +1457,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx con
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
 			case "autoInstrumented":
 				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
 			case "autoInstrumentedDecision":
@@ -1483,6 +1532,8 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ cont
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
 			case "autoInstrumented":
 				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
 			case "autoInstrumentedDecision":
@@ -3799,6 +3850,8 @@ func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(ctx
 				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 			case "numberOfInstances":
 				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
 			case "autoInstrumented":
 				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
 			case "autoInstrumentedDecision":
@@ -4037,6 +4090,47 @@ func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ con
 	return fc, nil
 }
 
+func (ec *executionContext) _K8sActualSource_reportedName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ReportedName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_reportedName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
 	if err != nil {
@@ -4422,6 +4516,61 @@ func (ec *executionContext) fieldContext_Mutation_testConnectionForDestination(c
 	return fc, nil
 }
 
+func (ec *executionContext) _Mutation_updateK8sActualSource(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateK8sActualSource(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateK8sActualSource(rctx, fc.Args["sourceId"].(model.K8sSourceID), fc.Args["patchSourceRequest"].(model.PatchSourceRequestInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateK8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateK8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Context, field graphql.CollectedField, obj *model.ObservabilitySignalSupport) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
 	if err != nil {
@@ -7318,6 +7467,33 @@ func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj i
 	return it, nil
 }
 
+func (ec *executionContext) unmarshalInputPatchSourceRequestInput(ctx context.Context, obj interface{}) (model.PatchSourceRequestInput, error) {
+	var it model.PatchSourceRequestInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"reportedName"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "reportedName":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("reportedName"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.ReportedName = data
+		}
+	}
+
+	return it, nil
+}
+
 func (ec *executionContext) unmarshalInputPersistNamespaceItemInput(ctx context.Context, obj interface{}) (model.PersistNamespaceItemInput, error) {
 	var it model.PersistNamespaceItemInput
 	asMap := map[string]interface{}{}
@@ -8524,6 +8700,8 @@ func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.Select
 			out.Values[i] = ec._K8sActualSource_serviceName(ctx, field, obj)
 		case "numberOfInstances":
 			out.Values[i] = ec._K8sActualSource_numberOfInstances(ctx, field, obj)
+		case "reportedName":
+			out.Values[i] = ec._K8sActualSource_reportedName(ctx, field, obj)
 		case "autoInstrumented":
 			out.Values[i] = ec._K8sActualSource_autoInstrumented(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
@@ -8606,6 +8784,13 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "updateK8sActualSource":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_updateK8sActualSource(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -9916,10 +10101,20 @@ func (ec *executionContext) marshalNK8sResourceKind2githubᚗcomᚋodigosᚑio
 	return v
 }
 
+func (ec *executionContext) unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx context.Context, v interface{}) (model.K8sSourceID, error) {
+	res, err := ec.unmarshalInputK8sSourceId(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx context.Context, sel ast.SelectionSet, v model.ObservabilitySignalSupport) graphql.Marshaler {
 	return ec._ObservabilitySignalSupport(ctx, sel, &v)
 }
 
+func (ec *executionContext) unmarshalNPatchSourceRequestInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPatchSourceRequestInput(ctx context.Context, v interface{}) (model.PatchSourceRequestInput, error) {
+	res, err := ec.unmarshalInputPatchSourceRequestInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) unmarshalNPersistNamespaceItemInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceItemInput(ctx context.Context, v interface{}) (model.PersistNamespaceItemInput, error) {
 	res, err := ec.unmarshalInputPersistNamespaceItemInput(ctx, v)
 	return res, graphql.ErrorOnPath(ctx, err)
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index abb004824..27374cf6b 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -102,6 +102,7 @@ type K8sActualSource struct {
 	Name                           string                          `json:"name"`
 	ServiceName                    *string                         `json:"serviceName,omitempty"`
 	NumberOfInstances              *int                            `json:"numberOfInstances,omitempty"`
+	ReportedName                   *string                         `json:"reportedName,omitempty"`
 	AutoInstrumented               bool                            `json:"autoInstrumented"`
 	AutoInstrumentedDecision       string                          `json:"autoInstrumentedDecision"`
 	InstrumentedApplicationDetails *InstrumentedApplicationDetails `json:"instrumentedApplicationDetails,omitempty"`
@@ -129,6 +130,10 @@ type K8sSourceID struct {
 type Mutation struct {
 }
 
+type PatchSourceRequestInput struct {
+	ReportedName *string `json:"reportedName,omitempty"`
+}
+
 type PersistNamespaceItemInput struct {
 	Name           string `json:"name"`
 	FutureSelected *bool  `json:"futureSelected,omitempty"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index fec8b9063..a153372ce 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -93,6 +93,7 @@ type K8sActualSource {
   name: String!
   serviceName: String
   numberOfInstances: Int
+  reportedName: String
   autoInstrumented: Boolean!
   autoInstrumentedDecision: String!
   instrumentedApplicationDetails: InstrumentedApplicationDetails
@@ -233,6 +234,10 @@ type IcaInstanceResponse {
   spec: String!
 }
 
+input PatchSourceRequestInput {
+  reportedName: String
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
@@ -251,4 +256,8 @@ type Mutation {
   testConnectionForDestination(
     destination: DestinationInput!
   ): TestConnectionResponse!
+  updateK8sActualSource(
+    sourceId: K8sSourceId!
+    patchSourceRequest: PatchSourceRequestInput!
+  ): Boolean!
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index f71eeb055..3a8208482 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -99,6 +99,18 @@ func (r *computePlatformResolver) K8sActualSources(ctx context.Context, obj *mod
 	// Convert each instrumented application to the K8sActualSource type
 	for _, app := range instrumentedApplications.Items {
 		actualSource := instrumentedApplicationToActualSource(app)
+
+		owner, _ := services.GetWorkload(ctx, actualSource.Namespace, string(actualSource.Kind), actualSource.Name)
+		if owner == nil {
+
+			continue
+		}
+		ownerAnnotations := owner.GetAnnotations()
+		var reportedName string
+		if ownerAnnotations != nil {
+			reportedName = ownerAnnotations[consts.OdigosReportedNameAnnotation]
+		}
+		actualSource.ReportedName = &reportedName
 		actualSources = append(actualSources, actualSource)
 	}
 
@@ -423,9 +435,26 @@ func (r *mutationResolver) TestConnectionForDestination(ctx context.Context, des
 	}, nil
 }
 
+// UpdateK8sActualSource is the resolver for the updateK8sActualSource field.
+func (r *mutationResolver) UpdateK8sActualSource(ctx context.Context, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) (bool, error) {
+	ns := sourceID.Namespace
+	kind := string(sourceID.Kind)
+	name := sourceID.Name
+
+	request := patchSourceRequest
+
+	// Handle ReportedName update
+	if request.ReportedName != nil {
+		if err := services.UpdateReportedName(ctx, ns, kind, name, *request.ReportedName); err != nil {
+			return false, err
+		}
+	}
+
+	return true, nil
+}
+
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
-
 	return &model.ComputePlatform{
 		ComputePlatformType: model.ComputePlatformTypeK8s,
 	}, nil
diff --git a/frontend/services/sources.go b/frontend/services/sources.go
index 170ba15ab..2a9d0992f 100644
--- a/frontend/services/sources.go
+++ b/frontend/services/sources.go
@@ -64,7 +64,7 @@ type ThinSource struct {
 
 func GetActualSource(ctx context.Context, ns string, kind string, name string) (*Source, error) {
 	k8sObjectName := workload.CalculateWorkloadRuntimeObjectName(name, kind)
-	owner, numberOfRunningInstances := getWorkload(ctx, ns, kind, name)
+	owner, numberOfRunningInstances := GetWorkload(ctx, ns, kind, name)
 	if owner == nil {
 		return nil, fmt.Errorf("owner not found")
 	}
@@ -98,7 +98,7 @@ func GetActualSource(ctx context.Context, ns string, kind string, name string) (
 	}, nil
 }
 
-func getWorkload(c context.Context, ns string, kind string, name string) (metav1.Object, int) {
+func GetWorkload(c context.Context, ns string, kind string, name string) (metav1.Object, int) {
 	switch kind {
 	case "Deployment":
 		deployment, err := kube.DefaultClient.AppsV1().Deployments(ns).Get(c, name, metav1.GetOptions{})
@@ -334,3 +334,49 @@ func k8sKindToGql(k8sResourceKind string) model.K8sResourceKind {
 	}
 	return ""
 }
+
+func UpdateReportedName(
+	ctx context.Context,
+	ns, kind, name, reportedName string,
+) error {
+	switch kind {
+	case "Deployment":
+		deployment, err := kube.DefaultClient.AppsV1().Deployments(ns).Get(ctx, name, metav1.GetOptions{})
+		if err != nil {
+			return fmt.Errorf("could not find deployment: %w", err)
+		}
+		deployment.SetAnnotations(updateAnnotations(deployment.GetAnnotations(), reportedName))
+		_, err = kube.DefaultClient.AppsV1().Deployments(ns).Update(ctx, deployment, metav1.UpdateOptions{})
+		return err
+	case "StatefulSet":
+		statefulSet, err := kube.DefaultClient.AppsV1().StatefulSets(ns).Get(ctx, name, metav1.GetOptions{})
+		if err != nil {
+			return fmt.Errorf("could not find statefulset: %w", err)
+		}
+		statefulSet.SetAnnotations(updateAnnotations(statefulSet.GetAnnotations(), reportedName))
+		_, err = kube.DefaultClient.AppsV1().StatefulSets(ns).Update(ctx, statefulSet, metav1.UpdateOptions{})
+		return err
+	case "DaemonSet":
+		daemonSet, err := kube.DefaultClient.AppsV1().DaemonSets(ns).Get(ctx, name, metav1.GetOptions{})
+		if err != nil {
+			return fmt.Errorf("could not find daemonset: %w", err)
+		}
+		daemonSet.SetAnnotations(updateAnnotations(daemonSet.GetAnnotations(), reportedName))
+		_, err = kube.DefaultClient.AppsV1().DaemonSets(ns).Update(ctx, daemonSet, metav1.UpdateOptions{})
+		return err
+	default:
+		return fmt.Errorf("unsupported kind: %s", kind)
+	}
+}
+
+func updateAnnotations(annotations map[string]string, reportedName string) map[string]string {
+	if annotations == nil {
+		annotations = make(map[string]string)
+	}
+	if reportedName == "" {
+		delete(annotations, consts.OdigosReportedNameAnnotation)
+	} else {
+		annotations[consts.OdigosReportedNameAnnotation] = reportedName
+	}
+	return annotations
+}
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 2af53c646..dbece4a3f 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,12 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { K8sActualSource } from '@/types';
+import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
 import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+import { useActualSources } from '@/hooks';
 
 const componentMap = {
   source: SourceDrawer,
@@ -24,24 +25,52 @@ const OverviewDrawer = () => {
   const [isEditing, setIsEditing] = useState(false);
   const [title, setTitle] = useState(selectedItem?.item?.name || '');
 
+  const { updateActualSource } = useActualSources();
+
   const titleRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    setTitle(selectedItem?.item?.name || '');
-  }, [selectedItem]);
+  useEffect(initialTitle, [selectedItem]);
+
+  function initialTitle() {
+    if (selectedItem?.type === 'source' && selectedItem.item) {
+      const title = (selectedItem.item as K8sActualSource).reportedName;
+      setTitle(title || '');
+    } else {
+      setTitle('');
+    }
+  }
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (titleRef.current) {
       const newTitle = titleRef.current.value;
       setTitle(newTitle);
+      if (selectedItem?.type === 'source' && selectedItem.item) {
+        const sourceItem = selectedItem.item as K8sActualSource;
+
+        const sourceId: WorkloadId = {
+          namespace: sourceItem.namespace,
+          kind: sourceItem.kind,
+          name: sourceItem.name,
+        };
+
+        const patchRequest: PatchSourceRequestInput = {
+          reportedName: newTitle,
+        };
+
+        try {
+          await updateActualSource(sourceId, patchRequest);
+        } catch (error) {
+          console.error('Error updating source:', error);
+          // Optionally show error message to user
+        }
+      }
     }
-    // Add save logic here
     setIsEditing(false);
   };
 
   const handleCancel = () => {
     setIsEditing(false);
-    setTitle(selectedItem?.item?.name || ''); // Revert to original title on cancel
+    initialTitle();
   };
 
   const handleDelete = () => {
diff --git a/frontend/webapp/graphql/mutations/source.ts b/frontend/webapp/graphql/mutations/source.ts
index 3c171a743..c2932e430 100644
--- a/frontend/webapp/graphql/mutations/source.ts
+++ b/frontend/webapp/graphql/mutations/source.ts
@@ -8,3 +8,15 @@ export const CREATE_SOURCE = gql`
     persistK8sSources(namespace: $namespace, sources: $sources)
   }
 `;
+
+export const UPDATE_K8S_ACTUAL_SOURCE = gql`
+  mutation UpdateK8sActualSource(
+    $sourceId: K8sSourceId!
+    $patchSourceRequest: PatchSourceRequestInput!
+  ) {
+    updateK8sActualSource(
+      sourceId: $sourceId
+      patchSourceRequest: $patchSourceRequest
+    )
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 523d0621e..6c666b2e4 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -8,6 +8,7 @@ export const GET_COMPUTE_PLATFORM = gql`
         kind
         namespace
         numberOfInstances
+        reportedName
         instrumentedApplicationDetails {
           containers {
             containerName
diff --git a/frontend/webapp/hooks/sources/useActualSources.ts b/frontend/webapp/hooks/sources/useActualSources.ts
index 3cd531a51..c24adafa8 100644
--- a/frontend/webapp/hooks/sources/useActualSources.ts
+++ b/frontend/webapp/hooks/sources/useActualSources.ts
@@ -1,15 +1,15 @@
+import { useState, useCallback } from 'react';
 import { useCreateSource } from '../sources';
 import { useNamespace } from '../compute-platform';
+import { useUpdateSource } from './useUpdateSource';
 import { useComputePlatform } from '../compute-platform';
-import { useState, useCallback } from 'react';
+import { PatchSourceRequestInput, WorkloadId } from '@/types';
 
 export function useActualSources() {
   const { data, refetch } = useComputePlatform();
-  const {
-    createSource,
-    success: sourceSuccess,
-    error: sourceError,
-  } = useCreateSource();
+  const { createSource, error: sourceError } = useCreateSource();
+  const { updateSource, error: updateError } = useUpdateSource();
+
   const { persistNamespace } = useNamespace(undefined);
   const [isPolling, setIsPolling] = useState(false);
 
@@ -37,6 +37,19 @@ export function useActualSources() {
     }
   };
 
+  const updateActualSource = async (
+    sourceId: WorkloadId,
+    patchRequest: PatchSourceRequestInput
+  ) => {
+    try {
+      await updateSource(sourceId, patchRequest);
+      refetch();
+    } catch (error) {
+      console.error('Error updating source:', error);
+      throw error;
+    }
+  };
+
   const persistNamespaceItems = async (namespaceItems) => {
     for (const namespace of namespaceItems) {
       await persistNamespace(namespace);
@@ -47,6 +60,7 @@ export function useActualSources() {
     sources: data?.computePlatform.k8sActualSources || [],
     createSourcesForNamespace,
     persistNamespaceItems,
+    updateActualSource,
     isPolling,
   };
 }
diff --git a/frontend/webapp/hooks/sources/useUpdateSource.ts b/frontend/webapp/hooks/sources/useUpdateSource.ts
new file mode 100644
index 000000000..48c60c030
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useUpdateSource.ts
@@ -0,0 +1,35 @@
+// sources.ts
+import { useMutation } from '@apollo/client';
+import { UPDATE_K8S_ACTUAL_SOURCE } from '@/graphql';
+import { WorkloadId, PatchSourceRequestInput } from '@/types';
+
+export function useUpdateSource() {
+  const [updateSourceMutation, { data, loading, error }] = useMutation(
+    UPDATE_K8S_ACTUAL_SOURCE
+  );
+
+  const updateSource = async (
+    sourceId: WorkloadId,
+    patchSourceRequest: PatchSourceRequestInput
+  ) => {
+    try {
+      const response = await updateSourceMutation({
+        variables: {
+          sourceId,
+          patchSourceRequest,
+        },
+      });
+      return response;
+    } catch (err) {
+      console.error('Error updating source:', err);
+      throw err;
+    }
+  };
+
+  return {
+    updateSource,
+    data,
+    loading,
+    error,
+  };
+}
diff --git a/frontend/webapp/types/sources.ts b/frontend/webapp/types/sources.ts
index 57164bb59..7f16fa56b 100644
--- a/frontend/webapp/types/sources.ts
+++ b/frontend/webapp/types/sources.ts
@@ -82,6 +82,7 @@ export type K8sActualSource = {
   name: string;
   kind: string;
   namespace: string;
+  reportedName: string;
   numberOfInstances: number;
   selected?: boolean;
   instrumentedApplicationDetails: {
@@ -107,3 +108,7 @@ export type WorkloadId = {
   name: string;
   namespace: string;
 };
+
+export interface PatchSourceRequestInput {
+  reportedName?: string;
+}

From cec9e1f18e7754d05ccf9e19a558e35f8a79f52d Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 8 Oct 2024 15:32:35 +0300
Subject: [PATCH 259/374] wip: chore

---
 .../webapp/containers/main/overview/overview-drawer/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index dbece4a3f..48574a955 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,13 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
+import { useActualSources } from '@/hooks';
 import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import { useActualSources } from '@/hooks';
+import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
 
 const componentMap = {
   source: SourceDrawer,

From 647455ef051b3ceb25583a9dd026126749fa23e3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 8 Oct 2024 16:49:55 +0300
Subject: [PATCH 260/374] wip: delete source

---
 frontend/services/namespaces.go               |  2 +-
 .../main/overview/overview-drawer/index.tsx   | 20 +++++--
 frontend/webapp/graphql/mutations/source.ts   |  2 +-
 frontend/webapp/hooks/sources/index.ts        |  2 +-
 .../webapp/hooks/sources/useActualSources.ts  | 30 +++++++++--
 .../webapp/hooks/sources/useCreateSources.ts  | 52 -------------------
 .../webapp/hooks/sources/usePersistSource.ts  | 46 ++++++++++++++++
 frontend/webapp/types/sources.ts              |  6 +++
 8 files changed, 97 insertions(+), 63 deletions(-)
 delete mode 100644 frontend/webapp/hooks/sources/useCreateSources.ts
 create mode 100644 frontend/webapp/hooks/sources/usePersistSource.ts

diff --git a/frontend/services/namespaces.go b/frontend/services/namespaces.go
index fce287517..534249c90 100644
--- a/frontend/services/namespaces.go
+++ b/frontend/services/namespaces.go
@@ -180,7 +180,7 @@ func SyncWorkloadsInNamespace(ctx context.Context, nsName string, workloads []mo
 		currWorkload := workload
 		g.Go(func() error {
 			// Only label selected sources, ignore the rest
-			if currWorkload.Selected != nil && *currWorkload.Selected {
+			if currWorkload.Selected != nil {
 				return setWorkloadInstrumentationLabel(ctx, nsName, currWorkload.Name, WorkloadKind(currWorkload.Kind.String()), currWorkload.Selected)
 			}
 			return nil
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 48574a955..6aa993ef0 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -25,7 +25,7 @@ const OverviewDrawer = () => {
   const [isEditing, setIsEditing] = useState(false);
   const [title, setTitle] = useState(selectedItem?.item?.name || '');
 
-  const { updateActualSource } = useActualSources();
+  const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
 
   const titleRef = useRef<HTMLInputElement>(null);
 
@@ -73,8 +73,22 @@ const OverviewDrawer = () => {
     initialTitle();
   };
 
-  const handleDelete = () => {
-    // Add delete logic here
+  const handleDelete = async () => {
+    if (selectedItem?.type === 'source' && selectedItem.item) {
+      const sourceItem = selectedItem.item as K8sActualSource;
+
+      try {
+        await deleteSourcesForNamespace(sourceItem.namespace, [
+          {
+            kind: sourceItem.kind,
+            name: sourceItem.name,
+            selected: false,
+          },
+        ]);
+      } catch (error) {
+        console.error('Error deleting source:', error);
+      }
+    }
     setDrawerItem(null); // Close the drawer on delete
   };
 
diff --git a/frontend/webapp/graphql/mutations/source.ts b/frontend/webapp/graphql/mutations/source.ts
index c2932e430..647258dd6 100644
--- a/frontend/webapp/graphql/mutations/source.ts
+++ b/frontend/webapp/graphql/mutations/source.ts
@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client';
 
-export const CREATE_SOURCE = gql`
+export const PERSIST_SOURCE = gql`
   mutation PersistSources(
     $namespace: String!
     $sources: [PersistNamespaceSourceInput!]!
diff --git a/frontend/webapp/hooks/sources/index.ts b/frontend/webapp/hooks/sources/index.ts
index be668afed..909719e76 100644
--- a/frontend/webapp/hooks/sources/index.ts
+++ b/frontend/webapp/hooks/sources/index.ts
@@ -1,5 +1,5 @@
 export * from './useSources';
 export * from './useConnectSourcesMenuState';
 export * from './useConnectSourcesList';
-export * from './useCreateSources';
+export * from './usePersistSource';
 export * from './useActualSources';
diff --git a/frontend/webapp/hooks/sources/useActualSources.ts b/frontend/webapp/hooks/sources/useActualSources.ts
index c24adafa8..1913fafee 100644
--- a/frontend/webapp/hooks/sources/useActualSources.ts
+++ b/frontend/webapp/hooks/sources/useActualSources.ts
@@ -1,13 +1,17 @@
 import { useState, useCallback } from 'react';
-import { useCreateSource } from '../sources';
+import { usePersistSource } from '../sources';
 import { useNamespace } from '../compute-platform';
 import { useUpdateSource } from './useUpdateSource';
 import { useComputePlatform } from '../compute-platform';
-import { PatchSourceRequestInput, WorkloadId } from '@/types';
+import {
+  PatchSourceRequestInput,
+  PersistSourcesArray,
+  WorkloadId,
+} from '@/types';
 
 export function useActualSources() {
   const { data, refetch } = useComputePlatform();
-  const { createSource, error: sourceError } = useCreateSource();
+  const { persistSource, error: sourceError } = usePersistSource();
   const { updateSource, error: updateError } = useUpdateSource();
 
   const { persistNamespace } = useNamespace(undefined);
@@ -28,8 +32,23 @@ export function useActualSources() {
     setIsPolling(false);
   }, [refetch]);
 
-  const createSourcesForNamespace = async (namespaceName, sources) => {
-    await createSource(namespaceName, sources);
+  const createSourcesForNamespace = async (
+    namespaceName: string,
+    sources: PersistSourcesArray[]
+  ) => {
+    await persistSource(namespaceName, sources);
+
+    startPolling();
+    if (sourceError) {
+      throw new Error(`Error creating sources for namespace: ${namespaceName}`);
+    }
+  };
+
+  const deleteSourcesForNamespace = async (
+    namespaceName: string,
+    sources: PersistSourcesArray[]
+  ) => {
+    await persistSource(namespaceName, sources);
 
     startPolling();
     if (sourceError) {
@@ -58,6 +77,7 @@ export function useActualSources() {
 
   return {
     sources: data?.computePlatform.k8sActualSources || [],
+    deleteSourcesForNamespace,
     createSourcesForNamespace,
     persistNamespaceItems,
     updateActualSource,
diff --git a/frontend/webapp/hooks/sources/useCreateSources.ts b/frontend/webapp/hooks/sources/useCreateSources.ts
deleted file mode 100644
index da75460ae..000000000
--- a/frontend/webapp/hooks/sources/useCreateSources.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { CREATE_SOURCE } from '@/graphql';
-import { K8sActualSource } from '@/types';
-import { useMutation } from '@apollo/client';
-import { useState } from 'react';
-
-type CreateSourceResponse = {
-  persistK8sSources: boolean;
-};
-
-type CreateSourcesArray = {
-  kind: string;
-  name: string;
-  selected: boolean;
-};
-
-type CreateSourceVariables = {
-  namespace: string;
-  sources: CreateSourcesArray[];
-};
-
-export const useCreateSource = () => {
-  const [createSourceMutation, { data, loading, error }] = useMutation<
-    CreateSourceResponse,
-    CreateSourceVariables
-  >(CREATE_SOURCE);
-
-  const [success, setSuccess] = useState<boolean | null>(null);
-
-  const createSource = async (
-    namespace: string,
-    sources: CreateSourcesArray[]
-  ) => {
-    try {
-      const result = await createSourceMutation({
-        variables: {
-          namespace,
-          sources,
-        },
-      });
-      setSuccess(result.data?.persistK8sSources ?? false);
-    } catch (err) {
-      setSuccess(false);
-    }
-  };
-
-  return {
-    createSource,
-    success,
-    loading,
-    error,
-  };
-};
diff --git a/frontend/webapp/hooks/sources/usePersistSource.ts b/frontend/webapp/hooks/sources/usePersistSource.ts
new file mode 100644
index 000000000..85c4c6820
--- /dev/null
+++ b/frontend/webapp/hooks/sources/usePersistSource.ts
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { PERSIST_SOURCE } from '@/graphql';
+import { useMutation } from '@apollo/client';
+import { PersistSourcesArray } from '@/types';
+
+type PersistSourceResponse = {
+  persistK8sSources: boolean;
+};
+
+type PersistSourceVariables = {
+  namespace: string;
+  sources: PersistSourcesArray[];
+};
+
+export const usePersistSource = () => {
+  const [persistSourceMutation, { data, loading, error }] = useMutation<
+    PersistSourceResponse,
+    PersistSourceVariables
+  >(PERSIST_SOURCE);
+
+  const [success, setSuccess] = useState<boolean | null>(null);
+
+  const persistSource = async (
+    namespace: string,
+    sources: PersistSourcesArray[]
+  ) => {
+    try {
+      const result = await persistSourceMutation({
+        variables: {
+          namespace,
+          sources,
+        },
+      });
+      setSuccess(result.data?.persistK8sSources ?? false);
+    } catch (err) {
+      setSuccess(false);
+    }
+  };
+
+  return {
+    persistSource,
+    success,
+    loading,
+    error,
+  };
+};
diff --git a/frontend/webapp/types/sources.ts b/frontend/webapp/types/sources.ts
index 7f16fa56b..16ba566e3 100644
--- a/frontend/webapp/types/sources.ts
+++ b/frontend/webapp/types/sources.ts
@@ -112,3 +112,9 @@ export type WorkloadId = {
 export interface PatchSourceRequestInput {
   reportedName?: string;
 }
+
+export type PersistSourcesArray = {
+  kind: string;
+  name: string;
+  selected: boolean;
+};

From 3fd5840e88fe090eb016cd4f89c3455a18d3a351 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 9 Oct 2024 12:28:22 +0300
Subject: [PATCH 261/374] feat: delete entity modal

---
 frontend/webapp/components/index.ts           |  1 +
 .../modals/delete-entity-modal/index.tsx      | 73 +++++++++++++++++++
 frontend/webapp/components/modals/index.tsx   |  1 +
 .../overview-drawer/drawer-footer/index.tsx   |  2 -
 .../main/overview/overview-drawer/index.tsx   | 26 +++++--
 .../reuseable-components/button/index.tsx     | 24 +++++-
 .../reuseable-components/modal/index.tsx      | 35 ++++-----
 frontend/webapp/styles/theme.ts               |  1 +
 8 files changed, 136 insertions(+), 27 deletions(-)
 create mode 100644 frontend/webapp/components/modals/delete-entity-modal/index.tsx
 create mode 100644 frontend/webapp/components/modals/index.tsx

diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
index df046dc30..f047da4e2 100644
--- a/frontend/webapp/components/index.ts
+++ b/frontend/webapp/components/index.ts
@@ -6,3 +6,4 @@ export * from './notification/notification-manager';
 export * from './notification/notification-list';
 export * from './destinations';
 export * from './main';
+export * from './modals';
diff --git a/frontend/webapp/components/modals/delete-entity-modal/index.tsx b/frontend/webapp/components/modals/delete-entity-modal/index.tsx
new file mode 100644
index 000000000..ac771fc72
--- /dev/null
+++ b/frontend/webapp/components/modals/delete-entity-modal/index.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback } from 'react';
+import { Button, Modal, Text } from '@/reuseable-components';
+import styled from 'styled-components';
+
+interface AddActionModalProps {
+  title: string;
+  description: string;
+  isModalOpen: boolean;
+  handleDelete: () => void;
+  handleCloseModal: () => void;
+}
+
+export const DeleteEntityModal: React.FC<AddActionModalProps> = ({
+  isModalOpen,
+  handleCloseModal,
+  title = '',
+  handleDelete,
+  description = '',
+}) => {
+  const handleClose = useCallback(() => {
+    handleCloseModal();
+  }, [handleCloseModal]);
+
+  return (
+    <Modal isOpen={isModalOpen} onClose={handleClose}>
+      <DeleteEntityModalContainer>
+        <ModalTitle>Delete {title}</ModalTitle>
+        <ModalContent>
+          <ModalDescription>{description}</ModalDescription>
+        </ModalContent>
+        <ModalFooter>
+          <FooterButton variant="danger" onClick={handleDelete}>
+            Delete
+          </FooterButton>
+          <FooterButton variant={'secondary'} onClick={handleClose}>
+            Cancel
+          </FooterButton>
+        </ModalFooter>
+      </DeleteEntityModalContainer>
+    </Modal>
+  );
+};
+
+const ModalTitle = styled(Text)`
+  font-size: 20px;
+  line-height: 28px;
+`;
+
+const ModalDescription = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  width: 416px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 24px;
+`;
+
+const ModalContent = styled.div`
+  padding: 12px 0px 32px 0;
+`;
+
+const ModalFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+`;
+
+const FooterButton = styled(Button)`
+  width: 224px;
+`;
+
+const DeleteEntityModalContainer = styled.div`
+  padding: 24px 32px;
+`;
diff --git a/frontend/webapp/components/modals/index.tsx b/frontend/webapp/components/modals/index.tsx
new file mode 100644
index 000000000..5b27ff586
--- /dev/null
+++ b/frontend/webapp/components/modals/index.tsx
@@ -0,0 +1 @@
+export * from './delete-entity-modal';
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
index 39e3edbeb..bfee78959 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
@@ -91,7 +91,5 @@ const ButtonText = styled(Text)<{
   font-size: 14px;
   font-weight: 600;
   font-family: ${({ theme }) => theme.font_family.secondary};
-  text-decoration-line: underline;
-  text-transform: uppercase;
   width: fit-content;
 `;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 6aa993ef0..dc87b3259 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -6,6 +6,7 @@ import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
+import { DeleteEntityModal } from '@/components';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
 
@@ -24,6 +25,7 @@ const OverviewDrawer = () => {
   );
   const [isEditing, setIsEditing] = useState(false);
   const [title, setTitle] = useState(selectedItem?.item?.name || '');
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
 
@@ -95,6 +97,11 @@ const OverviewDrawer = () => {
   const handleClose = () => {
     setIsEditing(false);
     setDrawerItem(null);
+    setIsDeleteModalOpen(false);
+  };
+
+  const handleCloseDeleteModal = () => {
+    setIsDeleteModalOpen(false);
   };
 
   if (!selectedItem) return null;
@@ -120,11 +127,20 @@ const OverviewDrawer = () => {
           <SpecificComponent />
         </ContentArea>
         {isEditing && (
-          <DrawerFooter
-            onSave={handleSave}
-            onCancel={handleCancel}
-            onDelete={handleDelete}
-          />
+          <>
+            <DrawerFooter
+              onSave={handleSave}
+              onCancel={handleCancel}
+              onDelete={() => setIsDeleteModalOpen(true)}
+            />
+            <DeleteEntityModal
+              title={title}
+              isModalOpen={isDeleteModalOpen}
+              handleDelete={handleDelete}
+              handleCloseModal={handleCloseDeleteModal}
+              description="Are you sure you want to delete this source?"
+            />
+          </>
         )}
       </DrawerContent>
     </Drawer>
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index e644c01a2..e74273f42 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -2,7 +2,7 @@ import React, { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
   isDisabled?: boolean;
 }
 
@@ -23,7 +23,7 @@ const variantStyles = {
   secondary: css`
     background: rgba(249, 249, 249, 0);
     border: 1px solid rgba(82, 82, 82, 1);
-
+    color: ${({ theme }) => theme.colors.secondary};
     &:hover {
       border: 1px solid rgba(249, 249, 249, 0.32);
       background: rgba(249, 249, 249, 0.04);
@@ -49,6 +49,20 @@ const variantStyles = {
       background: rgba(249, 249, 249, 0);
     }
   `,
+  danger: css`
+    border-color: transparent;
+    background: ${({ theme }) => theme.colors.danger};
+    &:hover {
+      background: ${({ theme }) => theme.colors.danger};
+      opacity: 0.9;
+    }
+    &:active {
+      background: ${({ theme }) => theme.colors.danger};
+    }
+    &:focus {
+      background: ${({ theme }) => theme.colors.danger};
+    }
+  `,
 };
 
 const StyledButton = styled.button<ButtonProps>`
@@ -59,6 +73,10 @@ const StyledButton = styled.button<ButtonProps>`
   justify-content: center;
   align-items: center;
   padding: 0 12px;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-transform: uppercase;
+  text-decoration: underline;
+  font-weight: 600;
   ${({ variant }) => variant && variantStyles[variant]}
   ${({ isDisabled }) =>
     isDisabled &&
@@ -72,7 +90,7 @@ const StyledButton = styled.button<ButtonProps>`
 `;
 
 const ButtonContainer = styled.div<{
-  variant?: 'primary' | 'secondary' | 'tertiary';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
 }>`
   border: 2px solid transparent;
   padding: 2px;
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index c579ebfdc..75197a56a 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -3,11 +3,10 @@ import Image from 'next/image';
 import { Text } from '../text';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
-import { Button } from '../button';
 
 interface ModalProps {
   isOpen: boolean;
-  header: {
+  header?: {
     title: string;
   };
   actionComponent?: React.ReactNode;
@@ -102,21 +101,23 @@ const Modal: React.FC<ModalProps> = ({
   return ReactDOM.createPortal(
     <Overlay>
       <ModalWrapper>
-        <ModalHeader>
-          <ModalCloseButton onClick={onClose}>
-            <Image
-              src="/icons/common/x.svg"
-              alt="close"
-              width={15}
-              height={12}
-            />
-            <CancelText>{'Cancel'}</CancelText>
-          </ModalCloseButton>
-          <ModalTitleContainer>
-            <ModalTitle>{header.title}</ModalTitle>
-          </ModalTitleContainer>
-          <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
-        </ModalHeader>
+        {header && (
+          <ModalHeader>
+            <ModalCloseButton onClick={onClose}>
+              <Image
+                src="/icons/common/x.svg"
+                alt="close"
+                width={15}
+                height={12}
+              />
+              <CancelText>{'Cancel'}</CancelText>
+            </ModalCloseButton>
+            <ModalTitleContainer>
+              <ModalTitle>{header.title}</ModalTitle>
+            </ModalTitleContainer>
+            <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
+          </ModalHeader>
+        )}
         <ModalContent>{children}</ModalContent>
       </ModalWrapper>
     </Overlay>,
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index db0000ec3..064fe6916 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -14,6 +14,7 @@ const colors = {
   card: '#F9F9F90A',
   dropdown_bg: '#242424',
   blank_background: '#11111100',
+  danger: '#EF7676',
   white_opacity: {
     '004': 'rgba(249, 249, 249, 0.04)',
     '008': 'rgba(249, 249, 249, 0.08)',

From 071234cea5d06fbd9cee02238449f1d753f4786f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Wed, 9 Oct 2024 13:50:54 +0300
Subject: [PATCH 262/374] wip: close with key board

---
 frontend/webapp/app/main/page.tsx             |  2 +-
 .../overview/overview-data-flow/index.tsx     |  6 +-
 .../overview-drawer/drawer-header/index.tsx   |  5 +-
 .../main/overview/overview-drawer/index.tsx   | 80 ++++++++++---------
 .../reuseable-components/drawer/index.tsx     | 14 ++--
 .../reuseable-components/modal/index.tsx      | 13 ++-
 6 files changed, 74 insertions(+), 46 deletions(-)

diff --git a/frontend/webapp/app/main/page.tsx b/frontend/webapp/app/main/page.tsx
index 9dd0aa6a7..a2227ccd0 100644
--- a/frontend/webapp/app/main/page.tsx
+++ b/frontend/webapp/app/main/page.tsx
@@ -1,6 +1,6 @@
 'use client';
-import { OverviewDataFlowContainer } from '@/containers';
 import React from 'react';
+import { OverviewDataFlowContainer } from '@/containers';
 
 export default function MainPage() {
   return (
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 56dd18293..492ecb938 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,12 +1,16 @@
 'use client';
+import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { OverviewDrawer } from '../overview-drawer';
 import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
 import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
 
+const OverviewDrawer = dynamic(() => import('../overview-drawer'), {
+  ssr: false,
+});
+
 export const OverviewDataFlowWrapper = styled.div`
   width: calc(100% - 64px);
   height: calc(100vh - 176px);
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
index 444a81bd3..dd8492c6e 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
@@ -62,12 +62,13 @@ const ButtonText = styled(Text)`
 interface DrawerHeaderProps {
   title: string;
   imageUri: string;
+  onClose: () => void;
   isEditing: boolean;
   setIsEditing: (isEditing: boolean) => void;
 }
 
 const DrawerHeader = forwardRef<HTMLInputElement, DrawerHeaderProps>(
-  ({ title, imageUri, isEditing, setIsEditing }, ref) => {
+  ({ title, imageUri, isEditing, setIsEditing, onClose }, ref) => {
     const [inputValue, setInputValue] = useState(title);
 
     useEffect(() => {
@@ -104,7 +105,7 @@ const DrawerHeader = forwardRef<HTMLInputElement, DrawerHeaderProps>(
               <ButtonText>Edit</ButtonText>
             </EditButton>
           )}
-          <CloseButton variant="secondary" onClick={() => setIsEditing(false)}>
+          <CloseButton variant="secondary" onClick={onClose}>
             <Image
               src="/icons/common/x.svg"
               alt="Close"
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index dc87b3259..360787c22 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -109,45 +109,53 @@ const OverviewDrawer = () => {
   const SpecificComponent = componentMap[selectedItem.type];
 
   return SpecificComponent ? (
-    <Drawer isOpen onClose={handleClose} width={DRAWER_WIDTH}>
-      <DrawerContent>
-        <DrawerHeader
-          ref={titleRef}
-          title={title}
-          imageUri={
-            selectedItem?.item
-              ? getMainContainerLanguageLogo(
-                  selectedItem.item as K8sActualSource
-                )
-              : ''
-          }
-          {...{ isEditing, setIsEditing }}
-        />
-        <ContentArea>
-          <SpecificComponent />
-        </ContentArea>
-        {isEditing && (
-          <>
-            <DrawerFooter
-              onSave={handleSave}
-              onCancel={handleCancel}
-              onDelete={() => setIsDeleteModalOpen(true)}
-            />
-            <DeleteEntityModal
-              title={title}
-              isModalOpen={isDeleteModalOpen}
-              handleDelete={handleDelete}
-              handleCloseModal={handleCloseDeleteModal}
-              description="Are you sure you want to delete this source?"
-            />
-          </>
-        )}
-      </DrawerContent>
-    </Drawer>
+    <>
+      <Drawer
+        isOpen
+        onClose={handleClose}
+        width={DRAWER_WIDTH}
+        closeOnEscape={!isDeleteModalOpen}
+      >
+        <DrawerContent>
+          <DrawerHeader
+            ref={titleRef}
+            title={title}
+            onClose={isEditing ? handleCancel : handleClose}
+            imageUri={
+              selectedItem?.item
+                ? getMainContainerLanguageLogo(
+                    selectedItem.item as K8sActualSource
+                  )
+                : ''
+            }
+            {...{ isEditing, setIsEditing }}
+          />
+          <ContentArea>
+            <SpecificComponent />
+          </ContentArea>
+          {isEditing && (
+            <>
+              <DrawerFooter
+                onSave={handleSave}
+                onCancel={handleCancel}
+                onDelete={() => setIsDeleteModalOpen(true)}
+              />
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+      <DeleteEntityModal
+        title={title}
+        isModalOpen={isDeleteModalOpen}
+        handleDelete={handleDelete}
+        handleCloseModal={handleCloseDeleteModal}
+        description="Are you sure you want to delete this source?"
+      />
+    </>
   ) : null;
 };
 
-export { OverviewDrawer };
+export default OverviewDrawer;
 
 const DrawerContent = styled.div`
   display: flex;
diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
index 99b0d4bfe..75a31bd22 100644
--- a/frontend/webapp/reuseable-components/drawer/index.tsx
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
 
 interface DrawerProps {
   isOpen: boolean;
+  width?: string;
   onClose: () => void;
-  position?: 'left' | 'right'; // Optional prop to specify the drawer opening side
-  width?: string; // Optional width control, defaults to 300px
+  closeOnEscape?: boolean;
+  position?: 'left' | 'right';
   children: React.ReactNode;
 }
 
@@ -51,11 +52,14 @@ export const Drawer: React.FC<DrawerProps> = ({
   position = 'right',
   width = '300px',
   children,
+  closeOnEscape = true,
 }) => {
   // Handle closing the drawer when escape key is pressed
   useEffect(() => {
+    if (!closeOnEscape) return;
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && isOpen) {
+        event.stopPropagation();
         onClose();
       }
     };
@@ -63,7 +67,7 @@ export const Drawer: React.FC<DrawerProps> = ({
     return () => {
       document.removeEventListener('keydown', handleEscape);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, onClose, closeOnEscape]);
 
   return (
     <>
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index 75197a56a..bc0934d10 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Image from 'next/image';
 import { Text } from '../text';
 import ReactDOM from 'react-dom';
@@ -96,6 +96,17 @@ const Modal: React.FC<ModalProps> = ({
   children,
   actionComponent,
 }) => {
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, onClose]);
   if (!isOpen) return null;
 
   return ReactDOM.createPortal(

From c332365adfcac33d8f3c72099f61443e82cfbfa1 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 13 Oct 2024 11:10:25 +0300
Subject: [PATCH 263/374] feat: init edit destination

---
 .../overview/overview-data-flow/index.tsx     | 15 ++++++++++++
 .../main/overview/overview-drawer/index.tsx   | 23 ++++++++++++++-----
 frontend/webapp/package.json                  |  2 +-
 .../nodes-data-flow/builder.ts                | 18 +++++++++++----
 frontend/webapp/store/useDrawerStore.tsx      |  4 ++--
 frontend/webapp/yarn.lock                     | 18 +++++++--------
 6 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 492ecb938..a49c823c0 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -18,6 +18,7 @@ export const OverviewDataFlowWrapper = styled.div`
 `;
 
 const TYPE_SOURCE = 'source';
+const TYPE_DESTINATION = 'destination';
 
 export function OverviewDataFlowContainer() {
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -79,6 +80,20 @@ export function OverviewDataFlowContainer() {
         type: TYPE_SOURCE,
       });
     }
+
+    if (object.data.type === TYPE_DESTINATION) {
+      const { id } = object.data;
+
+      const selectedDrawerItem = destinations.find(
+        (destination) => destination.id === id
+      );
+
+      setSelectedItem({
+        id,
+        item: selectedDrawerItem,
+        type: TYPE_DESTINATION,
+      });
+    }
   }
 
   return (
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 360787c22..b33a30cdf 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -8,7 +8,12 @@ import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
+import {
+  WorkloadId,
+  K8sActualSource,
+  ActualDestination,
+  PatchSourceRequestInput,
+} from '@/types';
 
 const componentMap = {
   source: SourceDrawer,
@@ -122,11 +127,7 @@ const OverviewDrawer = () => {
             title={title}
             onClose={isEditing ? handleCancel : handleClose}
             imageUri={
-              selectedItem?.item
-                ? getMainContainerLanguageLogo(
-                    selectedItem.item as K8sActualSource
-                  )
-                : ''
+              selectedItem?.item ? getItemImageByType(selectedItem.item) : ''
             }
             {...{ isEditing, setIsEditing }}
           />
@@ -155,6 +156,16 @@ const OverviewDrawer = () => {
   ) : null;
 };
 
+function getItemImageByType(item: K8sActualSource | ActualDestination): string {
+  if ('destinationType' in item) {
+    // item is of type ActualDestination
+    return item.destinationType.imageUrl;
+  } else {
+    // item is of type K8sActualSource
+    return getMainContainerLanguageLogo(item as K8sActualSource);
+  }
+}
+
 export default OverviewDrawer;
 
 const DrawerContent = styled.div`
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index c63d15009..d797d3439 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.11.0-rc.2",
-    "@apollo/experimental-nextjs-app-support": "^0.11.2",
+    "@apollo/experimental-nextjs-app-support": "^0.11.3",
     "@focus-reactive/react-yaml": "^1.1.2",
     "@keyval-dev/design-system": "^2.3.1",
     "@next/font": "^13.4.7",
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index d8282e968..23d570ec8 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,8 +1,12 @@
+import theme from '@/styles/theme';
 import { Node, Edge } from 'react-flow-renderer';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import { ActionItem } from '@/types';
-import theme from '@/styles/theme';
-import { useDrawerStore } from '@/store';
+import {
+  ActionData,
+  ActionItem,
+  ActualDestination,
+  K8sActualSource,
+} from '@/types';
 
 // Constants
 const NODE_HEIGHT = 80;
@@ -51,14 +55,18 @@ export const buildNodesAndEdges = ({
   destinations,
   columnWidth,
   containerWidth,
+}: {
+  sources: K8sActualSource[];
+  actions: ActionData[];
+  destinations: ActualDestination[];
+  columnWidth: number;
+  containerWidth: number;
 }) => {
   // Calculate x positions for each column
   const leftColumnX = 0;
   const rightColumnX = containerWidth - columnWidth;
   const centerColumnX = (containerWidth - columnWidth) / 2;
 
-  const setSelectedItem = useDrawerStore((state) => state.setSelectedItem);
-
   // Build Source Nodes
   const sourcesNode: Node[] = [
     createNode('header-source', 'header', leftColumnX, 0, {
diff --git a/frontend/webapp/store/useDrawerStore.tsx b/frontend/webapp/store/useDrawerStore.tsx
index b69349fe2..863dda558 100644
--- a/frontend/webapp/store/useDrawerStore.tsx
+++ b/frontend/webapp/store/useDrawerStore.tsx
@@ -1,12 +1,12 @@
 // drawerStore.ts
 import { create } from 'zustand';
-import { Destination, K8sActualSource, WorkloadId } from '@/types';
+import { ActualDestination, K8sActualSource, WorkloadId } from '@/types';
 
 type ItemType = 'source' | 'action' | 'destination';
 
 interface BaseItem {
   id: string | WorkloadId;
-  item?: K8sActualSource | Destination;
+  item?: K8sActualSource | ActualDestination;
   type: ItemType;
   // Add common properties here
 }
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index 166a81370..fdc6854b6 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -10,10 +10,10 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@apollo/client-react-streaming@0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@apollo/client-react-streaming/-/client-react-streaming-0.11.2.tgz#788a5b0254469b679f8abf5391e40c420fe61965"
-  integrity sha512-rRA/dIA09/Y6+jtGGBnXHQfPOv6BYYVZwQP8OzQtWrWbSgDEI6uAhqULssU5f0ZhQJVzKDuslqGE9QAX0gdfRQ==
+"@apollo/client-react-streaming@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@apollo/client-react-streaming/-/client-react-streaming-0.11.3.tgz#ca14d15241b60e9e5e86f075d14e7cf72e1485ba"
+  integrity sha512-bAyyD7iZQ8UIvYZv2ZY3i5FTNdCgM0kfWW/0St3sqJLAs4Ji6QB9uzGUTc5434vQo6Ddb17N+Q+Ikr7fj2yTxw==
   dependencies:
     ts-invariant "^0.10.3"
 
@@ -37,12 +37,12 @@
     tslib "^2.3.0"
     zen-observable-ts "^1.2.5"
 
-"@apollo/experimental-nextjs-app-support@^0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.11.2.tgz#3df9253229afd6ec94bc5873f649f23c487c9dfb"
-  integrity sha512-HRQ8/Ux/tM2pezrhZeoHsJs55+nJvJZRV1B21QwEVtWhslQXjT5gqs5nKw86KURF0xR7gX18Nyy659NzJ09Pmw==
+"@apollo/experimental-nextjs-app-support@^0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.11.3.tgz#a0910e4d6376d6ac8293e4718e17d8df96b69de8"
+  integrity sha512-eMfbEtHyQE9EceBn0sTBWcHVvjhd+dkMO5dBhoEglEm0ga2n87KKiTeaNNb/XZnvOX81/6y0iyc0U7cgITpvKw==
   dependencies:
-    "@apollo/client-react-streaming" "0.11.2"
+    "@apollo/client-react-streaming" "0.11.3"
 
 "@babel/cli@^7.21.0":
   version "7.24.8"

From a2f82096edff05c361dbb62b873844a8b5619c4a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 13 Oct 2024 11:43:23 +0300
Subject: [PATCH 264/374] wip: destination drawer

---
 .../destination-drawer-container/index.tsx    | 29 +++++++++++++++++++
 .../containers/main/destinations/index.tsx    |  1 +
 .../main/overview/overview-drawer/index.tsx   |  6 +++-
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx

diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
new file mode 100644
index 000000000..c9f63809c
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import { useDrawerStore } from '@/store';
+import { CardDetails } from '@/components';
+import { ActualDestination } from '@/types';
+
+const DestinationDrawer: React.FC = () => {
+  const destination = useDrawerStore(({ selectedItem }) => selectedItem);
+  const cardData = useMemo(() => {
+    const { exportedSignals, destinationType } =
+      destination?.item as ActualDestination;
+
+    const monitors = Object.keys(exportedSignals)
+      .map((key) => (exportedSignals[key] === true ? key : null))
+      .filter(Boolean)
+      .join(', ');
+
+    return [
+      { title: 'Destination', value: destinationType.displayName || 'N/A' },
+      {
+        title: 'Monitors',
+        value: monitors,
+      },
+    ];
+  }, [destination]);
+
+  return <CardDetails data={cardData} />;
+};
+
+export { DestinationDrawer };
diff --git a/frontend/webapp/containers/main/destinations/index.tsx b/frontend/webapp/containers/main/destinations/index.tsx
index a50795fd7..4decd49fc 100644
--- a/frontend/webapp/containers/main/destinations/index.tsx
+++ b/frontend/webapp/containers/main/destinations/index.tsx
@@ -1,2 +1,3 @@
 export * from './managed';
 export * from './add-destination';
+export * from './destination-drawer-container';
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index b33a30cdf..fa7d382ac 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -7,6 +7,7 @@ import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
+import { DestinationDrawer } from '../../destinations';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 import {
   WorkloadId,
@@ -18,7 +19,7 @@ import {
 const componentMap = {
   source: SourceDrawer,
   action: () => <div>Action</div>,
-  destination: () => <div>Destination</div>,
+  destination: DestinationDrawer,
 };
 
 const DRAWER_WIDTH = '560px';
@@ -42,6 +43,9 @@ const OverviewDrawer = () => {
     if (selectedItem?.type === 'source' && selectedItem.item) {
       const title = (selectedItem.item as K8sActualSource).reportedName;
       setTitle(title || '');
+    } else if (selectedItem?.type === 'destination' && selectedItem.item) {
+      const title = (selectedItem.item as ActualDestination).name;
+      setTitle(title || '');
     } else {
       setTitle('');
     }

From 1d4e5ffd1aa0afe7f03cbd26a54bf4a23cbf388f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 13 Oct 2024 15:16:23 +0300
Subject: [PATCH 265/374] wip: destintion card details

---
 frontend/graph/generated.go                   | 81 ++-----------------
 frontend/graph/model/destination.go           |  2 +-
 frontend/graph/schema.graphqls                |  2 +-
 frontend/graph/schema.resolvers.go            | 15 ++--
 frontend/services/destinations.go             |  9 ++-
 .../destination-drawer-container/index.tsx    | 79 +++++++++++++++---
 .../graphql/queries/compute-platform.ts       |  2 +
 .../destinations/useActualDestinations.ts     | 24 +++++-
 frontend/webapp/types/destinations.ts         |  5 +-
 9 files changed, 124 insertions(+), 95 deletions(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 9e2dc0ffc..2f64038af 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -216,8 +216,6 @@ type ComputePlatformResolver interface {
 type DestinationResolver interface {
 	Type(ctx context.Context, obj *model.Destination) (string, error)
 
-	Fields(ctx context.Context, obj *model.Destination) ([]string, error)
-
 	Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error)
 }
 type K8sActualNamespaceResolver interface {
@@ -2068,7 +2066,7 @@ func (ec *executionContext) _Destination_fields(ctx context.Context, field graph
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Destination().Fields(rctx, obj)
+		return obj.Fields, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2080,17 +2078,17 @@ func (ec *executionContext) _Destination_fields(ctx context.Context, field graph
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]string)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNString2ᚕstringᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
 func (ec *executionContext) fieldContext_Destination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "Destination",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			return nil, errors.New("field of type String does not have child fields")
 		},
@@ -7939,41 +7937,10 @@ func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionS
 				atomic.AddUint32(&out.Invalids, 1)
 			}
 		case "fields":
-			field := field
-
-			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._Destination_fields(ctx, field, obj)
-				if res == graphql.Null {
-					atomic.AddUint32(&fs.Invalids, 1)
-				}
-				return res
-			}
-
-			if field.Deferrable != nil {
-				dfs, ok := deferred[field.Deferrable.Label]
-				di := 0
-				if ok {
-					dfs.AddField(field)
-					di = len(dfs.Values) - 1
-				} else {
-					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
-					deferred[field.Deferrable.Label] = dfs
-				}
-				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
-					return innerFunc(ctx, dfs)
-				})
-
-				// don't run the out.Concurrently() call below
-				out.Values[i] = graphql.Null
-				continue
+			out.Values[i] = ec._Destination_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
 			}
-
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		case "destinationType":
 			out.Values[i] = ec._Destination_destinationType(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
@@ -10177,38 +10144,6 @@ func (ec *executionContext) marshalNString2string(ctx context.Context, sel ast.S
 	return res
 }
 
-func (ec *executionContext) unmarshalNString2ᚕstringᚄ(ctx context.Context, v interface{}) ([]string, error) {
-	var vSlice []interface{}
-	if v != nil {
-		vSlice = graphql.CoerceList(v)
-	}
-	var err error
-	res := make([]string, len(vSlice))
-	for i := range vSlice {
-		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
-		res[i], err = ec.unmarshalNString2string(ctx, vSlice[i])
-		if err != nil {
-			return nil, err
-		}
-	}
-	return res, nil
-}
-
-func (ec *executionContext) marshalNString2ᚕstringᚄ(ctx context.Context, sel ast.SelectionSet, v []string) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	for i := range v {
-		ret[i] = ec.marshalNString2string(ctx, sel, v[i])
-	}
-
-	for _, e := range ret {
-		if e == graphql.Null {
-			return graphql.Null
-		}
-	}
-
-	return ret
-}
-
 func (ec *executionContext) marshalNSupportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSupportedSignals(ctx context.Context, sel ast.SelectionSet, v model.SupportedSignals) graphql.Marshaler {
 	return ec._SupportedSignals(ctx, sel, &v)
 }
diff --git a/frontend/graph/model/destination.go b/frontend/graph/model/destination.go
index 58a8bea11..5f2890a08 100644
--- a/frontend/graph/model/destination.go
+++ b/frontend/graph/model/destination.go
@@ -42,7 +42,7 @@ type Destination struct {
 	Name            string                       `json:"name"`
 	Type            common.DestinationType       `json:"type"`
 	ExportedSignals ExportedSignals              `json:"signals"`
-	Fields          map[string]string            `json:"fields"`
+	Fields          string                       `json:"fields"`
 	DestinationType DestinationTypesCategoryItem `json:"destination_type"`
 	Conditions      []metav1.Condition           `json:"conditions,omitempty"`
 }
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index a153372ce..959457c4b 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -162,7 +162,7 @@ type Destination {
   name: String!
   type: String!
   exportedSignals: ExportedSignals!
-  fields: [String!]!
+  fields: String!
   destinationType: DestinationTypesCategoryItem!
   conditions: [Condition!]
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 3a8208482..12083d026 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -272,11 +272,6 @@ func (r *destinationResolver) Type(ctx context.Context, obj *model.Destination)
 	panic(fmt.Errorf("not implemented: Type - type"))
 }
 
-// Fields is the resolver for the fields field.
-func (r *destinationResolver) Fields(ctx context.Context, obj *model.Destination) ([]string, error) {
-	panic(fmt.Errorf("not implemented: Fields - fields"))
-}
-
 // Conditions is the resolver for the conditions field.
 func (r *destinationResolver) Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error) {
 	panic(fmt.Errorf("not implemented: Conditions - conditions"))
@@ -553,3 +548,13 @@ type destinationResolver struct{ *Resolver }
 type k8sActualNamespaceResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
+
+// !!! WARNING !!!
+// The code below was going to be deleted when updating resolvers. It has been copied here so you have
+// one last chance to move it out of harms way if you want. There are two reasons this happens:
+//   - When renaming or deleting a resolver the old code will be put in here. You can safely delete
+//     it when you're done.
+//   - You have helper methods in this file. Move them out to keep these resolver files clean.
+func (r *destinationResolver) Fields(ctx context.Context, obj *model.Destination) (string, error) {
+	panic(fmt.Errorf("not implemented: Fields - fields"))
+}
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
index 8a76180d4..79147d89b 100644
--- a/frontend/services/destinations.go
+++ b/frontend/services/destinations.go
@@ -160,6 +160,13 @@ func K8sDestinationToEndpointFormat(k8sDest v1alpha1.Destination, secretFields m
 	mergedFields := mergeDataAndSecrets(k8sDest.Spec.Data, secretFields)
 	destTypeConfig := DestinationTypeConfigToCategoryItem(destinations.GetDestinationByType(string(destType)))
 
+	fieldsJSON, err := json.Marshal(mergedFields)
+	if err != nil {
+		// Handle JSON encoding error
+		fmt.Printf("Error marshaling fields to JSON: %v\n", err)
+		fieldsJSON = []byte("{}") // Set to an empty JSON object in case of error
+	}
+
 	var conditions []metav1.Condition
 	for _, condition := range k8sDest.Status.Conditions {
 		conditions = append(conditions, metav1.Condition{
@@ -179,7 +186,7 @@ func K8sDestinationToEndpointFormat(k8sDest v1alpha1.Destination, secretFields m
 			Metrics: isSignalExported(k8sDest, common.MetricsObservabilitySignal),
 			Logs:    isSignalExported(k8sDest, common.LogsObservabilitySignal),
 		},
-		Fields:          mergedFields,
+		Fields:          string(fieldsJSON),
 		DestinationType: destTypeConfig,
 		Conditions:      conditions,
 	}
diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
index c9f63809c..34b3a2a02 100644
--- a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -1,29 +1,84 @@
 import React, { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
 import { useDrawerStore } from '@/store';
+import { useQuery } from '@apollo/client';
 import { CardDetails } from '@/components';
-import { ActualDestination } from '@/types';
+import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
+import {
+  ActualDestination,
+  isActualDestination,
+  DestinationDetailsResponse,
+} from '@/types';
 
 const DestinationDrawer: React.FC = () => {
   const destination = useDrawerStore(({ selectedItem }) => selectedItem);
+
+  const shouldSkip = !isActualDestination(destination?.item);
+  const destinationType = isActualDestination(destination?.item)
+    ? destination.item.destinationType.type
+    : null;
+
+  const { data: destinationFields, error } =
+    useQuery<DestinationDetailsResponse>(GET_DESTINATION_TYPE_DETAILS, {
+      variables: { type: destinationType },
+      skip: shouldSkip,
+    });
+
   const cardData = useMemo(() => {
-    const { exportedSignals, destinationType } =
-      destination?.item as ActualDestination;
+    if (shouldSkip || !destination?.item || !destinationFields) {
+      return [
+        { title: 'Error', value: 'No destination selected or data missing' },
+      ];
+    }
+
+    const { exportedSignals, destinationType, fields } =
+      destination.item as ActualDestination;
+    const { destinationTypeDetails } = destinationFields;
 
-    const monitors = Object.keys(exportedSignals)
-      .map((key) => (exportedSignals[key] === true ? key : null))
-      .filter(Boolean)
-      .join(', ');
+    const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
+    const destinationFieldData = buildDestinationFieldData(
+      parsedFields,
+      destinationTypeDetails?.fields
+    );
+
+    const monitors = buildMonitorsList(exportedSignals);
 
     return [
       { title: 'Destination', value: destinationType.displayName || 'N/A' },
-      {
-        title: 'Monitors',
-        value: monitors,
-      },
+      { title: 'Monitors', value: monitors || 'None' },
+      ...destinationFieldData,
     ];
-  }, [destination]);
+  }, [shouldSkip, destination, destinationFields]);
+
+  if (error) {
+    console.error('Error fetching destination details:', error);
+    return <p>Error loading destination details</p>;
+  }
 
   return <CardDetails data={cardData} />;
 };
 
 export { DestinationDrawer };
+
+// Helper function to build the destination field data array
+function buildDestinationFieldData(
+  parsedFields: Record<string, string>,
+  fieldDetails?: { name: string; displayName: string }[]
+) {
+  return Object.entries(parsedFields).map(([key, value]) => {
+    const displayName =
+      fieldDetails?.find((field) => field.name === key)?.displayName || key;
+    return { title: displayName, value: value || 'N/A' };
+  });
+}
+
+function buildMonitorsList(
+  exportedSignals: ActualDestination['exportedSignals']
+): string {
+  return (
+    Object.entries(exportedSignals)
+      .filter(([key, isEnabled]) => isEnabled && key !== '__typename')
+      .map(([key]) => key)
+      .join(', ') || 'None'
+  );
+}
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 6c666b2e4..56284daf4 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -24,12 +24,14 @@ export const GET_COMPUTE_PLATFORM = gql`
       destinations {
         id
         name
+        fields
         exportedSignals {
           logs
           metrics
           traces
         }
         destinationType {
+          type
           imageUrl
           displayName
         }
diff --git a/frontend/webapp/hooks/destinations/useActualDestinations.ts b/frontend/webapp/hooks/destinations/useActualDestinations.ts
index 5a01d89b1..ba6ce6f44 100644
--- a/frontend/webapp/hooks/destinations/useActualDestinations.ts
+++ b/frontend/webapp/hooks/destinations/useActualDestinations.ts
@@ -1,9 +1,31 @@
 import { useComputePlatform } from '../compute-platform';
+import { ActualDestination } from '@/types';
+
+// Function to map raw data to the ActualDestination interface
+const mapToActualDestination = (data: any): ActualDestination => ({
+  id: data.id,
+  name: data.name,
+  type: data.type,
+  exportedSignals: data.exportedSignals,
+  fields: data.fields,
+  conditions: data.conditions,
+  destinationType: {
+    type: data.destinationType.type,
+    displayName: data.destinationType.displayName,
+    imageUrl: data.destinationType.imageUrl,
+  },
+});
 
 export const useActualDestination = () => {
   const { data } = useComputePlatform();
 
+  // Use the mapToActualDestination function to transform raw data
+  const destinations =
+    data?.computePlatform.destinations.map((destination: any) =>
+      mapToActualDestination(destination)
+    ) || [];
+
   return {
-    destinations: data?.computePlatform.destinations || [],
+    destinations,
   };
 };
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 540995e71..7fffa9761 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -174,7 +174,7 @@ export interface ActualDestination {
     metrics: boolean;
     logs: boolean;
   };
-  fields: Record<string, any>;
+  fields: string;
   conditions: Condition[];
   destinationType: {
     type: string;
@@ -182,3 +182,6 @@ export interface ActualDestination {
     imageUrl: string;
   };
 }
+
+export const isActualDestination = (item: any): item is ActualDestination =>
+  item && 'destinationType' in item;

From 9e5d25ee5e67423e2bad70eee18e1073fd4d8913 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 14 Oct 2024 11:52:00 +0300
Subject: [PATCH 266/374] chore: get updated destinatoin

---
 .../destinations/destination-form/index.tsx   |  55 ++++++
 .../webapp/components/destinations/index.ts   |   1 +
 .../destination-drawer-container/index.tsx    | 162 +++++++++++++++++-
 .../main/overview/overview-drawer/index.tsx   |  76 +++++---
 .../graphql/queries/compute-platform.ts       |  11 ++
 .../destinations/useActualDestinations.ts     |   1 +
 frontend/webapp/types/destinations.ts         |  19 +-
 7 files changed, 279 insertions(+), 46 deletions(-)
 create mode 100644 frontend/webapp/components/destinations/destination-form/index.tsx

diff --git a/frontend/webapp/components/destinations/destination-form/index.tsx b/frontend/webapp/components/destinations/destination-form/index.tsx
new file mode 100644
index 000000000..909592e25
--- /dev/null
+++ b/frontend/webapp/components/destinations/destination-form/index.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { CheckboxList, Input } from '@/reuseable-components';
+import {
+  DynamicField,
+  ExportedSignals,
+  SupportedDestinationSignals,
+} from '@/types';
+import { DynamicConnectDestinationFormFields } from '@/containers/main/destinations/add-destination/dynamic-form-fields';
+
+interface DestinationFormProps {
+  destinationName: string;
+  dynamicFields: DynamicField[];
+  exportedSignals: ExportedSignals;
+  supportedSignals: SupportedDestinationSignals;
+  setDestinationName: (name: string) => void;
+  handleDynamicFieldChange: (name: string, value: any) => void;
+  handleSignalChange: (signal: keyof ExportedSignals, value: boolean) => void;
+}
+
+export const DestinationForm: React.FC<DestinationFormProps> = ({
+  dynamicFields,
+  destinationName,
+  exportedSignals,
+  supportedSignals,
+  setDestinationName,
+  handleSignalChange,
+  handleDynamicFieldChange,
+}) => {
+  const monitors = [
+    supportedSignals.logs.supported && { id: 'logs', title: 'Logs' },
+    supportedSignals.metrics.supported && { id: 'metrics', title: 'Metrics' },
+    supportedSignals.traces.supported && { id: 'traces', title: 'Traces' },
+  ].filter(Boolean);
+
+  return (
+    <>
+      <Input
+        title="Destination Name"
+        placeholder="Enter destination name"
+        value={destinationName}
+        onChange={(e) => setDestinationName(e.target.value)}
+      />
+      <CheckboxList
+        monitors={monitors as []}
+        title="This connection will monitor:"
+        exportedSignals={exportedSignals}
+        handleSignalChange={handleSignalChange}
+      />
+      <DynamicConnectDestinationFormFields
+        fields={dynamicFields}
+        onChange={handleDynamicFieldChange}
+      />
+    </>
+  );
+};
diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
index e7e4b7330..4ed4159b2 100644
--- a/frontend/webapp/components/destinations/index.ts
+++ b/frontend/webapp/components/destinations/index.ts
@@ -1,2 +1,3 @@
 export * from './add-destination-button';
 export * from './monitors-tap-list';
+export * from './destination-form';
diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
index 34b3a2a02..f9b45a95a 100644
--- a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -1,29 +1,93 @@
-import React, { useMemo } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { safeJsonParse } from '@/utils';
 import { useDrawerStore } from '@/store';
 import { useQuery } from '@apollo/client';
-import { CardDetails } from '@/components';
+import { CardDetails, DestinationForm } from '@/components';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import {
   ActualDestination,
   isActualDestination,
   DestinationDetailsResponse,
+  ExportedSignals,
+  DynamicField,
+  SupportedDestinationSignals,
 } from '@/types';
+import styled from 'styled-components';
+import { useConnectDestinationForm } from '@/hooks';
 
-const DestinationDrawer: React.FC = () => {
-  const destination = useDrawerStore(({ selectedItem }) => selectedItem);
+export type DestinationDrawerHandle = {
+  getCurrentData: () => {
+    name: string;
+    type: string;
+    exportedSignals: ExportedSignals;
+    fields: { key: string; value: any }[];
+  };
+};
+
+interface DestinationDrawerProps {
+  isEditing: boolean;
+}
 
+const DEFAULT_SUPPORTED_SIGNALS = {
+  logs: {
+    supported: false,
+  },
+  metrics: {
+    supported: false,
+  },
+  traces: {
+    supported: false,
+  },
+};
+
+const DestinationDrawer = forwardRef<
+  DestinationDrawerHandle,
+  DestinationDrawerProps
+>(({ isEditing }, ref) => {
+  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
+  const destination = useDrawerStore(({ selectedItem }) => selectedItem);
+  const [destinationName, setDestinationName] = useState<string>('');
+  const [supportedSignals, setSupportedSignals] =
+    useState<SupportedDestinationSignals>(DEFAULT_SUPPORTED_SIGNALS);
+  const [exportedSignals, setExportedSignals] = useState<ExportedSignals>({
+    logs: false,
+    metrics: false,
+    traces: false,
+  });
   const shouldSkip = !isActualDestination(destination?.item);
   const destinationType = isActualDestination(destination?.item)
     ? destination.item.destinationType.type
     : null;
 
+  const { buildFormDynamicFields } = useConnectDestinationForm();
+
   const { data: destinationFields, error } =
     useQuery<DestinationDetailsResponse>(GET_DESTINATION_TYPE_DETAILS, {
       variables: { type: destinationType },
       skip: shouldSkip,
     });
 
+  useImperativeHandle(ref, () => ({
+    getCurrentData: () => {
+      const fields = processFormFields(dynamicFields);
+      const newDestination = {
+        name: destinationName,
+        type: destination?.type || '',
+        exportedSignals,
+        fields,
+      };
+      return newDestination;
+    },
+  }));
+
+  useEffect(initDynamicFields, [destinationFields, destination]);
+
   const cardData = useMemo(() => {
     if (shouldSkip || !destination?.item || !destinationFields) {
       return [
@@ -50,13 +114,68 @@ const DestinationDrawer: React.FC = () => {
     ];
   }, [shouldSkip, destination, destinationFields]);
 
-  if (error) {
-    console.error('Error fetching destination details:', error);
-    return <p>Error loading destination details</p>;
+  function initDynamicFields() {
+    if (destinationFields && destination) {
+      const df = buildFormDynamicFields(
+        destinationFields.destinationTypeDetails.fields
+      );
+
+      const { fields, exportedSignals, name, destinationType } =
+        destination.item as ActualDestination;
+      const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
+      const newDynamicFields = df.map((field) => {
+        if (field?.name in parsedFields) {
+          return {
+            ...field,
+            value:
+              field.componentType === 'dropdown'
+                ? {
+                    id: parsedFields[field.name],
+                    value: parsedFields[field.name],
+                  }
+                : parsedFields[field.name],
+          };
+        }
+        return field;
+      });
+      setDestinationName(name);
+      setExportedSignals(exportedSignals);
+      setDynamicFields(newDynamicFields);
+      setSupportedSignals(destinationType.supportedSignals);
+    }
   }
 
-  return <CardDetails data={cardData} />;
-};
+  function handleSignalChange(signal: string, value: boolean) {
+    setExportedSignals((prev) => ({ ...prev, [signal]: value }));
+  }
+
+  function handleDynamicFieldChange(name: string, value: any) {
+    setDynamicFields((prev) => {
+      return prev.map((field) => {
+        if (field.name === name) {
+          return { ...field, value };
+        }
+        return field;
+      });
+    });
+  }
+
+  return isEditing ? (
+    <FormContainer>
+      <DestinationForm
+        dynamicFields={dynamicFields}
+        destinationName={destinationName}
+        exportedSignals={exportedSignals}
+        supportedSignals={supportedSignals}
+        setDestinationName={setDestinationName}
+        handleSignalChange={handleSignalChange}
+        handleDynamicFieldChange={handleDynamicFieldChange}
+      />
+    </FormContainer>
+  ) : (
+    <CardDetails data={cardData} />
+  );
+});
 
 export { DestinationDrawer };
 
@@ -82,3 +201,28 @@ function buildMonitorsList(
       .join(', ') || 'None'
   );
 }
+
+function processFormFields(dynamicFields) {
+  function processFieldValue(field) {
+    return field.componentType === 'dropdown' ? field.value.value : field.value;
+  }
+
+  // Prepare fields for the request body
+  return dynamicFields.map((field) => ({
+    key: field.name,
+    value: processFieldValue(field),
+  }));
+}
+
+const FormContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 24px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: overlay;
+  max-height: calc(100vh - 220px);
+`;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index fa7d382ac..1262b776c 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -7,7 +7,7 @@ import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
-import { DestinationDrawer } from '../../destinations';
+import { DestinationDrawer, DestinationDrawerHandle } from '../../destinations';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 import {
   WorkloadId,
@@ -19,7 +19,9 @@ import {
 const componentMap = {
   source: SourceDrawer,
   action: () => <div>Action</div>,
-  destination: DestinationDrawer,
+  destination: (props: { isEditing: boolean }) => (
+    <DestinationDrawer isEditing={props.isEditing} />
+  ),
 };
 
 const DRAWER_WIDTH = '560px';
@@ -36,7 +38,7 @@ const OverviewDrawer = () => {
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
 
   const titleRef = useRef<HTMLInputElement>(null);
-
+  const destinationDrawerRef = useRef<DestinationDrawerHandle>(null);
   useEffect(initialTitle, [selectedItem]);
 
   function initialTitle() {
@@ -52,31 +54,52 @@ const OverviewDrawer = () => {
   }
 
   const handleSave = async () => {
-    if (titleRef.current) {
-      const newTitle = titleRef.current.value;
-      setTitle(newTitle);
-      if (selectedItem?.type === 'source' && selectedItem.item) {
-        const sourceItem = selectedItem.item as K8sActualSource;
-
-        const sourceId: WorkloadId = {
-          namespace: sourceItem.namespace,
-          kind: sourceItem.kind,
-          name: sourceItem.name,
-        };
-
-        const patchRequest: PatchSourceRequestInput = {
-          reportedName: newTitle,
+    if (selectedItem?.type === 'destination') {
+      if (destinationDrawerRef.current && titleRef.current) {
+        const name = titleRef.current.value;
+        const destinationData = {
+          ...destinationDrawerRef.current.getCurrentData(),
+          name,
         };
 
+        console.log({ id: selectedItem.id, destinationData });
         try {
-          await updateActualSource(sourceId, patchRequest);
+          // Replace this with your actual save logic
+          // await updateDestination(destinationData);
         } catch (error) {
-          console.error('Error updating source:', error);
+          console.error('Error updating destination:', error);
           // Optionally show error message to user
         }
       }
     }
-    setIsEditing(false);
+
+    if (selectedItem?.type === 'source') {
+      if (titleRef.current) {
+        const newTitle = titleRef.current.value;
+        setTitle(newTitle);
+        if (selectedItem?.type === 'source' && selectedItem.item) {
+          const sourceItem = selectedItem.item as K8sActualSource;
+
+          const sourceId: WorkloadId = {
+            namespace: sourceItem.namespace,
+            kind: sourceItem.kind,
+            name: sourceItem.name,
+          };
+
+          const patchRequest: PatchSourceRequestInput = {
+            reportedName: newTitle,
+          };
+
+          try {
+            await updateActualSource(sourceId, patchRequest);
+          } catch (error) {
+            console.error('Error updating source:', error);
+            // Optionally show error message to user
+          }
+        }
+      }
+      setIsEditing(false);
+    }
   };
 
   const handleCancel = () => {
@@ -129,14 +152,21 @@ const OverviewDrawer = () => {
           <DrawerHeader
             ref={titleRef}
             title={title}
-            onClose={isEditing ? handleCancel : handleClose}
+            onClose={handleClose}
             imageUri={
-              selectedItem?.item ? getItemImageByType(selectedItem.item) : ''
+              selectedItem?.item ? getItemImageByType(selectedItem?.item) : ''
             }
             {...{ isEditing, setIsEditing }}
           />
           <ContentArea>
-            <SpecificComponent />
+            {selectedItem.type === 'destination' ? (
+              <DestinationDrawer
+                ref={destinationDrawerRef} // Pass the ref to DestinationDrawer
+                isEditing={isEditing}
+              />
+            ) : (
+              <SpecificComponent isEditing={isEditing} />
+            )}
           </ContentArea>
           {isEditing && (
             <>
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 56284daf4..b833920f4 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -34,6 +34,17 @@ export const GET_COMPUTE_PLATFORM = gql`
           type
           imageUrl
           displayName
+          supportedSignals {
+            logs {
+              supported
+            }
+            metrics {
+              supported
+            }
+            traces {
+              supported
+            }
+          }
         }
       }
       actions {
diff --git a/frontend/webapp/hooks/destinations/useActualDestinations.ts b/frontend/webapp/hooks/destinations/useActualDestinations.ts
index ba6ce6f44..0cdf41d05 100644
--- a/frontend/webapp/hooks/destinations/useActualDestinations.ts
+++ b/frontend/webapp/hooks/destinations/useActualDestinations.ts
@@ -13,6 +13,7 @@ const mapToActualDestination = (data: any): ActualDestination => ({
     type: data.destinationType.type,
     displayName: data.destinationType.displayName,
     imageUrl: data.destinationType.imageUrl,
+    supportedSignals: data.destinationType.supportedSignals,
   },
 });
 
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 7fffa9761..0d1f3dd97 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -104,7 +104,7 @@ interface SupportedSignal {
   supported: boolean;
 }
 
-interface SupportedSignals {
+export interface SupportedDestinationSignals {
   traces: SupportedSignal;
   metrics: SupportedSignal;
   logs: SupportedSignal;
@@ -114,7 +114,7 @@ export interface SelectedDestination {
   type: string;
   display_name: string;
   image_url: string;
-  supported_signals: SupportedSignals;
+  supported_signals: SupportedDestinationSignals;
   test_connection_supported: boolean;
 }
 
@@ -133,17 +133,7 @@ export interface Destination {
     type: string;
     display_name: string;
     image_url: string;
-    supported_signals: {
-      traces: {
-        supported: boolean;
-      };
-      metrics: {
-        supported: boolean;
-      };
-      logs: {
-        supported: boolean;
-      };
-    };
+    supported_signals: SupportedDestinationSignals;
   };
 }
 
@@ -159,7 +149,7 @@ export interface Field {
 export interface DestinationConfig {
   type: string;
   name: string;
-  signals: SupportedSignals;
+  signals: SupportedDestinationSignals;
   fields: {
     [key: string]: string;
   };
@@ -180,6 +170,7 @@ export interface ActualDestination {
     type: string;
     displayName: string;
     imageUrl: string;
+    supportedSignals: SupportedDestinationSignals;
   };
 }
 

From 18be9971a61fa03da38b646626a7d29d80185c54 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 14 Oct 2024 13:41:31 +0300
Subject: [PATCH 267/374] wip : updated destinatoin

---
 frontend/endpoints/destinations.go            |   3 +-
 frontend/graph/generated.go                   | 116 ++++++++++++++++++
 frontend/graph/schema.graphqls                |   1 +
 frontend/graph/schema.resolvers.go            | 115 +++++++++++++++--
 .../destination-drawer-container/index.tsx    |  21 ++--
 .../main/overview/overview-drawer/index.tsx   |  15 ++-
 .../webapp/graphql/mutations/destination.ts   |  31 +++++
 frontend/webapp/hooks/destinations/index.ts   |   1 +
 .../destinations/useUpdateDestination.ts      |  26 ++++
 9 files changed, 306 insertions(+), 23 deletions(-)
 create mode 100644 frontend/webapp/hooks/destinations/useUpdateDestination.ts

diff --git a/frontend/endpoints/destinations.go b/frontend/endpoints/destinations.go
index 6eb900f2b..0be797fb8 100644
--- a/frontend/endpoints/destinations.go
+++ b/frontend/endpoints/destinations.go
@@ -4,9 +4,10 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"net/http"
+
 	"github.com/odigos-io/odigos/frontend/endpoints/destination_recognition"
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
-	"net/http"
 
 	"github.com/gin-gonic/gin"
 	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 2f64038af..024d98918 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -170,6 +170,7 @@ type ComplexityRoot struct {
 		PersistK8sNamespace          func(childComplexity int, namespace model.PersistNamespaceItemInput) int
 		PersistK8sSources            func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
 		TestConnectionForDestination func(childComplexity int, destination model.DestinationInput) int
+		UpdateDestination            func(childComplexity int, id string, destination model.DestinationInput) int
 		UpdateK8sActualSource        func(childComplexity int, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) int
 	}
 
@@ -227,6 +228,7 @@ type MutationResolver interface {
 	PersistK8sSources(ctx context.Context, namespace string, sources []*model.PersistNamespaceSourceInput) (bool, error)
 	TestConnectionForDestination(ctx context.Context, destination model.DestinationInput) (*model.TestConnectionResponse, error)
 	UpdateK8sActualSource(ctx context.Context, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) (bool, error)
+	UpdateDestination(ctx context.Context, id string, destination model.DestinationInput) (*model.Destination, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
@@ -766,6 +768,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.TestConnectionForDestination(childComplexity, args["destination"].(model.DestinationInput)), true
 
+	case "Mutation.updateDestination":
+		if e.complexity.Mutation.UpdateDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_updateDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.UpdateDestination(childComplexity, args["id"].(string), args["destination"].(model.DestinationInput)), true
+
 	case "Mutation.updateK8sActualSource":
 		if e.complexity.Mutation.UpdateK8sActualSource == nil {
 			break
@@ -1161,6 +1175,30 @@ func (ec *executionContext) field_Mutation_testConnectionForDestination_args(ctx
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_updateDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["id"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("id"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["id"] = arg0
+	var arg1 model.DestinationInput
+	if tmp, ok := rawArgs["destination"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
+		arg1, err = ec.unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destination"] = arg1
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_updateK8sActualSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -4569,6 +4607,77 @@ func (ec *executionContext) fieldContext_Mutation_updateK8sActualSource(ctx cont
 	return fc, nil
 }
 
+func (ec *executionContext) _Mutation_updateDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateDestination(rctx, fc.Args["id"].(string), fc.Args["destination"].(model.DestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Context, field graphql.CollectedField, obj *model.ObservabilitySignalSupport) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
 	if err != nil {
@@ -8758,6 +8867,13 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "updateDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_updateDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 959457c4b..666582cb9 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -260,4 +260,5 @@ type Mutation {
     sourceId: K8sSourceId!
     patchSourceRequest: PatchSourceRequestInput!
   ): Boolean!
+  updateDestination(id: ID!, destination: DestinationInput!): Destination!
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 12083d026..9fbfff584 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -448,6 +448,111 @@ func (r *mutationResolver) UpdateK8sActualSource(ctx context.Context, sourceID m
 	return true, nil
 }
 
+// UpdateDestination is the resolver for the updateDestination field.
+func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, input model.DestinationInput) (*model.Destination, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	destType := common.DestinationType(input.Type)
+	destName := input.Name
+
+	// Get the destination type configuration
+	destTypeConfig, err := services.GetDestinationTypeConfig(destType)
+	if err != nil {
+		return nil, fmt.Errorf("destination type %s not found: %v", destType, err)
+	}
+
+	// Convert fields from input to map[string]string
+	fields := make(map[string]string)
+	for _, field := range input.Fields {
+		fields[field.Key] = field.Value
+	}
+
+	// Validate the destination data schema
+	validationErrors := services.VerifyDestinationDataScheme(destType, destTypeConfig, fields)
+	if len(validationErrors) > 0 {
+		var errMsg string
+		for _, e := range validationErrors {
+			errMsg += e.Error() + "; "
+		}
+		return nil, fmt.Errorf("validation errors: %s", errMsg)
+	}
+
+	// Separate data fields and secret fields
+	dataFields, secretFields := services.TransformFieldsToDataAndSecrets(destTypeConfig, fields)
+
+	// Retrieve the existing destination
+	dest, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to get destination: %v", err)
+	}
+
+	// Handle secrets
+	destUpdateHasSecrets := len(secretFields) > 0
+	destCurrentlyHasSecrets := dest.Spec.SecretRef != nil
+
+	if !destUpdateHasSecrets && destCurrentlyHasSecrets {
+		// Delete the secret if it's not needed anymore
+		err := kube.DefaultClient.CoreV1().Secrets(odigosns).Delete(ctx, dest.Spec.SecretRef.Name, metav1.DeleteOptions{})
+		if err != nil {
+			return nil, fmt.Errorf("failed to delete secret: %v", err)
+		}
+		dest.Spec.SecretRef = nil
+	} else if destUpdateHasSecrets && !destCurrentlyHasSecrets {
+		// Create the secret if it was added in this update
+		secretRef, err := services.CreateDestinationSecret(ctx, destType, secretFields, odigosns)
+		if err != nil {
+			return nil, fmt.Errorf("failed to create secret: %v", err)
+		}
+		dest.Spec.SecretRef = secretRef
+		// Add owner reference to the secret
+		err = services.AddDestinationOwnerReferenceToSecret(ctx, odigosns, dest)
+		if err != nil {
+			return nil, fmt.Errorf("failed to add owner reference to secret: %v", err)
+		}
+	} else if destUpdateHasSecrets && destCurrentlyHasSecrets {
+		// Update the secret in case it is modified
+		secret, err := kube.DefaultClient.CoreV1().Secrets(odigosns).Get(ctx, dest.Spec.SecretRef.Name, metav1.GetOptions{})
+		if err != nil {
+			return nil, fmt.Errorf("failed to get secret: %v", err)
+		}
+		origSecret := secret.DeepCopy()
+
+		secret.StringData = secretFields
+		_, err = kube.DefaultClient.CoreV1().Secrets(odigosns).Update(ctx, secret, metav1.UpdateOptions{})
+		if err != nil {
+			// Rollback secret if needed
+			_, rollbackErr := kube.DefaultClient.CoreV1().Secrets(odigosns).Update(ctx, origSecret, metav1.UpdateOptions{})
+			if rollbackErr != nil {
+				fmt.Printf("Failed to rollback secret: %v\n", rollbackErr)
+			}
+			return nil, fmt.Errorf("failed to update secret: %v", err)
+		}
+	}
+
+	// Update the destination specification
+	dest.Spec.Type = destType
+	dest.Spec.DestinationName = destName
+	dest.Spec.Data = dataFields
+	dest.Spec.Signals = services.ExportedSignalsObjectToSlice(input.ExportedSignals)
+
+	// Update the destination in Kubernetes
+	updatedDest, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).Update(ctx, dest, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update destination: %v", err)
+	}
+
+	// Get the secret fields for the updated destination
+	secretFields, err = services.GetDestinationSecretFields(ctx, odigosns, updatedDest)
+	if err != nil {
+		return nil, fmt.Errorf("failed to get secret fields: %v", err)
+	}
+
+	// Convert the updated destination to the GraphQL model
+	resp := services.K8sDestinationToEndpointFormat(*updatedDest, secretFields)
+
+	return &resp, nil
+}
+
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
 	return &model.ComputePlatform{
@@ -548,13 +653,3 @@ type destinationResolver struct{ *Resolver }
 type k8sActualNamespaceResolver struct{ *Resolver }
 type mutationResolver struct{ *Resolver }
 type queryResolver struct{ *Resolver }
-
-// !!! WARNING !!!
-// The code below was going to be deleted when updating resolvers. It has been copied here so you have
-// one last chance to move it out of harms way if you want. There are two reasons this happens:
-//   - When renaming or deleting a resolver the old code will be put in here. You can safely delete
-//     it when you're done.
-//   - You have helper methods in this file. Move them out to keep these resolver files clean.
-func (r *destinationResolver) Fields(ctx context.Context, obj *model.Destination) (string, error) {
-	panic(fmt.Errorf("not implemented: Fields - fields"))
-}
diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
index f9b45a95a..24e503344 100644
--- a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -5,21 +5,21 @@ import React, {
   useMemo,
   useState,
 } from 'react';
+import styled from 'styled-components';
 import { safeJsonParse } from '@/utils';
 import { useDrawerStore } from '@/store';
 import { useQuery } from '@apollo/client';
-import { CardDetails, DestinationForm } from '@/components';
+import { useConnectDestinationForm } from '@/hooks';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
+import { CardDetails, DestinationForm } from '@/components';
 import {
+  DynamicField,
+  ExportedSignals,
   ActualDestination,
   isActualDestination,
   DestinationDetailsResponse,
-  ExportedSignals,
-  DynamicField,
   SupportedDestinationSignals,
 } from '@/types';
-import styled from 'styled-components';
-import { useConnectDestinationForm } from '@/hooks';
 
 export type DestinationDrawerHandle = {
   getCurrentData: () => {
@@ -67,18 +67,21 @@ const DestinationDrawer = forwardRef<
 
   const { buildFormDynamicFields } = useConnectDestinationForm();
 
-  const { data: destinationFields, error } =
-    useQuery<DestinationDetailsResponse>(GET_DESTINATION_TYPE_DETAILS, {
+  const { data: destinationFields } = useQuery<DestinationDetailsResponse>(
+    GET_DESTINATION_TYPE_DETAILS,
+    {
       variables: { type: destinationType },
       skip: shouldSkip,
-    });
+    }
+  );
 
   useImperativeHandle(ref, () => ({
     getCurrentData: () => {
       const fields = processFormFields(dynamicFields);
+      const { destinationType } = destination?.item as ActualDestination;
       const newDestination = {
         name: destinationName,
-        type: destination?.type || '',
+        type: destinationType?.type || '',
         exportedSignals,
         fields,
       };
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 1262b776c..e422a0749 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { useActualSources } from '@/hooks';
 import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
+import { useActualSources, useUpdateDestination } from '@/hooks';
 import { DestinationDrawer, DestinationDrawerHandle } from '../../destinations';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 import {
@@ -35,8 +35,8 @@ const OverviewDrawer = () => {
   const [title, setTitle] = useState(selectedItem?.item?.name || '');
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
+  const { updateExistingDestination } = useUpdateDestination();
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
-
   const titleRef = useRef<HTMLInputElement>(null);
   const destinationDrawerRef = useRef<DestinationDrawerHandle>(null);
   useEffect(initialTitle, [selectedItem]);
@@ -61,8 +61,16 @@ const OverviewDrawer = () => {
           ...destinationDrawerRef.current.getCurrentData(),
           name,
         };
+        try {
+          const res = await updateExistingDestination(
+            selectedItem.id as string,
+            destinationData
+          );
+          console.log({ res });
+        } catch (error) {
+          console.error('Error updating destination:', error);
+        }
 
-        console.log({ id: selectedItem.id, destinationData });
         try {
           // Replace this with your actual save logic
           // await updateDestination(destinationData);
@@ -70,6 +78,7 @@ const OverviewDrawer = () => {
           console.error('Error updating destination:', error);
           // Optionally show error message to user
         }
+        setIsEditing(false);
       }
     }
 
diff --git a/frontend/webapp/graphql/mutations/destination.ts b/frontend/webapp/graphql/mutations/destination.ts
index 1c0f4ae01..cdce52cfa 100644
--- a/frontend/webapp/graphql/mutations/destination.ts
+++ b/frontend/webapp/graphql/mutations/destination.ts
@@ -19,3 +19,34 @@ export const TEST_CONNECTION_MUTATION = gql`
     }
   }
 `;
+
+export const UPDATE_DESTINATION = gql`
+  mutation UpdateDestination($id: ID!, $destination: DestinationInput!) {
+    updateDestination(id: $id, destination: $destination) {
+      id
+      name
+      exportedSignals {
+        traces
+        metrics
+        logs
+      }
+      fields
+      destinationType {
+        type
+        displayName
+        imageUrl
+        supportedSignals {
+          traces {
+            supported
+          }
+          metrics {
+            supported
+          }
+          logs {
+            supported
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index 11b11a37a..dba0d3a20 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -4,3 +4,4 @@ export * from './useConnectDestinationForm';
 export * from './useCreateDestination';
 export * from './usePotentialDestinations';
 export * from './useActualDestinations';
+export * from './useUpdateDestination';
diff --git a/frontend/webapp/hooks/destinations/useUpdateDestination.ts b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
new file mode 100644
index 000000000..81b910001
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
@@ -0,0 +1,26 @@
+// src/hooks/useUpdateDestination.ts
+
+import { UPDATE_DESTINATION } from '@/graphql';
+import { DestinationInput } from '@/types';
+import { useMutation } from '@apollo/client';
+
+export function useUpdateDestination() {
+  const [updateDestinationMutation] = useMutation(UPDATE_DESTINATION);
+
+  async function updateExistingDestination(
+    id: string,
+    destination: DestinationInput
+  ) {
+    try {
+      const { data } = await updateDestinationMutation({
+        variables: { id, destination },
+      });
+      return data?.updateDestination?.id;
+    } catch (error) {
+      console.error('Error updating destination:', error);
+      throw error;
+    }
+  }
+
+  return { updateExistingDestination };
+}

From 80135c1de4e90a8e2c0ca26d038cd9c7819b57e3 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 14 Oct 2024 13:46:10 +0300
Subject: [PATCH 268/374] chore: update current item

---
 .../containers/main/overview/overview-drawer/index.tsx     | 2 +-
 frontend/webapp/hooks/destinations/useUpdateDestination.ts | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index e422a0749..416afb4ea 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -170,7 +170,7 @@ const OverviewDrawer = () => {
           <ContentArea>
             {selectedItem.type === 'destination' ? (
               <DestinationDrawer
-                ref={destinationDrawerRef} // Pass the ref to DestinationDrawer
+                ref={destinationDrawerRef}
                 isEditing={isEditing}
               />
             ) : (
diff --git a/frontend/webapp/hooks/destinations/useUpdateDestination.ts b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
index 81b910001..d060dc42e 100644
--- a/frontend/webapp/hooks/destinations/useUpdateDestination.ts
+++ b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
@@ -1,12 +1,17 @@
 // src/hooks/useUpdateDestination.ts
 
 import { UPDATE_DESTINATION } from '@/graphql';
+import { useDrawerStore } from '@/store';
 import { DestinationInput } from '@/types';
 import { useMutation } from '@apollo/client';
 
 export function useUpdateDestination() {
   const [updateDestinationMutation] = useMutation(UPDATE_DESTINATION);
 
+  const setDrawerItem = useDrawerStore(
+    ({ setSelectedItem }) => setSelectedItem
+  );
+
   async function updateExistingDestination(
     id: string,
     destination: DestinationInput
@@ -15,6 +20,8 @@ export function useUpdateDestination() {
       const { data } = await updateDestinationMutation({
         variables: { id, destination },
       });
+      setDrawerItem({ id, item: data?.updateDestination, type: 'destination' });
+      console.log({ data });
       return data?.updateDestination?.id;
     } catch (error) {
       console.error('Error updating destination:', error);

From f39d37e0bd50119ff2dd7439955320898123f9b6 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 14 Oct 2024 15:21:19 +0300
Subject: [PATCH 269/374] wip: split code to chunks

---
 .../destinations/destination-form/index.tsx   |  16 +-
 .../connection-notification.tsx               |  30 +++
 .../form-container.tsx                        |  50 +++++
 .../connect-destination-modal-body/index.tsx  | 123 +++--------
 .../destination-drawer-container/index.tsx    | 204 +++---------------
 frontend/webapp/hooks/destinations/index.ts   |   2 +
 .../destinations/useDestinationFormData.ts    | 120 +++++++++++
 .../useEditDestinationFormHandlers.ts         |  22 ++
 8 files changed, 284 insertions(+), 283 deletions(-)
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
 create mode 100644 frontend/webapp/hooks/destinations/useDestinationFormData.ts
 create mode 100644 frontend/webapp/hooks/destinations/useEditDestinationFormHandlers.ts

diff --git a/frontend/webapp/components/destinations/destination-form/index.tsx b/frontend/webapp/components/destinations/destination-form/index.tsx
index 909592e25..8388edb97 100644
--- a/frontend/webapp/components/destinations/destination-form/index.tsx
+++ b/frontend/webapp/components/destinations/destination-form/index.tsx
@@ -1,28 +1,24 @@
 import React from 'react';
-import { CheckboxList, Input } from '@/reuseable-components';
+import { CheckboxList } from '@/reuseable-components';
+import { DynamicConnectDestinationFormFields } from '@/containers/main/destinations/add-destination/dynamic-form-fields';
 import {
   DynamicField,
   ExportedSignals,
   SupportedDestinationSignals,
 } from '@/types';
-import { DynamicConnectDestinationFormFields } from '@/containers/main/destinations/add-destination/dynamic-form-fields';
 
 interface DestinationFormProps {
-  destinationName: string;
   dynamicFields: DynamicField[];
   exportedSignals: ExportedSignals;
   supportedSignals: SupportedDestinationSignals;
-  setDestinationName: (name: string) => void;
   handleDynamicFieldChange: (name: string, value: any) => void;
   handleSignalChange: (signal: keyof ExportedSignals, value: boolean) => void;
 }
 
-export const DestinationForm: React.FC<DestinationFormProps> = ({
+export const EditDestinationForm: React.FC<DestinationFormProps> = ({
   dynamicFields,
-  destinationName,
   exportedSignals,
   supportedSignals,
-  setDestinationName,
   handleSignalChange,
   handleDynamicFieldChange,
 }) => {
@@ -34,12 +30,6 @@ export const DestinationForm: React.FC<DestinationFormProps> = ({
 
   return (
     <>
-      <Input
-        title="Destination Name"
-        placeholder="Enter destination name"
-        value={destinationName}
-        onChange={(e) => setDestinationName(e.target.value)}
-      />
       <CheckboxList
         monitors={monitors as []}
         title="This connection will monitor:"
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
new file mode 100644
index 000000000..7cfbac089
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
@@ -0,0 +1,30 @@
+import { NotificationNote } from '@/reuseable-components';
+import styled from 'styled-components';
+
+export const ConnectionNotification = ({
+  showConnectionError,
+  destination,
+}) => (
+  <>
+    {showConnectionError && (
+      <NotificationNoteWrapper>
+        <NotificationNote
+          type="error"
+          text="Connection failed. Please check your input and try again."
+        />
+      </NotificationNoteWrapper>
+    )}
+    {destination?.fields && !showConnectionError && (
+      <NotificationNoteWrapper>
+        <NotificationNote
+          type="info"
+          text={`Odigos autocompleted ${destination.displayName} connection details.`}
+        />
+      </NotificationNoteWrapper>
+    )}
+  </>
+);
+
+const NotificationNoteWrapper = styled.div`
+  margin-top: 24px;
+`;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
new file mode 100644
index 000000000..71bd10c1b
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { CheckboxList, Input } from '@/reuseable-components';
+import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
+
+export const FormContainer = ({
+  monitors,
+  dynamicFields,
+  exportedSignals,
+  destinationName,
+  handleDynamicFieldChange,
+  handleSignalChange,
+  setDestinationName,
+}) => (
+  <StyledFormContainer>
+    <CheckboxList
+      monitors={monitors}
+      title="This connection will monitor:"
+      exportedSignals={exportedSignals}
+      handleSignalChange={handleSignalChange}
+    />
+    <Input
+      title="Destination name"
+      placeholder="Enter destination name"
+      value={destinationName}
+      onChange={(e) => setDestinationName(e.target.value)}
+    />
+    <DynamicConnectDestinationFormFields
+      fields={dynamicFields}
+      onChange={handleDynamicFieldChange}
+    />
+  </StyledFormContainer>
+);
+
+const StyledFormContainer = styled.div`
+  display: flex;
+  width: 100%;
+  max-width: 500px;
+  flex-direction: column;
+  gap: 24px;
+  height: 443px;
+  overflow-y: auto;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: overlay;
+  max-height: calc(100vh - 410px);
+
+  @media (height < 768px) {
+    max-height: calc(100vh - 350px);
+  }
+`;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 118c46744..0989e7173 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,29 +1,26 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useAppStore } from '@/store';
-import styled from 'styled-components';
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
+import { FormContainer } from './form-container';
 import { TestConnection } from '../test-connection';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { Body, Container, SideMenuWrapper } from '../styled';
-import { useConnectDestinationForm, useConnectEnv } from '@/hooks';
-import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
+import { Divider, SectionTitle } from '@/reuseable-components';
+import { ConnectionNotification } from './connection-notification';
+import {
+  useConnectDestinationForm,
+  useConnectEnv,
+  useDestinationFormData,
+  useEditDestinationFormHandlers,
+} from '@/hooks';
 import {
   StepProps,
-  DynamicField,
-  ExportedSignals,
   DestinationInput,
   DestinationTypeItem,
   DestinationDetailsResponse,
   ConfiguredDestination,
 } from '@/types';
-import {
-  CheckboxList,
-  Divider,
-  Input,
-  NotificationNote,
-  SectionTitle,
-} from '@/reuseable-components';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -38,28 +35,6 @@ const SIDE_MENU_DATA: StepProps[] = [
   },
 ];
 
-const FormContainer = styled.div`
-  display: flex;
-  width: 100%;
-  max-width: 500px;
-  flex-direction: column;
-  gap: 24px;
-  height: 443px;
-  overflow-y: auto;
-  padding-right: 16px;
-  box-sizing: border-box;
-  overflow: overlay;
-  max-height: calc(100vh - 410px);
-
-  @media (height < 768px) {
-    max-height: calc(100vh - 350px);
-  }
-`;
-
-const NotificationNoteWrapper = styled.div`
-  margin-top: 24px;
-`;
-
 interface ConnectDestinationModalBodyProps {
   destination: DestinationTypeItem | undefined;
   onSubmitRef: React.MutableRefObject<(() => void) | null>;
@@ -73,15 +48,18 @@ export function ConnectDestinationModalBody({
 }: ConnectDestinationModalBodyProps) {
   const [destinationName, setDestinationName] = useState<string>('');
   const [showConnectionError, setShowConnectionError] = useState(false);
-  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
-  const [exportedSignals, setExportedSignals] = useState<ExportedSignals>({
-    logs: false,
-    metrics: false,
-    traces: false,
-  });
+
+  const {
+    dynamicFields,
+    exportedSignals,
+    setExportedSignals,
+    setDynamicFields,
+  } = useDestinationFormData();
 
   const { connectEnv } = useConnectEnv();
   const { buildFormDynamicFields } = useConnectDestinationForm();
+  const { handleDynamicFieldChange, handleSignalChange } =
+    useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
   const addConfiguredDestination = useAppStore(
     ({ addConfiguredDestination }) => addConfiguredDestination
   );
@@ -96,7 +74,6 @@ export function ConnectDestinationModalBody({
 
   const monitors = useMemo(() => {
     if (!destination) return [];
-
     const { logs, metrics, traces } = destination.supportedSignals;
 
     setExportedSignals({
@@ -143,20 +120,9 @@ export function ConnectDestinationModalBody({
     onFormValidChange(isFormValid);
   }, [dynamicFields]);
 
-  function handleDynamicFieldChange(name: string, value: any) {
+  function onDynamicFieldChange(name: string, value: any) {
     setShowConnectionError(false);
-    setDynamicFields((prev) => {
-      return prev.map((field) => {
-        if (field.name === name) {
-          return { ...field, value };
-        }
-        return field;
-      });
-    });
-  }
-
-  function handleSignalChange(signal: string, value: boolean) {
-    setExportedSignals((prev) => ({ ...prev, [signal]: value }));
+    handleDynamicFieldChange(name, value);
   }
 
   function processFormFields() {
@@ -259,43 +225,20 @@ export function ConnectDestinationModalBody({
             )
           }
         />
-        {showConnectionError && (
-          <NotificationNoteWrapper>
-            <NotificationNote
-              type="error"
-              text={
-                'Connection failed. Please check your input and try once again.'
-              }
-            />
-          </NotificationNoteWrapper>
-        )}
-        {destination.fields && !showConnectionError && (
-          <NotificationNoteWrapper>
-            <NotificationNote
-              type="info"
-              text={`Odigos autocompleted ${destination.displayName} connection details.`}
-            />
-          </NotificationNoteWrapper>
-        )}
+        <ConnectionNotification
+          showConnectionError={showConnectionError}
+          destination={destination}
+        />
         <Divider margin="24px 0" />
-        <FormContainer>
-          <CheckboxList
-            monitors={monitors as []}
-            title="This connection will monitor:"
-            exportedSignals={exportedSignals}
-            handleSignalChange={handleSignalChange}
-          />
-          <Input
-            title="Destination name"
-            placeholder="Enter destination name"
-            value={destinationName}
-            onChange={(e) => setDestinationName(e.target.value)}
-          />
-          <DynamicConnectDestinationFormFields
-            fields={dynamicFields}
-            onChange={handleDynamicFieldChange}
-          />
-        </FormContainer>
+        <FormContainer
+          monitors={monitors}
+          dynamicFields={dynamicFields}
+          exportedSignals={exportedSignals}
+          destinationName={destinationName}
+          handleDynamicFieldChange={onDynamicFieldChange}
+          handleSignalChange={handleSignalChange}
+          setDestinationName={setDestinationName}
+        />
       </Body>
     </Container>
   );
diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
index 24e503344..914f40714 100644
--- a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -1,29 +1,14 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
-import { safeJsonParse } from '@/utils';
-import { useDrawerStore } from '@/store';
-import { useQuery } from '@apollo/client';
-import { useConnectDestinationForm } from '@/hooks';
-import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
-import { CardDetails, DestinationForm } from '@/components';
+import { ExportedSignals } from '@/types';
+import { CardDetails, EditDestinationForm } from '@/components';
 import {
-  DynamicField,
-  ExportedSignals,
-  ActualDestination,
-  isActualDestination,
-  DestinationDetailsResponse,
-  SupportedDestinationSignals,
-} from '@/types';
+  useDestinationFormData,
+  useEditDestinationFormHandlers,
+} from '@/hooks';
 
 export type DestinationDrawerHandle = {
   getCurrentData: () => {
-    name: string;
     type: string;
     exportedSignals: ExportedSignals;
     fields: { key: string; value: any }[];
@@ -34,143 +19,37 @@ interface DestinationDrawerProps {
   isEditing: boolean;
 }
 
-const DEFAULT_SUPPORTED_SIGNALS = {
-  logs: {
-    supported: false,
-  },
-  metrics: {
-    supported: false,
-  },
-  traces: {
-    supported: false,
-  },
-};
-
 const DestinationDrawer = forwardRef<
   DestinationDrawerHandle,
   DestinationDrawerProps
 >(({ isEditing }, ref) => {
-  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
-  const destination = useDrawerStore(({ selectedItem }) => selectedItem);
-  const [destinationName, setDestinationName] = useState<string>('');
-  const [supportedSignals, setSupportedSignals] =
-    useState<SupportedDestinationSignals>(DEFAULT_SUPPORTED_SIGNALS);
-  const [exportedSignals, setExportedSignals] = useState<ExportedSignals>({
-    logs: false,
-    metrics: false,
-    traces: false,
-  });
-  const shouldSkip = !isActualDestination(destination?.item);
-  const destinationType = isActualDestination(destination?.item)
-    ? destination.item.destinationType.type
-    : null;
-
-  const { buildFormDynamicFields } = useConnectDestinationForm();
-
-  const { data: destinationFields } = useQuery<DestinationDetailsResponse>(
-    GET_DESTINATION_TYPE_DETAILS,
-    {
-      variables: { type: destinationType },
-      skip: shouldSkip,
-    }
-  );
+  const {
+    cardData,
+    dynamicFields,
+    exportedSignals,
+    supportedSignals,
+    destinationType,
+    setDynamicFields,
+    setExportedSignals,
+  } = useDestinationFormData();
+
+  const { handleSignalChange, handleDynamicFieldChange } =
+    useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
 
   useImperativeHandle(ref, () => ({
-    getCurrentData: () => {
-      const fields = processFormFields(dynamicFields);
-      const { destinationType } = destination?.item as ActualDestination;
-      const newDestination = {
-        name: destinationName,
-        type: destinationType?.type || '',
-        exportedSignals,
-        fields,
-      };
-      return newDestination;
-    },
+    getCurrentData: () => ({
+      type: destinationType,
+      exportedSignals,
+      fields: dynamicFields.map(({ name, value }) => ({ key: name, value })),
+    }),
   }));
 
-  useEffect(initDynamicFields, [destinationFields, destination]);
-
-  const cardData = useMemo(() => {
-    if (shouldSkip || !destination?.item || !destinationFields) {
-      return [
-        { title: 'Error', value: 'No destination selected or data missing' },
-      ];
-    }
-
-    const { exportedSignals, destinationType, fields } =
-      destination.item as ActualDestination;
-    const { destinationTypeDetails } = destinationFields;
-
-    const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
-    const destinationFieldData = buildDestinationFieldData(
-      parsedFields,
-      destinationTypeDetails?.fields
-    );
-
-    const monitors = buildMonitorsList(exportedSignals);
-
-    return [
-      { title: 'Destination', value: destinationType.displayName || 'N/A' },
-      { title: 'Monitors', value: monitors || 'None' },
-      ...destinationFieldData,
-    ];
-  }, [shouldSkip, destination, destinationFields]);
-
-  function initDynamicFields() {
-    if (destinationFields && destination) {
-      const df = buildFormDynamicFields(
-        destinationFields.destinationTypeDetails.fields
-      );
-
-      const { fields, exportedSignals, name, destinationType } =
-        destination.item as ActualDestination;
-      const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
-      const newDynamicFields = df.map((field) => {
-        if (field?.name in parsedFields) {
-          return {
-            ...field,
-            value:
-              field.componentType === 'dropdown'
-                ? {
-                    id: parsedFields[field.name],
-                    value: parsedFields[field.name],
-                  }
-                : parsedFields[field.name],
-          };
-        }
-        return field;
-      });
-      setDestinationName(name);
-      setExportedSignals(exportedSignals);
-      setDynamicFields(newDynamicFields);
-      setSupportedSignals(destinationType.supportedSignals);
-    }
-  }
-
-  function handleSignalChange(signal: string, value: boolean) {
-    setExportedSignals((prev) => ({ ...prev, [signal]: value }));
-  }
-
-  function handleDynamicFieldChange(name: string, value: any) {
-    setDynamicFields((prev) => {
-      return prev.map((field) => {
-        if (field.name === name) {
-          return { ...field, value };
-        }
-        return field;
-      });
-    });
-  }
-
   return isEditing ? (
     <FormContainer>
-      <DestinationForm
+      <EditDestinationForm
         dynamicFields={dynamicFields}
-        destinationName={destinationName}
         exportedSignals={exportedSignals}
         supportedSignals={supportedSignals}
-        setDestinationName={setDestinationName}
         handleSignalChange={handleSignalChange}
         handleDynamicFieldChange={handleDynamicFieldChange}
       />
@@ -182,41 +61,6 @@ const DestinationDrawer = forwardRef<
 
 export { DestinationDrawer };
 
-// Helper function to build the destination field data array
-function buildDestinationFieldData(
-  parsedFields: Record<string, string>,
-  fieldDetails?: { name: string; displayName: string }[]
-) {
-  return Object.entries(parsedFields).map(([key, value]) => {
-    const displayName =
-      fieldDetails?.find((field) => field.name === key)?.displayName || key;
-    return { title: displayName, value: value || 'N/A' };
-  });
-}
-
-function buildMonitorsList(
-  exportedSignals: ActualDestination['exportedSignals']
-): string {
-  return (
-    Object.entries(exportedSignals)
-      .filter(([key, isEnabled]) => isEnabled && key !== '__typename')
-      .map(([key]) => key)
-      .join(', ') || 'None'
-  );
-}
-
-function processFormFields(dynamicFields) {
-  function processFieldValue(field) {
-    return field.componentType === 'dropdown' ? field.value.value : field.value;
-  }
-
-  // Prepare fields for the request body
-  return dynamicFields.map((field) => ({
-    key: field.name,
-    value: processFieldValue(field),
-  }));
-}
-
 const FormContainer = styled.div`
   display: flex;
   width: 100%;
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index dba0d3a20..01743f661 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -5,3 +5,5 @@ export * from './useCreateDestination';
 export * from './usePotentialDestinations';
 export * from './useActualDestinations';
 export * from './useUpdateDestination';
+export * from './useDestinationFormData';
+export * from './useEditDestinationFormHandlers';
diff --git a/frontend/webapp/hooks/destinations/useDestinationFormData.ts b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
new file mode 100644
index 000000000..5bc76b8ce
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
@@ -0,0 +1,120 @@
+import { useState, useEffect, useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { useDrawerStore } from '@/store';
+import { useQuery } from '@apollo/client';
+import { useConnectDestinationForm } from '@/hooks';
+import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
+import {
+  DynamicField,
+  ActualDestination,
+  isActualDestination,
+  DestinationDetailsResponse,
+  SupportedDestinationSignals,
+} from '@/types';
+
+const DEFAULT_SUPPORTED_SIGNALS: SupportedDestinationSignals = {
+  logs: { supported: false },
+  metrics: { supported: false },
+  traces: { supported: false },
+};
+
+export function useDestinationFormData() {
+  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
+  const [exportedSignals, setExportedSignals] = useState({
+    logs: false,
+    metrics: false,
+    traces: false,
+  });
+  const [supportedSignals, setSupportedSignals] =
+    useState<SupportedDestinationSignals>(DEFAULT_SUPPORTED_SIGNALS);
+
+  const destination = useDrawerStore(({ selectedItem }) => selectedItem);
+  const shouldSkip = !isActualDestination(destination?.item);
+  const destinationType = isActualDestination(destination?.item)
+    ? destination.item.destinationType.type
+    : null;
+  const { buildFormDynamicFields } = useConnectDestinationForm();
+
+  const { data: destinationFields } = useQuery<DestinationDetailsResponse>(
+    GET_DESTINATION_TYPE_DETAILS,
+    { variables: { type: destinationType }, skip: shouldSkip }
+  );
+
+  useEffect(() => {
+    if (destinationFields && isActualDestination(destination?.item)) {
+      const { fields, exportedSignals, destinationType } = destination.item;
+      const destinationTypeDetails = destinationFields.destinationTypeDetails;
+      const formFields = buildFormDynamicFields(
+        destinationTypeDetails?.fields || []
+      );
+      const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
+
+      setDynamicFields(
+        formFields.map((field) => ({
+          ...field,
+          value: parsedFields[field.name] || '',
+        }))
+      );
+
+      setExportedSignals(exportedSignals);
+      setSupportedSignals(destinationType.supportedSignals);
+    }
+  }, [destinationFields, destination, buildFormDynamicFields]);
+
+  const cardData = useMemo(() => {
+    if (
+      shouldSkip ||
+      !isActualDestination(destination?.item) ||
+      !destinationFields
+    ) {
+      return [
+        { title: 'Error', value: 'No destination selected or data missing' },
+      ];
+    }
+
+    const { exportedSignals, destinationType, fields } = destination.item;
+    const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
+    const destinationDetails = destinationFields.destinationTypeDetails?.fields;
+    const fieldsData = buildDestinationFieldData(
+      parsedFields,
+      destinationDetails
+    );
+
+    return [
+      { title: 'Destination', value: destinationType.displayName || 'N/A' },
+      { title: 'Monitors', value: buildMonitorsList(exportedSignals) },
+      ...fieldsData,
+    ];
+  }, [shouldSkip, destination, destinationFields]);
+
+  return {
+    cardData,
+    dynamicFields,
+    destinationType: destinationType || '',
+    exportedSignals,
+    supportedSignals,
+    setExportedSignals,
+    setDynamicFields,
+  };
+}
+
+function buildDestinationFieldData(
+  parsedFields: Record<string, string>,
+  fieldDetails?: { name: string; displayName: string }[]
+) {
+  return Object.entries(parsedFields).map(([key, value]) => ({
+    title:
+      fieldDetails?.find((field) => field.name === key)?.displayName || key,
+    value: value || 'N/A',
+  }));
+}
+
+function buildMonitorsList(
+  exportedSignals: ActualDestination['exportedSignals']
+): string {
+  return (
+    Object.keys(exportedSignals)
+      .filter((key) => exportedSignals[key] && key !== '__typename')
+      .join(', ') || 'None'
+  );
+}
diff --git a/frontend/webapp/hooks/destinations/useEditDestinationFormHandlers.ts b/frontend/webapp/hooks/destinations/useEditDestinationFormHandlers.ts
new file mode 100644
index 000000000..330b1390f
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useEditDestinationFormHandlers.ts
@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from 'react';
+import { DynamicField, ExportedSignals } from '@/types';
+
+export function useEditDestinationFormHandlers(
+  setExportedSignals: Dispatch<SetStateAction<ExportedSignals>>,
+  setDynamicFields: Dispatch<SetStateAction<DynamicField[]>>
+) {
+  const handleSignalChange = (
+    signal: keyof ExportedSignals,
+    value: boolean
+  ) => {
+    setExportedSignals((prev) => ({ ...prev, [signal]: value }));
+  };
+
+  const handleDynamicFieldChange = (name: string, value: any) => {
+    setDynamicFields((prev) =>
+      prev.map((field) => (field.name === name ? { ...field, value } : field))
+    );
+  };
+
+  return { handleSignalChange, handleDynamicFieldChange };
+}

From 6f1ba85189baf756345e9599b53a5c1365580e8c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 14 Oct 2024 15:29:35 +0300
Subject: [PATCH 270/374] chore: wip

---
 .../main/overview/overview-drawer/index.tsx         | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 416afb4ea..5c9e0bad6 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -19,8 +19,8 @@ import {
 const componentMap = {
   source: SourceDrawer,
   action: () => <div>Action</div>,
-  destination: (props: { isEditing: boolean }) => (
-    <DestinationDrawer isEditing={props.isEditing} />
+  destination: ({ isEditing }: { isEditing: boolean }) => (
+    <DestinationDrawer isEditing={isEditing} />
   ),
 };
 
@@ -70,14 +70,6 @@ const OverviewDrawer = () => {
         } catch (error) {
           console.error('Error updating destination:', error);
         }
-
-        try {
-          // Replace this with your actual save logic
-          // await updateDestination(destinationData);
-        } catch (error) {
-          console.error('Error updating destination:', error);
-          // Optionally show error message to user
-        }
         setIsEditing(false);
       }
     }
@@ -103,7 +95,6 @@ const OverviewDrawer = () => {
             await updateActualSource(sourceId, patchRequest);
           } catch (error) {
             console.error('Error updating source:', error);
-            // Optionally show error message to user
           }
         }
       }

From 5a7009444cc7bfb171416f21f21fcf65a186393a Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 14 Oct 2024 15:30:29 +0300
Subject: [PATCH 271/374] chore: wip

---
 .../webapp/containers/main/overview/overview-drawer/index.tsx  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 5c9e0bad6..7ad7a1474 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -62,11 +62,10 @@ const OverviewDrawer = () => {
           name,
         };
         try {
-          const res = await updateExistingDestination(
+          await updateExistingDestination(
             selectedItem.id as string,
             destinationData
           );
-          console.log({ res });
         } catch (error) {
           console.error('Error updating destination:', error);
         }

From 45ed9f22b02f53e4a5f0dfe3dcac564c4a97a9dd Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 15 Oct 2024 09:58:35 +0300
Subject: [PATCH 272/374] chore: wip

---
 .../main/overview/overview-drawer/index.tsx         |  2 +-
 .../hooks/destinations/useDestinationFormData.ts    | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 7ad7a1474..25ba2bb85 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -151,7 +151,7 @@ const OverviewDrawer = () => {
           <DrawerHeader
             ref={titleRef}
             title={title}
-            onClose={handleClose}
+            onClose={isEditing ? handleCancel : handleClose}
             imageUri={
               selectedItem?.item ? getItemImageByType(selectedItem?.item) : ''
             }
diff --git a/frontend/webapp/hooks/destinations/useDestinationFormData.ts b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
index 5bc76b8ce..b6f3e231a 100644
--- a/frontend/webapp/hooks/destinations/useDestinationFormData.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { safeJsonParse } from '@/utils';
 import { useDrawerStore } from '@/store';
 import { useQuery } from '@apollo/client';
@@ -33,6 +33,7 @@ export function useDestinationFormData() {
   const destinationType = isActualDestination(destination?.item)
     ? destination.item.destinationType.type
     : null;
+
   const { buildFormDynamicFields } = useConnectDestinationForm();
 
   const { data: destinationFields } = useQuery<DestinationDetailsResponse>(
@@ -40,11 +41,17 @@ export function useDestinationFormData() {
     { variables: { type: destinationType }, skip: shouldSkip }
   );
 
+  // Memoize the buildFormDynamicFields to ensure it's stable across renders
+  const memoizedBuildFormDynamicFields = useCallback(
+    buildFormDynamicFields,
+    []
+  );
+
   useEffect(() => {
     if (destinationFields && isActualDestination(destination?.item)) {
       const { fields, exportedSignals, destinationType } = destination.item;
       const destinationTypeDetails = destinationFields.destinationTypeDetails;
-      const formFields = buildFormDynamicFields(
+      const formFields = memoizedBuildFormDynamicFields(
         destinationTypeDetails?.fields || []
       );
       const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
@@ -59,7 +66,7 @@ export function useDestinationFormData() {
       setExportedSignals(exportedSignals);
       setSupportedSignals(destinationType.supportedSignals);
     }
-  }, [destinationFields, destination, buildFormDynamicFields]);
+  }, [destinationFields, destination, memoizedBuildFormDynamicFields]);
 
   const cardData = useMemo(() => {
     if (

From eb3ad4a97673f897e49bf9c996758ae55aac5732 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 15 Oct 2024 14:50:55 +0300
Subject: [PATCH 273/374] chore: spilt code to hooks

---
 .../overview/overview-data-flow/index.tsx     | 80 ++++---------------
 frontend/webapp/hooks/common/index.ts         |  1 +
 .../webapp/hooks/common/useContainerWidth.ts  | 23 ++++++
 frontend/webapp/hooks/index.tsx               |  2 +
 frontend/webapp/hooks/overview/index.tsx      |  1 +
 .../hooks/overview/useNodeDataFlowHandlers.ts | 55 +++++++++++++
 6 files changed, 97 insertions(+), 65 deletions(-)
 create mode 100644 frontend/webapp/hooks/common/index.ts
 create mode 100644 frontend/webapp/hooks/common/useContainerWidth.ts
 create mode 100644 frontend/webapp/hooks/overview/index.tsx
 create mode 100644 frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index a49c823c0..233bf6711 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -1,11 +1,16 @@
 'use client';
+import React, { useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import styled from 'styled-components';
-import { useDrawerStore } from '@/store';
-import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
-import { useActualDestination, useActualSources, useGetActions } from '@/hooks';
+import {
+  useGetActions,
+  useActualSources,
+  useContainerWidth,
+  useActualDestination,
+  useNodeDataFlowHandlers,
+} from '@/hooks';
 
 const OverviewDrawer = dynamic(() => import('../overview-drawer'), {
   ssr: false,
@@ -17,38 +22,12 @@ export const OverviewDataFlowWrapper = styled.div`
   position: relative;
 `;
 
-const TYPE_SOURCE = 'source';
-const TYPE_DESTINATION = 'destination';
-
 export function OverviewDataFlowContainer() {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [containerWidth, setContainerWidth] = useState<number>(0);
-
   const { actions } = useGetActions();
   const { sources } = useActualSources();
   const { destinations } = useActualDestination();
-  const setSelectedItem = useDrawerStore(
-    ({ setSelectedItem }) => setSelectedItem
-  );
-  // Get the width of the container dynamically
-  useEffect(() => {
-    if (containerRef.current) {
-      setContainerWidth(
-        containerRef.current.getBoundingClientRect().width - 64
-      );
-    }
-
-    const handleResize = () => {
-      if (containerRef.current) {
-        setContainerWidth(
-          containerRef.current.getBoundingClientRect().width - 64
-        );
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
+  const { containerRef, containerWidth } = useContainerWidth();
+  const { handleNodeClick } = useNodeDataFlowHandlers(sources, destinations);
 
   const columnWidth = 296;
 
@@ -63,44 +42,15 @@ export function OverviewDataFlowContainer() {
     });
   }, [sources, actions, destinations, columnWidth, containerWidth]);
 
-  function onNodeClick(_, object: any) {
-    if (object.data.type === TYPE_SOURCE) {
-      const { id } = object.data;
-      const selectedDrawerItem = sources.find(
-        ({ kind, name, namespace }) =>
-          kind === id.kind && name === id.name && namespace === id.namespace
-      );
-      if (!selectedDrawerItem) return;
-
-      const { kind, name, namespace } = selectedDrawerItem;
-
-      setSelectedItem({
-        id: { kind, name, namespace },
-        item: selectedDrawerItem,
-        type: TYPE_SOURCE,
-      });
-    }
-
-    if (object.data.type === TYPE_DESTINATION) {
-      const { id } = object.data;
-
-      const selectedDrawerItem = destinations.find(
-        (destination) => destination.id === id
-      );
-
-      setSelectedItem({
-        id,
-        item: selectedDrawerItem,
-        type: TYPE_DESTINATION,
-      });
-    }
-  }
-
   return (
     <OverviewDataFlowWrapper ref={containerRef}>
       <OverviewDrawer />
       <OverviewActionMenuContainer />
-      <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={onNodeClick} />
+      <NodeBaseDataFlow
+        nodes={nodes}
+        edges={edges}
+        onNodeClick={handleNodeClick}
+      />
     </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/hooks/common/index.ts b/frontend/webapp/hooks/common/index.ts
new file mode 100644
index 000000000..e536761bd
--- /dev/null
+++ b/frontend/webapp/hooks/common/index.ts
@@ -0,0 +1 @@
+export * from './useContainerWidth';
diff --git a/frontend/webapp/hooks/common/useContainerWidth.ts b/frontend/webapp/hooks/common/useContainerWidth.ts
new file mode 100644
index 000000000..9ea9c601b
--- /dev/null
+++ b/frontend/webapp/hooks/common/useContainerWidth.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState, useRef } from 'react';
+
+export function useContainerWidth() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(
+          containerRef.current.getBoundingClientRect().width - 64
+        );
+      }
+    };
+
+    updateWidth();
+
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, []);
+
+  return { containerRef, containerWidth };
+}
diff --git a/frontend/webapp/hooks/index.tsx b/frontend/webapp/hooks/index.tsx
index c2051a037..b1c09191b 100644
--- a/frontend/webapp/hooks/index.tsx
+++ b/frontend/webapp/hooks/index.tsx
@@ -10,3 +10,5 @@ export * from './useSSE';
 export * from './new-config';
 export * from './compute-platform';
 export * from './useOverviewMetrics';
+export * from './overview';
+export * from './common';
diff --git a/frontend/webapp/hooks/overview/index.tsx b/frontend/webapp/hooks/overview/index.tsx
new file mode 100644
index 000000000..45e0d2258
--- /dev/null
+++ b/frontend/webapp/hooks/overview/index.tsx
@@ -0,0 +1 @@
+export * from './useNodeDataFlowHandlers';
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
new file mode 100644
index 000000000..eb0291a82
--- /dev/null
+++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -0,0 +1,55 @@
+// src/hooks/useNodeDataFlowHandlers.ts
+import { useCallback } from 'react';
+import { useDrawerStore } from '@/store';
+import { K8sActualSource, ActualDestination } from '@/types';
+
+const TYPE_SOURCE = 'source';
+const TYPE_DESTINATION = 'destination';
+
+export function useNodeDataFlowHandlers(
+  sources: K8sActualSource[],
+  destinations: ActualDestination[]
+) {
+  const setSelectedItem = useDrawerStore(
+    ({ setSelectedItem }) => setSelectedItem
+  );
+
+  const handleNodeClick = useCallback(
+    (_, object: any) => {
+      if (object.data.type === TYPE_SOURCE) {
+        const { id } = object.data;
+        const selectedDrawerItem = sources.find(
+          ({ kind, name, namespace }) =>
+            kind === id.kind && name === id.name && namespace === id.namespace
+        );
+        if (!selectedDrawerItem) return;
+
+        const { kind, name, namespace } = selectedDrawerItem;
+
+        setSelectedItem({
+          id: { kind, name, namespace },
+          item: selectedDrawerItem,
+          type: TYPE_SOURCE,
+        });
+      }
+
+      if (object.data.type === TYPE_DESTINATION) {
+        const { id } = object.data;
+        const selectedDrawerItem = destinations.find(
+          (destination) => destination.id === id
+        );
+
+        setSelectedItem({
+          id,
+          item: selectedDrawerItem,
+          type: TYPE_DESTINATION,
+        });
+      }
+    },
+    [sources, destinations, setSelectedItem]
+  );
+
+  return {
+    handleNodeClick,
+  };
+}

From 58f34d02535700e0831475cdb28f83432b2e3775 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 15 Oct 2024 15:12:09 +0300
Subject: [PATCH 274/374] chore: checkboxs list disabled

---
 .../webapp/containers/main/overview/overview-drawer/index.tsx | 2 ++
 frontend/webapp/lib/gql/apollo-wrapper.tsx                    | 4 +++-
 frontend/webapp/reuseable-components/checkbox-list/index.tsx  | 4 +++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 25ba2bb85..de88f74b9 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -41,6 +41,8 @@ const OverviewDrawer = () => {
   const destinationDrawerRef = useRef<DestinationDrawerHandle>(null);
   useEffect(initialTitle, [selectedItem]);
 
+  //TODO: split file to separate components by type: source, destination, action
+
   function initialTitle() {
     if (selectedItem?.type === 'source' && selectedItem.item) {
       const title = (selectedItem.item as K8sActualSource).reportedName;
diff --git a/frontend/webapp/lib/gql/apollo-wrapper.tsx b/frontend/webapp/lib/gql/apollo-wrapper.tsx
index 0bef52a51..debbe9ea4 100644
--- a/frontend/webapp/lib/gql/apollo-wrapper.tsx
+++ b/frontend/webapp/lib/gql/apollo-wrapper.tsx
@@ -26,7 +26,9 @@ function makeClient() {
   });
 
   return new ApolloClient({
-    cache: new InMemoryCache(),
+    cache: new InMemoryCache({
+      addTypename: false,
+    }),
     devtools: {
       enabled: true,
     },
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index 47e8f2e17..0528fce7f 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -37,8 +37,10 @@ const CheckboxList: React.FC<CheckboxListProps> = ({
       (value) => value
     );
 
+    const trueValues = Object.values(exportedSignals).filter(Boolean);
+
     return (
-      monitors.length === 1 ||
+      (monitors.length === 1 && trueValues.length === 1) ||
       (selectedItems.length === 1 && exportedSignals[item.id])
     );
   }

From ee71844ab1abbbb804657f4e98304b9c5b4ff30e Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 15 Oct 2024 15:46:54 +0300
Subject: [PATCH 275/374] wip: reset state when cancel

---
 .../destination-drawer-container/index.tsx    | 30 ++++++++++++++--
 .../main/overview/overview-drawer/index.tsx   |  2 ++
 .../destinations/useDestinationFormData.ts    | 36 ++++++++++++++-----
 3 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
index 914f40714..fa354eeb9 100644
--- a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -1,4 +1,9 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
 import styled from 'styled-components';
 import { ExportedSignals } from '@/types';
 import { CardDetails, EditDestinationForm } from '@/components';
@@ -23,12 +28,14 @@ const DestinationDrawer = forwardRef<
   DestinationDrawerHandle,
   DestinationDrawerProps
 >(({ isEditing }, ref) => {
+  const [isFormDirty, setIsFormDirty] = useState(false);
   const {
     cardData,
     dynamicFields,
     exportedSignals,
     supportedSignals,
     destinationType,
+    resetFormData,
     setDynamicFields,
     setExportedSignals,
   } = useDestinationFormData();
@@ -36,6 +43,23 @@ const DestinationDrawer = forwardRef<
   const { handleSignalChange, handleDynamicFieldChange } =
     useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
 
+  useEffect(() => {
+    if (!isEditing && isFormDirty) {
+      setIsFormDirty(false);
+      resetFormData();
+    }
+  }, [isEditing]);
+
+  const onDynamicFieldChange = (name: string, value: any) => {
+    handleDynamicFieldChange(name, value);
+    setIsFormDirty(true);
+  };
+
+  const onSignalChange = (signal: keyof ExportedSignals, value: boolean) => {
+    handleSignalChange(signal, value);
+    setIsFormDirty(true);
+  };
+
   useImperativeHandle(ref, () => ({
     getCurrentData: () => ({
       type: destinationType,
@@ -50,8 +74,8 @@ const DestinationDrawer = forwardRef<
         dynamicFields={dynamicFields}
         exportedSignals={exportedSignals}
         supportedSignals={supportedSignals}
-        handleSignalChange={handleSignalChange}
-        handleDynamicFieldChange={handleDynamicFieldChange}
+        handleSignalChange={onSignalChange}
+        handleDynamicFieldChange={onDynamicFieldChange}
       />
     </FormContainer>
   ) : (
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index de88f74b9..28b0ff757 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -37,8 +37,10 @@ const OverviewDrawer = () => {
 
   const { updateExistingDestination } = useUpdateDestination();
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
+
   const titleRef = useRef<HTMLInputElement>(null);
   const destinationDrawerRef = useRef<DestinationDrawerHandle>(null);
+
   useEffect(initialTitle, [selectedItem]);
 
   //TODO: split file to separate components by type: source, destination, action
diff --git a/frontend/webapp/hooks/destinations/useDestinationFormData.ts b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
index b6f3e231a..dd9b4b2ae 100644
--- a/frontend/webapp/hooks/destinations/useDestinationFormData.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { safeJsonParse } from '@/utils';
 import { useDrawerStore } from '@/store';
 import { useQuery } from '@apollo/client';
@@ -47,6 +47,16 @@ export function useDestinationFormData() {
     []
   );
 
+  const initialDynamicFieldsRef = useRef<DynamicField[]>([]);
+  const initialExportedSignalsRef = useRef({
+    logs: false,
+    metrics: false,
+    traces: false,
+  });
+  const initialSupportedSignalsRef = useRef<SupportedDestinationSignals>(
+    DEFAULT_SUPPORTED_SIGNALS
+  );
+
   useEffect(() => {
     if (destinationFields && isActualDestination(destination?.item)) {
       const { fields, exportedSignals, destinationType } = destination.item;
@@ -55,16 +65,18 @@ export function useDestinationFormData() {
         destinationTypeDetails?.fields || []
       );
       const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
+      const df = formFields.map((field) => ({
+        ...field,
+        value: parsedFields[field.name] || '',
+      }));
 
-      setDynamicFields(
-        formFields.map((field) => ({
-          ...field,
-          value: parsedFields[field.name] || '',
-        }))
-      );
-
+      setDynamicFields(df);
       setExportedSignals(exportedSignals);
       setSupportedSignals(destinationType.supportedSignals);
+
+      initialDynamicFieldsRef.current = df;
+      initialExportedSignalsRef.current = exportedSignals;
+      initialSupportedSignalsRef.current = destinationType.supportedSignals;
     }
   }, [destinationFields, destination, memoizedBuildFormDynamicFields]);
 
@@ -94,6 +106,13 @@ export function useDestinationFormData() {
     ];
   }, [shouldSkip, destination, destinationFields]);
 
+  // Reset function using initial values from refs
+  const resetFormData = useCallback(() => {
+    setDynamicFields(initialDynamicFieldsRef.current);
+    setExportedSignals(initialExportedSignalsRef.current);
+    setSupportedSignals(initialSupportedSignalsRef.current);
+  }, []);
+
   return {
     cardData,
     dynamicFields,
@@ -102,6 +121,7 @@ export function useDestinationFormData() {
     supportedSignals,
     setExportedSignals,
     setDynamicFields,
+    resetFormData,
   };
 }
 

From f77b5c35626f55dc00ff1d8a51c4e879804864cb Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 15 Oct 2024 15:49:12 +0300
Subject: [PATCH 276/374] chore: change file name

---
 .../{destination-form => edit-destination-form}/index.tsx       | 0
 frontend/webapp/components/destinations/index.ts                | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename frontend/webapp/components/destinations/{destination-form => edit-destination-form}/index.tsx (100%)

diff --git a/frontend/webapp/components/destinations/destination-form/index.tsx b/frontend/webapp/components/destinations/edit-destination-form/index.tsx
similarity index 100%
rename from frontend/webapp/components/destinations/destination-form/index.tsx
rename to frontend/webapp/components/destinations/edit-destination-form/index.tsx
diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
index 4ed4159b2..e852a65cc 100644
--- a/frontend/webapp/components/destinations/index.ts
+++ b/frontend/webapp/components/destinations/index.ts
@@ -1,3 +1,3 @@
 export * from './add-destination-button';
 export * from './monitors-tap-list';
-export * from './destination-form';
+export * from './edit-destination-form';

From 1035692805d1ed0400817e99ce7315bd0f2492cc Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 15 Oct 2024 17:33:55 +0300
Subject: [PATCH 277/374] wip: show inputs values on edit mode

---
 .../destinations/useDestinationFormData.ts    | 28 +++++++++++++++----
 .../reuseable-components/input-list/index.tsx | 28 ++++++++++---------
 .../key-value-input-list/index.tsx            |  7 +++--
 3 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/frontend/webapp/hooks/destinations/useDestinationFormData.ts b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
index dd9b4b2ae..bba30a780 100644
--- a/frontend/webapp/hooks/destinations/useDestinationFormData.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
@@ -61,14 +61,32 @@ export function useDestinationFormData() {
     if (destinationFields && isActualDestination(destination?.item)) {
       const { fields, exportedSignals, destinationType } = destination.item;
       const destinationTypeDetails = destinationFields.destinationTypeDetails;
+
+      const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
       const formFields = memoizedBuildFormDynamicFields(
         destinationTypeDetails?.fields || []
       );
-      const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
-      const df = formFields.map((field) => ({
-        ...field,
-        value: parsedFields[field.name] || '',
-      }));
+
+      const df = formFields.map((field) => {
+        let fieldValue: any = parsedFields[field.name] || '';
+
+        // Check if fieldValue is a JSON string that needs stringifying
+        try {
+          const parsedValue = JSON.parse(fieldValue);
+          console.log({ parsedValue });
+          if (Array.isArray(parsedValue)) {
+            // If it's an array, stringify it for setting the value
+            fieldValue = parsedValue;
+          }
+        } catch (e) {
+          // If parsing fails, it's not JSON, so we keep it as is
+        }
+
+        return {
+          ...field,
+          value: fieldValue,
+        };
+      });
 
       setDynamicFields(df);
       setExportedSignals(exportedSignals);
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 43d6fffe5..c3a3c2743 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -11,6 +11,7 @@ interface InputListProps {
   title?: string;
   tooltip?: string;
   required?: boolean;
+  value?: string[];
   onChange: (values: string[]) => void;
 }
 
@@ -71,8 +72,9 @@ const InputList: React.FC<InputListProps> = ({
   tooltip,
   required,
   onChange,
+  value = [''],
 }) => {
-  const [inputs, setInputs] = useState<string[]>(initialValues);
+  const [inputs, setInputs] = useState<string[]>(value || initialValues);
 
   useEffect(() => {
     if (initialValues.length > 0) {
@@ -101,15 +103,15 @@ const InputList: React.FC<InputListProps> = ({
   return (
     <Container>
       {title && (
-        <Tooltip text={tooltip || ''}>
-          <HeaderWrapper>
-            <Title>{title}</Title>
-            {!required && (
-              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
-                (optional)
-              </Text>
-            )}
-            {tooltip && (
+        <HeaderWrapper>
+          <Title>{title}</Title>
+          {!required && (
+            <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+              (optional)
+            </Text>
+          )}
+          {tooltip && (
+            <Tooltip text={tooltip || ''}>
               <Image
                 src="/icons/common/info.svg"
                 alt=""
@@ -117,9 +119,9 @@ const InputList: React.FC<InputListProps> = ({
                 height={16}
                 style={{ marginBottom: 4 }}
               />
-            )}
-          </HeaderWrapper>
-        </Tooltip>
+            </Tooltip>
+          )}
+        </HeaderWrapper>
       )}
       {inputs.map((value, index) => (
         <InputRow key={index}>
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index 1b25a0fbe..cbd7904ea 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -8,6 +8,7 @@ import { Tooltip } from '../tooltip';
 
 interface KeyValueInputsListProps {
   initialKeyValuePairs?: { key: string; value: string }[];
+  value?: { key: string; value: string }[];
   title?: string;
   tooltip?: string;
   required?: boolean;
@@ -67,13 +68,15 @@ const Title = styled(Text)`
 
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   initialKeyValuePairs = [{ key: '', value: '' }],
+  value = [{ key: '', value: '' }],
   title,
   tooltip,
   required,
   onChange,
 }) => {
-  const [keyValuePairs, setKeyValuePairs] =
-    useState<{ key: string; value: string }[]>(initialKeyValuePairs);
+  const [keyValuePairs, setKeyValuePairs] = useState<
+    { key: string; value: string }[]
+  >(value || initialKeyValuePairs);
 
   const validPairsRef = useRef<{ key: string; value: string }[]>([]);
 

From 6fedc1c551f25b5eb0c50c4124835e91dbf3fd01 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 20 Oct 2024 14:59:22 +0300
Subject: [PATCH 278/374] feat: show override name in overview

---
 .../webapp/reuseable-components/nodes-data-flow/builder.ts    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 23d570ec8..7237229b9 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -82,7 +82,9 @@ export const buildNodesAndEdges = ({
         NODE_HEIGHT * (index + 1),
         {
           type: 'source',
-          title: source.name,
+          title:
+            source.name +
+            (source.reportedName ? ` (${source.reportedName})` : ''),
           subTitle: source.kind,
           imageUri: getMainContainerLanguageLogo(source),
           status: 'healthy',

From 243f7a9a641e42b20d385422dd63df2023abe13b Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 20 Oct 2024 15:38:12 +0300
Subject: [PATCH 279/374] chore: wip

---
 .../webapp/hooks/destinations/useConnectDestinationForm.ts    | 1 +
 frontend/webapp/reuseable-components/input-list/index.tsx     | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index 7f95908c5..1cae02d2a 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -66,6 +66,7 @@ export function useConnectDestinationForm() {
               componentType,
               title: displayName,
               initialValues: initialValuesJson,
+              value: initialValuesJson,
               ...componentPropertiesJson,
             };
           case 'keyValuePairs':
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index c3a3c2743..67b935d7a 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -87,7 +87,9 @@ const InputList: React.FC<InputListProps> = ({
   };
 
   const handleDeleteInput = (index: number) => {
-    setInputs(inputs.filter((_, i) => i !== index));
+    const newInputs = inputs.filter((_, i) => i !== index);
+    setInputs(newInputs);
+    onChange(newInputs);
   };
 
   const handleInputChange = (value: string, index: number) => {

From 4a4abd4863e5ad0b94a8b6119037a018eec82520 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 20 Oct 2024 15:56:15 +0300
Subject: [PATCH 280/374] chore: types

---
 .../dynamic-form-fields/index.tsx             |  3 +--
 .../main/overview/overview-drawer/index.tsx   | 27 ++++++++++++++-----
 .../destinations/useConnectDestinationForm.ts | 12 ++++-----
 frontend/webapp/types/common.ts               |  6 +++++
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
index b935a558c..5c6ae04ca 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { INPUT_TYPES } from '@/utils/constants/string';
+import { INPUT_TYPES } from '@/utils';
 import {
   Dropdown,
   Input,
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 28b0ff757..5056f6411 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -13,6 +13,7 @@ import {
   WorkloadId,
   K8sActualSource,
   ActualDestination,
+  OVERVIEW_ENTITY_TYPES,
   PatchSourceRequestInput,
 } from '@/types';
 
@@ -46,10 +47,16 @@ const OverviewDrawer = () => {
   //TODO: split file to separate components by type: source, destination, action
 
   function initialTitle() {
-    if (selectedItem?.type === 'source' && selectedItem.item) {
+    if (
+      selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
+      selectedItem.item
+    ) {
       const title = (selectedItem.item as K8sActualSource).reportedName;
       setTitle(title || '');
-    } else if (selectedItem?.type === 'destination' && selectedItem.item) {
+    } else if (
+      selectedItem?.type === OVERVIEW_ENTITY_TYPES.DESTINATION &&
+      selectedItem.item
+    ) {
       const title = (selectedItem.item as ActualDestination).name;
       setTitle(title || '');
     } else {
@@ -58,7 +65,7 @@ const OverviewDrawer = () => {
   }
 
   const handleSave = async () => {
-    if (selectedItem?.type === 'destination') {
+    if (selectedItem?.type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
       if (destinationDrawerRef.current && titleRef.current) {
         const name = titleRef.current.value;
         const destinationData = {
@@ -77,11 +84,14 @@ const OverviewDrawer = () => {
       }
     }
 
-    if (selectedItem?.type === 'source') {
+    if (selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE) {
       if (titleRef.current) {
         const newTitle = titleRef.current.value;
         setTitle(newTitle);
-        if (selectedItem?.type === 'source' && selectedItem.item) {
+        if (
+          selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
+          selectedItem.item
+        ) {
           const sourceItem = selectedItem.item as K8sActualSource;
 
           const sourceId: WorkloadId = {
@@ -111,7 +121,10 @@ const OverviewDrawer = () => {
   };
 
   const handleDelete = async () => {
-    if (selectedItem?.type === 'source' && selectedItem.item) {
+    if (
+      selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
+      selectedItem.item
+    ) {
       const sourceItem = selectedItem.item as K8sActualSource;
 
       try {
@@ -162,7 +175,7 @@ const OverviewDrawer = () => {
             {...{ isEditing, setIsEditing }}
           />
           <ContentArea>
-            {selectedItem.type === 'destination' ? (
+            {selectedItem.type === OVERVIEW_ENTITY_TYPES.DESTINATION ? (
               <DestinationDrawer
                 ref={destinationDrawerRef}
                 isEditing={isEditing}
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
index 1cae02d2a..7e8c989b8 100644
--- a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -1,4 +1,4 @@
-import { safeJsonParse } from '@/utils';
+import { safeJsonParse, INPUT_TYPES } from '@/utils';
 import { DestinationDetailsField, DynamicField } from '@/types';
 
 export function useConnectDestinationForm() {
@@ -18,7 +18,7 @@ export function useConnectDestinationForm() {
         let componentPropertiesJson;
         let initialValuesJson;
         switch (componentType) {
-          case 'dropdown':
+          case INPUT_TYPES.DROPDOWN:
             componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(
               componentProperties,
               {}
@@ -41,8 +41,8 @@ export function useConnectDestinationForm() {
               ...componentPropertiesJson,
             };
 
-          case 'input':
-          case 'textarea':
+          case INPUT_TYPES.INPUT:
+          case INPUT_TYPES.TEXTAREA:
             componentPropertiesJson = safeJsonParse<string[]>(
               componentProperties,
               []
@@ -54,7 +54,7 @@ export function useConnectDestinationForm() {
               ...componentPropertiesJson,
             };
 
-          case 'multiInput':
+          case INPUT_TYPES.MULTI_INPUT:
             componentPropertiesJson = safeJsonParse<string[]>(
               componentProperties,
               []
@@ -69,7 +69,7 @@ export function useConnectDestinationForm() {
               value: initialValuesJson,
               ...componentPropertiesJson,
             };
-          case 'keyValuePairs':
+          case INPUT_TYPES.KEY_VALUE_PAIR:
             return {
               name,
               componentType,
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index 83e80afdc..c90203c9e 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -35,3 +35,9 @@ export interface StepProps {
   state: 'finish' | 'active' | 'disabled';
   stepNumber: number;
 }
+
+export enum OVERVIEW_ENTITY_TYPES {
+  SOURCE = 'source',
+  DESTINATION = 'destination',
+  ACTION = 'action',
+}

From d5b4f9bc1e69a8a1ae6e0ec914a34ab6acc21114 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 20 Oct 2024 16:00:58 +0300
Subject: [PATCH 281/374] wip: reset after delete

---
 .../main/overview/overview-drawer/index.tsx         | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 5056f6411..13eee904a 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -120,6 +120,12 @@ const OverviewDrawer = () => {
     initialTitle();
   };
 
+  const handleClose = () => {
+    setIsEditing(false);
+    setDrawerItem(null);
+    setIsDeleteModalOpen(false);
+  };
+
   const handleDelete = async () => {
     if (
       selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
@@ -135,6 +141,7 @@ const OverviewDrawer = () => {
             selected: false,
           },
         ]);
+        handleClose();
       } catch (error) {
         console.error('Error deleting source:', error);
       }
@@ -142,12 +149,6 @@ const OverviewDrawer = () => {
     setDrawerItem(null); // Close the drawer on delete
   };
 
-  const handleClose = () => {
-    setIsEditing(false);
-    setDrawerItem(null);
-    setIsDeleteModalOpen(false);
-  };
-
   const handleCloseDeleteModal = () => {
     setIsDeleteModalOpen(false);
   };

From 09fe7af965265140c457e3479f15d66b5dae45b8 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 20 Oct 2024 16:04:34 +0300
Subject: [PATCH 282/374] wip: use file from guards

---
 .../webapp/containers/main/overview/overview-drawer/index.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 13eee904a..64d6bbda8 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -13,6 +13,7 @@ import {
   WorkloadId,
   K8sActualSource,
   ActualDestination,
+  isActualDestination,
   OVERVIEW_ENTITY_TYPES,
   PatchSourceRequestInput,
 } from '@/types';
@@ -208,7 +209,7 @@ const OverviewDrawer = () => {
 };
 
 function getItemImageByType(item: K8sActualSource | ActualDestination): string {
-  if ('destinationType' in item) {
+  if (isActualDestination(item)) {
     // item is of type ActualDestination
     return item.destinationType.imageUrl;
   } else {

From 5e8f0c3714cdc0019bc24ec762785b642dc59b94 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Sun, 20 Oct 2024 17:05:12 +0300
Subject: [PATCH 283/374] chore: connect dest edges

---
 .../nodes-data-flow/builder.ts                 | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 7237229b9..749030575 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -203,14 +203,16 @@ export const buildNodesAndEdges = ({
   });
 
   if (actions.length === 0) {
-    actionToDestinationEdges.push(
-      createEdge(
-        `action-0-to-destination-0`,
-        `action-0`,
-        `destination-0`,
-        false
-      )
-    );
+    for (let i = 0; i < destinations.length; i++) {
+      actionToDestinationEdges.push(
+        createEdge(
+          `action-0-to-destination-${i}`,
+          `action-0`,
+          `destination-${i}`,
+          false
+        )
+      );
+    }
   }
 
   // Combine all edges

From c4ae888675c0509f1a3cb99474e2859cab6046f9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 21 Oct 2024 09:35:28 +0300
Subject: [PATCH 284/374] chore: refactor code

---
 .../connect-destination-modal-body/index.tsx  | 93 ++++++++++---------
 .../main/overview/add-entity/index.tsx        | 18 ++--
 2 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index 0989e7173..fad2e00c7 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { useAppStore } from '@/store';
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
@@ -21,6 +21,7 @@ import {
   DestinationDetailsResponse,
   ConfiguredDestination,
 } from '@/types';
+import { INPUT_TYPES } from '@/utils';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -52,8 +53,8 @@ export function ConnectDestinationModalBody({
   const {
     dynamicFields,
     exportedSignals,
-    setExportedSignals,
     setDynamicFields,
+    setExportedSignals,
   } = useDestinationFormData();
 
   const { connectEnv } = useConnectEnv();
@@ -72,22 +73,15 @@ export function ConnectDestinationModalBody({
     }
   );
 
-  const monitors = useMemo(() => {
-    if (!destination) return [];
+  useLayoutEffect(() => {
+    if (!destination) return;
     const { logs, metrics, traces } = destination.supportedSignals;
-
     setExportedSignals({
       logs: logs.supported,
       metrics: metrics.supported,
       traces: traces.supported,
     });
-
-    return [
-      logs.supported && { id: 'logs', title: 'Logs' },
-      metrics.supported && { id: 'metrics', title: 'Metrics' },
-      traces.supported && { id: 'traces', title: 'Traces' },
-    ].filter(Boolean);
-  }, [destination]);
+  }, [destination, setExportedSignals]);
 
   useEffect(() => {
     if (data && destination) {
@@ -116,22 +110,31 @@ export function ConnectDestinationModalBody({
     const isFormValid = dynamicFields.every((field) =>
       field.required ? field.value : true
     );
-
     onFormValidChange(isFormValid);
   }, [dynamicFields]);
 
+  const monitors = useMemo(() => {
+    if (!destination) return [];
+    const { logs, metrics, traces } = destination.supportedSignals;
+
+    return [
+      logs.supported && { id: 'logs', title: 'Logs' },
+      metrics.supported && { id: 'metrics', title: 'Metrics' },
+      traces.supported && { id: 'traces', title: 'Traces' },
+    ].filter(Boolean);
+  }, [destination]);
+
   function onDynamicFieldChange(name: string, value: any) {
     setShowConnectionError(false);
     handleDynamicFieldChange(name, value);
   }
+  function processFieldValue(field) {
+    return field.componentType === INPUT_TYPES.DROPDOWN
+      ? field.value.value
+      : field.value;
+  }
 
   function processFormFields() {
-    function processFieldValue(field) {
-      return field.componentType === 'dropdown'
-        ? field.value.value
-        : field.value;
-    }
-
     // Prepare fields for the request body
     return dynamicFields.map((field) => ({
       key: field.name,
@@ -140,13 +143,6 @@ export function ConnectDestinationModalBody({
   }
 
   async function handleSubmit() {
-    // Helper function to process field values
-    function processFieldValue(field) {
-      return field.componentType === 'dropdown'
-        ? field.value.value
-        : field.value;
-    }
-
     // Prepare fields for the request body
     const fields = processFormFields();
 
@@ -196,6 +192,32 @@ export function ConnectDestinationModalBody({
 
   if (!destination) return null;
 
+  const actionButton = useMemo(() => {
+    if (destination.testConnectionSupported) {
+      return (
+        <TestConnection
+          onError={() => {
+            setShowConnectionError(true);
+            onFormValidChange(false);
+          }}
+          destination={{
+            name: destinationName,
+            type: destination?.type || '',
+            exportedSignals,
+            fields: processFormFields(),
+          }}
+        />
+      );
+    }
+    return null;
+  }, [
+    destination,
+    destinationName,
+    exportedSignals,
+    processFormFields,
+    onFormValidChange,
+  ]);
+
   return (
     <Container>
       <SideMenuWrapper>
@@ -206,24 +228,7 @@ export function ConnectDestinationModalBody({
         <SectionTitle
           title="Create connection"
           description="Connect selected destination with Odigos."
-          actionButton={
-            destination.testConnectionSupported ? (
-              <TestConnection // TODO: refactor this after add form validation
-                onError={() => {
-                  setShowConnectionError(true);
-                  onFormValidChange(false);
-                }}
-                destination={{
-                  name: destinationName,
-                  type: destination?.type || '',
-                  exportedSignals,
-                  fields: processFormFields(),
-                }}
-              />
-            ) : (
-              <></>
-            )
-          }
+          actionButton={actionButton}
         />
         <ConnectionNotification
           showConnectionError={showConnectionError}
diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index 913123bbf..f158c2a93 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -1,13 +1,13 @@
 import React, { useState, useRef, useCallback } from 'react';
 import Image from 'next/image';
 import theme from '@/styles/theme';
-import { DropdownOption } from '@/types';
+import { AddActionModal } from '../../actions';
 import styled, { css } from 'styled-components';
 import { useActualSources, useOnClickOutside } from '@/hooks';
+import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
 import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal';
 import { AddDestinationModal } from '../../destinations/add-destination/add-destination-modal';
-import { AddActionModal } from '../../actions';
 
 // Styled components for the dropdown UI
 const Container = styled.div`
@@ -61,9 +61,9 @@ const ButtonText = styled(Text)`
 
 // Default options for the dropdown
 const DEFAULT_OPTIONS: DropdownOption[] = [
-  { id: 'sources', value: 'Source' },
-  { id: 'actions', value: 'Action' },
-  { id: 'destinations', value: 'Destination' },
+  { id: 'source', value: 'Source' },
+  { id: 'action', value: 'Action' },
+  { id: 'destination', value: 'Destination' },
 ];
 
 interface AddEntityButtonDropdownProps {
@@ -121,7 +121,7 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
               onClick={() => handleSelect(option)}
             >
               <Image
-                src={`/icons/overview/${option.id}.svg`}
+                src={`/icons/overview/${option.id}s.svg`}
                 width={16}
                 height={16}
                 alt={`Add ${option.value}`}
@@ -132,17 +132,17 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
         </DropdownListContainer>
       )}
       <AddSourceModal
-        isOpen={currentModal === 'sources'}
+        isOpen={currentModal === OVERVIEW_ENTITY_TYPES.SOURCE}
         onClose={handleCloseModal}
         createSourcesForNamespace={createSourcesForNamespace}
         persistNamespaceItems={persistNamespaceItems}
       />
       <AddDestinationModal
-        isModalOpen={currentModal === 'destinations'}
+        isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.DESTINATION}
         handleCloseModal={handleCloseModal}
       />
       <AddActionModal
-        isModalOpen={currentModal === 'actions'}
+        isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.ACTION}
         handleCloseModal={handleCloseModal}
       />
     </Container>

From 48c193a09c7cd659f75859165bfeb80cdd364246 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Mon, 21 Oct 2024 10:36:39 +0300
Subject: [PATCH 285/374] chore: move destination types to hook

---
 .../choose-destination-modal-body/index.tsx   | 40 ++-----------------
 .../connect-destination-modal-body/index.tsx  |  6 ++-
 frontend/webapp/hooks/destinations/index.ts   |  1 +
 .../hooks/destinations/useDestinationTypes.ts | 36 +++++++++++++++++
 4 files changed, 45 insertions(+), 38 deletions(-)
 create mode 100644 frontend/webapp/hooks/destinations/useDestinationTypes.ts

diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
index 160e9b77e..a0e09537f 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -1,19 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react';
-
+import React, { useMemo, useState } from 'react';
 import { SideMenu } from '@/components';
-import { useQuery } from '@apollo/client';
-import { GET_DESTINATION_TYPE } from '@/graphql';
+import { useDestinationTypes } from '@/hooks';
 import { DestinationsList } from '../destinations-list';
 import { Body, Container, SideMenuWrapper } from '../styled';
 import { Divider, SectionTitle } from '@/reuseable-components';
 import { DestinationFilterComponent } from '../choose-destination-menu';
-import {
-  StepProps,
-  DropdownOption,
-  DestinationTypeItem,
-  DestinationsCategory,
-  GetDestinationTypesResponse,
-} from '@/types';
+import { StepProps, DropdownOption, DestinationTypeItem } from '@/types';
 
 interface ChooseDestinationModalBodyProps {
   onSelect: (item: DestinationTypeItem) => void;
@@ -34,42 +26,18 @@ const SIDE_MENU_DATA: StepProps[] = [
 
 const DEFAULT_MONITORS = ['logs', 'metrics', 'traces'];
 const DEFAULT_DROPDOWN_VALUE = { id: 'all', value: 'All types' };
-const CATEGORIES_DESCRIPTION = {
-  managed: 'Effortless Monitoring with Scalable Performance Management',
-  'self hosted':
-    'Full Control and Customization for Advanced Application Monitoring',
-};
-
-export interface IDestinationListItem extends DestinationsCategory {
-  description: string;
-}
 
 export function ChooseDestinationModalBody({
   onSelect,
 }: ChooseDestinationModalBodyProps) {
   const [searchValue, setSearchValue] = useState('');
-  const [destinations, setDestinations] = useState<IDestinationListItem[]>([]);
   const [selectedMonitors, setSelectedMonitors] =
     useState<string[]>(DEFAULT_MONITORS);
   const [dropdownValue, setDropdownValue] = useState<DropdownOption>(
     DEFAULT_DROPDOWN_VALUE
   );
 
-  const { data } = useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
-  useEffect(() => {
-    if (data) {
-      const destinationsCategories = data.destinationTypes.categories.map(
-        (category) => {
-          return {
-            name: category.name,
-            description: CATEGORIES_DESCRIPTION[category.name],
-            items: category.items,
-          };
-        }
-      );
-      setDestinations(destinationsCategories);
-    }
-  }, [data]);
+  const { destinations } = useDestinationTypes();
 
   function handleTagSelect(option: DropdownOption) {
     setDropdownValue(option);
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index fad2e00c7..e1954ce8e 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { useAppStore } from '@/store';
+import { INPUT_TYPES } from '@/utils';
 import { SideMenu } from '@/components';
 import { useQuery } from '@apollo/client';
 import { FormContainer } from './form-container';
@@ -21,7 +22,6 @@ import {
   DestinationDetailsResponse,
   ConfiguredDestination,
 } from '@/types';
-import { INPUT_TYPES } from '@/utils';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -59,8 +59,10 @@ export function ConnectDestinationModalBody({
 
   const { connectEnv } = useConnectEnv();
   const { buildFormDynamicFields } = useConnectDestinationForm();
+
   const { handleDynamicFieldChange, handleSignalChange } =
     useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
+
   const addConfiguredDestination = useAppStore(
     ({ addConfiguredDestination }) => addConfiguredDestination
   );
@@ -146,7 +148,7 @@ export function ConnectDestinationModalBody({
     // Prepare fields for the request body
     const fields = processFormFields();
 
-    // Function to store configured destination
+    // Function to store configured destination to display in the UI
     function storeConfiguredDestination() {
       const destinationTypeDetails = dynamicFields.map((field) => ({
         title: field.title,
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index 01743f661..73ea9289f 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -7,3 +7,4 @@ export * from './useActualDestinations';
 export * from './useUpdateDestination';
 export * from './useDestinationFormData';
 export * from './useEditDestinationFormHandlers';
+export * from './useDestinationTypes';
diff --git a/frontend/webapp/hooks/destinations/useDestinationTypes.ts b/frontend/webapp/hooks/destinations/useDestinationTypes.ts
new file mode 100644
index 000000000..ed6ae8265
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useDestinationTypes.ts
@@ -0,0 +1,36 @@
+import { useQuery } from '@apollo/client';
+import { useEffect, useState } from 'react';
+import { GET_DESTINATION_TYPE } from '@/graphql';
+import { DestinationsCategory, GetDestinationTypesResponse } from '@/types';
+
+const CATEGORIES_DESCRIPTION = {
+  managed: 'Effortless Monitoring with Scalable Performance Management',
+  'self hosted':
+    'Full Control and Customization for Advanced Application Monitoring',
+};
+
+export interface IDestinationListItem extends DestinationsCategory {
+  description: string;
+}
+
+export function useDestinationTypes() {
+  const [destinations, setDestinations] = useState<IDestinationListItem[]>([]);
+  const { data } = useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
+
+  useEffect(() => {
+    if (data) {
+      const destinationsCategories = data.destinationTypes.categories.map(
+        (category) => {
+          return {
+            name: category.name,
+            description: CATEGORIES_DESCRIPTION[category.name],
+            items: category.items,
+          };
+        }
+      );
+      setDestinations(destinationsCategories);
+    }
+  }, [data]);
+
+  return { destinations };
+}

From 12046ba53079b2e1f01c2c746d4f9199b220529b Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Mon, 21 Oct 2024 13:58:14 +0300
Subject: [PATCH 286/374] Refactor old ui to new product design (#1605)

---
 .vscode/launch.json                           |   131 +-
 frontend/Makefile                             |     2 +
 frontend/endpoints/applications.go            |    47 +-
 frontend/endpoints/config.go                  |    10 +-
 frontend/endpoints/destinations.go            |     3 +-
 frontend/endpoints/namespaces.go              |    40 +
 frontend/endpoints/sources.go                 |     8 +-
 frontend/go.mod                               |     8 +
 frontend/go.sum                               |    30 +-
 frontend/gqlgen.yml                           |    62 +
 frontend/graph/conversions.go                 |   150 +
 frontend/graph/generated.go                   | 10937 ++++++++++++++++
 frontend/graph/model/destination.go           |    48 +
 frontend/graph/model/models_gen.go            |   471 +
 frontend/graph/resolver.go                    |     7 +
 frontend/graph/schema.graphqls                |   264 +
 frontend/graph/schema.resolvers.go            |   655 +
 frontend/main.go                              |    12 +-
 .../destination_finder.go                     |    79 +
 .../destination_recognition/elasticsearch.go  |    45 +
 .../destination_recognition/jaeger.go         |    46 +
 frontend/services/destinations.go             |   300 +
 frontend/services/namespaces.go               |   190 +
 frontend/services/sources.go                  |   382 +
 .../services/test_connection/conversion.go    |    58 +
 .../test_connection/otlp_test_connection.go   |    37 +
 .../otlphttp_test_connection.go               |    36 +
 .../test_connection/test_connection.go        |   157 +
 frontend/services/test_connection/utils.go    |    43 +
 .../services/test_connection/utils_test.go    |    56 +
 frontend/services/utils.go                    |    50 +
 .../app/(setup)/choose-destination/page.tsx   |    20 +-
 .../app/(setup)/choose-sources/page.tsx       |    20 +-
 .../app/(setup)/connect-destination/page.tsx  |    17 -
 frontend/webapp/app/(setup)/layout.tsx        |    29 +-
 frontend/webapp/app/(setup)/styled.ts         |    11 +
 frontend/webapp/app/(setup)/styled.tsx        |    41 -
 frontend/webapp/app/globals.css               |     4 +
 frontend/webapp/app/layout.tsx                |    21 +-
 frontend/webapp/app/main/layout.tsx           |    36 +
 frontend/webapp/app/main/page.tsx             |    11 +
 frontend/webapp/app/page.tsx                  |    30 +-
 .../components/common/card-details/index.tsx  |    41 +
 .../common/configured-fields/index.tsx        |    78 +
 frontend/webapp/components/common/index.ts    |     2 +
 .../add-destination-button/index.tsx          |    33 +
 .../edit-destination-form/index.tsx           |    45 +
 .../webapp/components/destinations/index.ts   |     3 +
 .../destinations/monitors-tap-list/index.tsx  |    53 +
 frontend/webapp/components/index.ts           |     3 +
 .../components/main/header/cp-title/index.tsx |    51 +
 .../webapp/components/main/header/index.tsx   |    45 +
 frontend/webapp/components/main/index.tsx     |     1 +
 .../modals/delete-entity-modal/index.tsx      |    73 +
 frontend/webapp/components/modals/index.tsx   |     1 +
 .../create.connection.form.tsx                |    11 +-
 .../components/setup/headers/header/index.tsx |    59 +
 .../webapp/components/setup/headers/index.tsx |     1 +
 frontend/webapp/components/setup/index.tsx    |     1 +
 .../webapp/components/setup/menu/index.tsx    |   147 +
 .../choose-action-modal/action-options.ts     |    59 +
 .../actions/choose-action-modal/index.tsx     |    92 +
 .../webapp/containers/main/actions/index.ts   |     1 +
 .../add-destination-modal/index.tsx           |   102 +
 .../choose-destination-menu/index.tsx         |    90 +
 .../choose-destination-modal-body/index.tsx   |   106 +
 .../configured-destinations-list/index.tsx    |   199 +
 .../connection-notification.tsx               |    30 +
 .../form-container.tsx                        |    50 +
 .../connect-destination-modal-body/index.tsx  |   252 +
 .../destination-list-item/index.tsx           |   121 +
 .../destinations-list/index.tsx               |    77 +
 .../potential-destinations-list/index.tsx     |    50 +
 .../dynamic-form-fields/index.tsx             |    70 +
 .../destinations/add-destination/index.tsx    |   102 +
 .../destinations/add-destination/styled.ts    |    21 +
 .../add-destination/test-connection/index.tsx |    80 +
 .../destination-drawer-container/index.tsx    |    99 +
 .../containers/main/destinations/index.tsx    |     2 +
 .../main/overview/add-entity/index.tsx        |   152 +
 .../webapp/containers/main/overview/index.ts  |     1 +
 .../overview/overview-actions-menu/index.tsx  |    57 +
 .../overview/overview-data-flow/index.tsx     |    56 +
 .../overview-drawer/drawer-footer/index.tsx   |    95 +
 .../overview-drawer/drawer-header/index.tsx   |   122 +
 .../main/overview/overview-drawer/index.tsx   |   233 +
 .../choose-source-modal/index.tsx             |    99 +
 .../choose-sources-body/index.tsx             |   136 +
 .../choose-sources-list/index.tsx             |   130 +
 .../choose-sources-menu/index.ts              |     2 +
 .../search-and-dropdown.tsx                   |    37 +
 .../toggles-and-checkboxes.tsx                |    61 +
 .../choose-sources-menu/type.ts               |    30 +
 .../main/sources/choose-sources/index.tsx     |    54 +
 .../webapp/containers/main/sources/index.ts   |     3 +
 .../sources/source-drawer-container/index.tsx |    31 +
 .../webapp/containers/setup/sources/index.tsx |     9 +-
 frontend/webapp/graphql/index.ts              |     2 +
 .../webapp/graphql/mutations/destination.ts   |    52 +
 frontend/webapp/graphql/mutations/index.ts    |     3 +
 .../webapp/graphql/mutations/namespace.ts     |     7 +
 frontend/webapp/graphql/mutations/source.ts   |    22 +
 .../graphql/queries/compute-platform.ts       |    78 +
 frontend/webapp/graphql/queries/config.ts     |    10 +
 .../webapp/graphql/queries/destination.ts     |    51 +
 frontend/webapp/graphql/queries/index.ts      |     3 +
 frontend/webapp/hooks/actions/index.ts        |     1 +
 .../webapp/hooks/actions/useGetActions.ts     |    10 +
 frontend/webapp/hooks/common/index.ts         |     1 +
 .../webapp/hooks/common/useContainerWidth.ts  |    23 +
 .../webapp/hooks/compute-platform/index.ts    |     2 +
 .../compute-platform/useComputePlatform.ts    |    17 +
 .../hooks/compute-platform/useNamespace.ts    |    44 +
 frontend/webapp/hooks/destinations/index.ts   |    10 +-
 .../destinations/useActualDestinations.ts     |    32 +
 .../hooks/destinations/useCheckConnection.ts  |    29 -
 .../destinations/useConnectDestinationForm.ts |    87 +
 .../destinations/useCreateDestination.ts      |    21 +
 .../destinations/useDestinationFormData.ts    |   165 +
 .../hooks/destinations/useDestinationTypes.ts |    36 +
 .../useEditDestinationFormHandlers.ts         |    22 +
 .../destinations/usePotentialDestinations.ts  |    60 +
 .../hooks/destinations/useTestConnection.ts   |    42 +
 .../destinations/useUpdateDestination.ts      |    33 +
 frontend/webapp/hooks/index.tsx               |     4 +
 frontend/webapp/hooks/new-config/index.ts     |     1 +
 frontend/webapp/hooks/new-config/useConfig.ts |    16 +
 frontend/webapp/hooks/overview/index.tsx      |     1 +
 .../hooks/overview/useNodeDataFlowHandlers.ts |    55 +
 frontend/webapp/hooks/setup/index.ts          |     1 +
 frontend/webapp/hooks/setup/useConnectEnv.ts  |    91 +
 frontend/webapp/hooks/sources/index.ts        |     4 +
 .../webapp/hooks/sources/useActualSources.ts  |    86 +
 .../hooks/sources/useConnectSourcesList.ts    |    40 +
 .../sources/useConnectSourcesMenuState.ts     |   107 +
 .../webapp/hooks/sources/usePersistSource.ts  |    46 +
 .../webapp/hooks/sources/useUpdateSource.ts   |    35 +
 frontend/webapp/hooks/useOnClickOutside.tsx   |    23 +-
 frontend/webapp/lib/gql/apollo-wrapper.tsx    |    54 +
 frontend/webapp/lib/gql/client.ts             |    12 +
 frontend/webapp/lib/gql/index.ts              |     1 +
 frontend/webapp/lib/index.ts                  |     1 +
 frontend/webapp/package.json                  |    12 +-
 frontend/webapp/public/brand/odigos-icon.svg  |     5 +
 .../public/brand/transparent-logo-black.svg   |    19 +
 .../public/brand/transparent-logo-white.svg   |    19 +
 .../public/icons/actions/addclusterinfo.svg   |     3 +
 .../public/icons/actions/deleteattribute.svg  |     3 +
 .../public/icons/actions/piimasking.svg       |     3 +
 .../public/icons/actions/renameattribute.svg  |     3 +
 .../webapp/public/icons/actions/sampler.svg   |     3 +
 .../public/icons/common/arrow-black.svg       |     8 +
 .../public/icons/common/arrow-right.svg       |    10 +
 .../public/icons/common/arrow-white.svg       |     8 +
 frontend/webapp/public/icons/common/check.svg |     3 +
 .../icons/common/connection-succeeded.svg     |     3 +
 frontend/webapp/public/icons/common/edit.svg  |     3 +
 .../public/icons/common/extend-arrow.svg      |     5 +
 .../webapp/public/icons/common/folder.svg     |     3 +
 frontend/webapp/public/icons/common/index.ts  |     3 +
 frontend/webapp/public/icons/common/info.svg  |     3 +
 .../public/icons/common/no-data-found.svg     |     3 +
 .../webapp/public/icons/common/plus-black.svg |     3 +
 frontend/webapp/public/icons/common/plus.svg  |     3 +
 .../webapp/public/icons/common/search.svg     |     3 +
 frontend/webapp/public/icons/common/trash.svg |     3 +
 frontend/webapp/public/icons/common/x.svg     |    14 +
 frontend/webapp/public/icons/cp/k8s.svg       |     4 +
 frontend/webapp/public/icons/index.ts         |     1 +
 .../webapp/public/icons/monitors/logs.svg     |     3 +
 .../webapp/public/icons/monitors/metrics.svg  |     3 +
 .../webapp/public/icons/monitors/traces.svg   |     3 +
 .../public/icons/notification/error-icon.svg  |     3 +
 .../public/icons/notification/error-icon2.svg |     3 +
 .../icons/notification/success-icon.svg       |     3 +
 .../icons/notification/warning-icon.svg       |     3 +
 .../webapp/public/icons/overview/actions.svg  |     3 +
 .../public/icons/overview/destinations.svg    |     5 +
 .../webapp/public/icons/overview/overview.svg |     3 +
 .../webapp/public/icons/overview/sources.svg  |     3 +
 .../auto-complete-input/index.tsx             |   281 +
 .../reuseable-components/button/index.tsx     |   123 +
 .../checkbox-list/index.tsx                   |    72 +
 .../reuseable-components/checkbox/index.tsx   |    80 +
 .../connection-status/index.tsx               |    89 +
 .../reuseable-components/counter/index.tsx    |    46 +
 .../reuseable-components/divider/index.tsx    |    36 +
 .../reuseable-components/drawer/index.tsx     |    80 +
 .../reuseable-components/dropdown/index.tsx   |   246 +
 .../fade-loader/helpers/animation.ts          |    27 +
 .../fade-loader/helpers/unitConverter.ts      |    77 +
 .../fade-loader/index.tsx                     |   137 +
 frontend/webapp/reuseable-components/index.ts |    26 +
 .../reuseable-components/input-list/index.tsx |   156 +
 .../reuseable-components/input/index.tsx      |   222 +
 .../key-value-input-list/index.tsx            |   189 +
 .../reuseable-components/modal/index.tsx      |   139 +
 .../navigation-buttons/index.tsx              |    90 +
 .../no-data-found/index.tsx                   |    54 +
 .../nodes-data-flow/builder.ts                |   222 +
 .../nodes-data-flow/index.tsx                 |    39 +
 .../nodes-data-flow/nodes/add-action-node.tsx |    77 +
 .../nodes-data-flow/nodes/base-node.tsx       |   167 +
 .../nodes-data-flow/nodes/header-node.tsx     |    54 +
 .../notification-note/index.tsx               |   145 +
 .../section-title/index.tsx                   |    64 +
 .../skeleton-loader/index.tsx                 |    66 +
 .../reuseable-components/tab-list/index.tsx   |    82 +
 .../webapp/reuseable-components/tag/index.tsx |    62 +
 .../reuseable-components/text/index.tsx       |    42 +
 .../reuseable-components/textarea/index.tsx   |   157 +
 .../reuseable-components/toggle/index.tsx     |    85 +
 .../reuseable-components/tooltip/index.tsx    |    80 +
 frontend/webapp/store/index.ts                |     5 +-
 frontend/webapp/store/slices/app-slice.ts     |    25 -
 frontend/webapp/store/slices/index.ts         |     1 -
 frontend/webapp/store/useAppStore.ts          |    56 +
 frontend/webapp/store/useDrawerStore.tsx      |    28 +
 .../webapp/styles/{palette.tsx => palette.ts} |     9 +-
 frontend/webapp/styles/theme.ts               |   142 +
 frontend/webapp/types/actions.ts              |     2 +-
 frontend/webapp/types/common.ts               |    24 +
 frontend/webapp/types/compute-platform.ts     |    22 +
 frontend/webapp/types/destinations.ts         |   128 +-
 frontend/webapp/types/index.ts                |     2 +
 frontend/webapp/types/namespace.ts            |     4 +
 frontend/webapp/types/sources.ts              |    33 +
 frontend/webapp/utils/constants/index.tsx     |     1 +
 frontend/webapp/utils/constants/monitors.ts   |    14 +
 .../utils/constants/programming-languages.ts  |    92 +
 frontend/webapp/utils/constants/urls.tsx      |     3 +-
 frontend/webapp/yarn.lock                     |   262 +-
 k8sutils/pkg/workload/workload.go             |    48 +
 233 files changed, 23844 insertions(+), 361 deletions(-)
 create mode 100644 frontend/Makefile
 create mode 100644 frontend/gqlgen.yml
 create mode 100644 frontend/graph/conversions.go
 create mode 100644 frontend/graph/generated.go
 create mode 100644 frontend/graph/model/destination.go
 create mode 100644 frontend/graph/model/models_gen.go
 create mode 100644 frontend/graph/resolver.go
 create mode 100644 frontend/graph/schema.graphqls
 create mode 100644 frontend/graph/schema.resolvers.go
 create mode 100644 frontend/services/destination_recognition/destination_finder.go
 create mode 100644 frontend/services/destination_recognition/elasticsearch.go
 create mode 100644 frontend/services/destination_recognition/jaeger.go
 create mode 100644 frontend/services/destinations.go
 create mode 100644 frontend/services/namespaces.go
 create mode 100644 frontend/services/sources.go
 create mode 100644 frontend/services/test_connection/conversion.go
 create mode 100644 frontend/services/test_connection/otlp_test_connection.go
 create mode 100644 frontend/services/test_connection/otlphttp_test_connection.go
 create mode 100644 frontend/services/test_connection/test_connection.go
 create mode 100644 frontend/services/test_connection/utils.go
 create mode 100644 frontend/services/test_connection/utils_test.go
 create mode 100644 frontend/services/utils.go
 delete mode 100644 frontend/webapp/app/(setup)/connect-destination/page.tsx
 create mode 100644 frontend/webapp/app/(setup)/styled.ts
 delete mode 100644 frontend/webapp/app/(setup)/styled.tsx
 create mode 100644 frontend/webapp/app/globals.css
 create mode 100644 frontend/webapp/app/main/layout.tsx
 create mode 100644 frontend/webapp/app/main/page.tsx
 create mode 100644 frontend/webapp/components/common/card-details/index.tsx
 create mode 100644 frontend/webapp/components/common/configured-fields/index.tsx
 create mode 100644 frontend/webapp/components/destinations/add-destination-button/index.tsx
 create mode 100644 frontend/webapp/components/destinations/edit-destination-form/index.tsx
 create mode 100644 frontend/webapp/components/destinations/index.ts
 create mode 100644 frontend/webapp/components/destinations/monitors-tap-list/index.tsx
 create mode 100644 frontend/webapp/components/main/header/cp-title/index.tsx
 create mode 100644 frontend/webapp/components/main/header/index.tsx
 create mode 100644 frontend/webapp/components/main/index.tsx
 create mode 100644 frontend/webapp/components/modals/delete-entity-modal/index.tsx
 create mode 100644 frontend/webapp/components/modals/index.tsx
 create mode 100644 frontend/webapp/components/setup/headers/header/index.tsx
 create mode 100644 frontend/webapp/components/setup/menu/index.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/destinations-list/potential-destinations-list/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/styled.ts
 create mode 100644 frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
 create mode 100644 frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/add-entity/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-drawer/index.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/index.ts
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/type.ts
 create mode 100644 frontend/webapp/containers/main/sources/choose-sources/index.tsx
 create mode 100644 frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
 create mode 100644 frontend/webapp/graphql/index.ts
 create mode 100644 frontend/webapp/graphql/mutations/destination.ts
 create mode 100644 frontend/webapp/graphql/mutations/index.ts
 create mode 100644 frontend/webapp/graphql/mutations/namespace.ts
 create mode 100644 frontend/webapp/graphql/mutations/source.ts
 create mode 100644 frontend/webapp/graphql/queries/compute-platform.ts
 create mode 100644 frontend/webapp/graphql/queries/config.ts
 create mode 100644 frontend/webapp/graphql/queries/destination.ts
 create mode 100644 frontend/webapp/graphql/queries/index.ts
 create mode 100644 frontend/webapp/hooks/actions/useGetActions.ts
 create mode 100644 frontend/webapp/hooks/common/index.ts
 create mode 100644 frontend/webapp/hooks/common/useContainerWidth.ts
 create mode 100644 frontend/webapp/hooks/compute-platform/index.ts
 create mode 100644 frontend/webapp/hooks/compute-platform/useComputePlatform.ts
 create mode 100644 frontend/webapp/hooks/compute-platform/useNamespace.ts
 create mode 100644 frontend/webapp/hooks/destinations/useActualDestinations.ts
 delete mode 100644 frontend/webapp/hooks/destinations/useCheckConnection.ts
 create mode 100644 frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
 create mode 100644 frontend/webapp/hooks/destinations/useCreateDestination.ts
 create mode 100644 frontend/webapp/hooks/destinations/useDestinationFormData.ts
 create mode 100644 frontend/webapp/hooks/destinations/useDestinationTypes.ts
 create mode 100644 frontend/webapp/hooks/destinations/useEditDestinationFormHandlers.ts
 create mode 100644 frontend/webapp/hooks/destinations/usePotentialDestinations.ts
 create mode 100644 frontend/webapp/hooks/destinations/useTestConnection.ts
 create mode 100644 frontend/webapp/hooks/destinations/useUpdateDestination.ts
 create mode 100644 frontend/webapp/hooks/new-config/index.ts
 create mode 100644 frontend/webapp/hooks/new-config/useConfig.ts
 create mode 100644 frontend/webapp/hooks/overview/index.tsx
 create mode 100644 frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
 create mode 100644 frontend/webapp/hooks/setup/useConnectEnv.ts
 create mode 100644 frontend/webapp/hooks/sources/useActualSources.ts
 create mode 100644 frontend/webapp/hooks/sources/useConnectSourcesList.ts
 create mode 100644 frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
 create mode 100644 frontend/webapp/hooks/sources/usePersistSource.ts
 create mode 100644 frontend/webapp/hooks/sources/useUpdateSource.ts
 create mode 100644 frontend/webapp/lib/gql/apollo-wrapper.tsx
 create mode 100644 frontend/webapp/lib/gql/client.ts
 create mode 100644 frontend/webapp/lib/gql/index.ts
 create mode 100644 frontend/webapp/lib/index.ts
 create mode 100644 frontend/webapp/public/brand/odigos-icon.svg
 create mode 100644 frontend/webapp/public/brand/transparent-logo-black.svg
 create mode 100644 frontend/webapp/public/brand/transparent-logo-white.svg
 create mode 100644 frontend/webapp/public/icons/actions/addclusterinfo.svg
 create mode 100644 frontend/webapp/public/icons/actions/deleteattribute.svg
 create mode 100644 frontend/webapp/public/icons/actions/piimasking.svg
 create mode 100644 frontend/webapp/public/icons/actions/renameattribute.svg
 create mode 100644 frontend/webapp/public/icons/actions/sampler.svg
 create mode 100644 frontend/webapp/public/icons/common/arrow-black.svg
 create mode 100644 frontend/webapp/public/icons/common/arrow-right.svg
 create mode 100644 frontend/webapp/public/icons/common/arrow-white.svg
 create mode 100644 frontend/webapp/public/icons/common/check.svg
 create mode 100644 frontend/webapp/public/icons/common/connection-succeeded.svg
 create mode 100644 frontend/webapp/public/icons/common/edit.svg
 create mode 100644 frontend/webapp/public/icons/common/extend-arrow.svg
 create mode 100644 frontend/webapp/public/icons/common/folder.svg
 create mode 100644 frontend/webapp/public/icons/common/index.ts
 create mode 100644 frontend/webapp/public/icons/common/info.svg
 create mode 100644 frontend/webapp/public/icons/common/no-data-found.svg
 create mode 100644 frontend/webapp/public/icons/common/plus-black.svg
 create mode 100644 frontend/webapp/public/icons/common/plus.svg
 create mode 100644 frontend/webapp/public/icons/common/search.svg
 create mode 100644 frontend/webapp/public/icons/common/trash.svg
 create mode 100644 frontend/webapp/public/icons/common/x.svg
 create mode 100644 frontend/webapp/public/icons/cp/k8s.svg
 create mode 100644 frontend/webapp/public/icons/index.ts
 create mode 100644 frontend/webapp/public/icons/monitors/logs.svg
 create mode 100644 frontend/webapp/public/icons/monitors/metrics.svg
 create mode 100644 frontend/webapp/public/icons/monitors/traces.svg
 create mode 100644 frontend/webapp/public/icons/notification/error-icon.svg
 create mode 100644 frontend/webapp/public/icons/notification/error-icon2.svg
 create mode 100644 frontend/webapp/public/icons/notification/success-icon.svg
 create mode 100644 frontend/webapp/public/icons/notification/warning-icon.svg
 create mode 100644 frontend/webapp/public/icons/overview/actions.svg
 create mode 100644 frontend/webapp/public/icons/overview/destinations.svg
 create mode 100644 frontend/webapp/public/icons/overview/overview.svg
 create mode 100644 frontend/webapp/public/icons/overview/sources.svg
 create mode 100644 frontend/webapp/reuseable-components/auto-complete-input/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/button/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/checkbox-list/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/checkbox/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/connection-status/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/counter/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/divider/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/drawer/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/dropdown/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/fade-loader/helpers/animation.ts
 create mode 100644 frontend/webapp/reuseable-components/fade-loader/helpers/unitConverter.ts
 create mode 100644 frontend/webapp/reuseable-components/fade-loader/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/index.ts
 create mode 100644 frontend/webapp/reuseable-components/input-list/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/input/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/key-value-input-list/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/modal/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/navigation-buttons/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/no-data-found/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
 create mode 100644 frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
 create mode 100644 frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
 create mode 100644 frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
 create mode 100644 frontend/webapp/reuseable-components/notification-note/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/section-title/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/skeleton-loader/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/tab-list/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/tag/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/text/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/textarea/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/toggle/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/tooltip/index.tsx
 delete mode 100644 frontend/webapp/store/slices/app-slice.ts
 create mode 100644 frontend/webapp/store/useAppStore.ts
 create mode 100644 frontend/webapp/store/useDrawerStore.tsx
 rename frontend/webapp/styles/{palette.tsx => palette.ts} (86%)
 create mode 100644 frontend/webapp/styles/theme.ts
 create mode 100644 frontend/webapp/types/compute-platform.ts
 create mode 100644 frontend/webapp/types/namespace.ts
 create mode 100644 frontend/webapp/utils/constants/monitors.ts
 create mode 100644 frontend/webapp/utils/constants/programming-languages.ts

diff --git a/.vscode/launch.json b/.vscode/launch.json
index aec4ea6f8..a3ba143a6 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,64 +1,69 @@
 {
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Remote Odiglet",
-            "type": "go",
-            "request": "attach",
-            "mode": "remote",
-            "debugAdapter": "legacy",
-            "port": 2345,
-            "host": "127.0.0.1",
-            "remotePath": ""
-        },
-        {
-            "name": "instrumentor local",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/instrumentor",
-            "cwd": "${workspaceFolder}/instrumentor",
-            "env": {
-                "LOCAL_MUTATING_WEBHOOK_CERT_DIR": "${workspaceFolder}/serving-certs"
-            }            
-        },
-        {
-            "name": "frontend",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/frontend",
-            "cwd": "${workspaceFolder}/frontend",
-            "args": ["--port", "8085", "--address", "0.0.0.0"]
-        },
-        {
-            "name": "autoscaler local",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/autoscaler",
-            "cwd": "${workspaceFolder}/autoscaler",
-            "env": {
-                "ODIGOS_VERSION": "v1.0.90"
-            }
-        },
-        {
-            "name": "scheduler local",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/scheduler",
-            "cwd": "${workspaceFolder}/scheduler"
-        },
-        {
-            "name": "cli uninstall",
-            "type": "go",
-            "request": "launch",
-            "mode": "debug",
-            "program": "${workspaceFolder}/cli",
-            "cwd": "${workspaceFolder}/cli",
-            "args": ["uninstall", "--yes"],
-            "buildFlags": "-tags=embed_manifests"
-        }
-    ]
-}
\ No newline at end of file
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Remote Odiglet",
+      "type": "go",
+      "request": "attach",
+      "mode": "remote",
+      "debugAdapter": "legacy",
+      "port": 2345,
+      "host": "127.0.0.1",
+      "remotePath": ""
+    },
+    {
+      "name": "instrumentor local",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/instrumentor",
+      "cwd": "${workspaceFolder}/instrumentor"
+    },
+    {
+      "name": "frontend",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/frontend",
+      "cwd": "${workspaceFolder}/frontend",
+      "args": ["--port", "8085", "--address", "0.0.0.0"]
+    },
+    {
+      "name": "gql-playground",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/frontend/main.go",
+      "cwd": "${workspaceFolder}/frontend"
+    },
+    {
+      "name": "autoscaler local",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/autoscaler",
+      "cwd": "${workspaceFolder}/autoscaler",
+      "env": {
+        "ODIGOS_VERSION": "v1.0.90"
+      }
+    },
+    {
+      "name": "scheduler local",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/scheduler",
+      "cwd": "${workspaceFolder}/scheduler"
+    },
+    {
+      "name": "cli uninstall",
+      "type": "go",
+      "request": "launch",
+      "mode": "debug",
+      "program": "${workspaceFolder}/cli",
+      "cwd": "${workspaceFolder}/cli",
+      "args": ["uninstall", "--yes"],
+      "buildFlags": "-tags=embed_manifests"
+    }
+  ]
+}
diff --git a/frontend/Makefile b/frontend/Makefile
new file mode 100644
index 000000000..a3dc15e31
--- /dev/null
+++ b/frontend/Makefile
@@ -0,0 +1,2 @@
+gqlgen:
+	go run github.com/99designs/gqlgen generate
\ No newline at end of file
diff --git a/frontend/endpoints/applications.go b/frontend/endpoints/applications.go
index a29346cf0..0a71c5a39 100644
--- a/frontend/endpoints/applications.go
+++ b/frontend/endpoints/applications.go
@@ -31,12 +31,10 @@ const (
 )
 
 type GetApplicationItemInNamespace struct {
-	Name                      string       `json:"name"`
-	Kind                      WorkloadKind `json:"kind"`
-	Instances                 int          `json:"instances"`
-	AppInstrumentationLabeled *bool        `json:"app_instrumentation_labeled"`
-	NsInstrumentationLabeled  *bool        `json:"ns_instrumentation_labeled"`
-	InstrumentationEffective  bool         `json:"instrumentation_effective"`
+	Name            string       `json:"name"`
+	Kind            WorkloadKind `json:"kind"`
+	Instances       int          `json:"instances"`
+	WorkloadLabeled *bool        `json:"workload_labels"`
 }
 
 type GetApplicationItem struct {
@@ -113,19 +111,6 @@ func getApplicationsInNamespace(ctx context.Context, nsName string, nsInstrument
 	copy(items[len(deps):], ss)
 	copy(items[len(deps)+len(ss):], dss)
 
-	for i := range items {
-		item := &items[i]
-		// check if the entire namespace is instrumented
-		// as it affects the applications in the namespace
-		// which use this label to determine if they should be instrumented
-		nsInstrumentationLabeled := nsInstrumentedMap[item.namespace]
-		item.nsItem.NsInstrumentationLabeled = nsInstrumentationLabeled
-		appInstrumented := (item.nsItem.AppInstrumentationLabeled != nil && *item.nsItem.AppInstrumentationLabeled)
-		appInstrumentationInherited := item.nsItem.AppInstrumentationLabeled == nil
-		nsInstrumented := (nsInstrumentationLabeled != nil && *nsInstrumentationLabeled)
-		item.nsItem.InstrumentationEffective = appInstrumented || (appInstrumentationInherited && nsInstrumented)
-	}
-
 	return items, nil
 }
 
@@ -137,10 +122,10 @@ func getDeployments(namespace string, ctx context.Context) ([]GetApplicationItem
 			response = append(response, GetApplicationItem{
 				namespace: dep.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:                      dep.Name,
-					Kind:                      WorkloadKindDeployment,
-					Instances:                 int(dep.Status.AvailableReplicas),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
+					Name:            dep.Name,
+					Kind:            WorkloadKindDeployment,
+					Instances:       int(dep.Status.AvailableReplicas),
+					WorkloadLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
@@ -162,10 +147,10 @@ func getStatefulSets(namespace string, ctx context.Context) ([]GetApplicationIte
 			response = append(response, GetApplicationItem{
 				namespace: ss.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:                      ss.Name,
-					Kind:                      WorkloadKindStatefulSet,
-					Instances:                 int(ss.Status.ReadyReplicas),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
+					Name:            ss.Name,
+					Kind:            WorkloadKindStatefulSet,
+					Instances:       int(ss.Status.ReadyReplicas),
+					WorkloadLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
@@ -187,10 +172,10 @@ func getDaemonSets(namespace string, ctx context.Context) ([]GetApplicationItem,
 			response = append(response, GetApplicationItem{
 				namespace: ds.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:                      ds.Name,
-					Kind:                      WorkloadKindDaemonSet,
-					Instances:                 int(ds.Status.NumberReady),
-					AppInstrumentationLabeled: appInstrumentationLabeled,
+					Name:            ds.Name,
+					Kind:            WorkloadKindDaemonSet,
+					Instances:       int(ds.Status.NumberReady),
+					WorkloadLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
diff --git a/frontend/endpoints/config.go b/frontend/endpoints/config.go
index f58e77131..f98dcc73b 100644
--- a/frontend/endpoints/config.go
+++ b/frontend/endpoints/config.go
@@ -4,9 +4,7 @@ import (
 	"context"
 	"fmt"
 	"log"
-	"net/http"
 
-	"github.com/gin-gonic/gin"
 	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/frontend/kube"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
@@ -24,17 +22,17 @@ type GetConfigResponse struct {
 	Installation InstallationStatus `json:"installation"`
 }
 
-func GetConfig(c *gin.Context) {
+func GetConfig(c context.Context) GetConfigResponse {
 	var response GetConfigResponse
-	if !isSomethingLabeled(c.Request.Context()) {
+	if !isSomethingLabeled(c) {
 		response.Installation = NewInstallation
-	} else if !isDestinationChosen(c.Request.Context()) {
+	} else if !isDestinationChosen(c) {
 		response.Installation = AppsSelected
 	} else {
 		response.Installation = Finished
 	}
 
-	c.JSON(http.StatusOK, response)
+	return response
 }
 
 func isDestinationChosen(ctx context.Context) bool {
diff --git a/frontend/endpoints/destinations.go b/frontend/endpoints/destinations.go
index 6eb900f2b..0be797fb8 100644
--- a/frontend/endpoints/destinations.go
+++ b/frontend/endpoints/destinations.go
@@ -4,9 +4,10 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"net/http"
+
 	"github.com/odigos-io/odigos/frontend/endpoints/destination_recognition"
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
-	"net/http"
 
 	"github.com/gin-gonic/gin"
 	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
diff --git a/frontend/endpoints/namespaces.go b/frontend/endpoints/namespaces.go
index 9c88632b9..55184c9f7 100644
--- a/frontend/endpoints/namespaces.go
+++ b/frontend/endpoints/namespaces.go
@@ -74,6 +74,46 @@ func GetNamespaces(c *gin.Context, odigosns string) {
 	c.JSON(http.StatusOK, response)
 }
 
+func GetK8SNamespaces(ctx context.Context, odigosns string) GetNamespacesResponse {
+
+	var (
+		relevantNameSpaces []v1.Namespace
+		appsPerNamespace   map[string]int
+	)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.Go(func() error {
+		var err error
+		relevantNameSpaces, err = getRelevantNameSpaces(ctx, odigosns)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		appsPerNamespace, err = CountAppsPerNamespace(ctx)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+
+		return GetNamespacesResponse{}
+	}
+
+	var response GetNamespacesResponse
+	for _, namespace := range relevantNameSpaces {
+		// check if entire namespace is instrumented
+		selected := namespace.Labels[consts.OdigosInstrumentationLabel] == consts.InstrumentationEnabled
+
+		response.Namespaces = append(response.Namespaces, GetNamespaceItem{
+			Name:      namespace.Name,
+			Selected:  selected,
+			TotalApps: appsPerNamespace[namespace.Name],
+		})
+	}
+
+	return response
+}
+
 // getRelevantNameSpaces returns a list of namespaces that are relevant for instrumentation.
 // Taking into account the ignored namespaces from the OdigosConfiguration.
 func getRelevantNameSpaces(ctx context.Context, odigosns string) ([]v1.Namespace, error) {
diff --git a/frontend/endpoints/sources.go b/frontend/endpoints/sources.go
index 222e7afed..682e1ce45 100644
--- a/frontend/endpoints/sources.go
+++ b/frontend/endpoints/sources.go
@@ -85,13 +85,7 @@ func GetSources(c *gin.Context, odigosns string) {
 	}
 
 	for _, item := range items {
-		if item.nsItem.InstrumentationEffective {
-			id := common.SourceID{Namespace: item.namespace, Kind: workload.WorkloadKind(item.nsItem.Kind), Name: item.nsItem.Name}
-			effectiveInstrumentedSources[id] = ThinSource{
-				NumberOfRunningInstances: item.nsItem.Instances,
-				SourceID:                 id,
-			}
-		}
+		println(item.nsItem.Name)
 	}
 
 	sourcesResult := []ThinSource{}
diff --git a/frontend/go.mod b/frontend/go.mod
index 5a5a36606..617ea6275 100644
--- a/frontend/go.mod
+++ b/frontend/go.mod
@@ -3,6 +3,7 @@ module github.com/odigos-io/odigos/frontend
 go 1.22.0
 
 require (
+	github.com/99designs/gqlgen v0.17.49
 	github.com/gin-contrib/cors v1.4.0
 	github.com/gin-gonic/gin v1.9.1
 	github.com/go-logr/logr v1.4.2
@@ -11,6 +12,7 @@ require (
 	github.com/odigos-io/odigos/destinations v0.0.0-20240223090638-df3328a088bc
 	github.com/odigos-io/odigos/k8sutils v0.0.0
 	github.com/stretchr/testify v1.9.0
+	github.com/vektah/gqlparser/v2 v2.5.16
 	go.opentelemetry.io/collector/component v0.106.1
 	go.opentelemetry.io/collector/confmap v0.106.1
 	go.opentelemetry.io/collector/exporter v0.106.0
@@ -78,6 +80,7 @@ require (
 )
 
 require (
+	github.com/agnivade/levenshtein v1.1.1 // indirect
 	github.com/bytedance/sonic v1.9.2 // indirect
 	github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311 // indirect
 	github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc // indirect
@@ -101,6 +104,8 @@ require (
 	github.com/google/go-cmp v0.6.0 // indirect
 	github.com/google/gofuzz v1.2.0 // indirect
 	github.com/google/uuid v1.6.0 // indirect
+	github.com/gorilla/websocket v1.5.0 // indirect
+	github.com/hashicorp/golang-lru/v2 v2.0.7 // indirect
 	github.com/imdario/mergo v0.3.12 // indirect
 	github.com/josharian/intern v1.0.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
@@ -109,11 +114,13 @@ require (
 	github.com/mailru/easyjson v0.7.7 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mitchellh/mapstructure v1.5.0 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 // indirect
 	github.com/pelletier/go-toml/v2 v2.0.8 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
+	github.com/sosodev/duration v1.3.1 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.11 // indirect
@@ -150,4 +157,5 @@ replace (
 	github.com/odigos-io/odigos/common => ../common
 	github.com/odigos-io/odigos/destinations => ../destinations
 	github.com/odigos-io/odigos/k8sutils => ../k8sutils
+
 )
diff --git a/frontend/go.sum b/frontend/go.sum
index c481a4420..a6ed52ff1 100644
--- a/frontend/go.sum
+++ b/frontend/go.sum
@@ -1,3 +1,15 @@
+github.com/99designs/gqlgen v0.17.49 h1:b3hNGexHd33fBSAd4NDT/c3NCcQzcAVkknhN9ym36YQ=
+github.com/99designs/gqlgen v0.17.49/go.mod h1:tC8YFVZMed81x7UJ7ORUwXF4Kn6SXuucFqQBhN8+BU0=
+github.com/PuerkitoBio/goquery v1.9.2 h1:4/wZksC3KgkQw7SQgkKotmKljk0M6V8TUvA8Wb4yPeE=
+github.com/PuerkitoBio/goquery v1.9.2/go.mod h1:GHPCaP0ODyyxqcNoFGYlAprUFH81NuRPd0GX3Zu2Mvk=
+github.com/agnivade/levenshtein v1.1.1 h1:QY8M92nrzkmr798gCo3kmMyqXFzdQVpxLlGPRBij0P8=
+github.com/agnivade/levenshtein v1.1.1/go.mod h1:veldBMzWxcCG2ZvUTKD2kJNRdCk5hVbJomOvKkmgYbo=
+github.com/andreyvit/diff v0.0.0-20170406064948-c7f18ee00883 h1:bvNMNQO63//z+xNgfBlViaCIJKLlCJ6/fmUseuG0wVQ=
+github.com/andreyvit/diff v0.0.0-20170406064948-c7f18ee00883/go.mod h1:rCTlJbsFo29Kk6CurOXKm700vrz8f0KW0JNfpkRJY/8=
+github.com/andybalholm/cascadia v1.3.2 h1:3Xi6Dw5lHF15JtdcmAHD3i1+T8plmv7BQ/nsViSLyss=
+github.com/andybalholm/cascadia v1.3.2/go.mod h1:7gtRlve5FxPPgIgX36uWBX58OdBsSS6lUvCFb+h7KvU=
+github.com/arbovm/levenshtein v0.0.0-20160628152529-48b4e1c0c4d0 h1:jfIu9sQUG6Ig+0+Ap1h4unLjW6YQJpKZVmUzxsD4E/Q=
+github.com/arbovm/levenshtein v0.0.0-20160628152529-48b4e1c0c4d0/go.mod h1:t2tdKJDJF9BV14lnkjHmOQgcvEKgtqs5a1N3LNdJhGE=
 github.com/beorn7/perks v1.0.1 h1:VlbKKnNfV8bJzeqoa4cOKqO6bYr3WgKZxO8Z16+hsOM=
 github.com/beorn7/perks v1.0.1/go.mod h1:G2ZrVWU2WbWT9wwq4/hrbKbnv/1ERSJQ0ibhJ6rlkpw=
 github.com/bytedance/sonic v1.5.0/go.mod h1:ED5hyg4y6t3/9Ku1R6dU/4KyJ48DZ4jPhfY1O2AihPM=
@@ -15,6 +27,8 @@ github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSs
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48 h1:fRzb/w+pyskVMQ+UbP35JkH8yB7MYb4q/qhBarqZE6g=
+github.com/dgryski/trifles v0.0.0-20200323201526-dd97f9abfb48/go.mod h1:if7Fbed8SFyPtHLHbg49SI7NAdJiC5WIA09pe59rfAA=
 github.com/emicklei/go-restful/v3 v3.11.0 h1:rAQeMHw1c7zTmncogyy8VvRZwtkmkZ4FxERmMY4rD+g=
 github.com/emicklei/go-restful/v3 v3.11.0/go.mod h1:6n3XBCmQQb25CM2LCACGz8ukIrRry+4bhvbpWn3mrbc=
 github.com/evanphx/json-patch/v5 v5.9.0 h1:kcBlZQbplgElYIlo/n1hJbls2z/1awpXxpRi0/FOJfg=
@@ -91,10 +105,14 @@ github.com/google/pprof v0.0.0-20240525223248-4bfdf5a9a2af h1:kmjWCqn2qkEml422C2
 github.com/google/pprof v0.0.0-20240525223248-4bfdf5a9a2af/go.mod h1:K1liHPHnj73Fdn/EKuT8nrFqBihUSKXoLYU0BuatOYo=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
+github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/grpc-ecosystem/grpc-gateway/v2 v2.20.0 h1:bkypFPDjIYGfCYD5mRBvpqxfYX1YCS1PXdKYWi8FsN0=
 github.com/grpc-ecosystem/grpc-gateway/v2 v2.20.0/go.mod h1:P+Lt/0by1T8bfcF3z737NnSbmxQAppXMRziHUxPOC8k=
 github.com/hashicorp/go-version v1.7.0 h1:5tqGy27NaOTB8yJKUZELlFAS/LTKJkrmONwQKeRZfjY=
 github.com/hashicorp/go-version v1.7.0/go.mod h1:fltr4n8CU8Ke44wwGCBoEymUuxUHl09ZGVZPK5anwXA=
+github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
+github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
 github.com/imdario/mergo v0.3.12 h1:b6R2BslTbIEToALKP7LxUvijTsNI9TAe80pLWN2g/HU=
 github.com/imdario/mergo v0.3.12/go.mod h1:jmQim1M+e3UYxmgPu/WyfjB3N3VflVyUjjjwH0dnCYA=
 github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY=
@@ -136,6 +154,8 @@ github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWE
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mitchellh/copystructure v1.2.0 h1:vpKXTN4ewci03Vljg/q9QvCGUDttBOGBIa15WveJJGw=
 github.com/mitchellh/copystructure v1.2.0/go.mod h1:qLl+cE2AmVv+CoeAwDPye/v+N2HKCj9FbZEVFJRxO9s=
+github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
+github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 github.com/mitchellh/reflectwalk v1.0.2 h1:G2LzWKi524PWgd3mLHV8Y5k7s6XUvT0Gef6zxSIeXaQ=
 github.com/mitchellh/reflectwalk v1.0.2/go.mod h1:mSTlrgnPZtwu0c4WaC2kGObEpuNDbx0jmZXqmk4esnw=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -174,6 +194,10 @@ github.com/rogpeppe/go-internal v1.12.0 h1:exVL4IDcn6na9z1rAb56Vxr+CgyK3nn3O+epU
 github.com/rogpeppe/go-internal v1.12.0/go.mod h1:E+RYuTGaKKdloAfM02xzb0FW3Paa99yedzYV+kq4uf4=
 github.com/rs/cors v1.11.0 h1:0B9GE/r9Bc2UxRMMtymBkHTenPkHDv0CW4Y98GBY+po=
 github.com/rs/cors v1.11.0/go.mod h1:XyqrcTp5zjWr1wsJ8PIRZssZ8b/WMcMf71DJnit4EMU=
+github.com/sergi/go-diff v1.3.1 h1:xkr+Oxo4BOQKmkn/B9eMK0g5Kg/983T9DqqPHwYqD+8=
+github.com/sergi/go-diff v1.3.1/go.mod h1:aMJSSKb2lpPvRNec0+w3fl7LP9IOFzdc9Pa4NFbPK1I=
+github.com/sosodev/duration v1.3.1 h1:qtHBDMQ6lvMQsL15g4aopM4HEfOaYuhWBw3NPTtlqq4=
+github.com/sosodev/duration v1.3.1/go.mod h1:RQIBBX0+fMLc/D9+Jb/fwvVmo0eZvDDEERAikUR6SDg=
 github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
@@ -197,6 +221,8 @@ github.com/ugorji/go v1.2.7/go.mod h1:nF9osbDWLy6bDVv/Rtoh6QgnvNDpmCalQV5urGCCS6
 github.com/ugorji/go/codec v1.2.7/go.mod h1:WGN1fab3R1fzQlVQTkfxVtIBhWDRqOviHU95kRgeqEY=
 github.com/ugorji/go/codec v1.2.11 h1:BMaWp1Bb6fHwEtbplGBGJ498wD+LKlNSl25MjdZY4dU=
 github.com/ugorji/go/codec v1.2.11/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
+github.com/vektah/gqlparser/v2 v2.5.16 h1:1gcmLTvs3JLKXckwCwlUagVn/IlV2bwqle0vJ0vy5p8=
+github.com/vektah/gqlparser/v2 v2.5.16/go.mod h1:1lz1OeCqgQbQepsGxPVywrjdBHW2T08PUS3pJqepRww=
 github.com/x448/float16 v0.8.4 h1:qLwI1I70+NjRFUR3zs1JPUCgaCXSh3SW62uAKT1mSBM=
 github.com/x448/float16 v0.8.4/go.mod h1:14CWIYCyZA/cWjXOioeEpHeN/83MdbZDRQHoFcYsOfg=
 github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
@@ -358,8 +384,8 @@ golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGm
 golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.0.0-20200619180055-7c47624df98f/go.mod h1:EkVYQZoAsY45+roYkvgYkIh4xh/qjgUK9TdY2XT94GE=
 golang.org/x/tools v0.0.0-20210106214847-113979e3529a/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
-golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d h1:vU5i/LfpvrRCpgM/VPfJLg5KjxD3E+hfT1SH+d9zLwg=
-golang.org/x/tools v0.21.1-0.20240508182429-e35e4ccd0d2d/go.mod h1:aiJjzUbINMkxbQROHiO6hDPo2LHcIPhhQsa9DLh0yGk=
+golang.org/x/tools v0.22.0 h1:gqSGLZqv+AI9lIQzniJ0nZDRG5GBPsSi+DRNHWNz6yA=
+golang.org/x/tools v0.22.0/go.mod h1:aCwcsjqvq7Yqt6TNyX7QMU2enbQ/Gt0bo6krSeEri+c=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
new file mode 100644
index 000000000..7212cc7cb
--- /dev/null
+++ b/frontend/gqlgen.yml
@@ -0,0 +1,62 @@
+# Where are all the schema files located? globs are supported eg  src/**/*.graphqls
+schema:
+  - graph/*.graphqls
+
+# Where should the generated server code go?
+exec:
+  filename: graph/generated.go
+  package: graph
+
+# Uncomment to enable federation
+# federation:
+#   filename: graph/federation.go
+#   package: graph
+
+# Where should any generated models go?
+model:
+  filename: graph/model/models_gen.go
+  package: model
+
+# Where should the resolver implementations go?
+resolver:
+  layout: follow-schema
+  dir: graph
+  package: graph
+  filename_template: '{name}.resolvers.go'
+
+# gqlgen will search for any type names in the schema in these go packages
+# if they match it will use them, otherwise it will generate them.
+autobind:
+  - 'github.com/odigos-io/odigos/frontend/graph/model'
+
+models:
+  ID:
+    model:
+      - github.com/99designs/gqlgen/graphql.ID
+      - github.com/99designs/gqlgen/graphql.Int
+      - github.com/99designs/gqlgen/graphql.Int64
+      - github.com/99designs/gqlgen/graphql.Int32
+  Int:
+    model:
+      - github.com/99designs/gqlgen/graphql.Int
+      - github.com/99designs/gqlgen/graphql.Int64
+      - github.com/99designs/gqlgen/graphql.Int32
+
+  ComputePlatform:
+    fields:
+      k8sActualNamespace:
+        resolver: true
+      k8sActualNamespaces:
+        resolver: true
+      k8sActualSource:
+        resolver: true
+      destinations:
+        resolver: true
+      actions:
+        resolver: true
+      k8sActualSources:
+        resolver: true
+  K8sActualNamespace:
+    fields:
+      k8sActualSources:
+        resolver: true
diff --git a/frontend/graph/conversions.go b/frontend/graph/conversions.go
new file mode 100644
index 000000000..71b7df4fa
--- /dev/null
+++ b/frontend/graph/conversions.go
@@ -0,0 +1,150 @@
+package graph
+
+import (
+	"time"
+
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	gqlmodel "github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/services"
+	v1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+func k8sKindToGql(k8sResourceKind string) gqlmodel.K8sResourceKind {
+	switch k8sResourceKind {
+	case "Deployment":
+		return gqlmodel.K8sResourceKindDeployment
+	case "StatefulSet":
+		return gqlmodel.K8sResourceKindStatefulSet
+	case "DaemonSet":
+		return gqlmodel.K8sResourceKindDaemonSet
+	}
+	return ""
+}
+
+func k8sConditionStatusToGql(status v1.ConditionStatus) gqlmodel.ConditionStatus {
+	switch status {
+	case v1.ConditionTrue:
+		return gqlmodel.ConditionStatusTrue
+	case v1.ConditionFalse:
+		return gqlmodel.ConditionStatusFalse
+	case v1.ConditionUnknown:
+		return gqlmodel.ConditionStatusUnknown
+	}
+	return gqlmodel.ConditionStatusUnknown
+
+}
+
+func k8sLastTransitionTimeToGql(t v1.Time) *string {
+	if t.IsZero() {
+		return nil
+	}
+	str := t.UTC().Format(time.RFC3339)
+	return &str
+}
+
+func k8sThinSourceToGql(k8sSource *services.ThinSource) *gqlmodel.K8sActualSource {
+
+	hasInstrumentedApplication := k8sSource.IaDetails != nil
+
+	var gqlIaDetails *gqlmodel.InstrumentedApplicationDetails
+	if hasInstrumentedApplication {
+		gqlIaDetails = &gqlmodel.InstrumentedApplicationDetails{
+			Containers: make([]*gqlmodel.SourceContainerRuntimeDetails, len(k8sSource.IaDetails.Languages)),
+			Conditions: make([]*gqlmodel.Condition, len(k8sSource.IaDetails.Conditions)),
+		}
+
+		for i, lang := range k8sSource.IaDetails.Languages {
+			gqlIaDetails.Containers[i] = &gqlmodel.SourceContainerRuntimeDetails{
+				ContainerName: lang.ContainerName,
+				Language:      lang.Language,
+			}
+		}
+
+		for i, cond := range k8sSource.IaDetails.Conditions {
+			gqlIaDetails.Conditions[i] = &gqlmodel.Condition{
+				Type:               cond.Type,
+				Status:             k8sConditionStatusToGql(cond.Status),
+				Reason:             &cond.Reason,
+				LastTransitionTime: k8sLastTransitionTimeToGql(cond.LastTransitionTime),
+				Message:            &cond.Message,
+			}
+		}
+	}
+
+	return &gqlmodel.K8sActualSource{
+		Namespace:                      k8sSource.Namespace,
+		Kind:                           k8sKindToGql(k8sSource.Kind),
+		Name:                           k8sSource.Name,
+		NumberOfInstances:              &k8sSource.NumberOfRunningInstances,
+		InstrumentedApplicationDetails: gqlIaDetails,
+	}
+}
+
+func k8sSourceToGql(k8sSource *services.Source) *gqlmodel.K8sActualSource {
+	baseSource := k8sThinSourceToGql(&k8sSource.ThinSource)
+	return &gqlmodel.K8sActualSource{
+		Namespace:                      baseSource.Namespace,
+		Kind:                           baseSource.Kind,
+		Name:                           baseSource.Name,
+		NumberOfInstances:              baseSource.NumberOfInstances,
+		InstrumentedApplicationDetails: baseSource.InstrumentedApplicationDetails,
+		ServiceName:                    &k8sSource.ReportedName,
+	}
+}
+
+func instrumentedApplicationToActualSource(instrumentedApp v1alpha1.InstrumentedApplication) *gqlmodel.K8sActualSource {
+	// Map the container runtime details
+	var containers []*gqlmodel.SourceContainerRuntimeDetails
+	for _, container := range instrumentedApp.Spec.RuntimeDetails {
+		containers = append(containers, &gqlmodel.SourceContainerRuntimeDetails{
+			ContainerName: container.ContainerName,
+			Language:      string(container.Language),
+		})
+	}
+
+	// Map the conditions of the application
+	var conditions []*gqlmodel.Condition
+	for _, condition := range instrumentedApp.Status.Conditions {
+		conditions = append(conditions, &gqlmodel.Condition{
+			Type:               condition.Type,
+			Status:             k8sConditionStatusToGql(condition.Status),
+			Reason:             &condition.Reason,
+			LastTransitionTime: k8sLastTransitionTimeToGql(condition.LastTransitionTime),
+			Message:            &condition.Message,
+		})
+	}
+
+	// Map the options for instrumentation libraries
+	var instrumentationOptions []*gqlmodel.InstrumentedApplicationDetails
+	for _, option := range instrumentedApp.Spec.Options {
+		for _, libOptions := range option.InstrumentationLibraries {
+			var libraries []*gqlmodel.InstrumentationOption
+			for _, configOption := range libOptions.Options {
+				libraries = append(libraries, &gqlmodel.InstrumentationOption{
+					OptionKey: configOption.OptionKey,
+					SpanKind:  gqlmodel.SpanKind(configOption.SpanKind),
+				})
+			}
+
+			instrumentationOptions = append(instrumentationOptions, &gqlmodel.InstrumentedApplicationDetails{
+				Containers: containers,
+				Conditions: conditions,
+			})
+		}
+	}
+
+	// Return the converted K8sActualSource object
+	return &gqlmodel.K8sActualSource{
+		Namespace:                instrumentedApp.Namespace,
+		Kind:                     k8sKindToGql(instrumentedApp.OwnerReferences[0].Kind),
+		Name:                     instrumentedApp.OwnerReferences[0].Name,
+		ServiceName:              &instrumentedApp.Name,
+		NumberOfInstances:        nil,
+		AutoInstrumented:         instrumentedApp.Spec.Options != nil,
+		AutoInstrumentedDecision: "",
+		InstrumentedApplicationDetails: &gqlmodel.InstrumentedApplicationDetails{
+			Containers: containers,
+			Conditions: conditions,
+		},
+	}
+}
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
new file mode 100644
index 000000000..024d98918
--- /dev/null
+++ b/frontend/graph/generated.go
@@ -0,0 +1,10937 @@
+// Code generated by github.com/99designs/gqlgen, DO NOT EDIT.
+
+package graph
+
+import (
+	"bytes"
+	"context"
+	"embed"
+	"errors"
+	"fmt"
+	"strconv"
+	"sync"
+	"sync/atomic"
+
+	"github.com/99designs/gqlgen/graphql"
+	"github.com/99designs/gqlgen/graphql/introspection"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	gqlparser "github.com/vektah/gqlparser/v2"
+	"github.com/vektah/gqlparser/v2/ast"
+)
+
+// region    ************************** generated!.gotpl **************************
+
+// NewExecutableSchema creates an ExecutableSchema from the ResolverRoot interface.
+func NewExecutableSchema(cfg Config) graphql.ExecutableSchema {
+	return &executableSchema{
+		schema:     cfg.Schema,
+		resolvers:  cfg.Resolvers,
+		directives: cfg.Directives,
+		complexity: cfg.Complexity,
+	}
+}
+
+type Config struct {
+	Schema     *ast.Schema
+	Resolvers  ResolverRoot
+	Directives DirectiveRoot
+	Complexity ComplexityRoot
+}
+
+type ResolverRoot interface {
+	ComputePlatform() ComputePlatformResolver
+	Destination() DestinationResolver
+	K8sActualNamespace() K8sActualNamespaceResolver
+	Mutation() MutationResolver
+	Query() QueryResolver
+}
+
+type DirectiveRoot struct {
+}
+
+type ComplexityRoot struct {
+	ComputePlatform struct {
+		Actions             func(childComplexity int) int
+		ComputePlatformType func(childComplexity int) int
+		Destinations        func(childComplexity int) int
+		K8sActualNamespace  func(childComplexity int, name string) int
+		K8sActualNamespaces func(childComplexity int) int
+		K8sActualSource     func(childComplexity int, name *string, namespace *string, kind *string) int
+		K8sActualSources    func(childComplexity int) int
+	}
+
+	Condition struct {
+		LastTransitionTime func(childComplexity int) int
+		Message            func(childComplexity int) int
+		Reason             func(childComplexity int) int
+		Status             func(childComplexity int) int
+		Type               func(childComplexity int) int
+	}
+
+	Destination struct {
+		Conditions      func(childComplexity int) int
+		DestinationType func(childComplexity int) int
+		ExportedSignals func(childComplexity int) int
+		Fields          func(childComplexity int) int
+		Id              func(childComplexity int) int
+		Name            func(childComplexity int) int
+		Type            func(childComplexity int) int
+	}
+
+	DestinationDetails struct {
+		Fields    func(childComplexity int) int
+		Type      func(childComplexity int) int
+		URLString func(childComplexity int) int
+	}
+
+	DestinationTypesCategoryItem struct {
+		DisplayName             func(childComplexity int) int
+		ImageUrl                func(childComplexity int) int
+		SupportedSignals        func(childComplexity int) int
+		TestConnectionSupported func(childComplexity int) int
+		Type                    func(childComplexity int) int
+	}
+
+	DestinationsCategory struct {
+		Items func(childComplexity int) int
+		Name  func(childComplexity int) int
+	}
+
+	ExportedSignals struct {
+		Logs    func(childComplexity int) int
+		Metrics func(childComplexity int) int
+		Traces  func(childComplexity int) int
+	}
+
+	Field struct {
+		ComponentProperties func(childComplexity int) int
+		ComponentType       func(childComplexity int) int
+		DisplayName         func(childComplexity int) int
+		InitialValue        func(childComplexity int) int
+		Name                func(childComplexity int) int
+		ThumbnailURL        func(childComplexity int) int
+		VideoURL            func(childComplexity int) int
+	}
+
+	GetConfigResponse struct {
+		Installation func(childComplexity int) int
+	}
+
+	GetDestinationDetailsResponse struct {
+		Fields func(childComplexity int) int
+	}
+
+	GetDestinationTypesResponse struct {
+		Categories func(childComplexity int) int
+	}
+
+	IcaInstanceResponse struct {
+		ID   func(childComplexity int) int
+		Spec func(childComplexity int) int
+		Type func(childComplexity int) int
+	}
+
+	InstrumentationLibrary struct {
+		LibraryName func(childComplexity int) int
+		Options     func(childComplexity int) int
+	}
+
+	InstrumentationOption struct {
+		OptionKey func(childComplexity int) int
+		SpanKind  func(childComplexity int) int
+	}
+
+	InstrumentedApplicationDetails struct {
+		Conditions             func(childComplexity int) int
+		Containers             func(childComplexity int) int
+		InstrumentationOptions func(childComplexity int) int
+	}
+
+	K8sActualNamespace struct {
+		InstrumentationLabelEnabled func(childComplexity int) int
+		K8sActualSources            func(childComplexity int, instrumentationLabeled *bool) int
+		Name                        func(childComplexity int) int
+	}
+
+	K8sActualSource struct {
+		AutoInstrumented               func(childComplexity int) int
+		AutoInstrumentedDecision       func(childComplexity int) int
+		InstrumentedApplicationDetails func(childComplexity int) int
+		Kind                           func(childComplexity int) int
+		Name                           func(childComplexity int) int
+		Namespace                      func(childComplexity int) int
+		NumberOfInstances              func(childComplexity int) int
+		ReportedName                   func(childComplexity int) int
+		ServiceName                    func(childComplexity int) int
+	}
+
+	Mutation struct {
+		CreateNewDestination         func(childComplexity int, destination model.DestinationInput) int
+		PersistK8sNamespace          func(childComplexity int, namespace model.PersistNamespaceItemInput) int
+		PersistK8sSources            func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
+		TestConnectionForDestination func(childComplexity int, destination model.DestinationInput) int
+		UpdateDestination            func(childComplexity int, id string, destination model.DestinationInput) int
+		UpdateK8sActualSource        func(childComplexity int, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) int
+	}
+
+	ObservabilitySignalSupport struct {
+		Supported func(childComplexity int) int
+	}
+
+	Query struct {
+		ComputePlatform        func(childComplexity int) int
+		Config                 func(childComplexity int) int
+		DestinationTypeDetails func(childComplexity int, typeArg string) int
+		DestinationTypes       func(childComplexity int) int
+		PotentialDestinations  func(childComplexity int) int
+	}
+
+	SourceContainerRuntimeDetails struct {
+		ContainerName func(childComplexity int) int
+		Language      func(childComplexity int) int
+	}
+
+	SupportedSignals struct {
+		Logs    func(childComplexity int) int
+		Metrics func(childComplexity int) int
+		Traces  func(childComplexity int) int
+	}
+
+	TestConnectionResponse struct {
+		DestinationType func(childComplexity int) int
+		Message         func(childComplexity int) int
+		Reason          func(childComplexity int) int
+		StatusCode      func(childComplexity int) int
+		Succeeded       func(childComplexity int) int
+	}
+}
+
+type ComputePlatformResolver interface {
+	K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error)
+	K8sActualNamespaces(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualNamespace, error)
+	K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error)
+	K8sActualSources(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualSource, error)
+	Destinations(ctx context.Context, obj *model.ComputePlatform) ([]*model.Destination, error)
+	Actions(ctx context.Context, obj *model.ComputePlatform) ([]*model.IcaInstanceResponse, error)
+}
+type DestinationResolver interface {
+	Type(ctx context.Context, obj *model.Destination) (string, error)
+
+	Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error)
+}
+type K8sActualNamespaceResolver interface {
+	K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error)
+}
+type MutationResolver interface {
+	CreateNewDestination(ctx context.Context, destination model.DestinationInput) (*model.Destination, error)
+	PersistK8sNamespace(ctx context.Context, namespace model.PersistNamespaceItemInput) (bool, error)
+	PersistK8sSources(ctx context.Context, namespace string, sources []*model.PersistNamespaceSourceInput) (bool, error)
+	TestConnectionForDestination(ctx context.Context, destination model.DestinationInput) (*model.TestConnectionResponse, error)
+	UpdateK8sActualSource(ctx context.Context, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) (bool, error)
+	UpdateDestination(ctx context.Context, id string, destination model.DestinationInput) (*model.Destination, error)
+}
+type QueryResolver interface {
+	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
+	Config(ctx context.Context) (*model.GetConfigResponse, error)
+	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
+	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
+	PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error)
+}
+
+type executableSchema struct {
+	schema     *ast.Schema
+	resolvers  ResolverRoot
+	directives DirectiveRoot
+	complexity ComplexityRoot
+}
+
+func (e *executableSchema) Schema() *ast.Schema {
+	if e.schema != nil {
+		return e.schema
+	}
+	return parsedSchema
+}
+
+func (e *executableSchema) Complexity(typeName, field string, childComplexity int, rawArgs map[string]interface{}) (int, bool) {
+	ec := executionContext{nil, e, 0, 0, nil}
+	_ = ec
+	switch typeName + "." + field {
+
+	case "ComputePlatform.actions":
+		if e.complexity.ComputePlatform.Actions == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.Actions(childComplexity), true
+
+	case "ComputePlatform.computePlatformType":
+		if e.complexity.ComputePlatform.ComputePlatformType == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.ComputePlatformType(childComplexity), true
+
+	case "ComputePlatform.destinations":
+		if e.complexity.ComputePlatform.Destinations == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.Destinations(childComplexity), true
+
+	case "ComputePlatform.k8sActualNamespace":
+		if e.complexity.ComputePlatform.K8sActualNamespace == nil {
+			break
+		}
+
+		args, err := ec.field_ComputePlatform_k8sActualNamespace_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.ComputePlatform.K8sActualNamespace(childComplexity, args["name"].(string)), true
+
+	case "ComputePlatform.k8sActualNamespaces":
+		if e.complexity.ComputePlatform.K8sActualNamespaces == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.K8sActualNamespaces(childComplexity), true
+
+	case "ComputePlatform.k8sActualSource":
+		if e.complexity.ComputePlatform.K8sActualSource == nil {
+			break
+		}
+
+		args, err := ec.field_ComputePlatform_k8sActualSource_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.ComputePlatform.K8sActualSource(childComplexity, args["name"].(*string), args["namespace"].(*string), args["kind"].(*string)), true
+
+	case "ComputePlatform.k8sActualSources":
+		if e.complexity.ComputePlatform.K8sActualSources == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.K8sActualSources(childComplexity), true
+
+	case "Condition.lastTransitionTime":
+		if e.complexity.Condition.LastTransitionTime == nil {
+			break
+		}
+
+		return e.complexity.Condition.LastTransitionTime(childComplexity), true
+
+	case "Condition.message":
+		if e.complexity.Condition.Message == nil {
+			break
+		}
+
+		return e.complexity.Condition.Message(childComplexity), true
+
+	case "Condition.reason":
+		if e.complexity.Condition.Reason == nil {
+			break
+		}
+
+		return e.complexity.Condition.Reason(childComplexity), true
+
+	case "Condition.status":
+		if e.complexity.Condition.Status == nil {
+			break
+		}
+
+		return e.complexity.Condition.Status(childComplexity), true
+
+	case "Condition.type":
+		if e.complexity.Condition.Type == nil {
+			break
+		}
+
+		return e.complexity.Condition.Type(childComplexity), true
+
+	case "Destination.conditions":
+		if e.complexity.Destination.Conditions == nil {
+			break
+		}
+
+		return e.complexity.Destination.Conditions(childComplexity), true
+
+	case "Destination.destinationType":
+		if e.complexity.Destination.DestinationType == nil {
+			break
+		}
+
+		return e.complexity.Destination.DestinationType(childComplexity), true
+
+	case "Destination.exportedSignals":
+		if e.complexity.Destination.ExportedSignals == nil {
+			break
+		}
+
+		return e.complexity.Destination.ExportedSignals(childComplexity), true
+
+	case "Destination.fields":
+		if e.complexity.Destination.Fields == nil {
+			break
+		}
+
+		return e.complexity.Destination.Fields(childComplexity), true
+
+	case "Destination.id":
+		if e.complexity.Destination.Id == nil {
+			break
+		}
+
+		return e.complexity.Destination.Id(childComplexity), true
+
+	case "Destination.name":
+		if e.complexity.Destination.Name == nil {
+			break
+		}
+
+		return e.complexity.Destination.Name(childComplexity), true
+
+	case "Destination.type":
+		if e.complexity.Destination.Type == nil {
+			break
+		}
+
+		return e.complexity.Destination.Type(childComplexity), true
+
+	case "DestinationDetails.fields":
+		if e.complexity.DestinationDetails.Fields == nil {
+			break
+		}
+
+		return e.complexity.DestinationDetails.Fields(childComplexity), true
+
+	case "DestinationDetails.type":
+		if e.complexity.DestinationDetails.Type == nil {
+			break
+		}
+
+		return e.complexity.DestinationDetails.Type(childComplexity), true
+
+	case "DestinationDetails.urlString":
+		if e.complexity.DestinationDetails.URLString == nil {
+			break
+		}
+
+		return e.complexity.DestinationDetails.URLString(childComplexity), true
+
+	case "DestinationTypesCategoryItem.displayName":
+		if e.complexity.DestinationTypesCategoryItem.DisplayName == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.DisplayName(childComplexity), true
+
+	case "DestinationTypesCategoryItem.imageUrl":
+		if e.complexity.DestinationTypesCategoryItem.ImageUrl == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.ImageUrl(childComplexity), true
+
+	case "DestinationTypesCategoryItem.supportedSignals":
+		if e.complexity.DestinationTypesCategoryItem.SupportedSignals == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.SupportedSignals(childComplexity), true
+
+	case "DestinationTypesCategoryItem.testConnectionSupported":
+		if e.complexity.DestinationTypesCategoryItem.TestConnectionSupported == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.TestConnectionSupported(childComplexity), true
+
+	case "DestinationTypesCategoryItem.type":
+		if e.complexity.DestinationTypesCategoryItem.Type == nil {
+			break
+		}
+
+		return e.complexity.DestinationTypesCategoryItem.Type(childComplexity), true
+
+	case "DestinationsCategory.items":
+		if e.complexity.DestinationsCategory.Items == nil {
+			break
+		}
+
+		return e.complexity.DestinationsCategory.Items(childComplexity), true
+
+	case "DestinationsCategory.name":
+		if e.complexity.DestinationsCategory.Name == nil {
+			break
+		}
+
+		return e.complexity.DestinationsCategory.Name(childComplexity), true
+
+	case "ExportedSignals.logs":
+		if e.complexity.ExportedSignals.Logs == nil {
+			break
+		}
+
+		return e.complexity.ExportedSignals.Logs(childComplexity), true
+
+	case "ExportedSignals.metrics":
+		if e.complexity.ExportedSignals.Metrics == nil {
+			break
+		}
+
+		return e.complexity.ExportedSignals.Metrics(childComplexity), true
+
+	case "ExportedSignals.traces":
+		if e.complexity.ExportedSignals.Traces == nil {
+			break
+		}
+
+		return e.complexity.ExportedSignals.Traces(childComplexity), true
+
+	case "Field.componentProperties":
+		if e.complexity.Field.ComponentProperties == nil {
+			break
+		}
+
+		return e.complexity.Field.ComponentProperties(childComplexity), true
+
+	case "Field.componentType":
+		if e.complexity.Field.ComponentType == nil {
+			break
+		}
+
+		return e.complexity.Field.ComponentType(childComplexity), true
+
+	case "Field.displayName":
+		if e.complexity.Field.DisplayName == nil {
+			break
+		}
+
+		return e.complexity.Field.DisplayName(childComplexity), true
+
+	case "Field.initialValue":
+		if e.complexity.Field.InitialValue == nil {
+			break
+		}
+
+		return e.complexity.Field.InitialValue(childComplexity), true
+
+	case "Field.name":
+		if e.complexity.Field.Name == nil {
+			break
+		}
+
+		return e.complexity.Field.Name(childComplexity), true
+
+	case "Field.thumbnailURL":
+		if e.complexity.Field.ThumbnailURL == nil {
+			break
+		}
+
+		return e.complexity.Field.ThumbnailURL(childComplexity), true
+
+	case "Field.videoUrl":
+		if e.complexity.Field.VideoURL == nil {
+			break
+		}
+
+		return e.complexity.Field.VideoURL(childComplexity), true
+
+	case "GetConfigResponse.installation":
+		if e.complexity.GetConfigResponse.Installation == nil {
+			break
+		}
+
+		return e.complexity.GetConfigResponse.Installation(childComplexity), true
+
+	case "GetDestinationDetailsResponse.fields":
+		if e.complexity.GetDestinationDetailsResponse.Fields == nil {
+			break
+		}
+
+		return e.complexity.GetDestinationDetailsResponse.Fields(childComplexity), true
+
+	case "GetDestinationTypesResponse.categories":
+		if e.complexity.GetDestinationTypesResponse.Categories == nil {
+			break
+		}
+
+		return e.complexity.GetDestinationTypesResponse.Categories(childComplexity), true
+
+	case "IcaInstanceResponse.id":
+		if e.complexity.IcaInstanceResponse.ID == nil {
+			break
+		}
+
+		return e.complexity.IcaInstanceResponse.ID(childComplexity), true
+
+	case "IcaInstanceResponse.spec":
+		if e.complexity.IcaInstanceResponse.Spec == nil {
+			break
+		}
+
+		return e.complexity.IcaInstanceResponse.Spec(childComplexity), true
+
+	case "IcaInstanceResponse.type":
+		if e.complexity.IcaInstanceResponse.Type == nil {
+			break
+		}
+
+		return e.complexity.IcaInstanceResponse.Type(childComplexity), true
+
+	case "InstrumentationLibrary.libraryName":
+		if e.complexity.InstrumentationLibrary.LibraryName == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationLibrary.LibraryName(childComplexity), true
+
+	case "InstrumentationLibrary.options":
+		if e.complexity.InstrumentationLibrary.Options == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationLibrary.Options(childComplexity), true
+
+	case "InstrumentationOption.optionKey":
+		if e.complexity.InstrumentationOption.OptionKey == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationOption.OptionKey(childComplexity), true
+
+	case "InstrumentationOption.spanKind":
+		if e.complexity.InstrumentationOption.SpanKind == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationOption.SpanKind(childComplexity), true
+
+	case "InstrumentedApplicationDetails.conditions":
+		if e.complexity.InstrumentedApplicationDetails.Conditions == nil {
+			break
+		}
+
+		return e.complexity.InstrumentedApplicationDetails.Conditions(childComplexity), true
+
+	case "InstrumentedApplicationDetails.containers":
+		if e.complexity.InstrumentedApplicationDetails.Containers == nil {
+			break
+		}
+
+		return e.complexity.InstrumentedApplicationDetails.Containers(childComplexity), true
+
+	case "InstrumentedApplicationDetails.instrumentationOptions":
+		if e.complexity.InstrumentedApplicationDetails.InstrumentationOptions == nil {
+			break
+		}
+
+		return e.complexity.InstrumentedApplicationDetails.InstrumentationOptions(childComplexity), true
+
+	case "K8sActualNamespace.instrumentationLabelEnabled":
+		if e.complexity.K8sActualNamespace.InstrumentationLabelEnabled == nil {
+			break
+		}
+
+		return e.complexity.K8sActualNamespace.InstrumentationLabelEnabled(childComplexity), true
+
+	case "K8sActualNamespace.k8sActualSources":
+		if e.complexity.K8sActualNamespace.K8sActualSources == nil {
+			break
+		}
+
+		args, err := ec.field_K8sActualNamespace_k8sActualSources_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.K8sActualNamespace.K8sActualSources(childComplexity, args["instrumentationLabeled"].(*bool)), true
+
+	case "K8sActualNamespace.name":
+		if e.complexity.K8sActualNamespace.Name == nil {
+			break
+		}
+
+		return e.complexity.K8sActualNamespace.Name(childComplexity), true
+
+	case "K8sActualSource.autoInstrumented":
+		if e.complexity.K8sActualSource.AutoInstrumented == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.AutoInstrumented(childComplexity), true
+
+	case "K8sActualSource.autoInstrumentedDecision":
+		if e.complexity.K8sActualSource.AutoInstrumentedDecision == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.AutoInstrumentedDecision(childComplexity), true
+
+	case "K8sActualSource.instrumentedApplicationDetails":
+		if e.complexity.K8sActualSource.InstrumentedApplicationDetails == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.InstrumentedApplicationDetails(childComplexity), true
+
+	case "K8sActualSource.kind":
+		if e.complexity.K8sActualSource.Kind == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.Kind(childComplexity), true
+
+	case "K8sActualSource.name":
+		if e.complexity.K8sActualSource.Name == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.Name(childComplexity), true
+
+	case "K8sActualSource.namespace":
+		if e.complexity.K8sActualSource.Namespace == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.Namespace(childComplexity), true
+
+	case "K8sActualSource.numberOfInstances":
+		if e.complexity.K8sActualSource.NumberOfInstances == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.NumberOfInstances(childComplexity), true
+
+	case "K8sActualSource.reportedName":
+		if e.complexity.K8sActualSource.ReportedName == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.ReportedName(childComplexity), true
+
+	case "K8sActualSource.serviceName":
+		if e.complexity.K8sActualSource.ServiceName == nil {
+			break
+		}
+
+		return e.complexity.K8sActualSource.ServiceName(childComplexity), true
+
+	case "Mutation.createNewDestination":
+		if e.complexity.Mutation.CreateNewDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_createNewDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.CreateNewDestination(childComplexity, args["destination"].(model.DestinationInput)), true
+
+	case "Mutation.persistK8sNamespace":
+		if e.complexity.Mutation.PersistK8sNamespace == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_persistK8sNamespace_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.PersistK8sNamespace(childComplexity, args["namespace"].(model.PersistNamespaceItemInput)), true
+
+	case "Mutation.persistK8sSources":
+		if e.complexity.Mutation.PersistK8sSources == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_persistK8sSources_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.PersistK8sSources(childComplexity, args["namespace"].(string), args["sources"].([]*model.PersistNamespaceSourceInput)), true
+
+	case "Mutation.testConnectionForDestination":
+		if e.complexity.Mutation.TestConnectionForDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_testConnectionForDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.TestConnectionForDestination(childComplexity, args["destination"].(model.DestinationInput)), true
+
+	case "Mutation.updateDestination":
+		if e.complexity.Mutation.UpdateDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_updateDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.UpdateDestination(childComplexity, args["id"].(string), args["destination"].(model.DestinationInput)), true
+
+	case "Mutation.updateK8sActualSource":
+		if e.complexity.Mutation.UpdateK8sActualSource == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_updateK8sActualSource_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.UpdateK8sActualSource(childComplexity, args["sourceId"].(model.K8sSourceID), args["patchSourceRequest"].(model.PatchSourceRequestInput)), true
+
+	case "ObservabilitySignalSupport.supported":
+		if e.complexity.ObservabilitySignalSupport.Supported == nil {
+			break
+		}
+
+		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
+
+	case "Query.computePlatform":
+		if e.complexity.Query.ComputePlatform == nil {
+			break
+		}
+
+		return e.complexity.Query.ComputePlatform(childComplexity), true
+
+	case "Query.config":
+		if e.complexity.Query.Config == nil {
+			break
+		}
+
+		return e.complexity.Query.Config(childComplexity), true
+
+	case "Query.destinationTypeDetails":
+		if e.complexity.Query.DestinationTypeDetails == nil {
+			break
+		}
+
+		args, err := ec.field_Query_destinationTypeDetails_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Query.DestinationTypeDetails(childComplexity, args["type"].(string)), true
+
+	case "Query.destinationTypes":
+		if e.complexity.Query.DestinationTypes == nil {
+			break
+		}
+
+		return e.complexity.Query.DestinationTypes(childComplexity), true
+
+	case "Query.potentialDestinations":
+		if e.complexity.Query.PotentialDestinations == nil {
+			break
+		}
+
+		return e.complexity.Query.PotentialDestinations(childComplexity), true
+
+	case "SourceContainerRuntimeDetails.containerName":
+		if e.complexity.SourceContainerRuntimeDetails.ContainerName == nil {
+			break
+		}
+
+		return e.complexity.SourceContainerRuntimeDetails.ContainerName(childComplexity), true
+
+	case "SourceContainerRuntimeDetails.language":
+		if e.complexity.SourceContainerRuntimeDetails.Language == nil {
+			break
+		}
+
+		return e.complexity.SourceContainerRuntimeDetails.Language(childComplexity), true
+
+	case "SupportedSignals.logs":
+		if e.complexity.SupportedSignals.Logs == nil {
+			break
+		}
+
+		return e.complexity.SupportedSignals.Logs(childComplexity), true
+
+	case "SupportedSignals.metrics":
+		if e.complexity.SupportedSignals.Metrics == nil {
+			break
+		}
+
+		return e.complexity.SupportedSignals.Metrics(childComplexity), true
+
+	case "SupportedSignals.traces":
+		if e.complexity.SupportedSignals.Traces == nil {
+			break
+		}
+
+		return e.complexity.SupportedSignals.Traces(childComplexity), true
+
+	case "TestConnectionResponse.destinationType":
+		if e.complexity.TestConnectionResponse.DestinationType == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.DestinationType(childComplexity), true
+
+	case "TestConnectionResponse.message":
+		if e.complexity.TestConnectionResponse.Message == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.Message(childComplexity), true
+
+	case "TestConnectionResponse.reason":
+		if e.complexity.TestConnectionResponse.Reason == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.Reason(childComplexity), true
+
+	case "TestConnectionResponse.statusCode":
+		if e.complexity.TestConnectionResponse.StatusCode == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.StatusCode(childComplexity), true
+
+	case "TestConnectionResponse.succeeded":
+		if e.complexity.TestConnectionResponse.Succeeded == nil {
+			break
+		}
+
+		return e.complexity.TestConnectionResponse.Succeeded(childComplexity), true
+
+	}
+	return 0, false
+}
+
+func (e *executableSchema) Exec(ctx context.Context) graphql.ResponseHandler {
+	rc := graphql.GetOperationContext(ctx)
+	ec := executionContext{rc, e, 0, 0, make(chan graphql.DeferredResult)}
+	inputUnmarshalMap := graphql.BuildUnmarshalerMap(
+		ec.unmarshalInputDestinationInput,
+		ec.unmarshalInputExportedSignalsInput,
+		ec.unmarshalInputFieldInput,
+		ec.unmarshalInputK8sDesiredNamespaceInput,
+		ec.unmarshalInputK8sDesiredSourceInput,
+		ec.unmarshalInputK8sNamespaceId,
+		ec.unmarshalInputK8sSourceId,
+		ec.unmarshalInputPatchSourceRequestInput,
+		ec.unmarshalInputPersistNamespaceItemInput,
+		ec.unmarshalInputPersistNamespaceSourceInput,
+	)
+	first := true
+
+	switch rc.Operation.Operation {
+	case ast.Query:
+		return func(ctx context.Context) *graphql.Response {
+			var response graphql.Response
+			var data graphql.Marshaler
+			if first {
+				first = false
+				ctx = graphql.WithUnmarshalerMap(ctx, inputUnmarshalMap)
+				data = ec._Query(ctx, rc.Operation.SelectionSet)
+			} else {
+				if atomic.LoadInt32(&ec.pendingDeferred) > 0 {
+					result := <-ec.deferredResults
+					atomic.AddInt32(&ec.pendingDeferred, -1)
+					data = result.Result
+					response.Path = result.Path
+					response.Label = result.Label
+					response.Errors = result.Errors
+				} else {
+					return nil
+				}
+			}
+			var buf bytes.Buffer
+			data.MarshalGQL(&buf)
+			response.Data = buf.Bytes()
+			if atomic.LoadInt32(&ec.deferred) > 0 {
+				hasNext := atomic.LoadInt32(&ec.pendingDeferred) > 0
+				response.HasNext = &hasNext
+			}
+
+			return &response
+		}
+	case ast.Mutation:
+		return func(ctx context.Context) *graphql.Response {
+			if !first {
+				return nil
+			}
+			first = false
+			ctx = graphql.WithUnmarshalerMap(ctx, inputUnmarshalMap)
+			data := ec._Mutation(ctx, rc.Operation.SelectionSet)
+			var buf bytes.Buffer
+			data.MarshalGQL(&buf)
+
+			return &graphql.Response{
+				Data: buf.Bytes(),
+			}
+		}
+
+	default:
+		return graphql.OneShot(graphql.ErrorResponse(ctx, "unsupported GraphQL operation"))
+	}
+}
+
+type executionContext struct {
+	*graphql.OperationContext
+	*executableSchema
+	deferred        int32
+	pendingDeferred int32
+	deferredResults chan graphql.DeferredResult
+}
+
+func (ec *executionContext) processDeferredGroup(dg graphql.DeferredGroup) {
+	atomic.AddInt32(&ec.pendingDeferred, 1)
+	go func() {
+		ctx := graphql.WithFreshResponseContext(dg.Context)
+		dg.FieldSet.Dispatch(ctx)
+		ds := graphql.DeferredResult{
+			Path:   dg.Path,
+			Label:  dg.Label,
+			Result: dg.FieldSet,
+			Errors: graphql.GetErrors(ctx),
+		}
+		// null fields should bubble up
+		if dg.FieldSet.Invalids > 0 {
+			ds.Result = graphql.Null
+		}
+		ec.deferredResults <- ds
+	}()
+}
+
+func (ec *executionContext) introspectSchema() (*introspection.Schema, error) {
+	if ec.DisableIntrospection {
+		return nil, errors.New("introspection disabled")
+	}
+	return introspection.WrapSchema(ec.Schema()), nil
+}
+
+func (ec *executionContext) introspectType(name string) (*introspection.Type, error) {
+	if ec.DisableIntrospection {
+		return nil, errors.New("introspection disabled")
+	}
+	return introspection.WrapTypeFromDef(ec.Schema(), ec.Schema().Types[name]), nil
+}
+
+//go:embed "schema.graphqls"
+var sourcesFS embed.FS
+
+func sourceData(filename string) string {
+	data, err := sourcesFS.ReadFile(filename)
+	if err != nil {
+		panic(fmt.Sprintf("codegen problem: %s not available", filename))
+	}
+	return string(data)
+}
+
+var sources = []*ast.Source{
+	{Name: "schema.graphqls", Input: sourceData("schema.graphqls"), BuiltIn: false},
+}
+var parsedSchema = gqlparser.MustLoadSchema(sources...)
+
+// endregion ************************** generated!.gotpl **************************
+
+// region    ***************************** args.gotpl *****************************
+
+func (ec *executionContext) field_ComputePlatform_k8sActualNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["name"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["name"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_ComputePlatform_k8sActualSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 *string
+	if tmp, ok := rawArgs["name"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+		arg0, err = ec.unmarshalOString2ᚖstring(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["name"] = arg0
+	var arg1 *string
+	if tmp, ok := rawArgs["namespace"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+		arg1, err = ec.unmarshalOString2ᚖstring(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["namespace"] = arg1
+	var arg2 *string
+	if tmp, ok := rawArgs["kind"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+		arg2, err = ec.unmarshalOString2ᚖstring(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["kind"] = arg2
+	return args, nil
+}
+
+func (ec *executionContext) field_K8sActualNamespace_k8sActualSources_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 *bool
+	if tmp, ok := rawArgs["instrumentationLabeled"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("instrumentationLabeled"))
+		arg0, err = ec.unmarshalOBoolean2ᚖbool(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["instrumentationLabeled"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_createNewDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.DestinationInput
+	if tmp, ok := rawArgs["destination"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
+		arg0, err = ec.unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destination"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_persistK8sNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.PersistNamespaceItemInput
+	if tmp, ok := rawArgs["namespace"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+		arg0, err = ec.unmarshalNPersistNamespaceItemInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceItemInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["namespace"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_persistK8sSources_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["namespace"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["namespace"] = arg0
+	var arg1 []*model.PersistNamespaceSourceInput
+	if tmp, ok := rawArgs["sources"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("sources"))
+		arg1, err = ec.unmarshalNPersistNamespaceSourceInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceSourceInputᚄ(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["sources"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_testConnectionForDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.DestinationInput
+	if tmp, ok := rawArgs["destination"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
+		arg0, err = ec.unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destination"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_updateDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["id"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("id"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["id"] = arg0
+	var arg1 model.DestinationInput
+	if tmp, ok := rawArgs["destination"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("destination"))
+		arg1, err = ec.unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["destination"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Mutation_updateK8sActualSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.K8sSourceID
+	if tmp, ok := rawArgs["sourceId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("sourceId"))
+		arg0, err = ec.unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["sourceId"] = arg0
+	var arg1 model.PatchSourceRequestInput
+	if tmp, ok := rawArgs["patchSourceRequest"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("patchSourceRequest"))
+		arg1, err = ec.unmarshalNPatchSourceRequestInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPatchSourceRequestInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["patchSourceRequest"] = arg1
+	return args, nil
+}
+
+func (ec *executionContext) field_Query___type_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["name"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["name"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field_Query_destinationTypeDetails_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["type"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("type"))
+		arg0, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["type"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field___Type_enumValues_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 bool
+	if tmp, ok := rawArgs["includeDeprecated"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("includeDeprecated"))
+		arg0, err = ec.unmarshalOBoolean2bool(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["includeDeprecated"] = arg0
+	return args, nil
+}
+
+func (ec *executionContext) field___Type_fields_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 bool
+	if tmp, ok := rawArgs["includeDeprecated"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("includeDeprecated"))
+		arg0, err = ec.unmarshalOBoolean2bool(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["includeDeprecated"] = arg0
+	return args, nil
+}
+
+// endregion ***************************** args.gotpl *****************************
+
+// region    ************************** directives.gotpl **************************
+
+// endregion ************************** directives.gotpl **************************
+
+// region    **************************** field.gotpl *****************************
+
+func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComputePlatformType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ComputePlatformType)
+	fc.Result = res
+	return ec.marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_computePlatformType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ComputePlatformType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualNamespace(rctx, obj, fc.Args["name"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.K8sActualNamespace)
+	fc.Result = res
+	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "instrumentationLabelEnabled":
+				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_ComputePlatform_k8sActualNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualNamespaces(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualNamespace)
+	fc.Result = res
+	return ec.marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "instrumentationLabelEnabled":
+				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualSource(rctx, obj, fc.Args["name"].(*string), fc.Args["namespace"].(*string), fc.Args["kind"].(*string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_ComputePlatform_k8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualSources(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_destinations(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_destinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().Destinations(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_actions(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_actions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().Actions(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.IcaInstanceResponse)
+	fc.Result = res
+	return ec.marshalNIcaInstanceResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponseᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_actions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_IcaInstanceResponse_id(ctx, field)
+			case "type":
+				return ec.fieldContext_IcaInstanceResponse_type(ctx, field)
+			case "spec":
+				return ec.fieldContext_IcaInstanceResponse_spec(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type IcaInstanceResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_status(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_status(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Status, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ConditionStatus)
+	fc.Result = res
+	return ec.marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_status(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ConditionStatus does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.LastTransitionTime, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_reason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Reason, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_message(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Message, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Destination_id(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Id, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Destination_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Destination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Destination_name(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Destination_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Destination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Destination_type(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Destination().Type(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Destination_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Destination",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Destination_exportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_exportedSignals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ExportedSignals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ExportedSignals)
+	fc.Result = res
+	return ec.marshalNExportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignals(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Destination_exportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Destination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "traces":
+				return ec.fieldContext_ExportedSignals_traces(ctx, field)
+			case "metrics":
+				return ec.fieldContext_ExportedSignals_metrics(ctx, field)
+			case "logs":
+				return ec.fieldContext_ExportedSignals_logs(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ExportedSignals", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Destination_fields(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Destination_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Destination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Destination_destinationType(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_destinationType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DestinationType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.DestinationTypesCategoryItem)
+	fc.Result = res
+	return ec.marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Destination_destinationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Destination",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationTypesCategoryItem_displayName(ctx, field)
+			case "imageUrl":
+				return ec.fieldContext_DestinationTypesCategoryItem_imageUrl(ctx, field)
+			case "supportedSignals":
+				return ec.fieldContext_DestinationTypesCategoryItem_supportedSignals(ctx, field)
+			case "testConnectionSupported":
+				return ec.fieldContext_DestinationTypesCategoryItem_testConnectionSupported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationTypesCategoryItem", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Destination_conditions(ctx context.Context, field graphql.CollectedField, obj *model.Destination) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Destination_conditions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Destination().Conditions(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*model.Condition)
+	fc.Result = res
+	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Destination_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Destination",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_Condition_type(ctx, field)
+			case "status":
+				return ec.fieldContext_Condition_status(ctx, field)
+			case "lastTransitionTime":
+				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+			case "reason":
+				return ec.fieldContext_Condition_reason(ctx, field)
+			case "message":
+				return ec.fieldContext_Condition_message(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationDetails_type(ctx context.Context, field graphql.CollectedField, obj *model.DestinationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationDetails_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationDetails_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationDetails_urlString(ctx context.Context, field graphql.CollectedField, obj *model.DestinationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationDetails_urlString(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.URLString, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationDetails_urlString(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationDetails_fields(ctx context.Context, field graphql.CollectedField, obj *model.DestinationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationDetails_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationDetails_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypesCategoryItem_type(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypesCategoryItem",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypesCategoryItem_displayName(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_displayName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DisplayName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_displayName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypesCategoryItem",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypesCategoryItem_imageUrl(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_imageUrl(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ImageUrl, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_imageUrl(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypesCategoryItem",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypesCategoryItem_supportedSignals(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_supportedSignals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SupportedSignals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.SupportedSignals)
+	fc.Result = res
+	return ec.marshalNSupportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSupportedSignals(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_supportedSignals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypesCategoryItem",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "traces":
+				return ec.fieldContext_SupportedSignals_traces(ctx, field)
+			case "metrics":
+				return ec.fieldContext_SupportedSignals_metrics(ctx, field)
+			case "logs":
+				return ec.fieldContext_SupportedSignals_logs(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SupportedSignals", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationTypesCategoryItem_testConnectionSupported(ctx context.Context, field graphql.CollectedField, obj *model.DestinationTypesCategoryItem) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationTypesCategoryItem_testConnectionSupported(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.TestConnectionSupported, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationTypesCategoryItem_testConnectionSupported(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationTypesCategoryItem",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationsCategory_name(ctx context.Context, field graphql.CollectedField, obj *model.DestinationsCategory) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationsCategory_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationsCategory_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationsCategory",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DestinationsCategory_items(ctx context.Context, field graphql.CollectedField, obj *model.DestinationsCategory) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DestinationsCategory_items(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Items, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.DestinationTypesCategoryItem)
+	fc.Result = res
+	return ec.marshalNDestinationTypesCategoryItem2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItemᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DestinationsCategory_items(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DestinationsCategory",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_DestinationTypesCategoryItem_type(ctx, field)
+			case "displayName":
+				return ec.fieldContext_DestinationTypesCategoryItem_displayName(ctx, field)
+			case "imageUrl":
+				return ec.fieldContext_DestinationTypesCategoryItem_imageUrl(ctx, field)
+			case "supportedSignals":
+				return ec.fieldContext_DestinationTypesCategoryItem_supportedSignals(ctx, field)
+			case "testConnectionSupported":
+				return ec.fieldContext_DestinationTypesCategoryItem_testConnectionSupported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationTypesCategoryItem", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ExportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_traces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Traces, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ExportedSignals_traces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ExportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ExportedSignals_metrics(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_metrics(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Metrics, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ExportedSignals_metrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ExportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ExportedSignals_logs(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ExportedSignals_logs(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Logs, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ExportedSignals_logs(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ExportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_name(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_displayName(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_displayName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DisplayName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_displayName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_componentType(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_componentType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComponentType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_componentType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_componentProperties(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_componentProperties(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ComponentProperties, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_componentProperties(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_videoUrl(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_videoUrl(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.VideoURL, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_videoUrl(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_thumbnailURL(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_thumbnailURL(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ThumbnailURL, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_thumbnailURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Field_initialValue(ctx context.Context, field graphql.CollectedField, obj *model.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Field_initialValue(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InitialValue, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Field_initialValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _GetConfigResponse_installation(ctx context.Context, field graphql.CollectedField, obj *model.GetConfigResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_GetConfigResponse_installation(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Installation, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.InstallationStatus)
+	fc.Result = res
+	return ec.marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_GetConfigResponse_installation(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "GetConfigResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type InstallationStatus does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _GetDestinationDetailsResponse_fields(ctx context.Context, field graphql.CollectedField, obj *model.GetDestinationDetailsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_GetDestinationDetailsResponse_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.Field)
+	fc.Result = res
+	return ec.marshalNField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_GetDestinationDetailsResponse_fields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "GetDestinationDetailsResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_Field_name(ctx, field)
+			case "displayName":
+				return ec.fieldContext_Field_displayName(ctx, field)
+			case "componentType":
+				return ec.fieldContext_Field_componentType(ctx, field)
+			case "componentProperties":
+				return ec.fieldContext_Field_componentProperties(ctx, field)
+			case "videoUrl":
+				return ec.fieldContext_Field_videoUrl(ctx, field)
+			case "thumbnailURL":
+				return ec.fieldContext_Field_thumbnailURL(ctx, field)
+			case "initialValue":
+				return ec.fieldContext_Field_initialValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Field", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _GetDestinationTypesResponse_categories(ctx context.Context, field graphql.CollectedField, obj *model.GetDestinationTypesResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_GetDestinationTypesResponse_categories(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Categories, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.DestinationsCategory)
+	fc.Result = res
+	return ec.marshalNDestinationsCategory2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationsCategoryᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_GetDestinationTypesResponse_categories(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "GetDestinationTypesResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_DestinationsCategory_name(ctx, field)
+			case "items":
+				return ec.fieldContext_DestinationsCategory_items(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationsCategory", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _IcaInstanceResponse_id(ctx context.Context, field graphql.CollectedField, obj *model.IcaInstanceResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_IcaInstanceResponse_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_IcaInstanceResponse_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "IcaInstanceResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _IcaInstanceResponse_type(ctx context.Context, field graphql.CollectedField, obj *model.IcaInstanceResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_IcaInstanceResponse_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_IcaInstanceResponse_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "IcaInstanceResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _IcaInstanceResponse_spec(ctx context.Context, field graphql.CollectedField, obj *model.IcaInstanceResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_IcaInstanceResponse_spec(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Spec, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_IcaInstanceResponse_spec(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "IcaInstanceResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentationLibrary_libraryName(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationLibrary) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationLibrary_libraryName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.LibraryName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentationLibrary_libraryName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentationLibrary",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentationLibrary_options(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationLibrary) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationLibrary_options(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Options, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.InstrumentationOption)
+	fc.Result = res
+	return ec.marshalNInstrumentationOption2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOptionᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentationLibrary_options(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentationLibrary",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "optionKey":
+				return ec.fieldContext_InstrumentationOption_optionKey(ctx, field)
+			case "spanKind":
+				return ec.fieldContext_InstrumentationOption_spanKind(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationOption", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentationOption_optionKey(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationOption) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationOption_optionKey(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.OptionKey, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentationOption_optionKey(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentationOption",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentationOption_spanKind(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationOption) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationOption_spanKind(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SpanKind, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.SpanKind)
+	fc.Result = res
+	return ec.marshalNSpanKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentationOption_spanKind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentationOption",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SpanKind does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Containers, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*model.SourceContainerRuntimeDetails)
+	fc.Result = res
+	return ec.marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_containers(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentedApplicationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "containerName":
+				return ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
+			case "language":
+				return ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SourceContainerRuntimeDetails", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Conditions, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*model.Condition)
+	fc.Result = res
+	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentedApplicationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_Condition_type(ctx, field)
+			case "status":
+				return ec.fieldContext_Condition_status(ctx, field)
+			case "lastTransitionTime":
+				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+			case "reason":
+				return ec.fieldContext_Condition_reason(ctx, field)
+			case "message":
+				return ec.fieldContext_Condition_message(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _InstrumentedApplicationDetails_instrumentationOptions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_instrumentationOptions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InstrumentationOptions, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.InstrumentationLibrary)
+	fc.Result = res
+	return ec.marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_instrumentationOptions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "InstrumentedApplicationDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "libraryName":
+				return ec.fieldContext_InstrumentationLibrary_libraryName(ctx, field)
+			case "options":
+				return ec.fieldContext_InstrumentationLibrary_options(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationLibrary", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualNamespace",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InstrumentationLabelEnabled, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*bool)
+	fc.Result = res
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualNamespace_instrumentationLabelEnabled(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualNamespace",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.K8sActualNamespace().K8sActualSources(rctx, obj, fc.Args["instrumentationLabeled"].(*bool))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualNamespace",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_K8sActualNamespace_k8sActualSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_namespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Namespace, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_kind(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Kind, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.K8sResourceKind)
+	fc.Result = res
+	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type K8sResourceKind does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ServiceName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.NumberOfInstances, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*int)
+	fc.Result = res
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_reportedName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ReportedName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_reportedName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.AutoInstrumented, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.AutoInstrumentedDecision, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumentedDecision(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InstrumentedApplicationDetails, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.InstrumentedApplicationDetails)
+	fc.Result = res
+	return ec.marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplicationDetails(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "K8sActualSource",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "containers":
+				return ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
+			case "conditions":
+				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+			case "instrumentationOptions":
+				return ec.fieldContext_InstrumentedApplicationDetails_instrumentationOptions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createNewDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().CreateNewDestination(rctx, fc.Args["destination"].(model.DestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createNewDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_persistK8sNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_persistK8sNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().PersistK8sNamespace(rctx, fc.Args["namespace"].(model.PersistNamespaceItemInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_persistK8sNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_persistK8sNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_persistK8sSources(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_persistK8sSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().PersistK8sSources(rctx, fc.Args["namespace"].(string), fc.Args["sources"].([]*model.PersistNamespaceSourceInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_persistK8sSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_persistK8sSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_testConnectionForDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_testConnectionForDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().TestConnectionForDestination(rctx, fc.Args["destination"].(model.DestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.TestConnectionResponse)
+	fc.Result = res
+	return ec.marshalNTestConnectionResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐTestConnectionResponse(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_testConnectionForDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "succeeded":
+				return ec.fieldContext_TestConnectionResponse_succeeded(ctx, field)
+			case "statusCode":
+				return ec.fieldContext_TestConnectionResponse_statusCode(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_TestConnectionResponse_destinationType(ctx, field)
+			case "message":
+				return ec.fieldContext_TestConnectionResponse_message(ctx, field)
+			case "reason":
+				return ec.fieldContext_TestConnectionResponse_reason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type TestConnectionResponse", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_testConnectionForDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateK8sActualSource(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateK8sActualSource(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateK8sActualSource(rctx, fc.Args["sourceId"].(model.K8sSourceID), fc.Args["patchSourceRequest"].(model.PatchSourceRequestInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateK8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateK8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateDestination(rctx, fc.Args["id"].(string), fc.Args["destination"].(model.DestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Context, field graphql.CollectedField, obj *model.ObservabilitySignalSupport) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Supported, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ObservabilitySignalSupport_supported(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ObservabilitySignalSupport",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().ComputePlatform(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.ComputePlatform)
+	fc.Result = res
+	return ec.marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_computePlatform(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "computePlatformType":
+				return ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+			case "k8sActualNamespace":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+			case "k8sActualNamespaces":
+				return ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+			case "k8sActualSource":
+				return ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+			case "destinations":
+				return ec.fieldContext_ComputePlatform_destinations(ctx, field)
+			case "actions":
+				return ec.fieldContext_ComputePlatform_actions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_config(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_config(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().Config(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.GetConfigResponse)
+	fc.Result = res
+	return ec.marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetConfigResponse(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_config(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "installation":
+				return ec.fieldContext_GetConfigResponse_installation(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type GetConfigResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_destinationTypes(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_destinationTypes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().DestinationTypes(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.GetDestinationTypesResponse)
+	fc.Result = res
+	return ec.marshalOGetDestinationTypesResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationTypesResponse(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_destinationTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "categories":
+				return ec.fieldContext_GetDestinationTypesResponse_categories(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type GetDestinationTypesResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_destinationTypeDetails(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_destinationTypeDetails(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().DestinationTypeDetails(rctx, fc.Args["type"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.GetDestinationDetailsResponse)
+	fc.Result = res
+	return ec.marshalOGetDestinationDetailsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationDetailsResponse(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_destinationTypeDetails(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "fields":
+				return ec.fieldContext_GetDestinationDetailsResponse_fields(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type GetDestinationDetailsResponse", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query_destinationTypeDetails_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query_potentialDestinations(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_potentialDestinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().PotentialDestinations(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.DestinationDetails)
+	fc.Result = res
+	return ec.marshalNDestinationDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationDetailsᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_potentialDestinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_DestinationDetails_type(ctx, field)
+			case "urlString":
+				return ec.fieldContext_DestinationDetails_urlString(ctx, field)
+			case "fields":
+				return ec.fieldContext_DestinationDetails_fields(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DestinationDetails", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.introspectType(fc.Args["name"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query___type(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Query___type_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Query___schema(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query___schema(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.introspectSchema()
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Schema)
+	fc.Result = res
+	return ec.marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "description":
+				return ec.fieldContext___Schema_description(ctx, field)
+			case "types":
+				return ec.fieldContext___Schema_types(ctx, field)
+			case "queryType":
+				return ec.fieldContext___Schema_queryType(ctx, field)
+			case "mutationType":
+				return ec.fieldContext___Schema_mutationType(ctx, field)
+			case "subscriptionType":
+				return ec.fieldContext___Schema_subscriptionType(ctx, field)
+			case "directives":
+				return ec.fieldContext___Schema_directives(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Schema", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ContainerName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SourceContainerRuntimeDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Language, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SourceContainerRuntimeDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SupportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_traces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Traces, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ObservabilitySignalSupport)
+	fc.Result = res
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SupportedSignals_traces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SupportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SupportedSignals_metrics(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_metrics(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Metrics, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ObservabilitySignalSupport)
+	fc.Result = res
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SupportedSignals_metrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SupportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SupportedSignals_logs(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_logs(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Logs, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ObservabilitySignalSupport)
+	fc.Result = res
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SupportedSignals_logs(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SupportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_succeeded(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_succeeded(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Succeeded, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_succeeded(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_statusCode(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_statusCode(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.StatusCode, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(int)
+	fc.Result = res
+	return ec.marshalNInt2int(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_statusCode(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_destinationType(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_destinationType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DestinationType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_destinationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_message(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_message(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Message, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_reason(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_reason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Reason, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_locations(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_locations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Locations, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]string)
+	fc.Result = res
+	return ec.marshalN__DirectiveLocation2ᚕstringᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_locations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type __DirectiveLocation does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_args(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Args, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.InputValue)
+	fc.Result = res
+	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Directive_isRepeatable(ctx context.Context, field graphql.CollectedField, obj *introspection.Directive) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Directive_isRepeatable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.IsRepeatable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Directive_isRepeatable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Directive",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___EnumValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___EnumValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__EnumValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___EnumValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___EnumValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__EnumValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___EnumValue_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_isDeprecated(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.IsDeprecated(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___EnumValue_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__EnumValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___EnumValue_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.EnumValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___EnumValue_deprecationReason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DeprecationReason(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___EnumValue_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__EnumValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_args(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_args(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Args, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.InputValue)
+	fc.Result = res
+	return ec.marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_args(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_type(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_isDeprecated(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_isDeprecated(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.IsDeprecated(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_isDeprecated(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Field_deprecationReason(ctx context.Context, field graphql.CollectedField, obj *introspection.Field) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Field_deprecationReason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DeprecationReason(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Field_deprecationReason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Field",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_name(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_description(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_type(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___InputValue_defaultValue(ctx context.Context, field graphql.CollectedField, obj *introspection.InputValue) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___InputValue_defaultValue(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DefaultValue, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___InputValue_defaultValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__InputValue",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_types(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_types(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Types(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_types(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_queryType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_queryType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.QueryType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_queryType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_mutationType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_mutationType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.MutationType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_mutationType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_subscriptionType(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_subscriptionType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SubscriptionType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_subscriptionType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Schema_directives(ctx context.Context, field graphql.CollectedField, obj *introspection.Schema) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Schema_directives(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Directives(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Directive)
+	fc.Result = res
+	return ec.marshalN__Directive2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirectiveᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Schema_directives(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Schema",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___Directive_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Directive_description(ctx, field)
+			case "locations":
+				return ec.fieldContext___Directive_locations(ctx, field)
+			case "args":
+				return ec.fieldContext___Directive_args(ctx, field)
+			case "isRepeatable":
+				return ec.fieldContext___Directive_isRepeatable(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Directive", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_kind(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_kind(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Kind(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalN__TypeKind2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type __TypeKind does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_name(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_description(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_description(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Description(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_description(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_fields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_fields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Fields(fc.Args["includeDeprecated"].(bool)), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Field)
+	fc.Result = res
+	return ec.marshalO__Field2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐFieldᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_fields(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___Field_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Field_description(ctx, field)
+			case "args":
+				return ec.fieldContext___Field_args(ctx, field)
+			case "type":
+				return ec.fieldContext___Field_type(ctx, field)
+			case "isDeprecated":
+				return ec.fieldContext___Field_isDeprecated(ctx, field)
+			case "deprecationReason":
+				return ec.fieldContext___Field_deprecationReason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Field", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field___Type_fields_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_interfaces(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_interfaces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Interfaces(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_interfaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_possibleTypes(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_possibleTypes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.PossibleTypes(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_possibleTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_enumValues(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_enumValues(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.EnumValues(fc.Args["includeDeprecated"].(bool)), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.EnumValue)
+	fc.Result = res
+	return ec.marshalO__EnumValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_enumValues(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___EnumValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___EnumValue_description(ctx, field)
+			case "isDeprecated":
+				return ec.fieldContext___EnumValue_isDeprecated(ctx, field)
+			case "deprecationReason":
+				return ec.fieldContext___EnumValue_deprecationReason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __EnumValue", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field___Type_enumValues_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_inputFields(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_inputFields(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.InputFields(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]introspection.InputValue)
+	fc.Result = res
+	return ec.marshalO__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_inputFields(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext___InputValue_name(ctx, field)
+			case "description":
+				return ec.fieldContext___InputValue_description(ctx, field)
+			case "type":
+				return ec.fieldContext___InputValue_type(ctx, field)
+			case "defaultValue":
+				return ec.fieldContext___InputValue_defaultValue(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __InputValue", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_ofType(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_ofType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.OfType(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*introspection.Type)
+	fc.Result = res
+	return ec.marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_ofType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "kind":
+				return ec.fieldContext___Type_kind(ctx, field)
+			case "name":
+				return ec.fieldContext___Type_name(ctx, field)
+			case "description":
+				return ec.fieldContext___Type_description(ctx, field)
+			case "fields":
+				return ec.fieldContext___Type_fields(ctx, field)
+			case "interfaces":
+				return ec.fieldContext___Type_interfaces(ctx, field)
+			case "possibleTypes":
+				return ec.fieldContext___Type_possibleTypes(ctx, field)
+			case "enumValues":
+				return ec.fieldContext___Type_enumValues(ctx, field)
+			case "inputFields":
+				return ec.fieldContext___Type_inputFields(ctx, field)
+			case "ofType":
+				return ec.fieldContext___Type_ofType(ctx, field)
+			case "specifiedByURL":
+				return ec.fieldContext___Type_specifiedByURL(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type __Type", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) ___Type_specifiedByURL(ctx context.Context, field graphql.CollectedField, obj *introspection.Type) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext___Type_specifiedByURL(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.SpecifiedByURL(), nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "__Type",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+// endregion **************************** field.gotpl *****************************
+
+// region    **************************** input.gotpl *****************************
+
+func (ec *executionContext) unmarshalInputDestinationInput(ctx context.Context, obj interface{}) (model.DestinationInput, error) {
+	var it model.DestinationInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "type", "exportedSignals", "fields"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "type":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("type"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Type = data
+		case "exportedSignals":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("exportedSignals"))
+			data, err := ec.unmarshalNExportedSignalsInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignalsInput(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.ExportedSignals = data
+		case "fields":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("fields"))
+			data, err := ec.unmarshalNFieldInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldInputᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Fields = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputExportedSignalsInput(ctx context.Context, obj interface{}) (model.ExportedSignalsInput, error) {
+	var it model.ExportedSignalsInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"traces", "metrics", "logs"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "traces":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("traces"))
+			data, err := ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Traces = data
+		case "metrics":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("metrics"))
+			data, err := ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Metrics = data
+		case "logs":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("logs"))
+			data, err := ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Logs = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputFieldInput(ctx context.Context, obj interface{}) (model.FieldInput, error) {
+	var it model.FieldInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"key", "value"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "key":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("key"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Key = data
+		case "value":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("value"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Value = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sDesiredNamespaceInput(ctx context.Context, obj interface{}) (model.K8sDesiredNamespaceInput, error) {
+	var it model.K8sDesiredNamespaceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"autoInstrument"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "autoInstrument":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("autoInstrument"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.AutoInstrument = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sDesiredSourceInput(ctx context.Context, obj interface{}) (model.K8sDesiredSourceInput, error) {
+	var it model.K8sDesiredSourceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"serviceName", "autoInstrument"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "serviceName":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("serviceName"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.ServiceName = data
+		case "autoInstrument":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("autoInstrument"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.AutoInstrument = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sNamespaceId(ctx context.Context, obj interface{}) (model.K8sNamespaceID, error) {
+	var it model.K8sNamespaceID
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj interface{}) (model.K8sSourceID, error) {
+	var it model.K8sSourceID
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"namespace", "kind", "name"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "namespace":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Namespace = data
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Kind = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputPatchSourceRequestInput(ctx context.Context, obj interface{}) (model.PatchSourceRequestInput, error) {
+	var it model.PatchSourceRequestInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"reportedName"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "reportedName":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("reportedName"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.ReportedName = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputPersistNamespaceItemInput(ctx context.Context, obj interface{}) (model.PersistNamespaceItemInput, error) {
+	var it model.PersistNamespaceItemInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "futureSelected"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "futureSelected":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("futureSelected"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.FutureSelected = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputPersistNamespaceSourceInput(ctx context.Context, obj interface{}) (model.PersistNamespaceSourceInput, error) {
+	var it model.PersistNamespaceSourceInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "kind", "selected"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Kind = data
+		case "selected":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("selected"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Selected = data
+		}
+	}
+
+	return it, nil
+}
+
+// endregion **************************** input.gotpl *****************************
+
+// region    ************************** interface.gotpl ***************************
+
+// endregion ************************** interface.gotpl ***************************
+
+// region    **************************** object.gotpl ****************************
+
+var computePlatformImplementors = []string{"ComputePlatform"}
+
+func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.SelectionSet, obj *model.ComputePlatform) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, computePlatformImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ComputePlatform")
+		case "computePlatformType":
+			out.Values[i] = ec._ComputePlatform_computePlatformType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "k8sActualNamespace":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualNamespace(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "k8sActualNamespaces":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualNamespaces(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "k8sActualSource":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualSource(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "k8sActualSources":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_k8sActualSources(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "destinations":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_destinations(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "actions":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_actions(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var conditionImplementors = []string{"Condition"}
+
+func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet, obj *model.Condition) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, conditionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Condition")
+		case "type":
+			out.Values[i] = ec._Condition_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "status":
+			out.Values[i] = ec._Condition_status(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "lastTransitionTime":
+			out.Values[i] = ec._Condition_lastTransitionTime(ctx, field, obj)
+		case "reason":
+			out.Values[i] = ec._Condition_reason(ctx, field, obj)
+		case "message":
+			out.Values[i] = ec._Condition_message(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationImplementors = []string{"Destination"}
+
+func (ec *executionContext) _Destination(ctx context.Context, sel ast.SelectionSet, obj *model.Destination) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Destination")
+		case "id":
+			out.Values[i] = ec._Destination_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "name":
+			out.Values[i] = ec._Destination_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "type":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Destination_type(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "exportedSignals":
+			out.Values[i] = ec._Destination_exportedSignals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "fields":
+			out.Values[i] = ec._Destination_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "destinationType":
+			out.Values[i] = ec._Destination_destinationType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "conditions":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Destination_conditions(ctx, field, obj)
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationDetailsImplementors = []string{"DestinationDetails"}
+
+func (ec *executionContext) _DestinationDetails(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationDetails) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationDetailsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationDetails")
+		case "type":
+			out.Values[i] = ec._DestinationDetails_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "urlString":
+			out.Values[i] = ec._DestinationDetails_urlString(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "fields":
+			out.Values[i] = ec._DestinationDetails_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationTypesCategoryItemImplementors = []string{"DestinationTypesCategoryItem"}
+
+func (ec *executionContext) _DestinationTypesCategoryItem(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationTypesCategoryItem) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationTypesCategoryItemImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationTypesCategoryItem")
+		case "type":
+			out.Values[i] = ec._DestinationTypesCategoryItem_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "displayName":
+			out.Values[i] = ec._DestinationTypesCategoryItem_displayName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "imageUrl":
+			out.Values[i] = ec._DestinationTypesCategoryItem_imageUrl(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "supportedSignals":
+			out.Values[i] = ec._DestinationTypesCategoryItem_supportedSignals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "testConnectionSupported":
+			out.Values[i] = ec._DestinationTypesCategoryItem_testConnectionSupported(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var destinationsCategoryImplementors = []string{"DestinationsCategory"}
+
+func (ec *executionContext) _DestinationsCategory(ctx context.Context, sel ast.SelectionSet, obj *model.DestinationsCategory) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, destinationsCategoryImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DestinationsCategory")
+		case "name":
+			out.Values[i] = ec._DestinationsCategory_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "items":
+			out.Values[i] = ec._DestinationsCategory_items(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var exportedSignalsImplementors = []string{"ExportedSignals"}
+
+func (ec *executionContext) _ExportedSignals(ctx context.Context, sel ast.SelectionSet, obj *model.ExportedSignals) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, exportedSignalsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ExportedSignals")
+		case "traces":
+			out.Values[i] = ec._ExportedSignals_traces(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "metrics":
+			out.Values[i] = ec._ExportedSignals_metrics(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "logs":
+			out.Values[i] = ec._ExportedSignals_logs(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var fieldImplementors = []string{"Field"}
+
+func (ec *executionContext) _Field(ctx context.Context, sel ast.SelectionSet, obj *model.Field) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, fieldImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Field")
+		case "name":
+			out.Values[i] = ec._Field_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "displayName":
+			out.Values[i] = ec._Field_displayName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "componentType":
+			out.Values[i] = ec._Field_componentType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "componentProperties":
+			out.Values[i] = ec._Field_componentProperties(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "videoUrl":
+			out.Values[i] = ec._Field_videoUrl(ctx, field, obj)
+		case "thumbnailURL":
+			out.Values[i] = ec._Field_thumbnailURL(ctx, field, obj)
+		case "initialValue":
+			out.Values[i] = ec._Field_initialValue(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var getConfigResponseImplementors = []string{"GetConfigResponse"}
+
+func (ec *executionContext) _GetConfigResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetConfigResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, getConfigResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("GetConfigResponse")
+		case "installation":
+			out.Values[i] = ec._GetConfigResponse_installation(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var getDestinationDetailsResponseImplementors = []string{"GetDestinationDetailsResponse"}
+
+func (ec *executionContext) _GetDestinationDetailsResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetDestinationDetailsResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, getDestinationDetailsResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("GetDestinationDetailsResponse")
+		case "fields":
+			out.Values[i] = ec._GetDestinationDetailsResponse_fields(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var getDestinationTypesResponseImplementors = []string{"GetDestinationTypesResponse"}
+
+func (ec *executionContext) _GetDestinationTypesResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetDestinationTypesResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, getDestinationTypesResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("GetDestinationTypesResponse")
+		case "categories":
+			out.Values[i] = ec._GetDestinationTypesResponse_categories(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var icaInstanceResponseImplementors = []string{"IcaInstanceResponse"}
+
+func (ec *executionContext) _IcaInstanceResponse(ctx context.Context, sel ast.SelectionSet, obj *model.IcaInstanceResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, icaInstanceResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("IcaInstanceResponse")
+		case "id":
+			out.Values[i] = ec._IcaInstanceResponse_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._IcaInstanceResponse_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "spec":
+			out.Values[i] = ec._IcaInstanceResponse_spec(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var instrumentationLibraryImplementors = []string{"InstrumentationLibrary"}
+
+func (ec *executionContext) _InstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationLibrary) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationLibraryImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("InstrumentationLibrary")
+		case "libraryName":
+			out.Values[i] = ec._InstrumentationLibrary_libraryName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "options":
+			out.Values[i] = ec._InstrumentationLibrary_options(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var instrumentationOptionImplementors = []string{"InstrumentationOption"}
+
+func (ec *executionContext) _InstrumentationOption(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationOption) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationOptionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("InstrumentationOption")
+		case "optionKey":
+			out.Values[i] = ec._InstrumentationOption_optionKey(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "spanKind":
+			out.Values[i] = ec._InstrumentationOption_spanKind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var instrumentedApplicationDetailsImplementors = []string{"InstrumentedApplicationDetails"}
+
+func (ec *executionContext) _InstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentedApplicationDetails) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentedApplicationDetailsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("InstrumentedApplicationDetails")
+		case "containers":
+			out.Values[i] = ec._InstrumentedApplicationDetails_containers(ctx, field, obj)
+		case "conditions":
+			out.Values[i] = ec._InstrumentedApplicationDetails_conditions(ctx, field, obj)
+		case "instrumentationOptions":
+			out.Values[i] = ec._InstrumentedApplicationDetails_instrumentationOptions(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var k8sActualNamespaceImplementors = []string{"K8sActualNamespace"}
+
+func (ec *executionContext) _K8sActualNamespace(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualNamespace) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualNamespaceImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("K8sActualNamespace")
+		case "name":
+			out.Values[i] = ec._K8sActualNamespace_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				atomic.AddUint32(&out.Invalids, 1)
+			}
+		case "instrumentationLabelEnabled":
+			out.Values[i] = ec._K8sActualNamespace_instrumentationLabelEnabled(ctx, field, obj)
+		case "k8sActualSources":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._K8sActualNamespace_k8sActualSources(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var k8sActualSourceImplementors = []string{"K8sActualSource"}
+
+func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.SelectionSet, obj *model.K8sActualSource) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, k8sActualSourceImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("K8sActualSource")
+		case "namespace":
+			out.Values[i] = ec._K8sActualSource_namespace(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "kind":
+			out.Values[i] = ec._K8sActualSource_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._K8sActualSource_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "serviceName":
+			out.Values[i] = ec._K8sActualSource_serviceName(ctx, field, obj)
+		case "numberOfInstances":
+			out.Values[i] = ec._K8sActualSource_numberOfInstances(ctx, field, obj)
+		case "reportedName":
+			out.Values[i] = ec._K8sActualSource_reportedName(ctx, field, obj)
+		case "autoInstrumented":
+			out.Values[i] = ec._K8sActualSource_autoInstrumented(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "autoInstrumentedDecision":
+			out.Values[i] = ec._K8sActualSource_autoInstrumentedDecision(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "instrumentedApplicationDetails":
+			out.Values[i] = ec._K8sActualSource_instrumentedApplicationDetails(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var mutationImplementors = []string{"Mutation"}
+
+func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, mutationImplementors)
+	ctx = graphql.WithFieldContext(ctx, &graphql.FieldContext{
+		Object: "Mutation",
+	})
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		innerCtx := graphql.WithRootFieldContext(ctx, &graphql.RootFieldContext{
+			Object: field.Name,
+			Field:  field,
+		})
+
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Mutation")
+		case "createNewDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_createNewDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "persistK8sNamespace":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_persistK8sNamespace(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "persistK8sSources":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_persistK8sSources(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "testConnectionForDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_testConnectionForDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "updateK8sActualSource":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_updateK8sActualSource(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "updateDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_updateDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var observabilitySignalSupportImplementors = []string{"ObservabilitySignalSupport"}
+
+func (ec *executionContext) _ObservabilitySignalSupport(ctx context.Context, sel ast.SelectionSet, obj *model.ObservabilitySignalSupport) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, observabilitySignalSupportImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ObservabilitySignalSupport")
+		case "supported":
+			out.Values[i] = ec._ObservabilitySignalSupport_supported(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var queryImplementors = []string{"Query"}
+
+func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, queryImplementors)
+	ctx = graphql.WithFieldContext(ctx, &graphql.FieldContext{
+		Object: "Query",
+	})
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		innerCtx := graphql.WithRootFieldContext(ctx, &graphql.RootFieldContext{
+			Object: field.Name,
+			Field:  field,
+		})
+
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Query")
+		case "computePlatform":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_computePlatform(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "config":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_config(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "destinationTypes":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_destinationTypes(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "destinationTypeDetails":
+			field := field
+
+			innerFunc := func(ctx context.Context, _ *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_destinationTypeDetails(ctx, field)
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "potentialDestinations":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_potentialDestinations(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "__type":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Query___type(ctx, field)
+			})
+		case "__schema":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Query___schema(ctx, field)
+			})
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var sourceContainerRuntimeDetailsImplementors = []string{"SourceContainerRuntimeDetails"}
+
+func (ec *executionContext) _SourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, obj *model.SourceContainerRuntimeDetails) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, sourceContainerRuntimeDetailsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("SourceContainerRuntimeDetails")
+		case "containerName":
+			out.Values[i] = ec._SourceContainerRuntimeDetails_containerName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "language":
+			out.Values[i] = ec._SourceContainerRuntimeDetails_language(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var supportedSignalsImplementors = []string{"SupportedSignals"}
+
+func (ec *executionContext) _SupportedSignals(ctx context.Context, sel ast.SelectionSet, obj *model.SupportedSignals) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, supportedSignalsImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("SupportedSignals")
+		case "traces":
+			out.Values[i] = ec._SupportedSignals_traces(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "metrics":
+			out.Values[i] = ec._SupportedSignals_metrics(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "logs":
+			out.Values[i] = ec._SupportedSignals_logs(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var testConnectionResponseImplementors = []string{"TestConnectionResponse"}
+
+func (ec *executionContext) _TestConnectionResponse(ctx context.Context, sel ast.SelectionSet, obj *model.TestConnectionResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, testConnectionResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("TestConnectionResponse")
+		case "succeeded":
+			out.Values[i] = ec._TestConnectionResponse_succeeded(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "statusCode":
+			out.Values[i] = ec._TestConnectionResponse_statusCode(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "destinationType":
+			out.Values[i] = ec._TestConnectionResponse_destinationType(ctx, field, obj)
+		case "message":
+			out.Values[i] = ec._TestConnectionResponse_message(ctx, field, obj)
+		case "reason":
+			out.Values[i] = ec._TestConnectionResponse_reason(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __DirectiveImplementors = []string{"__Directive"}
+
+func (ec *executionContext) ___Directive(ctx context.Context, sel ast.SelectionSet, obj *introspection.Directive) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __DirectiveImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Directive")
+		case "name":
+			out.Values[i] = ec.___Directive_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___Directive_description(ctx, field, obj)
+		case "locations":
+			out.Values[i] = ec.___Directive_locations(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "args":
+			out.Values[i] = ec.___Directive_args(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "isRepeatable":
+			out.Values[i] = ec.___Directive_isRepeatable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __EnumValueImplementors = []string{"__EnumValue"}
+
+func (ec *executionContext) ___EnumValue(ctx context.Context, sel ast.SelectionSet, obj *introspection.EnumValue) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __EnumValueImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__EnumValue")
+		case "name":
+			out.Values[i] = ec.___EnumValue_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___EnumValue_description(ctx, field, obj)
+		case "isDeprecated":
+			out.Values[i] = ec.___EnumValue_isDeprecated(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deprecationReason":
+			out.Values[i] = ec.___EnumValue_deprecationReason(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __FieldImplementors = []string{"__Field"}
+
+func (ec *executionContext) ___Field(ctx context.Context, sel ast.SelectionSet, obj *introspection.Field) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __FieldImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Field")
+		case "name":
+			out.Values[i] = ec.___Field_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___Field_description(ctx, field, obj)
+		case "args":
+			out.Values[i] = ec.___Field_args(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec.___Field_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "isDeprecated":
+			out.Values[i] = ec.___Field_isDeprecated(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deprecationReason":
+			out.Values[i] = ec.___Field_deprecationReason(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __InputValueImplementors = []string{"__InputValue"}
+
+func (ec *executionContext) ___InputValue(ctx context.Context, sel ast.SelectionSet, obj *introspection.InputValue) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __InputValueImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__InputValue")
+		case "name":
+			out.Values[i] = ec.___InputValue_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "description":
+			out.Values[i] = ec.___InputValue_description(ctx, field, obj)
+		case "type":
+			out.Values[i] = ec.___InputValue_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "defaultValue":
+			out.Values[i] = ec.___InputValue_defaultValue(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __SchemaImplementors = []string{"__Schema"}
+
+func (ec *executionContext) ___Schema(ctx context.Context, sel ast.SelectionSet, obj *introspection.Schema) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __SchemaImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Schema")
+		case "description":
+			out.Values[i] = ec.___Schema_description(ctx, field, obj)
+		case "types":
+			out.Values[i] = ec.___Schema_types(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "queryType":
+			out.Values[i] = ec.___Schema_queryType(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "mutationType":
+			out.Values[i] = ec.___Schema_mutationType(ctx, field, obj)
+		case "subscriptionType":
+			out.Values[i] = ec.___Schema_subscriptionType(ctx, field, obj)
+		case "directives":
+			out.Values[i] = ec.___Schema_directives(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var __TypeImplementors = []string{"__Type"}
+
+func (ec *executionContext) ___Type(ctx context.Context, sel ast.SelectionSet, obj *introspection.Type) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, __TypeImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("__Type")
+		case "kind":
+			out.Values[i] = ec.___Type_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec.___Type_name(ctx, field, obj)
+		case "description":
+			out.Values[i] = ec.___Type_description(ctx, field, obj)
+		case "fields":
+			out.Values[i] = ec.___Type_fields(ctx, field, obj)
+		case "interfaces":
+			out.Values[i] = ec.___Type_interfaces(ctx, field, obj)
+		case "possibleTypes":
+			out.Values[i] = ec.___Type_possibleTypes(ctx, field, obj)
+		case "enumValues":
+			out.Values[i] = ec.___Type_enumValues(ctx, field, obj)
+		case "inputFields":
+			out.Values[i] = ec.___Type_inputFields(ctx, field, obj)
+		case "ofType":
+			out.Values[i] = ec.___Type_ofType(ctx, field, obj)
+		case "specifiedByURL":
+			out.Values[i] = ec.___Type_specifiedByURL(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+// endregion **************************** object.gotpl ****************************
+
+// region    ***************************** type.gotpl *****************************
+
+func (ec *executionContext) unmarshalNBoolean2bool(ctx context.Context, v interface{}) (bool, error) {
+	res, err := graphql.UnmarshalBoolean(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNBoolean2bool(ctx context.Context, sel ast.SelectionSet, v bool) graphql.Marshaler {
+	res := graphql.MarshalBoolean(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) unmarshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, v interface{}) (model.ComputePlatformType, error) {
+	var res model.ComputePlatformType
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, sel ast.SelectionSet, v model.ComputePlatformType) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) marshalNCondition2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐCondition(ctx context.Context, sel ast.SelectionSet, v *model.Condition) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._Condition(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx context.Context, v interface{}) (model.ConditionStatus, error) {
+	var res model.ConditionStatus
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx context.Context, sel ast.SelectionSet, v model.ConditionStatus) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) marshalNDestination2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v model.Destination) graphql.Marshaler {
+	return ec._Destination(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.Destination) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v *model.Destination) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._Destination(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalNDestinationDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationDetailsᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.DestinationDetails) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestinationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationDetails(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDestinationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationDetails(ctx context.Context, sel ast.SelectionSet, v *model.DestinationDetails) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._DestinationDetails(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNDestinationInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationInput(ctx context.Context, v interface{}) (model.DestinationInput, error) {
+	res, err := ec.unmarshalInputDestinationInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx context.Context, sel ast.SelectionSet, v model.DestinationTypesCategoryItem) graphql.Marshaler {
+	return ec._DestinationTypesCategoryItem(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNDestinationTypesCategoryItem2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItemᚄ(ctx context.Context, sel ast.SelectionSet, v []model.DestinationTypesCategoryItem) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestinationTypesCategoryItem2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationTypesCategoryItem(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDestinationsCategory2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationsCategory(ctx context.Context, sel ast.SelectionSet, v model.DestinationsCategory) graphql.Marshaler {
+	return ec._DestinationsCategory(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNDestinationsCategory2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationsCategoryᚄ(ctx context.Context, sel ast.SelectionSet, v []model.DestinationsCategory) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDestinationsCategory2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationsCategory(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNExportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignals(ctx context.Context, sel ast.SelectionSet, v model.ExportedSignals) graphql.Marshaler {
+	return ec._ExportedSignals(ctx, sel, &v)
+}
+
+func (ec *executionContext) unmarshalNExportedSignalsInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐExportedSignalsInput(ctx context.Context, v interface{}) (*model.ExportedSignalsInput, error) {
+	res, err := ec.unmarshalInputExportedSignalsInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNField2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.Field) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐField(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNField2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐField(ctx context.Context, sel ast.SelectionSet, v *model.Field) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._Field(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNFieldInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldInputᚄ(ctx context.Context, v interface{}) ([]*model.FieldInput, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*model.FieldInput, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNFieldInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldInput(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) unmarshalNFieldInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐFieldInput(ctx context.Context, v interface{}) (*model.FieldInput, error) {
+	res, err := ec.unmarshalInputFieldInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNID2string(ctx context.Context, v interface{}) (string, error) {
+	res, err := graphql.UnmarshalID(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNID2string(ctx context.Context, sel ast.SelectionSet, v string) graphql.Marshaler {
+	res := graphql.MarshalID(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) marshalNIcaInstanceResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponseᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.IcaInstanceResponse) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNIcaInstanceResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponse(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNIcaInstanceResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponse(ctx context.Context, sel ast.SelectionSet, v *model.IcaInstanceResponse) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._IcaInstanceResponse(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx context.Context, v interface{}) (model.InstallationStatus, error) {
+	var res model.InstallationStatus
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx context.Context, sel ast.SelectionSet, v model.InstallationStatus) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationLibrary) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNInstrumentationLibrary2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibrary(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNInstrumentationLibrary2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationLibrary) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._InstrumentationLibrary(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalNInstrumentationOption2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOptionᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationOption) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNInstrumentationOption2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOption(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNInstrumentationOption2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOption(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationOption) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._InstrumentationOption(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNInt2int(ctx context.Context, v interface{}) (int, error) {
+	res, err := graphql.UnmarshalInt(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNInt2int(ctx context.Context, sel ast.SelectionSet, v int) graphql.Marshaler {
+	res := graphql.MarshalInt(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx context.Context, sel ast.SelectionSet, v []*model.K8sActualNamespace) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx context.Context, sel ast.SelectionSet, v []*model.K8sActualSource) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx context.Context, v interface{}) (model.K8sResourceKind, error) {
+	var res model.K8sResourceKind
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx context.Context, sel ast.SelectionSet, v model.K8sResourceKind) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) unmarshalNK8sSourceId2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sSourceID(ctx context.Context, v interface{}) (model.K8sSourceID, error) {
+	res, err := ec.unmarshalInputK8sSourceId(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx context.Context, sel ast.SelectionSet, v model.ObservabilitySignalSupport) graphql.Marshaler {
+	return ec._ObservabilitySignalSupport(ctx, sel, &v)
+}
+
+func (ec *executionContext) unmarshalNPatchSourceRequestInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPatchSourceRequestInput(ctx context.Context, v interface{}) (model.PatchSourceRequestInput, error) {
+	res, err := ec.unmarshalInputPatchSourceRequestInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNPersistNamespaceItemInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceItemInput(ctx context.Context, v interface{}) (model.PersistNamespaceItemInput, error) {
+	res, err := ec.unmarshalInputPersistNamespaceItemInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) unmarshalNPersistNamespaceSourceInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceSourceInputᚄ(ctx context.Context, v interface{}) ([]*model.PersistNamespaceSourceInput, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*model.PersistNamespaceSourceInput, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNPersistNamespaceSourceInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceSourceInput(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) unmarshalNPersistNamespaceSourceInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPersistNamespaceSourceInput(ctx context.Context, v interface{}) (*model.PersistNamespaceSourceInput, error) {
+	res, err := ec.unmarshalInputPersistNamespaceSourceInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNSourceContainerRuntimeDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, v *model.SourceContainerRuntimeDetails) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._SourceContainerRuntimeDetails(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNSpanKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx context.Context, v interface{}) (model.SpanKind, error) {
+	var res model.SpanKind
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNSpanKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx context.Context, sel ast.SelectionSet, v model.SpanKind) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) unmarshalNString2string(ctx context.Context, v interface{}) (string, error) {
+	res, err := graphql.UnmarshalString(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNString2string(ctx context.Context, sel ast.SelectionSet, v string) graphql.Marshaler {
+	res := graphql.MarshalString(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) marshalNSupportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSupportedSignals(ctx context.Context, sel ast.SelectionSet, v model.SupportedSignals) graphql.Marshaler {
+	return ec._SupportedSignals(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNTestConnectionResponse2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐTestConnectionResponse(ctx context.Context, sel ast.SelectionSet, v model.TestConnectionResponse) graphql.Marshaler {
+	return ec._TestConnectionResponse(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNTestConnectionResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐTestConnectionResponse(ctx context.Context, sel ast.SelectionSet, v *model.TestConnectionResponse) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._TestConnectionResponse(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalN__Directive2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirective(ctx context.Context, sel ast.SelectionSet, v introspection.Directive) graphql.Marshaler {
+	return ec.___Directive(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__Directive2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirectiveᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.Directive) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__Directive2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐDirective(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalN__DirectiveLocation2string(ctx context.Context, v interface{}) (string, error) {
+	res, err := graphql.UnmarshalString(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalN__DirectiveLocation2string(ctx context.Context, sel ast.SelectionSet, v string) graphql.Marshaler {
+	res := graphql.MarshalString(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) unmarshalN__DirectiveLocation2ᚕstringᚄ(ctx context.Context, v interface{}) ([]string, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]string, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalN__DirectiveLocation2string(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalN__DirectiveLocation2ᚕstringᚄ(ctx context.Context, sel ast.SelectionSet, v []string) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__DirectiveLocation2string(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalN__EnumValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValue(ctx context.Context, sel ast.SelectionSet, v introspection.EnumValue) graphql.Marshaler {
+	return ec.___EnumValue(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__Field2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐField(ctx context.Context, sel ast.SelectionSet, v introspection.Field) graphql.Marshaler {
+	return ec.___Field(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__InputValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValue(ctx context.Context, sel ast.SelectionSet, v introspection.InputValue) graphql.Marshaler {
+	return ec.___InputValue(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.InputValue) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__InputValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValue(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalN__Type2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx context.Context, sel ast.SelectionSet, v introspection.Type) graphql.Marshaler {
+	return ec.___Type(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalN__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.Type) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__Type2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalN__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx context.Context, sel ast.SelectionSet, v *introspection.Type) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec.___Type(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalN__TypeKind2string(ctx context.Context, v interface{}) (string, error) {
+	res, err := graphql.UnmarshalString(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalN__TypeKind2string(ctx context.Context, sel ast.SelectionSet, v string) graphql.Marshaler {
+	res := graphql.MarshalString(v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+	}
+	return res
+}
+
+func (ec *executionContext) unmarshalOBoolean2bool(ctx context.Context, v interface{}) (bool, error) {
+	res, err := graphql.UnmarshalBoolean(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOBoolean2bool(ctx context.Context, sel ast.SelectionSet, v bool) graphql.Marshaler {
+	res := graphql.MarshalBoolean(v)
+	return res
+}
+
+func (ec *executionContext) unmarshalOBoolean2ᚖbool(ctx context.Context, v interface{}) (*bool, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := graphql.UnmarshalBoolean(v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOBoolean2ᚖbool(ctx context.Context, sel ast.SelectionSet, v *bool) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	res := graphql.MarshalBoolean(*v)
+	return res
+}
+
+func (ec *executionContext) marshalOComputePlatform2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatform(ctx context.Context, sel ast.SelectionSet, v *model.ComputePlatform) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._ComputePlatform(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.Condition) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNCondition2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐCondition(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetConfigResponse(ctx context.Context, sel ast.SelectionSet, v *model.GetConfigResponse) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._GetConfigResponse(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOGetDestinationDetailsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationDetailsResponse(ctx context.Context, sel ast.SelectionSet, v *model.GetDestinationDetailsResponse) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._GetDestinationDetailsResponse(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOGetDestinationTypesResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetDestinationTypesResponse(ctx context.Context, sel ast.SelectionSet, v *model.GetDestinationTypesResponse) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._GetDestinationTypesResponse(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentedApplicationDetails) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._InstrumentedApplicationDetails(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalOInt2ᚖint(ctx context.Context, v interface{}) (*int, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := graphql.UnmarshalInt(v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOInt2ᚖint(ctx context.Context, sel ast.SelectionSet, v *int) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	res := graphql.MarshalInt(*v)
+	return res
+}
+
+func (ec *executionContext) marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx context.Context, sel ast.SelectionSet, v *model.K8sActualNamespace) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._K8sActualNamespace(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx context.Context, sel ast.SelectionSet, v *model.K8sActualSource) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._K8sActualSource(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.SourceContainerRuntimeDetails) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNSourceContainerRuntimeDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetails(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalOString2ᚖstring(ctx context.Context, v interface{}) (*string, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := graphql.UnmarshalString(v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOString2ᚖstring(ctx context.Context, sel ast.SelectionSet, v *string) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	res := graphql.MarshalString(*v)
+	return res
+}
+
+func (ec *executionContext) marshalO__EnumValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValueᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.EnumValue) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__EnumValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐEnumValue(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalO__Field2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐFieldᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.Field) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__Field2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐField(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalO__InputValue2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValueᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.InputValue) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__InputValue2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐInputValue(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalO__Schema2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐSchema(ctx context.Context, sel ast.SelectionSet, v *introspection.Schema) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec.___Schema(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalO__Type2ᚕgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐTypeᚄ(ctx context.Context, sel ast.SelectionSet, v []introspection.Type) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalN__Type2githubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalO__Type2ᚖgithubᚗcomᚋ99designsᚋgqlgenᚋgraphqlᚋintrospectionᚐType(ctx context.Context, sel ast.SelectionSet, v *introspection.Type) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec.___Type(ctx, sel, v)
+}
+
+// endregion ***************************** type.gotpl *****************************
diff --git a/frontend/graph/model/destination.go b/frontend/graph/model/destination.go
new file mode 100644
index 000000000..5f2890a08
--- /dev/null
+++ b/frontend/graph/model/destination.go
@@ -0,0 +1,48 @@
+package model
+
+import (
+	"github.com/odigos-io/odigos/common"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type GetDestinationTypesResponse struct {
+	Categories []DestinationsCategory `json:"categories"`
+}
+
+type DestinationTypesCategoryItem struct {
+	Type                    string           `json:"type"`
+	DisplayName             string           `json:"display_name"`
+	ImageUrl                string           `json:"image_url"`
+	SupportedSignals        SupportedSignals `json:"supported_signals"`
+	TestConnectionSupported bool             `json:"test_connection_supported"`
+}
+
+type SupportedSignals struct {
+	Traces  ObservabilitySignalSupport `json:"traces"`
+	Metrics ObservabilitySignalSupport `json:"metrics"`
+	Logs    ObservabilitySignalSupport `json:"logs"`
+}
+
+type ObservabilitySignalSupport struct {
+	Supported bool `json:"supported"`
+}
+type DestinationsCategory struct {
+	Name  string                         `json:"name"`
+	Items []DestinationTypesCategoryItem `json:"items"`
+}
+
+type ExportedSignals struct {
+	Traces  bool `json:"traces"`
+	Metrics bool `json:"metrics"`
+	Logs    bool `json:"logs"`
+}
+
+type Destination struct {
+	Id              string                       `json:"id"`
+	Name            string                       `json:"name"`
+	Type            common.DestinationType       `json:"type"`
+	ExportedSignals ExportedSignals              `json:"signals"`
+	Fields          string                       `json:"fields"`
+	DestinationType DestinationTypesCategoryItem `json:"destination_type"`
+	Conditions      []metav1.Condition           `json:"conditions,omitempty"`
+}
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
new file mode 100644
index 000000000..27374cf6b
--- /dev/null
+++ b/frontend/graph/model/models_gen.go
@@ -0,0 +1,471 @@
+// Code generated by github.com/99designs/gqlgen, DO NOT EDIT.
+
+package model
+
+import (
+	"fmt"
+	"io"
+	"strconv"
+)
+
+type ComputePlatform struct {
+	ComputePlatformType ComputePlatformType    `json:"computePlatformType"`
+	K8sActualNamespace  *K8sActualNamespace    `json:"k8sActualNamespace,omitempty"`
+	K8sActualNamespaces []*K8sActualNamespace  `json:"k8sActualNamespaces"`
+	K8sActualSource     *K8sActualSource       `json:"k8sActualSource,omitempty"`
+	K8sActualSources    []*K8sActualSource     `json:"k8sActualSources"`
+	Destinations        []*Destination         `json:"destinations"`
+	Actions             []*IcaInstanceResponse `json:"actions"`
+}
+
+type Condition struct {
+	Type               string          `json:"type"`
+	Status             ConditionStatus `json:"status"`
+	LastTransitionTime *string         `json:"lastTransitionTime,omitempty"`
+	Reason             *string         `json:"reason,omitempty"`
+	Message            *string         `json:"message,omitempty"`
+}
+
+type DestinationDetails struct {
+	Type      string `json:"type"`
+	URLString string `json:"urlString"`
+	Fields    string `json:"fields"`
+}
+
+type DestinationInput struct {
+	Name            string                `json:"name"`
+	Type            string                `json:"type"`
+	ExportedSignals *ExportedSignalsInput `json:"exportedSignals"`
+	Fields          []*FieldInput         `json:"fields"`
+}
+
+type ExportedSignalsInput struct {
+	Traces  bool `json:"traces"`
+	Metrics bool `json:"metrics"`
+	Logs    bool `json:"logs"`
+}
+
+type Field struct {
+	Name                string  `json:"name"`
+	DisplayName         string  `json:"displayName"`
+	ComponentType       string  `json:"componentType"`
+	ComponentProperties string  `json:"componentProperties"`
+	VideoURL            *string `json:"videoUrl,omitempty"`
+	ThumbnailURL        *string `json:"thumbnailURL,omitempty"`
+	InitialValue        *string `json:"initialValue,omitempty"`
+}
+
+type FieldInput struct {
+	Key   string `json:"key"`
+	Value string `json:"value"`
+}
+
+type GetConfigResponse struct {
+	Installation InstallationStatus `json:"installation"`
+}
+
+type GetDestinationDetailsResponse struct {
+	Fields []*Field `json:"fields"`
+}
+
+type IcaInstanceResponse struct {
+	ID   string `json:"id"`
+	Type string `json:"type"`
+	Spec string `json:"spec"`
+}
+
+type InstrumentationLibrary struct {
+	LibraryName string                   `json:"libraryName"`
+	Options     []*InstrumentationOption `json:"options"`
+}
+
+type InstrumentationOption struct {
+	OptionKey string   `json:"optionKey"`
+	SpanKind  SpanKind `json:"spanKind"`
+}
+
+type InstrumentedApplicationDetails struct {
+	Containers             []*SourceContainerRuntimeDetails `json:"containers,omitempty"`
+	Conditions             []*Condition                     `json:"conditions,omitempty"`
+	InstrumentationOptions []*InstrumentationLibrary        `json:"instrumentationOptions"`
+}
+
+type K8sActualNamespace struct {
+	Name                        string             `json:"name"`
+	InstrumentationLabelEnabled *bool              `json:"instrumentationLabelEnabled,omitempty"`
+	K8sActualSources            []*K8sActualSource `json:"k8sActualSources"`
+}
+
+type K8sActualSource struct {
+	Namespace                      string                          `json:"namespace"`
+	Kind                           K8sResourceKind                 `json:"kind"`
+	Name                           string                          `json:"name"`
+	ServiceName                    *string                         `json:"serviceName,omitempty"`
+	NumberOfInstances              *int                            `json:"numberOfInstances,omitempty"`
+	ReportedName                   *string                         `json:"reportedName,omitempty"`
+	AutoInstrumented               bool                            `json:"autoInstrumented"`
+	AutoInstrumentedDecision       string                          `json:"autoInstrumentedDecision"`
+	InstrumentedApplicationDetails *InstrumentedApplicationDetails `json:"instrumentedApplicationDetails,omitempty"`
+}
+
+type K8sDesiredNamespaceInput struct {
+	AutoInstrument *bool `json:"autoInstrument,omitempty"`
+}
+
+type K8sDesiredSourceInput struct {
+	ServiceName    *string `json:"serviceName,omitempty"`
+	AutoInstrument *bool   `json:"autoInstrument,omitempty"`
+}
+
+type K8sNamespaceID struct {
+	Name string `json:"name"`
+}
+
+type K8sSourceID struct {
+	Namespace string          `json:"namespace"`
+	Kind      K8sResourceKind `json:"kind"`
+	Name      string          `json:"name"`
+}
+
+type Mutation struct {
+}
+
+type PatchSourceRequestInput struct {
+	ReportedName *string `json:"reportedName,omitempty"`
+}
+
+type PersistNamespaceItemInput struct {
+	Name           string `json:"name"`
+	FutureSelected *bool  `json:"futureSelected,omitempty"`
+}
+
+type PersistNamespaceSourceInput struct {
+	Name     string          `json:"name"`
+	Kind     K8sResourceKind `json:"kind"`
+	Selected *bool           `json:"selected,omitempty"`
+}
+
+type Query struct {
+}
+
+type SourceContainerRuntimeDetails struct {
+	ContainerName string `json:"containerName"`
+	Language      string `json:"language"`
+}
+
+type TestConnectionResponse struct {
+	Succeeded       bool    `json:"succeeded"`
+	StatusCode      int     `json:"statusCode"`
+	DestinationType *string `json:"destinationType,omitempty"`
+	Message         *string `json:"message,omitempty"`
+	Reason          *string `json:"reason,omitempty"`
+}
+
+type ComputePlatformType string
+
+const (
+	ComputePlatformTypeK8s ComputePlatformType = "K8S"
+	ComputePlatformTypeVM  ComputePlatformType = "VM"
+)
+
+var AllComputePlatformType = []ComputePlatformType{
+	ComputePlatformTypeK8s,
+	ComputePlatformTypeVM,
+}
+
+func (e ComputePlatformType) IsValid() bool {
+	switch e {
+	case ComputePlatformTypeK8s, ComputePlatformTypeVM:
+		return true
+	}
+	return false
+}
+
+func (e ComputePlatformType) String() string {
+	return string(e)
+}
+
+func (e *ComputePlatformType) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = ComputePlatformType(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid ComputePlatformType", str)
+	}
+	return nil
+}
+
+func (e ComputePlatformType) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type ConditionStatus string
+
+const (
+	ConditionStatusTrue    ConditionStatus = "True"
+	ConditionStatusFalse   ConditionStatus = "False"
+	ConditionStatusUnknown ConditionStatus = "Unknown"
+)
+
+var AllConditionStatus = []ConditionStatus{
+	ConditionStatusTrue,
+	ConditionStatusFalse,
+	ConditionStatusUnknown,
+}
+
+func (e ConditionStatus) IsValid() bool {
+	switch e {
+	case ConditionStatusTrue, ConditionStatusFalse, ConditionStatusUnknown:
+		return true
+	}
+	return false
+}
+
+func (e ConditionStatus) String() string {
+	return string(e)
+}
+
+func (e *ConditionStatus) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = ConditionStatus(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid ConditionStatus", str)
+	}
+	return nil
+}
+
+func (e ConditionStatus) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type InstallationStatus string
+
+const (
+	InstallationStatusNew          InstallationStatus = "NEW"
+	InstallationStatusAppsSelected InstallationStatus = "APPS_SELECTED"
+	InstallationStatusFinished     InstallationStatus = "FINISHED"
+)
+
+var AllInstallationStatus = []InstallationStatus{
+	InstallationStatusNew,
+	InstallationStatusAppsSelected,
+	InstallationStatusFinished,
+}
+
+func (e InstallationStatus) IsValid() bool {
+	switch e {
+	case InstallationStatusNew, InstallationStatusAppsSelected, InstallationStatusFinished:
+		return true
+	}
+	return false
+}
+
+func (e InstallationStatus) String() string {
+	return string(e)
+}
+
+func (e *InstallationStatus) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = InstallationStatus(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid InstallationStatus", str)
+	}
+	return nil
+}
+
+func (e InstallationStatus) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type K8sResourceKind string
+
+const (
+	K8sResourceKindDeployment  K8sResourceKind = "Deployment"
+	K8sResourceKindDaemonSet   K8sResourceKind = "DaemonSet"
+	K8sResourceKindStatefulSet K8sResourceKind = "StatefulSet"
+)
+
+var AllK8sResourceKind = []K8sResourceKind{
+	K8sResourceKindDeployment,
+	K8sResourceKindDaemonSet,
+	K8sResourceKindStatefulSet,
+}
+
+func (e K8sResourceKind) IsValid() bool {
+	switch e {
+	case K8sResourceKindDeployment, K8sResourceKindDaemonSet, K8sResourceKindStatefulSet:
+		return true
+	}
+	return false
+}
+
+func (e K8sResourceKind) String() string {
+	return string(e)
+}
+
+func (e *K8sResourceKind) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = K8sResourceKind(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid K8sResourceKind", str)
+	}
+	return nil
+}
+
+func (e K8sResourceKind) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type ProgrammingLanguage string
+
+const (
+	ProgrammingLanguageUnspecified ProgrammingLanguage = "Unspecified"
+	ProgrammingLanguageJava        ProgrammingLanguage = "Java"
+	ProgrammingLanguageGo          ProgrammingLanguage = "Go"
+	ProgrammingLanguageJavaScript  ProgrammingLanguage = "JavaScript"
+	ProgrammingLanguagePython      ProgrammingLanguage = "Python"
+	ProgrammingLanguageDotNet      ProgrammingLanguage = "DotNet"
+)
+
+var AllProgrammingLanguage = []ProgrammingLanguage{
+	ProgrammingLanguageUnspecified,
+	ProgrammingLanguageJava,
+	ProgrammingLanguageGo,
+	ProgrammingLanguageJavaScript,
+	ProgrammingLanguagePython,
+	ProgrammingLanguageDotNet,
+}
+
+func (e ProgrammingLanguage) IsValid() bool {
+	switch e {
+	case ProgrammingLanguageUnspecified, ProgrammingLanguageJava, ProgrammingLanguageGo, ProgrammingLanguageJavaScript, ProgrammingLanguagePython, ProgrammingLanguageDotNet:
+		return true
+	}
+	return false
+}
+
+func (e ProgrammingLanguage) String() string {
+	return string(e)
+}
+
+func (e *ProgrammingLanguage) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = ProgrammingLanguage(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid ProgrammingLanguage", str)
+	}
+	return nil
+}
+
+func (e ProgrammingLanguage) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type SignalType string
+
+const (
+	SignalTypeTraces  SignalType = "TRACES"
+	SignalTypeMetrics SignalType = "METRICS"
+	SignalTypeLogs    SignalType = "LOGS"
+)
+
+var AllSignalType = []SignalType{
+	SignalTypeTraces,
+	SignalTypeMetrics,
+	SignalTypeLogs,
+}
+
+func (e SignalType) IsValid() bool {
+	switch e {
+	case SignalTypeTraces, SignalTypeMetrics, SignalTypeLogs:
+		return true
+	}
+	return false
+}
+
+func (e SignalType) String() string {
+	return string(e)
+}
+
+func (e *SignalType) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = SignalType(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid SignalType", str)
+	}
+	return nil
+}
+
+func (e SignalType) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
+
+type SpanKind string
+
+const (
+	SpanKindInternal SpanKind = "Internal"
+	SpanKindServer   SpanKind = "Server"
+	SpanKindClient   SpanKind = "Client"
+	SpanKindProducer SpanKind = "Producer"
+	SpanKindConsumer SpanKind = "Consumer"
+)
+
+var AllSpanKind = []SpanKind{
+	SpanKindInternal,
+	SpanKindServer,
+	SpanKindClient,
+	SpanKindProducer,
+	SpanKindConsumer,
+}
+
+func (e SpanKind) IsValid() bool {
+	switch e {
+	case SpanKindInternal, SpanKindServer, SpanKindClient, SpanKindProducer, SpanKindConsumer:
+		return true
+	}
+	return false
+}
+
+func (e SpanKind) String() string {
+	return string(e)
+}
+
+func (e *SpanKind) UnmarshalGQL(v interface{}) error {
+	str, ok := v.(string)
+	if !ok {
+		return fmt.Errorf("enums must be strings")
+	}
+
+	*e = SpanKind(str)
+	if !e.IsValid() {
+		return fmt.Errorf("%s is not a valid SpanKind", str)
+	}
+	return nil
+}
+
+func (e SpanKind) MarshalGQL(w io.Writer) {
+	fmt.Fprint(w, strconv.Quote(e.String()))
+}
diff --git a/frontend/graph/resolver.go b/frontend/graph/resolver.go
new file mode 100644
index 000000000..a25c09c61
--- /dev/null
+++ b/frontend/graph/resolver.go
@@ -0,0 +1,7 @@
+package graph
+
+// This file will not be regenerated automatically.
+//
+// It serves as dependency injection for your app, add any dependencies you require here.
+
+type Resolver struct{}
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
new file mode 100644
index 000000000..666582cb9
--- /dev/null
+++ b/frontend/graph/schema.graphqls
@@ -0,0 +1,264 @@
+enum ComputePlatformType {
+  K8S
+  VM
+}
+
+enum K8sResourceKind {
+  Deployment
+  DaemonSet
+  StatefulSet
+}
+
+enum ConditionStatus {
+  True
+  False
+  Unknown
+}
+
+enum ProgrammingLanguage {
+  Unspecified
+  Java
+  Go
+  JavaScript
+  Python
+  DotNet
+}
+
+enum SignalType {
+  TRACES
+  METRICS
+  LOGS
+}
+
+enum SpanKind {
+  Internal
+  Server
+  Client
+  Producer
+  Consumer
+}
+
+enum InstallationStatus {
+  NEW
+  APPS_SELECTED
+  FINISHED
+}
+
+type SourceContainerRuntimeDetails {
+  containerName: String!
+  language: String!
+}
+
+type InstrumentationOption {
+  optionKey: String!
+  spanKind: SpanKind!
+}
+
+type InstrumentationLibrary {
+  libraryName: String!
+  options: [InstrumentationOption!]!
+}
+
+type InstrumentedApplicationDetails {
+  containers: [SourceContainerRuntimeDetails!]
+  conditions: [Condition!]
+  instrumentationOptions: [InstrumentationLibrary!]!
+}
+
+type Condition {
+  type: String!
+  status: ConditionStatus!
+  lastTransitionTime: String
+  reason: String
+  message: String
+}
+
+type K8sActualNamespace {
+  name: String!
+  instrumentationLabelEnabled: Boolean
+  k8sActualSources(instrumentationLabeled: Boolean): [K8sActualSource]!
+}
+
+input K8sDesiredNamespaceInput {
+  autoInstrument: Boolean
+}
+
+input K8sNamespaceId {
+  name: String!
+}
+
+type K8sActualSource {
+  namespace: String!
+  kind: K8sResourceKind!
+  name: String!
+  serviceName: String
+  numberOfInstances: Int
+  reportedName: String
+  autoInstrumented: Boolean!
+  autoInstrumentedDecision: String!
+  instrumentedApplicationDetails: InstrumentedApplicationDetails
+}
+
+input K8sDesiredSourceInput {
+  serviceName: String
+  autoInstrument: Boolean
+}
+
+input K8sSourceId {
+  namespace: String!
+  kind: K8sResourceKind!
+  name: String!
+}
+
+type ComputePlatform {
+  computePlatformType: ComputePlatformType!
+  k8sActualNamespace(name: String!): K8sActualNamespace
+  k8sActualNamespaces: [K8sActualNamespace]!
+  k8sActualSource(
+    name: String
+    namespace: String
+    kind: String
+  ): K8sActualSource
+  k8sActualSources: [K8sActualSource]!
+  destinations: [Destination!]!
+  actions: [IcaInstanceResponse!]!
+}
+
+type SupportedSignals {
+  traces: ObservabilitySignalSupport!
+  metrics: ObservabilitySignalSupport!
+  logs: ObservabilitySignalSupport!
+}
+
+type ObservabilitySignalSupport {
+  supported: Boolean!
+}
+
+type DestinationTypesCategoryItem {
+  type: String!
+  displayName: String!
+  imageUrl: String!
+  supportedSignals: SupportedSignals!
+  testConnectionSupported: Boolean!
+}
+
+type DestinationsCategory {
+  name: String!
+  items: [DestinationTypesCategoryItem!]!
+}
+
+type GetDestinationTypesResponse {
+  categories: [DestinationsCategory!]!
+}
+
+type ExportedSignals {
+  traces: Boolean!
+  metrics: Boolean!
+  logs: Boolean!
+}
+
+type Destination {
+  id: ID!
+  name: String!
+  type: String!
+  exportedSignals: ExportedSignals!
+  fields: String!
+  destinationType: DestinationTypesCategoryItem!
+  conditions: [Condition!]
+}
+
+type GetConfigResponse {
+  installation: InstallationStatus!
+}
+
+type Field {
+  name: String!
+  displayName: String!
+  componentType: String!
+  componentProperties: String! # Using String to store JSON data as a string
+  videoUrl: String
+  thumbnailURL: String
+  initialValue: String
+}
+
+type GetDestinationDetailsResponse {
+  fields: [Field!]!
+}
+
+input DestinationInput {
+  name: String!
+  type: String!
+  exportedSignals: ExportedSignalsInput!
+  fields: [FieldInput!]!
+}
+
+input FieldInput {
+  key: String!
+  value: String!
+}
+
+input ExportedSignalsInput {
+  traces: Boolean!
+  metrics: Boolean!
+  logs: Boolean!
+}
+
+input PersistNamespaceItemInput {
+  name: String!
+  futureSelected: Boolean
+}
+
+input PersistNamespaceSourceInput {
+  name: String!
+  kind: K8sResourceKind!
+  selected: Boolean
+}
+
+type TestConnectionResponse {
+  succeeded: Boolean!
+  statusCode: Int!
+  destinationType: String
+  message: String
+  reason: String
+}
+
+type DestinationDetails {
+  type: String!
+  urlString: String!
+  fields: String!
+}
+
+type IcaInstanceResponse {
+  id: String!
+  type: String!
+  spec: String!
+}
+
+input PatchSourceRequestInput {
+  reportedName: String
+}
+
+type Query {
+  computePlatform: ComputePlatform
+  config: GetConfigResponse
+  destinationTypes: GetDestinationTypesResponse
+  destinationTypeDetails(type: String!): GetDestinationDetailsResponse
+  potentialDestinations: [DestinationDetails!]!
+}
+
+type Mutation {
+  createNewDestination(destination: DestinationInput!): Destination!
+  persistK8sNamespace(namespace: PersistNamespaceItemInput!): Boolean!
+  persistK8sSources(
+    namespace: String!
+    sources: [PersistNamespaceSourceInput!]!
+  ): Boolean!
+  testConnectionForDestination(
+    destination: DestinationInput!
+  ): TestConnectionResponse!
+  updateK8sActualSource(
+    sourceId: K8sSourceId!
+    patchSourceRequest: PatchSourceRequestInput!
+  ): Boolean!
+  updateDestination(id: ID!, destination: DestinationInput!): Destination!
+}
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
new file mode 100644
index 000000000..9fbfff584
--- /dev/null
+++ b/frontend/graph/schema.resolvers.go
@@ -0,0 +1,655 @@
+package graph
+
+// This file will be automatically regenerated based on the schema, any resolver implementations
+// will be copied through when generating and any unknown code will be moved to the end.
+// Code generated by github.com/99designs/gqlgen version v0.17.49
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/endpoints"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	testconnection "github.com/odigos-io/odigos/frontend/services/test_connection"
+	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/types"
+)
+
+// K8sActualNamespace is the resolver for the k8sActualNamespace field.
+func (r *computePlatformResolver) K8sActualNamespace(ctx context.Context, obj *model.ComputePlatform, name string) (*model.K8sActualNamespace, error) {
+	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, name, nil)
+	if err != nil {
+		return nil, err
+	}
+
+	// Convert namespaceActualSources to []*model.K8sActualSource
+	namespaceActualSourcesPointers := make([]*model.K8sActualSource, len(namespaceActualSources))
+	for i, source := range namespaceActualSources {
+		namespaceActualSourcesPointers[i] = &source
+	}
+
+	namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, name, metav1.GetOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	nsInstrumented := workload.GetInstrumentationLabelValue(namespace.GetLabels())
+
+	return &model.K8sActualNamespace{
+		Name:                        name,
+		InstrumentationLabelEnabled: nsInstrumented,
+		K8sActualSources:            namespaceActualSourcesPointers,
+	}, nil
+}
+
+// K8sActualNamespaces is the resolver for the k8sActualNamespaces field.
+func (r *computePlatformResolver) K8sActualNamespaces(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualNamespace, error) {
+	namespacesResponse := services.GetK8SNamespaces(ctx)
+
+	K8sActualNamespaces := make([]*model.K8sActualNamespace, len(namespacesResponse.Namespaces))
+	for i, namespace := range namespacesResponse.Namespaces {
+
+		namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, namespace.Name, metav1.GetOptions{})
+		if err != nil {
+			return nil, err
+		}
+
+		nsInstrumented := workload.GetInstrumentationLabelValue(namespace.GetLabels())
+
+		K8sActualNamespaces[i] = &model.K8sActualNamespace{
+			Name:                        namespace.Name,
+			InstrumentationLabelEnabled: nsInstrumented,
+		}
+	}
+
+	return K8sActualNamespaces, nil
+}
+
+// K8sActualSource is the resolver for the k8sActualSource field.
+func (r *computePlatformResolver) K8sActualSource(ctx context.Context, obj *model.ComputePlatform, name *string, namespace *string, kind *string) (*model.K8sActualSource, error) {
+	source, err := services.GetActualSource(ctx, *namespace, *kind, *name)
+	if err != nil {
+		return nil, err
+	}
+	if source == nil {
+		return nil, nil
+	}
+	k8sActualSource := k8sSourceToGql(source)
+
+	return k8sActualSource, nil
+}
+
+// K8sActualSources is the resolver for the k8sActualSources field.
+func (r *computePlatformResolver) K8sActualSources(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualSource, error) {
+	instrumentedApplications, err := kube.DefaultClient.OdigosClient.InstrumentedApplications("").List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	// Initialize an empty list of K8sActualSource
+	var actualSources []*model.K8sActualSource
+
+	// Convert each instrumented application to the K8sActualSource type
+	for _, app := range instrumentedApplications.Items {
+		actualSource := instrumentedApplicationToActualSource(app)
+
+		owner, _ := services.GetWorkload(ctx, actualSource.Namespace, string(actualSource.Kind), actualSource.Name)
+		if owner == nil {
+
+			continue
+		}
+		ownerAnnotations := owner.GetAnnotations()
+		var reportedName string
+		if ownerAnnotations != nil {
+			reportedName = ownerAnnotations[consts.OdigosReportedNameAnnotation]
+		}
+		actualSource.ReportedName = &reportedName
+		actualSources = append(actualSources, actualSource)
+	}
+
+	return actualSources, nil
+}
+
+// Destinations is the resolver for the destinations field.
+func (r *computePlatformResolver) Destinations(ctx context.Context, obj *model.ComputePlatform) ([]*model.Destination, error) {
+	odigosns := consts.DefaultOdigosNamespace
+	dests, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	var destinations []*model.Destination
+	for _, dest := range dests.Items {
+		secretFields, err := services.GetDestinationSecretFields(ctx, odigosns, &dest)
+		if err != nil {
+			return nil, err
+		}
+
+		// Convert the k8s destination format to the expected endpoint format
+		endpointDest := services.K8sDestinationToEndpointFormat(dest, secretFields)
+		destinations = append(destinations, &endpointDest)
+	}
+
+	return destinations, nil
+}
+
+// Actions is the resolver for the actions field.
+func (r *computePlatformResolver) Actions(ctx context.Context, obj *model.ComputePlatform) ([]*model.IcaInstanceResponse, error) {
+	var response []*model.IcaInstanceResponse
+	odigosns := consts.DefaultOdigosNamespace
+
+	// AddClusterInfos actions
+	icaActions, err := kube.DefaultClient.ActionsClient.AddClusterInfos(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range icaActions.Items {
+		specStr, err := json.Marshal(action.Spec) // Convert spec to JSON string
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr), // Return the JSON string
+		})
+	}
+
+	// DeleteAttributes actions
+	daActions, err := kube.DefaultClient.ActionsClient.DeleteAttributes(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range daActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// RenameAttributes actions
+	raActions, err := kube.DefaultClient.ActionsClient.RenameAttributes(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range raActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// ErrorSamplers actions
+	esActions, err := kube.DefaultClient.ActionsClient.ErrorSamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range esActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// LatencySamplers actions
+	lsActions, err := kube.DefaultClient.ActionsClient.LatencySamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range lsActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// ProbabilisticSamplers actions
+	psActions, err := kube.DefaultClient.ActionsClient.ProbabilisticSamplers(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range psActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	// PiiMaskings actions
+	piActions, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	for _, action := range piActions.Items {
+		specStr, err := json.Marshal(action.Spec)
+		if err != nil {
+			return nil, err
+		}
+		response = append(response, &model.IcaInstanceResponse{
+			ID:   action.Name,
+			Type: action.Kind,
+			Spec: string(specStr),
+		})
+	}
+
+	return response, nil
+}
+
+// Type is the resolver for the type field.
+func (r *destinationResolver) Type(ctx context.Context, obj *model.Destination) (string, error) {
+	panic(fmt.Errorf("not implemented: Type - type"))
+}
+
+// Conditions is the resolver for the conditions field.
+func (r *destinationResolver) Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error) {
+	panic(fmt.Errorf("not implemented: Conditions - conditions"))
+}
+
+// K8sActualSources is the resolver for the k8sActualSources field.
+func (r *k8sActualNamespaceResolver) K8sActualSources(ctx context.Context, obj *model.K8sActualNamespace, instrumentationLabeled *bool) ([]*model.K8sActualSource, error) {
+	namespaceActualSources, err := services.GetWorkloadsInNamespace(ctx, obj.Name, instrumentationLabeled)
+	if err != nil {
+		return nil, err
+	}
+
+	// Convert namespaceActualSources to []*model.K8sActualSource
+	namespaceActualSourcesPointers := make([]*model.K8sActualSource, len(namespaceActualSources))
+	for i, source := range namespaceActualSources {
+		namespaceActualSourcesPointers[i] = &source
+	}
+
+	return namespaceActualSourcesPointers, nil
+}
+
+// CreateNewDestination is the resolver for the createNewDestination field.
+func (r *mutationResolver) CreateNewDestination(ctx context.Context, destination model.DestinationInput) (*model.Destination, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	destType := common.DestinationType(destination.Type)
+	destName := destination.Name
+
+	destTypeConfig, err := services.GetDestinationTypeConfig(destType)
+	if err != nil {
+		return nil, fmt.Errorf("destination type %s not found", destType)
+	}
+
+	// Convert fields to map[string]string
+	fieldsMap := make(map[string]string)
+	for _, field := range destination.Fields {
+		fieldsMap[field.Key] = field.Value
+	}
+
+	errors := services.VerifyDestinationDataScheme(destType, destTypeConfig, fieldsMap)
+	if len(errors) > 0 {
+		return nil, fmt.Errorf("invalid destination data scheme: %v", errors)
+	}
+
+	dataField, secretFields := services.TransformFieldsToDataAndSecrets(destTypeConfig, fieldsMap)
+	generateNamePrefix := "odigos.io.dest." + string(destType) + "-"
+
+	k8sDestination := v1alpha1.Destination{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: generateNamePrefix,
+		},
+		Spec: v1alpha1.DestinationSpec{
+			Type:            destType,
+			DestinationName: destName,
+			Data:            dataField,
+			Signals:         services.ExportedSignalsObjectToSlice(destination.ExportedSignals),
+		},
+	}
+
+	createSecret := len(secretFields) > 0
+	if createSecret {
+		secretRef, err := services.CreateDestinationSecret(ctx, destType, secretFields, odigosns)
+		if err != nil {
+			return nil, err
+		}
+		k8sDestination.Spec.SecretRef = secretRef
+	}
+
+	dest, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).Create(ctx, &k8sDestination, metav1.CreateOptions{})
+	if err != nil {
+		if createSecret {
+			kube.DefaultClient.CoreV1().Secrets(odigosns).Delete(ctx, destName, metav1.DeleteOptions{})
+		}
+		return nil, err
+	}
+
+	if dest.Spec.SecretRef != nil {
+		err = services.AddDestinationOwnerReferenceToSecret(ctx, odigosns, dest)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	secretFieldsMap, err := services.GetDestinationSecretFields(ctx, odigosns, dest)
+	if err != nil {
+		return nil, err
+	}
+
+	endpointDest := services.K8sDestinationToEndpointFormat(*dest, secretFieldsMap)
+	return &endpointDest, nil
+}
+
+// PersistK8sNamespace is the resolver for the persistK8sNamespace field.
+func (r *mutationResolver) PersistK8sNamespace(ctx context.Context, namespace model.PersistNamespaceItemInput) (bool, error) {
+	jsonMergePayload := services.GetJsonMergePatchForInstrumentationLabel(namespace.FutureSelected)
+	_, err := kube.DefaultClient.CoreV1().Namespaces().Patch(ctx, namespace.Name, types.MergePatchType, jsonMergePayload, metav1.PatchOptions{})
+	if err != nil {
+		return false, fmt.Errorf("failed to patch namespace: %v", err)
+	}
+
+	return true, nil
+}
+
+// PersistK8sSources is the resolver for the persistK8sSources field.
+func (r *mutationResolver) PersistK8sSources(ctx context.Context, namespace string, sources []*model.PersistNamespaceSourceInput) (bool, error) {
+	var persistObjects []model.PersistNamespaceSourceInput
+	for _, source := range sources {
+		persistObjects = append(persistObjects, model.PersistNamespaceSourceInput{
+			Name:     source.Name,
+			Kind:     source.Kind,
+			Selected: source.Selected,
+		})
+	}
+
+	err := services.SyncWorkloadsInNamespace(ctx, namespace, persistObjects)
+	if err != nil {
+		return false, fmt.Errorf("failed to sync workloads: %v", err)
+	}
+
+	return true, nil
+}
+
+// TestConnectionForDestination is the resolver for the testConnectionForDestination field.
+func (r *mutationResolver) TestConnectionForDestination(ctx context.Context, destination model.DestinationInput) (*model.TestConnectionResponse, error) {
+	destType := common.DestinationType(destination.Type)
+
+	destConfig, err := services.GetDestinationTypeConfig(destType)
+	if err != nil {
+		return nil, err
+	}
+
+	if !destConfig.Spec.TestConnectionSupported {
+		return nil, fmt.Errorf("destination type %s does not support test connection", destination.Type)
+	}
+
+	configurer, err := testconnection.ConvertDestinationToConfigurer(destination)
+	if err != nil {
+		return nil, err
+	}
+
+	res := testconnection.TestConnection(ctx, configurer)
+	if !res.Succeeded {
+		return &model.TestConnectionResponse{
+			Succeeded:       false,
+			StatusCode:      res.StatusCode,
+			DestinationType: (*string)(&res.DestinationType),
+			Message:         &res.Message,
+			Reason:          (*string)(&res.Reason),
+		}, nil
+	}
+
+	return &model.TestConnectionResponse{
+		Succeeded:       true,
+		StatusCode:      200,
+		DestinationType: (*string)(&res.DestinationType),
+	}, nil
+}
+
+// UpdateK8sActualSource is the resolver for the updateK8sActualSource field.
+func (r *mutationResolver) UpdateK8sActualSource(ctx context.Context, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) (bool, error) {
+	ns := sourceID.Namespace
+	kind := string(sourceID.Kind)
+	name := sourceID.Name
+
+	request := patchSourceRequest
+
+	// Handle ReportedName update
+	if request.ReportedName != nil {
+		if err := services.UpdateReportedName(ctx, ns, kind, name, *request.ReportedName); err != nil {
+			return false, err
+		}
+	}
+
+	return true, nil
+}
+
+// UpdateDestination is the resolver for the updateDestination field.
+func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, input model.DestinationInput) (*model.Destination, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	destType := common.DestinationType(input.Type)
+	destName := input.Name
+
+	// Get the destination type configuration
+	destTypeConfig, err := services.GetDestinationTypeConfig(destType)
+	if err != nil {
+		return nil, fmt.Errorf("destination type %s not found: %v", destType, err)
+	}
+
+	// Convert fields from input to map[string]string
+	fields := make(map[string]string)
+	for _, field := range input.Fields {
+		fields[field.Key] = field.Value
+	}
+
+	// Validate the destination data schema
+	validationErrors := services.VerifyDestinationDataScheme(destType, destTypeConfig, fields)
+	if len(validationErrors) > 0 {
+		var errMsg string
+		for _, e := range validationErrors {
+			errMsg += e.Error() + "; "
+		}
+		return nil, fmt.Errorf("validation errors: %s", errMsg)
+	}
+
+	// Separate data fields and secret fields
+	dataFields, secretFields := services.TransformFieldsToDataAndSecrets(destTypeConfig, fields)
+
+	// Retrieve the existing destination
+	dest, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to get destination: %v", err)
+	}
+
+	// Handle secrets
+	destUpdateHasSecrets := len(secretFields) > 0
+	destCurrentlyHasSecrets := dest.Spec.SecretRef != nil
+
+	if !destUpdateHasSecrets && destCurrentlyHasSecrets {
+		// Delete the secret if it's not needed anymore
+		err := kube.DefaultClient.CoreV1().Secrets(odigosns).Delete(ctx, dest.Spec.SecretRef.Name, metav1.DeleteOptions{})
+		if err != nil {
+			return nil, fmt.Errorf("failed to delete secret: %v", err)
+		}
+		dest.Spec.SecretRef = nil
+	} else if destUpdateHasSecrets && !destCurrentlyHasSecrets {
+		// Create the secret if it was added in this update
+		secretRef, err := services.CreateDestinationSecret(ctx, destType, secretFields, odigosns)
+		if err != nil {
+			return nil, fmt.Errorf("failed to create secret: %v", err)
+		}
+		dest.Spec.SecretRef = secretRef
+		// Add owner reference to the secret
+		err = services.AddDestinationOwnerReferenceToSecret(ctx, odigosns, dest)
+		if err != nil {
+			return nil, fmt.Errorf("failed to add owner reference to secret: %v", err)
+		}
+	} else if destUpdateHasSecrets && destCurrentlyHasSecrets {
+		// Update the secret in case it is modified
+		secret, err := kube.DefaultClient.CoreV1().Secrets(odigosns).Get(ctx, dest.Spec.SecretRef.Name, metav1.GetOptions{})
+		if err != nil {
+			return nil, fmt.Errorf("failed to get secret: %v", err)
+		}
+		origSecret := secret.DeepCopy()
+
+		secret.StringData = secretFields
+		_, err = kube.DefaultClient.CoreV1().Secrets(odigosns).Update(ctx, secret, metav1.UpdateOptions{})
+		if err != nil {
+			// Rollback secret if needed
+			_, rollbackErr := kube.DefaultClient.CoreV1().Secrets(odigosns).Update(ctx, origSecret, metav1.UpdateOptions{})
+			if rollbackErr != nil {
+				fmt.Printf("Failed to rollback secret: %v\n", rollbackErr)
+			}
+			return nil, fmt.Errorf("failed to update secret: %v", err)
+		}
+	}
+
+	// Update the destination specification
+	dest.Spec.Type = destType
+	dest.Spec.DestinationName = destName
+	dest.Spec.Data = dataFields
+	dest.Spec.Signals = services.ExportedSignalsObjectToSlice(input.ExportedSignals)
+
+	// Update the destination in Kubernetes
+	updatedDest, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).Update(ctx, dest, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update destination: %v", err)
+	}
+
+	// Get the secret fields for the updated destination
+	secretFields, err = services.GetDestinationSecretFields(ctx, odigosns, updatedDest)
+	if err != nil {
+		return nil, fmt.Errorf("failed to get secret fields: %v", err)
+	}
+
+	// Convert the updated destination to the GraphQL model
+	resp := services.K8sDestinationToEndpointFormat(*updatedDest, secretFields)
+
+	return &resp, nil
+}
+
+// ComputePlatform is the resolver for the computePlatform field.
+func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
+	return &model.ComputePlatform{
+		ComputePlatformType: model.ComputePlatformTypeK8s,
+	}, nil
+}
+
+// Config is the resolver for the config field.
+func (r *queryResolver) Config(ctx context.Context) (*model.GetConfigResponse, error) {
+	response := endpoints.GetConfig(ctx)
+
+	gqlResponse := &model.GetConfigResponse{
+		Installation: model.InstallationStatus(response.Installation),
+	}
+
+	return gqlResponse, nil
+}
+
+// DestinationTypes is the resolver for the destinationTypes field.
+func (r *queryResolver) DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error) {
+	destTypes := services.GetDestinationTypes()
+
+	return &destTypes, nil
+}
+
+// DestinationTypeDetails is the resolver for the destinationTypeDetails field.
+func (r *queryResolver) DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error) {
+	destType := common.DestinationType(typeArg)
+	destTypeConfig, err := services.GetDestinationTypeConfig(destType)
+	if err != nil {
+		return nil, fmt.Errorf("destination type %s not found", destType)
+	}
+
+	var resp model.GetDestinationDetailsResponse
+	for _, field := range destTypeConfig.Spec.Fields {
+		componentPropsJSON, err := json.Marshal(field.ComponentProps)
+		if err != nil {
+			return nil, fmt.Errorf("error marshalling component properties: %v", err)
+		}
+
+		resp.Fields = append(resp.Fields, &model.Field{
+			Name:                field.Name,
+			DisplayName:         field.DisplayName,
+			ComponentType:       field.ComponentType,
+			ComponentProperties: string(componentPropsJSON),
+			InitialValue:        &field.InitialValue,
+		})
+
+	}
+
+	return &resp, nil
+}
+
+// PotentialDestinations is the resolver for the potentialDestinations field.
+func (r *queryResolver) PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error) {
+	potentialDestinations := services.PotentialDestinations(ctx)
+	if potentialDestinations == nil {
+		return nil, fmt.Errorf("failed to fetch potential destinations")
+	}
+
+	// Convert []destination_recognition.DestinationDetails to []*DestinationDetails
+	var result []*model.DestinationDetails
+	for _, dest := range potentialDestinations {
+
+		fieldsString, err := json.Marshal(dest.Fields)
+		if err != nil {
+			return nil, fmt.Errorf("error marshalling fields: %v", err)
+		}
+
+		result = append(result, &model.DestinationDetails{
+			Type:   string(dest.Type),
+			Fields: string(fieldsString),
+		})
+	}
+
+	return result, nil
+}
+
+// ComputePlatform returns ComputePlatformResolver implementation.
+func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
+
+// Destination returns DestinationResolver implementation.
+func (r *Resolver) Destination() DestinationResolver { return &destinationResolver{r} }
+
+// K8sActualNamespace returns K8sActualNamespaceResolver implementation.
+func (r *Resolver) K8sActualNamespace() K8sActualNamespaceResolver {
+	return &k8sActualNamespaceResolver{r}
+}
+
+// Mutation returns MutationResolver implementation.
+func (r *Resolver) Mutation() MutationResolver { return &mutationResolver{r} }
+
+// Query returns QueryResolver implementation.
+func (r *Resolver) Query() QueryResolver { return &queryResolver{r} }
+
+type computePlatformResolver struct{ *Resolver }
+type destinationResolver struct{ *Resolver }
+type k8sActualNamespaceResolver struct{ *Resolver }
+type mutationResolver struct{ *Resolver }
+type queryResolver struct{ *Resolver }
diff --git a/frontend/main.go b/frontend/main.go
index 64777fa68..6879dc21c 100644
--- a/frontend/main.go
+++ b/frontend/main.go
@@ -34,6 +34,10 @@ import (
 	"github.com/odigos-io/odigos/frontend/endpoints"
 
 	_ "net/http/pprof"
+
+	"github.com/99designs/gqlgen/graphql/handler"
+	"github.com/99designs/gqlgen/graphql/playground"
+	"github.com/odigos-io/odigos/frontend/graph"
 )
 
 const (
@@ -110,7 +114,6 @@ func startHTTPServer(flags *Flags, odigosMetrics *collectormetrics.OdigosMetrics
 		apis.PATCH("/sources/namespace/:namespace/kind/:kind/name/:name", endpoints.PatchSource)
 
 		apis.GET("/applications/:namespace", endpoints.GetApplicationsInNamespace)
-		apis.GET("/config", endpoints.GetConfig)
 		apis.GET("/destination-types", endpoints.GetDestinationTypes)
 		apis.GET("/destination-types/:type", endpoints.GetDestinationTypeDetails)
 		apis.GET("/destinations", func(c *gin.Context) { endpoints.GetDestinations(c, flags.Namespace) })
@@ -186,6 +189,13 @@ func startHTTPServer(flags *Flags, odigosMetrics *collectormetrics.OdigosMetrics
 		apis.DELETE("/actions/types/PiiMasking/:id", func(c *gin.Context) { actions.DeletePiiMasking(c, flags.Namespace, c.Param("id")) })
 	}
 
+	// GraphQL handlers
+	gqlHandler := handler.NewDefaultServer(graph.NewExecutableSchema(graph.Config{Resolvers: &graph.Resolver{}}))
+	r.POST("/graphql", func(c *gin.Context) {
+		gqlHandler.ServeHTTP(c.Writer, c.Request)
+	})
+	r.GET("/playground", gin.WrapH(playground.Handler("GraphQL Playground", "/graphql")))
+
 	return r, nil
 }
 
diff --git a/frontend/services/destination_recognition/destination_finder.go b/frontend/services/destination_recognition/destination_finder.go
new file mode 100644
index 000000000..20258eff7
--- /dev/null
+++ b/frontend/services/destination_recognition/destination_finder.go
@@ -0,0 +1,79 @@
+package destination_recognition
+
+import (
+	"context"
+
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+	k8s "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+var SupportedDestinationType = []common.DestinationType{common.JaegerDestinationType, common.ElasticsearchDestinationType}
+
+type DestinationDetails struct {
+	Type   common.DestinationType `json:"type"`
+	Fields map[string]string      `json:"fields"`
+}
+
+type IDestinationFinder interface {
+	isPotentialService(k8s.Service) bool
+	fetchDestinationDetails(k8s.Service) DestinationDetails
+	getServiceURL() string
+}
+
+func GetAllPotentialDestinationDetails(ctx context.Context, namespaces []k8s.Namespace, dests *odigosv1.DestinationList) ([]DestinationDetails, error) {
+	var destinationFinder IDestinationFinder
+	var destinationDetails []DestinationDetails
+	var err error
+
+	for _, ns := range namespaces {
+		err = client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.CoreV1().Services(ns.Name).List,
+			ctx, metav1.ListOptions{}, func(services *k8s.ServiceList) error {
+				for _, service := range services.Items {
+					for _, destinationType := range SupportedDestinationType {
+						destinationFinder = getDestinationFinder(destinationType)
+
+						if destinationFinder.isPotentialService(service) {
+							potentialDestination := destinationFinder.fetchDestinationDetails(service)
+
+							if !destinationExist(dests, potentialDestination, destinationFinder) {
+								destinationDetails = append(destinationDetails, potentialDestination)
+							}
+							break
+						}
+					}
+				}
+				return nil
+			})
+	}
+
+	if err != nil {
+		return nil, err
+	}
+
+	return destinationDetails, nil
+}
+
+func getDestinationFinder(destinationType common.DestinationType) IDestinationFinder {
+	switch destinationType {
+	case common.JaegerDestinationType:
+		return &JaegerDestinationFinder{}
+	case common.ElasticsearchDestinationType:
+		return &ElasticSearchDestinationFinder{}
+	}
+
+	return nil
+}
+
+func destinationExist(dests *odigosv1.DestinationList, potentialDestination DestinationDetails, destinationFinder IDestinationFinder) bool {
+	for _, dest := range dests.Items {
+		if dest.Spec.Type == potentialDestination.Type && dest.GetConfig()[destinationFinder.getServiceURL()] == potentialDestination.Fields[destinationFinder.getServiceURL()] {
+			return true
+		}
+	}
+
+	return false
+}
diff --git a/frontend/services/destination_recognition/elasticsearch.go b/frontend/services/destination_recognition/elasticsearch.go
new file mode 100644
index 000000000..38c3e7093
--- /dev/null
+++ b/frontend/services/destination_recognition/elasticsearch.go
@@ -0,0 +1,45 @@
+package destination_recognition
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/config"
+	k8s "k8s.io/api/core/v1"
+)
+
+type ElasticSearchDestinationFinder struct{}
+
+const ElasticSearchHttpPort int32 = 9200
+const ElasticSearchHttpUrlFormat = "https://%s.%s:%d"
+
+func (j *ElasticSearchDestinationFinder) isPotentialService(service k8s.Service) bool {
+	for _, port := range service.Spec.Ports {
+		if isElasticSearchService(port.Port, service.Name) {
+			return true
+		}
+	}
+
+	return false
+}
+
+func isElasticSearchService(portNumber int32, name string) bool {
+	return portNumber == ElasticSearchHttpPort && strings.Contains(name, string(common.ElasticsearchDestinationType))
+}
+
+func (j *ElasticSearchDestinationFinder) fetchDestinationDetails(service k8s.Service) DestinationDetails {
+	urlString := fmt.Sprintf(ElasticSearchHttpUrlFormat, service.Name, service.Namespace, ElasticSearchHttpPort)
+	elasticServiceURL := j.getServiceURL()
+	fields := make(map[string]string)
+	fields[elasticServiceURL] = urlString
+
+	return DestinationDetails{
+		Type:   common.ElasticsearchDestinationType,
+		Fields: fields,
+	}
+}
+
+func (j *ElasticSearchDestinationFinder) getServiceURL() string {
+	return config.ElasticsearchUrlKey
+}
diff --git a/frontend/services/destination_recognition/jaeger.go b/frontend/services/destination_recognition/jaeger.go
new file mode 100644
index 000000000..f66fd9bdd
--- /dev/null
+++ b/frontend/services/destination_recognition/jaeger.go
@@ -0,0 +1,46 @@
+package destination_recognition
+
+import (
+	"fmt"
+	"strings"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/config"
+	k8s "k8s.io/api/core/v1"
+)
+
+type JaegerDestinationFinder struct{}
+
+const JaegerGrpcOtlpPort int32 = 4317
+const JaegerGrpcUrlFormat = "%s.%s:%d"
+
+func (j *JaegerDestinationFinder) isPotentialService(service k8s.Service) bool {
+	for _, port := range service.Spec.Ports {
+		if isJaegerService(port.Port, service.Name) {
+			return true
+		}
+	}
+
+	return false
+}
+
+func isJaegerService(portNumber int32, name string) bool {
+	return portNumber == JaegerGrpcOtlpPort && strings.Contains(name, string(common.JaegerDestinationType))
+}
+
+func (j *JaegerDestinationFinder) fetchDestinationDetails(service k8s.Service) DestinationDetails {
+	urlString := fmt.Sprintf(JaegerGrpcUrlFormat, service.Name, service.Namespace, JaegerGrpcOtlpPort)
+
+	jaegerServiceURL := j.getServiceURL()
+	fields := make(map[string]string)
+	fields[jaegerServiceURL] = urlString
+
+	return DestinationDetails{
+		Type:   common.JaegerDestinationType,
+		Fields: fields,
+	}
+}
+
+func (j *JaegerDestinationFinder) getServiceURL() string {
+	return config.JaegerUrlKey
+}
diff --git a/frontend/services/destinations.go b/frontend/services/destinations.go
new file mode 100644
index 000000000..79147d89b
--- /dev/null
+++ b/frontend/services/destinations.go
@@ -0,0 +1,300 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/destinations"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services/destination_recognition"
+	"github.com/odigos-io/odigos/k8sutils/pkg/env"
+	k8s "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/types"
+)
+
+func GetDestinationTypes() model.GetDestinationTypesResponse {
+	var resp model.GetDestinationTypesResponse
+	itemsByCategory := make(map[string][]model.DestinationTypesCategoryItem)
+	for _, destConfig := range destinations.Get() {
+		item := DestinationTypeConfigToCategoryItem(destConfig)
+		itemsByCategory[destConfig.Metadata.Category] = append(itemsByCategory[destConfig.Metadata.Category], item)
+	}
+
+	for category, items := range itemsByCategory {
+		resp.Categories = append(resp.Categories, model.DestinationsCategory{
+			Name:  category,
+			Items: items,
+		})
+
+	}
+
+	return resp
+
+}
+
+func DestinationTypeConfigToCategoryItem(destConfig destinations.Destination) model.DestinationTypesCategoryItem {
+
+	return model.DestinationTypesCategoryItem{
+		Type:                    string(destConfig.Metadata.Type),
+		DisplayName:             destConfig.Metadata.DisplayName,
+		ImageUrl:                GetImageURL(destConfig.Spec.Image),
+		TestConnectionSupported: destConfig.Spec.TestConnectionSupported,
+		SupportedSignals: model.SupportedSignals{
+			Traces: model.ObservabilitySignalSupport{
+				Supported: destConfig.Spec.Signals.Traces.Supported,
+			},
+			Metrics: model.ObservabilitySignalSupport{
+				Supported: destConfig.Spec.Signals.Metrics.Supported,
+			},
+			Logs: model.ObservabilitySignalSupport{
+				Supported: destConfig.Spec.Signals.Logs.Supported,
+			},
+		},
+	}
+
+}
+
+func GetDestinationTypeConfig(destType common.DestinationType) (*destinations.Destination, error) {
+	for _, dest := range destinations.Get() {
+		if dest.Metadata.Type == destType {
+			return &dest, nil
+		}
+	}
+
+	return nil, fmt.Errorf("destination type %s not found", destType)
+}
+
+func VerifyDestinationDataScheme(destType common.DestinationType, destTypeConfig *destinations.Destination, data map[string]string) []error {
+
+	errors := []error{}
+
+	// verify all fields in config are present in data (assuming here all fields are required)
+	for _, field := range destTypeConfig.Spec.Fields {
+		required, ok := field.ComponentProps["required"].(bool)
+		if !ok || !required {
+			continue
+		}
+		fieldValue, found := data[field.Name]
+		if !found || fieldValue == "" {
+			errors = append(errors, fmt.Errorf("field %s is required", field.Name))
+		}
+	}
+
+	// verify data fields are found in config
+	for dataField := range data {
+		found := false
+		// iterating all fields in config every time, assuming it's a small list
+		for _, field := range destTypeConfig.Spec.Fields {
+			if dataField == field.Name {
+				found = true
+				break
+			}
+		}
+		if !found {
+			errors = append(errors, fmt.Errorf("field %s is not found in config for destination type '%s'", dataField, destType))
+		}
+	}
+
+	return errors
+}
+
+func TransformFieldsToDataAndSecrets(destTypeConfig *destinations.Destination, fields map[string]string) (map[string]string, map[string]string) {
+
+	dataFields := map[string]string{}
+	secretFields := map[string]string{}
+
+	for fieldName, fieldValue := range fields {
+
+		// it is possible that some fields are not required and are empty.
+		// we should treat them as empty
+		if fieldValue == "" {
+			continue
+		}
+
+		// for each field in the data, find it's config
+		// assuming the list is small so it's ok to iterate it
+		for _, fieldConfig := range destTypeConfig.Spec.Fields {
+			if fieldName == fieldConfig.Name {
+				if fieldConfig.Secret {
+					secretFields[fieldName] = fieldValue
+				} else {
+					dataFields[fieldName] = fieldValue
+				}
+			}
+		}
+	}
+
+	return dataFields, secretFields
+}
+
+func GetDestinationSecretFields(c context.Context, odigosns string, dest *v1alpha1.Destination) (map[string]string, error) {
+
+	secretFields := map[string]string{}
+	secretRef := dest.Spec.SecretRef
+
+	if secretRef == nil {
+		return secretFields, nil
+	}
+
+	secret, err := kube.DefaultClient.CoreV1().Secrets(odigosns).Get(c, secretRef.Name, metav1.GetOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	for k, v := range secret.Data {
+		secretFields[k] = string(v)
+	}
+
+	return secretFields, nil
+}
+
+func K8sDestinationToEndpointFormat(k8sDest v1alpha1.Destination, secretFields map[string]string) model.Destination {
+	destType := k8sDest.Spec.Type
+	destName := k8sDest.Spec.DestinationName
+	mergedFields := mergeDataAndSecrets(k8sDest.Spec.Data, secretFields)
+	destTypeConfig := DestinationTypeConfigToCategoryItem(destinations.GetDestinationByType(string(destType)))
+
+	fieldsJSON, err := json.Marshal(mergedFields)
+	if err != nil {
+		// Handle JSON encoding error
+		fmt.Printf("Error marshaling fields to JSON: %v\n", err)
+		fieldsJSON = []byte("{}") // Set to an empty JSON object in case of error
+	}
+
+	var conditions []metav1.Condition
+	for _, condition := range k8sDest.Status.Conditions {
+		conditions = append(conditions, metav1.Condition{
+			Type:               condition.Type,
+			Status:             condition.Status,
+			Message:            condition.Message,
+			LastTransitionTime: condition.LastTransitionTime,
+		})
+	}
+
+	return model.Destination{
+		Id:   k8sDest.Name,
+		Name: destName,
+		Type: destType,
+		ExportedSignals: model.ExportedSignals{
+			Traces:  isSignalExported(k8sDest, common.TracesObservabilitySignal),
+			Metrics: isSignalExported(k8sDest, common.MetricsObservabilitySignal),
+			Logs:    isSignalExported(k8sDest, common.LogsObservabilitySignal),
+		},
+		Fields:          string(fieldsJSON),
+		DestinationType: destTypeConfig,
+		Conditions:      conditions,
+	}
+}
+
+func isSignalExported(dest v1alpha1.Destination, signal common.ObservabilitySignal) bool {
+	for _, s := range dest.Spec.Signals {
+		if s == signal {
+			return true
+		}
+	}
+
+	return false
+}
+
+func mergeDataAndSecrets(data map[string]string, secrets map[string]string) map[string]string {
+	merged := map[string]string{}
+
+	for k, v := range data {
+		merged[k] = v
+	}
+
+	for k, v := range secrets {
+		merged[k] = v
+	}
+
+	return merged
+}
+func ExportedSignalsObjectToSlice(signals *model.ExportedSignalsInput) []common.ObservabilitySignal {
+	var resp []common.ObservabilitySignal
+	if signals.Traces {
+		resp = append(resp, common.TracesObservabilitySignal)
+	}
+	if signals.Metrics {
+		resp = append(resp, common.MetricsObservabilitySignal)
+	}
+	if signals.Logs {
+		resp = append(resp, common.LogsObservabilitySignal)
+	}
+
+	return resp
+}
+
+func CreateDestinationSecret(ctx context.Context, destType common.DestinationType, secretFields map[string]string, odigosns string) (*k8s.LocalObjectReference, error) {
+	generateNamePrefix := "odigos.io.dest." + string(destType) + "-"
+	secret := k8s.Secret{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: generateNamePrefix,
+		},
+		StringData: secretFields,
+	}
+	newSecret, err := kube.DefaultClient.CoreV1().Secrets(odigosns).Create(ctx, &secret, metav1.CreateOptions{})
+	if err != nil {
+		return nil, err
+	}
+	return &k8s.LocalObjectReference{
+		Name: newSecret.Name,
+	}, nil
+}
+
+func AddDestinationOwnerReferenceToSecret(ctx context.Context, odigosns string, dest *v1alpha1.Destination) error {
+	destOwnerRef := metav1.OwnerReference{
+		APIVersion: "odigos.io/v1alpha1",
+		Kind:       "Destination",
+		Name:       dest.Name,
+		UID:        dest.UID,
+	}
+
+	secretPatch := []struct {
+		Op    string                  `json:"op"`
+		Path  string                  `json:"path"`
+		Value []metav1.OwnerReference `json:"value"`
+	}{{
+		Op:    "add",
+		Path:  "/metadata/ownerReferences",
+		Value: []metav1.OwnerReference{destOwnerRef},
+	},
+	}
+
+	secretPatchBytes, err := json.Marshal(secretPatch)
+	if err != nil {
+		return err
+	}
+
+	_, err = kube.DefaultClient.CoreV1().Secrets(odigosns).Patch(ctx, dest.Spec.SecretRef.Name, types.JSONPatchType, secretPatchBytes, metav1.PatchOptions{})
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+func PotentialDestinations(ctx context.Context) []destination_recognition.DestinationDetails {
+	odigosns := consts.DefaultOdigosNamespace
+	relevantNamespaces, err := getRelevantNameSpaces(ctx, env.GetCurrentNamespace())
+	if err != nil {
+		return nil
+	}
+
+	// Existing Destinations
+	existingDestination, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil
+	}
+
+	destinationDetails, err := destination_recognition.GetAllPotentialDestinationDetails(ctx, relevantNamespaces, existingDestination)
+	if err != nil {
+		return nil
+	}
+
+	return destinationDetails
+}
diff --git a/frontend/services/namespaces.go b/frontend/services/namespaces.go
new file mode 100644
index 000000000..534249c90
--- /dev/null
+++ b/frontend/services/namespaces.go
@@ -0,0 +1,190 @@
+package services
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+	"sigs.k8s.io/yaml"
+
+	"k8s.io/apimachinery/pkg/runtime/schema"
+
+	"golang.org/x/sync/errgroup"
+
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/common/utils"
+
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	v1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type GetNamespacesResponse struct {
+	Namespaces []GetNamespaceItem `json:"namespaces"`
+}
+
+type GetNamespaceItem struct {
+	Name      string `json:"name"`
+	Selected  bool   `json:"selected"`
+	TotalApps int    `json:"totalApps"`
+}
+
+const (
+	OdigosSystemNamespace = "odigos-system"
+)
+
+func GetK8SNamespaces(ctx context.Context) GetNamespacesResponse {
+
+	var (
+		relevantNameSpaces []v1.Namespace
+		appsPerNamespace   map[string]int
+	)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.Go(func() error {
+		var err error
+		relevantNameSpaces, err = getRelevantNameSpaces(ctx, OdigosSystemNamespace)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		appsPerNamespace, err = CountAppsPerNamespace(ctx)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+
+		return GetNamespacesResponse{}
+	}
+
+	var response GetNamespacesResponse
+	for _, namespace := range relevantNameSpaces {
+		// check if entire namespace is instrumented
+		selected := namespace.Labels[consts.OdigosInstrumentationLabel] == consts.InstrumentationEnabled
+
+		response.Namespaces = append(response.Namespaces, GetNamespaceItem{
+			Name:      namespace.Name,
+			Selected:  selected,
+			TotalApps: appsPerNamespace[namespace.Name],
+		})
+	}
+
+	return response
+}
+
+// getRelevantNameSpaces returns a list of namespaces that are relevant for instrumentation.
+// Taking into account the ignored namespaces from the OdigosConfiguration.
+func getRelevantNameSpaces(ctx context.Context, odigosns string) ([]v1.Namespace, error) {
+	var (
+		odigosConfig *common.OdigosConfiguration
+		list         *v1.NamespaceList
+	)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.Go(func() error {
+		var err error
+		configMap, err := kube.DefaultClient.CoreV1().ConfigMaps(odigosns).Get(ctx, consts.OdigosConfigurationName, metav1.GetOptions{})
+		if err != nil {
+			return err
+		}
+		if err := yaml.Unmarshal([]byte(configMap.Data[consts.OdigosConfigurationFileName]), &odigosConfig); err != nil {
+			return err
+		}
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		list, err = kube.DefaultClient.CoreV1().Namespaces().List(ctx, metav1.ListOptions{})
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return []v1.Namespace{}, err
+	}
+
+	result := []v1.Namespace{}
+	for _, namespace := range list.Items {
+		if utils.IsItemIgnored(namespace.Name, odigosConfig.IgnoredNamespaces) {
+			continue
+		}
+
+		result = append(result, namespace)
+	}
+
+	return result, nil
+}
+
+type PersistNamespaceItem struct {
+	Name           string                   `json:"name"`
+	SelectedAll    bool                     `json:"selected_all"`
+	FutureSelected *bool                    `json:"future_selected,omitempty"`
+	Objects        []PersistNamespaceObject `json:"objects"`
+}
+
+type PersistNamespaceObject struct {
+	Name     string       `json:"name"`
+	Kind     WorkloadKind `json:"kind"`
+	Selected *bool        `json:"selected,omitempty"`
+}
+
+// returns a map, where the key is a namespace name and the value is the
+// number of apps in this namespace (not necessarily instrumented)
+func CountAppsPerNamespace(ctx context.Context) (map[string]int, error) {
+	namespaceToAppsCount := make(map[string]int)
+
+	resourceTypes := []string{"deployments", "statefulsets", "daemonsets"}
+
+	for _, resourceType := range resourceTypes {
+		err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.MetadataClient.Resource(schema.GroupVersionResource{
+			Group:    "apps",
+			Version:  "v1",
+			Resource: resourceType,
+		}).List, ctx, metav1.ListOptions{}, func(list *metav1.PartialObjectMetadataList) error {
+			for _, item := range list.Items {
+				namespaceToAppsCount[item.Namespace]++
+			}
+			return nil
+		})
+
+		if err != nil {
+			return nil, fmt.Errorf("failed to count %s: %w", resourceType, err)
+		}
+	}
+
+	return namespaceToAppsCount, nil
+}
+
+func GetJsonMergePatchForInstrumentationLabel(enabled *bool) []byte {
+	labelJsonMergePatchValue := "null"
+	if enabled != nil {
+		if *enabled {
+			labelJsonMergePatchValue = fmt.Sprintf("\"%s\"", consts.InstrumentationEnabled)
+		} else {
+			labelJsonMergePatchValue = fmt.Sprintf("\"%s\"", consts.InstrumentationDisabled)
+		}
+	}
+
+	jsonMergePatchContent := fmt.Sprintf(`{"metadata":{"labels":{"%s":%s}}}`, consts.OdigosInstrumentationLabel, labelJsonMergePatchValue)
+	return []byte(jsonMergePatchContent)
+}
+
+func SyncWorkloadsInNamespace(ctx context.Context, nsName string, workloads []model.PersistNamespaceSourceInput) error {
+	g, ctx := errgroup.WithContext(ctx)
+	g.SetLimit(kube.K8sClientDefaultBurst)
+
+	for _, workload := range workloads {
+		currWorkload := workload
+		g.Go(func() error {
+			// Only label selected sources, ignore the rest
+			if currWorkload.Selected != nil {
+				return setWorkloadInstrumentationLabel(ctx, nsName, currWorkload.Name, WorkloadKind(currWorkload.Kind.String()), currWorkload.Selected)
+			}
+			return nil
+		})
+	}
+	return g.Wait()
+}
diff --git a/frontend/services/sources.go b/frontend/services/sources.go
new file mode 100644
index 000000000..2a9d0992f
--- /dev/null
+++ b/frontend/services/sources.go
@@ -0,0 +1,382 @@
+package services
+
+import (
+	"context"
+	"fmt"
+	"time"
+
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/kube"
+
+	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+
+	appsv1 "k8s.io/api/apps/v1"
+
+	"github.com/odigos-io/odigos/frontend/graph/model"
+
+	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+
+	"golang.org/x/sync/errgroup"
+	corev1 "k8s.io/api/core/v1"
+)
+
+type WorkloadKind string
+
+const (
+	WorkloadKindDeployment  WorkloadKind = "Deployment"
+	WorkloadKindStatefulSet WorkloadKind = "StatefulSet"
+	WorkloadKindDaemonSet   WorkloadKind = "DaemonSet"
+)
+
+type SourceLanguage struct {
+	ContainerName string `json:"container_name"`
+	Language      string `json:"language"`
+}
+
+type InstrumentedApplicationDetails struct {
+	Languages  []SourceLanguage   `json:"languages,omitempty"`
+	Conditions []metav1.Condition `json:"conditions,omitempty"`
+}
+type SourceID struct {
+	// combination of namespace, kind and name is unique
+	Name      string `json:"name"`
+	Kind      string `json:"kind"`
+	Namespace string `json:"namespace"`
+}
+
+type Source struct {
+	ThinSource
+	ReportedName string `json:"reported_name,omitempty"`
+}
+
+type PatchSourceRequest struct {
+	ReportedName *string `json:"reported_name"`
+}
+
+// this object contains only part of the source fields. It is used to display the sources in the frontend
+type ThinSource struct {
+	SourceID
+	NumberOfRunningInstances int                             `json:"number_of_running_instances"`
+	IaDetails                *InstrumentedApplicationDetails `json:"instrumented_application_details"`
+}
+
+func GetActualSource(ctx context.Context, ns string, kind string, name string) (*Source, error) {
+	k8sObjectName := workload.CalculateWorkloadRuntimeObjectName(name, kind)
+	owner, numberOfRunningInstances := GetWorkload(ctx, ns, kind, name)
+	if owner == nil {
+		return nil, fmt.Errorf("owner not found")
+	}
+	ownerAnnotations := owner.GetAnnotations()
+	var reportedName string
+	if ownerAnnotations != nil {
+		reportedName = ownerAnnotations[consts.OdigosReportedNameAnnotation]
+	}
+
+	ts := ThinSource{
+		SourceID: SourceID{
+			Namespace: ns,
+			Kind:      kind,
+			Name:      name,
+		},
+		NumberOfRunningInstances: numberOfRunningInstances,
+	}
+
+	instrumentedApplication, err := kube.DefaultClient.OdigosClient.InstrumentedApplications(ns).Get(ctx, k8sObjectName, metav1.GetOptions{})
+	if err == nil {
+		ts.IaDetails = k8sInstrumentedAppToThinSource(instrumentedApplication).IaDetails
+		err = addHealthyInstrumentationInstancesCondition(ctx, instrumentedApplication, &ts)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	return &Source{
+		ThinSource:   ts,
+		ReportedName: reportedName,
+	}, nil
+}
+
+func GetWorkload(c context.Context, ns string, kind string, name string) (metav1.Object, int) {
+	switch kind {
+	case "Deployment":
+		deployment, err := kube.DefaultClient.AppsV1().Deployments(ns).Get(c, name, metav1.GetOptions{})
+		if err != nil {
+			return nil, 0
+		}
+		return deployment, int(deployment.Status.AvailableReplicas)
+	case "StatefulSet":
+		statefulSet, err := kube.DefaultClient.AppsV1().StatefulSets(ns).Get(c, name, metav1.GetOptions{})
+		if err != nil {
+			return nil, 0
+		}
+		return statefulSet, int(statefulSet.Status.ReadyReplicas)
+	case "DaemonSet":
+		daemonSet, err := kube.DefaultClient.AppsV1().DaemonSets(ns).Get(c, name, metav1.GetOptions{})
+		if err != nil {
+			return nil, 0
+		}
+		return daemonSet, int(daemonSet.Status.NumberReady)
+	default:
+		return nil, 0
+	}
+}
+
+func addHealthyInstrumentationInstancesCondition(ctx context.Context, app *v1alpha1.InstrumentedApplication, source *ThinSource) error {
+	labelSelector := fmt.Sprintf("%s=%s", consts.InstrumentedAppNameLabel, app.Name)
+	instancesList, err := kube.DefaultClient.OdigosClient.InstrumentationInstances(app.Namespace).List(ctx, metav1.ListOptions{
+		LabelSelector: labelSelector,
+	})
+
+	if err != nil {
+		return err
+	}
+
+	totalInstances := len(instancesList.Items)
+	if totalInstances == 0 {
+		// no instances so nothing to report
+		return nil
+	}
+
+	healthyInstances := 0
+	latestStatusTime := metav1.NewTime(time.Time{})
+	for _, instance := range instancesList.Items {
+		if instance.Status.Healthy != nil && *instance.Status.Healthy {
+			healthyInstances++
+		}
+		if instance.Status.LastStatusTime.After(latestStatusTime.Time) {
+			latestStatusTime = instance.Status.LastStatusTime
+		}
+	}
+
+	status := metav1.ConditionTrue
+	if healthyInstances < totalInstances {
+		status = metav1.ConditionFalse
+	}
+
+	source.IaDetails.Conditions = append(source.IaDetails.Conditions, metav1.Condition{
+		Type:               "HealthyInstrumentationInstances",
+		Status:             status,
+		LastTransitionTime: latestStatusTime,
+		Message:            fmt.Sprintf("%d/%d instances are healthy", healthyInstances, totalInstances),
+	})
+
+	return nil
+}
+
+func k8sInstrumentedAppToThinSource(app *v1alpha1.InstrumentedApplication) ThinSource {
+	var source ThinSource
+	source.Name = app.OwnerReferences[0].Name
+	source.Kind = app.OwnerReferences[0].Kind
+	source.Namespace = app.Namespace
+	var conditions []metav1.Condition
+	for _, condition := range app.Status.Conditions {
+		conditions = append(conditions, metav1.Condition{
+			Type:               condition.Type,
+			Status:             condition.Status,
+			Message:            condition.Message,
+			LastTransitionTime: condition.LastTransitionTime,
+		})
+	}
+	source.IaDetails = &InstrumentedApplicationDetails{
+		Languages:  []SourceLanguage{},
+		Conditions: conditions,
+	}
+	for _, language := range app.Spec.RuntimeDetails {
+		source.IaDetails.Languages = append(source.IaDetails.Languages, SourceLanguage{
+			ContainerName: language.ContainerName,
+			Language:      string(language.Language),
+		})
+	}
+	return source
+}
+
+func GetWorkloadsInNamespace(ctx context.Context, nsName string, instrumentationLabeled *bool) ([]model.K8sActualSource, error) {
+
+	namespace, err := kube.DefaultClient.CoreV1().Namespaces().Get(ctx, nsName, metav1.GetOptions{})
+	if err != nil {
+		return nil, err
+	}
+
+	g, ctx := errgroup.WithContext(ctx)
+	var (
+		deps []model.K8sActualSource
+		ss   []model.K8sActualSource
+		dss  []model.K8sActualSource
+	)
+
+	g.Go(func() error {
+		var err error
+		deps, err = getDeployments(ctx, *namespace, instrumentationLabeled)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		ss, err = getStatefulSets(ctx, *namespace, instrumentationLabeled)
+		return err
+	})
+
+	g.Go(func() error {
+		var err error
+		dss, err = getDaemonSets(ctx, *namespace, instrumentationLabeled)
+		return err
+	})
+
+	if err := g.Wait(); err != nil {
+		return nil, err
+	}
+
+	items := make([]model.K8sActualSource, len(deps)+len(ss)+len(dss))
+	copy(items, deps)
+	copy(items[len(deps):], ss)
+	copy(items[len(deps)+len(ss):], dss)
+
+	return items, nil
+}
+
+func getDeployments(ctx context.Context, namespace corev1.Namespace, instrumentationLabeled *bool) ([]model.K8sActualSource, error) {
+	var response []model.K8sActualSource
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().Deployments(namespace.Name).List, ctx, metav1.ListOptions{}, func(deps *appsv1.DeploymentList) error {
+		for _, dep := range deps.Items {
+			_, _, decisionText, autoInstrumented := workload.GetInstrumentationLabelTexts(dep.GetLabels(), string(WorkloadKindDeployment), namespace.GetLabels())
+			if instrumentationLabeled != nil && *instrumentationLabeled != autoInstrumented {
+				continue
+			}
+			numberOfInstances := int(dep.Status.ReadyReplicas)
+			response = append(response, model.K8sActualSource{
+				Namespace:                      dep.Namespace,
+				Name:                           dep.Name,
+				Kind:                           k8sKindToGql(string(WorkloadKindDeployment)),
+				NumberOfInstances:              &numberOfInstances,
+				AutoInstrumented:               autoInstrumented,
+				AutoInstrumentedDecision:       decisionText,
+				InstrumentedApplicationDetails: nil, // TODO: fill this
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
+
+func getDaemonSets(ctx context.Context, namespace corev1.Namespace, instrumentationLabeled *bool) ([]model.K8sActualSource, error) {
+	var response []model.K8sActualSource
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().DaemonSets(namespace.Name).List, ctx, metav1.ListOptions{}, func(dss *appsv1.DaemonSetList) error {
+		for _, ds := range dss.Items {
+			_, _, decisionText, autoInstrumented := workload.GetInstrumentationLabelTexts(ds.GetLabels(), string(WorkloadKindDaemonSet), namespace.GetLabels())
+			if instrumentationLabeled != nil && *instrumentationLabeled != autoInstrumented {
+				continue
+			}
+			numberOfInstances := int(ds.Status.NumberReady)
+			response = append(response, model.K8sActualSource{
+				Namespace:                      ds.Namespace,
+				Name:                           ds.Name,
+				Kind:                           k8sKindToGql(string(WorkloadKindDaemonSet)),
+				NumberOfInstances:              &numberOfInstances,
+				AutoInstrumented:               autoInstrumented,
+				AutoInstrumentedDecision:       decisionText,
+				InstrumentedApplicationDetails: nil, // TODO: fill this
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
+
+func getStatefulSets(ctx context.Context, namespace corev1.Namespace, instrumentationLabeled *bool) ([]model.K8sActualSource, error) {
+	var response []model.K8sActualSource
+	err := client.ListWithPages(client.DefaultPageSize, kube.DefaultClient.AppsV1().StatefulSets(namespace.Name).List, ctx, metav1.ListOptions{}, func(sss *appsv1.StatefulSetList) error {
+		for _, ss := range sss.Items {
+			_, _, decisionText, autoInstrumented := workload.GetInstrumentationLabelTexts(ss.GetLabels(), string(WorkloadKindStatefulSet), namespace.GetLabels())
+			if instrumentationLabeled != nil && *instrumentationLabeled != autoInstrumented {
+				continue
+			}
+			numberOfInstances := int(ss.Status.ReadyReplicas)
+			response = append(response, model.K8sActualSource{
+				Namespace:                      ss.Namespace,
+				Name:                           ss.Name,
+				Kind:                           k8sKindToGql(string(WorkloadKindStatefulSet)),
+				NumberOfInstances:              &numberOfInstances,
+				AutoInstrumented:               autoInstrumented,
+				AutoInstrumentedDecision:       decisionText,
+				InstrumentedApplicationDetails: nil, // TODO: fill this
+			})
+		}
+		return nil
+	})
+
+	if err != nil {
+		return nil, err
+	}
+
+	return response, nil
+}
+
+func k8sKindToGql(k8sResourceKind string) model.K8sResourceKind {
+	switch k8sResourceKind {
+	case "Deployment":
+		return model.K8sResourceKindDeployment
+	case "StatefulSet":
+		return model.K8sResourceKindStatefulSet
+	case "DaemonSet":
+		return model.K8sResourceKindDaemonSet
+	}
+	return ""
+}
+
+func UpdateReportedName(
+	ctx context.Context,
+	ns, kind, name, reportedName string,
+) error {
+	switch kind {
+	case "Deployment":
+		deployment, err := kube.DefaultClient.AppsV1().Deployments(ns).Get(ctx, name, metav1.GetOptions{})
+		if err != nil {
+			return fmt.Errorf("could not find deployment: %w", err)
+		}
+		deployment.SetAnnotations(updateAnnotations(deployment.GetAnnotations(), reportedName))
+		_, err = kube.DefaultClient.AppsV1().Deployments(ns).Update(ctx, deployment, metav1.UpdateOptions{})
+		return err
+	case "StatefulSet":
+		statefulSet, err := kube.DefaultClient.AppsV1().StatefulSets(ns).Get(ctx, name, metav1.GetOptions{})
+		if err != nil {
+			return fmt.Errorf("could not find statefulset: %w", err)
+		}
+		statefulSet.SetAnnotations(updateAnnotations(statefulSet.GetAnnotations(), reportedName))
+		_, err = kube.DefaultClient.AppsV1().StatefulSets(ns).Update(ctx, statefulSet, metav1.UpdateOptions{})
+		return err
+	case "DaemonSet":
+		daemonSet, err := kube.DefaultClient.AppsV1().DaemonSets(ns).Get(ctx, name, metav1.GetOptions{})
+		if err != nil {
+			return fmt.Errorf("could not find daemonset: %w", err)
+		}
+		daemonSet.SetAnnotations(updateAnnotations(daemonSet.GetAnnotations(), reportedName))
+		_, err = kube.DefaultClient.AppsV1().DaemonSets(ns).Update(ctx, daemonSet, metav1.UpdateOptions{})
+		return err
+	default:
+		return fmt.Errorf("unsupported kind: %s", kind)
+	}
+}
+
+func updateAnnotations(annotations map[string]string, reportedName string) map[string]string {
+	if annotations == nil {
+		annotations = make(map[string]string)
+	}
+	if reportedName == "" {
+		delete(annotations, consts.OdigosReportedNameAnnotation)
+	} else {
+		annotations[consts.OdigosReportedNameAnnotation] = reportedName
+	}
+	return annotations
+}
diff --git a/frontend/services/test_connection/conversion.go b/frontend/services/test_connection/conversion.go
new file mode 100644
index 000000000..aa26d882b
--- /dev/null
+++ b/frontend/services/test_connection/conversion.go
@@ -0,0 +1,58 @@
+package testconnection
+
+import (
+	"errors"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/config"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+)
+
+// Implement the ExporterConfigurer interface
+type DestinationConfigurer struct {
+	destination model.DestinationInput
+}
+
+func (dc *DestinationConfigurer) GetSignals() []common.ObservabilitySignal {
+	var signals []common.ObservabilitySignal
+	if dc.destination.ExportedSignals.Traces {
+		signals = append(signals, common.TracesObservabilitySignal)
+	}
+	if dc.destination.ExportedSignals.Metrics {
+		signals = append(signals, common.MetricsObservabilitySignal)
+	}
+	if dc.destination.ExportedSignals.Logs {
+		signals = append(signals, common.LogsObservabilitySignal)
+	}
+	return signals
+}
+
+func (dc *DestinationConfigurer) GetType() common.DestinationType {
+	// Convert the string type to common.DestinationType
+	return common.DestinationType(dc.destination.Type)
+}
+
+func (dc *DestinationConfigurer) GetID() string {
+	// Generate a unique ID for the Exporter, you can base this on the destination name or type
+	return dc.destination.Name
+}
+
+func (dc *DestinationConfigurer) GetConfig() map[string]string {
+	configMap := make(map[string]string)
+	for _, field := range dc.destination.Fields {
+		configMap[field.Key] = field.Value
+	}
+	return configMap
+}
+
+func ConvertDestinationToConfigurer(destination model.DestinationInput) (config.ExporterConfigurer, error) {
+
+	if destination.Type == "" {
+		return nil, errors.New("destination type is required")
+	}
+
+	// Additional validation or conversion logic can be added here if needed
+
+	// Return a new instance of DestinationConfigurer which implements ExporterConfigurer
+	return &DestinationConfigurer{destination: destination}, nil
+}
diff --git a/frontend/services/test_connection/otlp_test_connection.go b/frontend/services/test_connection/otlp_test_connection.go
new file mode 100644
index 000000000..6a137e31b
--- /dev/null
+++ b/frontend/services/test_connection/otlp_test_connection.go
@@ -0,0 +1,37 @@
+package testconnection
+
+import (
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/exporter"
+
+	"go.opentelemetry.io/collector/exporter/otlpexporter"
+)
+
+var _ ExporterConnectionTester = &otlpExporterConnectionTester{}
+
+type otlpExporterConnectionTester struct {
+	f exporter.Factory
+}
+
+func NewOTLPTester() *otlpExporterConnectionTester {
+	return &otlpExporterConnectionTester{
+		f: otlpexporter.NewFactory(),
+	}
+}
+
+func (t *otlpExporterConnectionTester) Factory() exporter.Factory {
+	return t.f
+}
+
+func (t *otlpExporterConnectionTester) ModifyConfigForConnectionTest(cfg component.Config) component.Config {
+	otlpConf, ok := cfg.(*otlpexporter.Config)
+	if !ok {
+		return nil
+	}
+
+	// currently using the default timeout config of the collector - 5 seconds
+	// Avoid batching and retries
+	otlpConf.QueueConfig.Enabled = false
+	otlpConf.RetryConfig.Enabled = false
+	return otlpConf
+}
diff --git a/frontend/services/test_connection/otlphttp_test_connection.go b/frontend/services/test_connection/otlphttp_test_connection.go
new file mode 100644
index 000000000..42c12c166
--- /dev/null
+++ b/frontend/services/test_connection/otlphttp_test_connection.go
@@ -0,0 +1,36 @@
+package testconnection
+
+import (
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/exporter"
+	"go.opentelemetry.io/collector/exporter/otlphttpexporter"
+)
+
+var _ ExporterConnectionTester = &otlphttpExporterConnectionTester{}
+
+type otlphttpExporterConnectionTester struct {
+	f exporter.Factory
+}
+
+func NewOTLPHTTPTester() *otlphttpExporterConnectionTester {
+	return &otlphttpExporterConnectionTester{
+		f: otlphttpexporter.NewFactory(),
+	}
+}
+
+func (t *otlphttpExporterConnectionTester) Factory() exporter.Factory {
+	return t.f
+}
+
+func (t *otlphttpExporterConnectionTester) ModifyConfigForConnectionTest(cfg component.Config) component.Config {
+	otlpConf, ok := cfg.(*otlphttpexporter.Config)
+	if !ok {
+		return nil
+	}
+
+	// currently using the default timeout config of the collector - 5 seconds
+	// Avoid batching and retries
+	otlpConf.QueueConfig.Enabled = false
+	otlpConf.RetryConfig.Enabled = false
+	return otlpConf
+}
diff --git a/frontend/services/test_connection/test_connection.go b/frontend/services/test_connection/test_connection.go
new file mode 100644
index 000000000..6c078f29a
--- /dev/null
+++ b/frontend/services/test_connection/test_connection.go
@@ -0,0 +1,157 @@
+package testconnection
+
+import (
+	"context"
+	"fmt"
+	"net/http"
+	"strings"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/config"
+
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/confmap"
+	"go.opentelemetry.io/collector/exporter"
+	"go.opentelemetry.io/collector/exporter/exportertest"
+	"go.opentelemetry.io/collector/pdata/ptrace"
+)
+
+var (
+	configres         map[common.DestinationType]config.Configer
+	connectionTesters = []ExporterConnectionTester{
+		NewOTLPTester(),     // "otlp/" prefix
+		NewOTLPHTTPTester(), // "otlphttp/" prefix
+	}
+)
+
+func init() {
+	var err error
+	configres, err = config.LoadConfigers()
+	if err != nil {
+		panic(1)
+	}
+}
+
+type TestConnectionErrorReason string
+
+const (
+	UnKnownDestination      TestConnectionErrorReason = "unknown destination"
+	InvalidConfig           TestConnectionErrorReason = "invalid config"
+	UnsupportedExporterType TestConnectionErrorReason = "unsupported exporter type"
+	FailedToConnect         TestConnectionErrorReason = "failed to connect"
+)
+
+type TestConnectionResult struct {
+	Succeeded       bool
+	Message         string
+	Reason          TestConnectionErrorReason
+	StatusCode      int
+	DestinationType common.DestinationType
+}
+
+type ExporterConnectionTester interface {
+	// Factory returns the exporter factory for the exporter type.
+	// This is used to create the exporter instance for testing the connection.
+	Factory() exporter.Factory
+	// ModifyConfigForConnectionTest modifies the exporter configuration for testing the connection.
+	// Since the default configuration may have batching, retries, etc. which may not be suitable for testing the connection.
+	ModifyConfigForConnectionTest(component.Config) component.Config
+}
+
+func getConnectionTester(exporterID string) ExporterConnectionTester {
+	for _, tester := range connectionTesters {
+		prefix := fmt.Sprintf("%s/", tester.Factory().Type().String())
+		if strings.HasPrefix(exporterID, prefix) {
+			return tester
+		}
+	}
+	return nil
+}
+
+func TestConnection(ctx context.Context, dest config.ExporterConfigurer) TestConnectionResult {
+	destType := dest.GetType()
+	configer, ok := configres[destType]
+	if !ok {
+		return TestConnectionResult{Succeeded: false, Reason: UnKnownDestination, DestinationType: destType, StatusCode: http.StatusNotImplemented}
+	}
+
+	currentConfig := config.Config{
+		Exporters: make(config.GenericMap),
+		Service: config.Service{
+			Pipelines: make(map[string]config.Pipeline),
+		},
+	}
+	err := configer.ModifyConfig(dest, &currentConfig)
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	exporters := currentConfig.Exporters
+	if len(exporters) == 0 {
+		return TestConnectionResult{Message: "no exporters found in config", Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError, Succeeded: false}
+	}
+
+	var exporterRawConfig config.GenericMap
+	var connectionTester ExporterConnectionTester
+	foundTester := false
+	for componentID, cfg := range exporters {
+		gm, ok := cfg.(config.GenericMap)
+		if !ok {
+			continue
+		}
+		ct := getConnectionTester(componentID)
+		if ct != nil {
+			connectionTester = ct
+			foundTester = true
+			exporterRawConfig = gm
+			break
+		}
+	}
+
+	if !foundTester {
+		return TestConnectionResult{Succeeded: false, Message: "no supported exporter found in config", Reason: UnsupportedExporterType, DestinationType: destType, StatusCode: http.StatusNotFound}
+	}
+
+	// before testing the connection, replace placeholders (if exists) in the config with actual values
+	replacePlaceholders(exporterRawConfig, dest.GetConfig())
+	defaultConfig := connectionTester.Factory().CreateDefaultConfig()
+	connectionTester.ModifyConfigForConnectionTest(defaultConfig)
+
+	// convert the user provided fields to a collector config
+	exportersConf := confmap.NewFromStringMap(exporterRawConfig)
+	if exportersConf == nil {
+		return TestConnectionResult{Succeeded: false, Message: "failed to create exporter config", Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	// unmarshal the user provided configuration into the default one, merging them
+	err = exportersConf.Unmarshal(&defaultConfig)
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	if validator, ok := defaultConfig.(component.ConfigValidator); ok {
+		// if the component has a Validate method, call it to validate the configuration
+		err = validator.Validate()
+		if err != nil {
+			return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+		}
+	}
+
+	exporter, err := connectionTester.Factory().CreateTracesExporter(ctx, exportertest.NewNopSettings(), defaultConfig)
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: InvalidConfig, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	err = exporter.Start(ctx, nil)
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: FailedToConnect, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	defer exporter.Shutdown(ctx)
+	err = exporter.ConsumeTraces(ctx, ptrace.NewTraces())
+	if err != nil {
+		return TestConnectionResult{Succeeded: false, Message: err.Error(), Reason: FailedToConnect, DestinationType: destType, StatusCode: http.StatusInternalServerError}
+	}
+
+	return TestConnectionResult{Succeeded: true, DestinationType: destType, StatusCode: http.StatusOK}
+}
diff --git a/frontend/services/test_connection/utils.go b/frontend/services/test_connection/utils.go
new file mode 100644
index 000000000..aca670899
--- /dev/null
+++ b/frontend/services/test_connection/utils.go
@@ -0,0 +1,43 @@
+package testconnection
+
+import (
+	"regexp"
+	"strings"
+
+	"github.com/odigos-io/odigos/common/config"
+)
+
+// replacePlaceholders replaces placeholder values in the given GenericMap with values from the fields map.
+// It traverses the GenericMap recursively and processes each string value as a template.
+// If a string value contains placeholders in the format {KEY}, it replaces them with corresponding values from the fields map.
+// The function supports nested GenericMaps and map[string]interface{} structures.
+func replacePlaceholders(gmap config.GenericMap, fields map[string]string) {
+	// Regular expression to match the ${KEY} pattern
+	re := regexp.MustCompile(`\$\{([^}]+)\}`)
+	
+	for key, value := range gmap {
+		switch v := value.(type) {
+		case string:
+			// Find all matches of the pattern ${KEY}
+			matches := re.FindAllStringSubmatch(v, -1)
+			for _, match := range matches {
+				if len(match) == 2 {
+					// match[0] is the entire match (${KEY}), match[1] is the key (KEY)
+					extractedKey := match[1]
+					if replacement, ok := fields[extractedKey]; ok {
+						// Replace only the ${KEY} part in the original string
+						v = strings.Replace(v, match[0], replacement, -1)
+						// Update the map with the new value
+						gmap[key] = v
+					}
+				}
+			}
+		case config.GenericMap:
+			replacePlaceholders(v, fields)
+		case map[string]interface{}:
+			replacePlaceholders(v, fields)
+		default:
+			// If the value is not a string or a map, we leave it as it is
+		}
+	}
+}
\ No newline at end of file
diff --git a/frontend/services/test_connection/utils_test.go b/frontend/services/test_connection/utils_test.go
new file mode 100644
index 000000000..48787fc9c
--- /dev/null
+++ b/frontend/services/test_connection/utils_test.go
@@ -0,0 +1,56 @@
+package testconnection
+
+import (
+	"testing"
+
+	"github.com/odigos-io/odigos/common/config"
+	"github.com/stretchr/testify/assert"
+)
+
+func TestReplacePlaceholders(t *testing.T) {
+	// Fields map with replacements
+	fields := map[string]string{
+		"MY_KEY1": "MY_VALUE1",
+		"MY_KEY2": "MY_VALUE2",
+	}
+
+	gmap := config.GenericMap{
+		"key1": "${MY_KEY1}",
+		"key2": 123,
+		"key3": config.GenericMap{
+			"nestedKey1": "${MY_KEY2}", // replaced with MY_VALUE2
+			"nestedKey2": "someValue",  // no replacement
+			"nestedKey3": "${MY_KEY3}", // no replacement
+			"nestedKey4": "some prefix: ${MY_KEY2}", // replaced with "some prefix: MY_VALUE2"
+		},
+	}
+
+	replacePlaceholders(gmap, fields)
+	assert.Equal(t, "MY_VALUE1", gmap["key1"])
+	assert.Equal(t, config.GenericMap{
+		"nestedKey1": "MY_VALUE2",
+		"nestedKey2": "someValue",
+		"nestedKey3": "${MY_KEY3}",
+		"nestedKey4": "some prefix: MY_VALUE2",
+	}, gmap["key3"])
+	assert.Equal(t, 123, gmap["key2"])
+
+	// don't change the original map if no placeholders are found
+	gmap = config.GenericMap{
+		"key1": "value1",
+		"key2": 123,
+		"key3": config.GenericMap{
+			"nestedKey1": "value2",
+			"nestedKey2": "someValue",
+		},
+	}
+
+	replacePlaceholders(gmap, fields)
+	assert.Equal(t, "value1", gmap["key1"])
+	assert.Equal(t, config.GenericMap{
+		"nestedKey1": "value2",
+		"nestedKey2": "someValue",
+	}, gmap["key3"])
+	assert.Equal(t, 123, gmap["key2"])
+
+}
\ No newline at end of file
diff --git a/frontend/services/utils.go b/frontend/services/utils.go
new file mode 100644
index 000000000..a85f6b8f3
--- /dev/null
+++ b/frontend/services/utils.go
@@ -0,0 +1,50 @@
+package services
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"path"
+	"strings"
+
+	"github.com/odigos-io/odigos/frontend/kube"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/types"
+)
+
+const cdnUrl = "https://d15jtxgb40qetw.cloudfront.net"
+
+func GetImageURL(image string) string {
+	return path.Join(cdnUrl, image)
+}
+
+func setWorkloadInstrumentationLabel(ctx context.Context, nsName string, workloadName string, workloadKind WorkloadKind, enabled *bool) error {
+	jsonMergePatchData := GetJsonMergePatchForInstrumentationLabel(enabled)
+
+	switch workloadKind {
+	case WorkloadKindDeployment:
+		_, err := kube.DefaultClient.AppsV1().Deployments(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	case WorkloadKindStatefulSet:
+		_, err := kube.DefaultClient.AppsV1().StatefulSets(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	case WorkloadKindDaemonSet:
+		_, err := kube.DefaultClient.AppsV1().DaemonSets(nsName).Patch(ctx, workloadName, types.MergePatchType, jsonMergePatchData, metav1.PatchOptions{})
+		return err
+	default:
+		return errors.New("unsupported workload kind " + string(workloadKind))
+	}
+}
+
+func ConvertFieldsToString(fields map[string]string) string {
+	if len(fields) == 0 {
+		return ""
+	}
+
+	var parts []string
+	for key, value := range fields {
+		parts = append(parts, fmt.Sprintf("%s: %s", key, value))
+	}
+
+	return strings.Join(parts, ", ")
+}
diff --git a/frontend/webapp/app/(setup)/choose-destination/page.tsx b/frontend/webapp/app/(setup)/choose-destination/page.tsx
index 66b0badb5..07187db2a 100644
--- a/frontend/webapp/app/(setup)/choose-destination/page.tsx
+++ b/frontend/webapp/app/(setup)/choose-destination/page.tsx
@@ -1,18 +1,16 @@
 'use client';
 import React from 'react';
-import { StepsList } from '@/components';
-import { ChooseDestinationContainer } from '@/containers';
-import { CardWrapper, PageContainer, StepListWrapper } from '../styled';
+import { SideMenu } from '@/components';
+import { SideMenuWrapper } from '../styled';
+import { ChooseDestinationContainer } from '@/containers/main';
 
 export default function ChooseDestinationPage() {
   return (
-    <PageContainer>
-      <StepListWrapper>
-        <StepsList currentStepIndex={1} />
-      </StepListWrapper>
-      <CardWrapper>
-        <ChooseDestinationContainer />
-      </CardWrapper>
-    </PageContainer>
+    <>
+      <SideMenuWrapper>
+        <SideMenu currentStep={3} />
+      </SideMenuWrapper>
+      <ChooseDestinationContainer />
+    </>
   );
 }
diff --git a/frontend/webapp/app/(setup)/choose-sources/page.tsx b/frontend/webapp/app/(setup)/choose-sources/page.tsx
index 495ec2f21..a612ab2ae 100644
--- a/frontend/webapp/app/(setup)/choose-sources/page.tsx
+++ b/frontend/webapp/app/(setup)/choose-sources/page.tsx
@@ -1,18 +1,16 @@
 'use client';
 import React from 'react';
-import { StepsList } from '@/components';
-import { ChooseSourcesContainer } from '@/containers';
-import { CardWrapper, PageContainer, StepListWrapper } from '../styled';
+import { SideMenu } from '@/components';
+import { ChooseSourcesContainer } from '@/containers/main';
+import { SideMenuWrapper } from '../styled';
 
 export default function ChooseSourcesPage() {
   return (
-    <PageContainer>
-      <StepListWrapper>
-        <StepsList currentStepIndex={0} />
-      </StepListWrapper>
-      <CardWrapper>
-        <ChooseSourcesContainer />
-      </CardWrapper>
-    </PageContainer>
+    <>
+      <SideMenuWrapper>
+        <SideMenu currentStep={2} />
+      </SideMenuWrapper>
+      <ChooseSourcesContainer />
+    </>
   );
 }
diff --git a/frontend/webapp/app/(setup)/connect-destination/page.tsx b/frontend/webapp/app/(setup)/connect-destination/page.tsx
deleted file mode 100644
index 5217c328c..000000000
--- a/frontend/webapp/app/(setup)/connect-destination/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client';
-import { StepsList } from '@/components';
-import { ConnectDestinationContainer } from '@/containers';
-import { CardWrapper, PageContainer, StepListWrapper } from '../styled';
-
-export default function ConnectDestinationPage() {
-  return (
-    <PageContainer>
-      <StepListWrapper>
-        <StepsList currentStepIndex={2} />
-      </StepListWrapper>
-      <CardWrapper>
-        <ConnectDestinationContainer />
-      </CardWrapper>
-    </PageContainer>
-  );
-}
diff --git a/frontend/webapp/app/(setup)/layout.tsx b/frontend/webapp/app/(setup)/layout.tsx
index d93a42f6f..6e7cab11e 100644
--- a/frontend/webapp/app/(setup)/layout.tsx
+++ b/frontend/webapp/app/(setup)/layout.tsx
@@ -1,7 +1,23 @@
 'use client';
 import React from 'react';
-import Logo from '@/assets/logos/odigos-gradient.svg';
-import { LogoWrapper, SetupPageContainer } from './styled';
+import styled from 'styled-components';
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const MainContent = styled.div`
+  display: flex;
+  max-width: 1440px;
+  width: 100vh;
+  flex-direction: column;
+  align-items: center;
+`;
 
 export default function SetupLayout({
   children,
@@ -9,11 +25,8 @@ export default function SetupLayout({
   children: React.ReactNode;
 }) {
   return (
-    <SetupPageContainer>
-      <LogoWrapper>
-        <Logo />
-      </LogoWrapper>
-      {children}
-    </SetupPageContainer>
+    <LayoutContainer>
+      <MainContent>{children}</MainContent>
+    </LayoutContainer>
   );
 }
diff --git a/frontend/webapp/app/(setup)/styled.ts b/frontend/webapp/app/(setup)/styled.ts
new file mode 100644
index 000000000..a4d810aa6
--- /dev/null
+++ b/frontend/webapp/app/(setup)/styled.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const SideMenuWrapper = styled.div`
+  position: absolute;
+  left: 24px;
+  top: 144px;
+
+  @media (max-width: 1050px) {
+    display: none;
+  }
+`;
diff --git a/frontend/webapp/app/(setup)/styled.tsx b/frontend/webapp/app/(setup)/styled.tsx
deleted file mode 100644
index 4e3e49040..000000000
--- a/frontend/webapp/app/(setup)/styled.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import styled from 'styled-components';
-
-export const SetupPageContainer = styled.div`
-  width: 100vw;
-  height: 100vh;
-
-  background: var(
-    --gradient-dark,
-    radial-gradient(
-      44.09% 58.18% at 100% -14%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
-    linear-gradient(181deg, #091824 0%, #2b2f56 100%)
-  );
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export const LogoWrapper = styled.div`
-  position: absolute;
-  top: 20px;
-  left: 20px;
-`;
-
-export const StepListWrapper = styled.div`
-  height: 5%;
-  padding: 32px;
-  width: 100%;
-  display: inline-flex;
-  justify-content: center;
-`;
-
-export const PageContainer = styled.div`
-  height: 100vh;
-`;
-
-export const CardWrapper = styled.div`
-  height: 85%;
-`;
diff --git a/frontend/webapp/app/globals.css b/frontend/webapp/app/globals.css
new file mode 100644
index 000000000..6bbdf7e7c
--- /dev/null
+++ b/frontend/webapp/app/globals.css
@@ -0,0 +1,4 @@
+/* Preload key fonts in your global CSS */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@100;200;300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 2387fee82..dfee65de7 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -1,7 +1,9 @@
 'use client';
+import './globals.css';
 import React from 'react';
 import { useSSE } from '@/hooks';
-import theme from '@/styles/palette';
+import theme from '@/styles/theme';
+import { ApolloWrapper } from '@/lib';
 import { ThemeProvider } from 'styled-components';
 import { NotificationManager } from '@/components';
 import ReduxProvider from '@/store/redux-provider';
@@ -14,7 +16,6 @@ const LAYOUT_STYLE: React.CSSProperties = {
   scrollbarWidth: 'none',
   width: '100vw',
   height: '100vh',
-  backgroundColor: theme.colors.dark,
 };
 
 export default function RootLayout({
@@ -36,16 +37,18 @@ export default function RootLayout({
   return (
     <html lang="en">
       <ReduxProvider>
-        <QueryClientProvider client={queryClient}>
-          <ThemeProvider theme={theme}>
-            <ThemeProviderWrapper>
+        <ApolloWrapper>
+          <QueryClientProvider client={queryClient}>
+            <ThemeProvider theme={theme}>
+              {/* <ThemeProviderWrapper> */}
               <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
                 {children}
-                <NotificationManager />
+                {/* <NotificationManager /> */}
               </body>
-            </ThemeProviderWrapper>
-          </ThemeProvider>
-        </QueryClientProvider>
+              {/* </ThemeProviderWrapper> */}
+            </ThemeProvider>
+          </QueryClientProvider>
+        </ApolloWrapper>
       </ReduxProvider>
     </html>
   );
diff --git a/frontend/webapp/app/main/layout.tsx b/frontend/webapp/app/main/layout.tsx
new file mode 100644
index 000000000..f6eecf660
--- /dev/null
+++ b/frontend/webapp/app/main/layout.tsx
@@ -0,0 +1,36 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { MainHeader } from '@/components';
+
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+
+const MainContent = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 76px;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LayoutContainer>
+      <MainContent>
+        <MainHeader />
+        {children}
+      </MainContent>
+    </LayoutContainer>
+  );
+}
diff --git a/frontend/webapp/app/main/page.tsx b/frontend/webapp/app/main/page.tsx
new file mode 100644
index 000000000..a2227ccd0
--- /dev/null
+++ b/frontend/webapp/app/main/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+import React from 'react';
+import { OverviewDataFlowContainer } from '@/containers';
+
+export default function MainPage() {
+  return (
+    <>
+      <OverviewDataFlowContainer />
+    </>
+  );
+}
diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index bb5248607..ec28d1ded 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -1,27 +1,18 @@
 'use client';
 import { useEffect } from 'react';
-import { useQuery } from 'react-query';
+import { useConfig } from '@/hooks';
+import { ROUTES, CONFIG } from '@/utils';
 import { useRouter } from 'next/navigation';
-import { ROUTES, CONFIG, QUERIES } from '@/utils';
-import { Loader } from '@keyval-dev/design-system';
-import { getDestinations, getConfig } from '@/services';
 import { addNotification, store } from '@/store';
+import { Loader } from '@keyval-dev/design-system';
+
 export default function App() {
   const router = useRouter();
-  const { data, isLoading: isConfigLoading } = useQuery(
-    [QUERIES.API_CONFIG],
-    getConfig
-  );
-  const {
-    isLoading: isDestinationLoading,
-    data: destinationList,
-    error,
-  } = useQuery([QUERIES.API_DESTINATIONS], getDestinations);
-  useEffect(() => {
-    if (isConfigLoading || isDestinationLoading) return;
+  const { data, error } = useConfig();
 
-    renderCurrentPage();
-  }, [data, destinationList]);
+  useEffect(() => {
+    data && renderCurrentPage();
+  }, [data, error]);
 
   useEffect(() => {
     if (!error) return;
@@ -41,11 +32,6 @@ export default function App() {
   function renderCurrentPage() {
     const { installation } = data;
 
-    if (destinationList.length > 0) {
-      router.push(ROUTES.OVERVIEW);
-      return;
-    }
-
     switch (installation) {
       case CONFIG.NEW:
       case CONFIG.APPS_SELECTED:
diff --git a/frontend/webapp/components/common/card-details/index.tsx b/frontend/webapp/components/common/card-details/index.tsx
new file mode 100644
index 000000000..184ebb2af
--- /dev/null
+++ b/frontend/webapp/components/common/card-details/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ConfiguredFields } from '@/components';
+import { Text } from '@/reuseable-components';
+interface CardDetailsProps {
+  data: {
+    title: string;
+    value: string;
+  }[];
+  title?: string;
+}
+
+const CardDetails: React.FC<CardDetailsProps> = ({
+  data,
+  title = 'Details',
+}) => {
+  return (
+    <Container>
+      <TitleWrapper>
+        <Text>{title}</Text>
+      </TitleWrapper>
+      <ConfiguredFields details={data} />
+    </Container>
+  );
+};
+
+export { CardDetails };
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px 24px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 24px;
+  border: 1px solid ${({ theme }) => theme.colors.border};
+`;
+
+const TitleWrapper = styled.div``;
diff --git a/frontend/webapp/components/common/configured-fields/index.tsx b/frontend/webapp/components/common/configured-fields/index.tsx
new file mode 100644
index 000000000..591e1e550
--- /dev/null
+++ b/frontend/webapp/components/common/configured-fields/index.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+type TypeDetail = {
+  title: string;
+  value: string;
+};
+
+type ConfiguredFieldsProps = {
+  details: TypeDetail[];
+};
+
+const ListContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px 40px;
+`;
+
+const ListItem = styled.div``;
+
+const ItemTitle = styled(Text)`
+  color: #b8b8b8;
+  font-size: 10px;
+  line-height: 16px;
+`;
+
+const ItemValue = styled(Text)`
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 12px;
+  line-height: 18px;
+`;
+
+export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({
+  details,
+}) => {
+  const parseValue = (value: any) => {
+    try {
+      const parsed = JSON.parse(value);
+      if (typeof parsed === 'string') {
+        return parsed;
+      }
+
+      if (Array.isArray(parsed)) {
+        return parsed
+          .map((item) => {
+            if (typeof item === 'object' && item !== null) {
+              return `${item.key}: ${item.value}`;
+            }
+
+            return item;
+          })
+          .join(', ');
+      }
+
+      // Handle objects (non-array JSON objects)
+      if (typeof parsed === 'object' && parsed !== null) {
+        return Object.entries(parsed)
+          .map(([key, val]) => `${key}: ${val}`)
+          .join(', ');
+      }
+    } catch (error) {
+      return value;
+    }
+    return value;
+  };
+
+  return (
+    <ListContainer>
+      {details.map((detail, index) => (
+        <ListItem key={index}>
+          <ItemTitle>{detail.title}</ItemTitle>
+          <ItemValue>{parseValue(detail.value)}</ItemValue>
+        </ListItem>
+      ))}
+    </ListContainer>
+  );
+};
diff --git a/frontend/webapp/components/common/index.ts b/frontend/webapp/components/common/index.ts
index d60373d11..bc8f954d1 100644
--- a/frontend/webapp/components/common/index.ts
+++ b/frontend/webapp/components/common/index.ts
@@ -1,2 +1,4 @@
 export * from './multi.checkbox';
 export * from './conditions.check';
+export * from './card-details';
+export * from './configured-fields';
diff --git a/frontend/webapp/components/destinations/add-destination-button/index.tsx b/frontend/webapp/components/destinations/add-destination-button/index.tsx
new file mode 100644
index 000000000..281d403c7
--- /dev/null
+++ b/frontend/webapp/components/destinations/add-destination-button/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Image from 'next/image';
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+import { Button, Text } from '@/reuseable-components';
+
+const StyledAddDestinationButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+`;
+
+interface ModalActionComponentProps {
+  onClick: () => void;
+}
+
+export function AddDestinationButton({ onClick }: ModalActionComponentProps) {
+  return (
+    <StyledAddDestinationButton variant="secondary" onClick={onClick}>
+      <Image src="/icons/common/plus.svg" alt="back" width={16} height={16} />
+      <Text
+        color={theme.colors.secondary}
+        size={14}
+        decoration={'underline'}
+        family="secondary"
+      >
+        ADD DESTINATION
+      </Text>
+    </StyledAddDestinationButton>
+  );
+}
diff --git a/frontend/webapp/components/destinations/edit-destination-form/index.tsx b/frontend/webapp/components/destinations/edit-destination-form/index.tsx
new file mode 100644
index 000000000..8388edb97
--- /dev/null
+++ b/frontend/webapp/components/destinations/edit-destination-form/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { CheckboxList } from '@/reuseable-components';
+import { DynamicConnectDestinationFormFields } from '@/containers/main/destinations/add-destination/dynamic-form-fields';
+import {
+  DynamicField,
+  ExportedSignals,
+  SupportedDestinationSignals,
+} from '@/types';
+
+interface DestinationFormProps {
+  dynamicFields: DynamicField[];
+  exportedSignals: ExportedSignals;
+  supportedSignals: SupportedDestinationSignals;
+  handleDynamicFieldChange: (name: string, value: any) => void;
+  handleSignalChange: (signal: keyof ExportedSignals, value: boolean) => void;
+}
+
+export const EditDestinationForm: React.FC<DestinationFormProps> = ({
+  dynamicFields,
+  exportedSignals,
+  supportedSignals,
+  handleSignalChange,
+  handleDynamicFieldChange,
+}) => {
+  const monitors = [
+    supportedSignals.logs.supported && { id: 'logs', title: 'Logs' },
+    supportedSignals.metrics.supported && { id: 'metrics', title: 'Metrics' },
+    supportedSignals.traces.supported && { id: 'traces', title: 'Traces' },
+  ].filter(Boolean);
+
+  return (
+    <>
+      <CheckboxList
+        monitors={monitors as []}
+        title="This connection will monitor:"
+        exportedSignals={exportedSignals}
+        handleSignalChange={handleSignalChange}
+      />
+      <DynamicConnectDestinationFormFields
+        fields={dynamicFields}
+        onChange={handleDynamicFieldChange}
+      />
+    </>
+  );
+};
diff --git a/frontend/webapp/components/destinations/index.ts b/frontend/webapp/components/destinations/index.ts
new file mode 100644
index 000000000..e852a65cc
--- /dev/null
+++ b/frontend/webapp/components/destinations/index.ts
@@ -0,0 +1,3 @@
+export * from './add-destination-button';
+export * from './monitors-tap-list';
+export * from './edit-destination-form';
diff --git a/frontend/webapp/components/destinations/monitors-tap-list/index.tsx b/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
new file mode 100644
index 000000000..fbc4685b4
--- /dev/null
+++ b/frontend/webapp/components/destinations/monitors-tap-list/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text, Tag } from '@/reuseable-components';
+import { MONITORS_OPTIONS } from '@/utils';
+import Image from 'next/image';
+
+interface MonitorButtonsProps {
+  selectedMonitors: string[];
+  onMonitorSelect: (monitor: string) => void;
+}
+
+const MonitorButtonsContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-left: 12px;
+`;
+
+const MonitorsTitle = styled(Text)`
+  opacity: 0.8;
+  font-size: 14px;
+  margin-left: 32px;
+`;
+
+const MonitorsTapList: React.FC<MonitorButtonsProps> = ({
+  selectedMonitors,
+  onMonitorSelect,
+}) => {
+  return (
+    <>
+      <MonitorsTitle>Monitor by:</MonitorsTitle>
+      <MonitorButtonsContainer>
+        {MONITORS_OPTIONS.map((monitor) => (
+          <Tag
+            key={monitor.id}
+            id={monitor.id}
+            isSelected={selectedMonitors.includes(monitor.id)}
+            onClick={() => onMonitorSelect(monitor.id)}
+          >
+            <Image
+              src={`/icons/monitors/${monitor.id}.svg`}
+              alt="monitor"
+              width={16}
+              height={16}
+            />
+            <Text size={14}>{monitor.value}</Text>
+          </Tag>
+        ))}
+      </MonitorButtonsContainer>
+    </>
+  );
+};
+
+export { MonitorsTapList };
diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
index c03b571ed..f047da4e2 100644
--- a/frontend/webapp/components/index.ts
+++ b/frontend/webapp/components/index.ts
@@ -4,3 +4,6 @@ export * from './overview';
 export * from './common';
 export * from './notification/notification-manager';
 export * from './notification/notification-list';
+export * from './destinations';
+export * from './main';
+export * from './modals';
diff --git a/frontend/webapp/components/main/header/cp-title/index.tsx b/frontend/webapp/components/main/header/cp-title/index.tsx
new file mode 100644
index 000000000..c7bf856d2
--- /dev/null
+++ b/frontend/webapp/components/main/header/cp-title/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+interface PlatformProps {
+  type: 'k8s' | 'vm';
+}
+
+const PlatformWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 10px;
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 10px;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  margin-right: 10px;
+  color: ${({ theme }) => theme.colors.white};
+`;
+
+const PlatformTitle: React.FC<PlatformProps> = ({ type }) => {
+  return (
+    <PlatformWrapper>
+      <IconWrapper>
+        <Image
+          src={`/icons/cp/${type}.svg`}
+          alt={type}
+          width={28}
+          height={28}
+        />
+      </IconWrapper>
+      <TextWrapper>
+        <Title>
+          {type === 'k8s' ? 'Kubernetes Cluster' : 'Virtual Machine'}
+        </Title>
+      </TextWrapper>
+    </PlatformWrapper>
+  );
+};
+
+export { PlatformTitle };
diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
new file mode 100644
index 000000000..aa33bb0c2
--- /dev/null
+++ b/frontend/webapp/components/main/header/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { ConnectionStatus } from '@/reuseable-components';
+import { PlatformTitle } from './cp-title';
+
+interface MainHeaderProps {}
+
+const HeaderContainer = styled.div`
+  display: flex;
+  padding: 12px 0;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  border-bottom: 1px solid rgba(249, 249, 249, 0.16);
+  width: 100%;
+`;
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 32px;
+`;
+
+const PlatformTitleWrapper = styled.div`
+  margin-left: 32px;
+`;
+
+export const MainHeader: React.FC<MainHeaderProps> = () => {
+  return (
+    <HeaderContainer>
+      <Logo>
+        <Image
+          src="/brand/transparent-logo-white.svg"
+          alt="logo"
+          width={84}
+          height={20}
+        />
+      </Logo>
+      <PlatformTitleWrapper>
+        <PlatformTitle type="k8s" />
+      </PlatformTitleWrapper>
+      <ConnectionStatus title="Connection Alive" status="alive" />
+    </HeaderContainer>
+  );
+};
diff --git a/frontend/webapp/components/main/index.tsx b/frontend/webapp/components/main/index.tsx
new file mode 100644
index 000000000..677ca79d4
--- /dev/null
+++ b/frontend/webapp/components/main/index.tsx
@@ -0,0 +1 @@
+export * from './header';
diff --git a/frontend/webapp/components/modals/delete-entity-modal/index.tsx b/frontend/webapp/components/modals/delete-entity-modal/index.tsx
new file mode 100644
index 000000000..ac771fc72
--- /dev/null
+++ b/frontend/webapp/components/modals/delete-entity-modal/index.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback } from 'react';
+import { Button, Modal, Text } from '@/reuseable-components';
+import styled from 'styled-components';
+
+interface AddActionModalProps {
+  title: string;
+  description: string;
+  isModalOpen: boolean;
+  handleDelete: () => void;
+  handleCloseModal: () => void;
+}
+
+export const DeleteEntityModal: React.FC<AddActionModalProps> = ({
+  isModalOpen,
+  handleCloseModal,
+  title = '',
+  handleDelete,
+  description = '',
+}) => {
+  const handleClose = useCallback(() => {
+    handleCloseModal();
+  }, [handleCloseModal]);
+
+  return (
+    <Modal isOpen={isModalOpen} onClose={handleClose}>
+      <DeleteEntityModalContainer>
+        <ModalTitle>Delete {title}</ModalTitle>
+        <ModalContent>
+          <ModalDescription>{description}</ModalDescription>
+        </ModalContent>
+        <ModalFooter>
+          <FooterButton variant="danger" onClick={handleDelete}>
+            Delete
+          </FooterButton>
+          <FooterButton variant={'secondary'} onClick={handleClose}>
+            Cancel
+          </FooterButton>
+        </ModalFooter>
+      </DeleteEntityModalContainer>
+    </Modal>
+  );
+};
+
+const ModalTitle = styled(Text)`
+  font-size: 20px;
+  line-height: 28px;
+`;
+
+const ModalDescription = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  width: 416px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 24px;
+`;
+
+const ModalContent = styled.div`
+  padding: 12px 0px 32px 0;
+`;
+
+const ModalFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+`;
+
+const FooterButton = styled(Button)`
+  width: 224px;
+`;
+
+const DeleteEntityModalContainer = styled.div`
+  padding: 24px 32px;
+`;
diff --git a/frontend/webapp/components/modals/index.tsx b/frontend/webapp/components/modals/index.tsx
new file mode 100644
index 000000000..5b27ff586
--- /dev/null
+++ b/frontend/webapp/components/modals/index.tsx
@@ -0,0 +1 @@
+export * from './delete-entity-modal';
diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
index e047df7cd..98112cbed 100644
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
+++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 import theme from '@/styles/palette';
-import { useCheckConnection, useKeyDown } from '@/hooks';
+import { useTestConnection, useKeyDown } from '@/hooks';
 import { Field, SelectedDestination } from '@/types';
 import { renderFields } from './dynamic.fields';
 import {
@@ -81,7 +81,7 @@ export function CreateConnectionForm({
     destinationNameValue || ''
   );
 
-  const { checkDestinationConnection, isLoading } = useCheckConnection();
+  const { testConnection } = useTestConnection();
 
   useEffect(() => {
     setInitialDynamicFields();
@@ -209,7 +209,7 @@ export function CreateConnectionForm({
       type: destination.type,
     };
     try {
-      checkDestinationConnection(body, setIsConnectionTested);
+      // testConnection(body);
     } catch (error) {}
   }
 
@@ -252,7 +252,8 @@ export function CreateConnectionForm({
             disabled={isCreateButtonDisabled}
             onClick={handleCheckDestinationConnection}
           >
-            {isLoading ? (
+            <div></div>
+            {/* {isLoading ? (
               <KeyvalLoader width={9} height={9} />
             ) : isConnectionTested.enabled === null ? (
               <KeyvalText color={theme.text.secondary} size={14} weight={600}>
@@ -266,7 +267,7 @@ export function CreateConnectionForm({
               <KeyvalText color={theme.colors.error} size={14} weight={600}>
                 {isConnectionTested.message}
               </KeyvalText>
-            )}
+            )} */}
           </KeyvalButton>
         )}
         <KeyvalButton
diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
new file mode 100644
index 000000000..b2a763af6
--- /dev/null
+++ b/frontend/webapp/components/setup/headers/header/index.tsx
@@ -0,0 +1,59 @@
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+import { NavigationButtons, Text } from '@/reuseable-components';
+
+interface SetupHeaderProps {
+  navigationButtons: {
+    label: string;
+    iconSrc?: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+  }[];
+}
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 24px 0 32px;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  border-bottom: 1px solid rgba(249, 249, 249, 0.16);
+  height: 80px;
+`;
+
+const Title = styled(Text)``;
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 1.2em;
+`;
+
+const NavigationButtonsWrapper = styled.div`
+  position: absolute;
+  right: 24px;
+`;
+
+export const SetupHeader: React.FC<SetupHeaderProps> = ({
+  navigationButtons,
+}) => {
+  return (
+    <HeaderContainer>
+      <Logo>
+        <Image
+          src="/brand/transparent-logo-white.svg"
+          alt="logo"
+          width={84}
+          height={20}
+        />
+      </Logo>
+      <Title family={'secondary'}>START WITH ODIGOS</Title>
+      <div style={{ width: 84 }} />
+      <NavigationButtonsWrapper>
+        <NavigationButtons buttons={navigationButtons} />
+      </NavigationButtonsWrapper>
+    </HeaderContainer>
+  );
+};
diff --git a/frontend/webapp/components/setup/headers/index.tsx b/frontend/webapp/components/setup/headers/index.tsx
index fc5486a21..ce9c51325 100644
--- a/frontend/webapp/components/setup/headers/index.tsx
+++ b/frontend/webapp/components/setup/headers/index.tsx
@@ -2,3 +2,4 @@ export * from './choose-destination-header';
 export * from './choose-sources-header';
 export * from './connect-destination-header';
 export * from './back-button';
+export * from './header';
diff --git a/frontend/webapp/components/setup/index.tsx b/frontend/webapp/components/setup/index.tsx
index e2f355a8b..b45b6ee9c 100644
--- a/frontend/webapp/components/setup/index.tsx
+++ b/frontend/webapp/components/setup/index.tsx
@@ -6,3 +6,4 @@ export { ConnectionsIcons } from './connection/connections_icons/connections_ico
 export { CreateConnectionForm } from './connection/create.connection.form/create.connection.form';
 export { QuickHelp } from './connection/quick.help/quick.help';
 export * from './headers';
+export * from './menu';
diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
new file mode 100644
index 000000000..5627c8e10
--- /dev/null
+++ b/frontend/webapp/components/setup/menu/index.tsx
@@ -0,0 +1,147 @@
+import Image from 'next/image';
+import { StepProps } from '@/types';
+import React, { useEffect } from 'react';
+import { Text } from '@/reuseable-components';
+import styled, { css } from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+  display: flex;
+  gap: 16px;
+  padding: 8px;
+  opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
+  transition: all 0.3s;
+
+  ${({ state }) =>
+    state === 'finish' &&
+    css`
+      opacity: 0.8;
+    `}
+
+  ${({ state }) => state === 'active' && css``}
+
+  ${({ state }) =>
+    state === 'disabled' &&
+    css`
+      opacity: 0.5;
+    `}
+
+  & + & {
+    margin-top: 10px;
+  }
+`;
+
+const IconWrapper = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+  border-radius: 32px;
+  width: 24px;
+  height: 24px;
+  border: 1px solid ${({ theme }) => theme.colors.secondary};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  ${({ state }) =>
+    state === 'finish'
+      ? css`
+          opacity: 0.8;
+        `
+      : state === 'disabled' &&
+        css`
+          border: 1px dashed rgba(249, 249, 249, 0.4);
+        `}
+`;
+
+const StepContent = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const StepTitle = styled(Text)`
+  font-weight: 500;
+`;
+
+const StepSubtitle = styled(Text)``;
+
+const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
+  data,
+  currentStep,
+}) => {
+  const [stepsList, setStepsList] = React.useState<StepProps[]>([]);
+  const steps: StepProps[] = data || [
+    {
+      title: 'INSTALLATION',
+      subtitle: 'Success',
+      state: 'finish',
+      stepNumber: 1,
+    },
+    {
+      title: 'SOURCES',
+      state: 'active',
+      subtitle: '',
+
+      stepNumber: 2,
+    },
+    {
+      title: 'DESTINATIONS',
+      state: 'disabled',
+      stepNumber: 3,
+    },
+  ];
+  useEffect(() => {
+    if (currentStep) {
+      const currentSteps = (data || steps).map((step, index) => {
+        if (index < currentStep - 1) {
+          return { ...step, state: 'finish' as const };
+        } else if (index === currentStep - 1) {
+          return { ...step, state: 'active' as const };
+        } else {
+          return { ...step, state: 'disabled' as const };
+        }
+      });
+
+      setStepsList(currentSteps);
+    }
+  }, [currentStep, data]);
+
+  return (
+    <Container>
+      {stepsList.map((step, index) => (
+        <Step key={index} state={step.state}>
+          <IconWrapper state={step.state}>
+            {step.state === 'finish' && (
+              <Image
+                src="/icons/common/check.svg"
+                width={20}
+                height={20}
+                alt={''}
+              />
+            )}
+            {step.state === 'active' && (
+              <Text size={12}>{step.stepNumber}</Text>
+            )}
+            {step.state === 'disabled' && (
+              <Text size={12}>{step.stepNumber}</Text>
+            )}
+          </IconWrapper>
+          <StepContent>
+            <StepTitle family={'secondary'}>{step.title}</StepTitle>
+            {step.subtitle && (
+              <StepSubtitle size={10} weight={300}>
+                {step.subtitle}
+              </StepSubtitle>
+            )}
+          </StepContent>
+        </Step>
+      ))}
+    </Container>
+  );
+};
+
+export { SideMenu };
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
new file mode 100644
index 000000000..b0e342e3c
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -0,0 +1,59 @@
+import { ActionsType } from '@/types';
+
+export const ACTION_OPTIONS = [
+  {
+    id: 'add_cluster_info',
+    label: 'Add Cluster Info',
+    description: 'Add static cluster-scoped attributes to your data.',
+    type: ActionsType.ADD_CLUSTER_INFO,
+    icon: '/icons/actions/addclusterinfo.svg',
+  },
+  {
+    id: 'delete_attribute',
+    label: 'Delete Attribute',
+    description: 'Delete attributes from logs, metrics, and traces.',
+    type: ActionsType.DELETE_ATTRIBUTES,
+    icon: '/icons/actions/deleteattribute.svg',
+  },
+  {
+    id: 'rename_attribute',
+    label: 'Rename Attribute',
+    description: 'Rename attributes in logs, metrics, and traces.',
+    type: ActionsType.RENAME_ATTRIBUTES,
+    icon: '/icons/actions/renameattribute.svg',
+  },
+  {
+    id: 'pii-masking',
+    label: 'PII Masking',
+    description: 'Mask PII data in your traces.',
+    type: ActionsType.PII_MASKING,
+    icon: '/icons/actions/piimasking.svg',
+  },
+  {
+    id: 'sampler',
+    label: 'Samplers',
+    description: '',
+    type: ActionsType.PROBABILISTIC_SAMPLER,
+    icon: '/icons/actions/sampler.svg',
+    items: [
+      {
+        id: 'error-sampler',
+        label: 'Error Sampler',
+        description: 'Sample errors based on percentage.',
+        type: ActionsType.ERROR_SAMPLER,
+      },
+      {
+        id: 'probabilistic-sampler',
+        label: 'Probabilistic Sampler',
+        description: 'Sample traces based on percentage.',
+        type: ActionsType.PROBABILISTIC_SAMPLER,
+      },
+      {
+        id: 'latency-action',
+        label: 'Latency Action',
+        description: 'Add latency to your traces.',
+        type: ActionsType.LATENCY_SAMPLER,
+      },
+    ],
+  },
+];
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
new file mode 100644
index 000000000..977d632b2
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -0,0 +1,92 @@
+import React, { useRef, useCallback } from 'react';
+import {
+  AutocompleteInput,
+  Modal,
+  NavigationButtons,
+  Text,
+} from '@/reuseable-components';
+import styled from 'styled-components';
+import { ACTION_OPTIONS } from './action-options';
+
+const DefineActionContainer = styled.section`
+  height: 640px;
+  padding: 0px 220px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 16px;
+  max-width: 640px;
+  margin: 32px 0 24px 0;
+`;
+
+const SubTitle = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  line-height: 150%;
+`;
+
+interface AddActionModalProps {
+  isModalOpen: boolean;
+  handleCloseModal: () => void;
+}
+
+interface ModalActionComponentProps {
+  onNext: () => void;
+}
+
+const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(
+  ({ onNext }) => {
+    const buttons = [
+      {
+        label: 'DONE',
+        onClick: onNext,
+        variant: 'primary' as const,
+      },
+    ];
+
+    return <NavigationButtons buttons={buttons} />;
+  }
+);
+
+export const AddActionModal: React.FC<AddActionModalProps> = ({
+  isModalOpen,
+  handleCloseModal,
+}) => {
+  const submitRef = useRef<(() => void) | null>(null);
+
+  const handleNext = useCallback(() => {
+    if (submitRef.current) {
+      handleCloseModal();
+    }
+  }, [handleCloseModal]);
+
+  const handleClose = useCallback(() => {
+    handleCloseModal();
+  }, [handleCloseModal]);
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      actionComponent={<ModalActionComponent onNext={handleNext} />}
+      header={{ title: 'Add Action' }}
+      onClose={handleClose}
+    >
+      <DefineActionContainer>
+        <HeaderWrapper>
+          <Text size={20}>{'Define Action'}</Text>
+          <SubTitle>
+            {
+              'Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
+            }
+          </SubTitle>
+        </HeaderWrapper>
+        <AutocompleteInput options={ACTION_OPTIONS} />
+      </DefineActionContainer>
+    </Modal>
+  );
+};
diff --git a/frontend/webapp/containers/main/actions/index.ts b/frontend/webapp/containers/main/actions/index.ts
index 53803aef1..7fce4982a 100644
--- a/frontend/webapp/containers/main/actions/index.ts
+++ b/frontend/webapp/containers/main/actions/index.ts
@@ -2,3 +2,4 @@ export * from './managed';
 export * from './choose-action';
 export * from './edit-action';
 export * from './create-action';
+export * from './choose-action-modal';
diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
new file mode 100644
index 000000000..ffb5de923
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -0,0 +1,102 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { DestinationTypeItem } from '@/types';
+import { Modal, NavigationButtons } from '@/reuseable-components';
+import { ChooseDestinationModalBody } from '../choose-destination-modal-body';
+import { ConnectDestinationModalBody } from '../connect-destination-modal-body';
+
+interface AddDestinationModalProps {
+  isModalOpen: boolean;
+  handleCloseModal: () => void;
+}
+
+interface ModalActionComponentProps {
+  onNext: () => void;
+  onBack: () => void;
+  isFormValid?: boolean;
+  item?: DestinationTypeItem;
+}
+
+const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(
+  ({ onNext, onBack, isFormValid, item }) => {
+    if (!item) return null;
+
+    const buttons = [
+      {
+        label: 'BACK',
+        iconSrc: '/icons/common/arrow-white.svg',
+        onClick: onBack,
+        variant: 'secondary' as const,
+      },
+      {
+        label: 'DONE',
+        onClick: onNext,
+        variant: 'primary' as const,
+        disabled: !isFormValid,
+      },
+    ];
+
+    return <NavigationButtons buttons={buttons} />;
+  }
+);
+
+export const AddDestinationModal: React.FC<AddDestinationModalProps> = ({
+  isModalOpen,
+  handleCloseModal,
+}) => {
+  const submitRef = useRef<(() => void) | null>(null);
+  const [selectedItem, setSelectedItem] = useState<
+    DestinationTypeItem | undefined
+  >();
+  const [isFormValid, setIsFormValid] = useState<boolean>(false);
+
+  const handleNextStep = useCallback((item: DestinationTypeItem) => {
+    setSelectedItem(item);
+  }, []);
+
+  const handleNext = useCallback(() => {
+    if (submitRef.current) {
+      submitRef.current();
+      setSelectedItem(undefined);
+      handleCloseModal();
+    }
+  }, [handleCloseModal]);
+
+  const handleBack = useCallback(() => {
+    setSelectedItem(undefined);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setSelectedItem(undefined);
+    handleCloseModal();
+  }, [handleCloseModal]);
+
+  const renderModalBody = () => {
+    return selectedItem ? (
+      <ConnectDestinationModalBody
+        onSubmitRef={submitRef}
+        destination={selectedItem}
+        onFormValidChange={setIsFormValid}
+      />
+    ) : (
+      <ChooseDestinationModalBody onSelect={handleNextStep} />
+    );
+  };
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      actionComponent={
+        <ModalActionComponent
+          onNext={handleNext}
+          onBack={handleBack}
+          isFormValid={isFormValid}
+          item={selectedItem}
+        />
+      }
+      header={{ title: 'Add Destination' }}
+      onClose={handleClose}
+    >
+      {renderModalBody()}
+    </Modal>
+  );
+};
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
new file mode 100644
index 000000000..f8f730168
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DropdownOption } from '@/types';
+import { MONITORS_OPTIONS } from '@/utils';
+import { Checkbox, Dropdown, Input } from '@/reuseable-components';
+
+interface FilterComponentProps {
+  selectedTag: DropdownOption | undefined;
+  onTagSelect: (option: DropdownOption) => void;
+  onSearch: (value: string) => void;
+  selectedMonitors: string[];
+  onMonitorSelect: (monitor: string) => void;
+}
+
+const InputAndDropdownContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  width: 370px;
+`;
+
+const FilterContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 24px 0;
+`;
+
+const MonitorButtonsContainer = styled.div`
+  display: flex;
+  gap: 32px;
+  margin-left: 32px;
+`;
+
+const DROPDOWN_OPTIONS = [
+  { value: 'All types', id: 'all' },
+  { value: 'Managed', id: 'managed' },
+  { value: 'Self-hosted', id: 'self hosted' },
+];
+
+const DestinationFilterComponent: React.FC<FilterComponentProps> = ({
+  selectedTag,
+  selectedMonitors,
+  onTagSelect,
+  onSearch,
+  onMonitorSelect,
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchTerm(value);
+    onSearch(value);
+  };
+
+  return (
+    <FilterContainer>
+      <InputAndDropdownContainer>
+        <div>
+          <Input
+            placeholder="Search..."
+            icon="/icons/common/search.svg"
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+        </div>
+        <Dropdown
+          options={DROPDOWN_OPTIONS}
+          value={selectedTag}
+          onSelect={onTagSelect}
+          showSearch={false}
+        />
+      </InputAndDropdownContainer>
+      <MonitorButtonsContainer>
+        {MONITORS_OPTIONS.map((monitor) => (
+          <Checkbox
+            key={monitor.id}
+            title={monitor.value}
+            initialValue
+            onChange={() => onMonitorSelect(monitor.id)}
+            disabled={
+              selectedMonitors.length === 1 &&
+              selectedMonitors.includes(monitor.id)
+            }
+          />
+        ))}
+      </MonitorButtonsContainer>
+    </FilterContainer>
+  );
+};
+
+export { DestinationFilterComponent };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
new file mode 100644
index 000000000..a0e09537f
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-modal-body/index.tsx
@@ -0,0 +1,106 @@
+import React, { useMemo, useState } from 'react';
+import { SideMenu } from '@/components';
+import { useDestinationTypes } from '@/hooks';
+import { DestinationsList } from '../destinations-list';
+import { Body, Container, SideMenuWrapper } from '../styled';
+import { Divider, SectionTitle } from '@/reuseable-components';
+import { DestinationFilterComponent } from '../choose-destination-menu';
+import { StepProps, DropdownOption, DestinationTypeItem } from '@/types';
+
+interface ChooseDestinationModalBodyProps {
+  onSelect: (item: DestinationTypeItem) => void;
+}
+
+const SIDE_MENU_DATA: StepProps[] = [
+  {
+    title: 'DESTINATIONS',
+    state: 'active',
+    stepNumber: 1,
+  },
+  {
+    title: 'CONNECTION',
+    state: 'disabled',
+    stepNumber: 2,
+  },
+];
+
+const DEFAULT_MONITORS = ['logs', 'metrics', 'traces'];
+const DEFAULT_DROPDOWN_VALUE = { id: 'all', value: 'All types' };
+
+export function ChooseDestinationModalBody({
+  onSelect,
+}: ChooseDestinationModalBodyProps) {
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedMonitors, setSelectedMonitors] =
+    useState<string[]>(DEFAULT_MONITORS);
+  const [dropdownValue, setDropdownValue] = useState<DropdownOption>(
+    DEFAULT_DROPDOWN_VALUE
+  );
+
+  const { destinations } = useDestinationTypes();
+
+  function handleTagSelect(option: DropdownOption) {
+    setDropdownValue(option);
+  }
+
+  const filteredDestinations = useMemo(() => {
+    return destinations
+      .map((category) => {
+        const filteredItems = category.items.filter((item) => {
+          const matchesSearch = searchValue
+            ? item.displayName.toLowerCase().includes(searchValue.toLowerCase())
+            : true;
+
+          const matchesDropdown =
+            dropdownValue.id !== 'all'
+              ? category.name === dropdownValue.id
+              : true;
+
+          const matchesMonitor = selectedMonitors.length
+            ? selectedMonitors.some(
+                (monitor) => item.supportedSignals[monitor]?.supported
+              )
+            : true;
+
+          return matchesSearch && matchesDropdown && matchesMonitor;
+        });
+
+        return { ...category, items: filteredItems };
+      })
+      .filter((category) => category.items.length > 0); // Filter out empty categories
+  }, [destinations, searchValue, dropdownValue, selectedMonitors]);
+
+  function onMonitorSelect(monitor: string) {
+    if (selectedMonitors.includes(monitor)) {
+      setSelectedMonitors(selectedMonitors.filter((item) => item !== monitor));
+    } else {
+      setSelectedMonitors([...selectedMonitors, monitor]);
+    }
+  }
+
+  return (
+    <Container>
+      <SideMenuWrapper>
+        <SideMenu data={SIDE_MENU_DATA} currentStep={1} />
+      </SideMenuWrapper>
+      <Body>
+        <SectionTitle
+          title="Choose destination"
+          description="Add backend destination you want to connect with Odigos."
+        />
+        <DestinationFilterComponent
+          selectedTag={dropdownValue}
+          onTagSelect={handleTagSelect}
+          onSearch={setSearchValue}
+          selectedMonitors={selectedMonitors}
+          onMonitorSelect={onMonitorSelect}
+        />
+        <Divider margin="0 0 24px 0" />
+        <DestinationsList
+          items={filteredDestinations}
+          setSelectedItems={onSelect}
+        />
+      </Body>
+    </Container>
+  );
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
new file mode 100644
index 000000000..f650c2980
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -0,0 +1,199 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { ConfiguredFields } from '@/components';
+import { ConfiguredDestination } from '@/types';
+import { Divider, Text } from '@/reuseable-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  margin-top: 24px;
+  align-self: stretch;
+  height: 100%;
+  max-height: 548px;
+  overflow-y: auto;
+`;
+
+const ListItem = styled.div`
+  width: 100%;
+  border-radius: 16px;
+  background: ${({ theme }) => theme.colors.translucent_bg};
+`;
+
+const ListItemBody = styled.div`
+  width: 100%;
+  padding: 16px;
+`;
+
+const ListItemHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const DestinationIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const SignalsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const SignalText = styled(Text)`
+  color: rgba(249, 249, 249, 0.8);
+  font-size: 10px;
+  text-transform: capitalize;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+const ExpandIconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 16px;
+`;
+
+const IconBorder = styled.div`
+  height: 16px;
+  width: 1px;
+  margin-right: 12px;
+  background: ${({ theme }) => theme.colors.border};
+`;
+
+const ExpandIconWrapper = styled.div<{ expand?: boolean }>`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  transition: background 0.3s ease 0s, transform 0.3s ease 0s;
+  transform: ${({ expand }) => (expand ? 'rotate(180deg)' : 'rotate(0deg)')};
+  &:hover {
+    background: ${({ theme }) => theme.colors.translucent_bg};
+  }
+`;
+
+interface DestinationsListProps {
+  data: ConfiguredDestination[];
+}
+
+function ConfiguredDestinationsListItem({
+  item,
+}: {
+  item: ConfiguredDestination;
+}) {
+  const [expand, setExpand] = React.useState(false);
+
+  function renderSupportedSignals(item: ConfiguredDestination) {
+    const supportedSignals = item.exportedSignals;
+    const signals = Object.keys(supportedSignals);
+    const supportedSignalsList = signals.filter(
+      (signal) => supportedSignals[signal].supported
+    );
+
+    return Object.keys(supportedSignals).map(
+      (signal, index) =>
+        supportedSignals[signal] && (
+          <SignalsWrapper key={index}>
+            <Image
+              src={`/icons/monitors/${signal}.svg`}
+              alt="monitor"
+              width={10}
+              height={16}
+            />
+
+            <SignalText>{signal}</SignalText>
+            {index < supportedSignalsList.length - 1 && (
+              <SignalText>·</SignalText>
+            )}
+          </SignalsWrapper>
+        )
+    );
+  }
+
+  return (
+    <ListItem>
+      <ListItemHeader style={{ paddingBottom: expand ? 0 : 16 }}>
+        <ListItemContent>
+          <DestinationIconWrapper>
+            <Image
+              src={item.imageUrl}
+              width={20}
+              height={20}
+              alt="destination"
+            />
+          </DestinationIconWrapper>
+          <TextWrapper>
+            <Text size={14}>{item.displayName}</Text>
+            <SignalsWrapper>{renderSupportedSignals(item)}</SignalsWrapper>
+          </TextWrapper>
+        </ListItemContent>
+
+        <ExpandIconContainer>
+          <IconBorder />
+          <ExpandIconWrapper expand={expand} onClick={() => setExpand(!expand)}>
+            <Image
+              src={'/icons/common/extend-arrow.svg'}
+              width={16}
+              height={16}
+              alt="destination"
+            />
+          </ExpandIconWrapper>
+        </ExpandIconContainer>
+      </ListItemHeader>
+
+      {expand && (
+        <ListItemBody>
+          <Divider margin="0 0 16px 0" />
+          <ConfiguredFields details={item.destinationTypeDetails} />
+        </ListItemBody>
+      )}
+    </ListItem>
+  );
+}
+
+const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({
+  data,
+}) => {
+  return (
+    <Container>
+      {data.map((item) => (
+        <ConfiguredDestinationsListItem key={item.displayName} item={item} />
+      ))}
+    </Container>
+  );
+};
+
+export { ConfiguredDestinationsList };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
new file mode 100644
index 000000000..7cfbac089
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
@@ -0,0 +1,30 @@
+import { NotificationNote } from '@/reuseable-components';
+import styled from 'styled-components';
+
+export const ConnectionNotification = ({
+  showConnectionError,
+  destination,
+}) => (
+  <>
+    {showConnectionError && (
+      <NotificationNoteWrapper>
+        <NotificationNote
+          type="error"
+          text="Connection failed. Please check your input and try again."
+        />
+      </NotificationNoteWrapper>
+    )}
+    {destination?.fields && !showConnectionError && (
+      <NotificationNoteWrapper>
+        <NotificationNote
+          type="info"
+          text={`Odigos autocompleted ${destination.displayName} connection details.`}
+        />
+      </NotificationNoteWrapper>
+    )}
+  </>
+);
+
+const NotificationNoteWrapper = styled.div`
+  margin-top: 24px;
+`;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
new file mode 100644
index 000000000..71bd10c1b
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { CheckboxList, Input } from '@/reuseable-components';
+import { DynamicConnectDestinationFormFields } from '../dynamic-form-fields';
+
+export const FormContainer = ({
+  monitors,
+  dynamicFields,
+  exportedSignals,
+  destinationName,
+  handleDynamicFieldChange,
+  handleSignalChange,
+  setDestinationName,
+}) => (
+  <StyledFormContainer>
+    <CheckboxList
+      monitors={monitors}
+      title="This connection will monitor:"
+      exportedSignals={exportedSignals}
+      handleSignalChange={handleSignalChange}
+    />
+    <Input
+      title="Destination name"
+      placeholder="Enter destination name"
+      value={destinationName}
+      onChange={(e) => setDestinationName(e.target.value)}
+    />
+    <DynamicConnectDestinationFormFields
+      fields={dynamicFields}
+      onChange={handleDynamicFieldChange}
+    />
+  </StyledFormContainer>
+);
+
+const StyledFormContainer = styled.div`
+  display: flex;
+  width: 100%;
+  max-width: 500px;
+  flex-direction: column;
+  gap: 24px;
+  height: 443px;
+  overflow-y: auto;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: overlay;
+  max-height: calc(100vh - 410px);
+
+  @media (height < 768px) {
+    max-height: calc(100vh - 350px);
+  }
+`;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
new file mode 100644
index 000000000..e1954ce8e
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -0,0 +1,252 @@
+import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { useAppStore } from '@/store';
+import { INPUT_TYPES } from '@/utils';
+import { SideMenu } from '@/components';
+import { useQuery } from '@apollo/client';
+import { FormContainer } from './form-container';
+import { TestConnection } from '../test-connection';
+import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
+import { Body, Container, SideMenuWrapper } from '../styled';
+import { Divider, SectionTitle } from '@/reuseable-components';
+import { ConnectionNotification } from './connection-notification';
+import {
+  useConnectDestinationForm,
+  useConnectEnv,
+  useDestinationFormData,
+  useEditDestinationFormHandlers,
+} from '@/hooks';
+import {
+  StepProps,
+  DestinationInput,
+  DestinationTypeItem,
+  DestinationDetailsResponse,
+  ConfiguredDestination,
+} from '@/types';
+
+const SIDE_MENU_DATA: StepProps[] = [
+  {
+    title: 'DESTINATIONS',
+    state: 'finish',
+    stepNumber: 1,
+  },
+  {
+    title: 'CONNECTION',
+    state: 'active',
+    stepNumber: 2,
+  },
+];
+
+interface ConnectDestinationModalBodyProps {
+  destination: DestinationTypeItem | undefined;
+  onSubmitRef: React.MutableRefObject<(() => void) | null>;
+  onFormValidChange: (isValid: boolean) => void;
+}
+
+export function ConnectDestinationModalBody({
+  destination,
+  onSubmitRef,
+  onFormValidChange,
+}: ConnectDestinationModalBodyProps) {
+  const [destinationName, setDestinationName] = useState<string>('');
+  const [showConnectionError, setShowConnectionError] = useState(false);
+
+  const {
+    dynamicFields,
+    exportedSignals,
+    setDynamicFields,
+    setExportedSignals,
+  } = useDestinationFormData();
+
+  const { connectEnv } = useConnectEnv();
+  const { buildFormDynamicFields } = useConnectDestinationForm();
+
+  const { handleDynamicFieldChange, handleSignalChange } =
+    useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
+
+  const addConfiguredDestination = useAppStore(
+    ({ addConfiguredDestination }) => addConfiguredDestination
+  );
+
+  const { data } = useQuery<DestinationDetailsResponse>(
+    GET_DESTINATION_TYPE_DETAILS,
+    {
+      variables: { type: destination?.type },
+      skip: !destination,
+    }
+  );
+
+  useLayoutEffect(() => {
+    if (!destination) return;
+    const { logs, metrics, traces } = destination.supportedSignals;
+    setExportedSignals({
+      logs: logs.supported,
+      metrics: metrics.supported,
+      traces: traces.supported,
+    });
+  }, [destination, setExportedSignals]);
+
+  useEffect(() => {
+    if (data && destination) {
+      const df = buildFormDynamicFields(data.destinationTypeDetails.fields);
+
+      const newDynamicFields = df.map((field) => {
+        if (destination.fields && field?.name in destination.fields) {
+          return {
+            ...field,
+            value: destination.fields[field.name],
+          };
+        }
+        return field;
+      });
+
+      setDynamicFields(newDynamicFields);
+    }
+  }, [data, destination]);
+
+  useEffect(() => {
+    // Assign handleSubmit to the onSubmitRef so it can be triggered externally
+    onSubmitRef.current = handleSubmit;
+  }, [dynamicFields, destinationName, exportedSignals]);
+
+  useEffect(() => {
+    const isFormValid = dynamicFields.every((field) =>
+      field.required ? field.value : true
+    );
+    onFormValidChange(isFormValid);
+  }, [dynamicFields]);
+
+  const monitors = useMemo(() => {
+    if (!destination) return [];
+    const { logs, metrics, traces } = destination.supportedSignals;
+
+    return [
+      logs.supported && { id: 'logs', title: 'Logs' },
+      metrics.supported && { id: 'metrics', title: 'Metrics' },
+      traces.supported && { id: 'traces', title: 'Traces' },
+    ].filter(Boolean);
+  }, [destination]);
+
+  function onDynamicFieldChange(name: string, value: any) {
+    setShowConnectionError(false);
+    handleDynamicFieldChange(name, value);
+  }
+  function processFieldValue(field) {
+    return field.componentType === INPUT_TYPES.DROPDOWN
+      ? field.value.value
+      : field.value;
+  }
+
+  function processFormFields() {
+    // Prepare fields for the request body
+    return dynamicFields.map((field) => ({
+      key: field.name,
+      value: processFieldValue(field),
+    }));
+  }
+
+  async function handleSubmit() {
+    // Prepare fields for the request body
+    const fields = processFormFields();
+
+    // Function to store configured destination to display in the UI
+    function storeConfiguredDestination() {
+      const destinationTypeDetails = dynamicFields.map((field) => ({
+        title: field.title,
+        value: processFieldValue(field),
+      }));
+
+      // Add 'Destination name' as the first item
+      destinationTypeDetails.unshift({
+        title: 'Destination name',
+        value: destinationName,
+      });
+
+      // Construct the configured destination object
+      const storedDestination: ConfiguredDestination = {
+        exportedSignals,
+        destinationTypeDetails,
+        type: destination?.type || '',
+        imageUrl: destination?.imageUrl || '',
+        category: '', // Could be handled in a more dynamic way if needed
+        displayName: destination?.displayName || '',
+      };
+
+      // Dispatch action to store the destination
+      addConfiguredDestination(storedDestination);
+    }
+
+    // Prepare the request body
+    const body: DestinationInput = {
+      name: destinationName,
+      type: destination?.type || '',
+      exportedSignals,
+      fields,
+    };
+
+    try {
+      // Await connection and store the configured destination if successful
+      await connectEnv(body, storeConfiguredDestination);
+    } catch (error) {
+      console.error('Failed to submit destination configuration:', error);
+      // Handle error (e.g., show notification or alert)
+    }
+  }
+
+  if (!destination) return null;
+
+  const actionButton = useMemo(() => {
+    if (destination.testConnectionSupported) {
+      return (
+        <TestConnection
+          onError={() => {
+            setShowConnectionError(true);
+            onFormValidChange(false);
+          }}
+          destination={{
+            name: destinationName,
+            type: destination?.type || '',
+            exportedSignals,
+            fields: processFormFields(),
+          }}
+        />
+      );
+    }
+    return null;
+  }, [
+    destination,
+    destinationName,
+    exportedSignals,
+    processFormFields,
+    onFormValidChange,
+  ]);
+
+  return (
+    <Container>
+      <SideMenuWrapper>
+        <SideMenu data={SIDE_MENU_DATA} currentStep={2} />
+      </SideMenuWrapper>
+
+      <Body>
+        <SectionTitle
+          title="Create connection"
+          description="Connect selected destination with Odigos."
+          actionButton={actionButton}
+        />
+        <ConnectionNotification
+          showConnectionError={showConnectionError}
+          destination={destination}
+        />
+        <Divider margin="24px 0" />
+        <FormContainer
+          monitors={monitors}
+          dynamicFields={dynamicFields}
+          exportedSignals={exportedSignals}
+          destinationName={destinationName}
+          handleDynamicFieldChange={onDynamicFieldChange}
+          handleSignalChange={handleSignalChange}
+          setDestinationName={setDestinationName}
+        />
+      </Body>
+    </Container>
+  );
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
new file mode 100644
index 000000000..aa16aea36
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/destination-list-item/index.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { DestinationTypeItem } from '@/types';
+import { Text } from '@/reuseable-components';
+
+const HoverTextWrapper = styled.div`
+  visibility: hidden;
+`;
+
+const ListItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  transition: background 0.3s;
+  border-radius: 16px;
+  cursor: pointer;
+  background: rgba(249, 249, 249, 0.04);
+
+  &:hover {
+    background: rgba(249, 249, 249, 0.08);
+  }
+  &:last-child {
+    margin-bottom: 24px;
+  }
+
+  &:hover {
+    ${HoverTextWrapper} {
+      visibility: visible;
+    }
+  }
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const DestinationIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const SignalsWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+const SignalText = styled(Text)`
+  color: rgba(249, 249, 249, 0.8);
+  font-size: 10px;
+  text-transform: capitalize;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+const HoverText = styled(Text)`
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-transform: uppercase;
+  margin-right: 16px;
+`;
+
+interface DestinationListItemProps {
+  item: DestinationTypeItem;
+  onSelect: (item: DestinationTypeItem) => void;
+}
+
+const DestinationListItem: React.FC<DestinationListItemProps> = ({
+  item,
+  onSelect,
+}) => {
+  const renderSupportedSignals = () => {
+    const signals = Object.keys(item.supportedSignals).filter(
+      (signal) => item.supportedSignals[signal].supported
+    );
+
+    return signals.map((signal, index) => (
+      <SignalsWrapper key={index}>
+        <SignalText>{signal}</SignalText>
+        {index < signals.length - 1 && <SignalText>·</SignalText>}
+      </SignalsWrapper>
+    ));
+  };
+
+  return (
+    <ListItem onClick={() => onSelect(item)}>
+      <ListItemContent>
+        <DestinationIconWrapper>
+          <Image src={item.imageUrl} width={20} height={20} alt="destination" />
+        </DestinationIconWrapper>
+        <TextWrapper>
+          <Text size={14}>{item.displayName}</Text>
+          <SignalsWrapper>{renderSupportedSignals()}</SignalsWrapper>
+        </TextWrapper>
+      </ListItemContent>
+      <HoverTextWrapper>
+        <HoverText size={14}>{'Select'}</HoverText>
+      </HoverTextWrapper>
+    </ListItem>
+  );
+};
+
+export { DestinationListItem };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
new file mode 100644
index 000000000..88b78bc83
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { DestinationTypeItem } from '@/types';
+import { capitalizeFirstLetter } from '@/utils';
+import { DestinationListItem } from './destination-list-item';
+import { NoDataFound, SectionTitle } from '@/reuseable-components';
+import { IDestinationListItem } from '../choose-destination-modal-body';
+import { PotentialDestinationsList } from './potential-destinations-list';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  max-height: calc(100vh - 450px);
+  overflow-y: auto;
+
+  @media (height < 800px) {
+    max-height: calc(100vh - 400px);
+  }
+`;
+
+const ListsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const NoDataFoundWrapper = styled(Container)`
+  margin-top: 80px;
+`;
+
+interface DestinationsListProps {
+  items: IDestinationListItem[];
+  setSelectedItems: (item: DestinationTypeItem) => void;
+}
+
+const DestinationsList: React.FC<DestinationsListProps> = ({
+  items,
+  setSelectedItems,
+}) => {
+  function renderCategoriesList() {
+    if (!items.length) {
+      return (
+        <NoDataFoundWrapper>
+          <NoDataFound title="No destinations found" />
+        </NoDataFoundWrapper>
+      );
+    }
+
+    return items.map((item) => {
+      return (
+        <ListsWrapper>
+          <SectionTitle
+            size="small"
+            title={capitalizeFirstLetter(item.name)}
+            description={item.description}
+          />
+          {item.items.map((categoryItem) => (
+            <DestinationListItem
+              item={categoryItem}
+              onSelect={setSelectedItems}
+            />
+          ))}
+        </ListsWrapper>
+      );
+    });
+  }
+
+  return (
+    <Container>
+      <PotentialDestinationsList setSelectedItems={setSelectedItems} />
+      {renderCategoriesList()}
+    </Container>
+  );
+};
+
+export { DestinationsList };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/potential-destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/potential-destinations-list/index.tsx
new file mode 100644
index 000000000..8470f2e81
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/potential-destinations-list/index.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { DestinationTypeItem } from '@/types';
+import { usePotentialDestinations } from '@/hooks';
+import { DestinationListItem } from '../destination-list-item';
+import { SectionTitle, SkeletonLoader } from '@/reuseable-components';
+
+const ListsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+interface PotentialDestinationsListProps {
+  setSelectedItems: (item: DestinationTypeItem) => void;
+}
+
+const PotentialDestinationsList: React.FC<PotentialDestinationsListProps> = ({
+  setSelectedItems,
+}) => {
+  const { loading, data } = usePotentialDestinations();
+
+  if (!data.length) {
+    return null;
+  }
+
+  return (
+    <ListsWrapper>
+      <SectionTitle
+        size="small"
+        icon="/brand/odigos-icon.svg"
+        title="Detected by Odigos"
+        description="Odigos detects destinations for which automatic connection is available. All data will be filled out automatically."
+      />
+      {loading ? (
+        <SkeletonLoader size={1} />
+      ) : (
+        data.map((item) => (
+          <DestinationListItem
+            key={item.displayName}
+            item={item}
+            onSelect={setSelectedItems}
+          />
+        ))
+      )}
+    </ListsWrapper>
+  );
+};
+
+export { PotentialDestinationsList };
diff --git a/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
new file mode 100644
index 000000000..5c6ae04ca
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/dynamic-form-fields/index.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { INPUT_TYPES } from '@/utils';
+import {
+  Dropdown,
+  Input,
+  TextArea,
+  InputList,
+  KeyValueInputsList,
+} from '@/reuseable-components';
+
+export function DynamicConnectDestinationFormFields({
+  fields,
+  onChange,
+}: {
+  fields: any[];
+  onChange: (name: string, value: any) => void;
+}) {
+  return fields?.map((field: any) => {
+    switch (field.componentType) {
+      case INPUT_TYPES.INPUT:
+        return (
+          <Input
+            key={field.name}
+            {...field}
+            onChange={(e) => onChange(field.name, e.target.value)}
+          />
+        );
+
+      case INPUT_TYPES.DROPDOWN:
+        return (
+          <Dropdown
+            key={field.name}
+            {...field}
+            onSelect={(option) =>
+              onChange(field.name, { id: option.id, value: option.value })
+            }
+          />
+        );
+      case INPUT_TYPES.MULTI_INPUT:
+        return (
+          <InputList
+            key={field.name}
+            {...field}
+            onChange={(value: string[]) =>
+              onChange(field.name, JSON.stringify(value))
+            }
+          />
+        );
+
+      case INPUT_TYPES.KEY_VALUE_PAIR:
+        return (
+          <KeyValueInputsList
+            key={field.name}
+            {...field}
+            onChange={(value) => onChange(field.name, JSON.stringify(value))}
+          />
+        );
+      case INPUT_TYPES.TEXTAREA:
+        return (
+          <TextArea
+            key={field.name}
+            {...field}
+            onChange={(e) => onChange(field.name, e.target.value)}
+          />
+        );
+      default:
+        return null;
+    }
+  });
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
new file mode 100644
index 000000000..0312cd4bb
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { useAppStore } from '@/store';
+import styled from 'styled-components';
+import { useRouter } from 'next/navigation';
+import { AddDestinationModal } from './add-destination-modal';
+import { AddDestinationButton, SetupHeader } from '@/components';
+import { NotificationNote, SectionTitle } from '@/reuseable-components';
+import { ConfiguredDestinationsList } from './configured-destinations-list';
+
+const AddDestinationButtonWrapper = styled.div`
+  width: 100%;
+  margin-top: 24px;
+`;
+
+const ContentWrapper = styled.div`
+  width: 640px;
+  padding-top: 64px;
+`;
+
+const HeaderWrapper = styled.div`
+  width: 100vw;
+`;
+
+const NotificationNoteWrapper = styled.div`
+  margin-top: 24px;
+`;
+
+export function ChooseDestinationContainer() {
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const router = useRouter();
+
+  const sourcesList = useAppStore((state) => state.sources);
+  const destinations = useAppStore((state) => state.configuredDestinationsList);
+
+  const isSourcesListEmpty = () => {
+    const sourceLen = Object.keys(sourcesList).length === 0;
+    if (sourceLen) {
+      return true;
+    }
+
+    let empty = true;
+    for (const source in sourcesList) {
+      if (sourcesList[source].length > 0) {
+        empty = false;
+        break;
+      }
+    }
+    return empty;
+  };
+
+  const handleOpenModal = () => setModalOpen(true);
+  const handleCloseModal = () => setModalOpen(false);
+
+  return (
+    <>
+      <HeaderWrapper>
+        <SetupHeader
+          navigationButtons={[
+            {
+              label: 'BACK',
+              iconSrc: '/icons/common/arrow-white.svg',
+              onClick: () => router.back(),
+              variant: 'secondary',
+            },
+            {
+              label: 'DONE',
+              onClick: () => router.push('/main'),
+              variant: 'primary',
+            },
+          ]}
+        />
+      </HeaderWrapper>
+      <ContentWrapper>
+        <SectionTitle
+          title="Configure destinations"
+          description="Add backend destinations where collected data will be sent and configure their settings."
+        />
+        {isSourcesListEmpty() && destinations.length === 0 && (
+          <NotificationNoteWrapper>
+            <NotificationNote
+              type={'warning'}
+              text={'No sources selected.'}
+              action={{
+                label: 'Select sources',
+                onClick: () => router.push('/choose-sources'),
+              }}
+            />
+          </NotificationNoteWrapper>
+        )}
+        <AddDestinationButtonWrapper>
+          <AddDestinationButton onClick={() => handleOpenModal()} />
+        </AddDestinationButtonWrapper>
+        <ConfiguredDestinationsList data={destinations} />
+        <AddDestinationModal
+          isModalOpen={isModalOpen}
+          handleCloseModal={handleCloseModal}
+        />
+      </ContentWrapper>
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/main/destinations/add-destination/styled.ts b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
new file mode 100644
index 000000000..579e93e6d
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/styled.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const Body = styled.div`
+  padding: 32px 24px 0;
+  border-left: 1px solid rgba(249, 249, 249, 0.08);
+  min-height: 600px;
+  width: 100%;
+  min-width: 770px;
+`;
+
+export const SideMenuWrapper = styled.div`
+  padding: 32px;
+  width: 196px;
+  @media (max-width: 1050px) {
+    display: none;
+  }
+`;
+
+export const Container = styled.div`
+  display: flex;
+`;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
new file mode 100644
index 000000000..48da795ca
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
@@ -0,0 +1,80 @@
+import Image from 'next/image';
+import styled from 'styled-components';
+import React, { useState } from 'react';
+import { DestinationInput } from '@/types';
+import { useTestConnection } from '@/hooks';
+import { Button, FadeLoader, Text } from '@/reuseable-components';
+
+interface TestConnectionProps {
+  destination: DestinationInput | undefined;
+  onError?: () => void;
+}
+
+const ActionButton = styled(Button)<{ isTestConnectionSuccess?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: ${({ isTestConnectionSuccess }) =>
+    isTestConnectionSuccess ? 'rgba(129, 175, 101, 0.16)' : 'transparent'};
+`;
+
+const ActionButtonText = styled(Text)<{ isTestConnectionSuccess?: boolean }>`
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-weight: 500;
+  text-decoration: underline;
+  text-transform: uppercase;
+  font-size: 14px;
+  line-height: 157.143%;
+  color: ${({ theme, isTestConnectionSuccess }) =>
+    isTestConnectionSuccess ? '#81AF65' : theme.colors.white};
+`;
+
+const TestConnection: React.FC<TestConnectionProps> = ({
+  destination,
+  onError,
+}) => {
+  const [isTestConnectionSuccess, setIsTestConnectionSuccess] =
+    useState<boolean>(false);
+  const { testConnection, loading, error } = useTestConnection();
+
+  const onButtonClick = async () => {
+    if (!destination) {
+      return;
+    }
+
+    const res = await testConnection(destination);
+    if (res) {
+      setIsTestConnectionSuccess(res.succeeded);
+      !res.succeeded && onError && onError();
+    }
+  };
+  return (
+    <ActionButton
+      variant={'secondary'}
+      onClick={onButtonClick}
+      isTestConnectionSuccess={isTestConnectionSuccess}
+    >
+      {isTestConnectionSuccess && (
+        <Image
+          alt="checkmark"
+          src="/icons/common/connection-succeeded.svg"
+          width={16}
+          height={16}
+        />
+      )}
+      {loading && <FadeLoader />}
+      <ActionButtonText
+        isTestConnectionSuccess={isTestConnectionSuccess}
+        size={14}
+      >
+        {loading
+          ? 'Checking'
+          : isTestConnectionSuccess
+          ? 'Connection ok'
+          : 'Test Connection'}
+      </ActionButtonText>
+    </ActionButton>
+  );
+};
+
+export { TestConnection };
diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
new file mode 100644
index 000000000..fa354eeb9
--- /dev/null
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -0,0 +1,99 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import styled from 'styled-components';
+import { ExportedSignals } from '@/types';
+import { CardDetails, EditDestinationForm } from '@/components';
+import {
+  useDestinationFormData,
+  useEditDestinationFormHandlers,
+} from '@/hooks';
+
+export type DestinationDrawerHandle = {
+  getCurrentData: () => {
+    type: string;
+    exportedSignals: ExportedSignals;
+    fields: { key: string; value: any }[];
+  };
+};
+
+interface DestinationDrawerProps {
+  isEditing: boolean;
+}
+
+const DestinationDrawer = forwardRef<
+  DestinationDrawerHandle,
+  DestinationDrawerProps
+>(({ isEditing }, ref) => {
+  const [isFormDirty, setIsFormDirty] = useState(false);
+  const {
+    cardData,
+    dynamicFields,
+    exportedSignals,
+    supportedSignals,
+    destinationType,
+    resetFormData,
+    setDynamicFields,
+    setExportedSignals,
+  } = useDestinationFormData();
+
+  const { handleSignalChange, handleDynamicFieldChange } =
+    useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
+
+  useEffect(() => {
+    if (!isEditing && isFormDirty) {
+      setIsFormDirty(false);
+      resetFormData();
+    }
+  }, [isEditing]);
+
+  const onDynamicFieldChange = (name: string, value: any) => {
+    handleDynamicFieldChange(name, value);
+    setIsFormDirty(true);
+  };
+
+  const onSignalChange = (signal: keyof ExportedSignals, value: boolean) => {
+    handleSignalChange(signal, value);
+    setIsFormDirty(true);
+  };
+
+  useImperativeHandle(ref, () => ({
+    getCurrentData: () => ({
+      type: destinationType,
+      exportedSignals,
+      fields: dynamicFields.map(({ name, value }) => ({ key: name, value })),
+    }),
+  }));
+
+  return isEditing ? (
+    <FormContainer>
+      <EditDestinationForm
+        dynamicFields={dynamicFields}
+        exportedSignals={exportedSignals}
+        supportedSignals={supportedSignals}
+        handleSignalChange={onSignalChange}
+        handleDynamicFieldChange={onDynamicFieldChange}
+      />
+    </FormContainer>
+  ) : (
+    <CardDetails data={cardData} />
+  );
+});
+
+export { DestinationDrawer };
+
+const FormContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 24px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: overlay;
+  max-height: calc(100vh - 220px);
+`;
diff --git a/frontend/webapp/containers/main/destinations/index.tsx b/frontend/webapp/containers/main/destinations/index.tsx
index 8dd9a55e6..4decd49fc 100644
--- a/frontend/webapp/containers/main/destinations/index.tsx
+++ b/frontend/webapp/containers/main/destinations/index.tsx
@@ -1 +1,3 @@
 export * from './managed';
+export * from './add-destination';
+export * from './destination-drawer-container';
diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
new file mode 100644
index 000000000..f158c2a93
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useRef, useCallback } from 'react';
+import Image from 'next/image';
+import theme from '@/styles/theme';
+import { AddActionModal } from '../../actions';
+import styled, { css } from 'styled-components';
+import { useActualSources, useOnClickOutside } from '@/hooks';
+import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
+import { Button, FadeLoader, Text } from '@/reuseable-components';
+import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal';
+import { AddDestinationModal } from '../../destinations/add-destination/add-destination-modal';
+
+// Styled components for the dropdown UI
+const Container = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 100px;
+`;
+
+const DropdownListContainer = styled.div`
+  position: absolute;
+  right: 0;
+  top: 48px;
+  border-radius: 24px;
+  width: 131px;
+  overflow-y: auto;
+  background-color: ${({ theme }) => theme.colors.dropdown_bg};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  z-index: 9999;
+  padding: 12px;
+`;
+
+const DropdownItem = styled.div<{ isSelected: boolean }>`
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 24px;
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  &:hover {
+    background: ${({ theme }) => theme.colors.white_opacity['008']};
+  }
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      background: rgba(68, 74, 217, 0.24);
+    `}
+`;
+
+const ButtonText = styled(Text)`
+  color: ${({ theme }) => theme.text.primary};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-weight: 600;
+`;
+
+// Default options for the dropdown
+const DEFAULT_OPTIONS: DropdownOption[] = [
+  { id: 'source', value: 'Source' },
+  { id: 'action', value: 'Action' },
+  { id: 'destination', value: 'Destination' },
+];
+
+interface AddEntityButtonDropdownProps {
+  options?: DropdownOption[];
+  placeholder?: string;
+}
+
+const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
+  options = DEFAULT_OPTIONS,
+  placeholder = 'ADD...',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [currentModal, setCurrentModal] = useState<string>('');
+
+  const { isPolling, createSourcesForNamespace, persistNamespaceItems } =
+    useActualSources();
+
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleSelect = useCallback((option: DropdownOption) => {
+    setCurrentModal(option.id);
+    setIsOpen(false);
+  }, []);
+
+  const handleCloseModal = useCallback(() => {
+    setCurrentModal('');
+  }, []);
+
+  return (
+    <Container ref={dropdownRef}>
+      <StyledButton onClick={handleToggle}>
+        {isPolling ? (
+          <FadeLoader color={theme.colors.primary} />
+        ) : (
+          <Image
+            src="/icons/common/plus-black.svg"
+            width={16}
+            height={16}
+            alt="Add"
+          />
+        )}
+        <ButtonText size={14}>{placeholder}</ButtonText>
+      </StyledButton>
+      {isOpen && (
+        <DropdownListContainer>
+          {options.map((option) => (
+            <DropdownItem
+              key={option.id}
+              isSelected={false}
+              onClick={() => handleSelect(option)}
+            >
+              <Image
+                src={`/icons/overview/${option.id}s.svg`}
+                width={16}
+                height={16}
+                alt={`Add ${option.value}`}
+              />
+              <Text size={14}>{option.value}</Text>
+            </DropdownItem>
+          ))}
+        </DropdownListContainer>
+      )}
+      <AddSourceModal
+        isOpen={currentModal === OVERVIEW_ENTITY_TYPES.SOURCE}
+        onClose={handleCloseModal}
+        createSourcesForNamespace={createSourcesForNamespace}
+        persistNamespaceItems={persistNamespaceItems}
+      />
+      <AddDestinationModal
+        isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.DESTINATION}
+        handleCloseModal={handleCloseModal}
+      />
+      <AddActionModal
+        isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.ACTION}
+        handleCloseModal={handleCloseModal}
+      />
+    </Container>
+  );
+};
+
+export { AddEntityButtonDropdown };
diff --git a/frontend/webapp/containers/main/overview/index.ts b/frontend/webapp/containers/main/overview/index.ts
index a5200cb12..69be1eacf 100644
--- a/frontend/webapp/containers/main/overview/index.ts
+++ b/frontend/webapp/containers/main/overview/index.ts
@@ -1 +1,2 @@
 export * from './data.flow';
+export * from './overview-data-flow';
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
new file mode 100644
index 000000000..eb1237421
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Input, TabList } from '@/reuseable-components';
+import { AddEntityButtonDropdown } from '../add-entity';
+import { DropdownOption } from '@/types';
+
+const MenuContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+`;
+
+const SearchInputContainer = styled.div`
+  width: 200px;
+`;
+
+const DividerContainer = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: 24px;
+  background-color: ${({ theme }) => theme.colors.card};
+  margin: 0 16px;
+`;
+
+// Aligns the AddEntityButtonDropdown to the right
+const StyledAddEntityButtonDropdownWrapper = styled.div`
+  margin-left: auto;
+`;
+
+export function OverviewActionMenuContainer() {
+  const [searchFilter, setSearchFilter] = useState<string>('');
+
+  return (
+    <MenuContainer>
+      <TabList />
+      <DividerContainer>
+        <Divider />
+      </DividerContainer>
+      <SearchInputContainer>
+        <Input
+          placeholder="Search "
+          icon={'/icons/common/search.svg'}
+          value={searchFilter}
+          onChange={(e) => setSearchFilter(e.target.value)}
+        />
+      </SearchInputContainer>
+      <StyledAddEntityButtonDropdownWrapper>
+        <AddEntityButtonDropdown />
+      </StyledAddEntityButtonDropdownWrapper>
+    </MenuContainer>
+  );
+}
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
new file mode 100644
index 000000000..233bf6711
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -0,0 +1,56 @@
+'use client';
+import React, { useMemo } from 'react';
+import dynamic from 'next/dynamic';
+import styled from 'styled-components';
+import { OverviewActionMenuContainer } from '../overview-actions-menu';
+import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
+import {
+  useGetActions,
+  useActualSources,
+  useContainerWidth,
+  useActualDestination,
+  useNodeDataFlowHandlers,
+} from '@/hooks';
+
+const OverviewDrawer = dynamic(() => import('../overview-drawer'), {
+  ssr: false,
+});
+
+export const OverviewDataFlowWrapper = styled.div`
+  width: calc(100% - 64px);
+  height: calc(100vh - 176px);
+  position: relative;
+`;
+
+export function OverviewDataFlowContainer() {
+  const { actions } = useGetActions();
+  const { sources } = useActualSources();
+  const { destinations } = useActualDestination();
+  const { containerRef, containerWidth } = useContainerWidth();
+  const { handleNodeClick } = useNodeDataFlowHandlers(sources, destinations);
+
+  const columnWidth = 296;
+
+  // Memoized node and edge builder to improve performance
+  const { nodes, edges } = useMemo(() => {
+    return buildNodesAndEdges({
+      sources,
+      actions,
+      destinations,
+      columnWidth,
+      containerWidth,
+    });
+  }, [sources, actions, destinations, columnWidth, containerWidth]);
+
+  return (
+    <OverviewDataFlowWrapper ref={containerRef}>
+      <OverviewDrawer />
+      <OverviewActionMenuContainer />
+      <NodeBaseDataFlow
+        nodes={nodes}
+        edges={edges}
+        onNodeClick={handleNodeClick}
+      />
+    </OverviewDataFlowWrapper>
+  );
+}
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
new file mode 100644
index 000000000..bfee78959
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-footer/index.tsx
@@ -0,0 +1,95 @@
+// DrawerFooter.tsx
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import styled, { css } from 'styled-components';
+import { Button, Text } from '@/reuseable-components';
+
+interface DrawerFooterProps {
+  onSave: () => void;
+  onCancel: () => void;
+  onDelete: () => void;
+}
+
+const DrawerFooter: React.FC<DrawerFooterProps> = ({
+  onSave,
+  onCancel,
+  onDelete,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Trigger animation on mount
+    setIsVisible(true);
+  }, []);
+
+  return (
+    <FooterContainer isVisible={isVisible}>
+      <LeftButtonsWrapper>
+        <FooterButton variant="primary" onClick={onSave}>
+          <ButtonText variant="primary">Save</ButtonText>
+        </FooterButton>
+        <FooterButton variant="secondary" onClick={onCancel}>
+          <ButtonText>Cancel</ButtonText>
+        </FooterButton>
+      </LeftButtonsWrapper>
+      <FooterButton
+        style={{ width: 100 }}
+        variant="tertiary"
+        onClick={onDelete}
+      >
+        <Image
+          src="/icons/common/trash.svg"
+          alt="Delete"
+          width={16}
+          height={16}
+        />
+        <ButtonText variant="tertiary">Delete</ButtonText>
+      </FooterButton>
+    </FooterContainer>
+  );
+};
+
+export default DrawerFooter;
+
+const FooterContainer = styled.div<{ isVisible: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  padding: 24px 18px 24px 32px;
+  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  border-top: 1px solid rgba(249, 249, 249, 0.24);
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+
+  ${({ isVisible }) =>
+    isVisible &&
+    css`
+      opacity: 1;
+      transform: translateY(0);
+    `}
+`;
+
+const LeftButtonsWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const FooterButton = styled(Button)`
+  width: 140px;
+  gap: 8px;
+`;
+
+const ButtonText = styled(Text)<{
+  variant?: 'primary' | 'secondary' | 'tertiary';
+}>`
+  color: ${({ theme, variant }) =>
+    variant === 'primary'
+      ? theme.text.primary
+      : variant === 'tertiary'
+      ? theme.text.error
+      : theme.text.secondary};
+  font-size: 14px;
+  font-weight: 600;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  width: fit-content;
+`;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
new file mode 100644
index 000000000..dd8492c6e
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
@@ -0,0 +1,122 @@
+// DrawerHeader.tsx
+import React, { useEffect, useState, forwardRef } from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Button, Input, Text } from '@/reuseable-components';
+
+const HeaderContainer = styled.section`
+  display: flex;
+  height: 76px;
+  padding: 0px 32px;
+  justify-content: space-between;
+  flex-shrink: 0;
+  align-self: stretch;
+  border-bottom: 1px solid rgba(249, 249, 249, 0.24);
+`;
+
+const SectionItemsWrapper = styled.div<{ gap?: number }>`
+  display: flex;
+  align-items: center;
+  gap: ${({ gap }) => gap || 16}px;
+`;
+
+const InputWrapper = styled(SectionItemsWrapper)`
+  width: 75%;
+`;
+
+const Title = styled(Text)`
+  font-size: 18px;
+  line-height: 26px;
+`;
+
+const DrawerItemImageWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const EditButton = styled(Button)`
+  gap: 8px;
+`;
+
+const CloseButton = styled(Button)``;
+
+const ButtonText = styled(Text)`
+  font-size: 14px;
+  font-weight: 600;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+  text-transform: uppercase;
+  width: fit-content;
+`;
+
+interface DrawerHeaderProps {
+  title: string;
+  imageUri: string;
+  onClose: () => void;
+  isEditing: boolean;
+  setIsEditing: (isEditing: boolean) => void;
+}
+
+const DrawerHeader = forwardRef<HTMLInputElement, DrawerHeaderProps>(
+  ({ title, imageUri, isEditing, setIsEditing, onClose }, ref) => {
+    const [inputValue, setInputValue] = useState(title);
+
+    useEffect(() => {
+      setInputValue(title);
+    }, [title]);
+
+    return (
+      <HeaderContainer>
+        <SectionItemsWrapper>
+          <DrawerItemImageWrapper>
+            <Image src={imageUri} alt="Drawer Item" width={16} height={16} />
+          </DrawerItemImageWrapper>
+          {!isEditing && <Title>{title}</Title>}
+        </SectionItemsWrapper>
+        {isEditing && (
+          <InputWrapper>
+            <Input
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              autoFocus
+              ref={ref}
+            />
+          </InputWrapper>
+        )}
+        <SectionItemsWrapper gap={8}>
+          {!isEditing && (
+            <EditButton variant="tertiary" onClick={() => setIsEditing(true)}>
+              <Image
+                src="/icons/common/edit.svg"
+                alt="Edit"
+                width={16}
+                height={16}
+              />
+              <ButtonText>Edit</ButtonText>
+            </EditButton>
+          )}
+          <CloseButton variant="secondary" onClick={onClose}>
+            <Image
+              src="/icons/common/x.svg"
+              alt="Close"
+              width={11}
+              height={10}
+            />
+          </CloseButton>
+        </SectionItemsWrapper>
+      </HeaderContainer>
+    );
+  }
+);
+
+export default DrawerHeader;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
new file mode 100644
index 000000000..64d6bbda8
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -0,0 +1,233 @@
+import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { useDrawerStore } from '@/store';
+import DrawerHeader from './drawer-header';
+import DrawerFooter from './drawer-footer';
+import { SourceDrawer } from '../../sources';
+import { Drawer } from '@/reuseable-components';
+import { DeleteEntityModal } from '@/components';
+import { useActualSources, useUpdateDestination } from '@/hooks';
+import { DestinationDrawer, DestinationDrawerHandle } from '../../destinations';
+import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+import {
+  WorkloadId,
+  K8sActualSource,
+  ActualDestination,
+  isActualDestination,
+  OVERVIEW_ENTITY_TYPES,
+  PatchSourceRequestInput,
+} from '@/types';
+
+const componentMap = {
+  source: SourceDrawer,
+  action: () => <div>Action</div>,
+  destination: ({ isEditing }: { isEditing: boolean }) => (
+    <DestinationDrawer isEditing={isEditing} />
+  ),
+};
+
+const DRAWER_WIDTH = '560px';
+
+const OverviewDrawer = () => {
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const setDrawerItem = useDrawerStore(
+    ({ setSelectedItem }) => setSelectedItem
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const [title, setTitle] = useState(selectedItem?.item?.name || '');
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  const { updateExistingDestination } = useUpdateDestination();
+  const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
+
+  const titleRef = useRef<HTMLInputElement>(null);
+  const destinationDrawerRef = useRef<DestinationDrawerHandle>(null);
+
+  useEffect(initialTitle, [selectedItem]);
+
+  //TODO: split file to separate components by type: source, destination, action
+
+  function initialTitle() {
+    if (
+      selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
+      selectedItem.item
+    ) {
+      const title = (selectedItem.item as K8sActualSource).reportedName;
+      setTitle(title || '');
+    } else if (
+      selectedItem?.type === OVERVIEW_ENTITY_TYPES.DESTINATION &&
+      selectedItem.item
+    ) {
+      const title = (selectedItem.item as ActualDestination).name;
+      setTitle(title || '');
+    } else {
+      setTitle('');
+    }
+  }
+
+  const handleSave = async () => {
+    if (selectedItem?.type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
+      if (destinationDrawerRef.current && titleRef.current) {
+        const name = titleRef.current.value;
+        const destinationData = {
+          ...destinationDrawerRef.current.getCurrentData(),
+          name,
+        };
+        try {
+          await updateExistingDestination(
+            selectedItem.id as string,
+            destinationData
+          );
+        } catch (error) {
+          console.error('Error updating destination:', error);
+        }
+        setIsEditing(false);
+      }
+    }
+
+    if (selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE) {
+      if (titleRef.current) {
+        const newTitle = titleRef.current.value;
+        setTitle(newTitle);
+        if (
+          selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
+          selectedItem.item
+        ) {
+          const sourceItem = selectedItem.item as K8sActualSource;
+
+          const sourceId: WorkloadId = {
+            namespace: sourceItem.namespace,
+            kind: sourceItem.kind,
+            name: sourceItem.name,
+          };
+
+          const patchRequest: PatchSourceRequestInput = {
+            reportedName: newTitle,
+          };
+
+          try {
+            await updateActualSource(sourceId, patchRequest);
+          } catch (error) {
+            console.error('Error updating source:', error);
+          }
+        }
+      }
+      setIsEditing(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    initialTitle();
+  };
+
+  const handleClose = () => {
+    setIsEditing(false);
+    setDrawerItem(null);
+    setIsDeleteModalOpen(false);
+  };
+
+  const handleDelete = async () => {
+    if (
+      selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
+      selectedItem.item
+    ) {
+      const sourceItem = selectedItem.item as K8sActualSource;
+
+      try {
+        await deleteSourcesForNamespace(sourceItem.namespace, [
+          {
+            kind: sourceItem.kind,
+            name: sourceItem.name,
+            selected: false,
+          },
+        ]);
+        handleClose();
+      } catch (error) {
+        console.error('Error deleting source:', error);
+      }
+    }
+    setDrawerItem(null); // Close the drawer on delete
+  };
+
+  const handleCloseDeleteModal = () => {
+    setIsDeleteModalOpen(false);
+  };
+
+  if (!selectedItem) return null;
+
+  const SpecificComponent = componentMap[selectedItem.type];
+
+  return SpecificComponent ? (
+    <>
+      <Drawer
+        isOpen
+        onClose={handleClose}
+        width={DRAWER_WIDTH}
+        closeOnEscape={!isDeleteModalOpen}
+      >
+        <DrawerContent>
+          <DrawerHeader
+            ref={titleRef}
+            title={title}
+            onClose={isEditing ? handleCancel : handleClose}
+            imageUri={
+              selectedItem?.item ? getItemImageByType(selectedItem?.item) : ''
+            }
+            {...{ isEditing, setIsEditing }}
+          />
+          <ContentArea>
+            {selectedItem.type === OVERVIEW_ENTITY_TYPES.DESTINATION ? (
+              <DestinationDrawer
+                ref={destinationDrawerRef}
+                isEditing={isEditing}
+              />
+            ) : (
+              <SpecificComponent isEditing={isEditing} />
+            )}
+          </ContentArea>
+          {isEditing && (
+            <>
+              <DrawerFooter
+                onSave={handleSave}
+                onCancel={handleCancel}
+                onDelete={() => setIsDeleteModalOpen(true)}
+              />
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+      <DeleteEntityModal
+        title={title}
+        isModalOpen={isDeleteModalOpen}
+        handleDelete={handleDelete}
+        handleCloseModal={handleCloseDeleteModal}
+        description="Are you sure you want to delete this source?"
+      />
+    </>
+  ) : null;
+};
+
+function getItemImageByType(item: K8sActualSource | ActualDestination): string {
+  if (isActualDestination(item)) {
+    // item is of type ActualDestination
+    return item.destinationType.imageUrl;
+  } else {
+    // item is of type K8sActualSource
+    return getMainContainerLanguageLogo(item as K8sActualSource);
+  }
+}
+
+export default OverviewDrawer;
+
+const DrawerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const ContentArea = styled.div`
+  flex-grow: 1;
+  padding: 24px 32px;
+  overflow-y: auto;
+`;
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
new file mode 100644
index 000000000..44c566f2c
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
@@ -0,0 +1,99 @@
+import React, { useState, useCallback } from 'react';
+import styled from 'styled-components';
+import { Modal, NavigationButtons } from '@/reuseable-components';
+import { K8sActualSource, PersistNamespaceItemInput } from '@/types';
+import { useConnectSourcesMenuState } from '@/hooks';
+import { ChooseSourcesBody } from '../choose-sources-body';
+
+const ChooseSourcesBodyWrapper = styled.div`
+  width: 1080px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+
+interface AddSourceModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  createSourcesForNamespace: (
+    namespaceName: string,
+    sources: { kind: string; name: string; selected: boolean }[]
+  ) => Promise<void>;
+  persistNamespaceItems: (
+    namespaceItems: PersistNamespaceItemInput[]
+  ) => Promise<void>;
+}
+
+export const AddSourceModal: React.FC<AddSourceModalProps> = ({
+  isOpen,
+  onClose,
+  createSourcesForNamespace,
+  persistNamespaceItems,
+}) => {
+  const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
+  const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
+    sourcesList,
+  });
+
+  const handleNextClick = useCallback(async () => {
+    try {
+      const namespaceItems: PersistNamespaceItemInput[] = Object.entries(
+        stateMenu.futureAppsCheckbox
+      ).map(([namespaceName, futureSelected]) => ({
+        name: namespaceName,
+        futureSelected,
+      }));
+
+      await persistNamespaceItems(namespaceItems);
+
+      await Promise.all(
+        Object.entries(stateMenu.selectedItems).map(
+          async ([namespaceName, sources]) => {
+            const formattedSources = sources.map((source) => ({
+              kind: source.kind,
+              name: source.name,
+              selected: true,
+            }));
+            await createSourcesForNamespace(namespaceName, formattedSources);
+          }
+        )
+      );
+
+      onClose();
+    } catch (error) {
+      console.error('Error during handleNextClick:', error);
+    }
+  }, [createSourcesForNamespace, persistNamespaceItems, stateMenu, onClose]);
+
+  const ModalActionComponent = (
+    <NavigationButtons
+      buttons={[
+        {
+          label: 'DONE',
+          onClick: handleNextClick,
+          variant: 'primary',
+        },
+      ]}
+    />
+  );
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      header={{ title: 'Add Source' }}
+      actionComponent={ModalActionComponent}
+      onClose={onClose}
+    >
+      <ChooseSourcesBodyWrapper>
+        <ChooseSourcesBody
+          isModal
+          stateMenu={stateMenu}
+          sourcesList={sourcesList}
+          stateHandlers={stateHandlers}
+          setSourcesList={setSourcesList}
+        />
+      </ChooseSourcesBodyWrapper>
+    </Modal>
+  );
+};
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
new file mode 100644
index 000000000..5e7e28d2e
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import styled from 'styled-components';
+import { K8sActualSource } from '@/types';
+import { useConnectSourcesList } from '@/hooks';
+import { SourcesList } from '../choose-sources-list';
+import { SectionTitle, Divider } from '@/reuseable-components';
+import {
+  SearchAndDropdown,
+  TogglesAndCheckboxes,
+} from '../choose-sources-menu';
+import {
+  SearchDropdownState,
+  ToggleCheckboxState,
+  SearchDropdownHandlers,
+  ToggleCheckboxHandlers,
+} from '../choose-sources-menu/type';
+
+const ContentWrapper = styled.div`
+  width: 660px;
+  padding-top: 64px;
+`;
+
+const SourcesListWrapper = styled.div<{ isModal: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  padding-bottom: ${({ isModal }) => (isModal ? '48px' : '0')};
+  max-height: ${({ isModal }) =>
+    isModal ? 'calc(100vh - 548px)' : 'calc(100vh - 360px)'};
+  overflow-y: auto;
+`;
+
+interface ChooseSourcesContentProps {
+  stateMenu: any;
+  isModal?: boolean;
+  stateHandlers: any;
+  sourcesList: K8sActualSource[];
+  setSourcesList: React.Dispatch<React.SetStateAction<K8sActualSource[]>>;
+}
+
+const ChooseSourcesBody: React.FC<ChooseSourcesContentProps> = ({
+  stateMenu,
+  isModal = false,
+  sourcesList,
+  stateHandlers,
+  setSourcesList,
+}) => {
+  const { namespacesList } = useConnectSourcesList({
+    stateMenu,
+    setSourcesList,
+  });
+
+  function getVisibleSources() {
+    const allSources = sourcesList || [];
+    const filteredSources = stateMenu.searchFilter
+      ? stateHandlers.filterSources(allSources)
+      : allSources;
+
+    return stateMenu.showSelectedOnly
+      ? filteredSources.filter((source) =>
+          stateMenu.selectedOption
+            ? (
+                stateMenu.selectedItems[stateMenu.selectedOption.value] || []
+              ).find((selectedItem) => selectedItem.name === source.name)
+            : false
+        )
+      : filteredSources;
+  }
+
+  const toggleCheckboxState: ToggleCheckboxState = {
+    selectedAppsCount: stateMenu.selectedOption
+      ? (stateMenu.selectedItems[stateMenu.selectedOption.value] || []).length
+      : 0,
+    selectAllCheckbox: stateMenu.selectAllCheckbox,
+    showSelectedOnly: stateMenu.showSelectedOnly,
+    futureAppsCheckbox:
+      stateMenu.futureAppsCheckbox[stateMenu.selectedOption?.value || ''] ||
+      false,
+  };
+
+  const toggleCheckboxHandlers: ToggleCheckboxHandlers = {
+    setSelectAllCheckbox: stateMenu.setSelectAllCheckbox,
+    setShowSelectedOnly: stateMenu.setShowSelectedOnly,
+    setFutureAppsCheckbox: (value: boolean) => {
+      stateMenu.setFutureAppsCheckbox({
+        ...stateMenu.futureAppsCheckbox,
+        [stateMenu.selectedOption?.value || '']: value,
+      });
+    },
+  };
+
+  const searchDropdownState: SearchDropdownState = {
+    selectedOption: stateMenu.selectedOption,
+    searchFilter: stateMenu.searchFilter,
+  };
+
+  const searchDropdownHandlers: SearchDropdownHandlers = {
+    setSelectedOption: stateMenu.setSelectedOption,
+    setSearchFilter: stateMenu.setSearchFilter,
+  };
+
+  return (
+    <ContentWrapper>
+      <SectionTitle
+        title="Choose sources"
+        description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
+      />
+      <SearchAndDropdown
+        state={searchDropdownState}
+        handlers={searchDropdownHandlers}
+        dropdownOptions={namespacesList}
+      />
+      <Divider margin="16px 0" />
+      <TogglesAndCheckboxes
+        state={toggleCheckboxState}
+        handlers={toggleCheckboxHandlers}
+      />
+      <Divider margin="16px 0 24px" />
+      <SourcesListWrapper isModal={isModal}>
+        <SourcesList
+          selectedItems={
+            stateMenu.selectedOption
+              ? stateMenu.selectedItems[stateMenu.selectedOption.value] || []
+              : []
+          }
+          setSelectedItems={stateHandlers.handleSelectItem}
+          items={getVisibleSources()}
+        />
+      </SourcesListWrapper>
+    </ContentWrapper>
+  );
+};
+
+export { ChooseSourcesBody };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
new file mode 100644
index 000000000..7f2d9df5a
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-list/index.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { K8sActualSource } from '@/types';
+import { Checkbox, NoDataFound, Text } from '@/reuseable-components';
+
+const ListItem = styled.div<{ selected: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 16px 0px;
+  transition: background 0.3s;
+  border-radius: 16px;
+
+  cursor: pointer;
+  background: ${({ selected }) =>
+    selected ? 'rgba(68, 74, 217, 0.24)' : 'rgba(249, 249, 249, 0.04)'};
+
+  &:hover {
+    background: ${({ selected }) =>
+      selected ? 'rgba(68, 74, 217, 0.40)' : 'rgba(249, 249, 249, 0.08)'};
+  }
+`;
+
+const ListItemContent = styled.div`
+  margin-left: 16px;
+  display: flex;
+  gap: 12px;
+`;
+
+const SourceIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+const SelectedTextWrapper = styled.div`
+  margin-right: 24px;
+`;
+
+const NoDataFoundWrapper = styled.div`
+  margin-top: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  max-height: calc(100vh - 360px);
+  overflow-y: auto;
+`;
+
+interface SourcesListProps {
+  items: K8sActualSource[];
+  selectedItems: K8sActualSource[];
+  setSelectedItems: (item: K8sActualSource) => void;
+}
+
+const SourcesList: React.FC<SourcesListProps> = ({
+  items,
+  selectedItems,
+  setSelectedItems,
+}) => {
+  function isItemSelected(item: K8sActualSource) {
+    const selected = selectedItems.find(
+      (selectedItem) => selectedItem.name === item.name
+    );
+    return !!selected;
+  }
+
+  if (!items.length) {
+    return (
+      <NoDataFoundWrapper>
+        <NoDataFound title="No sources found" />
+      </NoDataFoundWrapper>
+    );
+  }
+
+  return (
+    <>
+      {items.map((item) => (
+        <ListItem
+          key={item.name}
+          selected={isItemSelected(item)}
+          onClick={() => setSelectedItems(item)}
+        >
+          <ListItemContent>
+            <SourceIconWrapper>
+              <Image
+                src={'/icons/common/folder.svg'}
+                width={20}
+                height={20}
+                alt="source"
+              />
+            </SourceIconWrapper>
+            <TextWrapper>
+              <Text>{item.name}</Text>
+              <Text opacity={0.8} size={10}>
+                {item.numberOfInstances} running instances · {item.kind}
+              </Text>
+            </TextWrapper>
+          </ListItemContent>
+          {isItemSelected(item) && (
+            <SelectedTextWrapper>
+              <Checkbox initialValue={true} />
+            </SelectedTextWrapper>
+          )}
+        </ListItem>
+      ))}
+    </>
+  );
+};
+
+export { SourcesList };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/index.ts b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/index.ts
new file mode 100644
index 000000000..892c7ba07
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/index.ts
@@ -0,0 +1,2 @@
+export * from './search-and-dropdown';
+export * from './toggles-and-checkboxes';
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
new file mode 100644
index 000000000..c9270f250
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/search-and-dropdown.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SearchDropdownProps } from './type';
+import { Input, Dropdown } from '@/reuseable-components';
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-top: 24px;
+`;
+
+const SearchAndDropdown: React.FC<SearchDropdownProps> = ({
+  state,
+  handlers,
+  dropdownOptions,
+}) => {
+  const { selectedOption, searchFilter } = state;
+  const { setSelectedOption, setSearchFilter } = handlers;
+
+  return (
+    <Container>
+      <Input
+        placeholder="Search for sources"
+        icon={'/icons/common/search.svg'}
+        value={searchFilter}
+        onChange={(e) => setSearchFilter(e.target.value)}
+      />
+      <Dropdown
+        options={dropdownOptions}
+        value={selectedOption}
+        onSelect={setSelectedOption}
+      />
+    </Container>
+  );
+};
+
+export { SearchAndDropdown };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
new file mode 100644
index 000000000..6e52797ef
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/toggles-and-checkboxes.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Counter, Toggle, Checkbox } from '@/reuseable-components';
+import { ToggleCheckboxHandlers, ToggleCheckboxState } from './type';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 32px;
+`;
+
+type ToggleCheckboxProps = {
+  state: ToggleCheckboxState;
+  handlers: ToggleCheckboxHandlers;
+};
+
+const TogglesAndCheckboxes: React.FC<ToggleCheckboxProps> = ({
+  state,
+  handlers,
+}) => {
+  const {
+    selectedAppsCount,
+    selectAllCheckbox,
+    showSelectedOnly,
+    futureAppsCheckbox,
+  } = state;
+
+  const { setSelectAllCheckbox, setShowSelectedOnly, setFutureAppsCheckbox } =
+    handlers;
+  return (
+    <Container>
+      <Counter value={selectedAppsCount} title="Selected apps" />
+      <ToggleWrapper>
+        <Toggle
+          title="Select all"
+          initialValue={selectAllCheckbox}
+          onChange={setSelectAllCheckbox}
+        />
+        <Toggle
+          title="Show selected only"
+          initialValue={showSelectedOnly}
+          onChange={setShowSelectedOnly}
+        />
+        <Checkbox
+          title="Future apps"
+          tooltip="Automatically instrument all future apps"
+          initialValue={futureAppsCheckbox}
+          onChange={setFutureAppsCheckbox}
+        />
+      </ToggleWrapper>
+    </Container>
+  );
+};
+
+export { TogglesAndCheckboxes };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/type.ts b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/type.ts
new file mode 100644
index 000000000..530473dd8
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-menu/type.ts
@@ -0,0 +1,30 @@
+import { DropdownOption } from '@/types';
+
+export type ToggleCheckboxState = {
+  selectedAppsCount: number;
+  selectAllCheckbox: boolean;
+  showSelectedOnly: boolean;
+  futureAppsCheckbox: boolean;
+};
+
+export type ToggleCheckboxHandlers = {
+  setSelectAllCheckbox: (value: boolean) => void;
+  setShowSelectedOnly: (value: boolean) => void;
+  setFutureAppsCheckbox: (value: boolean) => void;
+};
+
+export type SearchDropdownState = {
+  selectedOption: DropdownOption | undefined;
+  searchFilter: string;
+};
+
+export type SearchDropdownHandlers = {
+  setSelectedOption: (option: DropdownOption) => void;
+  setSearchFilter: (search: string) => void;
+};
+
+export type SearchDropdownProps = {
+  state: SearchDropdownState;
+  handlers: SearchDropdownHandlers;
+  dropdownOptions: DropdownOption[];
+};
diff --git a/frontend/webapp/containers/main/sources/choose-sources/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
new file mode 100644
index 000000000..61a8a1e4a
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/choose-sources/index.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useAppStore } from '@/store';
+import { K8sActualSource } from '@/types';
+import { SetupHeader } from '@/components';
+import { useRouter } from 'next/navigation';
+import { useConnectSourcesMenuState } from '@/hooks';
+import { ChooseSourcesBody } from './choose-sources-body';
+
+const HeaderWrapper = styled.div`
+  width: 100vw;
+`;
+export function ChooseSourcesContainer() {
+  const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
+
+  const { setSources, setNamespaceFutureSelectAppsList } = useAppStore();
+  const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
+    sourcesList,
+  });
+
+  const router = useRouter();
+
+  function onNextClick() {
+    const { selectedOption, selectedItems, futureAppsCheckbox } = stateMenu;
+    if (selectedOption) {
+      setSources(selectedItems);
+      setNamespaceFutureSelectAppsList(futureAppsCheckbox);
+    }
+    router.push('/choose-destination');
+  }
+
+  return (
+    <>
+      <HeaderWrapper>
+        <SetupHeader
+          navigationButtons={[
+            {
+              label: 'NEXT',
+              iconSrc: '/icons/common/arrow-black.svg',
+              onClick: () => onNextClick(),
+              variant: 'primary',
+            },
+          ]}
+        />
+      </HeaderWrapper>
+      <ChooseSourcesBody
+        stateMenu={stateMenu}
+        stateHandlers={stateHandlers}
+        sourcesList={sourcesList}
+        setSourcesList={setSourcesList}
+      />
+    </>
+  );
+}
diff --git a/frontend/webapp/containers/main/sources/index.ts b/frontend/webapp/containers/main/sources/index.ts
index 0a28eb6b8..9194ff6c7 100644
--- a/frontend/webapp/containers/main/sources/index.ts
+++ b/frontend/webapp/containers/main/sources/index.ts
@@ -1,3 +1,6 @@
 export * from './managed';
 export * from './choose.sources';
+export * from './choose-sources';
 export * from './edit.source';
+export * from './choose-sources/choose-sources-body';
+export * from './source-drawer-container';
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
new file mode 100644
index 000000000..3676e2d43
--- /dev/null
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { useDrawerStore } from '@/store';
+import { K8sActualSource } from '@/types';
+import { CardDetails } from '@/components';
+
+const SourceDrawer: React.FC = () => {
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+
+  const cardData = useMemo(() => {
+    if (!selectedItem) return [];
+
+    // Destructure necessary fields from the selected item
+    const { name, kind, namespace, instrumentedApplicationDetails } =
+      selectedItem.item as K8sActualSource;
+
+    // Extract the first container and condition if available
+    const container = instrumentedApplicationDetails?.containers?.[0];
+
+    return [
+      { title: 'Name', value: name || 'N/A' },
+      { title: 'Kind', value: kind || 'N/A' },
+      { title: 'Namespace', value: namespace || 'N/A' },
+      { title: 'Container Name', value: container?.containerName || 'N/A' },
+      { title: 'Language', value: container?.language || 'N/A' },
+    ];
+  }, [selectedItem]);
+
+  return <CardDetails data={cardData} />;
+};
+
+export { SourceDrawer };
diff --git a/frontend/webapp/containers/setup/sources/index.tsx b/frontend/webapp/containers/setup/sources/index.tsx
index 5c24abd55..8acea23ae 100644
--- a/frontend/webapp/containers/setup/sources/index.tsx
+++ b/frontend/webapp/containers/setup/sources/index.tsx
@@ -1,18 +1,17 @@
 'use client';
 import React, { useEffect } from 'react';
 import { ROUTES } from '@/utils';
-import { setSources } from '@/store';
+import { useAppStore } from '@/store';
 import { useSectionData } from '@/hooks';
 import { useRouter } from 'next/navigation';
 import { KeyvalCard } from '@/design.system';
 import { SourcesSection } from './sources.section';
-import { useDispatch, useSelector } from 'react-redux';
 import { ChooseSourcesHeader } from '@/components/setup/headers';
 export function ChooseSourcesContainer() {
   const router = useRouter();
 
-  const dispatch = useDispatch();
-  const selectedSources = useSelector(({ app }) => app.sources);
+  const selectedSources = useAppStore((state) => state.sources);
+  const setSources = useAppStore((state) => state.setSources);
 
   const { sectionData, setSectionData, totalSelected } = useSectionData({});
 
@@ -23,7 +22,7 @@ export function ChooseSourcesContainer() {
   }
 
   async function onNextClick() {
-    dispatch(setSources(sectionData));
+    setSources(sectionData);
     router.push(ROUTES.CHOOSE_DESTINATION);
   }
 
diff --git a/frontend/webapp/graphql/index.ts b/frontend/webapp/graphql/index.ts
new file mode 100644
index 000000000..d0720956a
--- /dev/null
+++ b/frontend/webapp/graphql/index.ts
@@ -0,0 +1,2 @@
+export * from './queries';
+export * from './mutations';
diff --git a/frontend/webapp/graphql/mutations/destination.ts b/frontend/webapp/graphql/mutations/destination.ts
new file mode 100644
index 000000000..cdce52cfa
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/destination.ts
@@ -0,0 +1,52 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_DESTINATION = gql`
+  mutation CreateNewDestination($destination: DestinationInput!) {
+    createNewDestination(destination: $destination) {
+      id
+    }
+  }
+`;
+
+export const TEST_CONNECTION_MUTATION = gql`
+  mutation TestConnection($destination: DestinationInput!) {
+    testConnectionForDestination(destination: $destination) {
+      succeeded
+      statusCode
+      destinationType
+      message
+      reason
+    }
+  }
+`;
+
+export const UPDATE_DESTINATION = gql`
+  mutation UpdateDestination($id: ID!, $destination: DestinationInput!) {
+    updateDestination(id: $id, destination: $destination) {
+      id
+      name
+      exportedSignals {
+        traces
+        metrics
+        logs
+      }
+      fields
+      destinationType {
+        type
+        displayName
+        imageUrl
+        supportedSignals {
+          traces {
+            supported
+          }
+          metrics {
+            supported
+          }
+          logs {
+            supported
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/mutations/index.ts b/frontend/webapp/graphql/mutations/index.ts
new file mode 100644
index 000000000..77b8f63f9
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/index.ts
@@ -0,0 +1,3 @@
+export * from './destination';
+export * from './source';
+export * from './namespace';
diff --git a/frontend/webapp/graphql/mutations/namespace.ts b/frontend/webapp/graphql/mutations/namespace.ts
new file mode 100644
index 000000000..86b525867
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/namespace.ts
@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const PERSIST_NAMESPACE = gql`
+  mutation PersistNamespace($namespace: PersistNamespaceItemInput!) {
+    persistK8sNamespace(namespace: $namespace)
+  }
+`;
diff --git a/frontend/webapp/graphql/mutations/source.ts b/frontend/webapp/graphql/mutations/source.ts
new file mode 100644
index 000000000..647258dd6
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/source.ts
@@ -0,0 +1,22 @@
+import { gql } from '@apollo/client';
+
+export const PERSIST_SOURCE = gql`
+  mutation PersistSources(
+    $namespace: String!
+    $sources: [PersistNamespaceSourceInput!]!
+  ) {
+    persistK8sSources(namespace: $namespace, sources: $sources)
+  }
+`;
+
+export const UPDATE_K8S_ACTUAL_SOURCE = gql`
+  mutation UpdateK8sActualSource(
+    $sourceId: K8sSourceId!
+    $patchSourceRequest: PatchSourceRequestInput!
+  ) {
+    updateK8sActualSource(
+      sourceId: $sourceId
+      patchSourceRequest: $patchSourceRequest
+    )
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
new file mode 100644
index 000000000..b833920f4
--- /dev/null
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -0,0 +1,78 @@
+import { gql } from '@apollo/client';
+
+export const GET_COMPUTE_PLATFORM = gql`
+  query GetComputePlatform {
+    computePlatform {
+      k8sActualSources {
+        name
+        kind
+        namespace
+        numberOfInstances
+        reportedName
+        instrumentedApplicationDetails {
+          containers {
+            containerName
+            language
+          }
+          conditions {
+            type
+            status
+            message
+          }
+        }
+      }
+      destinations {
+        id
+        name
+        fields
+        exportedSignals {
+          logs
+          metrics
+          traces
+        }
+        destinationType {
+          type
+          imageUrl
+          displayName
+          supportedSignals {
+            logs {
+              supported
+            }
+            metrics {
+              supported
+            }
+            traces {
+              supported
+            }
+          }
+        }
+      }
+      actions {
+        type
+        spec
+      }
+      k8sActualNamespaces {
+        name
+      }
+    }
+  }
+`;
+
+export const GET_NAMESPACES = gql`
+  query GetK8sActualNamespace(
+    $namespaceName: String!
+    $instrumentationLabeled: Boolean
+  ) {
+    computePlatform {
+      k8sActualNamespace(name: $namespaceName) {
+        name
+        instrumentationLabelEnabled
+        k8sActualSources(instrumentationLabeled: $instrumentationLabeled) {
+          kind
+          name
+          numberOfInstances
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/config.ts b/frontend/webapp/graphql/queries/config.ts
new file mode 100644
index 000000000..aea46dda4
--- /dev/null
+++ b/frontend/webapp/graphql/queries/config.ts
@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+// Define the GraphQL query
+export const GET_CONFIG = gql`
+  query GetConfig {
+    config {
+      installation
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/destination.ts b/frontend/webapp/graphql/queries/destination.ts
new file mode 100644
index 000000000..1bc8a05d9
--- /dev/null
+++ b/frontend/webapp/graphql/queries/destination.ts
@@ -0,0 +1,51 @@
+import { gql } from '@apollo/client';
+
+export const GET_DESTINATION_TYPE = gql`
+  query GetDestinationType {
+    destinationTypes {
+      categories {
+        name
+        items {
+          type
+          testConnectionSupported
+          displayName
+          imageUrl
+          supportedSignals {
+            logs {
+              supported
+            }
+            metrics {
+              supported
+            }
+            traces {
+              supported
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const GET_DESTINATION_TYPE_DETAILS = gql`
+  query GetDestinationTypeDetails($type: String!) {
+    destinationTypeDetails(type: $type) {
+      fields {
+        name
+        displayName
+        componentType
+        componentProperties
+        initialValue
+      }
+    }
+  }
+`;
+
+export const GET_POTENTIAL_DESTINATIONS = gql`
+  query GetPotentialDestinations {
+    potentialDestinations {
+      type
+      fields
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/index.ts b/frontend/webapp/graphql/queries/index.ts
new file mode 100644
index 000000000..498bd90f5
--- /dev/null
+++ b/frontend/webapp/graphql/queries/index.ts
@@ -0,0 +1,3 @@
+export * from './config';
+export * from './compute-platform';
+export * from './destination';
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 292f46b54..7fd95ef9d 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,2 +1,3 @@
 export * from './useActionState';
 export * from './useActions';
+export * from './useGetActions';
diff --git a/frontend/webapp/hooks/actions/useGetActions.ts b/frontend/webapp/hooks/actions/useGetActions.ts
new file mode 100644
index 000000000..f4e0ebd1a
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useGetActions.ts
@@ -0,0 +1,10 @@
+import { useComputePlatform } from '../compute-platform';
+
+// Define the hook
+export const useGetActions = () => {
+  const { data } = useComputePlatform();
+
+  return {
+    actions: data?.computePlatform.actions || [], // Return the actions or an empty array if not available
+  };
+};
diff --git a/frontend/webapp/hooks/common/index.ts b/frontend/webapp/hooks/common/index.ts
new file mode 100644
index 000000000..e536761bd
--- /dev/null
+++ b/frontend/webapp/hooks/common/index.ts
@@ -0,0 +1 @@
+export * from './useContainerWidth';
diff --git a/frontend/webapp/hooks/common/useContainerWidth.ts b/frontend/webapp/hooks/common/useContainerWidth.ts
new file mode 100644
index 000000000..9ea9c601b
--- /dev/null
+++ b/frontend/webapp/hooks/common/useContainerWidth.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState, useRef } from 'react';
+
+export function useContainerWidth() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(
+          containerRef.current.getBoundingClientRect().width - 64
+        );
+      }
+    };
+
+    updateWidth();
+
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, []);
+
+  return { containerRef, containerWidth };
+}
diff --git a/frontend/webapp/hooks/compute-platform/index.ts b/frontend/webapp/hooks/compute-platform/index.ts
new file mode 100644
index 000000000..6023020f7
--- /dev/null
+++ b/frontend/webapp/hooks/compute-platform/index.ts
@@ -0,0 +1,2 @@
+export * from './useComputePlatform';
+export * from './useNamespace';
diff --git a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
new file mode 100644
index 000000000..1ebcc42b0
--- /dev/null
+++ b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
@@ -0,0 +1,17 @@
+import { ComputePlatform } from '@/types';
+import { useQuery } from '@apollo/client';
+import { GET_COMPUTE_PLATFORM } from '@/graphql';
+
+type UseComputePlatformHook = {
+  data?: ComputePlatform;
+  loading: boolean;
+  error?: Error;
+  refetch: () => void;
+};
+
+export const useComputePlatform = (): UseComputePlatformHook => {
+  const { data, loading, error, refetch } =
+    useQuery<ComputePlatform>(GET_COMPUTE_PLATFORM);
+
+  return { data, loading, error, refetch };
+};
diff --git a/frontend/webapp/hooks/compute-platform/useNamespace.ts b/frontend/webapp/hooks/compute-platform/useNamespace.ts
new file mode 100644
index 000000000..ef83e1b97
--- /dev/null
+++ b/frontend/webapp/hooks/compute-platform/useNamespace.ts
@@ -0,0 +1,44 @@
+import { useMutation, useQuery } from '@apollo/client';
+import { GET_NAMESPACES, PERSIST_NAMESPACE } from '@/graphql';
+import {
+  ComputePlatform,
+  K8sActualNamespace,
+  PersistNamespaceItemInput,
+} from '@/types';
+
+type UseNamespaceHook = {
+  data?: K8sActualNamespace;
+  loading: boolean;
+  error?: Error;
+  persistNamespace: (namespace: PersistNamespaceItemInput) => Promise<void>;
+};
+
+export const useNamespace = (
+  namespaceName: string | undefined,
+  instrumentationLabeled = null as boolean | null
+): UseNamespaceHook => {
+  const { data, loading, error } = useQuery<ComputePlatform>(GET_NAMESPACES, {
+    skip: !namespaceName,
+    variables: { namespaceName, instrumentationLabeled },
+    fetchPolicy: 'cache-first',
+  });
+
+  const [persistNamespaceMutation] = useMutation(PERSIST_NAMESPACE);
+
+  const persistNamespace = async (namespace: PersistNamespaceItemInput) => {
+    try {
+      await persistNamespaceMutation({
+        variables: { namespace },
+      });
+    } catch (e) {
+      console.error('Error persisting namespace:', e);
+    }
+  };
+
+  return {
+    persistNamespace,
+    data: data?.computePlatform.k8sActualNamespace,
+    loading,
+    error,
+  };
+};
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index fda969335..73ea9289f 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -1,2 +1,10 @@
 export * from './useDestinations';
-export * from './useCheckConnection';
+export * from './useTestConnection';
+export * from './useConnectDestinationForm';
+export * from './useCreateDestination';
+export * from './usePotentialDestinations';
+export * from './useActualDestinations';
+export * from './useUpdateDestination';
+export * from './useDestinationFormData';
+export * from './useEditDestinationFormHandlers';
+export * from './useDestinationTypes';
diff --git a/frontend/webapp/hooks/destinations/useActualDestinations.ts b/frontend/webapp/hooks/destinations/useActualDestinations.ts
new file mode 100644
index 000000000..0cdf41d05
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useActualDestinations.ts
@@ -0,0 +1,32 @@
+import { useComputePlatform } from '../compute-platform';
+import { ActualDestination } from '@/types';
+
+// Function to map raw data to the ActualDestination interface
+const mapToActualDestination = (data: any): ActualDestination => ({
+  id: data.id,
+  name: data.name,
+  type: data.type,
+  exportedSignals: data.exportedSignals,
+  fields: data.fields,
+  conditions: data.conditions,
+  destinationType: {
+    type: data.destinationType.type,
+    displayName: data.destinationType.displayName,
+    imageUrl: data.destinationType.imageUrl,
+    supportedSignals: data.destinationType.supportedSignals,
+  },
+});
+
+export const useActualDestination = () => {
+  const { data } = useComputePlatform();
+
+  // Use the mapToActualDestination function to transform raw data
+  const destinations =
+    data?.computePlatform.destinations.map((destination: any) =>
+      mapToActualDestination(destination)
+    ) || [];
+
+  return {
+    destinations,
+  };
+};
diff --git a/frontend/webapp/hooks/destinations/useCheckConnection.ts b/frontend/webapp/hooks/destinations/useCheckConnection.ts
deleted file mode 100644
index 52b9e6624..000000000
--- a/frontend/webapp/hooks/destinations/useCheckConnection.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { AxiosError } from 'axios';
-import { useMutation } from 'react-query';
-import { checkConnection } from '@/services';
-
-export function useCheckConnection() {
-  const { mutateAsync, isLoading } = useMutation(checkConnection);
-
-  const checkDestinationConnection = async (body, callback) => {
-    try {
-      await mutateAsync(body, {
-        onSuccess: (res) =>
-          callback({
-            enabled: true,
-            message: res.message,
-          }),
-        onError: (error: AxiosError) =>
-          callback({
-            enabled: false,
-            message: 'Please check your input and try again.',
-          }),
-      });
-    } catch (error) {}
-  };
-
-  return {
-    isLoading,
-    checkDestinationConnection,
-  };
-}
diff --git a/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
new file mode 100644
index 000000000..7e8c989b8
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useConnectDestinationForm.ts
@@ -0,0 +1,87 @@
+import { safeJsonParse, INPUT_TYPES } from '@/utils';
+import { DestinationDetailsField, DynamicField } from '@/types';
+
+export function useConnectDestinationForm() {
+  function buildFormDynamicFields(
+    fields: DestinationDetailsField[]
+  ): DynamicField[] {
+    return fields
+      .map((field) => {
+        const {
+          name,
+          componentType,
+          displayName,
+          componentProperties,
+          initialValue,
+        } = field;
+
+        let componentPropertiesJson;
+        let initialValuesJson;
+        switch (componentType) {
+          case INPUT_TYPES.DROPDOWN:
+            componentPropertiesJson = safeJsonParse<{ [key: string]: string }>(
+              componentProperties,
+              {}
+            );
+
+            const options = Object.entries(componentPropertiesJson.values).map(
+              ([key, value]) => ({
+                id: key,
+                value,
+              })
+            );
+
+            return {
+              name,
+              componentType,
+              title: displayName,
+              onSelect: () => {},
+              options,
+              placeholder: 'Select an option',
+              ...componentPropertiesJson,
+            };
+
+          case INPUT_TYPES.INPUT:
+          case INPUT_TYPES.TEXTAREA:
+            componentPropertiesJson = safeJsonParse<string[]>(
+              componentProperties,
+              []
+            );
+            return {
+              name,
+              componentType,
+              title: displayName,
+              ...componentPropertiesJson,
+            };
+
+          case INPUT_TYPES.MULTI_INPUT:
+            componentPropertiesJson = safeJsonParse<string[]>(
+              componentProperties,
+              []
+            );
+            initialValuesJson = safeJsonParse<string[]>(initialValue, []);
+
+            return {
+              name,
+              componentType,
+              title: displayName,
+              initialValues: initialValuesJson,
+              value: initialValuesJson,
+              ...componentPropertiesJson,
+            };
+          case INPUT_TYPES.KEY_VALUE_PAIR:
+            return {
+              name,
+              componentType,
+              title: displayName,
+              ...componentPropertiesJson,
+            };
+          default:
+            return undefined;
+        }
+      })
+      .filter((field): field is DynamicField => field !== undefined);
+  }
+
+  return { buildFormDynamicFields };
+}
diff --git a/frontend/webapp/hooks/destinations/useCreateDestination.ts b/frontend/webapp/hooks/destinations/useCreateDestination.ts
new file mode 100644
index 000000000..95b9186fa
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useCreateDestination.ts
@@ -0,0 +1,21 @@
+import { DestinationInput } from '@/types';
+import { CREATE_DESTINATION } from '@/graphql';
+import { useMutation } from '@apollo/client';
+
+export function useCreateDestination() {
+  const [createDestination] = useMutation(CREATE_DESTINATION);
+
+  async function createNewDestination(destination: DestinationInput) {
+    try {
+      const { data } = await createDestination({
+        variables: { destination },
+      });
+      return data?.createNewDestination?.id;
+    } catch (error) {
+      console.error('Error creating new destination:', error);
+      throw error;
+    }
+  }
+
+  return { createNewDestination };
+}
diff --git a/frontend/webapp/hooks/destinations/useDestinationFormData.ts b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
new file mode 100644
index 000000000..bba30a780
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
@@ -0,0 +1,165 @@
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { safeJsonParse } from '@/utils';
+import { useDrawerStore } from '@/store';
+import { useQuery } from '@apollo/client';
+import { useConnectDestinationForm } from '@/hooks';
+import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
+import {
+  DynamicField,
+  ActualDestination,
+  isActualDestination,
+  DestinationDetailsResponse,
+  SupportedDestinationSignals,
+} from '@/types';
+
+const DEFAULT_SUPPORTED_SIGNALS: SupportedDestinationSignals = {
+  logs: { supported: false },
+  metrics: { supported: false },
+  traces: { supported: false },
+};
+
+export function useDestinationFormData() {
+  const [dynamicFields, setDynamicFields] = useState<DynamicField[]>([]);
+  const [exportedSignals, setExportedSignals] = useState({
+    logs: false,
+    metrics: false,
+    traces: false,
+  });
+  const [supportedSignals, setSupportedSignals] =
+    useState<SupportedDestinationSignals>(DEFAULT_SUPPORTED_SIGNALS);
+
+  const destination = useDrawerStore(({ selectedItem }) => selectedItem);
+  const shouldSkip = !isActualDestination(destination?.item);
+  const destinationType = isActualDestination(destination?.item)
+    ? destination.item.destinationType.type
+    : null;
+
+  const { buildFormDynamicFields } = useConnectDestinationForm();
+
+  const { data: destinationFields } = useQuery<DestinationDetailsResponse>(
+    GET_DESTINATION_TYPE_DETAILS,
+    { variables: { type: destinationType }, skip: shouldSkip }
+  );
+
+  // Memoize the buildFormDynamicFields to ensure it's stable across renders
+  const memoizedBuildFormDynamicFields = useCallback(
+    buildFormDynamicFields,
+    []
+  );
+
+  const initialDynamicFieldsRef = useRef<DynamicField[]>([]);
+  const initialExportedSignalsRef = useRef({
+    logs: false,
+    metrics: false,
+    traces: false,
+  });
+  const initialSupportedSignalsRef = useRef<SupportedDestinationSignals>(
+    DEFAULT_SUPPORTED_SIGNALS
+  );
+
+  useEffect(() => {
+    if (destinationFields && isActualDestination(destination?.item)) {
+      const { fields, exportedSignals, destinationType } = destination.item;
+      const destinationTypeDetails = destinationFields.destinationTypeDetails;
+
+      const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
+      const formFields = memoizedBuildFormDynamicFields(
+        destinationTypeDetails?.fields || []
+      );
+
+      const df = formFields.map((field) => {
+        let fieldValue: any = parsedFields[field.name] || '';
+
+        // Check if fieldValue is a JSON string that needs stringifying
+        try {
+          const parsedValue = JSON.parse(fieldValue);
+          console.log({ parsedValue });
+          if (Array.isArray(parsedValue)) {
+            // If it's an array, stringify it for setting the value
+            fieldValue = parsedValue;
+          }
+        } catch (e) {
+          // If parsing fails, it's not JSON, so we keep it as is
+        }
+
+        return {
+          ...field,
+          value: fieldValue,
+        };
+      });
+
+      setDynamicFields(df);
+      setExportedSignals(exportedSignals);
+      setSupportedSignals(destinationType.supportedSignals);
+
+      initialDynamicFieldsRef.current = df;
+      initialExportedSignalsRef.current = exportedSignals;
+      initialSupportedSignalsRef.current = destinationType.supportedSignals;
+    }
+  }, [destinationFields, destination, memoizedBuildFormDynamicFields]);
+
+  const cardData = useMemo(() => {
+    if (
+      shouldSkip ||
+      !isActualDestination(destination?.item) ||
+      !destinationFields
+    ) {
+      return [
+        { title: 'Error', value: 'No destination selected or data missing' },
+      ];
+    }
+
+    const { exportedSignals, destinationType, fields } = destination.item;
+    const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
+    const destinationDetails = destinationFields.destinationTypeDetails?.fields;
+    const fieldsData = buildDestinationFieldData(
+      parsedFields,
+      destinationDetails
+    );
+
+    return [
+      { title: 'Destination', value: destinationType.displayName || 'N/A' },
+      { title: 'Monitors', value: buildMonitorsList(exportedSignals) },
+      ...fieldsData,
+    ];
+  }, [shouldSkip, destination, destinationFields]);
+
+  // Reset function using initial values from refs
+  const resetFormData = useCallback(() => {
+    setDynamicFields(initialDynamicFieldsRef.current);
+    setExportedSignals(initialExportedSignalsRef.current);
+    setSupportedSignals(initialSupportedSignalsRef.current);
+  }, []);
+
+  return {
+    cardData,
+    dynamicFields,
+    destinationType: destinationType || '',
+    exportedSignals,
+    supportedSignals,
+    setExportedSignals,
+    setDynamicFields,
+    resetFormData,
+  };
+}
+
+function buildDestinationFieldData(
+  parsedFields: Record<string, string>,
+  fieldDetails?: { name: string; displayName: string }[]
+) {
+  return Object.entries(parsedFields).map(([key, value]) => ({
+    title:
+      fieldDetails?.find((field) => field.name === key)?.displayName || key,
+    value: value || 'N/A',
+  }));
+}
+
+function buildMonitorsList(
+  exportedSignals: ActualDestination['exportedSignals']
+): string {
+  return (
+    Object.keys(exportedSignals)
+      .filter((key) => exportedSignals[key] && key !== '__typename')
+      .join(', ') || 'None'
+  );
+}
diff --git a/frontend/webapp/hooks/destinations/useDestinationTypes.ts b/frontend/webapp/hooks/destinations/useDestinationTypes.ts
new file mode 100644
index 000000000..ed6ae8265
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useDestinationTypes.ts
@@ -0,0 +1,36 @@
+import { useQuery } from '@apollo/client';
+import { useEffect, useState } from 'react';
+import { GET_DESTINATION_TYPE } from '@/graphql';
+import { DestinationsCategory, GetDestinationTypesResponse } from '@/types';
+
+const CATEGORIES_DESCRIPTION = {
+  managed: 'Effortless Monitoring with Scalable Performance Management',
+  'self hosted':
+    'Full Control and Customization for Advanced Application Monitoring',
+};
+
+export interface IDestinationListItem extends DestinationsCategory {
+  description: string;
+}
+
+export function useDestinationTypes() {
+  const [destinations, setDestinations] = useState<IDestinationListItem[]>([]);
+  const { data } = useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
+
+  useEffect(() => {
+    if (data) {
+      const destinationsCategories = data.destinationTypes.categories.map(
+        (category) => {
+          return {
+            name: category.name,
+            description: CATEGORIES_DESCRIPTION[category.name],
+            items: category.items,
+          };
+        }
+      );
+      setDestinations(destinationsCategories);
+    }
+  }, [data]);
+
+  return { destinations };
+}
diff --git a/frontend/webapp/hooks/destinations/useEditDestinationFormHandlers.ts b/frontend/webapp/hooks/destinations/useEditDestinationFormHandlers.ts
new file mode 100644
index 000000000..330b1390f
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useEditDestinationFormHandlers.ts
@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from 'react';
+import { DynamicField, ExportedSignals } from '@/types';
+
+export function useEditDestinationFormHandlers(
+  setExportedSignals: Dispatch<SetStateAction<ExportedSignals>>,
+  setDynamicFields: Dispatch<SetStateAction<DynamicField[]>>
+) {
+  const handleSignalChange = (
+    signal: keyof ExportedSignals,
+    value: boolean
+  ) => {
+    setExportedSignals((prev) => ({ ...prev, [signal]: value }));
+  };
+
+  const handleDynamicFieldChange = (name: string, value: any) => {
+    setDynamicFields((prev) =>
+      prev.map((field) => (field.name === name ? { ...field, value } : field))
+    );
+  };
+
+  return { handleSignalChange, handleDynamicFieldChange };
+}
diff --git a/frontend/webapp/hooks/destinations/usePotentialDestinations.ts b/frontend/webapp/hooks/destinations/usePotentialDestinations.ts
new file mode 100644
index 000000000..d4ab2d837
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/usePotentialDestinations.ts
@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { useQuery } from '@apollo/client';
+import { GetDestinationTypesResponse } from '@/types';
+import { GET_DESTINATION_TYPE, GET_POTENTIAL_DESTINATIONS } from '@/graphql';
+
+interface DestinationDetails {
+  type: string;
+  fields: string;
+}
+
+interface GetPotentialDestinationsData {
+  potentialDestinations: DestinationDetails[];
+}
+
+export const usePotentialDestinations = () => {
+  const { data: destinationTypesData } =
+    useQuery<GetDestinationTypesResponse>(GET_DESTINATION_TYPE);
+  const { loading, error, data } = useQuery<GetPotentialDestinationsData>(
+    GET_POTENTIAL_DESTINATIONS
+  );
+
+  const mappedPotentialDestinations = useMemo(() => {
+    if (!destinationTypesData || !data) return [];
+
+    // Create a deep copy of destination types to manipulate
+    const destinationTypesCopy = JSON.parse(
+      JSON.stringify(destinationTypesData.destinationTypes.categories)
+    );
+
+    // Map over the potential destinations
+    return data.potentialDestinations.map((destination) => {
+      for (const category of destinationTypesCopy) {
+        const index = category.items.findIndex(
+          (item) => item.type === destination.type
+        );
+        if (index !== -1) {
+          // Spread the matched destination type data into the potential destination
+          const matchedType = category.items[index];
+          category.items.splice(index, 1); // Remove the matched item from destination types
+          return {
+            ...destination,
+            ...matchedType,
+            fields: safeJsonParse<{ [key: string]: string }>(
+              destination.fields,
+              {}
+            ),
+          };
+        }
+      }
+      return destination;
+    });
+  }, [destinationTypesData, data]);
+
+  return {
+    loading,
+    error,
+    data: mappedPotentialDestinations,
+  };
+};
diff --git a/frontend/webapp/hooks/destinations/useTestConnection.ts b/frontend/webapp/hooks/destinations/useTestConnection.ts
new file mode 100644
index 000000000..a5838db92
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useTestConnection.ts
@@ -0,0 +1,42 @@
+import { DestinationInput } from '@/types';
+import { useMutation } from '@apollo/client';
+import { TEST_CONNECTION_MUTATION } from '@/graphql';
+
+interface TestConnectionResponse {
+  succeeded: boolean;
+  statusCode: number;
+  destinationType: string;
+  message: string;
+  reason: string;
+}
+
+interface UseTestConnectionResult {
+  testConnection: (
+    destination: DestinationInput
+  ) => Promise<TestConnectionResponse | undefined>;
+  loading: boolean;
+  error?: Error;
+}
+
+export const useTestConnection = (): UseTestConnectionResult => {
+  const [testConnectionMutation, { loading, error }] = useMutation<
+    { testConnectionForDestination: TestConnectionResponse },
+    { destination: DestinationInput }
+  >(TEST_CONNECTION_MUTATION);
+
+  const testConnection = async (
+    destination: DestinationInput
+  ): Promise<TestConnectionResponse | undefined> => {
+    try {
+      const { data } = await testConnectionMutation({
+        variables: { destination },
+      });
+      return data?.testConnectionForDestination;
+    } catch (err) {
+      console.error('Error testing connection:', err);
+      return undefined;
+    }
+  };
+
+  return { testConnection, loading, error };
+};
diff --git a/frontend/webapp/hooks/destinations/useUpdateDestination.ts b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
new file mode 100644
index 000000000..d060dc42e
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
@@ -0,0 +1,33 @@
+// src/hooks/useUpdateDestination.ts
+
+import { UPDATE_DESTINATION } from '@/graphql';
+import { useDrawerStore } from '@/store';
+import { DestinationInput } from '@/types';
+import { useMutation } from '@apollo/client';
+
+export function useUpdateDestination() {
+  const [updateDestinationMutation] = useMutation(UPDATE_DESTINATION);
+
+  const setDrawerItem = useDrawerStore(
+    ({ setSelectedItem }) => setSelectedItem
+  );
+
+  async function updateExistingDestination(
+    id: string,
+    destination: DestinationInput
+  ) {
+    try {
+      const { data } = await updateDestinationMutation({
+        variables: { id, destination },
+      });
+      setDrawerItem({ id, item: data?.updateDestination, type: 'destination' });
+      console.log({ data });
+      return data?.updateDestination?.id;
+    } catch (error) {
+      console.error('Error updating destination:', error);
+      throw error;
+    }
+  }
+
+  return { updateExistingDestination };
+}
diff --git a/frontend/webapp/hooks/index.tsx b/frontend/webapp/hooks/index.tsx
index 5a9bee729..7a13a1c78 100644
--- a/frontend/webapp/hooks/index.tsx
+++ b/frontend/webapp/hooks/index.tsx
@@ -7,5 +7,9 @@ export * from './destinations';
 export * from './actions';
 export * from './useNotify';
 export * from './useSSE';
+export * from './new-config';
+export * from './compute-platform';
 export * from './useOverviewMetrics';
+export * from './overview';
+export * from './common';
 export * from './instrumentation-rules';
diff --git a/frontend/webapp/hooks/new-config/index.ts b/frontend/webapp/hooks/new-config/index.ts
new file mode 100644
index 000000000..4852f577a
--- /dev/null
+++ b/frontend/webapp/hooks/new-config/index.ts
@@ -0,0 +1 @@
+export * from './useConfig';
diff --git a/frontend/webapp/hooks/new-config/useConfig.ts b/frontend/webapp/hooks/new-config/useConfig.ts
new file mode 100644
index 000000000..4f262c758
--- /dev/null
+++ b/frontend/webapp/hooks/new-config/useConfig.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { Config } from '@/types';
+import { GET_CONFIG } from '@/graphql';
+import { useSuspenseQuery } from '@apollo/client';
+
+export const useConfig = () => {
+  const { data, error } = useSuspenseQuery<Config>(GET_CONFIG);
+
+  useEffect(() => {
+    if (error) {
+      console.error('Error fetching config:', error);
+    }
+  }, [error]);
+
+  return { data: data?.config, error };
+};
diff --git a/frontend/webapp/hooks/overview/index.tsx b/frontend/webapp/hooks/overview/index.tsx
new file mode 100644
index 000000000..45e0d2258
--- /dev/null
+++ b/frontend/webapp/hooks/overview/index.tsx
@@ -0,0 +1 @@
+export * from './useNodeDataFlowHandlers';
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
new file mode 100644
index 000000000..eb0291a82
--- /dev/null
+++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -0,0 +1,55 @@
+// src/hooks/useNodeDataFlowHandlers.ts
+import { useCallback } from 'react';
+import { useDrawerStore } from '@/store';
+import { K8sActualSource, ActualDestination } from '@/types';
+
+const TYPE_SOURCE = 'source';
+const TYPE_DESTINATION = 'destination';
+
+export function useNodeDataFlowHandlers(
+  sources: K8sActualSource[],
+  destinations: ActualDestination[]
+) {
+  const setSelectedItem = useDrawerStore(
+    ({ setSelectedItem }) => setSelectedItem
+  );
+
+  const handleNodeClick = useCallback(
+    (_, object: any) => {
+      if (object.data.type === TYPE_SOURCE) {
+        const { id } = object.data;
+        const selectedDrawerItem = sources.find(
+          ({ kind, name, namespace }) =>
+            kind === id.kind && name === id.name && namespace === id.namespace
+        );
+        if (!selectedDrawerItem) return;
+
+        const { kind, name, namespace } = selectedDrawerItem;
+
+        setSelectedItem({
+          id: { kind, name, namespace },
+          item: selectedDrawerItem,
+          type: TYPE_SOURCE,
+        });
+      }
+
+      if (object.data.type === TYPE_DESTINATION) {
+        const { id } = object.data;
+        const selectedDrawerItem = destinations.find(
+          (destination) => destination.id === id
+        );
+
+        setSelectedItem({
+          id,
+          item: selectedDrawerItem,
+          type: TYPE_DESTINATION,
+        });
+      }
+    },
+    [sources, destinations, setSelectedItem]
+  );
+
+  return {
+    handleNodeClick,
+  };
+}
diff --git a/frontend/webapp/hooks/setup/index.ts b/frontend/webapp/hooks/setup/index.ts
index 8241525c2..31100a828 100644
--- a/frontend/webapp/hooks/setup/index.ts
+++ b/frontend/webapp/hooks/setup/index.ts
@@ -1 +1,2 @@
 export * from './useConnect';
+export * from './useConnectEnv';
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
new file mode 100644
index 000000000..9206729b9
--- /dev/null
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -0,0 +1,91 @@
+import { useAppStore } from '@/store';
+import { DestinationInput } from '@/types';
+import { useActualSources } from '../sources';
+import { useState, useCallback } from 'react';
+import { useCreateDestination } from '../destinations';
+
+type ConnectEnvResult = {
+  success: boolean;
+  destinationId?: string;
+};
+
+export const useConnectEnv = () => {
+  const { createNewDestination } = useCreateDestination();
+  const { createSourcesForNamespace, persistNamespaceItems } =
+    useActualSources();
+
+  const [result, setResult] = useState<ConnectEnvResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const sourcesList = useAppStore((state) => state.sources);
+  const resetSources = useAppStore((state) => state.resetSources);
+  const namespaceFutureSelectAppsList = useAppStore(
+    (state) => state.namespaceFutureSelectAppsList
+  );
+
+  const connectEnv = useCallback(
+    async (destination: DestinationInput, callback?: () => void) => {
+      setLoading(true);
+      setError(null);
+      setResult(null);
+
+      try {
+        // Persist namespaces based on namespaceFutureSelectAppsList
+        const namespaceItems = Object.entries(
+          namespaceFutureSelectAppsList
+        ).map(([namespaceName, futureSelected]) => ({
+          name: namespaceName,
+          futureSelected,
+        }));
+
+        await persistNamespaceItems(namespaceItems);
+
+        // Create sources for each namespace in sourcesList
+        for (const namespaceName in sourcesList) {
+          const sources = sourcesList[namespaceName].map((source) => ({
+            kind: source.kind,
+            name: source.name,
+            selected: true,
+          }));
+          await createSourcesForNamespace(namespaceName, sources);
+        }
+
+        resetSources();
+
+        // Create destination
+        const destinationId = await createNewDestination(destination);
+
+        if (!destinationId) {
+          throw new Error('Error creating destination.');
+        }
+        callback && callback();
+        setResult({
+          success: true,
+          destinationId,
+        });
+      } catch (err) {
+        setError((err as Error).message);
+        setResult({
+          success: false,
+        });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [
+      sourcesList,
+      createNewDestination,
+      persistNamespaceItems,
+      createSourcesForNamespace,
+      namespaceFutureSelectAppsList,
+    ]
+  );
+
+  return {
+    connectEnv,
+    result,
+    loading,
+    error,
+  };
+};
diff --git a/frontend/webapp/hooks/sources/index.ts b/frontend/webapp/hooks/sources/index.ts
index da4dcad8c..909719e76 100644
--- a/frontend/webapp/hooks/sources/index.ts
+++ b/frontend/webapp/hooks/sources/index.ts
@@ -1 +1,5 @@
 export * from './useSources';
+export * from './useConnectSourcesMenuState';
+export * from './useConnectSourcesList';
+export * from './usePersistSource';
+export * from './useActualSources';
diff --git a/frontend/webapp/hooks/sources/useActualSources.ts b/frontend/webapp/hooks/sources/useActualSources.ts
new file mode 100644
index 000000000..1913fafee
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useActualSources.ts
@@ -0,0 +1,86 @@
+import { useState, useCallback } from 'react';
+import { usePersistSource } from '../sources';
+import { useNamespace } from '../compute-platform';
+import { useUpdateSource } from './useUpdateSource';
+import { useComputePlatform } from '../compute-platform';
+import {
+  PatchSourceRequestInput,
+  PersistSourcesArray,
+  WorkloadId,
+} from '@/types';
+
+export function useActualSources() {
+  const { data, refetch } = useComputePlatform();
+  const { persistSource, error: sourceError } = usePersistSource();
+  const { updateSource, error: updateError } = useUpdateSource();
+
+  const { persistNamespace } = useNamespace(undefined);
+  const [isPolling, setIsPolling] = useState(false);
+
+  const startPolling = useCallback(async () => {
+    setIsPolling(true);
+    const maxRetries = 5;
+    const retryInterval = 1000; // Poll every second
+    let retries = 0;
+
+    while (retries < maxRetries) {
+      await new Promise((resolve) => setTimeout(resolve, retryInterval));
+      refetch();
+      retries++;
+    }
+
+    setIsPolling(false);
+  }, [refetch]);
+
+  const createSourcesForNamespace = async (
+    namespaceName: string,
+    sources: PersistSourcesArray[]
+  ) => {
+    await persistSource(namespaceName, sources);
+
+    startPolling();
+    if (sourceError) {
+      throw new Error(`Error creating sources for namespace: ${namespaceName}`);
+    }
+  };
+
+  const deleteSourcesForNamespace = async (
+    namespaceName: string,
+    sources: PersistSourcesArray[]
+  ) => {
+    await persistSource(namespaceName, sources);
+
+    startPolling();
+    if (sourceError) {
+      throw new Error(`Error creating sources for namespace: ${namespaceName}`);
+    }
+  };
+
+  const updateActualSource = async (
+    sourceId: WorkloadId,
+    patchRequest: PatchSourceRequestInput
+  ) => {
+    try {
+      await updateSource(sourceId, patchRequest);
+      refetch();
+    } catch (error) {
+      console.error('Error updating source:', error);
+      throw error;
+    }
+  };
+
+  const persistNamespaceItems = async (namespaceItems) => {
+    for (const namespace of namespaceItems) {
+      await persistNamespace(namespace);
+    }
+  };
+
+  return {
+    sources: data?.computePlatform.k8sActualSources || [],
+    deleteSourcesForNamespace,
+    createSourcesForNamespace,
+    persistNamespaceItems,
+    updateActualSource,
+    isPolling,
+  };
+}
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesList.ts b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
new file mode 100644
index 000000000..0fa1708c5
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useConnectSourcesList.ts
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { DropdownOption, K8sActualNamespace } from '@/types';
+import { useComputePlatform, useNamespace } from '../compute-platform';
+
+export const useConnectSourcesList = ({ stateMenu, setSourcesList }) => {
+  const [namespacesList, setNamespacesList] = useState<DropdownOption[]>([]);
+
+  const { error, data } = useComputePlatform();
+  const { data: namespacesData } = useNamespace(
+    stateMenu.selectedOption?.value,
+    false
+  );
+
+  useEffect(() => {
+    data && buildNamespacesList();
+  }, [data, error]);
+
+  useEffect(() => {
+    if (namespacesData && namespacesData.k8sActualSources) {
+      setSourcesList(namespacesData.k8sActualSources || []);
+      stateMenu.setSelectAllCheckbox(
+        namespacesData.k8sActualSources?.length ===
+          stateMenu.selectedItems[stateMenu.selectedOption?.value || '']
+            ?.length && namespacesData.k8sActualSources?.length > 0
+      );
+    }
+  }, [namespacesData]);
+
+  function buildNamespacesList() {
+    const namespaces = data?.computePlatform?.k8sActualNamespaces || [];
+    const namespacesList = namespaces.map((namespace: K8sActualNamespace) => ({
+      id: namespace.name,
+      value: namespace.name,
+    }));
+
+    stateMenu.setSelectedOption(namespacesList[0]);
+    setNamespacesList(namespacesList);
+  }
+  return { namespacesList };
+};
diff --git a/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
new file mode 100644
index 000000000..b893870c6
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts
@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { useAppStore } from '@/store';
+import { DropdownOption, K8sActualSource } from '@/types';
+
+export const useConnectSourcesMenuState = ({ sourcesList }) => {
+  const [searchFilter, setSearchFilter] = useState('');
+  const [showSelectedOnly, setShowSelectedOnly] = useState(false);
+  const [selectAllCheckbox, setSelectAllCheckbox] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<DropdownOption>();
+  const [futureAppsCheckbox, setFutureAppsCheckbox] = useState<{
+    [key: string]: boolean;
+  }>({});
+  const [selectedItems, setSelectedItems] = useState<{
+    [key: string]: K8sActualSource[];
+  }>({});
+
+  const sources = useAppStore((state) => state.sources);
+  const namespaceFutureSelectAppsList = useAppStore(
+    (state) => state.namespaceFutureSelectAppsList
+  );
+
+  useEffect(() => {
+    sources && setSelectedItems(sources);
+    namespaceFutureSelectAppsList &&
+      setFutureAppsCheckbox(namespaceFutureSelectAppsList);
+  }, [namespaceFutureSelectAppsList, sources]);
+
+  useEffect(() => {
+    selectAllCheckbox && selectAllSources();
+  }, [selectAllCheckbox]);
+
+  function selectAllSources() {
+    if (selectedOption) {
+      setSelectedItems({
+        ...selectedItems,
+        [selectedOption.value]: sourcesList,
+      });
+    }
+  }
+
+  function filterSources(sources: K8sActualSource[]) {
+    return sources.filter((source: K8sActualSource) => {
+      return (
+        searchFilter === '' ||
+        source.name.toLowerCase().includes(searchFilter.toLowerCase())
+      );
+    });
+  }
+
+  function handleSelectItem(item: K8sActualSource) {
+    if (selectedOption) {
+      const currentSelectedItems = selectedItems[selectedOption.value] || [];
+
+      const isItemSelected = currentSelectedItems.some(
+        (currentSelectedItem) =>
+          currentSelectedItem.name === item.name &&
+          currentSelectedItem.kind === item.kind
+      );
+
+      if (isItemSelected) {
+        const updatedSelectedItems = currentSelectedItems.filter(
+          (selectedItem) =>
+            JSON.stringify(selectedItem) !== JSON.stringify(item)
+        );
+        setSelectedItems({
+          ...selectedItems,
+          [selectedOption.value]: updatedSelectedItems,
+        });
+        if (
+          selectAllCheckbox &&
+          updatedSelectedItems.length !== sourcesList.length
+        ) {
+          setSelectAllCheckbox(false);
+        }
+      } else {
+        const updatedSelectedItems = [...currentSelectedItems, item];
+        setSelectedItems({
+          ...selectedItems,
+          [selectedOption.value]: updatedSelectedItems,
+        });
+        if (updatedSelectedItems.length === sourcesList.length) {
+          setSelectAllCheckbox(true);
+        }
+      }
+    }
+  }
+
+  return {
+    stateMenu: {
+      searchFilter,
+      setSearchFilter,
+      showSelectedOnly,
+      setShowSelectedOnly,
+      selectAllCheckbox,
+      setSelectAllCheckbox,
+      selectedOption,
+      setSelectedOption,
+      futureAppsCheckbox,
+      setFutureAppsCheckbox,
+      selectedItems,
+    },
+    stateHandlers: {
+      handleSelectItem,
+      filterSources,
+    },
+  };
+};
diff --git a/frontend/webapp/hooks/sources/usePersistSource.ts b/frontend/webapp/hooks/sources/usePersistSource.ts
new file mode 100644
index 000000000..85c4c6820
--- /dev/null
+++ b/frontend/webapp/hooks/sources/usePersistSource.ts
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { PERSIST_SOURCE } from '@/graphql';
+import { useMutation } from '@apollo/client';
+import { PersistSourcesArray } from '@/types';
+
+type PersistSourceResponse = {
+  persistK8sSources: boolean;
+};
+
+type PersistSourceVariables = {
+  namespace: string;
+  sources: PersistSourcesArray[];
+};
+
+export const usePersistSource = () => {
+  const [persistSourceMutation, { data, loading, error }] = useMutation<
+    PersistSourceResponse,
+    PersistSourceVariables
+  >(PERSIST_SOURCE);
+
+  const [success, setSuccess] = useState<boolean | null>(null);
+
+  const persistSource = async (
+    namespace: string,
+    sources: PersistSourcesArray[]
+  ) => {
+    try {
+      const result = await persistSourceMutation({
+        variables: {
+          namespace,
+          sources,
+        },
+      });
+      setSuccess(result.data?.persistK8sSources ?? false);
+    } catch (err) {
+      setSuccess(false);
+    }
+  };
+
+  return {
+    persistSource,
+    success,
+    loading,
+    error,
+  };
+};
diff --git a/frontend/webapp/hooks/sources/useUpdateSource.ts b/frontend/webapp/hooks/sources/useUpdateSource.ts
new file mode 100644
index 000000000..48c60c030
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useUpdateSource.ts
@@ -0,0 +1,35 @@
+// sources.ts
+import { useMutation } from '@apollo/client';
+import { UPDATE_K8S_ACTUAL_SOURCE } from '@/graphql';
+import { WorkloadId, PatchSourceRequestInput } from '@/types';
+
+export function useUpdateSource() {
+  const [updateSourceMutation, { data, loading, error }] = useMutation(
+    UPDATE_K8S_ACTUAL_SOURCE
+  );
+
+  const updateSource = async (
+    sourceId: WorkloadId,
+    patchSourceRequest: PatchSourceRequestInput
+  ) => {
+    try {
+      const response = await updateSourceMutation({
+        variables: {
+          sourceId,
+          patchSourceRequest,
+        },
+      });
+      return response;
+    } catch (err) {
+      console.error('Error updating source:', err);
+      throw err;
+    }
+  };
+
+  return {
+    updateSource,
+    data,
+    loading,
+    error,
+  };
+}
diff --git a/frontend/webapp/hooks/useOnClickOutside.tsx b/frontend/webapp/hooks/useOnClickOutside.tsx
index 08dd372ed..fe6b22234 100644
--- a/frontend/webapp/hooks/useOnClickOutside.tsx
+++ b/frontend/webapp/hooks/useOnClickOutside.tsx
@@ -1,19 +1,16 @@
-'use client';
-import { useEffect, RefObject } from 'react';
+import { useEffect } from 'react';
 
-type Event = MouseEvent | TouchEvent;
-
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T>,
-  handler: (event: Event) => void
+export function useOnClickOutside(
+  ref: React.RefObject<HTMLElement>,
+  handler: () => void
 ) {
   useEffect(() => {
-    const listener = (event: Event) => {
-      const el = ref?.current;
-      if (el?.contains(event?.target as Node)) return null;
-
-      // Call the handler only if the click is outside of the element passed.
-      handler(event);
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler();
     };
 
     document.addEventListener('mousedown', listener);
diff --git a/frontend/webapp/lib/gql/apollo-wrapper.tsx b/frontend/webapp/lib/gql/apollo-wrapper.tsx
new file mode 100644
index 000000000..debbe9ea4
--- /dev/null
+++ b/frontend/webapp/lib/gql/apollo-wrapper.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { ApolloLink, HttpLink } from '@apollo/client';
+import {
+  ApolloNextAppProvider,
+  InMemoryCache,
+  ApolloClient,
+  SSRMultipartLink,
+} from '@apollo/experimental-nextjs-app-support';
+import { onError } from '@apollo/client/link/error';
+
+function makeClient() {
+  const httpLink = new HttpLink({
+    uri: 'http://localhost:8085/graphql',
+  });
+
+  const errorLink = onError(({ graphQLErrors, networkError }) => {
+    if (graphQLErrors) {
+      graphQLErrors.forEach(({ message, locations, path }) =>
+        console.log(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+        )
+      );
+    }
+    if (networkError) console.log(`[Network error]: ${networkError}`);
+  });
+
+  return new ApolloClient({
+    cache: new InMemoryCache({
+      addTypename: false,
+    }),
+    devtools: {
+      enabled: true,
+    },
+    link:
+      typeof window === 'undefined'
+        ? ApolloLink.from([
+            new SSRMultipartLink({
+              stripDefer: true,
+            }),
+            errorLink,
+            httpLink,
+          ])
+        : ApolloLink.from([errorLink, httpLink]),
+  });
+}
+
+export function ApolloWrapper({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <ApolloNextAppProvider makeClient={makeClient}>
+      {children}
+    </ApolloNextAppProvider>
+  );
+}
diff --git a/frontend/webapp/lib/gql/client.ts b/frontend/webapp/lib/gql/client.ts
new file mode 100644
index 000000000..f6260d0a5
--- /dev/null
+++ b/frontend/webapp/lib/gql/client.ts
@@ -0,0 +1,12 @@
+// lib/client.js
+import { HttpLink, InMemoryCache, ApolloClient } from '@apollo/client';
+import { registerApolloClient } from '@apollo/experimental-nextjs-app-support';
+
+export const { getClient } = registerApolloClient(() => {
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: 'https://main--time-pav6zq.apollographos.net/graphql',
+    }),
+  });
+});
diff --git a/frontend/webapp/lib/gql/index.ts b/frontend/webapp/lib/gql/index.ts
new file mode 100644
index 000000000..32e0cb77d
--- /dev/null
+++ b/frontend/webapp/lib/gql/index.ts
@@ -0,0 +1 @@
+export * from './apollo-wrapper';
diff --git a/frontend/webapp/lib/index.ts b/frontend/webapp/lib/index.ts
new file mode 100644
index 000000000..8a12aabda
--- /dev/null
+++ b/frontend/webapp/lib/index.ts
@@ -0,0 +1 @@
+export * from './gql';
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index cf08e00a0..4017d95bb 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -10,28 +10,34 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
+    "@apollo/client": "^3.11.0-rc.2",
+    "@apollo/experimental-nextjs-app-support": "^0.11.3",
     "@focus-reactive/react-yaml": "^1.1.2",
     "@keyval-dev/design-system": "^2.3.3",
     "@next/font": "^13.4.7",
     "@reduxjs/toolkit": "^2.2.1",
     "@svgr/webpack": "^6.2.1",
-    "@types/node": "20.3.3",
-    "@types/react": "18.2.11",
+    "@types/node": "22.6.1",
+    "@types/react": "18.3.8",
     "@types/react-dom": "18.2.4",
+    "@xyflow/react": "^12.3.0",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "eslint": "8.42.0",
     "eslint-config-next": "13.4.5",
+    "graphql": "^16.9.0",
     "next": "13.5.4",
     "postcss": "^8.4.26",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-flow-renderer": "^10.3.17",
     "react-query": "^3.39.3",
     "react-redux": "^9.1.0",
     "styled-components": "^6.0.2",
     "swr": "^2.1.5",
-    "typescript": "5.1.3"
+    "typescript": "5.6.2",
+    "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {
     "babel-plugin-styled-components": "^2.1.4",
diff --git a/frontend/webapp/public/brand/odigos-icon.svg b/frontend/webapp/public/brand/odigos-icon.svg
new file mode 100644
index 000000000..7690eb2ee
--- /dev/null
+++ b/frontend/webapp/public/brand/odigos-icon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="552" height="431" viewBox="0 0 552 431" fill="none">
+<path d="M308.491 83.3091V0.0765381H472.573C493.785 0.0765381 511 16.4464 511 36.6589V374.508C511 394.72 493.785 411.09 472.573 411.09H308.491V328.396L454.666 263.762C478.721 253.079 493.708 230.791 493.708 205.583C493.708 180.375 478.721 158.011 454.666 147.405L308.414 83.3859L308.491 83.3091Z" fill="#F9F9F9"/>
+<path d="M202.51 327.781V411.014H38.4269C17.2152 411.014 0 394.644 0 374.431V36.5824C0 16.3698 17.2152 0 38.4269 0H202.51V82.6946L56.3338 147.329C32.2786 158.011 17.2921 180.299 17.2921 205.507C17.2921 230.715 32.2786 253.079 56.3338 263.685L202.586 327.704L202.51 327.781Z" fill="#F9F9F9"/>
+<path d="M255.462 290.507C302.363 290.507 340.385 252.485 340.385 205.584C340.385 158.682 302.363 120.66 255.462 120.66C208.56 120.66 170.538 158.682 170.538 205.584C170.538 252.485 208.56 290.507 255.462 290.507Z" fill="#F9F9F9"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/brand/transparent-logo-black.svg b/frontend/webapp/public/brand/transparent-logo-black.svg
new file mode 100644
index 000000000..5aeff3c50
--- /dev/null
+++ b/frontend/webapp/public/brand/transparent-logo-black.svg
@@ -0,0 +1,19 @@
+<svg width="429" height="103" viewBox="0 0 429 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_116_94)">
+<path d="M253.012 22.3253H242.622V81.3372H253.012V22.3253Z" fill="#151515"/>
+<path d="M198.854 81.3261C197.32 81.3261 195.886 80.7305 194.805 79.6495L183.83 68.6744C182.749 67.5934 182.154 66.1595 182.154 64.6263V39.003C182.154 37.4698 182.749 36.0359 183.83 34.9549L194.805 23.9798C195.886 22.8988 197.32 22.3032 198.854 22.3032H215.2C216.59 22.3032 217.925 22.8106 218.973 23.7151L221.267 25.7115V0H231.658V64.6153C231.658 66.1485 231.062 67.5824 229.981 68.6634L219.006 79.6385C217.925 80.7195 216.491 81.3151 214.958 81.3151H198.854V81.3261ZM200.409 32.7158C196.228 32.7158 192.831 36.1131 192.831 40.2935V63.3799C192.831 67.5493 196.228 70.9577 200.409 70.9577H213.402C217.583 70.9577 220.98 67.5603 220.98 63.3799V40.2935C220.98 36.1131 217.583 32.7158 213.402 32.7158H200.409Z" fill="#151515"/>
+<path d="M395.942 81.3371C394.552 81.3371 393.218 80.8298 392.17 79.9253L381.449 70.5495C380.202 69.4576 379.496 67.8913 379.496 66.2477V64.1079H390.218C390.582 67.9464 393.825 70.9466 397.751 70.9466H410.745C414.914 70.9466 418.312 67.5493 418.323 63.3909V62.9938C418.323 61.6922 417.44 60.5782 416.183 60.2804L383.28 52.4379C380.952 51.8863 379.375 49.7465 379.507 47.3529V39.014C379.507 37.4808 380.103 36.0469 381.184 34.9659L392.159 23.9908C393.24 22.9098 394.674 22.3142 396.207 22.3142H412.554C413.944 22.3142 415.278 22.8216 416.326 23.7261L427.048 33.1018C428.294 34.1828 429 35.7601 429 37.4036V41.6834H418.334V39.5435H418.279C417.915 35.7049 414.672 32.7047 410.745 32.7047H397.751C393.571 32.7047 390.174 36.102 390.174 40.2825V40.8671C390.174 42.1466 391.045 43.2607 392.28 43.5695L420.054 50.5076L425.184 51.7319C427.312 52.2393 428.857 54.1365 428.945 56.3536V56.7948H428.967V64.6263C428.967 66.1595 428.371 67.5934 427.29 68.6744L416.315 79.6495C415.234 80.7305 413.8 81.3261 412.267 81.3261H395.92H395.931L395.942 81.3371Z" fill="#151515"/>
+<path d="M247.817 10.4016C244.949 10.4016 242.622 8.06314 242.622 5.2063C242.622 2.34946 244.949 0.0110474 247.817 0.0110474C250.685 0.0110474 253.012 2.34946 253.012 5.2063C253.012 8.06314 250.685 10.4016 247.817 10.4016Z" fill="#151515"/>
+<path d="M279.154 102.681V92.2902H294.574C298.755 92.2902 302.152 88.8929 302.152 84.7124V77.6861L300.178 79.6605C299.097 80.7415 297.663 81.3371 296.129 81.3371H280.025C278.492 81.3371 277.058 80.7415 275.977 79.6605L265.002 68.6854C263.921 67.6045 263.325 66.1705 263.325 64.6373V39.014C263.325 37.4808 263.921 36.0469 265.002 34.9659L275.977 23.9908C277.058 22.9098 278.492 22.3142 280.025 22.3142H296.372C297.762 22.3142 299.097 22.8216 300.144 23.7261L310.866 33.1018C312.112 34.1828 312.818 35.7601 312.818 37.4036V85.9699C312.818 87.5031 312.223 88.937 311.142 90.018L300.167 100.993C299.086 102.074 297.652 102.67 296.118 102.67H279.143L279.154 102.681ZM281.581 32.7157C277.411 32.7157 274.003 36.1131 274.003 40.2935V63.3799C274.003 67.5493 277.4 70.9577 281.581 70.9577H294.574C298.755 70.9577 302.152 67.5603 302.152 63.3799V40.2935C302.152 36.1131 298.755 32.7157 294.574 32.7157H281.581Z" fill="#151515"/>
+<path d="M139.555 81.3371C138.022 81.3371 136.588 80.7415 135.507 79.6605L124.532 68.6854C123.451 67.6045 122.855 66.1705 122.855 64.6373V39.014C122.855 37.4808 123.451 36.0469 124.532 34.9659L135.507 23.9908C136.588 22.9098 138.022 22.3142 139.555 22.3142H155.902C157.292 22.3142 158.626 22.8216 159.674 23.7261L170.395 33.1018C171.642 34.1828 172.348 35.7601 172.348 37.4036V64.6153C172.348 66.1485 171.752 67.5824 170.671 68.6634L159.696 79.6385C158.615 80.7194 157.181 81.3151 155.648 81.3151H139.544V81.3261L139.555 81.3371ZM141.121 32.7157C136.941 32.7157 133.543 36.1131 133.543 40.2935V63.3799C133.543 67.5603 136.941 70.9577 141.121 70.9577H154.104C158.284 70.9577 161.682 67.5603 161.682 63.3799V40.2935C161.682 36.1131 158.284 32.7157 154.104 32.7157H141.121Z" fill="#151515"/>
+<path d="M337.791 81.3371C336.258 81.3371 334.824 80.7415 333.743 79.6605L322.768 68.6854C321.687 67.6045 321.091 66.1705 321.091 64.6373V39.014C321.091 37.4808 321.687 36.0469 322.768 34.9659L333.743 23.9908C334.824 22.9098 336.258 22.3142 337.791 22.3142H354.138C355.527 22.3142 356.862 22.8216 357.91 23.7261L368.631 33.1018C369.878 34.1828 370.584 35.7601 370.584 37.4036V64.6153C370.584 66.1485 369.988 67.5824 368.907 68.6634L357.932 79.6385C356.851 80.7194 355.417 81.3151 353.884 81.3151H337.78V81.3261L337.791 81.3371ZM339.346 32.7157C335.166 32.7157 331.768 36.1131 331.768 40.2935V63.3799C331.768 67.5603 335.166 70.9577 339.346 70.9577H352.34C356.52 70.9577 359.917 67.5603 359.917 63.3799V40.2935C359.917 36.1131 356.52 32.7157 352.34 32.7157H339.346Z" fill="#151515"/>
+<path d="M44.2865 34.2931V22.3473H67.8361C70.8805 22.3473 73.3513 24.6967 73.3513 27.5977V76.0867C73.3513 78.9877 70.8805 81.3371 67.8361 81.3371H44.2865V69.4686L65.2661 60.1921C68.7185 58.6589 70.8694 55.4601 70.8694 51.8422C70.8694 48.2243 68.7185 45.0145 65.2661 43.4923L44.2755 34.3041L44.2865 34.2931Z" fill="#151515"/>
+<path d="M29.0758 69.3804V81.3262H5.52616C2.48181 81.3262 0.0110321 78.9767 0.0110321 76.0757V27.5867C0.0110321 24.6857 2.48181 22.3363 5.52616 22.3363H29.0758V34.2049L8.09621 43.4813C4.64374 45.0145 2.49284 48.2133 2.49284 51.8312C2.49284 55.4492 4.64374 58.659 8.09621 60.1811L29.0868 69.3693L29.0758 69.3804Z" fill="#151515"/>
+<path d="M36.6756 64.0307C43.4071 64.0307 48.8641 58.5737 48.8641 51.8422C48.8641 45.1108 43.4071 39.6538 36.6756 39.6538C29.9441 39.6538 24.4872 45.1108 24.4872 51.8422C24.4872 58.5737 29.9441 64.0307 36.6756 64.0307Z" fill="#151515"/>
+</g>
+<defs>
+<clipPath id="clip0_116_94">
+<rect width="429" height="102.681" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/webapp/public/brand/transparent-logo-white.svg b/frontend/webapp/public/brand/transparent-logo-white.svg
new file mode 100644
index 000000000..9c91b04ac
--- /dev/null
+++ b/frontend/webapp/public/brand/transparent-logo-white.svg
@@ -0,0 +1,19 @@
+<svg width="429" height="103" viewBox="0 0 429 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_116_120)">
+<path d="M253.012 22.3253H242.622V81.3372H253.012V22.3253Z" fill="#F9F9F9"/>
+<path d="M198.854 81.3261C197.32 81.3261 195.886 80.7305 194.805 79.6495L183.83 68.6744C182.749 67.5934 182.154 66.1595 182.154 64.6263V39.003C182.154 37.4698 182.749 36.0359 183.83 34.9549L194.805 23.9798C195.886 22.8988 197.32 22.3032 198.854 22.3032H215.2C216.59 22.3032 217.925 22.8106 218.973 23.7151L221.267 25.7115V0H231.658V64.6153C231.658 66.1485 231.062 67.5824 229.981 68.6634L219.006 79.6385C217.925 80.7195 216.491 81.3151 214.958 81.3151H198.854V81.3261ZM200.409 32.7158C196.228 32.7158 192.831 36.1131 192.831 40.2935V63.3799C192.831 67.5493 196.228 70.9577 200.409 70.9577H213.402C217.583 70.9577 220.98 67.5603 220.98 63.3799V40.2935C220.98 36.1131 217.583 32.7158 213.402 32.7158H200.409Z" fill="#F9F9F9"/>
+<path d="M395.942 81.3371C394.552 81.3371 393.218 80.8298 392.17 79.9253L381.449 70.5495C380.202 69.4576 379.496 67.8913 379.496 66.2477V64.1079H390.218C390.582 67.9464 393.825 70.9466 397.751 70.9466H410.745C414.914 70.9466 418.312 67.5493 418.323 63.3909V62.9938C418.323 61.6922 417.44 60.5782 416.183 60.2804L383.28 52.4379C380.952 51.8863 379.375 49.7465 379.507 47.3529V39.014C379.507 37.4808 380.103 36.0469 381.184 34.9659L392.159 23.9908C393.24 22.9098 394.674 22.3142 396.207 22.3142H412.554C413.944 22.3142 415.278 22.8216 416.326 23.7261L427.048 33.1018C428.294 34.1828 429 35.7601 429 37.4036V41.6834H418.334V39.5435H418.279C417.915 35.7049 414.672 32.7047 410.745 32.7047H397.751C393.571 32.7047 390.174 36.102 390.174 40.2825V40.8671C390.174 42.1466 391.045 43.2607 392.28 43.5695L420.054 50.5076L425.184 51.7319C427.312 52.2393 428.857 54.1365 428.945 56.3536V56.7948H428.967V64.6263C428.967 66.1595 428.371 67.5934 427.29 68.6744L416.315 79.6495C415.234 80.7305 413.8 81.3261 412.267 81.3261H395.92H395.931L395.942 81.3371Z" fill="#F9F9F9"/>
+<path d="M247.817 10.4016C244.949 10.4016 242.622 8.06314 242.622 5.2063C242.622 2.34946 244.949 0.0110474 247.817 0.0110474C250.685 0.0110474 253.012 2.34946 253.012 5.2063C253.012 8.06314 250.685 10.4016 247.817 10.4016Z" fill="#F9F9F9"/>
+<path d="M279.154 102.681V92.2902H294.574C298.755 92.2902 302.152 88.8929 302.152 84.7124V77.6861L300.178 79.6605C299.097 80.7415 297.663 81.3371 296.129 81.3371H280.025C278.492 81.3371 277.058 80.7415 275.977 79.6605L265.002 68.6854C263.921 67.6045 263.325 66.1705 263.325 64.6373V39.014C263.325 37.4808 263.921 36.0469 265.002 34.9659L275.977 23.9908C277.058 22.9098 278.492 22.3142 280.025 22.3142H296.372C297.762 22.3142 299.097 22.8216 300.144 23.7261L310.866 33.1018C312.112 34.1828 312.818 35.7601 312.818 37.4036V85.9699C312.818 87.5031 312.223 88.937 311.142 90.018L300.167 100.993C299.086 102.074 297.652 102.67 296.118 102.67H279.143L279.154 102.681ZM281.581 32.7157C277.411 32.7157 274.003 36.1131 274.003 40.2935V63.3799C274.003 67.5493 277.4 70.9577 281.581 70.9577H294.574C298.755 70.9577 302.152 67.5603 302.152 63.3799V40.2935C302.152 36.1131 298.755 32.7157 294.574 32.7157H281.581Z" fill="#F9F9F9"/>
+<path d="M139.555 81.3371C138.022 81.3371 136.588 80.7415 135.507 79.6605L124.532 68.6854C123.451 67.6045 122.855 66.1705 122.855 64.6373V39.014C122.855 37.4808 123.451 36.0469 124.532 34.9659L135.507 23.9908C136.588 22.9098 138.022 22.3142 139.555 22.3142H155.902C157.292 22.3142 158.626 22.8216 159.674 23.7261L170.395 33.1018C171.642 34.1828 172.348 35.7601 172.348 37.4036V64.6153C172.348 66.1485 171.752 67.5824 170.671 68.6634L159.696 79.6385C158.615 80.7194 157.181 81.3151 155.648 81.3151H139.544V81.3261L139.555 81.3371ZM141.121 32.7157C136.941 32.7157 133.543 36.1131 133.543 40.2935V63.3799C133.543 67.5603 136.941 70.9577 141.121 70.9577H154.104C158.284 70.9577 161.682 67.5603 161.682 63.3799V40.2935C161.682 36.1131 158.284 32.7157 154.104 32.7157H141.121Z" fill="#F9F9F9"/>
+<path d="M337.791 81.3371C336.258 81.3371 334.824 80.7415 333.743 79.6605L322.768 68.6854C321.687 67.6045 321.091 66.1705 321.091 64.6373V39.014C321.091 37.4808 321.687 36.0469 322.768 34.9659L333.743 23.9908C334.824 22.9098 336.258 22.3142 337.791 22.3142H354.138C355.527 22.3142 356.862 22.8216 357.91 23.7261L368.631 33.1018C369.878 34.1828 370.584 35.7601 370.584 37.4036V64.6153C370.584 66.1485 369.988 67.5824 368.907 68.6634L357.932 79.6385C356.851 80.7194 355.417 81.3151 353.884 81.3151H337.78V81.3261L337.791 81.3371ZM339.346 32.7157C335.166 32.7157 331.768 36.1131 331.768 40.2935V63.3799C331.768 67.5603 335.166 70.9577 339.346 70.9577H352.34C356.52 70.9577 359.917 67.5603 359.917 63.3799V40.2935C359.917 36.1131 356.52 32.7157 352.34 32.7157H339.346Z" fill="#F9F9F9"/>
+<path d="M44.2865 34.2931V22.3473H67.8361C70.8804 22.3473 73.3512 24.6967 73.3512 27.5977V76.0867C73.3512 78.9877 70.8804 81.3371 67.8361 81.3371H44.2865V69.4686L65.266 60.1921C68.7185 58.6589 70.8694 55.4601 70.8694 51.8422C70.8694 48.2243 68.7185 45.0145 65.266 43.4923L44.2755 34.3041L44.2865 34.2931Z" fill="#F9F9F9"/>
+<path d="M29.0758 69.3804V81.3262H5.52618C2.48183 81.3262 0.0110474 78.9767 0.0110474 76.0757V27.5867C0.0110474 24.6857 2.48183 22.3363 5.52618 22.3363H29.0758V34.2049L8.09623 43.4813C4.64376 45.0145 2.49286 48.2133 2.49286 51.8312C2.49286 55.4492 4.64376 58.659 8.09623 60.1811L29.0868 69.3693L29.0758 69.3804Z" fill="#F9F9F9"/>
+<path d="M36.6756 64.0307C43.4071 64.0307 48.8641 58.5737 48.8641 51.8422C48.8641 45.1108 43.4071 39.6538 36.6756 39.6538C29.9441 39.6538 24.4872 45.1108 24.4872 51.8422C24.4872 58.5737 29.9441 64.0307 36.6756 64.0307Z" fill="#F9F9F9"/>
+</g>
+<defs>
+<clipPath id="clip0_116_120">
+<rect width="429" height="102.681" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/webapp/public/icons/actions/addclusterinfo.svg b/frontend/webapp/public/icons/actions/addclusterinfo.svg
new file mode 100644
index 000000000..681f7225d
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/addclusterinfo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.99992 11.3333V9.33333M7.99992 9.33333V7.33333M7.99992 9.33333H5.99992M7.99992 9.33333H9.99992M14.6666 8.26667V9.73333C14.6666 11.2268 14.6666 11.9735 14.3759 12.544C14.1203 13.0457 13.7123 13.4537 13.2106 13.7094C12.6401 14 11.8934 14 10.3999 14H5.59992C4.10645 14 3.35971 14 2.78928 13.7094C2.28751 13.4537 1.87956 13.0457 1.6239 12.544C1.33325 11.9735 1.33325 11.2268 1.33325 9.73333V6.26667C1.33325 4.77319 1.33325 4.02646 1.6239 3.45603C1.87956 2.95426 2.28751 2.54631 2.78928 2.29065C3.35971 2 4.10645 2 5.59992 2H5.81029C6.12336 2 6.2799 2 6.42199 2.04315C6.54778 2.08135 6.6648 2.14398 6.76636 2.22745C6.88108 2.32174 6.96791 2.45199 7.14157 2.71248L7.52493 3.28752C7.69859 3.54801 7.78542 3.67826 7.90014 3.77255C8.0017 3.85602 8.11873 3.91865 8.24452 3.95685C8.38661 4 8.54314 4 8.85621 4H10.3999C11.8934 4 12.6401 4 13.2106 4.29065C13.7123 4.54631 14.1203 4.95426 14.3759 5.45603C14.6666 6.02646 14.6666 6.77319 14.6666 8.26667Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/actions/deleteattribute.svg b/frontend/webapp/public/icons/actions/deleteattribute.svg
new file mode 100644
index 000000000..6467c1865
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/deleteattribute.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M10.6666 10.0007L8.66659 8.00065M8.66659 8.00065L6.66659 6.00065M8.66659 8.00065L10.6666 6.00065M8.66659 8.00065L6.66659 10.0007M4.41666 4.01431C3.33136 5.06369 2.34376 6.24491 1.47059 7.5384C1.37903 7.67404 1.33325 7.83734 1.33325 8.00065C1.33325 8.16396 1.37903 8.32726 1.47059 8.4629C2.34376 9.75639 3.33136 10.9376 4.41666 11.987C4.65522 12.2177 4.77449 12.333 4.94023 12.4319C5.07791 12.514 5.25728 12.5866 5.41337 12.6232C5.60126 12.6673 5.78723 12.6673 6.15917 12.6673H11.3332C12.2667 12.6673 12.7334 12.6673 13.0899 12.4857C13.4035 12.3259 13.6585 12.0709 13.8183 11.7573C13.9999 11.4008 13.9999 10.9341 13.9999 10.0007V6.00065C13.9999 5.06723 13.9999 4.60052 13.8183 4.244C13.6585 3.9304 13.4035 3.67543 13.0899 3.51564C12.7334 3.33398 12.2667 3.33398 11.3332 3.33398H6.15917C5.78723 3.33398 5.60126 3.33398 5.41337 3.37809C5.25728 3.41473 5.07791 3.48727 4.94023 3.56943C4.77449 3.66832 4.65522 3.78365 4.41666 4.01431Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/actions/piimasking.svg b/frontend/webapp/public/icons/actions/piimasking.svg
new file mode 100644
index 000000000..524de812e
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/piimasking.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M13.9486 9.71582C13.8698 9.87282 13.6245 9.98885 13.1338 10.2209L8.95284 12.198C8.60345 12.3632 8.42876 12.4458 8.24552 12.4783C8.08323 12.5071 7.91669 12.5071 7.7544 12.4783C7.57117 12.4458 7.39647 12.3632 7.04709 12.198L2.86615 10.2209C2.37544 9.98885 2.13008 9.87282 2.05135 9.71582M8.95288 9.19806L13.1338 7.22096C13.6245 6.98891 13.8699 6.87289 13.9486 6.71588C14.0171 6.57926 14.0171 6.42074 13.9486 6.28412C13.8699 6.12711 13.6245 6.01109 13.1338 5.77904L8.95288 3.80194C8.60349 3.63672 8.4288 3.55411 8.24556 3.5216C8.08327 3.4928 7.91673 3.4928 7.75444 3.5216C7.5712 3.55411 7.39651 3.63672 7.04712 3.80194L2.86618 5.77904C2.37547 6.01109 2.13012 6.12711 2.05139 6.28412C1.98287 6.42074 1.98287 6.57926 2.05139 6.71588C2.13012 6.87289 2.37547 6.98891 2.86618 7.22096L7.04712 9.19806C7.39651 9.36328 7.5712 9.44589 7.75444 9.4784C7.91673 9.5072 8.08327 9.5072 8.24556 9.4784C8.4288 9.44589 8.60349 9.36328 8.95288 9.19806Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/actions/renameattribute.svg b/frontend/webapp/public/icons/actions/renameattribute.svg
new file mode 100644
index 000000000..229225569
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/renameattribute.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M14.6666 8.00065V12.0007M1.33325 12.6673L4.23847 4.1055C4.40371 3.64283 4.84196 3.33398 5.33325 3.33398C5.83824 3.33398 6.28547 3.66 6.43999 4.14076L9.33325 12.6673M2.69054 8.66732H7.97596M14.6666 10.0007C14.6666 11.1052 13.7712 12.0007 12.6666 12.0007C11.562 12.0007 10.6666 11.1052 10.6666 10.0007C10.6666 8.89608 11.562 8.00065 12.6666 8.00065C13.7712 8.00065 14.6666 8.89608 14.6666 10.0007Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/actions/sampler.svg b/frontend/webapp/public/icons/actions/sampler.svg
new file mode 100644
index 000000000..79ee6d969
--- /dev/null
+++ b/frontend/webapp/public/icons/actions/sampler.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M5.67367 5.67497H5.687M10.515 3.91532L12.1293 5.52965C13.0067 6.40707 13.4454 6.84578 13.6851 7.31618C14.1695 8.2669 14.1695 9.39207 13.6851 10.3428C13.4454 10.8132 13.0067 11.2519 12.1293 12.1293C11.2519 13.0067 10.8132 13.4454 10.3428 13.6851C9.39207 14.1695 8.2669 14.1695 7.31618 13.6851C6.84578 13.4454 6.40707 13.0067 5.52965 12.1293L3.91532 10.515C3.17317 9.77284 2.8021 9.40176 2.54483 8.96668C2.31682 8.58108 2.15521 8.15991 2.06673 7.72076C1.9669 7.22527 1.99448 6.70122 2.04965 5.65312L2.07845 5.10584C2.13195 4.0893 2.1587 3.58104 2.36993 3.18719C2.55598 2.84028 2.84028 2.55598 3.18719 2.36993C3.58104 2.1587 4.0893 2.13195 5.10584 2.07845L5.65312 2.04965C6.70122 1.99448 7.22527 1.9669 7.72076 2.06673C8.15991 2.15521 8.58108 2.31682 8.96668 2.54483C9.40176 2.8021 9.77284 3.17317 10.515 3.91532ZM6.32633 5.65853C6.32633 6.02672 6.02786 6.3252 5.65967 6.3252C5.29148 6.3252 4.993 6.02672 4.993 5.65853C4.993 5.29034 5.29148 4.99186 5.65967 4.99186C6.02786 4.99186 6.32633 5.29034 6.32633 5.65853Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/arrow-black.svg b/frontend/webapp/public/icons/common/arrow-black.svg
new file mode 100644
index 000000000..edc77a1d2
--- /dev/null
+++ b/frontend/webapp/public/icons/common/arrow-black.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none">
+  <mask id="mask0_213_186" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="8" height="13">
+    <rect x="0.0336914" y="0.915039" width="7.96639" height="12" fill="black"/>
+  </mask>
+  <g mask="url(#mask0_213_186)">
+    <path d="M7.45067 5.79839L7.45067 8.12309L-8.08447 8.12309L-8.08447 5.79839L7.45067 5.79839ZM-0.0440531 16.6462L-1.65882 14.9351L6.61205 6.95954L-1.65882 -1.07966L-0.108932 -2.79077L9.26007 6.24988V7.63798L-0.0440531 16.6462Z" fill="#151515"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/arrow-right.svg b/frontend/webapp/public/icons/common/arrow-right.svg
new file mode 100644
index 000000000..5f0e0dd64
--- /dev/null
+++ b/frontend/webapp/public/icons/common/arrow-right.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none">
+  <g opacity="0.4">
+    <mask id="mask0_354_24411" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="8" height="13">
+      <rect x="0.0166016" y="0.5" width="7.96639" height="12" fill="black"/>
+    </mask>
+    <g mask="url(#mask0_354_24411)">
+      <path d="M7.43358 5.38408L7.43358 7.70878L-8.10156 7.70878L-8.10156 5.38408L7.43358 5.38408ZM-0.0611429 16.2319L-1.67591 14.5208L6.59496 6.54523L-1.67591 -1.49397L-0.126021 -3.20508L9.24298 5.83557V7.22367L-0.0611429 16.2319Z" fill="#F9F9F9"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/arrow-white.svg b/frontend/webapp/public/icons/common/arrow-white.svg
new file mode 100644
index 000000000..d230cf243
--- /dev/null
+++ b/frontend/webapp/public/icons/common/arrow-white.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="13" viewBox="0 0 9 13" fill="none">
+  <mask id="mask0_213_179" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="9" height="13">
+    <rect x="8.03369" y="12.915" width="7.96639" height="12" transform="rotate(-180 8.03369 12.915)" fill="black"/>
+  </mask>
+  <g mask="url(#mask0_213_179)">
+    <path d="M0.616717 8.03169L0.616717 5.70699L16.1519 5.70699L16.1519 8.03169L0.616717 8.03169ZM8.11144 -2.81613L9.7262 -1.10502L1.45534 6.87054L9.7262 14.9097L8.17631 16.6208L-1.19268 7.5802L-1.19268 6.1921L8.11144 -2.81613Z" fill="#F9F9F9"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/check.svg b/frontend/webapp/public/icons/common/check.svg
new file mode 100644
index 000000000..6ee9b2be2
--- /dev/null
+++ b/frontend/webapp/public/icons/common/check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+<path d="M3.6665 9.24833L6.67773 12.7315L6.94495 12.2642C8.37771 9.75889 10.3605 7.61153 12.7439 5.98403L13.3332 5.58167" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/connection-succeeded.svg b/frontend/webapp/public/icons/common/connection-succeeded.svg
new file mode 100644
index 000000000..4a4e6b385
--- /dev/null
+++ b/frontend/webapp/public/icons/common/connection-succeeded.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+  <path d="M6.16659 9.29901L7.72738 10.8581C8.47807 9.5455 9.51695 8.4204 10.7657 7.56768L10.8333 7.52157M14.5999 8.95742C14.5999 12.3264 11.8688 15.0574 8.4999 15.0574C5.13097 15.0574 2.3999 12.3264 2.3999 8.95742C2.3999 5.58848 5.13097 2.85742 8.4999 2.85742C11.8688 2.85742 14.5999 5.58848 14.5999 8.95742Z" stroke="#81AF65" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/edit.svg b/frontend/webapp/public/icons/common/edit.svg
new file mode 100644
index 000000000..49c264e88
--- /dev/null
+++ b/frontend/webapp/public/icons/common/edit.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8 14C10.6787 11.8171 10.7261 16.2383 14 12.6667M2 13.997L3.81777 13.9999C4.07739 14.0003 4.2072 14.0005 4.32937 13.9712C4.43769 13.9452 4.54125 13.9022 4.63623 13.8438C4.74337 13.778 4.83516 13.6858 5.01874 13.5014L13.6676 4.81451C14.021 4.4596 14.1088 3.91087 13.8396 3.47722C13.5142 2.95298 13.0691 2.50221 12.5511 2.16754C12.136 1.8993 11.5908 1.95805 11.2417 2.30864L2.53993 11.0487C2.36296 11.2264 2.27447 11.3153 2.21029 11.4188C2.15338 11.5105 2.11072 11.6104 2.08378 11.7151C2.05341 11.8331 2.05031 11.9588 2.04411 12.2101L2 13.997Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/extend-arrow.svg b/frontend/webapp/public/icons/common/extend-arrow.svg
new file mode 100644
index 000000000..9333da395
--- /dev/null
+++ b/frontend/webapp/public/icons/common/extend-arrow.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+  <g opacity="0.8">
+    <path d="M4 5.06934C4.53103 5.80028 5.15354 6.45498 5.85106 7.01644C5.93869 7.08697 6.06131 7.08697 6.14894 7.01644C6.84646 6.45498 7.46897 5.80028 8 5.06934" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/folder.svg b/frontend/webapp/public/icons/common/folder.svg
new file mode 100644
index 000000000..59cce3af9
--- /dev/null
+++ b/frontend/webapp/public/icons/common/folder.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+  <path d="M1.5 7.96504C1.5 6.28488 1.5 5.4448 1.82698 4.80307C2.1146 4.23858 2.57354 3.77964 3.13803 3.49202C3.77976 3.16504 4.61984 3.16504 6.3 3.16504H6.53667C6.88887 3.16504 7.06498 3.16504 7.22483 3.21358C7.36634 3.25656 7.49799 3.32702 7.61225 3.42093C7.74131 3.527 7.83899 3.67353 8.03436 3.96658L8.46564 4.6135C8.66101 4.90655 8.75869 5.05308 8.88775 5.15915C9.00201 5.25306 9.13366 5.32352 9.27517 5.36649C9.43502 5.41504 9.61113 5.41504 9.96333 5.41504H11.7C13.3802 5.41504 14.2202 5.41504 14.862 5.74202C15.4265 6.02964 15.8854 6.48858 16.173 7.05307C16.5 7.6948 16.5 8.53488 16.5 10.215V11.865C16.5 13.5452 16.5 14.3853 16.173 15.027C15.8854 15.5915 15.4265 16.0504 14.862 16.3381C14.2202 16.665 13.3802 16.665 11.7 16.665H6.3C4.61984 16.665 3.77976 16.665 3.13803 16.3381C2.57354 16.0504 2.1146 15.5915 1.82698 15.027C1.5 14.3853 1.5 13.5452 1.5 11.865V7.96504Z" stroke="#F9F9F9" stroke-opacity="0.64" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/index.ts b/frontend/webapp/public/icons/common/index.ts
new file mode 100644
index 000000000..b80e515df
--- /dev/null
+++ b/frontend/webapp/public/icons/common/index.ts
@@ -0,0 +1,3 @@
+import ArrowBlack from './arrow.svg';
+import ArrowWhite from './arrow-white.svg';
+export { ArrowBlack, ArrowWhite };
diff --git a/frontend/webapp/public/icons/common/info.svg b/frontend/webapp/public/icons/common/info.svg
new file mode 100644
index 000000000..02127d33b
--- /dev/null
+++ b/frontend/webapp/public/icons/common/info.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M8 8.91498V11.5816M8 6.66498V6.66423M14 8.91504C14 12.2287 11.3137 14.915 8 14.915C4.68629 14.915 2 12.2287 2 8.91504C2 5.60133 4.68629 2.91504 8 2.91504C11.3137 2.91504 14 5.60133 14 8.91504Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/no-data-found.svg b/frontend/webapp/public/icons/common/no-data-found.svg
new file mode 100644
index 000000000..0766b20e9
--- /dev/null
+++ b/frontend/webapp/public/icons/common/no-data-found.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M6.31647 10.9497L7.96639 9.29983M7.96639 9.29983L9.61631 7.64992M7.96639 9.29983L6.31647 7.64992M7.96639 9.29983L9.61631 10.9497M14.6666 8.26667V9.73333C14.6666 11.2268 14.6666 11.9735 14.3759 12.544C14.1203 13.0457 13.7123 13.4537 13.2106 13.7094C12.6401 14 11.8934 14 10.3999 14H5.59992C4.10645 14 3.35971 14 2.78928 13.7094C2.28751 13.4537 1.87956 13.0457 1.6239 12.544C1.33325 11.9735 1.33325 11.2268 1.33325 9.73333V6.26667C1.33325 4.77319 1.33325 4.02646 1.6239 3.45603C1.87956 2.95426 2.28751 2.54631 2.78928 2.29065C3.35971 2 4.10645 2 5.59992 2H5.81029C6.12336 2 6.2799 2 6.42199 2.04315C6.54778 2.08135 6.6648 2.14398 6.76636 2.22745C6.88108 2.32174 6.96791 2.45199 7.14157 2.71248L7.52493 3.28752C7.69859 3.54801 7.78542 3.67826 7.90014 3.77255C8.0017 3.85602 8.11873 3.91865 8.24452 3.95685C8.38661 4 8.54314 4 8.85621 4H10.3999C11.8934 4 12.6401 4 13.2106 4.29065C13.7123 4.54631 14.1203 4.95426 14.3759 5.45603C14.6666 6.02646 14.6666 6.77319 14.6666 8.26667Z" stroke="#7A7A7A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/plus-black.svg b/frontend/webapp/public/icons/common/plus-black.svg
new file mode 100644
index 000000000..2025d777a
--- /dev/null
+++ b/frontend/webapp/public/icons/common/plus-black.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.99992 12.6663V7.99967M7.99992 7.99967V3.33301M7.99992 7.99967L3.33325 7.99967M7.99992 7.99967L12.6666 7.99967" stroke="#111111" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/plus.svg b/frontend/webapp/public/icons/common/plus.svg
new file mode 100644
index 000000000..2f6fad8b7
--- /dev/null
+++ b/frontend/webapp/public/icons/common/plus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M8.00016 13.0817V8.41508M8.00016 8.41508V3.74841M8.00016 8.41508L3.3335 8.41508M8.00016 8.41508L12.6668 8.41508" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/search.svg b/frontend/webapp/public/icons/common/search.svg
new file mode 100644
index 000000000..a278da695
--- /dev/null
+++ b/frontend/webapp/public/icons/common/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+  <path d="M12.25 13.165L10.2144 11.1294M10.2144 11.1294C11.1117 10.2322 11.6667 8.99258 11.6667 7.62337C11.6667 4.88496 9.44674 2.66504 6.70833 2.66504C3.96992 2.66504 1.75 4.88496 1.75 7.62337C1.75 10.3618 3.96992 12.5817 6.70833 12.5817C8.07754 12.5817 9.31712 12.0267 10.2144 11.1294Z" stroke="#F9F9F9" stroke-opacity="0.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/trash.svg b/frontend/webapp/public/icons/common/trash.svg
new file mode 100644
index 000000000..2e1d58831
--- /dev/null
+++ b/frontend/webapp/public/icons/common/trash.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M10.6665 4.00065L9.92946 2.52655C9.56401 1.79567 8.81699 1.33398 7.99984 1.33398C7.18268 1.33398 6.43566 1.79567 6.07022 2.52655L5.33317 4.00065M2.6665 4.00065H13.3332M3.99984 4.00065H11.9998V10.0007C11.9998 11.2432 11.9998 11.8644 11.7968 12.3545C11.5262 13.0079 11.0071 13.527 10.3537 13.7977C9.8636 14.0007 9.24235 14.0007 7.99984 14.0007C6.75733 14.0007 6.13607 14.0007 5.64601 13.7977C4.99261 13.527 4.47348 13.0079 4.20283 12.3545C3.99984 11.8644 3.99984 11.2432 3.99984 10.0007V4.00065Z" stroke="#E25A5A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/x.svg b/frontend/webapp/public/icons/common/x.svg
new file mode 100644
index 000000000..26ea41f62
--- /dev/null
+++ b/frontend/webapp/public/icons/common/x.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none">
+  <mask id="mask0_1160_8186" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="0" width="11" height="14">
+    <rect width="10.1461" height="12.5591" transform="matrix(-1 -8.74228e-08 -8.74228e-08 1 17.7665 0.720703)" fill="black"/>
+  </mask>
+  <g mask="url(#mask0_1160_8186)">
+    <path d="M9.48745 5.83159L9.48745 8.2646L10.9827 8.2646L10.9827 5.83159L9.48745 5.83159ZM17.8469 17.1848L19.8749 15.394L9.48745 7.04684L19.8749 -1.36689L17.9284 -3.15772L6.16179 6.30412L6.16179 7.75688L17.8469 17.1848Z" fill="#F9F9F9"/>
+  </g>
+  <mask id="mask1_1160_8186" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="11" height="14">
+    <rect x="0.0212402" y="0.720703" width="10.1461" height="12.5591" fill="black"/>
+  </mask>
+  <g mask="url(#mask1_1160_8186)">
+    <path d="M8.51279 5.83159L8.51279 8.2646L7.01759 8.2646L7.01759 5.83159L8.51279 5.83159ZM0.15336 17.1848L-1.87463 15.394L8.51279 7.04684L-1.87463 -1.36689L0.0718772 -3.15772L11.8385 6.30412L11.8385 7.75688L0.15336 17.1848Z" fill="#F9F9F9"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/cp/k8s.svg b/frontend/webapp/public/icons/cp/k8s.svg
new file mode 100644
index 000000000..71b84f5a5
--- /dev/null
+++ b/frontend/webapp/public/icons/cp/k8s.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
+  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#242424"/>
+  <path d="M21.5645 15.7452C21.5495 15.7452 21.5495 15.7452 21.5645 15.7452H21.5495C21.5345 15.7452 21.5195 15.7452 21.5195 15.7297C21.4894 15.7297 21.4594 15.7143 21.4294 15.7143C21.3243 15.6988 21.2342 15.6834 21.1441 15.6834C21.099 15.6834 21.054 15.6834 20.9939 15.668H20.9789C20.6635 15.6371 20.4082 15.6062 20.168 15.529C20.0629 15.4826 20.0328 15.4208 20.0028 15.3591C20.0028 15.3436 19.9878 15.3436 19.9878 15.3282L19.7926 15.2664C19.8827 14.556 19.8526 13.8147 19.6875 13.0888C19.5223 12.3629 19.237 11.6834 18.8465 11.0656L18.9967 10.9266V10.8958C18.9967 10.8185 19.0117 10.7413 19.0718 10.6641C19.252 10.4942 19.4772 10.3552 19.7475 10.1853C19.7926 10.1544 19.8376 10.139 19.8827 10.1081C19.9728 10.0618 20.0478 10.0154 20.1379 9.95367C20.153 9.93822 20.183 9.92278 20.213 9.89189C20.228 9.87645 20.2431 9.87645 20.2431 9.861C20.4533 9.67568 20.4983 9.3668 20.3482 9.16602C20.2731 9.05792 20.1379 8.99614 20.0028 8.99614C19.8827 8.99614 19.7776 9.04247 19.6724 9.11969C19.6574 9.13514 19.6574 9.13514 19.6424 9.15058C19.6124 9.16602 19.5974 9.19691 19.5673 9.21236C19.4922 9.28958 19.4322 9.35135 19.3721 9.42857C19.3421 9.45946 19.312 9.50579 19.267 9.53668C19.0568 9.76834 18.8615 9.95367 18.6663 10.0927C18.6213 10.1236 18.5762 10.139 18.5312 10.139C18.5011 10.139 18.4711 10.139 18.4411 10.1236H18.411L18.2308 10.2471C18.0356 10.0309 17.8254 9.84556 17.6152 9.66023C16.7142 8.93436 15.618 8.48649 14.4767 8.37838L14.4617 8.17761C14.4467 8.16216 14.4467 8.16216 14.4317 8.14672C14.3866 8.10039 14.3265 8.05405 14.3115 7.94595C14.2965 7.69884 14.3265 7.42085 14.3566 7.11197V7.09653C14.3566 7.05019 14.3716 6.98842 14.3866 6.94208C14.4016 6.84942 14.4166 6.75676 14.4317 6.64865V6.55598V6.50965C14.4317 6.23166 14.2214 6 13.9661 6C13.846 6 13.7259 6.06178 13.6358 6.15444C13.5457 6.2471 13.5006 6.37066 13.5006 6.50965V6.54054V6.6332C13.5006 6.74131 13.5157 6.83398 13.5457 6.92664C13.5607 6.97297 13.5607 7.0193 13.5757 7.08108V7.09653C13.6057 7.40541 13.6508 7.6834 13.6208 7.9305C13.6057 8.03861 13.5457 8.08494 13.5006 8.13127C13.4856 8.14672 13.4856 8.14672 13.4706 8.16216L13.4556 8.36293C13.1853 8.39382 12.915 8.42471 12.6447 8.48649C11.4884 8.74903 10.4673 9.35135 9.67141 10.2162L9.52125 10.1081H9.49121C9.46118 10.1081 9.43115 10.1236 9.40112 10.1236C9.35607 10.1236 9.31102 10.1081 9.26597 10.0772C9.07075 9.93822 8.87554 9.73745 8.6653 9.50579C8.63527 9.4749 8.60524 9.42857 8.56019 9.39768C8.50012 9.32046 8.44006 9.25869 8.36497 9.18147C8.34996 9.16602 8.31992 9.15058 8.28989 9.11969C8.27487 9.10425 8.25986 9.10425 8.25986 9.0888C8.16976 9.01158 8.04963 8.96525 7.92949 8.96525C7.79434 8.96525 7.6592 9.02703 7.58411 9.13514C7.43395 9.33591 7.479 9.64479 7.68923 9.83012C7.70425 9.83012 7.70425 9.84556 7.71926 9.84556C7.74929 9.861 7.76431 9.89189 7.79434 9.90734C7.88444 9.96911 7.95953 10.0154 8.04963 10.0618C8.09468 10.0772 8.13972 10.1081 8.18477 10.139C8.45507 10.3089 8.68032 10.4479 8.86052 10.6178C8.9356 10.695 8.9356 10.7722 8.9356 10.8494V10.8803L9.08577 11.0193C9.05573 11.0656 9.0257 11.0965 9.01068 11.1429C8.25986 12.3629 7.97454 13.7992 8.16976 15.2201L7.97454 15.2819C7.97454 15.2973 7.95953 15.2973 7.95953 15.3127C7.92949 15.3745 7.88444 15.4363 7.79434 15.4826C7.5691 15.5598 7.2988 15.5907 6.98345 15.6216H6.96843C6.92338 15.6216 6.86332 15.6216 6.81827 15.6371C6.72817 15.6371 6.63807 15.6525 6.53295 15.668C6.50292 15.668 6.47289 15.6834 6.44285 15.6834C6.42784 15.6834 6.41282 15.6834 6.39781 15.6988C6.12751 15.7606 5.96233 16.0232 6.00737 16.2703C6.05242 16.4865 6.24764 16.6255 6.4879 16.6255C6.53295 16.6255 6.56299 16.6255 6.60804 16.61C6.62305 16.61 6.63807 16.61 6.63807 16.5946C6.6681 16.5946 6.69814 16.5792 6.72817 16.5792C6.83329 16.5483 6.90837 16.5174 6.99847 16.471C7.04352 16.4556 7.08857 16.4247 7.13362 16.4093H7.14863C7.43395 16.3012 7.68923 16.2085 7.92949 16.1776H7.95953C8.04963 16.1776 8.10969 16.2239 8.15474 16.2548C8.16976 16.2548 8.16976 16.2703 8.18477 16.2703L8.39501 16.2394C8.7554 17.3822 9.44616 18.4015 10.3622 19.1429C10.5724 19.3127 10.7826 19.4517 11.0079 19.5907L10.9178 19.7915C10.9178 19.807 10.9328 19.807 10.9328 19.8224C10.9628 19.8842 10.9929 19.9614 10.9628 20.0695C10.8727 20.3012 10.7376 20.5328 10.5724 20.7954V20.8108C10.5424 20.8571 10.5123 20.888 10.4823 20.9344C10.4222 21.0116 10.3772 21.0888 10.3171 21.1815C10.3021 21.1969 10.2871 21.2278 10.2721 21.2587C10.2721 21.2741 10.2571 21.2896 10.2571 21.2896C10.1369 21.5521 10.227 21.8456 10.4523 21.9537C10.5123 21.9846 10.5724 22 10.6325 22C10.8127 22 10.9929 21.8764 11.083 21.7066C11.083 21.6911 11.098 21.6757 11.098 21.6757C11.113 21.6448 11.128 21.6139 11.143 21.5985C11.1881 21.4903 11.2031 21.4131 11.2331 21.3205C11.2482 21.2741 11.2632 21.2278 11.2782 21.1815C11.3833 20.8726 11.4584 20.6255 11.5935 20.4093C11.6536 20.3166 11.7287 20.3012 11.7887 20.2703C11.8038 20.2703 11.8038 20.2703 11.8188 20.2548L11.9239 20.0541C12.5846 20.3166 13.3054 20.4556 14.0262 20.4556C14.4617 20.4556 14.9122 20.4093 15.3327 20.3012C15.603 20.2394 15.8582 20.1622 16.1135 20.0695L16.2036 20.2394C16.2186 20.2394 16.2186 20.2394 16.2336 20.2548C16.3087 20.2703 16.3688 20.3012 16.4289 20.3938C16.549 20.61 16.6391 20.8726 16.7442 21.166V21.1815C16.7592 21.2278 16.7742 21.2741 16.7893 21.3205C16.8193 21.4131 16.8343 21.5058 16.8794 21.5985C16.8944 21.6293 16.9094 21.6448 16.9244 21.6757C16.9244 21.6911 16.9394 21.7066 16.9394 21.7066C17.0295 21.8919 17.2097 22 17.3899 22C17.45 22 17.5101 21.9846 17.5701 21.9537C17.6752 21.8919 17.7653 21.7992 17.7954 21.6757C17.8254 21.5521 17.8254 21.4131 17.7653 21.2896C17.7653 21.2741 17.7503 21.2741 17.7503 21.2587C17.7353 21.2278 17.7203 21.1969 17.7053 21.1815C17.6602 21.0888 17.6002 21.0116 17.5401 20.9344C17.5101 20.888 17.48 20.8571 17.45 20.8108V20.7954C17.2848 20.5328 17.1346 20.3012 17.0596 20.0695C17.0295 19.9614 17.0596 19.8996 17.0746 19.8224C17.0746 19.807 17.0896 19.807 17.0896 19.7915L17.0145 19.6062C17.8104 19.1274 18.4861 18.4479 18.9967 17.6139C19.267 17.1815 19.4772 16.7027 19.6274 16.2239L19.8076 16.2548C19.8226 16.2548 19.8226 16.2394 19.8376 16.2394C19.8977 16.2085 19.9427 16.1622 20.0328 16.1622H20.0629C20.3031 16.1931 20.5584 16.2857 20.8437 16.3938H20.8587C20.9038 16.4093 20.9488 16.4402 20.9939 16.4556C21.084 16.5019 21.1591 16.5328 21.2642 16.5637C21.2942 16.5637 21.3243 16.5792 21.3543 16.5792C21.3693 16.5792 21.3843 16.5792 21.3993 16.5946C21.4444 16.61 21.4744 16.61 21.5195 16.61C21.7447 16.61 21.9399 16.4556 22 16.2548C22 16.0695 21.8348 15.8224 21.5645 15.7452ZM14.6119 14.9884L13.9511 15.3127L13.2904 14.9884L13.1252 14.2625L13.5757 13.6757H14.3115L14.762 14.2625L14.6119 14.9884ZM18.5312 13.3822C18.6513 13.9073 18.6813 14.4324 18.6363 14.9421L16.3388 14.2625C16.1285 14.2008 16.0084 13.9846 16.0534 13.7683C16.0685 13.7066 16.0985 13.6448 16.1435 13.5985L17.9605 11.9151C18.2158 12.3475 18.411 12.8417 18.5312 13.3822ZM17.2398 10.9884L15.2726 12.4247C15.1074 12.5328 14.8822 12.5019 14.747 12.332C14.702 12.2857 14.6869 12.2239 14.6719 12.1622L14.5368 9.64479C15.5729 9.76834 16.519 10.2471 17.2398 10.9884ZM12.885 9.72201C13.0501 9.69112 13.2003 9.66023 13.3655 9.62934L13.2303 12.1004C13.2153 12.3166 13.0501 12.5019 12.8249 12.5019C12.7648 12.5019 12.6897 12.4865 12.6447 12.4556L10.6475 10.9884C11.2632 10.3552 12.029 9.92278 12.885 9.72201ZM9.92669 11.9151L11.7137 13.5521C11.8788 13.6911 11.8939 13.9537 11.7587 14.1236C11.7137 14.1853 11.6536 14.2317 11.5785 14.2471L9.25095 14.9421C9.16085 13.8919 9.3861 12.8263 9.92669 11.9151ZM9.52125 16.1004L11.9089 15.6834C12.1041 15.668 12.2843 15.807 12.3293 16.0077C12.3444 16.1004 12.3444 16.1776 12.3143 16.2548L11.3983 18.5251C10.5574 17.9691 9.88164 17.1197 9.52125 16.1004ZM15.0023 19.1737C14.6569 19.251 14.3115 19.2973 13.9511 19.2973C13.4256 19.2973 12.915 19.2046 12.4345 19.0502L13.6208 16.8417C13.7409 16.7027 13.9361 16.6409 14.1013 16.7336C14.1764 16.7799 14.2364 16.8417 14.2815 16.9035L15.4378 19.0502C15.3026 19.0965 15.1525 19.1274 15.0023 19.1737ZM17.9305 17.027C17.5551 17.6448 17.0596 18.139 16.4889 18.5251L15.5429 16.1931C15.4978 16.0077 15.5729 15.807 15.7531 15.7143C15.8132 15.6834 15.8883 15.668 15.9633 15.668L18.366 16.0849C18.2759 16.4247 18.1257 16.7336 17.9305 17.027Z" fill="#B8B8B8"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/index.ts b/frontend/webapp/public/icons/index.ts
new file mode 100644
index 000000000..d0b932366
--- /dev/null
+++ b/frontend/webapp/public/icons/index.ts
@@ -0,0 +1 @@
+export * from './common';
diff --git a/frontend/webapp/public/icons/monitors/logs.svg b/frontend/webapp/public/icons/monitors/logs.svg
new file mode 100644
index 000000000..b6e15eafe
--- /dev/null
+++ b/frontend/webapp/public/icons/monitors/logs.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M2.66699 8.5H6.66699M2.66699 12.5H6.66699M2.66699 4.5L13.3337 4.5M12.4765 12.0146C13.0334 11.61 13.5322 11.1357 13.96 10.6043C14.0138 10.5375 14.0138 10.4441 13.96 10.3773C13.5322 9.84585 13.0334 9.37156 12.4765 8.96696M10.1908 8.96696C9.63389 9.37156 9.13508 9.84585 8.7073 10.3773C8.65356 10.4441 8.65356 10.5375 8.7073 10.6043C9.13508 11.1357 9.63389 11.61 10.1908 12.0146" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/monitors/metrics.svg b/frontend/webapp/public/icons/monitors/metrics.svg
new file mode 100644
index 000000000..8ca883925
--- /dev/null
+++ b/frontend/webapp/public/icons/monitors/metrics.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M13.2389 9.1672C13.2389 12.4305 10.5935 15.0758 7.33025 15.0758V14.3373M13.2389 9.1672H14.0883C14.0883 5.43485 11.0626 2.40918 7.33025 2.40918V4.73571M13.2389 9.1672L7.33025 9.1672M7.33025 14.3373C4.47491 14.3373 2.16016 12.0225 2.16016 9.1672H2.89877M7.33025 14.3373L7.33025 9.1672M2.89877 9.1672C2.89877 6.71975 4.88281 4.73571 7.33025 4.73571M2.89877 9.1672H7.33025M7.33025 4.73571L7.33025 9.1672" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/monitors/traces.svg b/frontend/webapp/public/icons/monitors/traces.svg
new file mode 100644
index 000000000..ff6d822d8
--- /dev/null
+++ b/frontend/webapp/public/icons/monitors/traces.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+  <path d="M10.3337 8.5C10.3337 9.60457 11.2291 10.5 12.3337 10.5C13.4382 10.5 14.3337 9.60457 14.3337 8.5C14.3337 7.39543 13.4382 6.5 12.3337 6.5C11.2291 6.5 10.3337 7.39543 10.3337 8.5ZM10.3337 8.5L8.00032 8.5M8.00032 8.5L8.00032 9.3C8.00032 10.4201 8.00032 10.9802 7.78234 11.408C7.59059 11.7843 7.28463 12.0903 6.90831 12.282C6.60852 12.4348 6.24381 12.4805 5.66698 12.4942M8.00032 8.5L8.00032 7.7C8.00032 6.57989 8.00032 6.01984 7.78234 5.59202C7.59059 5.21569 7.28463 4.90973 6.90831 4.71799C6.60852 4.56524 6.24381 4.51952 5.66698 4.50584M5.66698 12.4942C5.66383 11.3923 4.76961 10.5 3.66699 10.5C2.56242 10.5 1.66699 11.3954 1.66699 12.5C1.66699 13.6046 2.56242 14.5 3.66699 14.5C4.77156 14.5 5.66699 13.6046 5.66699 12.5C5.66699 12.4981 5.66699 12.4961 5.66698 12.4942ZM5.66698 4.50584C5.66383 5.60773 4.76961 6.5 3.66699 6.5C2.56242 6.5 1.66699 5.60457 1.66699 4.5C1.66699 3.39543 2.56242 2.5 3.66699 2.5C4.77156 2.5 5.66699 3.39543 5.66699 4.5C5.66699 4.50195 5.66699 4.5039 5.66698 4.50584Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/notification/error-icon.svg b/frontend/webapp/public/icons/notification/error-icon.svg
new file mode 100644
index 000000000..f4c444996
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/error-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+  <path d="M7 8.33673V6.00339M7 10.3055V10.3061M12.25 7.97266C12.25 10.8722 9.89949 13.2227 7 13.2227C4.1005 13.2227 1.75 10.8721 1.75 7.97265C1.75 5.07316 4.10051 2.72266 7 2.72266C9.8995 2.72266 12.25 5.07316 12.25 7.97266Z" stroke="#E25A5A" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/notification/error-icon2.svg b/frontend/webapp/public/icons/notification/error-icon2.svg
new file mode 100644
index 000000000..143f67c63
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/error-icon2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8 8.66673V6.00006M8 10.9167V10.9175M7.07337 2.18915C7.66595 1.93695 8.33405 1.93695 8.92662 2.18915C10.6942 2.94145 14.8697 9.61453 14.7474 11.3981C14.6994 12.0972 14.3529 12.7408 13.7982 13.1614C12.323 14.2795 3.67698 14.2795 2.20185 13.1614C1.64705 12.7408 1.3006 12.0972 1.25263 11.3981C1.13026 9.61453 5.30575 2.94145 7.07337 2.18915Z" stroke="#EF7676" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/notification/success-icon.svg b/frontend/webapp/public/icons/notification/success-icon.svg
new file mode 100644
index 000000000..b0552cd59
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/success-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path stroke="#81AF65" stroke-linecap="round" stroke-linejoin="round" d="m5.667 8.341 1.56 1.56a9.99 9.99 0 0 1 3.039-3.29l.067-.047M14.1 8A6.1 6.1 0 1 1 1.9 8a6.1 6.1 0 0 1 12.2 0Z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/notification/warning-icon.svg b/frontend/webapp/public/icons/notification/warning-icon.svg
new file mode 100644
index 000000000..eb152a716
--- /dev/null
+++ b/frontend/webapp/public/icons/notification/warning-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M5.33333 2.66669C4.22876 2.66669 3.33333 3.46263 3.33333 4.44446V6.22224C3.33333 7.20408 2.4379 8.00002 1.33333 8.00002C2.4379 8.00002 3.33333 8.79596 3.33333 9.7778V11.5556C3.33333 12.5374 4.22876 13.3334 5.33333 13.3334M10.6667 2.66669C11.7712 2.66669 12.6667 3.46263 12.6667 4.44446V6.22224C12.6667 7.20408 13.5621 8.00002 14.6667 8.00002C13.5621 8.00002 12.6667 8.79596 12.6667 9.7778V11.5556C12.6667 12.5374 11.7712 13.3334 10.6667 13.3334" stroke="#E9CF35" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/overview/actions.svg b/frontend/webapp/public/icons/overview/actions.svg
new file mode 100644
index 000000000..5779cebbe
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/actions.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M4.03577 5.58623L7.87311 2.57807C8.96507 1.72206 9.51105 1.29405 9.88484 1.33635C10.2084 1.37297 10.4931 1.58015 10.6428 1.88795C10.8158 2.24356 10.6404 2.94122 10.2895 4.33655L9.99556 5.50565C9.85509 6.06426 9.78486 6.34357 9.83323 6.58606C9.87578 6.79937 9.9806 6.99284 10.1327 7.13876C10.3056 7.30464 10.5677 7.37948 11.0919 7.52916L11.432 7.62628C12.4401 7.91412 12.9442 8.05804 13.1457 8.35103C13.3209 8.60578 13.3771 8.93198 13.2982 9.23643C13.2074 9.58657 12.7841 9.91181 11.9376 10.5623L8.16976 13.4575C7.08454 14.2914 6.54192 14.7083 6.16999 14.6636C5.84799 14.6248 5.56547 14.4171 5.41715 14.1101C5.24584 13.7555 5.41898 13.0669 5.76527 11.6898L6.02808 10.6446C6.16855 10.0859 6.23878 9.80664 6.19041 9.56415C6.14786 9.35085 6.04304 9.15737 5.89096 9.01146C5.71807 8.84557 5.45596 8.77073 4.93173 8.62105L4.55326 8.51299C3.55574 8.22817 3.05698 8.08576 2.8556 7.79472C2.68046 7.5416 2.62311 7.21724 2.6998 6.91357C2.78798 6.5644 3.20391 6.23834 4.03577 5.58623Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/overview/destinations.svg b/frontend/webapp/public/icons/overview/destinations.svg
new file mode 100644
index 000000000..2547dbae7
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/destinations.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.9999 14.0999C11.3688 14.0999 14.0999 11.3688 14.0999 7.9999C14.0999 4.63096 11.3688 1.8999 7.9999 1.8999C4.63096 1.8999 1.8999 4.63096 1.8999 7.9999C1.8999 11.3688 4.63096 14.0999 7.9999 14.0999Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.99984 11.3332C9.84077 11.3332 11.3332 9.84077 11.3332 7.99984C11.3332 6.15889 9.84077 4.6665 7.99984 4.6665C6.15889 4.6665 4.6665 6.15889 4.6665 7.99984C4.6665 9.84077 6.15889 11.3332 7.99984 11.3332Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.6665 7.99984C8.6665 8.36804 8.36804 8.6665 7.99984 8.6665C7.63164 8.6665 7.33317 8.36804 7.33317 7.99984C7.33317 7.63164 7.63164 7.33317 7.99984 7.33317C8.36804 7.33317 8.6665 7.63164 8.6665 7.99984Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/overview/overview.svg b/frontend/webapp/public/icons/overview/overview.svg
new file mode 100644
index 000000000..847c8aeb1
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/overview.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+  <path d="M1.75 8.79362H12.25M1.75 11.7103H12.25M3.5 5.87695H10.5C11.4665 5.87695 12.25 5.09345 12.25 4.12695C12.25 3.16045 11.4665 2.37695 10.5 2.37695H3.5C2.5335 2.37695 1.75 3.16045 1.75 4.12695C1.75 5.09345 2.5335 5.87695 3.5 5.87695Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/overview/sources.svg b/frontend/webapp/public/icons/overview/sources.svg
new file mode 100644
index 000000000..cdefda568
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/sources.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M13.3332 3.8V8M13.3332 3.8C13.3332 4.79411 10.9454 5.6 7.99984 5.6C5.05432 5.6 2.6665 4.79411 2.6665 3.8M13.3332 3.8C13.3332 2.80589 10.9454 2 7.99984 2C5.05432 2 2.6665 2.80589 2.6665 3.8M13.3332 8V12.0875C13.3332 13.1437 10.9454 14 7.99984 14C5.05432 14 2.6665 13.1437 2.6665 12.0875V8M13.3332 8C13.3332 8.99413 10.9454 9.8 7.99984 9.8C5.05432 9.8 2.6665 8.99413 2.6665 8M2.6665 8V3.8M10.6665 7.33333H10.6732M10.6665 11.3333H10.6732" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
new file mode 100644
index 000000000..2b31ea584
--- /dev/null
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -0,0 +1,281 @@
+import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
+import styled from 'styled-components';
+import { Text } from '../text';
+import Image from 'next/image';
+
+interface Option {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  items?: Option[]; // For handling a list of items
+}
+
+interface AutocompleteInputProps {
+  options: Option[];
+  placeholder?: string;
+  onOptionSelect?: (option: Option) => void;
+}
+
+const AutocompleteInput: FC<AutocompleteInputProps> = ({
+  options,
+  placeholder = 'Type to search...',
+  onOptionSelect,
+}) => {
+  const [query, setQuery] = useState('');
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>([]);
+  const [showOptions, setShowOptions] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value;
+    setQuery(input);
+    if (input) {
+      const filtered = filterOptions(options, input);
+      setFilteredOptions(filtered);
+      setShowOptions(true);
+    } else {
+      setShowOptions(false);
+    }
+  };
+
+  const filterOptions = (optionsList: Option[], input: string): Option[] => {
+    return optionsList.reduce<Option[]>((acc, option) => {
+      if (option.items) {
+        const filteredSubItems = filterOptions(option.items, input);
+        if (filteredSubItems.length) {
+          acc.push({ ...option, items: filteredSubItems });
+        }
+      } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
+        acc.push(option);
+      }
+      return acc;
+    }, []);
+  };
+
+  const handleOptionClick = (option: Option) => {
+    setQuery(option.label);
+    setShowOptions(false);
+    if (onOptionSelect) {
+      onOptionSelect(option);
+    }
+  };
+
+  const flattenOptions = (options: Option[]): Option[] => {
+    return options.reduce<Option[]>((acc, option) => {
+      acc.push(option);
+      if (option.items) {
+        acc = acc.concat(flattenOptions(option.items));
+      }
+      return acc;
+    }, []);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    // Flatten the options to handle keyboard navigation - TODO: Refactor this
+    return;
+    const flatOptions = flattenOptions(filteredOptions);
+    if (e.key === 'ArrowDown' && activeIndex < flatOptions.length - 1) {
+      setActiveIndex(activeIndex + 1);
+    } else if (e.key === 'ArrowUp' && activeIndex > 0) {
+      setActiveIndex(activeIndex - 1);
+    } else if (e.key === 'Enter' && activeIndex >= 0) {
+      handleOptionClick(flatOptions[activeIndex]);
+    }
+  };
+
+  return (
+    <AutocompleteContainer>
+      <InputWrapper>
+        <StyledInput
+          type="text"
+          value={query}
+          placeholder={placeholder}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onBlur={() => setShowOptions(false)}
+          onFocus={() => query && setShowOptions(true)}
+        />
+      </InputWrapper>
+      {showOptions && (
+        <OptionsList>
+          {filteredOptions.map((option, index) => (
+            <OptionItem
+              key={option.id}
+              option={option}
+              isActive={index === activeIndex}
+              onClick={handleOptionClick}
+            />
+          ))}
+        </OptionsList>
+      )}
+    </AutocompleteContainer>
+  );
+};
+
+interface OptionItemProps {
+  option: Option;
+  isActive: boolean;
+  onClick: (option: Option) => void;
+}
+
+const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
+  const hasSubItems = !!option.items && option.items.length > 0;
+
+  return (
+    <OptionItemContainer
+      isActive={isActive}
+      isList={hasSubItems}
+      onMouseDown={() => onClick(option)}
+    >
+      {option.icon && (
+        <Image width={16} height={16} src={option.icon} alt={option.label} />
+      )}
+      <OptionContent>
+        <OptionLabelWrapper>
+          <OptionLabel>{option.label}</OptionLabel>
+          <OptionDescription>{option.description}</OptionDescription>
+        </OptionLabelWrapper>
+        {option.items && option.items.length > 0 && (
+          <SubOptionsList>
+            {option.items.map((subOption) => (
+              <SubOptionContainer key={subOption.id}>
+                <VerticalLine />
+                <OptionItem
+                  option={subOption}
+                  isActive={false}
+                  onClick={onClick}
+                />
+              </SubOptionContainer>
+            ))}
+          </SubOptionsList>
+        )}
+      </OptionContent>
+    </OptionItemContainer>
+  );
+};
+
+export { AutocompleteInput };
+
+/** Styled Components */
+
+const AutocompleteContainer = styled.div`
+  position: relative;
+`;
+
+const InputWrapper = styled.div`
+  width: calc(100% - 16px);
+  display: flex;
+  align-items: center;
+  height: 36px;
+  gap: 12px;
+  padding: 0 8px;
+  transition: border-color 0.3s;
+  border-radius: 32px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const StyledInput = styled.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 14px;
+  font-family: ${({ theme }) => theme.font_family.primary};
+  font-weight: 300;
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text};
+    font-family: ${({ theme }) => theme.font_family.primary};
+    opacity: 0.4;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 22px;
+  }
+
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const OptionsList = styled.ul`
+  position: absolute;
+  max-height: 348px;
+  top: 32px;
+  border-radius: 24px;
+  width: calc(100% - 16px);
+  overflow-y: auto;
+  background-color: ${({ theme }) => theme.colors.dropdown_bg};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  z-index: 9999;
+  padding: 12px;
+`;
+
+interface OptionItemContainerProps {
+  isActive: boolean;
+  isList: boolean;
+}
+
+const OptionItemContainer = styled.li<OptionItemContainerProps>`
+  padding: 8px 12px;
+  cursor: ${({ isList }) => (isList ? 'default' : 'pointer')};
+  border-radius: 24px;
+  gap: 8px;
+  display: flex;
+  align-items: ${({ isList }) => (isList ? 'flex-start' : 'center')};
+  background: ${({ isActive, theme }) =>
+    isActive ? theme.colors.activeBackground : 'transparent'};
+
+  &:hover {
+    background: ${({ theme, isList }) =>
+      !isList && theme.colors.white_opacity['008']};
+  }
+`;
+
+const OptionContent = styled.div`
+  width: 100%;
+`;
+
+const SubOptionContainer = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+const VerticalLine = styled.div`
+  width: 1px;
+  height: 52px;
+  background-color: ${({ theme }) => theme.colors.white_opacity['008']};
+  position: absolute;
+  left: 33px;
+`;
+
+const OptionLabelWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const OptionLabel = styled(Text)`
+  flex: 1;
+  font-size: 14px;
+`;
+
+const OptionDescription = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  font-size: 10px;
+  line-height: 150%;
+`;
+
+const SubOptionsList = styled.ul`
+  padding-left: 0px;
+  margin: 4px 0 0 0;
+  list-style: none;
+`;
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
new file mode 100644
index 000000000..e74273f42
--- /dev/null
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -0,0 +1,123 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import styled, { css } from 'styled-components';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+  isDisabled?: boolean;
+}
+
+const variantStyles = {
+  primary: css`
+    border: 1px solid rgba(249, 249, 249, 0.24);
+    background: ${({ theme }) => theme.colors.secondary};
+    &:hover {
+      background: rgba(224, 224, 224, 1);
+    }
+    &:active {
+      background: rgba(184, 184, 184, 1);
+    }
+    &:focus {
+      background: ${({ theme }) => theme.colors.secondary};
+    }
+  `,
+  secondary: css`
+    background: rgba(249, 249, 249, 0);
+    border: 1px solid rgba(82, 82, 82, 1);
+    color: ${({ theme }) => theme.colors.secondary};
+    &:hover {
+      border: 1px solid rgba(249, 249, 249, 0.32);
+      background: rgba(249, 249, 249, 0.04);
+    }
+    &:active {
+      background: rgba(249, 249, 249, 0.08);
+      border: 1px solid rgba(143, 143, 143, 1);
+    }
+    &:focus {
+      background: rgba(249, 249, 249, 0);
+    }
+  `,
+  tertiary: css`
+    border-color: transparent;
+    background: transparent;
+    &:hover {
+      background: rgba(249, 249, 249, 0.04);
+    }
+    &:active {
+      background: rgba(249, 249, 249, 0.08);
+    }
+    &:focus {
+      background: rgba(249, 249, 249, 0);
+    }
+  `,
+  danger: css`
+    border-color: transparent;
+    background: ${({ theme }) => theme.colors.danger};
+    &:hover {
+      background: ${({ theme }) => theme.colors.danger};
+      opacity: 0.9;
+    }
+    &:active {
+      background: ${({ theme }) => theme.colors.danger};
+    }
+    &:focus {
+      background: ${({ theme }) => theme.colors.danger};
+    }
+  `,
+};
+
+const StyledButton = styled.button<ButtonProps>`
+  height: 36px;
+  border-radius: 32px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 12px;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-transform: uppercase;
+  text-decoration: underline;
+  font-weight: 600;
+  ${({ variant }) => variant && variantStyles[variant]}
+  ${({ isDisabled }) =>
+    isDisabled &&
+    css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      &:hover {
+        background-color: #eaeaea;
+      }
+    `}
+`;
+
+const ButtonContainer = styled.div<{
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+}>`
+  border: 2px solid transparent;
+  padding: 2px;
+  border-radius: 32px;
+  background-color: transparent;
+  transition: border-color 0.3s ease;
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  isDisabled = false,
+  ...props
+}) => {
+  return (
+    <ButtonContainer variant={variant}>
+      <StyledButton
+        variant={variant}
+        disabled={isDisabled}
+        isDisabled={isDisabled}
+        {...props}
+      >
+        {children}
+      </StyledButton>
+    </ButtonContainer>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
new file mode 100644
index 000000000..0528fce7f
--- /dev/null
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Text } from '../text';
+import styled from 'styled-components';
+import { Checkbox } from '../checkbox';
+import { ExportedSignals } from '@/types';
+
+interface Monitor {
+  id: string;
+  title: string;
+  tooltip?: string;
+}
+
+interface CheckboxListProps {
+  monitors: Monitor[];
+  title?: string;
+  exportedSignals: ExportedSignals;
+  handleSignalChange: (signal: string, value: boolean) => void;
+}
+
+const ListContainer = styled.div`
+  display: flex;
+  gap: 32px;
+`;
+
+const TextWrapper = styled.div`
+  margin-bottom: 14px;
+`;
+
+const CheckboxList: React.FC<CheckboxListProps> = ({
+  monitors,
+  title,
+  exportedSignals,
+  handleSignalChange,
+}) => {
+  function isItemDisabled(item: Monitor) {
+    const selectedItems = Object.values(exportedSignals).filter(
+      (value) => value
+    );
+
+    const trueValues = Object.values(exportedSignals).filter(Boolean);
+
+    return (
+      (monitors.length === 1 && trueValues.length === 1) ||
+      (selectedItems.length === 1 && exportedSignals[item.id])
+    );
+  }
+
+  return (
+    <div>
+      {title && (
+        <TextWrapper>
+          <Text size={14} weight={300} opacity={0.8}>
+            {title}
+          </Text>
+        </TextWrapper>
+      )}
+      <ListContainer>
+        {monitors.map((monitor) => (
+          <Checkbox
+            key={monitor.id}
+            title={monitor.title}
+            initialValue={exportedSignals[monitor.id]}
+            onChange={(value) => handleSignalChange(monitor.id, value)}
+            disabled={isItemDisabled(monitor)}
+          />
+        ))}
+      </ListContainer>
+    </div>
+  );
+};
+
+export { CheckboxList };
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
new file mode 100644
index 000000000..39b15255f
--- /dev/null
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Tooltip } from '../tooltip';
+import Image from 'next/image';
+import { Text } from '../text';
+
+interface CheckboxProps {
+  title?: string;
+  tooltip?: string;
+  initialValue?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+const Container = styled.div<{ disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+`;
+
+const CheckboxWrapper = styled.div<{ isChecked: boolean; disabled?: boolean }>`
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  border: ${({ isChecked }) =>
+    isChecked
+      ? '1px dashed transparent'
+      : '1px dashed rgba(249, 249, 249, 0.4)'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ isChecked, theme }) =>
+    isChecked ? theme.colors.majestic_blue : 'transparent'};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  transition: border 0.3s, background-color 0.3s;
+`;
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  title,
+  tooltip,
+  initialValue = false,
+  onChange,
+  disabled,
+}) => {
+  const [isChecked, setIsChecked] = useState(initialValue);
+
+  useEffect(() => {
+    setIsChecked(initialValue);
+  }, [initialValue]);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      const newValue = !isChecked;
+      setIsChecked(newValue);
+      if (onChange) {
+        onChange(newValue);
+      }
+    }
+  };
+
+  return (
+    <Container disabled={disabled} onClick={handleToggle}>
+      <CheckboxWrapper isChecked={isChecked} disabled={disabled}>
+        {isChecked && (
+          <Image src="/icons/common/check.svg" alt="" width={12} height={12} />
+        )}
+      </CheckboxWrapper>
+      {title && <Text size={14}>{title}</Text>}
+      {tooltip && (
+        <Tooltip text={tooltip || ''}>
+          <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
+        </Tooltip>
+      )}
+    </Container>
+  );
+};
+
+export { Checkbox };
diff --git a/frontend/webapp/reuseable-components/connection-status/index.tsx b/frontend/webapp/reuseable-components/connection-status/index.tsx
new file mode 100644
index 000000000..be67caa13
--- /dev/null
+++ b/frontend/webapp/reuseable-components/connection-status/index.tsx
@@ -0,0 +1,89 @@
+import Image from 'next/image';
+import React from 'react';
+import { Text } from '../text';
+import styled from 'styled-components';
+
+interface ConnectionStatusProps {
+  title: string;
+  subtitle?: string;
+  status: 'alive' | 'lost';
+}
+
+const StatusWrapper = styled.div<{ status: 'alive' | 'lost' }>`
+  display: flex;
+  align-items: center;
+  padding: 8px 24px;
+  border-radius: 32px;
+  background: ${({ status }) =>
+    status === 'alive'
+      ? `linear-gradient(
+    90deg,
+    rgba(23, 32, 19, 0) 0%,
+    rgba(23, 32, 19, 0.8) 50%,
+    #172013 100%
+  )`
+      : `linear-gradient(90deg, rgba(51, 21, 21, 0.00) 0%, rgba(51, 21, 21, 0.80) 50%, #331515 100%)`};
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+`;
+
+const TextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Title = styled(Text)<{ status: 'alive' | 'lost' }>`
+  font-weight: 400;
+  font-size: 14px;
+  color: ${({ status, theme }) =>
+    status === 'alive' ? theme.text.success : theme.text.error};
+`;
+
+const Subtitle = styled(Text)`
+  font-size: 12px;
+  font-weight: 400;
+  color: #db5151;
+`;
+
+const TextDivider = styled.div`
+  width: 1px;
+  height: 12px;
+  background: rgba(237, 124, 124, 0.16);
+  margin: 0 8px;
+`;
+
+const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
+  title,
+  subtitle,
+  status,
+}) => {
+  return (
+    <StatusWrapper status={status}>
+      <IconWrapper>
+        <Image
+          src={`/icons/notification/${
+            status === 'alive' ? 'success-icon' : 'error-icon2'
+          }.svg`}
+          alt="status"
+          width={16}
+          height={16}
+        />
+      </IconWrapper>
+      <TextWrapper>
+        <Title status={status}>{title}</Title>
+        {subtitle && (
+          <TextWrapper>
+            <TextDivider />
+            <Subtitle>{subtitle}</Subtitle>
+          </TextWrapper>
+        )}
+      </TextWrapper>
+    </StatusWrapper>
+  );
+};
+
+export { ConnectionStatus };
diff --git a/frontend/webapp/reuseable-components/counter/index.tsx b/frontend/webapp/reuseable-components/counter/index.tsx
new file mode 100644
index 000000000..1087b4eda
--- /dev/null
+++ b/frontend/webapp/reuseable-components/counter/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../text';
+
+interface CounterProps {
+  value: number;
+  title: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const ValueContainer = styled.div<{ value?: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 32px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+  transition: background-color 0.3s;
+  background: ${({ value, theme }) =>
+    value ? theme.colors.majestic_blue : 'transparent'};
+`;
+
+const Value = styled(Text)<{ value?: number }>`
+  opacity: ${({ value }) => (value ? 1 : 0.8)};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-size: 12px;
+`;
+
+const Counter: React.FC<CounterProps> = ({ value, title }) => {
+  return (
+    <Container>
+      <Text>{title}</Text>
+      <ValueContainer value={value}>
+        <Value>{value}</Value>
+      </ValueContainer>
+    </Container>
+  );
+};
+
+export { Counter };
diff --git a/frontend/webapp/reuseable-components/divider/index.tsx b/frontend/webapp/reuseable-components/divider/index.tsx
new file mode 100644
index 000000000..5ba268e48
--- /dev/null
+++ b/frontend/webapp/reuseable-components/divider/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface DividerProps {
+  thickness?: number;
+  color?: string;
+  margin?: string;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+const StyledDivider = styled.div<DividerProps>`
+  width: ${({ orientation, thickness }) =>
+    orientation === 'vertical' ? `${thickness}px` : '100%'};
+  height: ${({ orientation, thickness }) =>
+    orientation === 'horizontal' ? `${thickness}px` : '100%'};
+  background-color: ${({ color, theme }) => color || theme.colors.border};
+  margin: ${({ margin }) => margin || '8px 0'};
+`;
+
+const Divider: React.FC<DividerProps> = ({
+  thickness = 1,
+  color,
+  margin,
+  orientation = 'horizontal',
+}) => {
+  return (
+    <StyledDivider
+      thickness={thickness}
+      color={color}
+      margin={margin}
+      orientation={orientation}
+    />
+  );
+};
+
+export { Divider };
diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
new file mode 100644
index 000000000..75a31bd22
--- /dev/null
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+
+interface DrawerProps {
+  isOpen: boolean;
+  width?: string;
+  onClose: () => void;
+  closeOnEscape?: boolean;
+  position?: 'left' | 'right';
+  children: React.ReactNode;
+}
+
+// Styled-component for overlay
+const Overlay = styled.div<{ isOpen: boolean }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
+  transition: opacity 0.3s ease;
+  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
+  z-index: 999;
+`;
+
+// Styled-component for drawer container
+const DrawerContainer = styled.div<{
+  isOpen: boolean;
+  position: 'left' | 'right';
+  width: string;
+}>`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  ${({ position, width }) => position}: 0;
+  width: ${({ width }) => width};
+  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  transform: translateX(
+    ${({ isOpen, position }) =>
+      isOpen ? '0' : position === 'left' ? '-100%' : '100%'}
+  );
+  transition: transform 0.3s ease;
+  z-index: 1000;
+  overflow-y: auto;
+`;
+
+export const Drawer: React.FC<DrawerProps> = ({
+  isOpen,
+  onClose,
+  position = 'right',
+  width = '300px',
+  children,
+  closeOnEscape = true,
+}) => {
+  // Handle closing the drawer when escape key is pressed
+  useEffect(() => {
+    if (!closeOnEscape) return;
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        event.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, onClose, closeOnEscape]);
+
+  return (
+    <>
+      <Overlay isOpen={isOpen} onClick={onClose} />
+      <DrawerContainer isOpen={isOpen} position={position} width={width}>
+        {children}
+      </DrawerContainer>
+    </>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
new file mode 100644
index 000000000..25177ca7a
--- /dev/null
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -0,0 +1,246 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Input } from '../input';
+import styled, { css } from 'styled-components';
+import { Tooltip } from '../tooltip';
+import Image from 'next/image';
+import { Text } from '../text';
+import { Divider } from '../divider';
+import { DropdownOption } from '@/types';
+import { useOnClickOutside } from '@/hooks';
+import ReactDOM from 'react-dom';
+import { NoDataFound } from '../no-data-found';
+
+interface DropdownProps {
+  options: DropdownOption[];
+  value: DropdownOption | undefined;
+  onSelect: (option: DropdownOption) => void;
+  title?: string;
+  tooltip?: string;
+  placeholder?: string;
+  showSearch?: boolean;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+
+const Title = styled(Text)``;
+
+const DropdownHeader = styled.div<{ isOpen: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: 32px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+  cursor: pointer;
+  background-color: transparent;
+  ${({ isOpen, theme }) =>
+    isOpen &&
+    css`
+      border: 1px solid rgba(249, 249, 249, 0.48);
+      background: rgba(249, 249, 249, 0.08);
+    `};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const DropdownListContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  margin-top: 12px;
+  background-color: #242424;
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: 32px;
+  z-index: 9999;
+`;
+
+const SearchInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const DropdownItem = styled.div<{ isSelected: boolean }>`
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 32px;
+  &:hover {
+    background: rgba(68, 74, 217, 0.24);
+  }
+  ${({ isSelected, theme }) =>
+    isSelected &&
+    css`
+      background: rgba(68, 74, 217, 0.24);
+    `}
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const OpenDropdownIcon = styled(Image)<{ isOpen: boolean }>`
+  transition: transform 0.3s;
+  transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
+`;
+
+const Dropdown: React.FC<DropdownProps> = ({
+  options,
+  value,
+  onSelect,
+  title,
+  tooltip,
+  placeholder,
+  showSearch = true,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+
+  const [isDisabled, setIsDisabled] = useState(false); // Disable flag for debounce
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
+
+  useEffect(() => {
+    if (isOpen && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY, // Ensure correct vertical position
+        left: rect.left + window.scrollX, // Ensure correct horizontal position
+        width: rect.width, // Ensure dropdown matches the width of the input
+      });
+    }
+  }, [isOpen]);
+
+  const filteredOptions = options.filter((option) =>
+    option.value.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleSelect = (option: DropdownOption) => {
+    onSelect(option);
+    setIsOpen(false);
+  };
+
+  const handleDropdownToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if (isDisabled) {
+      return; // Prevent multiple clicks if debounce is active
+    }
+
+    // Toggle dropdown open/close state
+    setIsOpen((prev) => !prev);
+
+    // Set the disable flag to true and reset after 1 second
+    setIsDisabled(true);
+    setTimeout(() => {
+      setIsDisabled(false);
+    }, 1000); // 1 second debounce delay
+  };
+
+  const dropdownContent = (
+    <div
+      style={{
+        position: 'absolute',
+        top: dropdownPosition.top,
+        left: dropdownPosition.left,
+        width: dropdownPosition.width,
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <DropdownListContainer ref={dropdownRef}>
+        {showSearch && (
+          <SearchInputContainer>
+            <Input
+              placeholder="Search..."
+              icon={'/icons/common/search.svg'}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Divider thickness={1} margin="8px 0 0 0" />
+          </SearchInputContainer>
+        )}
+        {filteredOptions.length === 0 && (
+          <NoDataFound title="No data found" subTitle=" " />
+        )}
+        {filteredOptions.map((option) => (
+          <DropdownItem
+            key={option.id}
+            isSelected={option.id === value?.id}
+            onClick={() => handleSelect(option)}
+          >
+            <Text size={14}>{option.value}</Text>
+            {option.id === value?.id && (
+              <Image
+                src="/icons/common/check.svg"
+                alt=""
+                width={16}
+                height={16}
+              />
+            )}
+          </DropdownItem>
+        ))}
+      </DropdownListContainer>
+    </div>
+  );
+
+  return (
+    <Container ref={containerRef}>
+      {title && (
+        <Tooltip text={tooltip || ''}>
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+              />
+            )}
+          </HeaderWrapper>
+        </Tooltip>
+      )}
+      <DropdownHeader isOpen={isOpen} onClick={handleDropdownToggle}>
+        <Text size={14}>{value?.value || placeholder}</Text>
+        <OpenDropdownIcon
+          src="/icons/common/extend-arrow.svg"
+          alt="open-dropdown"
+          width={12}
+          height={12}
+          isOpen={isOpen}
+        />
+      </DropdownHeader>
+      {isOpen && ReactDOM.createPortal(dropdownContent, document.body)}
+    </Container>
+  );
+};
+
+export { Dropdown };
diff --git a/frontend/webapp/reuseable-components/fade-loader/helpers/animation.ts b/frontend/webapp/reuseable-components/fade-loader/helpers/animation.ts
new file mode 100644
index 000000000..b49f46caf
--- /dev/null
+++ b/frontend/webapp/reuseable-components/fade-loader/helpers/animation.ts
@@ -0,0 +1,27 @@
+export const createAnimation = (
+  loaderName: string,
+  frames: string,
+  suffix: string
+): string => {
+  const animationName = `react-spinners-${loaderName}-${suffix}`;
+
+  if (typeof window == 'undefined' || !window.document) {
+    return animationName;
+  }
+
+  const styleEl = document.createElement('style');
+  document.head.appendChild(styleEl);
+  const styleSheet = styleEl.sheet;
+
+  const keyFrames = `
+      @keyframes ${animationName} {
+        ${frames}
+      }
+    `;
+
+  if (styleSheet) {
+    styleSheet.insertRule(keyFrames, 0);
+  }
+
+  return animationName;
+};
diff --git a/frontend/webapp/reuseable-components/fade-loader/helpers/unitConverter.ts b/frontend/webapp/reuseable-components/fade-loader/helpers/unitConverter.ts
new file mode 100644
index 000000000..5579c1942
--- /dev/null
+++ b/frontend/webapp/reuseable-components/fade-loader/helpers/unitConverter.ts
@@ -0,0 +1,77 @@
+interface LengthObject {
+  value: number;
+  unit: string;
+}
+
+const cssUnit: { [unit: string]: boolean } = {
+  cm: true,
+  mm: true,
+  in: true,
+  px: true,
+  pt: true,
+  pc: true,
+  em: true,
+  ex: true,
+  ch: true,
+  rem: true,
+  vw: true,
+  vh: true,
+  vmin: true,
+  vmax: true,
+  '%': true,
+};
+
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+export function parseLengthAndUnit(size: number | string): LengthObject {
+  if (typeof size === 'number') {
+    return {
+      value: size,
+      unit: 'px',
+    };
+  }
+  let value: number;
+  const valueString: string = (size.match(/^[0-9.]*/) || '').toString();
+  if (valueString.includes('.')) {
+    value = parseFloat(valueString);
+  } else {
+    value = parseInt(valueString, 10);
+  }
+
+  const unit: string = (size.match(/[^0-9]*$/) || '').toString();
+
+  if (cssUnit[unit]) {
+    return {
+      value,
+      unit,
+    };
+  }
+
+  console.warn(
+    `React Spinners: ${size} is not a valid css value. Defaulting to ${value}px.`
+  );
+
+  return {
+    value,
+    unit: 'px',
+  };
+}
+
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+export function cssValue(value: number | string): string {
+  const lengthWithunit = parseLengthAndUnit(value);
+
+  return `${lengthWithunit.value}${lengthWithunit.unit}`;
+}
diff --git a/frontend/webapp/reuseable-components/fade-loader/index.tsx b/frontend/webapp/reuseable-components/fade-loader/index.tsx
new file mode 100644
index 000000000..b90c6c9d3
--- /dev/null
+++ b/frontend/webapp/reuseable-components/fade-loader/index.tsx
@@ -0,0 +1,137 @@
+import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes } from 'react';
+
+import { cssValue, parseLengthAndUnit } from './helpers/unitConverter';
+import { createAnimation } from './helpers/animation';
+import theme from '@/styles/theme';
+
+export type LengthType = number | string;
+
+interface CommonProps
+  extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+  color?: string;
+  loading?: boolean;
+  cssOverride?: CSSProperties;
+  speedMultiplier?: number;
+}
+
+interface LoaderHeightWidthRadiusProps extends CommonProps {
+  height?: LengthType;
+  width?: LengthType;
+  radius?: LengthType;
+  margin?: LengthType;
+}
+
+const fade = createAnimation(
+  'FadeLoader',
+  '50% {opacity: 0.3} 100% {opacity: 1}',
+  'fade'
+);
+
+function FadeLoader({
+  loading = true,
+  color = theme.colors.text,
+  speedMultiplier = 1,
+  cssOverride = {},
+  height = 4,
+  width = 1.5,
+  radius = 2,
+  margin = 2,
+  ...additionalprops
+}: LoaderHeightWidthRadiusProps): JSX.Element | null {
+  const { value } = parseLengthAndUnit(margin);
+  const radiusValue = value + 4.2;
+  const quarter = radiusValue / 2 + radiusValue / 5.5;
+
+  const wrapper: React.CSSProperties = {
+    display: 'inherit',
+    position: 'relative',
+    fontSize: '0',
+    top: radiusValue,
+    left: radiusValue,
+    width: `${radiusValue * 3}px`,
+    height: `${radiusValue * 3}px`,
+    ...cssOverride,
+  };
+
+  const style = (i: number): React.CSSProperties => {
+    return {
+      position: 'absolute',
+      width: cssValue(width),
+      height: cssValue(height),
+      margin: cssValue(margin),
+      backgroundColor: color,
+      borderRadius: cssValue(radius),
+      transition: '2s',
+      animationFillMode: 'both',
+      animation: `${fade} ${1.2 / speedMultiplier}s ${
+        i * 0.12
+      }s infinite ease-in-out`,
+    };
+  };
+
+  const a: React.CSSProperties = {
+    ...style(1),
+    top: `${radiusValue}px`,
+    left: '0',
+  };
+  const b: React.CSSProperties = {
+    ...style(2),
+    top: `${quarter}px`,
+    left: `${quarter}px`,
+    transform: 'rotate(-45deg)',
+  };
+  const c: React.CSSProperties = {
+    ...style(3),
+    top: '0',
+    left: `${radiusValue}px`,
+    transform: 'rotate(90deg)',
+  };
+  const d: React.CSSProperties = {
+    ...style(4),
+    top: `${-1 * quarter}px`,
+    left: `${quarter}px`,
+    transform: 'rotate(45deg)',
+  };
+  const e: React.CSSProperties = {
+    ...style(5),
+    top: `${-1 * radiusValue}px`,
+    left: '0',
+  };
+  const f: React.CSSProperties = {
+    ...style(6),
+    top: `${-1 * quarter}px`,
+    left: `${-1 * quarter}px`,
+    transform: 'rotate(-45deg)',
+  };
+  const g: React.CSSProperties = {
+    ...style(7),
+    top: '0',
+    left: `${-1 * radiusValue}px`,
+    transform: 'rotate(90deg)',
+  };
+  const h: React.CSSProperties = {
+    ...style(8),
+    top: `${quarter}px`,
+    left: `${-1 * quarter}px`,
+    transform: 'rotate(45deg)',
+  };
+
+  if (!loading) {
+    return null;
+  }
+
+  return (
+    <span style={wrapper} {...additionalprops}>
+      <span style={a} />
+      <span style={b} />
+      <span style={c} />
+      <span style={d} />
+      <span style={e} />
+      <span style={f} />
+      <span style={g} />
+      <span style={h} />
+    </span>
+  );
+}
+
+export { FadeLoader };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
new file mode 100644
index 000000000..110f5c759
--- /dev/null
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -0,0 +1,26 @@
+export * from './text';
+export * from './button';
+export * from './section-title';
+export * from './input';
+export * from './tooltip';
+export * from './dropdown';
+export * from './divider';
+export * from './counter';
+export * from './toggle';
+export * from './checkbox';
+export * from './modal';
+export * from './navigation-buttons';
+export * from './tag';
+export * from './checkbox-list';
+export * from './notification-note';
+export * from './fade-loader';
+export * from './textarea';
+export * from './input-list';
+export * from './key-value-input-list';
+export * from './no-data-found';
+export * from './skeleton-loader';
+export * from './connection-status';
+export * from './nodes-data-flow';
+export * from './tab-list';
+export * from './auto-complete-input';
+export * from './drawer';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
new file mode 100644
index 000000000..67b935d7a
--- /dev/null
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -0,0 +1,156 @@
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+
+interface InputListProps {
+  initialValues?: string[];
+  title?: string;
+  tooltip?: string;
+  required?: boolean;
+  value?: string[];
+  onChange: (values: string[]) => void;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const InputRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+`;
+
+const DeleteButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+`;
+
+const AddButton = styled(Button)<{ disabled: boolean }>`
+  color: white;
+  background: transparent;
+  display: flex;
+  gap: 8px;
+  border: none;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  align-self: flex-start;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  transition: opacity 0.3s;
+`;
+
+const ButtonText = styled(Text)`
+  font-size: 14px;
+  font-weight: 500;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const InputList: React.FC<InputListProps> = ({
+  initialValues = [''],
+  title,
+  tooltip,
+  required,
+  onChange,
+  value = [''],
+}) => {
+  const [inputs, setInputs] = useState<string[]>(value || initialValues);
+
+  useEffect(() => {
+    if (initialValues.length > 0) {
+      onChange(initialValues);
+    }
+  }, [initialValues]);
+
+  const handleAddInput = () => {
+    setInputs([...inputs, '']);
+  };
+
+  const handleDeleteInput = (index: number) => {
+    const newInputs = inputs.filter((_, i) => i !== index);
+    setInputs(newInputs);
+    onChange(newInputs);
+  };
+
+  const handleInputChange = (value: string, index: number) => {
+    const newInputs = [...inputs];
+    newInputs[index] = value;
+    setInputs(newInputs);
+    onChange(newInputs);
+  };
+
+  // Check if any input field is empty
+  const isAddButtonDisabled = inputs.some((input) => input.trim() === '');
+
+  return (
+    <Container>
+      {title && (
+        <HeaderWrapper>
+          <Title>{title}</Title>
+          {!required && (
+            <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+              (optional)
+            </Text>
+          )}
+          {tooltip && (
+            <Tooltip text={tooltip || ''}>
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+                style={{ marginBottom: 4 }}
+              />
+            </Tooltip>
+          )}
+        </HeaderWrapper>
+      )}
+      {inputs.map((value, index) => (
+        <InputRow key={index}>
+          <Input
+            value={value}
+            onChange={(e) => handleInputChange(e.target.value, index)}
+          />
+          <DeleteButton onClick={() => handleDeleteInput(index)}>
+            <Image
+              src="/icons/common/trash.svg"
+              alt="Delete"
+              width={16}
+              height={16}
+            />
+          </DeleteButton>
+        </InputRow>
+      ))}
+      <AddButton
+        disabled={isAddButtonDisabled}
+        variant={'tertiary'}
+        onClick={handleAddInput}
+      >
+        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+        <ButtonText>ADD ATTRIBUTE</ButtonText>
+      </AddButton>
+    </Container>
+  );
+};
+
+export { InputList };
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
new file mode 100644
index 000000000..4e64e8151
--- /dev/null
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -0,0 +1,222 @@
+import Image from 'next/image';
+import React, { useState, forwardRef } from 'react';
+import { Text } from '../text';
+import styled, { css } from 'styled-components';
+import { Tooltip } from '../tooltip';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon?: string;
+  buttonLabel?: string;
+  onButtonClick?: () => void;
+  errorMessage?: string;
+  title?: string;
+  tooltip?: string;
+  required?: boolean;
+  initialValue?: string;
+}
+
+// Styled components remain the same as before
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+
+const InputWrapper = styled.div<{
+  isDisabled?: boolean;
+  hasError?: boolean;
+  isActive?: boolean;
+}>`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  gap: 12px;
+  transition: border-color 0.3s;
+  border-radius: 32px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+  ${({ isDisabled }) =>
+    isDisabled &&
+    css`
+      background-color: #555;
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+  ${({ hasError }) =>
+    hasError &&
+    css`
+      border-color: red;
+    `}
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      border-color: ${({ theme }) => theme.colors.secondary};
+    `}
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const StyledInput = styled.input<{ hasIcon?: string }>`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 14px;
+  padding-left: ${({ hasIcon }) => (hasIcon ? '0' : '16px')};
+  font-family: ${({ theme }) => theme.font_family.primary};
+  font-weight: 300;
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text};
+    font-family: ${({ theme }) => theme.font_family.primary};
+    opacity: 0.4;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 22px; /* 157.143% */
+  }
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 12px;
+`;
+
+const Button = styled.button`
+  background-color: ${({ theme }) => theme.colors.primary};
+  border: none;
+  color: #fff;
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  margin-left: 8px;
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const ErrorWrapper = styled.div`
+  position: relative;
+`;
+
+const ErrorMessage = styled(Text)`
+  color: red;
+  font-size: 12px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+  margin-bottom: 4px;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+// Wrap Input with forwardRef to handle the ref prop
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      icon,
+      buttonLabel,
+      onButtonClick,
+      errorMessage,
+      title,
+      tooltip,
+      required,
+      initialValue,
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useState<string>(initialValue || '');
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value);
+      if (onChange) {
+        onChange(e);
+      }
+    };
+
+    return (
+      <Container>
+        {title && (
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {!required && (
+              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+                (optional)
+              </Text>
+            )}
+            <Tooltip text={tooltip || ''}>
+              {tooltip && (
+                <Image
+                  src="/icons/common/info.svg"
+                  alt=""
+                  width={16}
+                  height={16}
+                  style={{ marginBottom: 4 }}
+                />
+              )}
+            </Tooltip>
+          </HeaderWrapper>
+        )}
+
+        <InputWrapper
+          isDisabled={props.disabled}
+          hasError={!!errorMessage}
+          isActive={!!props.autoFocus}
+        >
+          {icon && (
+            <IconWrapper>
+              <Image src={icon} alt="" width={14} height={14} />
+            </IconWrapper>
+          )}
+          <StyledInput
+            ref={ref} // Pass ref to the StyledInput
+            hasIcon={icon}
+            value={value}
+            onChange={handleInputChange}
+            {...props}
+          />
+          {buttonLabel && onButtonClick && (
+            <Button onClick={onButtonClick} disabled={props.disabled}>
+              {buttonLabel}
+            </Button>
+          )}
+        </InputWrapper>
+        {errorMessage && (
+          <ErrorWrapper>
+            <ErrorMessage>{errorMessage}</ErrorMessage>
+          </ErrorWrapper>
+        )}
+      </Container>
+    );
+  }
+);
+
+Input.displayName = 'Input'; // Set a display name for easier debugging
+export { Input };
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
new file mode 100644
index 000000000..cbd7904ea
--- /dev/null
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -0,0 +1,189 @@
+import Image from 'next/image';
+import React, { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+
+interface KeyValueInputsListProps {
+  initialKeyValuePairs?: { key: string; value: string }[];
+  value?: { key: string; value: string }[];
+  title?: string;
+  tooltip?: string;
+  required?: boolean;
+  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const Row = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 12px;
+`;
+
+const DeleteButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+`;
+
+const AddButton = styled(Button)<{ disabled: boolean }>`
+  color: white;
+  background: transparent;
+  display: flex;
+  gap: 8px;
+  border: none;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  align-self: flex-start;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  transition: opacity 0.3s;
+`;
+
+const ButtonText = styled(Text)`
+  font-size: 14px;
+  font-weight: 500;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+`;
+
+export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
+  initialKeyValuePairs = [{ key: '', value: '' }],
+  value = [{ key: '', value: '' }],
+  title,
+  tooltip,
+  required,
+  onChange,
+}) => {
+  const [keyValuePairs, setKeyValuePairs] = useState<
+    { key: string; value: string }[]
+  >(value || initialKeyValuePairs);
+
+  const validPairsRef = useRef<{ key: string; value: string }[]>([]);
+
+  useEffect(() => {
+    // Filter out rows where either key or value is empty
+    const validKeyValuePairs = keyValuePairs.filter(
+      (pair) => pair.key.trim() !== '' && pair.value.trim() !== ''
+    );
+
+    // Only trigger onChange if valid key-value pairs have changed
+    if (
+      JSON.stringify(validPairsRef.current) !==
+      JSON.stringify(validKeyValuePairs)
+    ) {
+      validPairsRef.current = validKeyValuePairs;
+      if (onChange) {
+        onChange(validKeyValuePairs);
+      }
+    }
+  }, [keyValuePairs, onChange]);
+
+  const handleAddRow = () => {
+    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }]);
+  };
+
+  const handleDeleteRow = (index: number) => {
+    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index));
+  };
+
+  const handleKeyChange = (key: string, index: number) => {
+    const newKeyValuePairs = [...keyValuePairs];
+    newKeyValuePairs[index].key = key;
+    setKeyValuePairs(newKeyValuePairs);
+  };
+
+  const handleValueChange = (value: string, index: number) => {
+    const newKeyValuePairs = [...keyValuePairs];
+    newKeyValuePairs[index].value = value;
+    setKeyValuePairs(newKeyValuePairs);
+  };
+
+  // Check if any key or value field is empty
+  const isAddButtonDisabled = keyValuePairs.some(
+    (pair) => pair.key.trim() === '' || pair.value.trim() === ''
+  );
+
+  return (
+    <Container>
+      {title && (
+        <Tooltip text={tooltip || ''}>
+          <HeaderWrapper>
+            <Title>{title}</Title>
+            {!required && (
+              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+                (optional)
+              </Text>
+            )}
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+                style={{ marginBottom: 4 }}
+              />
+            )}
+          </HeaderWrapper>
+        </Tooltip>
+      )}
+      {keyValuePairs.map((pair, index) => (
+        <Row key={index}>
+          <Input
+            value={pair.key}
+            onChange={(e) => handleKeyChange(e.target.value, index)}
+            placeholder="Define attribute"
+          />
+          <Image
+            src="/icons/common/arrow-right.svg"
+            alt="Arrow"
+            width={16}
+            height={16}
+          />
+          <Input
+            value={pair.value}
+            onChange={(e) => handleValueChange(e.target.value, index)}
+            placeholder="Define value"
+          />
+          <DeleteButton onClick={() => handleDeleteRow(index)}>
+            <Image
+              src="/icons/common/trash.svg"
+              alt="Delete"
+              width={16}
+              height={16}
+            />
+          </DeleteButton>
+        </Row>
+      ))}
+      <AddButton
+        disabled={isAddButtonDisabled}
+        variant={'tertiary'}
+        onClick={handleAddRow}
+      >
+        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+        <ButtonText>ADD ATTRIBUTE</ButtonText>
+      </AddButton>
+    </Container>
+  );
+};
+
+export default KeyValueInputsList;
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
new file mode 100644
index 000000000..bc0934d10
--- /dev/null
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -0,0 +1,139 @@
+import React, { useEffect } from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+
+interface ModalProps {
+  isOpen: boolean;
+  header?: {
+    title: string;
+  };
+  actionComponent?: React.ReactNode;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(17, 17, 17, 0.8);
+  backdrop-filter: blur(1px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+const ModalWrapper = styled.div`
+  background: ${({ theme }) => theme.colors.translucent_bg};
+  border-radius: 40px;
+  max-height: 84vh;
+  border: ${({ theme }) => `1px solid ${theme.colors.border}`};
+  box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8),
+    0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),
+    0px 10px 10px 0px rgba(17, 17, 17, 0.8),
+    0px 0px 8px 0px rgba(17, 17, 17, 0.8);
+`;
+
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 80px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+  padding: 0 24px;
+`;
+
+const ModalCloseButton = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const HeaderActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const ModalContent = styled.div``;
+
+const ModalTitleContainer = styled.div`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  pointer-events: none;
+`;
+
+const ModalTitle = styled(Text)`
+  text-transform: uppercase;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  pointer-events: auto;
+`;
+
+const CancelText = styled(Text)`
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 14px;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration: underline;
+  cursor: pointer;
+`;
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  header,
+  onClose,
+  children,
+  actionComponent,
+}) => {
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+
+  return ReactDOM.createPortal(
+    <Overlay>
+      <ModalWrapper>
+        {header && (
+          <ModalHeader>
+            <ModalCloseButton onClick={onClose}>
+              <Image
+                src="/icons/common/x.svg"
+                alt="close"
+                width={15}
+                height={12}
+              />
+              <CancelText>{'Cancel'}</CancelText>
+            </ModalCloseButton>
+            <ModalTitleContainer>
+              <ModalTitle>{header.title}</ModalTitle>
+            </ModalTitleContainer>
+            <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
+          </ModalHeader>
+        )}
+        <ModalContent>{children}</ModalContent>
+      </ModalWrapper>
+    </Overlay>,
+    document.body
+  );
+};
+
+export { Modal };
diff --git a/frontend/webapp/reuseable-components/navigation-buttons/index.tsx b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
new file mode 100644
index 000000000..ebd7aad27
--- /dev/null
+++ b/frontend/webapp/reuseable-components/navigation-buttons/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import { Button } from '../button';
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+
+interface NavigationButtonProps {
+  label: string;
+  iconSrc?: string;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary';
+  disabled?: boolean;
+}
+
+interface NavigationButtonsProps {
+  buttons: NavigationButtonProps[];
+}
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 91.6px;
+`;
+
+const ButtonText = styled(Text)`
+  text-decoration: underline;
+`;
+
+export const NavigationButtons: React.FC<NavigationButtonsProps> = ({
+  buttons,
+}) => {
+  function renderBackButton({
+    button,
+    index,
+  }: {
+    button: NavigationButtonProps;
+    index: number;
+  }) {
+    return buttons.length > 1 && button.iconSrc && index === 0;
+  }
+  return (
+    <ButtonsContainer>
+      {buttons.map((button, index) => (
+        <StyledButton
+          key={index}
+          variant={button.variant || 'secondary'}
+          onClick={button.onClick}
+          isDisabled={button.disabled}
+        >
+          {renderBackButton({ button, index }) && (
+            <Image
+              src={button?.iconSrc || ''}
+              alt={button.label}
+              width={8}
+              height={12}
+            />
+          )}
+          <ButtonText
+            color={
+              button.variant === 'primary'
+                ? theme.colors.dark_grey
+                : theme.colors.secondary
+            }
+            size={14}
+            family="secondary"
+          >
+            {button.label}
+          </ButtonText>
+          {button.iconSrc && !renderBackButton({ button, index }) && (
+            <Image
+              src={button.iconSrc}
+              alt={button.label}
+              width={8}
+              height={12}
+            />
+          )}
+        </StyledButton>
+      ))}
+    </ButtonsContainer>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/no-data-found/index.tsx b/frontend/webapp/reuseable-components/no-data-found/index.tsx
new file mode 100644
index 000000000..9698f502d
--- /dev/null
+++ b/frontend/webapp/reuseable-components/no-data-found/index.tsx
@@ -0,0 +1,54 @@
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../text';
+
+type NoDataFoundProps = {
+  title: string;
+  subTitle?: string;
+};
+
+const Title = styled(Text)`
+  color: #7a7a7a;
+  line-height: 24px;
+`;
+
+const SubTitle = styled(Text)`
+  color: #525252;
+  font-size: 14px;
+  font-weight: 200;
+  line-height: 20px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const NoDataFound: React.FC<NoDataFoundProps> = ({
+  title,
+  subTitle = 'Check your search phrase and try one more time',
+}) => {
+  return (
+    <Container>
+      <TitleWrapper>
+        <Image
+          src="/icons/common/no-data-found.svg"
+          alt="no-found"
+          width={16}
+          height={16}
+        />
+        <Title>{title}</Title>
+      </TitleWrapper>
+      {subTitle && <SubTitle>{subTitle}</SubTitle>}
+    </Container>
+  );
+};
+
+export { NoDataFound };
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
new file mode 100644
index 000000000..749030575
--- /dev/null
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -0,0 +1,222 @@
+import theme from '@/styles/theme';
+import { Node, Edge } from 'react-flow-renderer';
+import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+import {
+  ActionData,
+  ActionItem,
+  ActualDestination,
+  K8sActualSource,
+} from '@/types';
+
+// Constants
+const NODE_HEIGHT = 80;
+
+const STROKE_COLOR = theme.colors.border;
+const ACTION_ICON_PATH = '/icons/actions/';
+const HEADER_ICON_PATH = '/icons/overview/';
+
+// Helper to create a node
+const createNode = (
+  id: string,
+  type: string,
+  x: number,
+  y: number,
+  data: Record<string, any>
+): Node => ({
+  id,
+  type,
+  position: { x, y },
+  data,
+});
+
+// Helper to create an edge
+const createEdge = (
+  id: string,
+  source: string,
+  target: string,
+  animated = true
+): Edge => ({
+  id,
+  source,
+  target,
+  animated,
+  style: { stroke: STROKE_COLOR },
+});
+
+// Extract the monitors from exported signals
+const extractMonitors = (exportedSignals: Record<string, boolean>) =>
+  Object.keys(exportedSignals).filter(
+    (signal) => exportedSignals[signal] === true
+  );
+
+export const buildNodesAndEdges = ({
+  sources,
+  actions,
+  destinations,
+  columnWidth,
+  containerWidth,
+}: {
+  sources: K8sActualSource[];
+  actions: ActionData[];
+  destinations: ActualDestination[];
+  columnWidth: number;
+  containerWidth: number;
+}) => {
+  // Calculate x positions for each column
+  const leftColumnX = 0;
+  const rightColumnX = containerWidth - columnWidth;
+  const centerColumnX = (containerWidth - columnWidth) / 2;
+
+  // Build Source Nodes
+  const sourcesNode: Node[] = [
+    createNode('header-source', 'header', leftColumnX, 0, {
+      icon: `${HEADER_ICON_PATH}sources.svg`,
+      title: 'Sources',
+      tagValue: sources.length,
+    }),
+    ...sources.map((source, index) =>
+      createNode(
+        `source-${index}`,
+        'base',
+        leftColumnX,
+        NODE_HEIGHT * (index + 1),
+        {
+          type: 'source',
+          title:
+            source.name +
+            (source.reportedName ? ` (${source.reportedName})` : ''),
+          subTitle: source.kind,
+          imageUri: getMainContainerLanguageLogo(source),
+          status: 'healthy',
+          id: {
+            kind: source.kind,
+            name: source.name,
+            namespace: source.namespace,
+          },
+        }
+      )
+    ),
+  ];
+
+  // Build Destination Nodes
+  const destinationNode: Node[] = [
+    createNode('header-destination', 'header', rightColumnX, 0, {
+      icon: `${HEADER_ICON_PATH}destinations.svg`,
+      title: 'Destinations',
+      tagValue: destinations.length,
+    }),
+    ...destinations.map((destination, index) =>
+      createNode(
+        `destination-${index}`,
+        'base',
+        rightColumnX,
+        NODE_HEIGHT * (index + 1),
+        {
+          type: 'destination',
+          title: destination.name,
+          subTitle: destination.destinationType.displayName,
+          imageUri: destination.destinationType.imageUrl,
+          status: 'healthy',
+          monitors: extractMonitors(destination.exportedSignals),
+          id: destination.id,
+        }
+      )
+    ),
+  ];
+
+  // Build Action Nodes
+  const actionsNode: Node[] = [
+    createNode('header-action', 'header', centerColumnX, 0, {
+      icon: `${HEADER_ICON_PATH}actions.svg`,
+      title: 'Actions',
+      tagValue: actions.length,
+    }),
+    ...actions.map((action, index) => {
+      const actionSpec: ActionItem =
+        typeof action.spec === 'string'
+          ? JSON.parse(action.spec)
+          : (action.spec as ActionItem);
+
+      return createNode(
+        `action-${index}`,
+        'base',
+        centerColumnX,
+        NODE_HEIGHT * (index + 1),
+        {
+          type: 'action',
+          title: actionSpec.actionName,
+          subTitle: action.type,
+          imageUri: `${ACTION_ICON_PATH}${action.type.toLowerCase()}.svg`,
+          monitors: actionSpec.signals,
+          status: 'healthy',
+          id: action.id,
+        }
+      );
+    }),
+  ];
+
+  if (actionsNode.length === 1) {
+    actionsNode.push(
+      createNode(
+        `action-0`,
+        'addAction',
+        centerColumnX,
+        NODE_HEIGHT * (actions.length + 1),
+        {
+          type: 'addAction',
+          title: 'ADD ACTION',
+          subTitle: '',
+          imageUri: `${ACTION_ICON_PATH}add-action.svg`,
+          status: 'healthy',
+          onClick: () => console.log('Add Action'),
+        }
+      )
+    );
+  }
+
+  // Combine all nodes
+  const nodes = [...sourcesNode, ...destinationNode, ...actionsNode];
+
+  // Build edges - connecting sources to actions, and actions to destinations
+  const edges: Edge[] = [];
+
+  // Connect sources to actions
+  const sourceToActionEdges: Edge[] = sources.map((_, sourceIndex) => {
+    const actionIndex =
+      actionsNode.length === 2 ? 0 : sourceIndex % actions.length;
+    return createEdge(
+      `source-${sourceIndex}-to-action-${actionIndex}`,
+      `source-${sourceIndex}`,
+      `action-${actionIndex}`,
+      false
+    );
+  });
+  // Connect actions to destinations
+  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) => {
+    return destinations.map((_, destinationIndex) =>
+      createEdge(
+        `action-${actionIndex}-to-destination-${destinationIndex}`,
+        `action-${actionIndex}`,
+        `destination-${destinationIndex}`
+      )
+    );
+  });
+
+  if (actions.length === 0) {
+    for (let i = 0; i < destinations.length; i++) {
+      actionToDestinationEdges.push(
+        createEdge(
+          `action-0-to-destination-${i}`,
+          `action-0`,
+          `destination-${i}`,
+          false
+        )
+      );
+    }
+  }
+
+  // Combine all edges
+  edges.push(...sourceToActionEdges, ...actionToDestinationEdges);
+
+  return { nodes, edges };
+};
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
new file mode 100644
index 000000000..53e684fd9
--- /dev/null
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -0,0 +1,39 @@
+'use client';
+import React from 'react';
+import '@xyflow/react/dist/style.css';
+import BaseNode from './nodes/base-node';
+import { ReactFlow } from '@xyflow/react';
+import headerNode from './nodes/header-node';
+import AddActionNode from './nodes/add-action-node';
+
+const nodeTypes = {
+  base: BaseNode,
+  header: headerNode,
+  addAction: AddActionNode,
+};
+
+interface NodeBaseDataFlowProps {
+  nodes: any[];
+  edges: any[];
+  onNodeClick?: (event: React.MouseEvent, object: any) => void;
+}
+
+export function NodeBaseDataFlow({
+  nodes,
+  edges,
+  onNodeClick,
+}: NodeBaseDataFlowProps) {
+  return (
+    <div style={{ height: 'calc(100vh - 100px)' }}>
+      <ReactFlow
+        nodeTypes={nodeTypes}
+        nodes={nodes}
+        edges={edges}
+        zoomOnScroll={false}
+        onNodeClick={onNodeClick}
+      />
+    </div>
+  );
+}
+
+export * from './builder';
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
new file mode 100644
index 000000000..a9bddaf50
--- /dev/null
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
@@ -0,0 +1,77 @@
+import Image from 'next/image';
+import React, { memo } from 'react';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+import { Handle, Position } from '@xyflow/react';
+
+const BaseNodeContainer = styled.div`
+  display: flex;
+  width: 296px;
+  padding: 16px 24px 16px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: 16px;
+  border: 1px dashed ${({ theme }) => theme.colors.border};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.white_opacity['004']};
+  }
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  font-weight: 600;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+`;
+
+const SubTitle = styled(Text)`
+  font-size: 12px;
+  color: ${({ theme }) => theme.text.grey};
+`;
+
+interface BaseNodeProps {
+  isConnectable: boolean;
+}
+
+export default memo(({ isConnectable }: BaseNodeProps) => {
+  return (
+    <BaseNodeContainer>
+      <TitleWrapper>
+        <Image
+          src={'/icons/common/plus.svg'}
+          width={16}
+          height={16}
+          alt="plus"
+        />
+        <Title>{'ADD ACTION'}</Title>
+      </TitleWrapper>
+      <SubTitle>{'Add first action to modify the OpenTelemetry data'}</SubTitle>
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="action-input"
+        isConnectable={isConnectable}
+        style={{ visibility: 'hidden' }}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="action-output"
+        isConnectable={isConnectable}
+        style={{ visibility: 'hidden' }}
+      />
+    </BaseNodeContainer>
+  );
+});
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
new file mode 100644
index 000000000..2d2ecb397
--- /dev/null
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
@@ -0,0 +1,167 @@
+import { Text } from '@/reuseable-components';
+import { Handle, Position } from '@xyflow/react';
+import Image from 'next/image';
+import React, { memo } from 'react';
+import styled from 'styled-components';
+
+const BaseNodeContainer = styled.div`
+  display: flex;
+  padding: 16px 24px 16px 16px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 16px;
+  width: 296px;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.colors.white_opacity['004']};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.white_opacity['008']};
+  }
+`;
+
+const SourceIconWrapper = styled.div`
+  display: flex;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(249, 249, 249, 0.06) 0%,
+    rgba(249, 249, 249, 0.02) 100%
+  );
+`;
+
+const BodyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 36px;
+  justify-content: space-between;
+`;
+
+const FooterWrapper = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+
+const FooterText = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  font-size: 10px;
+`;
+
+export interface NodeDataProps {
+  type: 'source' | 'action' | 'destination';
+  title: string;
+  subTitle: string;
+  imageUri: string;
+  monitors?: string[];
+  status: 'healthy' | 'unhealthy';
+}
+
+interface BaseNodeProps {
+  data: NodeDataProps;
+  isConnectable: boolean;
+}
+
+export default memo(({ isConnectable, data }: BaseNodeProps) => {
+  const { title, subTitle, imageUri, type, monitors } = data;
+
+  function renderHandles() {
+    switch (type) {
+      case 'source':
+        return (
+          <>
+            {/* Source nodes have an output handle */}
+            <Handle
+              type="source"
+              position={Position.Right}
+              id="source-output"
+              style={{ visibility: 'hidden' }}
+              isConnectable={isConnectable}
+            />
+          </>
+        );
+      case 'action':
+        return (
+          <>
+            {/* Action nodes have both input and output handles */}
+            <Handle
+              type="target"
+              position={Position.Left}
+              id="action-input"
+              isConnectable={isConnectable}
+              style={{ visibility: 'hidden' }}
+            />
+            <Handle
+              type="source"
+              position={Position.Right}
+              id="action-output"
+              isConnectable={isConnectable}
+              style={{ visibility: 'hidden' }}
+            />
+          </>
+        );
+      case 'destination':
+        return (
+          <>
+            {/* Destination nodes only have an input handle */}
+            <Handle
+              style={{ visibility: 'hidden' }}
+              type="target"
+              position={Position.Left}
+              id="destination-input"
+              isConnectable={isConnectable}
+            />
+          </>
+        );
+      default:
+        return null;
+    }
+  }
+
+  function renderMonitors() {
+    if (monitors) {
+      return (
+        <FooterWrapper>
+          <FooterText>{'·'}</FooterText>
+          {monitors.map((monitor, index) => (
+            <Image
+              key={index}
+              src={`/icons/monitors/${monitor}.svg`}
+              width={10}
+              height={10}
+              alt={monitor}
+            />
+          ))}
+        </FooterWrapper>
+      );
+    }
+    return null;
+  }
+
+  return (
+    <BaseNodeContainer>
+      <SourceIconWrapper>
+        <Image
+          src={imageUri || '/icons/common/folder.svg'}
+          width={20}
+          height={20}
+          alt="source"
+        />
+      </SourceIconWrapper>
+      <BodyWrapper>
+        <Text>{title}</Text>
+        <FooterWrapper>
+          <FooterText>{subTitle}</FooterText>
+
+          {renderMonitors()}
+        </FooterWrapper>
+      </BodyWrapper>
+      {renderHandles()}
+    </BaseNodeContainer>
+  );
+});
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
new file mode 100644
index 000000000..f8060475b
--- /dev/null
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
@@ -0,0 +1,54 @@
+'use client';
+import React, { memo } from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+const ColumnContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0px 16px 0px;
+  width: 336px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+`;
+
+const TagValueContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  padding: 0px 8px;
+  border-radius: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+`;
+
+const Title = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+`;
+
+const TagText = styled(Title)`
+  font-family: ${({ theme }) => theme.font_family.secondary};
+`;
+
+interface Column {
+  icon: string;
+  title: string;
+  tagValue: number;
+}
+
+interface HeaderNodeProps {
+  data: Column;
+}
+
+export default memo(({ data }: HeaderNodeProps) => {
+  return (
+    <ColumnContainer>
+      <Image src={data.icon} width={16} height={16} alt={data.title} />
+      <Title size={14}>{data.title}</Title>
+      <TagValueContainer>
+        <TagText size={12}>{data.tagValue}</TagText>
+      </TagValueContainer>
+    </ColumnContainer>
+  );
+});
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
new file mode 100644
index 000000000..457ec7cf4
--- /dev/null
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import Image from 'next/image';
+import { Text } from '../text';
+
+// Define the notification types
+type NotificationType = 'warning' | 'error' | 'success' | 'info';
+
+interface NotificationProps {
+  type: NotificationType;
+  text: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+const NotificationContainer = styled.div<{ type: NotificationType }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-radius: 32px;
+
+  background-color: ${({ type }) => {
+    switch (type) {
+      case 'warning':
+        return '#472300'; // Orange
+      case 'error':
+        return 'rgba(226, 90, 90, 0.12);';
+      case 'success':
+        return '#28A745'; // Green
+      case 'info':
+        return '#181944'; // Blue
+      default:
+        return '#2B2D66'; // Default to info color
+    }
+  }};
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Title = styled(Text)<{ type: NotificationType }>`
+  font-size: 14px;
+  color: ${({ type }) => {
+    switch (type) {
+      case 'warning':
+        return '#E9CF35';
+      case 'error':
+        return '#E25A5A';
+      case 'success':
+        return '#28A745';
+      case 'info':
+        return '#AABEF7';
+      default:
+        return '#2B2D66';
+    }
+  }};
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ActionButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+const ActionButton = styled(Text)`
+  text-decoration: underline;
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+`;
+
+const NotificationIcon = ({ type }: { type: NotificationType }) => {
+  switch (type) {
+    case 'warning':
+      return (
+        <Image
+          src="/icons/notification/warning-icon.svg"
+          alt="warning"
+          width={16}
+          height={16}
+        />
+      );
+    case 'error':
+      return (
+        <Image
+          src="/icons/notification/error-icon.svg"
+          alt="error"
+          width={16}
+          height={16}
+        />
+      );
+    case 'success':
+      return (
+        <Image
+          src="/icons/notification/success-icon.svg"
+          alt="success"
+          width={16}
+          height={16}
+        />
+      );
+    case 'info':
+    default:
+      return (
+        <Image src="/brand/odigos-icon.svg" alt="info" width={16} height={16} />
+      );
+  }
+};
+
+const NotificationNote: React.FC<NotificationProps> = ({
+  type,
+  text,
+  action,
+}) => {
+  return (
+    <NotificationContainer type={type}>
+      <TitleWrapper>
+        <IconWrapper>
+          <NotificationIcon type={type} />
+        </IconWrapper>
+        <Title type={type}>{text}</Title>
+      </TitleWrapper>
+      {action && (
+        <ActionButtonWrapper onClick={action.onClick}>
+          <ActionButton decoration="under">{action.label}</ActionButton>
+        </ActionButtonWrapper>
+      )}
+    </NotificationContainer>
+  );
+};
+
+export { NotificationNote };
diff --git a/frontend/webapp/reuseable-components/section-title/index.tsx b/frontend/webapp/reuseable-components/section-title/index.tsx
new file mode 100644
index 000000000..7bc506680
--- /dev/null
+++ b/frontend/webapp/reuseable-components/section-title/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Text } from '../text';
+import styled from 'styled-components';
+import Image from 'next/image';
+
+interface SectionTitleProps {
+  title: string;
+  description: string;
+  actionButton?: React.ReactNode;
+  size?: 'small' | 'medium' | 'large';
+  icon?: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const Title = styled(Text)``;
+
+const Description = styled(Text)``;
+
+const SectionTitle: React.FC<SectionTitleProps> = ({
+  title,
+  description,
+  actionButton,
+  size = 'medium',
+  icon,
+}) => {
+  const titleSize = size === 'small' ? 16 : size === 'medium' ? 20 : 24;
+  const descriptionSize = size === 'small' ? 12 : size === 'medium' ? 14 : 16;
+  return (
+    <Container>
+      <HeaderWrapper>
+        <TitleContainer>
+          {icon && <Image alt="icon" src={icon} width={14} height={24} />}
+          <Title weight={300} size={titleSize}>
+            {title}
+          </Title>
+        </TitleContainer>
+        <Description weight={200} opacity={0.8} size={descriptionSize}>
+          {description}
+        </Description>
+      </HeaderWrapper>
+      {actionButton && <div>{actionButton}</div>}
+    </Container>
+  );
+};
+
+export { SectionTitle };
diff --git a/frontend/webapp/reuseable-components/skeleton-loader/index.tsx b/frontend/webapp/reuseable-components/skeleton-loader/index.tsx
new file mode 100644
index 000000000..0b99a5cf7
--- /dev/null
+++ b/frontend/webapp/reuseable-components/skeleton-loader/index.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const shimmer = keyframes`
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+`;
+
+const SkeletonLoaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const SkeletonItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const SkeletonThumbnail = styled.div`
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  background: ${({ theme }) =>
+    `linear-gradient(90deg, ${theme.colors.primary} 25%, ${theme.colors.primary} 50%, ${theme.colors.dark_grey} 75%)`};
+  background-size: 200% 100%;
+  animation: ${shimmer} 10s infinite linear;
+`;
+
+const SkeletonText = styled.div`
+  flex: 1;
+`;
+
+const SkeletonLine = styled.div<{ width: string }>`
+  height: 16px;
+  margin-bottom: 0.5rem;
+  background: ${({ theme }) =>
+    `linear-gradient(90deg, ${theme.colors.primary} 25%, ${theme.colors.primary} 50%, ${theme.colors.dark_grey} 75%)`};
+  background-size: 200% 100%;
+  animation: ${shimmer} 1.5s infinite linear;
+  width: ${(props) => props.width};
+  border-radius: 4px;
+`;
+
+const SkeletonLoader: React.FC<{ size: number }> = ({ size = 5 }) => {
+  return (
+    <SkeletonLoaderWrapper>
+      {[...Array(size)].map((_, index) => (
+        <SkeletonItem key={index}>
+          <SkeletonThumbnail />
+          <SkeletonText>
+            <SkeletonLine width="80%" />
+            <SkeletonLine width="100%" />
+          </SkeletonText>
+        </SkeletonItem>
+      ))}
+    </SkeletonLoaderWrapper>
+  );
+};
+
+export { SkeletonLoader };
diff --git a/frontend/webapp/reuseable-components/tab-list/index.tsx b/frontend/webapp/reuseable-components/tab-list/index.tsx
new file mode 100644
index 000000000..0b092c475
--- /dev/null
+++ b/frontend/webapp/reuseable-components/tab-list/index.tsx
@@ -0,0 +1,82 @@
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../text';
+
+// Define types for the Tab component props
+interface TabProps {
+  title: string;
+  icon: string;
+  selected: boolean;
+  onClick: () => void;
+}
+
+// Define types for the TabList component props
+interface TabListProps {
+  tabs?: TabProps[];
+}
+
+// Styled-components for Tab and TabList
+const TabContainer = styled.div<{ selected: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0px 12px;
+  border-radius: 32px;
+  cursor: pointer;
+  background-color: ${({ selected, theme }) =>
+    selected ? theme.colors.selected_hover : theme.colors.card};
+  transition: background-color 0.3s, color 0.3s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.selected_hover};
+  }
+
+  svg {
+    margin-right: 8px;
+  }
+`;
+
+const TabListContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+// Tab component
+const Tab: React.FC<TabProps> = ({ title, icon, selected, onClick }) => {
+  return (
+    <TabContainer selected={selected} onClick={onClick}>
+      <Image src={icon} width={14} height={14} alt={title} />
+      <Text size={14}>{title}</Text>
+    </TabContainer>
+  );
+};
+
+const TABS = [
+  {
+    title: 'Overview',
+    icon: '/icons/overview/overview.svg',
+    selected: true,
+    onClick: () => {},
+  },
+];
+
+// TabList component
+const TabList: React.FC<TabListProps> = ({ tabs = TABS }) => {
+  return (
+    <TabListContainer>
+      {tabs.map((tab, index) => (
+        <Tab
+          key={index}
+          title={tab.title}
+          icon={tab.icon}
+          selected={tab.selected}
+          onClick={tab.onClick}
+        />
+      ))}
+    </TabListContainer>
+  );
+};
+
+export { TabList };
diff --git a/frontend/webapp/reuseable-components/tag/index.tsx b/frontend/webapp/reuseable-components/tag/index.tsx
new file mode 100644
index 000000000..235d14469
--- /dev/null
+++ b/frontend/webapp/reuseable-components/tag/index.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+interface TagProps {
+  id: string;
+  children: React.ReactNode;
+  isSelected: boolean;
+  isDisabled?: boolean;
+  onClick: (id: string) => void;
+}
+
+const TagContainer = styled.div<{ isSelected: boolean; isDisabled: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  gap: 6px;
+  padding: 0 12px;
+  border-radius: 32px;
+  background-color: ${({ theme, isSelected }) =>
+    isSelected ? theme.colors.primary : theme.colors.translucent_bg};
+  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
+  ${({ isDisabled, theme }) =>
+    !isDisabled &&
+    css`
+      &:hover {
+        background-color: ${theme.colors.primary};
+      }
+    `}
+`;
+
+const Tag: React.FC<TagProps> = ({
+  id,
+  isSelected,
+  isDisabled = false,
+  onClick,
+  children,
+}) => {
+  const handleClick = () => {
+    if (!isDisabled) {
+      onClick(id);
+    }
+  };
+
+  return (
+    <TagContainer
+      isSelected={isSelected}
+      isDisabled={isDisabled}
+      onClick={handleClick}
+      role="button"
+      aria-disabled={isDisabled}
+      aria-pressed={isSelected}
+    >
+      {children}
+    </TagContainer>
+  );
+};
+
+export { Tag };
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
new file mode 100644
index 000000000..393e02dcc
--- /dev/null
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface TextProps {
+  children: React.ReactNode;
+  color?: string;
+  size?: number;
+  weight?: number;
+  align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
+  opacity?: number;
+  decoration?: string;
+}
+
+const TextWrapper = styled.div<{
+  color?: string;
+  size?: number;
+  weight?: number;
+  align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
+  opacity?: number;
+  decoration?: string;
+}>`
+  color: ${({ color, theme }) => color || theme.colors.text};
+  font-size: ${({ size }) => (size !== undefined ? size : 16)}px;
+  font-weight: ${({ weight }) => (weight !== undefined ? weight : 300)};
+  text-align: ${({ align }) => align || 'left'};
+  opacity: ${({ opacity }) => (opacity !== undefined ? opacity : 1)};
+  text-decoration: ${({ decoration }) => decoration || 'none'};
+  font-family: ${({ theme, family }) => {
+    if (family === 'secondary') {
+      return theme.font_family.secondary;
+    }
+    return theme.font_family.primary;
+  }};
+`;
+
+const Text: React.FC<TextProps> = ({ children, ...props }) => {
+  return <TextWrapper {...props}>{children}</TextWrapper>;
+};
+
+export { Text };
diff --git a/frontend/webapp/reuseable-components/textarea/index.tsx b/frontend/webapp/reuseable-components/textarea/index.tsx
new file mode 100644
index 000000000..e38121b70
--- /dev/null
+++ b/frontend/webapp/reuseable-components/textarea/index.tsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled, { css } from 'styled-components';
+
+interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  errorMessage?: string;
+  title?: string;
+  tooltip?: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+
+const InputWrapper = styled.div<{
+  isDisabled?: boolean;
+  hasError?: boolean;
+  isActive?: boolean;
+}>`
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  transition: border-color 0.3s;
+  border-radius: 24px;
+  border: 1px solid rgba(249, 249, 249, 0.24);
+  ${({ isDisabled }) =>
+    isDisabled &&
+    css`
+      background-color: #555;
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
+
+  ${({ hasError }) =>
+    hasError &&
+    css`
+      border-color: red;
+    `}
+
+  ${({ isActive }) =>
+    isActive &&
+    css`
+      border-color: ${({ theme }) => theme.colors.secondary};
+    `}
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
+const StyledTextArea = styled.textarea<{}>`
+  flex: 1;
+  border: none;
+  outline: none;
+  background: none;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 14px;
+  padding: 12px 20px;
+  font-family: ${({ theme }) => theme.font_family.primary};
+  font-weight: 300;
+  line-height: 22px;
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text};
+    font-family: ${({ theme }) => theme.font_family.primary};
+    opacity: 0.4;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 22px; /* 157.143% */
+  }
+
+  &:disabled {
+    background-color: #555;
+    cursor: not-allowed;
+  }
+`;
+
+const ErrorWrapper = styled.div`
+  position: relative;
+`;
+
+const ErrorMessage = styled(Text)`
+  color: red;
+  font-size: 12px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+  margin-bottom: 4px;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const TextArea: React.FC<TextAreaProps> = ({
+  errorMessage,
+  title,
+  tooltip,
+  ...props
+}) => {
+  return (
+    <Container>
+      {title && (
+        <HeaderWrapper>
+          <Title>{title}</Title>
+          <Tooltip text={tooltip || ''}>
+            {tooltip && (
+              <Image
+                src="/icons/common/info.svg"
+                alt=""
+                width={16}
+                height={16}
+                style={{ marginBottom: 4 }}
+              />
+            )}
+          </Tooltip>
+        </HeaderWrapper>
+      )}
+
+      <InputWrapper
+        isDisabled={props.disabled}
+        hasError={!!errorMessage}
+        isActive={!!props.autoFocus}
+      >
+        <StyledTextArea {...props} />
+      </InputWrapper>
+      {errorMessage && (
+        <ErrorWrapper>
+          <ErrorMessage>{errorMessage}</ErrorMessage>
+        </ErrorWrapper>
+      )}
+    </Container>
+  );
+};
+
+export { TextArea };
diff --git a/frontend/webapp/reuseable-components/toggle/index.tsx b/frontend/webapp/reuseable-components/toggle/index.tsx
new file mode 100644
index 000000000..893fd788e
--- /dev/null
+++ b/frontend/webapp/reuseable-components/toggle/index.tsx
@@ -0,0 +1,85 @@
+import Image from 'next/image';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+
+interface ToggleProps {
+  title: string;
+  tooltip?: string;
+  initialValue?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+const Container = styled.div<{ disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+`;
+
+const ToggleSwitch = styled.div<{ isActive: boolean; disabled?: boolean }>`
+  width: 24px;
+  height: 12px;
+  border: 1px dashed #aaa;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  background-color: ${({ isActive, theme }) =>
+    isActive ? theme.colors.primary : 'transparent'};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ isActive }) => (isActive ? 1 : 0.4)};
+  transition: background-color 0.3s, opacity 0.3s;
+  &::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.colors.secondary};
+    transform: ${({ isActive }) =>
+      isActive ? 'translateX(12px)' : 'translateX(0)'};
+    transition: transform 0.3s;
+  }
+`;
+
+const Toggle: React.FC<ToggleProps> = ({
+  title,
+  tooltip,
+  initialValue = false,
+  onChange,
+  disabled,
+}) => {
+  const [isActive, setIsActive] = useState(initialValue);
+
+  useEffect(() => {
+    setIsActive(initialValue);
+  }, [initialValue]);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      const newValue = !isActive;
+      setIsActive(newValue);
+      if (onChange) {
+        onChange(newValue);
+      }
+    }
+  };
+
+  return (
+    <Tooltip text={tooltip || ''}>
+      <Container disabled={disabled} onClick={handleToggle}>
+        <ToggleSwitch isActive={isActive} disabled={disabled} />
+        <Text size={14}>{title}</Text>
+        {tooltip && (
+          <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
+        )}
+      </Container>
+    </Tooltip>
+  );
+};
+
+export { Toggle };
diff --git a/frontend/webapp/reuseable-components/tooltip/index.tsx b/frontend/webapp/reuseable-components/tooltip/index.tsx
new file mode 100644
index 000000000..c5de22281
--- /dev/null
+++ b/frontend/webapp/reuseable-components/tooltip/index.tsx
@@ -0,0 +1,80 @@
+import React, { useState, useRef, ReactNode, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { Text } from '../text';
+
+interface TooltipProps {
+  text: ReactNode;
+  children: ReactNode;
+}
+
+const TooltipWrapper = styled.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+`;
+
+const TooltipContent = styled.div<{ top: number; left: number }>`
+  position: absolute;
+  top: ${(props) => props.top}px;
+  left: ${(props) => props.left}px;
+  transform: translateY(-100%);
+  border-radius: 32px;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  color: ${({ theme }) => theme.text.primary};
+  padding: 16px;
+  z-index: 9999;
+  pointer-events: none;
+  max-width: 300px;
+`;
+
+const Tooltip: React.FC<TooltipProps> = ({ text, children }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (wrapperRef.current) {
+        const { top, left, height } =
+          wrapperRef.current.getBoundingClientRect();
+        setPosition({
+          top: top + window.scrollY - 10, // Adjust the offset for the tooltip to be above the element
+          left: left + window.scrollX,
+        });
+      }
+    };
+
+    if (isHovered) {
+      document.addEventListener('mousemove', handleMouseMove);
+    } else {
+      document.removeEventListener('mousemove', handleMouseMove);
+    }
+
+    return () => document.removeEventListener('mousemove', handleMouseMove);
+  }, [isHovered]);
+
+  const tooltipContent = (
+    <TooltipContent top={position.top} left={position.left}>
+      <Text size={14}>{text}</Text>
+    </TooltipContent>
+  );
+
+  if (text === '') {
+    return <>{children}</>;
+  }
+
+  return (
+    <TooltipWrapper
+      ref={wrapperRef}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {children}
+      {isHovered && ReactDOM.createPortal(tooltipContent, document.body)}
+    </TooltipWrapper>
+  );
+};
+
+export { Tooltip };
diff --git a/frontend/webapp/store/index.ts b/frontend/webapp/store/index.ts
index 2d6312c61..aa72ad258 100644
--- a/frontend/webapp/store/index.ts
+++ b/frontend/webapp/store/index.ts
@@ -1,8 +1,7 @@
-import { appReducer, notificationReducer } from './slices';
+import { notificationReducer } from './slices';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
 
 const rootReducer = combineReducers({
-  app: appReducer,
   notification: notificationReducer,
 });
 
@@ -16,3 +15,5 @@ export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 
 export * from './slices';
+export * from './useAppStore';
+export * from './useDrawerStore';
diff --git a/frontend/webapp/store/slices/app-slice.ts b/frontend/webapp/store/slices/app-slice.ts
deleted file mode 100644
index 66266f246..000000000
--- a/frontend/webapp/store/slices/app-slice.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import type { PayloadAction } from '@reduxjs/toolkit';
-
-export interface IAppState {
-  sources: any;
-}
-
-const initialState: IAppState = {
-  sources: {},
-};
-
-export const appSlice = createSlice({
-  name: 'app',
-  initialState,
-  reducers: {
-    setSources: (state, action: PayloadAction<any>) => {
-      state.sources = action.payload;
-    },
-  },
-});
-
-// Action creators are generated for each case reducer function
-export const { setSources } = appSlice.actions;
-
-export const appReducer = appSlice.reducer;
diff --git a/frontend/webapp/store/slices/index.ts b/frontend/webapp/store/slices/index.ts
index d40a089ee..981b2f31a 100644
--- a/frontend/webapp/store/slices/index.ts
+++ b/frontend/webapp/store/slices/index.ts
@@ -1,2 +1 @@
-export * from './app-slice';
 export * from './notification-slice';
diff --git a/frontend/webapp/store/useAppStore.ts b/frontend/webapp/store/useAppStore.ts
new file mode 100644
index 000000000..7a814c514
--- /dev/null
+++ b/frontend/webapp/store/useAppStore.ts
@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+import { ConfiguredDestination, K8sActualSource } from '@/types';
+
+export interface IAppState {
+  sources: { [key: string]: K8sActualSource[] };
+  namespaceFutureSelectAppsList: { [key: string]: boolean };
+  configuredDestinationsList: ConfiguredDestination[];
+}
+
+const useAppStore = create<
+  IAppState & {
+    setSources: (sources: { [key: string]: K8sActualSource[] }) => void;
+    setNamespaceFutureSelectAppsList: (list: {
+      [key: string]: boolean;
+    }) => void;
+    addConfiguredDestination: (destination: ConfiguredDestination) => void;
+    setConfiguredDestinationsList: (list: ConfiguredDestination[]) => void;
+    resetSources: () => void;
+    resetState: () => void;
+  }
+>((set) => ({
+  sources: {},
+  namespaceFutureSelectAppsList: {},
+  configuredDestinationsList: [],
+
+  setSources: (sources) => set({ sources }),
+
+  setNamespaceFutureSelectAppsList: (list) =>
+    set({ namespaceFutureSelectAppsList: list }),
+
+  addConfiguredDestination: (destination) =>
+    set((state) => ({
+      configuredDestinationsList: [
+        ...state.configuredDestinationsList,
+        destination,
+      ],
+    })),
+
+  setConfiguredDestinationsList: (list) =>
+    set({ configuredDestinationsList: list }),
+
+  resetSources: () =>
+    set((state) => ({
+      sources: {},
+      namespaceFutureSelectAppsList: {},
+    })),
+
+  resetState: () =>
+    set(() => ({
+      sources: {},
+      namespaceFutureSelectAppsList: {},
+      configuredDestinationsList: [],
+    })),
+}));
+
+export { useAppStore };
diff --git a/frontend/webapp/store/useDrawerStore.tsx b/frontend/webapp/store/useDrawerStore.tsx
new file mode 100644
index 000000000..863dda558
--- /dev/null
+++ b/frontend/webapp/store/useDrawerStore.tsx
@@ -0,0 +1,28 @@
+// drawerStore.ts
+import { create } from 'zustand';
+import { ActualDestination, K8sActualSource, WorkloadId } from '@/types';
+
+type ItemType = 'source' | 'action' | 'destination';
+
+interface BaseItem {
+  id: string | WorkloadId;
+  item?: K8sActualSource | ActualDestination;
+  type: ItemType;
+  // Add common properties here
+}
+
+interface DrawerStoreState {
+  selectedItem: BaseItem | null;
+  setSelectedItem: (item: BaseItem | null) => void;
+  isDrawerOpen: boolean;
+  openDrawer: () => void;
+  closeDrawer: () => void;
+}
+
+export const useDrawerStore = create<DrawerStoreState>((set) => ({
+  selectedItem: null,
+  setSelectedItem: (item) => set({ selectedItem: item }),
+  isDrawerOpen: false,
+  openDrawer: () => set({ isDrawerOpen: true }),
+  closeDrawer: () => set({ isDrawerOpen: false }),
+}));
diff --git a/frontend/webapp/styles/palette.tsx b/frontend/webapp/styles/palette.ts
similarity index 86%
rename from frontend/webapp/styles/palette.tsx
rename to frontend/webapp/styles/palette.ts
index 4df30fcb8..006a9a0cf 100644
--- a/frontend/webapp/styles/palette.tsx
+++ b/frontend/webapp/styles/palette.ts
@@ -2,8 +2,11 @@ import { DefaultTheme } from 'styled-components';
 
 // Define your color palette
 const colors = {
-  primary: '#07111A',
-  secondary: '#0EE6F3',
+  primary: '#111',
+  secondary: '#F9F9F9',
+  dark_grey: '#151515',
+  text: '#F9F9F9',
+
   torquiz_light: '#96F2FF',
   dark: '#07111A',
   light_dark: '#132330',
@@ -26,7 +29,7 @@ const text = {
 };
 
 const font_family = {
-  primary: 'Inter, sans-serif',
+  primary: 'Kode Mono, sans-serif',
 };
 
 // Define the theme interface
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
new file mode 100644
index 000000000..064fe6916
--- /dev/null
+++ b/frontend/webapp/styles/theme.ts
@@ -0,0 +1,142 @@
+import { drop } from 'cypress/types/lodash';
+import { DefaultTheme } from 'styled-components';
+
+// Define your color palette
+const colors = {
+  primary: '#111',
+  secondary: '#F9F9F9',
+  dark_grey: '#151515',
+  text: '#F9F9F9',
+  border: '#525252',
+  translucent_bg: '#1A1A1A',
+  majestic_blue: '#444AD9',
+  selected_hover: '#444AD93D',
+  card: '#F9F9F90A',
+  dropdown_bg: '#242424',
+  blank_background: '#11111100',
+  danger: '#EF7676',
+  white_opacity: {
+    '004': 'rgba(249, 249, 249, 0.04)',
+    '008': 'rgba(249, 249, 249, 0.08)',
+    '10': 'rgba(255, 255, 255, 0.1)',
+    '20': 'rgba(255, 255, 255, 0.2)',
+    '30': 'rgba(255, 255, 255, 0.3)',
+    '40': 'rgba(255, 255, 255, 0.4)',
+    '50': 'rgba(255, 255, 255, 0.5)',
+    '60': 'rgba(255, 255, 255, 0.6)',
+    '70': 'rgba(255, 255, 255, 0.7)',
+    '80': 'rgba(255, 255, 255, 0.8)',
+    '90': 'rgba(255, 255, 255, 0.9)',
+  },
+  gray: {
+    '50': '#F7F7F8',
+    '100': '#EBEBEF',
+    '200': '#D1D1D8',
+    '300': '#A9A9BC',
+    '400': '#8A8AA3',
+    '500': '#6C6C89',
+    '600': '#55555D',
+    '700': '#3F3F50',
+    '800': '#282833',
+    '900': '#121217',
+    '950': '#121217',
+  },
+  blue: {
+    '50': '#F4F1FD',
+    '100': '#E2DAFB',
+    '200': '#C6B6F7',
+    '300': '#A99F3F3',
+    '400': '#80C8EF',
+    '500': '#7047EB',
+    '600': '#543E7',
+    '700': '#4316CA',
+    '800': '#3712A5',
+    '900': '#280E81',
+    '950': '#280E81',
+  },
+  green: {
+    '50': '#EEFBF4',
+    '100': '#DFEBEA',
+    '200': '#B2EECC',
+    '300': '#84E4AE',
+    '400': '#5BD990',
+    '500': '#2DCA72',
+    '600': '#26A95F',
+    '700': '#4DDBAC',
+    '800': '#17663A',
+    '900': '#0F4527',
+    '950': '#0F4527',
+  },
+  red: {
+    '50': '#FEF0F4',
+    '100': '#FDD8E1',
+    '200': '#FBB1C4',
+    '300': '#F98BA6',
+    '400': '#F76489',
+    '500': '#F53D6B',
+    '600': '#F3164E',
+    '700': '#D5083E',
+    '800': '#AF0932',
+    '900': '#880727',
+    '950': '#880727',
+  },
+  orange: {
+    '50': '#FFF2EE',
+    '100': '#FFEBE1',
+    '200': '#FFDCBD',
+    '300': '#FFB399',
+    '400': '#FF9876',
+    '500': '#FF7D52',
+    '600': '#FF571F',
+    '700': '#EB3A00',
+    '800': '#B82200',
+    '900': '#852100',
+    '950': '#852100',
+  },
+  yellow: {
+    '50': '#FFF9EB',
+    '100': '#FFF3D6',
+    '200': '#FFEFAD',
+    '300': '#FFDAB5',
+    '400': '#FFEC5C',
+    '500': '#FFC233',
+    '600': '#AFAF00',
+    '700': '#C28800',
+    '800': '#8A6100',
+    '900': '#523900',
+    '950': '#523900',
+  },
+};
+
+const text = {
+  primary: '#111',
+  secondary: '#F9F9F9',
+  grey: '#B8B8B8',
+  white: '#fff',
+  light_grey: '#CCD0D2',
+  dark_button: '#0A1824',
+  success: '#81AF65',
+  error: '#EF7676',
+};
+
+const font_family = {
+  primary: 'Inter, sans-serif',
+  secondary: 'Kode Mono, sans-serif',
+};
+
+// Define the theme interface
+interface ThemeInterface extends DefaultTheme {
+  colors: typeof colors;
+  text: typeof text;
+  font_family: typeof font_family;
+}
+
+// Create your theme object
+const theme: ThemeInterface = {
+  colors,
+  text,
+  font_family,
+};
+
+// Export the theme
+export default theme;
diff --git a/frontend/webapp/types/actions.ts b/frontend/webapp/types/actions.ts
index 3e2ea1bb9..37ba58dbe 100644
--- a/frontend/webapp/types/actions.ts
+++ b/frontend/webapp/types/actions.ts
@@ -34,7 +34,7 @@ export interface ActionItem {
 export interface ActionData {
   id: string;
   type: string;
-  spec: ActionItem;
+  spec: ActionItem | string;
 }
 
 interface Monitor {
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index b739aa8fa..c90203c9e 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -17,3 +17,27 @@ export interface Notification {
   crdType?: string;
   type: 'success' | 'error' | 'info';
 }
+
+export type Config = {
+  config: {
+    installation: string;
+  };
+};
+
+export interface DropdownOption {
+  id: string;
+  value: string;
+}
+
+export interface StepProps {
+  title: string;
+  subtitle?: string;
+  state: 'finish' | 'active' | 'disabled';
+  stepNumber: number;
+}
+
+export enum OVERVIEW_ENTITY_TYPES {
+  SOURCE = 'source',
+  DESTINATION = 'destination',
+  ACTION = 'action',
+}
diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts
new file mode 100644
index 000000000..b00d6223d
--- /dev/null
+++ b/frontend/webapp/types/compute-platform.ts
@@ -0,0 +1,22 @@
+import { ActionData } from './actions';
+import { ActualDestination } from './destinations';
+import { K8sActualSource } from './sources';
+export type K8sActualNamespace = {
+  name: string;
+  k8sActualSources?: K8sActualSource[];
+};
+
+type ComputePlatformData = {
+  id: string;
+  name: string;
+  computePlatformType: string;
+  k8sActualNamespace?: K8sActualNamespace;
+  k8sActualNamespaces: K8sActualNamespace[];
+  actions: ActionData[];
+  k8sActualSources: K8sActualSource[];
+  destinations: ActualDestination[];
+};
+
+export type ComputePlatform = {
+  computePlatform: ComputePlatformData;
+};
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index a00ad4051..0d1f3dd97 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -5,6 +5,94 @@ export enum DestinationsSortType {
   TYPE = 'type',
 }
 
+interface ObservabilitySignalSupport {
+  supported: boolean;
+}
+
+interface SupportedSignals {
+  logs: ObservabilitySignalSupport;
+  metrics: ObservabilitySignalSupport;
+  traces: ObservabilitySignalSupport;
+}
+
+export interface DestinationTypeItem {
+  type: string;
+  testConnectionSupported: boolean;
+  displayName: string;
+  imageUrl: string;
+  supportedSignals: SupportedSignals;
+  fields: {
+    [key: string]: string;
+  };
+}
+
+export interface DestinationsCategory {
+  name: string;
+  items: DestinationTypeItem[];
+}
+
+export interface GetDestinationTypesResponse {
+  destinationTypes: {
+    categories: DestinationsCategory[];
+  };
+}
+
+export interface DestinationDetailsField {
+  name: string;
+  displayName: string;
+  componentType: string;
+  componentProperties: string;
+  videoUrl: string | null;
+  thumbnailURL: string | null;
+  initialValue: string;
+  __typename: string;
+}
+
+export type DynamicField = {
+  name: string;
+  componentType: 'input' | 'dropdown' | 'multi_input' | 'textarea';
+  title: string;
+  [key: string]: any;
+};
+
+export interface DestinationDetailsResponse {
+  destinationTypeDetails: {
+    fields: DestinationDetailsField[];
+  };
+}
+
+export interface ExportedSignals {
+  logs: boolean;
+  metrics: boolean;
+  traces: boolean;
+}
+
+interface FieldInput {
+  key: string;
+  value: string;
+}
+
+export interface DestinationInput {
+  name: string;
+  type: string;
+  exportedSignals: ExportedSignals;
+  fields: FieldInput[];
+}
+
+export type DestinationTypeDetail = {
+  title: string;
+  value: string;
+};
+
+export type ConfiguredDestination = {
+  displayName: string;
+  category: string;
+  type: string;
+  exportedSignals: ExportedSignals;
+  imageUrl: string;
+  destinationTypeDetails: DestinationTypeDetail[];
+};
+
 export interface DestinationType {
   fields: any;
   display_name: string;
@@ -16,7 +104,7 @@ interface SupportedSignal {
   supported: boolean;
 }
 
-interface SupportedSignals {
+export interface SupportedDestinationSignals {
   traces: SupportedSignal;
   metrics: SupportedSignal;
   logs: SupportedSignal;
@@ -26,7 +114,7 @@ export interface SelectedDestination {
   type: string;
   display_name: string;
   image_url: string;
-  supported_signals: SupportedSignals;
+  supported_signals: SupportedDestinationSignals;
   test_connection_supported: boolean;
 }
 
@@ -45,17 +133,7 @@ export interface Destination {
     type: string;
     display_name: string;
     image_url: string;
-    supported_signals: {
-      traces: {
-        supported: boolean;
-      };
-      metrics: {
-        supported: boolean;
-      };
-      logs: {
-        supported: boolean;
-      };
-    };
+    supported_signals: SupportedDestinationSignals;
   };
 }
 
@@ -71,8 +149,30 @@ export interface Field {
 export interface DestinationConfig {
   type: string;
   name: string;
-  signals: SupportedSignals;
+  signals: SupportedDestinationSignals;
   fields: {
     [key: string]: string;
   };
 }
+
+export interface ActualDestination {
+  id: string;
+  name: string;
+  type: string;
+  exportedSignals: {
+    traces: boolean;
+    metrics: boolean;
+    logs: boolean;
+  };
+  fields: string;
+  conditions: Condition[];
+  destinationType: {
+    type: string;
+    displayName: string;
+    imageUrl: string;
+    supportedSignals: SupportedDestinationSignals;
+  };
+}
+
+export const isActualDestination = (item: any): item is ActualDestination =>
+  item && 'destinationType' in item;
diff --git a/frontend/webapp/types/index.ts b/frontend/webapp/types/index.ts
index 2c4a4ff98..48e2eb83c 100644
--- a/frontend/webapp/types/index.ts
+++ b/frontend/webapp/types/index.ts
@@ -3,4 +3,6 @@ export * from './destinations';
 export * from './actions';
 export * from './sources';
 export * from './common';
+export * from './compute-platform';
+export * from './namespace';
 export * from './instrumentation-rules';
diff --git a/frontend/webapp/types/namespace.ts b/frontend/webapp/types/namespace.ts
new file mode 100644
index 000000000..765bdf783
--- /dev/null
+++ b/frontend/webapp/types/namespace.ts
@@ -0,0 +1,4 @@
+export interface PersistNamespaceItemInput {
+  name: string;
+  futureSelected: boolean;
+}
diff --git a/frontend/webapp/types/sources.ts b/frontend/webapp/types/sources.ts
index e8961e85c..0e4492aa6 100644
--- a/frontend/webapp/types/sources.ts
+++ b/frontend/webapp/types/sources.ts
@@ -74,6 +74,23 @@ export interface SelectedSources {
   };
 }
 
+export type SourceContainer = {
+  containerName: string;
+  language: string;
+};
+
+export type K8sActualSource = {
+  name: string;
+  kind: string;
+  namespace: string;
+  reportedName: string;
+  numberOfInstances: number;
+  selected?: boolean;
+  instrumentedApplicationDetails: {
+    containers: Array<SourceContainer>;
+    conditions: Array<Condition>;
+  };
+};
 export interface InstrumentationConfig {
   optionKey: string;
   optionValueBoolean?: boolean;
@@ -86,3 +103,19 @@ export interface InstrumentationConfigLibrary {
   language: string;
   selected?: boolean;
 }
+
+export type WorkloadId = {
+  kind: string;
+  name: string;
+  namespace: string;
+};
+
+export interface PatchSourceRequestInput {
+  reportedName?: string;
+}
+
+export type PersistSourcesArray = {
+  kind: string;
+  name: string;
+  selected: boolean;
+};
diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx
index b16a6a033..21b5ba246 100644
--- a/frontend/webapp/utils/constants/index.tsx
+++ b/frontend/webapp/utils/constants/index.tsx
@@ -3,3 +3,4 @@ export * from './config';
 export * from './string';
 export * from './urls';
 export * from './programming.languages';
+export * from './monitors';
diff --git a/frontend/webapp/utils/constants/monitors.ts b/frontend/webapp/utils/constants/monitors.ts
new file mode 100644
index 000000000..7bd5f3daf
--- /dev/null
+++ b/frontend/webapp/utils/constants/monitors.ts
@@ -0,0 +1,14 @@
+export const MONITORS_OPTIONS = [
+  {
+    id: 'logs',
+    value: 'Logs',
+  },
+  {
+    id: 'metrics',
+    value: 'Metrics',
+  },
+  {
+    id: 'traces',
+    value: 'Traces',
+  },
+];
diff --git a/frontend/webapp/utils/constants/programming-languages.ts b/frontend/webapp/utils/constants/programming-languages.ts
new file mode 100644
index 000000000..3e709db77
--- /dev/null
+++ b/frontend/webapp/utils/constants/programming-languages.ts
@@ -0,0 +1,92 @@
+import { K8sActualSource } from '@/types';
+
+const BASE_URL = 'https://d1n7d4xz7fr8b4.cloudfront.net/';
+
+// while odigos lists language per container, we want to aggregate one single language for the workload.
+// the process is mostly heuristic, we iterate over the containers and return the first valid language we find.
+// there are additional cases for when the workload programming language is not available.
+export enum WORKLOAD_PROGRAMMING_LANGUAGES {
+  JAVA = 'java',
+  GO = 'go',
+  JAVASCRIPT = 'javascript',
+  PYTHON = 'python',
+  DOTNET = 'dotnet',
+  MYSQL = 'mysql',
+  UNKNOWN = 'unknown', // language detection completed but could not find a supported language
+  PROCESSING = 'processing', // language detection is not yet complotted, data is not available
+  NO_CONTAINERS = 'no containers', // language detection completed but no containers found or they are ignored
+  NO_RUNNING_PODS = 'no running pods', // no running pods are available for language detection
+  NGINX = 'nginx',
+}
+
+export const LANGUAGES_LOGOS: Record<WORKLOAD_PROGRAMMING_LANGUAGES, string> = {
+  [WORKLOAD_PROGRAMMING_LANGUAGES.JAVA]: `${BASE_URL}java.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.GO]: `${BASE_URL}go.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.JAVASCRIPT]: `${BASE_URL}nodejs.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.PYTHON]: `${BASE_URL}python.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.DOTNET]: `${BASE_URL}dotnet.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.MYSQL]: `${BASE_URL}mysql.svg`,
+  [WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN]: `${BASE_URL}default.svg`, // TODO: good icon
+  [WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING]: `${BASE_URL}default.svg`, // TODO: good icon
+  [WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS]: `${BASE_URL}default.svg`, // TODO: good icon
+  [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: `${BASE_URL}default.svg`, // TODO: good icon
+  [WORKLOAD_PROGRAMMING_LANGUAGES.NGINX]: `${BASE_URL}nginx.svg`,
+};
+
+export const LANGUAGES_COLORS: Record<WORKLOAD_PROGRAMMING_LANGUAGES, string> =
+  {
+    [WORKLOAD_PROGRAMMING_LANGUAGES.JAVA]: '#B07219',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.GO]: '#00ADD8',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.JAVASCRIPT]: '#F7DF1E',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.PYTHON]: '#306998',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.DOTNET]: '#512BD4',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.MYSQL]: '#00758F',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN]: '#8b92a6',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING]: '#3367d9',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS]: '#111111',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: '#666666',
+    [WORKLOAD_PROGRAMMING_LANGUAGES.NGINX]: '#009237',
+  };
+
+export const getMainContainerLanguage = (
+  source: K8sActualSource
+): WORKLOAD_PROGRAMMING_LANGUAGES => {
+  const ia = source?.instrumentedApplicationDetails;
+
+  if (!ia) {
+    if (source?.numberOfInstances > 0) {
+      return WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING;
+    } else {
+      return WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS;
+    }
+  }
+
+  const containers = ia.containers;
+  if (!containers) {
+    return WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING;
+  }
+
+  // we will filter out the ignored languages as we don't want to account them in the main language
+  const noneIgnoredLanguages = containers.filter(
+    (container) => container.language !== 'ignored'
+  );
+  if (noneIgnoredLanguages.length === 0) {
+    return WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS;
+  }
+
+  // find the first container with valid language
+  const mainContainer = noneIgnoredLanguages.find(
+    (container) => container.language !== 'unknown'
+  );
+  if (!mainContainer) {
+    return WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN; // no valid language found, return the first one
+  }
+  return mainContainer.language as WORKLOAD_PROGRAMMING_LANGUAGES;
+};
+
+export const getMainContainerLanguageLogo = (
+  source: K8sActualSource
+): string => {
+  const language = getMainContainerLanguage(source);
+  return LANGUAGES_LOGOS[language];
+};
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 9fddce502..b8702439d 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -42,7 +42,6 @@ export const ACTION_DOCS_LINK =
   'https://docs.odigos.io/pipeline/actions/introduction';
 export const ACTION_ITEM_DOCS_LINK = 'https://docs.odigos.io/pipeline/actions';
 
+export { API, QUERIES, SLACK_INVITE_LINK, BASE_URL };
 export const INSTRUMENTATION_RULES_DOCS_LINK =
   'https://docs.odigos.io/pipeline/rules/overview';
-
-export { API, QUERIES, SLACK_INVITE_LINK };
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index 99fa3207e..8a3764f34 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -10,6 +10,40 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
+"@apollo/client-react-streaming@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@apollo/client-react-streaming/-/client-react-streaming-0.11.3.tgz#ca14d15241b60e9e5e86f075d14e7cf72e1485ba"
+  integrity sha512-bAyyD7iZQ8UIvYZv2ZY3i5FTNdCgM0kfWW/0St3sqJLAs4Ji6QB9uzGUTc5434vQo6Ddb17N+Q+Ikr7fj2yTxw==
+  dependencies:
+    ts-invariant "^0.10.3"
+
+"@apollo/client@^3.11.0-rc.2":
+  version "3.11.0-rc.2"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.11.0-rc.2.tgz#69cbdf263330edf313f02f782ab30a3b8420c5d1"
+  integrity sha512-k5mj92/WKwMpnrViL3+EYGQwQ7grlo3xho9ZLIU/Y7+7KLGHpXVtb4lrqoZHA1+SqXFciZOu4sUx5ysAuv325g==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.1.1"
+    "@wry/caches" "^1.0.0"
+    "@wry/equality" "^0.5.6"
+    "@wry/trie" "^0.5.0"
+    graphql-tag "^2.12.6"
+    hoist-non-react-statics "^3.3.2"
+    optimism "^0.18.0"
+    prop-types "^15.7.2"
+    rehackt "^0.1.0"
+    response-iterator "^0.2.6"
+    symbol-observable "^4.0.0"
+    ts-invariant "^0.10.3"
+    tslib "^2.3.0"
+    zen-observable-ts "^1.2.5"
+
+"@apollo/experimental-nextjs-app-support@^0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.11.3.tgz#a0910e4d6376d6ac8293e4718e17d8df96b69de8"
+  integrity sha512-eMfbEtHyQE9EceBn0sTBWcHVvjhd+dkMO5dBhoEglEm0ga2n87KKiTeaNNb/XZnvOX81/6y0iyc0U7cgITpvKw==
+  dependencies:
+    "@apollo/client-react-streaming" "0.11.3"
+
 "@babel/cli@^7.21.0":
   version "7.24.8"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.24.8.tgz#79eaa55a69c77cafbea3e87537fd1df5a5a2edf8"
@@ -1031,6 +1065,13 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime@^7.18.9":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.23.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
@@ -1431,6 +1472,11 @@
     "@codemirror/view" "^0.19.4"
     js-yaml "^4.1.0"
 
+"@graphql-typed-document-node/core@^3.1.1":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
+  integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -2030,7 +2076,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz#096efdf55eb97480e3f5621ff9a8da552f0961e7"
   integrity sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==
 
-"@types/d3-drag@*", "@types/d3-drag@^3.0.1":
+"@types/d3-drag@*", "@types/d3-drag@^3.0.1", "@types/d3-drag@^3.0.7":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.7.tgz#b13aba8b2442b4068c9a9e6d1d82f8bcea77fc02"
   integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
@@ -2115,7 +2161,7 @@
   dependencies:
     "@types/d3-time" "*"
 
-"@types/d3-selection@*", "@types/d3-selection@^3.0.3":
+"@types/d3-selection@*", "@types/d3-selection@^3.0.10", "@types/d3-selection@^3.0.3":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.10.tgz#98cdcf986d0986de6912b5892e7c015a95ca27fe"
   integrity sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==
@@ -2142,14 +2188,14 @@
   resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
   integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
 
-"@types/d3-transition@*":
+"@types/d3-transition@*", "@types/d3-transition@^3.0.8":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.8.tgz#677707f5eed5b24c66a1918cde05963021351a8f"
   integrity sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==
   dependencies:
     "@types/d3-selection" "*"
 
-"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1":
+"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1", "@types/d3-zoom@^3.0.8":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
   integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
@@ -2210,16 +2256,18 @@
   dependencies:
     undici-types "~6.13.0"
 
-"@types/node@20.3.3":
-  version "20.3.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.3.tgz#329842940042d2b280897150e023e604d11657d6"
-  integrity sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw==
-
 "@types/node@20.4.8":
   version "20.4.8"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.8.tgz#b5dda19adaa473a9bf0ab5cbd8f30ec7d43f5c85"
   integrity sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==
 
+"@types/node@22.6.1":
+  version "22.6.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.6.1.tgz#e531a45f4d78f14a8468cb9cdc29dc9602afc7ac"
+  integrity sha512-V48tCfcKb/e6cVUigLAaJDAILdMP0fUW6BidkPK4GpGjXcfbnoHasCZDwz3N3yVt5we2RHm4XTQCpv0KJz9zqw==
+  dependencies:
+    undici-types "~6.19.2"
+
 "@types/parse-json@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
@@ -2252,15 +2300,6 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@18.2.11":
-  version "18.2.11"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.11.tgz#168f7dbb421ed214fcf8c5fe8e587765a3e02fd1"
-  integrity sha512-+hsJr9hmwyDecSMQAmX7drgbDpyE+EgSF6t7+5QEBAn1tQK7kl1vWZ4iRf6SjQ8lk7dyEULxUmZOIpN0W5baZA==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/react@18.2.19":
   version "18.2.19"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.19.tgz#f77cb2c8307368e624d464a25b9675fa35f95a8b"
@@ -2270,6 +2309,19 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@18.3.8":
+  version "18.3.8"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.8.tgz#1672ab19993f8aca7c7dc844c07d5d9e467d5a79"
+  integrity sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
+"@types/resize-observer-browser@^0.1.7":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz#d3c98d788489d8376b7beac23863b1eebdd3c13c"
+  integrity sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==
+
 "@types/scheduler@*":
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.23.0.tgz#0a6655b3e2708eaabca00b7372fafd7a792a7b09"
@@ -2351,6 +2403,63 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@wry/caches@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52"
+  integrity sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/context@^0.7.0":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.7.4.tgz#e32d750fa075955c4ab2cfb8c48095e1d42d5990"
+  integrity sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/equality@^0.5.6":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.7.tgz#72ec1a73760943d439d56b7b1e9985aec5d497bb"
+  integrity sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/trie@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.4.3.tgz#077d52c22365871bf3ffcbab8e95cb8bc5689af4"
+  integrity sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/trie@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.5.0.tgz#11e783f3a53f6e4cd1d42d2d1323f5bc3fa99c94"
+  integrity sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==
+  dependencies:
+    tslib "^2.3.0"
+
+"@xyflow/react@^12.3.0":
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/@xyflow/react/-/react-12.3.0.tgz#611bf68e0580ff2eab0a5cdf4b997d923a8cae85"
+  integrity sha512-dujEbjOn+5gMGg/wsojxtI7v2CfWm7ieRyiOHiZTPyw6p/VIdCoS3nLfSBP3TT+swoHSAXZ78iomHSKoUl4tMg==
+  dependencies:
+    "@xyflow/system" "0.0.42"
+    classcat "^5.0.3"
+    zustand "^4.4.0"
+
+"@xyflow/system@0.0.42":
+  version "0.0.42"
+  resolved "https://registry.yarnpkg.com/@xyflow/system/-/system-0.0.42.tgz#359b274fe072a28191ecfbc61bb7a3601de80e1e"
+  integrity sha512-kWYj+Y0GOct0jKYTdyRMNOLPxGNbb2TYvPg2gTmJnZ31DOOMkL5uRBLX825DR2gOACDu+i5FHLxPJUPf/eGOJw==
+  dependencies:
+    "@types/d3-drag" "^3.0.7"
+    "@types/d3-selection" "^3.0.10"
+    "@types/d3-transition" "^3.0.8"
+    "@types/d3-zoom" "^3.0.8"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -4176,6 +4285,18 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+graphql-tag@^2.12.6:
+  version "2.12.6"
+  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
+  integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
+  dependencies:
+    tslib "^2.1.0"
+
+graphql@^16.9.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.9.0.tgz#1c310e63f16a49ce1fbb230bd0a000e99f6f115f"
+  integrity sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -4222,6 +4343,13 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
@@ -5050,6 +5178,16 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
+optimism@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.18.0.tgz#e7bb38b24715f3fdad8a9a7fc18e999144bbfa63"
+  integrity sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==
+  dependencies:
+    "@wry/caches" "^1.0.0"
+    "@wry/context" "^0.7.0"
+    "@wry/trie" "^0.4.3"
+    tslib "^2.3.0"
+
 optionator@^0.9.1:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
@@ -5221,7 +5359,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5283,7 +5421,21 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-is@^16.13.1:
+react-flow-renderer@^10.3.17:
+  version "10.3.17"
+  resolved "https://registry.yarnpkg.com/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz#06d6ecef5559ba5d3e64d2c8dcb74c43071d62b1"
+  integrity sha512-bywiqVErlh5kCDqw3x0an5Ur3mT9j9CwJsDwmhmz4i1IgYM1a0SPqqEhClvjX+s5pU4nHjmVaGXWK96pwsiGcQ==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@types/d3" "^7.4.0"
+    "@types/resize-observer-browser" "^0.1.7"
+    classcat "^5.0.3"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^3.7.2"
+
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -5407,6 +5559,11 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
+rehackt@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/rehackt/-/rehackt-0.1.0.tgz#a7c5e289c87345f70da8728a7eb878e5d03c696b"
+  integrity sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==
+
 remove-accents@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.5.0.tgz#77991f37ba212afba162e375b627631315bed687"
@@ -5457,6 +5614,11 @@ resolve@^2.0.0-next.5:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+response-iterator@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/response-iterator/-/response-iterator-0.2.6.tgz#249005fb14d2e4eeb478a3f735a28fd8b4c9f3da"
+  integrity sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -5903,6 +6065,11 @@ swr@^2.1.5:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
 
+symbol-observable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
+  integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
+
 tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -5950,6 +6117,13 @@ tough-cookie@^4.1.3:
     universalify "^0.2.0"
     url-parse "^1.5.3"
 
+ts-invariant@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
+  integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==
+  dependencies:
+    tslib "^2.1.0"
+
 tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
@@ -5970,7 +6144,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.5.0:
+tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
@@ -6055,16 +6229,16 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.3.tgz#8d84219244a6b40b6fb2b33cc1c062f715b9e826"
-  integrity sha512-XH627E9vkeqhlZFQuL+UsyAXEnibT0kWR2FWONlr4sTjvxyJYnyefgrkyECLzM5NenmKzRAy2rR/OlYLA1HkZw==
-
 typescript@5.1.6:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
   integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
+typescript@5.6.2:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.2.tgz#d1de67b6bef77c41823f822df8f0b3bcff60a5a0"
+  integrity sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -6080,6 +6254,11 @@ undici-types@~6.13.0:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.13.0.tgz#e3e79220ab8c81ed1496b5812471afd7cf075ea5"
   integrity sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==
 
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -6154,7 +6333,7 @@ use-sync-external-store@1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@1.2.2, use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
@@ -6294,14 +6473,43 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zen-observable-ts@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58"
+  integrity sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==
+  dependencies:
+    zen-observable "0.8.15"
+
+zen-observable@0.8.15:
+  version "0.8.15"
+  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
+  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
+
 zod@3.21.4:
   version "3.21.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
   integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
 
+zustand@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
+  integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==
+
 zustand@^4.3.1, zustand@^4.4.1:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.4.tgz#63abdd81edfb190bc61e0bbae045cc4d52158a05"
   integrity sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==
   dependencies:
     use-sync-external-store "1.2.0"
+
+zustand@^4.4.0:
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.5.tgz#f8c713041543715ec81a2adda0610e1dc82d4ad1"
+  integrity sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==
+  dependencies:
+    use-sync-external-store "1.2.2"
+
+zustand@^5.0.0-rc.2:
+  version "5.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.0-rc.2.tgz#d28d95ffb6f0b20cadbaea39210f18446a5bf989"
+  integrity sha512-o2Nwuvnk8vQBX7CcHL8WfFkZNJdxB/VKeWw0tNglw8p4cypsZ3tRT7rTRTDNeUPFS0qaMBRSKe+fVwL5xpcE3A==
diff --git a/k8sutils/pkg/workload/workload.go b/k8sutils/pkg/workload/workload.go
index ca42db145..fa860a50d 100644
--- a/k8sutils/pkg/workload/workload.go
+++ b/k8sutils/pkg/workload/workload.go
@@ -109,3 +109,51 @@ func IsInstrumentationDisabledExplicitly(obj client.Object) bool {
 
 	return false
 }
+
+func GetInstrumentationLabelValue(labels map[string]string) *bool {
+	if val, exists := labels[consts.OdigosInstrumentationLabel]; exists {
+		enabled := val == consts.InstrumentationEnabled
+		return &enabled
+	}
+
+	return nil
+}
+
+func GetInstrumentationLabelTexts(workloadLabels map[string]string, workloadKind string, nsLabels map[string]string) (workloadText, nsText, decisionText string, sourceInstrumented bool) {
+	workloadLabel, workloadFound := workloadLabels[consts.OdigosInstrumentationLabel]
+	nsLabel, nsFound := nsLabels[consts.OdigosInstrumentationLabel]
+
+	if workloadFound {
+		workloadText = consts.OdigosInstrumentationLabel + "=" + workloadLabel
+	} else {
+		workloadText = consts.OdigosInstrumentationLabel + " label not set"
+	}
+
+	if nsFound {
+		nsText = consts.OdigosInstrumentationLabel + "=" + nsLabel
+	} else {
+		nsText = consts.OdigosInstrumentationLabel + " label not set"
+	}
+
+	if workloadFound {
+		sourceInstrumented = workloadLabel == consts.InstrumentationEnabled
+		if sourceInstrumented {
+			decisionText = "Workload is instrumented because the " + workloadKind + " contains the label '" + consts.OdigosInstrumentationLabel + "=" + workloadLabel + "'"
+		} else {
+			decisionText = "Workload is NOT instrumented because the " + workloadKind + " contains the label '" + consts.OdigosInstrumentationLabel + "=" + workloadLabel + "'"
+		}
+	} else {
+		sourceInstrumented = nsLabel == consts.InstrumentationEnabled
+		if sourceInstrumented {
+			decisionText = "Workload is instrumented because the " + workloadKind + " is not labeled, and the namespace is labeled with '" + consts.OdigosInstrumentationLabel + "=" + nsLabel + "'"
+		} else {
+			if nsFound {
+				decisionText = "Workload is NOT instrumented because the " + workloadKind + " is not labeled, and the namespace is labeled with '" + consts.OdigosInstrumentationLabel + "=" + nsLabel + "'"
+			} else {
+				decisionText = "Workload is NOT instrumented because neither the workload nor the namespace has the '" + consts.OdigosInstrumentationLabel + "' label set"
+			}
+		}
+	}
+
+	return
+}

From 62934de51a80c6608b5136eadcd6e0a09367bc01 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Tue, 22 Oct 2024 09:46:00 +0300
Subject: [PATCH 287/374] [GEN-1539] Refactor action api to gql (#1606)

---
 frontend/graph/generated.go                 | 2147 ++++++++++++++++---
 frontend/graph/model/models_gen.go          |   82 +
 frontend/graph/schema.graphqls              |   51 +
 frontend/graph/schema.resolvers.go          |   44 +-
 frontend/services/actions/addclusterinfo.go |   79 +
 frontend/services/utils.go                  |   26 +
 6 files changed, 2180 insertions(+), 249 deletions(-)
 create mode 100644 frontend/services/actions/addclusterinfo.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 024d98918..47916d30c 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -50,6 +50,21 @@ type DirectiveRoot struct {
 }
 
 type ComplexityRoot struct {
+	AddClusterInfoAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+		Type    func(childComplexity int) int
+	}
+
+	ClusterInfo struct {
+		AttributeName        func(childComplexity int) int
+		AttributeStringValue func(childComplexity int) int
+	}
+
 	ComputePlatform struct {
 		Actions             func(childComplexity int) int
 		ComputePlatformType func(childComplexity int) int
@@ -68,6 +83,20 @@ type ComplexityRoot struct {
 		Type               func(childComplexity int) int
 	}
 
+	DeleteAttribute struct {
+		AttributeName func(childComplexity int) int
+	}
+
+	DeleteAttributeAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+		Type    func(childComplexity int) int
+	}
+
 	Destination struct {
 		Conditions      func(childComplexity int) int
 		DestinationType func(childComplexity int) int
@@ -166,10 +195,13 @@ type ComplexityRoot struct {
 	}
 
 	Mutation struct {
+		CreateAction                 func(childComplexity int, action model.ActionInput) int
 		CreateNewDestination         func(childComplexity int, destination model.DestinationInput) int
+		DeleteAction                 func(childComplexity int, id string) int
 		PersistK8sNamespace          func(childComplexity int, namespace model.PersistNamespaceItemInput) int
 		PersistK8sSources            func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
 		TestConnectionForDestination func(childComplexity int, destination model.DestinationInput) int
+		UpdateAction                 func(childComplexity int, id string, action model.ActionInput) int
 		UpdateDestination            func(childComplexity int, id string, destination model.DestinationInput) int
 		UpdateK8sActualSource        func(childComplexity int, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) int
 	}
@@ -229,6 +261,9 @@ type MutationResolver interface {
 	TestConnectionForDestination(ctx context.Context, destination model.DestinationInput) (*model.TestConnectionResponse, error)
 	UpdateK8sActualSource(ctx context.Context, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) (bool, error)
 	UpdateDestination(ctx context.Context, id string, destination model.DestinationInput) (*model.Destination, error)
+	CreateAction(ctx context.Context, action model.ActionInput) (model.Action, error)
+	UpdateAction(ctx context.Context, id string, action model.ActionInput) (model.Action, error)
+	DeleteAction(ctx context.Context, id string) (bool, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
@@ -257,6 +292,69 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 	_ = ec
 	switch typeName + "." + field {
 
+	case "AddClusterInfoAction.details":
+		if e.complexity.AddClusterInfoAction.Details == nil {
+			break
+		}
+
+		return e.complexity.AddClusterInfoAction.Details(childComplexity), true
+
+	case "AddClusterInfoAction.disable":
+		if e.complexity.AddClusterInfoAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.AddClusterInfoAction.Disable(childComplexity), true
+
+	case "AddClusterInfoAction.id":
+		if e.complexity.AddClusterInfoAction.ID == nil {
+			break
+		}
+
+		return e.complexity.AddClusterInfoAction.ID(childComplexity), true
+
+	case "AddClusterInfoAction.name":
+		if e.complexity.AddClusterInfoAction.Name == nil {
+			break
+		}
+
+		return e.complexity.AddClusterInfoAction.Name(childComplexity), true
+
+	case "AddClusterInfoAction.notes":
+		if e.complexity.AddClusterInfoAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.AddClusterInfoAction.Notes(childComplexity), true
+
+	case "AddClusterInfoAction.signals":
+		if e.complexity.AddClusterInfoAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.AddClusterInfoAction.Signals(childComplexity), true
+
+	case "AddClusterInfoAction.type":
+		if e.complexity.AddClusterInfoAction.Type == nil {
+			break
+		}
+
+		return e.complexity.AddClusterInfoAction.Type(childComplexity), true
+
+	case "ClusterInfo.attributeName":
+		if e.complexity.ClusterInfo.AttributeName == nil {
+			break
+		}
+
+		return e.complexity.ClusterInfo.AttributeName(childComplexity), true
+
+	case "ClusterInfo.attributeStringValue":
+		if e.complexity.ClusterInfo.AttributeStringValue == nil {
+			break
+		}
+
+		return e.complexity.ClusterInfo.AttributeStringValue(childComplexity), true
+
 	case "ComputePlatform.actions":
 		if e.complexity.ComputePlatform.Actions == nil {
 			break
@@ -351,6 +449,62 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Condition.Type(childComplexity), true
 
+	case "DeleteAttribute.attributeName":
+		if e.complexity.DeleteAttribute.AttributeName == nil {
+			break
+		}
+
+		return e.complexity.DeleteAttribute.AttributeName(childComplexity), true
+
+	case "DeleteAttributeAction.details":
+		if e.complexity.DeleteAttributeAction.Details == nil {
+			break
+		}
+
+		return e.complexity.DeleteAttributeAction.Details(childComplexity), true
+
+	case "DeleteAttributeAction.disable":
+		if e.complexity.DeleteAttributeAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.DeleteAttributeAction.Disable(childComplexity), true
+
+	case "DeleteAttributeAction.id":
+		if e.complexity.DeleteAttributeAction.ID == nil {
+			break
+		}
+
+		return e.complexity.DeleteAttributeAction.ID(childComplexity), true
+
+	case "DeleteAttributeAction.name":
+		if e.complexity.DeleteAttributeAction.Name == nil {
+			break
+		}
+
+		return e.complexity.DeleteAttributeAction.Name(childComplexity), true
+
+	case "DeleteAttributeAction.notes":
+		if e.complexity.DeleteAttributeAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.DeleteAttributeAction.Notes(childComplexity), true
+
+	case "DeleteAttributeAction.signals":
+		if e.complexity.DeleteAttributeAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.DeleteAttributeAction.Signals(childComplexity), true
+
+	case "DeleteAttributeAction.type":
+		if e.complexity.DeleteAttributeAction.Type == nil {
+			break
+		}
+
+		return e.complexity.DeleteAttributeAction.Type(childComplexity), true
+
 	case "Destination.conditions":
 		if e.complexity.Destination.Conditions == nil {
 			break
@@ -720,6 +874,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualSource.ServiceName(childComplexity), true
 
+	case "Mutation.createAction":
+		if e.complexity.Mutation.CreateAction == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_createAction_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.CreateAction(childComplexity, args["action"].(model.ActionInput)), true
+
 	case "Mutation.createNewDestination":
 		if e.complexity.Mutation.CreateNewDestination == nil {
 			break
@@ -732,6 +898,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.CreateNewDestination(childComplexity, args["destination"].(model.DestinationInput)), true
 
+	case "Mutation.deleteAction":
+		if e.complexity.Mutation.DeleteAction == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_deleteAction_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.DeleteAction(childComplexity, args["id"].(string)), true
+
 	case "Mutation.persistK8sNamespace":
 		if e.complexity.Mutation.PersistK8sNamespace == nil {
 			break
@@ -768,6 +946,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.TestConnectionForDestination(childComplexity, args["destination"].(model.DestinationInput)), true
 
+	case "Mutation.updateAction":
+		if e.complexity.Mutation.UpdateAction == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_updateAction_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.UpdateAction(childComplexity, args["id"].(string), args["action"].(model.ActionInput)), true
+
 	case "Mutation.updateDestination":
 		if e.complexity.Mutation.UpdateDestination == nil {
 			break
@@ -917,6 +1107,7 @@ func (e *executableSchema) Exec(ctx context.Context) graphql.ResponseHandler {
 	rc := graphql.GetOperationContext(ctx)
 	ec := executionContext{rc, e, 0, 0, make(chan graphql.DeferredResult)}
 	inputUnmarshalMap := graphql.BuildUnmarshalerMap(
+		ec.unmarshalInputActionInput,
 		ec.unmarshalInputDestinationInput,
 		ec.unmarshalInputExportedSignalsInput,
 		ec.unmarshalInputFieldInput,
@@ -1106,6 +1297,21 @@ func (ec *executionContext) field_K8sActualNamespace_k8sActualSources_args(ctx c
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_createAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.ActionInput
+	if tmp, ok := rawArgs["action"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("action"))
+		arg0, err = ec.unmarshalNActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActionInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["action"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_createNewDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -1121,6 +1327,21 @@ func (ec *executionContext) field_Mutation_createNewDestination_args(ctx context
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_deleteAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["id"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("id"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["id"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_persistK8sNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -1175,6 +1396,30 @@ func (ec *executionContext) field_Mutation_testConnectionForDestination_args(ctx
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_updateAction_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["id"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("id"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["id"] = arg0
+	var arg1 model.ActionInput
+	if tmp, ok := rawArgs["action"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("action"))
+		arg1, err = ec.unmarshalNActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActionInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["action"] = arg1
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_updateDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -1291,8 +1536,8 @@ func (ec *executionContext) field___Type_fields_args(ctx context.Context, rawArg
 
 // region    **************************** field.gotpl *****************************
 
-func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
+func (ec *executionContext) _AddClusterInfoAction_id(ctx context.Context, field graphql.CollectedField, obj *model.AddClusterInfoAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_AddClusterInfoAction_id(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1305,7 +1550,7 @@ func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ComputePlatformType, nil
+		return obj.ID, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1317,26 +1562,26 @@ func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Con
 		}
 		return graphql.Null
 	}
-	res := resTmp.(model.ComputePlatformType)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx, field.Selections, res)
+	return ec.marshalNID2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_computePlatformType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_AddClusterInfoAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "AddClusterInfoAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ComputePlatformType does not have child fields")
+			return nil, errors.New("field of type ID does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+func (ec *executionContext) _AddClusterInfoAction_type(ctx context.Context, field graphql.CollectedField, obj *model.AddClusterInfoAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_AddClusterInfoAction_type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1349,54 +1594,79 @@ func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Cont
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.ComputePlatform().K8sActualNamespace(rctx, obj, fc.Args["name"].(string))
+		return obj.Type, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.K8sActualNamespace)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_AddClusterInfoAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "AddClusterInfoAction",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "instrumentationLabelEnabled":
-				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
+	return fc, nil
+}
+
+func (ec *executionContext) _AddClusterInfoAction_name(ctx context.Context, field graphql.CollectedField, obj *model.AddClusterInfoAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_AddClusterInfoAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
 	defer func() {
 		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
 		}
 	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_ComputePlatform_k8sActualNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
 		ec.Error(ctx, err)
-		return fc, err
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_AddClusterInfoAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "AddClusterInfoAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+func (ec *executionContext) _AddClusterInfoAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.AddClusterInfoAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_AddClusterInfoAction_notes(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1409,46 +1679,35 @@ func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.ComputePlatform().K8sActualNamespaces(rctx, obj)
+		return obj.Notes, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.K8sActualNamespace)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_AddClusterInfoAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "AddClusterInfoAction",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "name":
-				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
-			case "instrumentationLabelEnabled":
-				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
-			case "k8sActualSources":
-				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
+func (ec *executionContext) _AddClusterInfoAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.AddClusterInfoAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_AddClusterInfoAction_disable(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1461,66 +1720,217 @@ func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.ComputePlatform().K8sActualSource(rctx, obj, fc.Args["name"].(*string), fc.Args["namespace"].(*string), fc.Args["kind"].(*string))
+		return obj.Disable, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.K8sActualSource)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_AddClusterInfoAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "AddClusterInfoAction",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _AddClusterInfoAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.AddClusterInfoAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_AddClusterInfoAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_AddClusterInfoAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "AddClusterInfoAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _AddClusterInfoAction_details(ctx context.Context, field graphql.CollectedField, obj *model.AddClusterInfoAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_AddClusterInfoAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.ClusterInfo)
+	fc.Result = res
+	return ec.marshalNClusterInfo2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐClusterInfoᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_AddClusterInfoAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "AddClusterInfoAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "namespace":
-				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
-			case "kind":
-				return ec.fieldContext_K8sActualSource_kind(ctx, field)
-			case "name":
-				return ec.fieldContext_K8sActualSource_name(ctx, field)
-			case "serviceName":
-				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "numberOfInstances":
-				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "reportedName":
-				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "autoInstrumentedDecision":
-				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
-			case "instrumentedApplicationDetails":
-				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			case "attributeName":
+				return ec.fieldContext_ClusterInfo_attributeName(ctx, field)
+			case "attributeStringValue":
+				return ec.fieldContext_ClusterInfo_attributeStringValue(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type ClusterInfo", field.Name)
 		},
 	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ClusterInfo_attributeName(ctx context.Context, field graphql.CollectedField, obj *model.ClusterInfo) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ClusterInfo_attributeName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
 	defer func() {
 		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
 		}
 	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.AttributeName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ClusterInfo_attributeName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ClusterInfo",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ClusterInfo_attributeStringValue(ctx context.Context, field graphql.CollectedField, obj *model.ClusterInfo) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ClusterInfo_attributeStringValue(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
 	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_ComputePlatform_k8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.AttributeStringValue, nil
+	})
+	if err != nil {
 		ec.Error(ctx, err)
-		return fc, err
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ClusterInfo_attributeStringValue(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ClusterInfo",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+func (ec *executionContext) _ComputePlatform_computePlatformType(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_computePlatformType(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1533,7 +1943,7 @@ func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.ComputePlatform().K8sActualSources(rctx, obj)
+		return obj.ComputePlatformType, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1545,12 +1955,53 @@ func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Contex
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.K8sActualSource)
+	res := resTmp.(model.ComputePlatformType)
 	fc.Result = res
-	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+	return ec.marshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_ComputePlatform_computePlatformType(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ComputePlatformType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualNamespace(rctx, obj, fc.Args["name"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.K8sActualNamespace)
+	fc.Result = res
+	return ec.marshalOK8sActualNamespace2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "ComputePlatform",
 		Field:      field,
@@ -1558,33 +2009,587 @@ func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ cont
 		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "namespace":
-				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
-			case "kind":
-				return ec.fieldContext_K8sActualSource_kind(ctx, field)
 			case "name":
-				return ec.fieldContext_K8sActualSource_name(ctx, field)
-			case "serviceName":
-				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "numberOfInstances":
-				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "reportedName":
-				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "autoInstrumentedDecision":
-				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
-			case "instrumentedApplicationDetails":
-				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "instrumentationLabelEnabled":
+				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_ComputePlatform_k8sActualNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualNamespaces(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualNamespaces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualNamespaces(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualNamespace)
+	fc.Result = res
+	return ec.marshalNK8sActualNamespace2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualNamespace(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualNamespaces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_K8sActualNamespace_name(ctx, field)
+			case "instrumentationLabelEnabled":
+				return ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
+			case "k8sActualSources":
+				return ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualNamespace", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualSource(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualSource(rctx, obj, fc.Args["name"].(*string), fc.Args["namespace"].(*string), fc.Args["kind"].(*string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_ComputePlatform_k8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_k8sActualSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().K8sActualSources(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.K8sActualSource)
+	fc.Result = res
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_k8sActualSources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_destinations(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_destinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().Destinations(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ComputePlatform_actions(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_actions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().Actions(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.IcaInstanceResponse)
+	fc.Result = res
+	return ec.marshalNIcaInstanceResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponseᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_actions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_IcaInstanceResponse_id(ctx, field)
+			case "type":
+				return ec.fieldContext_IcaInstanceResponse_type(ctx, field)
+			case "spec":
+				return ec.fieldContext_IcaInstanceResponse_spec(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type IcaInstanceResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_status(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_status(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Status, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ConditionStatus)
+	fc.Result = res
+	return ec.marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_status(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ConditionStatus does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.LastTransitionTime, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_reason(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Reason, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Condition_message(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Message, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Condition",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DeleteAttribute_attributeName(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttribute) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttribute_attributeName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.AttributeName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DeleteAttribute_attributeName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DeleteAttribute",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_destinations(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_destinations(ctx, field)
+func (ec *executionContext) _DeleteAttributeAction_id(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_id(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1597,7 +2602,7 @@ func (ec *executionContext) _ComputePlatform_destinations(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.ComputePlatform().Destinations(rctx, obj)
+		return obj.ID, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1609,42 +2614,26 @@ func (ec *executionContext) _ComputePlatform_destinations(ctx context.Context, f
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.Destination)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNDestination2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestinationᚄ(ctx, field.Selections, res)
+	return ec.marshalNID2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DeleteAttributeAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "DeleteAttributeAction",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_Destination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_Destination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_Destination_type(ctx, field)
-			case "exportedSignals":
-				return ec.fieldContext_Destination_exportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_Destination_fields(ctx, field)
-			case "destinationType":
-				return ec.fieldContext_Destination_destinationType(ctx, field)
-			case "conditions":
-				return ec.fieldContext_Destination_conditions(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+			return nil, errors.New("field of type ID does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ComputePlatform_actions(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ComputePlatform_actions(ctx, field)
+func (ec *executionContext) _DeleteAttributeAction_type(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1657,7 +2646,7 @@ func (ec *executionContext) _ComputePlatform_actions(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.ComputePlatform().Actions(rctx, obj)
+		return obj.Type, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -1669,34 +2658,26 @@ func (ec *executionContext) _ComputePlatform_actions(ctx context.Context, field
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.IcaInstanceResponse)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNIcaInstanceResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐIcaInstanceResponseᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ComputePlatform_actions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DeleteAttributeAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ComputePlatform",
+		Object:     "DeleteAttributeAction",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_IcaInstanceResponse_id(ctx, field)
-			case "type":
-				return ec.fieldContext_IcaInstanceResponse_type(ctx, field)
-			case "spec":
-				return ec.fieldContext_IcaInstanceResponse_spec(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type IcaInstanceResponse", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_type(ctx, field)
+func (ec *executionContext) _DeleteAttributeAction_name(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1709,26 +2690,23 @@ func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.C
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DeleteAttributeAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "DeleteAttributeAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -1739,8 +2717,8 @@ func (ec *executionContext) fieldContext_Condition_type(_ context.Context, field
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_status(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_status(ctx, field)
+func (ec *executionContext) _DeleteAttributeAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_notes(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1753,38 +2731,35 @@ func (ec *executionContext) _Condition_status(ctx context.Context, field graphql
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Status, nil
+		return obj.Notes, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.ConditionStatus)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNConditionStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionStatus(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_status(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DeleteAttributeAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "DeleteAttributeAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ConditionStatus does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+func (ec *executionContext) _DeleteAttributeAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_disable(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1797,35 +2772,38 @@ func (ec *executionContext) _Condition_lastTransitionTime(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.LastTransitionTime, nil
+		return obj.Disable, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_lastTransitionTime(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DeleteAttributeAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "DeleteAttributeAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_reason(ctx, field)
+func (ec *executionContext) _DeleteAttributeAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_signals(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1838,35 +2816,38 @@ func (ec *executionContext) _Condition_reason(ctx context.Context, field graphql
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Reason, nil
+		return obj.Signals, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]model.SignalType)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_reason(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DeleteAttributeAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "DeleteAttributeAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type SignalType does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Condition_message(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Condition_message(ctx, field)
+func (ec *executionContext) _DeleteAttributeAction_details(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_details(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -1879,28 +2860,35 @@ func (ec *executionContext) _Condition_message(ctx context.Context, field graphq
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Message, nil
+		return obj.Details, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]*model.DeleteAttribute)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNDeleteAttribute2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDeleteAttributeᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Condition_message(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DeleteAttributeAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Condition",
+		Object:     "DeleteAttributeAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "attributeName":
+				return ec.fieldContext_DeleteAttribute_attributeName(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type DeleteAttribute", field.Name)
 		},
 	}
 	return fc, nil
@@ -4671,7 +5659,172 @@ func (ec *executionContext) fieldContext_Mutation_updateDestination(ctx context.
 		}
 	}()
 	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_updateDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+	if fc.Args, err = ec.field_Mutation_updateDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_createAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().CreateAction(rctx, fc.Args["action"].(model.ActionInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.Action)
+	fc.Result = res
+	return ec.marshalNAction2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐAction(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_createAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("FieldContext.Child cannot be called on type INTERFACE")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateAction(rctx, fc.Args["id"].(string), fc.Args["action"].(model.ActionInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.Action)
+	fc.Result = res
+	return ec.marshalNAction2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐAction(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("FieldContext.Child cannot be called on type INTERFACE")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_deleteAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_deleteAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().DeleteAction(rctx, fc.Args["id"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_deleteAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_deleteAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
 		ec.Error(ctx, err)
 		return fc, err
 	}
@@ -7322,6 +8475,68 @@ func (ec *executionContext) fieldContext___Type_specifiedByURL(_ context.Context
 
 // region    **************************** input.gotpl *****************************
 
+func (ec *executionContext) unmarshalInputActionInput(ctx context.Context, obj interface{}) (model.ActionInput, error) {
+	var it model.ActionInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"type", "name", "notes", "disable", "signals", "details"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "type":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("type"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Type = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "notes":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("notes"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Notes = data
+		case "disable":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("disable"))
+			data, err := ec.unmarshalNBoolean2bool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Disable = data
+		case "signals":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("signals"))
+			data, err := ec.unmarshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Signals = data
+		case "details":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("details"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Details = data
+		}
+	}
+
+	return it, nil
+}
+
 func (ec *executionContext) unmarshalInputDestinationInput(ctx context.Context, obj interface{}) (model.DestinationInput, error) {
 	var it model.DestinationInput
 	asMap := map[string]interface{}{}
@@ -7680,10 +8895,137 @@ func (ec *executionContext) unmarshalInputPersistNamespaceSourceInput(ctx contex
 
 // region    ************************** interface.gotpl ***************************
 
+func (ec *executionContext) _Action(ctx context.Context, sel ast.SelectionSet, obj model.Action) graphql.Marshaler {
+	switch obj := (obj).(type) {
+	case nil:
+		return graphql.Null
+	case model.AddClusterInfoAction:
+		return ec._AddClusterInfoAction(ctx, sel, &obj)
+	case *model.AddClusterInfoAction:
+		if obj == nil {
+			return graphql.Null
+		}
+		return ec._AddClusterInfoAction(ctx, sel, obj)
+	case model.DeleteAttributeAction:
+		return ec._DeleteAttributeAction(ctx, sel, &obj)
+	case *model.DeleteAttributeAction:
+		if obj == nil {
+			return graphql.Null
+		}
+		return ec._DeleteAttributeAction(ctx, sel, obj)
+	default:
+		panic(fmt.Errorf("unexpected type %T", obj))
+	}
+}
+
 // endregion ************************** interface.gotpl ***************************
 
 // region    **************************** object.gotpl ****************************
 
+var addClusterInfoActionImplementors = []string{"AddClusterInfoAction", "Action"}
+
+func (ec *executionContext) _AddClusterInfoAction(ctx context.Context, sel ast.SelectionSet, obj *model.AddClusterInfoAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, addClusterInfoActionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("AddClusterInfoAction")
+		case "id":
+			out.Values[i] = ec._AddClusterInfoAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._AddClusterInfoAction_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._AddClusterInfoAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._AddClusterInfoAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._AddClusterInfoAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._AddClusterInfoAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._AddClusterInfoAction_details(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var clusterInfoImplementors = []string{"ClusterInfo"}
+
+func (ec *executionContext) _ClusterInfo(ctx context.Context, sel ast.SelectionSet, obj *model.ClusterInfo) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, clusterInfoImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ClusterInfo")
+		case "attributeName":
+			out.Values[i] = ec._ClusterInfo_attributeName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "attributeStringValue":
+			out.Values[i] = ec._ClusterInfo_attributeStringValue(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var computePlatformImplementors = []string{"ComputePlatform"}
 
 func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.SelectionSet, obj *model.ComputePlatform) graphql.Marshaler {
@@ -7873,43 +9215,132 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 				continue
 			}
 
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
-		case "actions":
-			field := field
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "actions":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_actions(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var conditionImplementors = []string{"Condition"}
+
+func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet, obj *model.Condition) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, conditionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("Condition")
+		case "type":
+			out.Values[i] = ec._Condition_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "status":
+			out.Values[i] = ec._Condition_status(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "lastTransitionTime":
+			out.Values[i] = ec._Condition_lastTransitionTime(ctx, field, obj)
+		case "reason":
+			out.Values[i] = ec._Condition_reason(ctx, field, obj)
+		case "message":
+			out.Values[i] = ec._Condition_message(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
 
-			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
-				defer func() {
-					if r := recover(); r != nil {
-						ec.Error(ctx, ec.Recover(ctx, r))
-					}
-				}()
-				res = ec._ComputePlatform_actions(ctx, field, obj)
-				if res == graphql.Null {
-					atomic.AddUint32(&fs.Invalids, 1)
-				}
-				return res
-			}
+var deleteAttributeImplementors = []string{"DeleteAttribute"}
 
-			if field.Deferrable != nil {
-				dfs, ok := deferred[field.Deferrable.Label]
-				di := 0
-				if ok {
-					dfs.AddField(field)
-					di = len(dfs.Values) - 1
-				} else {
-					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
-					deferred[field.Deferrable.Label] = dfs
-				}
-				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
-					return innerFunc(ctx, dfs)
-				})
+func (ec *executionContext) _DeleteAttribute(ctx context.Context, sel ast.SelectionSet, obj *model.DeleteAttribute) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, deleteAttributeImplementors)
 
-				// don't run the out.Concurrently() call below
-				out.Values[i] = graphql.Null
-				continue
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DeleteAttribute")
+		case "attributeName":
+			out.Values[i] = ec._DeleteAttribute_attributeName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
 			}
-
-			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -7933,33 +9364,46 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 	return out
 }
 
-var conditionImplementors = []string{"Condition"}
+var deleteAttributeActionImplementors = []string{"DeleteAttributeAction", "Action"}
 
-func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet, obj *model.Condition) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, conditionImplementors)
+func (ec *executionContext) _DeleteAttributeAction(ctx context.Context, sel ast.SelectionSet, obj *model.DeleteAttributeAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, deleteAttributeActionImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("Condition")
+			out.Values[i] = graphql.MarshalString("DeleteAttributeAction")
+		case "id":
+			out.Values[i] = ec._DeleteAttributeAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		case "type":
-			out.Values[i] = ec._Condition_type(ctx, field, obj)
+			out.Values[i] = ec._DeleteAttributeAction_type(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "status":
-			out.Values[i] = ec._Condition_status(ctx, field, obj)
+		case "name":
+			out.Values[i] = ec._DeleteAttributeAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._DeleteAttributeAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._DeleteAttributeAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._DeleteAttributeAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._DeleteAttributeAction_details(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "lastTransitionTime":
-			out.Values[i] = ec._Condition_lastTransitionTime(ctx, field, obj)
-		case "reason":
-			out.Values[i] = ec._Condition_reason(ctx, field, obj)
-		case "message":
-			out.Values[i] = ec._Condition_message(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -8874,6 +10318,27 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "createAction":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_createAction(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "updateAction":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_updateAction(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deleteAction":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_deleteAction(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -9553,6 +11018,21 @@ func (ec *executionContext) ___Type(ctx context.Context, sel ast.SelectionSet, o
 
 // region    ***************************** type.gotpl *****************************
 
+func (ec *executionContext) marshalNAction2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐAction(ctx context.Context, sel ast.SelectionSet, v model.Action) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._Action(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNActionInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐActionInput(ctx context.Context, v interface{}) (model.ActionInput, error) {
+	res, err := ec.unmarshalInputActionInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) unmarshalNBoolean2bool(ctx context.Context, v interface{}) (bool, error) {
 	res, err := graphql.UnmarshalBoolean(v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -9568,6 +11048,60 @@ func (ec *executionContext) marshalNBoolean2bool(ctx context.Context, sel ast.Se
 	return res
 }
 
+func (ec *executionContext) marshalNClusterInfo2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐClusterInfoᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.ClusterInfo) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNClusterInfo2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐClusterInfo(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNClusterInfo2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐClusterInfo(ctx context.Context, sel ast.SelectionSet, v *model.ClusterInfo) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._ClusterInfo(ctx, sel, v)
+}
+
 func (ec *executionContext) unmarshalNComputePlatformType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐComputePlatformType(ctx context.Context, v interface{}) (model.ComputePlatformType, error) {
 	var res model.ComputePlatformType
 	err := res.UnmarshalGQL(v)
@@ -9598,6 +11132,60 @@ func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑio
 	return v
 }
 
+func (ec *executionContext) marshalNDeleteAttribute2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDeleteAttributeᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.DeleteAttribute) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNDeleteAttribute2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDeleteAttribute(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNDeleteAttribute2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDeleteAttribute(ctx context.Context, sel ast.SelectionSet, v *model.DeleteAttribute) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._DeleteAttribute(ctx, sel, v)
+}
+
 func (ec *executionContext) marshalNDestination2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v model.Destination) graphql.Marshaler {
 	return ec._Destination(ctx, sel, &v)
 }
@@ -10225,6 +11813,77 @@ func (ec *executionContext) unmarshalNPersistNamespaceSourceInput2ᚖgithubᚗco
 	return &res, graphql.ErrorOnPath(ctx, err)
 }
 
+func (ec *executionContext) unmarshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx context.Context, v interface{}) (model.SignalType, error) {
+	var res model.SignalType
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx context.Context, sel ast.SelectionSet, v model.SignalType) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) unmarshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx context.Context, v interface{}) ([]model.SignalType, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]model.SignalType, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx context.Context, sel ast.SelectionSet, v []model.SignalType) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
 func (ec *executionContext) marshalNSourceContainerRuntimeDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, v *model.SourceContainerRuntimeDetails) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 27374cf6b..5c8620305 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -8,6 +8,57 @@ import (
 	"strconv"
 )
 
+type Action interface {
+	IsAction()
+	GetID() string
+	GetType() string
+	GetName() *string
+	GetNotes() *string
+	GetDisable() bool
+	GetSignals() []SignalType
+}
+
+type ActionInput struct {
+	Type    string       `json:"type"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details string       `json:"details"`
+}
+
+type AddClusterInfoAction struct {
+	ID      string         `json:"id"`
+	Type    string         `json:"type"`
+	Name    *string        `json:"name,omitempty"`
+	Notes   *string        `json:"notes,omitempty"`
+	Disable bool           `json:"disable"`
+	Signals []SignalType   `json:"signals"`
+	Details []*ClusterInfo `json:"details"`
+}
+
+func (AddClusterInfoAction) IsAction()              {}
+func (this AddClusterInfoAction) GetID() string     { return this.ID }
+func (this AddClusterInfoAction) GetType() string   { return this.Type }
+func (this AddClusterInfoAction) GetName() *string  { return this.Name }
+func (this AddClusterInfoAction) GetNotes() *string { return this.Notes }
+func (this AddClusterInfoAction) GetDisable() bool  { return this.Disable }
+func (this AddClusterInfoAction) GetSignals() []SignalType {
+	if this.Signals == nil {
+		return nil
+	}
+	interfaceSlice := make([]SignalType, 0, len(this.Signals))
+	for _, concrete := range this.Signals {
+		interfaceSlice = append(interfaceSlice, concrete)
+	}
+	return interfaceSlice
+}
+
+type ClusterInfo struct {
+	AttributeName        string  `json:"attributeName"`
+	AttributeStringValue *string `json:"attributeStringValue,omitempty"`
+}
+
 type ComputePlatform struct {
 	ComputePlatformType ComputePlatformType    `json:"computePlatformType"`
 	K8sActualNamespace  *K8sActualNamespace    `json:"k8sActualNamespace,omitempty"`
@@ -26,6 +77,37 @@ type Condition struct {
 	Message            *string         `json:"message,omitempty"`
 }
 
+type DeleteAttribute struct {
+	AttributeName string `json:"attributeName"`
+}
+
+type DeleteAttributeAction struct {
+	ID      string             `json:"id"`
+	Type    string             `json:"type"`
+	Name    *string            `json:"name,omitempty"`
+	Notes   *string            `json:"notes,omitempty"`
+	Disable bool               `json:"disable"`
+	Signals []SignalType       `json:"signals"`
+	Details []*DeleteAttribute `json:"details"`
+}
+
+func (DeleteAttributeAction) IsAction()              {}
+func (this DeleteAttributeAction) GetID() string     { return this.ID }
+func (this DeleteAttributeAction) GetType() string   { return this.Type }
+func (this DeleteAttributeAction) GetName() *string  { return this.Name }
+func (this DeleteAttributeAction) GetNotes() *string { return this.Notes }
+func (this DeleteAttributeAction) GetDisable() bool  { return this.Disable }
+func (this DeleteAttributeAction) GetSignals() []SignalType {
+	if this.Signals == nil {
+		return nil
+	}
+	interfaceSlice := make([]SignalType, 0, len(this.Signals))
+	for _, concrete := range this.Signals {
+		interfaceSlice = append(interfaceSlice, concrete)
+	}
+	return interfaceSlice
+}
+
 type DestinationDetails struct {
 	Type      string `json:"type"`
 	URLString string `json:"urlString"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 666582cb9..591a40011 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -238,6 +238,53 @@ input PatchSourceRequestInput {
   reportedName: String
 }
 
+interface Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+}
+
+type ClusterInfo {
+  attributeName: String!
+  attributeStringValue: String
+}
+
+type AddClusterInfoAction implements Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: [ClusterInfo!]!
+}
+
+type DeleteAttribute {
+  attributeName: String!
+}
+
+type DeleteAttributeAction implements Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: [DeleteAttribute!]!
+}
+
+input ActionInput {
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: String!
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
@@ -261,4 +308,8 @@ type Mutation {
     patchSourceRequest: PatchSourceRequestInput!
   ): Boolean!
   updateDestination(id: ID!, destination: DestinationInput!): Destination!
+
+  createAction(action: ActionInput!): Action!
+  updateAction(id: ID!, action: ActionInput!): Action!
+  deleteAction(id: ID!): Boolean!
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 9fbfff584..39c6b542c 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -16,6 +16,7 @@ import (
 	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
 	"github.com/odigos-io/odigos/frontend/services"
+	actionservices "github.com/odigos-io/odigos/frontend/services/actions"
 	testconnection "github.com/odigos-io/odigos/frontend/services/test_connection"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
@@ -449,11 +450,11 @@ func (r *mutationResolver) UpdateK8sActualSource(ctx context.Context, sourceID m
 }
 
 // UpdateDestination is the resolver for the updateDestination field.
-func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, input model.DestinationInput) (*model.Destination, error) {
+func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, destination model.DestinationInput) (*model.Destination, error) {
 	odigosns := consts.DefaultOdigosNamespace
 
-	destType := common.DestinationType(input.Type)
-	destName := input.Name
+	destType := common.DestinationType(destination.Type)
+	destName := destination.Name
 
 	// Get the destination type configuration
 	destTypeConfig, err := services.GetDestinationTypeConfig(destType)
@@ -463,7 +464,7 @@ func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, inp
 
 	// Convert fields from input to map[string]string
 	fields := make(map[string]string)
-	for _, field := range input.Fields {
+	for _, field := range destination.Fields {
 		fields[field.Key] = field.Value
 	}
 
@@ -533,7 +534,7 @@ func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, inp
 	dest.Spec.Type = destType
 	dest.Spec.DestinationName = destName
 	dest.Spec.Data = dataFields
-	dest.Spec.Signals = services.ExportedSignalsObjectToSlice(input.ExportedSignals)
+	dest.Spec.Signals = services.ExportedSignalsObjectToSlice(destination.ExportedSignals)
 
 	// Update the destination in Kubernetes
 	updatedDest, err := kube.DefaultClient.OdigosClient.Destinations(odigosns).Update(ctx, dest, metav1.UpdateOptions{})
@@ -553,6 +554,39 @@ func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, inp
 	return &resp, nil
 }
 
+// CreateAction is the resolver for the createAction field.
+func (r *mutationResolver) CreateAction(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	switch action.Type {
+	case "AddClusterInfo":
+		res, err := actionservices.CreateAddClusterInfo(ctx, action)
+
+		if err != nil {
+			return nil, fmt.Errorf("failed to create AddClusterInfo: %v", err)
+		}
+
+		return res, nil
+
+	case "DeleteAttribute":
+
+	// Handle other action types...
+
+	default:
+		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
+	}
+
+	return nil, nil
+}
+
+// UpdateAction is the resolver for the updateAction field.
+func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	panic(fmt.Errorf("not implemented: UpdateAction - updateAction"))
+}
+
+// DeleteAction is the resolver for the deleteAction field.
+func (r *mutationResolver) DeleteAction(ctx context.Context, id string) (bool, error) {
+	panic(fmt.Errorf("not implemented: DeleteAction - deleteAction"))
+}
+
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
 	return &model.ComputePlatform{
diff --git a/frontend/services/actions/addclusterinfo.go b/frontend/services/actions/addclusterinfo.go
new file mode 100644
index 000000000..74f2570e2
--- /dev/null
+++ b/frontend/services/actions/addclusterinfo.go
@@ -0,0 +1,79 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/actions/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type AddClusterInfoDetails struct {
+	ClusterAttributes []model.ClusterInfo `json:"clusterAttributes"`
+}
+
+func CreateAddClusterInfo(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	var details AddClusterInfoDetails
+	err := json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for AddClusterInfo: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	clusterAttributes := make([]v1alpha1.OtelAttributeWithValue, len(details.ClusterAttributes))
+	for i, attr := range details.ClusterAttributes {
+		clusterAttributes[i] = v1alpha1.OtelAttributeWithValue{
+			AttributeName:        attr.AttributeName,
+			AttributeStringValue: attr.AttributeStringValue,
+		}
+	}
+
+	addClusterInfoAction := &v1alpha1.AddClusterInfo{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "aci-",
+		},
+		Spec: v1alpha1.AddClusterInfoSpec{
+			ActionName:        services.DerefString(action.Name),
+			Notes:             services.DerefString(action.Notes),
+			Disabled:          action.Disable,
+			Signals:           signals,
+			ClusterAttributes: clusterAttributes,
+		},
+	}
+
+	generatedAction, err := kube.DefaultClient.ActionsClient.AddClusterInfos(odigosns).Create(ctx, addClusterInfoAction, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to create AddClusterInfo: %v", err)
+	}
+
+	resDetails := make([]*model.ClusterInfo, len(details.ClusterAttributes))
+	for i, attr := range details.ClusterAttributes {
+		resDetails[i] = &model.ClusterInfo{
+			AttributeName:        attr.AttributeName,
+			AttributeStringValue: attr.AttributeStringValue,
+		}
+	}
+
+	response := &model.AddClusterInfoAction{
+		ID:      generatedAction.Name,
+		Type:    "AddClusterInfo",
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: resDetails,
+	}
+
+	return response, nil
+}
diff --git a/frontend/services/utils.go b/frontend/services/utils.go
index a85f6b8f3..25e8e291a 100644
--- a/frontend/services/utils.go
+++ b/frontend/services/utils.go
@@ -7,6 +7,8 @@ import (
 	"path"
 	"strings"
 
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/types"
@@ -48,3 +50,27 @@ func ConvertFieldsToString(fields map[string]string) string {
 
 	return strings.Join(parts, ", ")
 }
+
+func ConvertSignals(signals []model.SignalType) ([]common.ObservabilitySignal, error) {
+	var result []common.ObservabilitySignal
+	for _, s := range signals {
+		switch s {
+		case model.SignalTypeTraces:
+			result = append(result, common.TracesObservabilitySignal)
+		case model.SignalTypeMetrics:
+			result = append(result, common.MetricsObservabilitySignal)
+		case model.SignalTypeLogs:
+			result = append(result, common.LogsObservabilitySignal)
+		default:
+			return nil, fmt.Errorf("unknown signal type: %v", s)
+		}
+	}
+	return result, nil
+}
+
+func DerefString(s *string) string {
+	if s != nil {
+		return *s
+	}
+	return ""
+}

From d456363fa5052ee640e6ab4e0c9ddf5185b84d4b Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Tue, 22 Oct 2024 10:51:13 +0300
Subject: [PATCH 288/374] [GEN-1540]  Add update action mutation (#1607)

This pull request includes several changes to improve the handling of
action types in the `CreateAction` and `UpdateAction` resolvers, as well
as the addition of a new update function for `AddClusterInfo` actions.
The most important changes involve refactoring action type strings into
constants and implementing the `UpdateAddClusterInfo` function.

### Refactoring action types:

*
[`frontend/graph/schema.resolvers.go`](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L560-R560):
Replaced hardcoded action type strings with constants from
`actionservices` for better maintainability.
[[1]](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L560-R560)
[[2]](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L569-R569)

### New update functionality:

*
[`frontend/graph/schema.resolvers.go`](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L582-R599):
Implemented the `UpdateAction` resolver to handle updating
`AddClusterInfo` actions.
*
[`frontend/services/actions/addclusterinfo.go`](diffhunk://#diff-c2da2861415e61f772e3b44d22810aa34b4eba6070f744709c4b1b6b919a3f09L70-R137):
Added the `UpdateAddClusterInfo` function to update existing
`AddClusterInfo` actions in Kubernetes.

### Constants definition:

*
[`frontend/services/actions/constants.go`](diffhunk://#diff-377602090c56364ea3a4d6cdadda1ad9b1c6ba9e122f882e5a1f640b1e62acf8R1-R7):
Added constants for action types `ActionTypeAddClusterInfo` and
`ActionTypeDeleteAttribute`.
---
 frontend/graph/schema.resolvers.go          | 23 ++++++-
 frontend/services/actions/addclusterinfo.go | 69 ++++++++++++++++++++-
 frontend/services/actions/constants.go      |  7 +++
 3 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 frontend/services/actions/constants.go

diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 39c6b542c..553cbbf33 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -557,7 +557,7 @@ func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, des
 // CreateAction is the resolver for the createAction field.
 func (r *mutationResolver) CreateAction(ctx context.Context, action model.ActionInput) (model.Action, error) {
 	switch action.Type {
-	case "AddClusterInfo":
+	case actionservices.ActionTypeAddClusterInfo:
 		res, err := actionservices.CreateAddClusterInfo(ctx, action)
 
 		if err != nil {
@@ -566,7 +566,7 @@ func (r *mutationResolver) CreateAction(ctx context.Context, action model.Action
 
 		return res, nil
 
-	case "DeleteAttribute":
+	case actionservices.ActionTypeDeleteAttribute:
 
 	// Handle other action types...
 
@@ -579,7 +579,24 @@ func (r *mutationResolver) CreateAction(ctx context.Context, action model.Action
 
 // UpdateAction is the resolver for the updateAction field.
 func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
-	panic(fmt.Errorf("not implemented: UpdateAction - updateAction"))
+	switch action.Type {
+	case actionservices.ActionTypeAddClusterInfo:
+		res, err := actionservices.UpdateAddClusterInfo(ctx, id, action)
+
+		if err != nil {
+			return nil, fmt.Errorf("failed to update AddClusterInfo: %v", err)
+		}
+
+		return res, nil
+
+	case actionservices.ActionTypeDeleteAttribute:
+		// Handle other action types...
+
+	default:
+		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
+	}
+
+	return nil, nil
 }
 
 // DeleteAction is the resolver for the deleteAction field.
diff --git a/frontend/services/actions/addclusterinfo.go b/frontend/services/actions/addclusterinfo.go
index 74f2570e2..aefc359ef 100644
--- a/frontend/services/actions/addclusterinfo.go
+++ b/frontend/services/actions/addclusterinfo.go
@@ -67,7 +67,74 @@ func CreateAddClusterInfo(ctx context.Context, action model.ActionInput) (model.
 
 	response := &model.AddClusterInfoAction{
 		ID:      generatedAction.Name,
-		Type:    "AddClusterInfo",
+		Type:    ActionTypeAddClusterInfo,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: resDetails,
+	}
+
+	return response, nil
+}
+
+func UpdateAddClusterInfo(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	// Fetch the existing action
+	existingAction, err := kube.DefaultClient.ActionsClient.AddClusterInfos(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch AddClusterInfo: %v", err)
+	}
+
+	// Parse the details from action.Details
+	var details AddClusterInfoDetails
+	err = json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for AddClusterInfo: %v", err)
+	}
+
+	// Convert signals from action input
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	// Convert ClusterAttributes from model to v1alpha1
+	clusterAttributes := make([]v1alpha1.OtelAttributeWithValue, len(details.ClusterAttributes))
+	for i, attr := range details.ClusterAttributes {
+		clusterAttributes[i] = v1alpha1.OtelAttributeWithValue{
+			AttributeName:        attr.AttributeName,
+			AttributeStringValue: attr.AttributeStringValue,
+		}
+	}
+
+	// Update the existing action with new values
+	existingAction.Spec.ActionName = services.DerefString(action.Name)
+	existingAction.Spec.Notes = services.DerefString(action.Notes)
+	existingAction.Spec.Disabled = action.Disable
+	existingAction.Spec.Signals = signals
+	existingAction.Spec.ClusterAttributes = clusterAttributes
+
+	// Update the action in Kubernetes
+	updatedAction, err := kube.DefaultClient.ActionsClient.AddClusterInfos(odigosns).Update(ctx, existingAction, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update AddClusterInfo: %v", err)
+	}
+
+	// Prepare the response model
+	resDetails := make([]*model.ClusterInfo, len(details.ClusterAttributes))
+	for i, attr := range details.ClusterAttributes {
+		resDetails[i] = &model.ClusterInfo{
+			AttributeName:        attr.AttributeName,
+			AttributeStringValue: attr.AttributeStringValue,
+		}
+	}
+
+	// Return the updated model as the response
+	response := &model.AddClusterInfoAction{
+		ID:      updatedAction.Name,
+		Type:    ActionTypeAddClusterInfo,
 		Name:    action.Name,
 		Notes:   action.Notes,
 		Disable: action.Disable,
diff --git a/frontend/services/actions/constants.go b/frontend/services/actions/constants.go
new file mode 100644
index 000000000..fa77420e2
--- /dev/null
+++ b/frontend/services/actions/constants.go
@@ -0,0 +1,7 @@
+package services
+
+const (
+	ActionTypeAddClusterInfo  = "AddClusterInfo"
+	ActionTypeDeleteAttribute = "DeleteAttribute"
+	// Add more action types as needed
+)

From 522e782d9f05c90a975464ef4dae3c58fb6c4088 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 10:54:28 +0300
Subject: [PATCH 289/374] feat(frontend): added actions form, and fixed bugs:
 empty inputs, search bar

---
 .../action-custom-fields.tsx                  |  66 ++++++
 .../main/actions/choose-action-body/index.tsx |  65 ++++++
 .../choose-action-modal/action-options.ts     |  37 +++-
 .../actions/choose-action-modal/index.tsx     |  93 ++++----
 .../webapp/hooks/actions/useActionFormData.ts |  21 ++
 .../webapp/public/icons/common/notebook.svg   |   3 +
 .../auto-complete-input/index.tsx             | 201 ++++++++----------
 .../button/DocsButton.tsx                     |  21 ++
 .../reuseable-components/button/index.tsx     |  36 ++--
 .../checkbox-list/index.tsx                   |  54 ++---
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/input-list/index.tsx | 123 +++++------
 .../key-value-input-list/index.tsx            | 153 ++++++-------
 .../reuseable-components/text/index.tsx       |  48 ++---
 14 files changed, 517 insertions(+), 405 deletions(-)
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/index.tsx
 create mode 100644 frontend/webapp/hooks/actions/useActionFormData.ts
 create mode 100644 frontend/webapp/public/icons/common/notebook.svg
 create mode 100644 frontend/webapp/reuseable-components/button/DocsButton.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
new file mode 100644
index 000000000..259a62233
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -0,0 +1,66 @@
+import styled from 'styled-components'
+import { InputList, KeyValueInputsList, Text } from '@/reuseable-components'
+import type { ActionsType } from '@/types'
+
+interface ActionCustomFieldsProps {
+  actionType?: ActionsType
+}
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`
+
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) => {
+  switch (actionType) {
+    case 'AddClusterInfo':
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to add</FieldTitle>
+          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+        </FieldWrapper>
+      )
+
+    case 'DeleteAttribute':
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to delete</FieldTitle>
+          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+        </FieldWrapper>
+      )
+
+    case 'RenameAttribute':
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to rename</FieldTitle>
+          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+        </FieldWrapper>
+      )
+
+    case 'PiiMasking':
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to mask</FieldTitle>
+          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+        </FieldWrapper>
+      )
+
+    case 'ErrorSampler':
+      return null
+
+    case 'ProbabilisticSampler':
+      return null
+
+    case 'LatencySampler':
+      return null
+
+    default:
+      return null
+  }
+}
+
+export default ActionCustomFields
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
new file mode 100644
index 000000000..94e3fe6ab
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -0,0 +1,65 @@
+import React, { Fragment } from 'react'
+import styled from 'styled-components'
+import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components'
+import { MONITORING_OPTIONS } from '@/components/setup/destination/utils'
+import { useActionFormData } from '@/hooks/actions/useActionFormData'
+import ActionCustomFields from './action-custom-fields'
+import { type ActionOption } from '../choose-action-modal/action-options'
+
+const Description = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  line-height: 150%;
+  display: flex;
+`
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`
+
+interface ChooseActionContentProps {
+  action: ActionOption
+}
+
+const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
+  const { actionName, setActionName, actionNotes, setActionNotes, exportedSignals, setExportedSignals } = useActionFormData()
+
+  return (
+    <Fragment>
+      <Description>
+        {action.docsDescription}
+        <DocsButton endpoint={action.docsEndpoint} />
+      </Description>
+
+      <FieldWrapper>
+        <FieldTitle>Monitoring</FieldTitle>
+        <CheckboxList
+          monitors={MONITORING_OPTIONS}
+          exportedSignals={exportedSignals}
+          handleSignalChange={(id, val) => {
+            const found = MONITORING_OPTIONS.find((item) => item.id === id)
+            if (found) setExportedSignals((prev) => ({ ...prev, [found.type]: val }))
+          }}
+        />
+      </FieldWrapper>
+
+      <FieldWrapper>
+        <FieldTitle>Action name</FieldTitle>
+        <Input placeholder='Use a name that describes the action' value={actionName} onChange={({ target: { value } }) => setActionName(value)} />
+      </FieldWrapper>
+
+      <ActionCustomFields actionType={action.type} />
+
+      <FieldWrapper>
+        <FieldTitle>Notes</FieldTitle>
+        <TextArea value={actionNotes} onChange={({ target: { value } }) => setActionNotes(value)} />
+      </FieldWrapper>
+    </Fragment>
+  )
+}
+
+export { ChooseActionBody }
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index b0e342e3c..a271c67ba 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,12 +1,26 @@
-import { ActionsType } from '@/types';
+import { ActionsType } from '@/types'
 
-export const ACTION_OPTIONS = [
+export type ActionOption = {
+  id: string
+  type?: ActionsType
+  label: string
+  description?: string
+  docsEndpoint?: string
+  docsDescription?: string
+  icon?: string
+  items?: ActionOption[]
+}
+
+export const ACTION_OPTIONS: ActionOption[] = [
   {
     id: 'add_cluster_info',
     label: 'Add Cluster Info',
     description: 'Add static cluster-scoped attributes to your data.',
     type: ActionsType.ADD_CLUSTER_INFO,
     icon: '/icons/actions/addclusterinfo.svg',
+    docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
+    docsDescription:
+      'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
   },
   {
     id: 'delete_attribute',
@@ -14,6 +28,8 @@ export const ACTION_OPTIONS = [
     description: 'Delete attributes from logs, metrics, and traces.',
     type: ActionsType.DELETE_ATTRIBUTES,
     icon: '/icons/actions/deleteattribute.svg',
+    docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
+    docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
   },
   {
     id: 'rename_attribute',
@@ -21,6 +37,9 @@ export const ACTION_OPTIONS = [
     description: 'Rename attributes in logs, metrics, and traces.',
     type: ActionsType.RENAME_ATTRIBUTES,
     icon: '/icons/actions/renameattribute.svg',
+    docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
+    docsDescription:
+      'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
   },
   {
     id: 'pii-masking',
@@ -28,12 +47,12 @@ export const ACTION_OPTIONS = [
     description: 'Mask PII data in your traces.',
     type: ActionsType.PII_MASKING,
     icon: '/icons/actions/piimasking.svg',
+    docsEndpoint: '/pipeline/actions/attributes/piimasking',
+    docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
   },
   {
     id: 'sampler',
     label: 'Samplers',
-    description: '',
-    type: ActionsType.PROBABILISTIC_SAMPLER,
     icon: '/icons/actions/sampler.svg',
     items: [
       {
@@ -41,19 +60,27 @@ export const ACTION_OPTIONS = [
         label: 'Error Sampler',
         description: 'Sample errors based on percentage.',
         type: ActionsType.ERROR_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/errorsampler',
+        docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
       },
       {
         id: 'probabilistic-sampler',
         label: 'Probabilistic Sampler',
         description: 'Sample traces based on percentage.',
         type: ActionsType.PROBABILISTIC_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
+        docsDescription:
+          'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
       },
       {
         id: 'latency-action',
         label: 'Latency Action',
         description: 'Add latency to your traces.',
         type: ActionsType.LATENCY_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/latencysampler',
+        docsDescription:
+          'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
       },
     ],
   },
-];
+]
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 977d632b2..2924da792 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,21 +1,18 @@
-import React, { useRef, useCallback } from 'react';
-import {
-  AutocompleteInput,
-  Modal,
-  NavigationButtons,
-  Text,
-} from '@/reuseable-components';
-import styled from 'styled-components';
-import { ACTION_OPTIONS } from './action-options';
+import React, { useRef, useCallback, useState } from 'react'
+import styled from 'styled-components'
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider } from '@/reuseable-components'
+import { ChooseActionBody } from '../choose-action-body'
+import { ACTION_OPTIONS, type ActionOption } from './action-options'
 
 const DefineActionContainer = styled.section`
   height: 640px;
   padding: 0px 220px;
   display: flex;
   flex-direction: column;
-`;
+  overflow-y: scroll;
+`
 
-const HeaderWrapper = styled.div`
+const WidthConstraint = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -23,70 +20,70 @@ const HeaderWrapper = styled.div`
   gap: 16px;
   max-width: 640px;
   margin: 32px 0 24px 0;
-`;
+`
 
 const SubTitle = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   line-height: 150%;
-`;
+`
 
 interface AddActionModalProps {
-  isModalOpen: boolean;
-  handleCloseModal: () => void;
+  isModalOpen: boolean
+  handleCloseModal: () => void
 }
 
 interface ModalActionComponentProps {
-  onNext: () => void;
+  onNext: () => void
 }
 
-const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(
-  ({ onNext }) => {
-    const buttons = [
-      {
-        label: 'DONE',
-        onClick: onNext,
-        variant: 'primary' as const,
-      },
-    ];
+const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({ onNext }) => {
+  const buttons = [
+    {
+      label: 'DONE',
+      onClick: onNext,
+      variant: 'primary' as const,
+    },
+  ]
 
-    return <NavigationButtons buttons={buttons} />;
-  }
-);
+  return <NavigationButtons buttons={buttons} />
+})
 
-export const AddActionModal: React.FC<AddActionModalProps> = ({
-  isModalOpen,
-  handleCloseModal,
-}) => {
-  const submitRef = useRef<(() => void) | null>(null);
+export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
+  const submitRef = useRef<(() => void) | null>(null)
+  const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null)
 
   const handleNext = useCallback(() => {
     if (submitRef.current) {
-      handleCloseModal();
+      handleCloseModal()
     }
-  }, [handleCloseModal]);
+  }, [handleCloseModal])
 
   const handleClose = useCallback(() => {
-    handleCloseModal();
-  }, [handleCloseModal]);
+    handleCloseModal()
+    setSelectedItem(null)
+  }, [handleCloseModal])
 
   return (
-    <Modal
-      isOpen={isModalOpen}
-      actionComponent={<ModalActionComponent onNext={handleNext} />}
-      header={{ title: 'Add Action' }}
-      onClose={handleClose}
-    >
+    <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
       <DefineActionContainer>
-        <HeaderWrapper>
+        <WidthConstraint>
           <Text size={20}>{'Define Action'}</Text>
           <SubTitle>
             {
               'Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
             }
           </SubTitle>
-        </HeaderWrapper>
-        <AutocompleteInput options={ACTION_OPTIONS} />
+        </WidthConstraint>
+
+        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={(item) => setSelectedItem(item)} />
+
+        {!!selectedItem?.type ? (
+          <WidthConstraint>
+            <Divider margin='16px 0' />
+            <ChooseActionBody action={selectedItem} />
+          </WidthConstraint>
+        ) : null}
       </DefineActionContainer>
     </Modal>
-  );
-};
+  )
+}
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
new file mode 100644
index 000000000..d69bcff01
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -0,0 +1,21 @@
+import { useState } from 'react'
+
+export function useActionFormData() {
+  const [actionName, setActionName] = useState('')
+  const [actionNotes, setActionNotes] = useState('')
+  const [exportedSignals, setExportedSignals] = useState({
+    logs: false,
+    metrics: false,
+    traces: false,
+  })
+
+  return {
+    actionName,
+    setActionName,
+    actionNotes,
+    setActionNotes,
+    exportedSignals,
+    setExportedSignals,
+    // resetFormData,
+  }
+}
diff --git a/frontend/webapp/public/icons/common/notebook.svg b/frontend/webapp/public/icons/common/notebook.svg
new file mode 100644
index 000000000..8b334a30f
--- /dev/null
+++ b/frontend/webapp/public/icons/common/notebook.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00016 3.37696V14.3327M8.00016 3.37696C10.0168 2.64365 12.6703 2.23608 14.6668 3.37696V13.7103C12.5356 12.7969 9.9581 13.4427 8.00016 14.3327M8.00016 3.37696C5.98356 2.64365 3.33004 2.23608 1.3335 3.37696V13.7103C3.46472 12.7969 6.04222 13.4427 8.00016 14.3327" stroke="#F9F9F9" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 2b31ea584..236286467 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,167 +1,150 @@
-import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
-import styled from 'styled-components';
-import { Text } from '../text';
-import Image from 'next/image';
-
-interface Option {
-  id: string;
-  label: string;
-  description?: string;
-  icon?: string;
-  items?: Option[]; // For handling a list of items
+import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react'
+import styled from 'styled-components'
+import Image from 'next/image'
+import { Text } from '../text'
+
+export interface Option {
+  id: string
+  label: string
+  description?: string
+  icon?: string
+  items?: Option[] // For handling a list of items
 }
 
 interface AutocompleteInputProps {
-  options: Option[];
-  placeholder?: string;
-  onOptionSelect?: (option: Option) => void;
+  options: Option[]
+  placeholder?: string
+  onOptionSelect?: (option: Option) => void
+}
+
+const filterOptions = (optionsList: Option[], input: string): Option[] => {
+  return optionsList.reduce<Option[]>((acc, option) => {
+    if (option.items) {
+      const filteredSubItems = filterOptions(option.items, input)
+      if (filteredSubItems.length) {
+        acc.push({ ...option, items: filteredSubItems })
+      }
+    } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
+      acc.push(option)
+    }
+    return acc
+  }, [])
 }
 
-const AutocompleteInput: FC<AutocompleteInputProps> = ({
-  options,
-  placeholder = 'Type to search...',
-  onOptionSelect,
-}) => {
-  const [query, setQuery] = useState('');
-  const [filteredOptions, setFilteredOptions] = useState<Option[]>([]);
-  const [showOptions, setShowOptions] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
+const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder = 'Type to search...', onOptionSelect }) => {
+  const [query, setQuery] = useState('')
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''))
+  const [showOptions, setShowOptions] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const input = e.target.value;
-    setQuery(input);
+    const input = e.target.value
+    setQuery(input)
     if (input) {
-      const filtered = filterOptions(options, input);
-      setFilteredOptions(filtered);
-      setShowOptions(true);
+      const filtered = filterOptions(options, input)
+      setFilteredOptions(filtered)
+      setShowOptions(true)
     } else {
-      setShowOptions(false);
+      setShowOptions(false)
     }
-  };
-
-  const filterOptions = (optionsList: Option[], input: string): Option[] => {
-    return optionsList.reduce<Option[]>((acc, option) => {
-      if (option.items) {
-        const filteredSubItems = filterOptions(option.items, input);
-        if (filteredSubItems.length) {
-          acc.push({ ...option, items: filteredSubItems });
-        }
-      } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
-        acc.push(option);
-      }
-      return acc;
-    }, []);
-  };
+  }
 
   const handleOptionClick = (option: Option) => {
-    setQuery(option.label);
-    setShowOptions(false);
+    setQuery(option.label)
+    setShowOptions(false)
     if (onOptionSelect) {
-      onOptionSelect(option);
+      onOptionSelect(option)
     }
-  };
+  }
 
   const flattenOptions = (options: Option[]): Option[] => {
     return options.reduce<Option[]>((acc, option) => {
-      acc.push(option);
+      acc.push(option)
       if (option.items) {
-        acc = acc.concat(flattenOptions(option.items));
+        acc = acc.concat(flattenOptions(option.items))
       }
-      return acc;
-    }, []);
-  };
+      return acc
+    }, [])
+  }
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     // Flatten the options to handle keyboard navigation - TODO: Refactor this
-    return;
-    const flatOptions = flattenOptions(filteredOptions);
+    return
+    const flatOptions = flattenOptions(filteredOptions)
     if (e.key === 'ArrowDown' && activeIndex < flatOptions.length - 1) {
-      setActiveIndex(activeIndex + 1);
+      setActiveIndex(activeIndex + 1)
     } else if (e.key === 'ArrowUp' && activeIndex > 0) {
-      setActiveIndex(activeIndex - 1);
+      setActiveIndex(activeIndex - 1)
     } else if (e.key === 'Enter' && activeIndex >= 0) {
-      handleOptionClick(flatOptions[activeIndex]);
+      handleOptionClick(flatOptions[activeIndex])
     }
-  };
+  }
 
   return (
     <AutocompleteContainer>
       <InputWrapper>
         <StyledInput
-          type="text"
+          type='text'
           value={query}
           placeholder={placeholder}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           onBlur={() => setShowOptions(false)}
-          onFocus={() => query && setShowOptions(true)}
+          onFocus={() => setShowOptions(true)}
         />
       </InputWrapper>
       {showOptions && (
         <OptionsList>
           {filteredOptions.map((option, index) => (
-            <OptionItem
-              key={option.id}
-              option={option}
-              isActive={index === activeIndex}
-              onClick={handleOptionClick}
-            />
+            <OptionItem key={option.id} option={option} isActive={index === activeIndex} onClick={handleOptionClick} />
           ))}
         </OptionsList>
       )}
     </AutocompleteContainer>
-  );
-};
+  )
+}
 
 interface OptionItemProps {
-  option: Option;
-  isActive: boolean;
-  onClick: (option: Option) => void;
+  option: Option
+  isActive: boolean
+  onClick: (option: Option) => void
 }
 
 const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
-  const hasSubItems = !!option.items && option.items.length > 0;
+  const hasSubItems = !!option.items && option.items.length > 0
 
   return (
-    <OptionItemContainer
-      isActive={isActive}
-      isList={hasSubItems}
-      onMouseDown={() => onClick(option)}
-    >
-      {option.icon && (
-        <Image width={16} height={16} src={option.icon} alt={option.label} />
-      )}
+    <OptionItemContainer isActive={isActive} isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
+      {option.icon && <Image width={16} height={16} src={option.icon} alt={option.label} />}
+
       <OptionContent>
         <OptionLabelWrapper>
           <OptionLabel>{option.label}</OptionLabel>
           <OptionDescription>{option.description}</OptionDescription>
         </OptionLabelWrapper>
-        {option.items && option.items.length > 0 && (
+
+        {hasSubItems && (
           <SubOptionsList>
-            {option.items.map((subOption) => (
+            {option.items?.map((subOption) => (
               <SubOptionContainer key={subOption.id}>
                 <VerticalLine />
-                <OptionItem
-                  option={subOption}
-                  isActive={false}
-                  onClick={onClick}
-                />
+                <OptionItem option={subOption} isActive={false} onClick={onClick} />
               </SubOptionContainer>
             ))}
           </SubOptionsList>
         )}
       </OptionContent>
     </OptionItemContainer>
-  );
-};
+  )
+}
 
-export { AutocompleteInput };
+export { AutocompleteInput }
 
 /** Styled Components */
 
 const AutocompleteContainer = styled.div`
   position: relative;
-`;
+`
 
 const InputWrapper = styled.div`
   width: calc(100% - 16px);
@@ -180,7 +163,7 @@ const InputWrapper = styled.div`
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
-`;
+`
 
 const StyledInput = styled.input`
   flex: 1;
@@ -204,7 +187,7 @@ const StyledInput = styled.input`
     background-color: #555;
     cursor: not-allowed;
   }
-`;
+`
 
 const OptionsList = styled.ul`
   position: absolute;
@@ -217,37 +200,36 @@ const OptionsList = styled.ul`
   border: 1px solid ${({ theme }) => theme.colors.border};
   z-index: 9999;
   padding: 12px;
-`;
+`
 
 interface OptionItemContainerProps {
-  isActive: boolean;
-  isList: boolean;
+  isActive: boolean
+  isList: boolean
 }
 
 const OptionItemContainer = styled.li<OptionItemContainerProps>`
+  width: 100%;
   padding: 8px 12px;
   cursor: ${({ isList }) => (isList ? 'default' : 'pointer')};
   border-radius: 24px;
   gap: 8px;
   display: flex;
   align-items: ${({ isList }) => (isList ? 'flex-start' : 'center')};
-  background: ${({ isActive, theme }) =>
-    isActive ? theme.colors.activeBackground : 'transparent'};
+  background: ${({ isActive, theme }) => (isActive ? theme.colors.activeBackground : 'transparent')};
 
   &:hover {
-    background: ${({ theme, isList }) =>
-      !isList && theme.colors.white_opacity['008']};
+    background: ${({ theme, isList }) => !isList && theme.colors.white_opacity['008']};
   }
-`;
+`
 
 const OptionContent = styled.div`
   width: 100%;
-`;
+`
 
 const SubOptionContainer = styled.div`
   display: flex;
   width: 100%;
-`;
+`
 
 const VerticalLine = styled.div`
   width: 1px;
@@ -255,27 +237,28 @@ const VerticalLine = styled.div`
   background-color: ${({ theme }) => theme.colors.white_opacity['008']};
   position: absolute;
   left: 33px;
-`;
+`
 
 const OptionLabelWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
-`;
+`
 
 const OptionLabel = styled(Text)`
   flex: 1;
   font-size: 14px;
-`;
+`
 
 const OptionDescription = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   font-size: 10px;
   line-height: 150%;
-`;
+`
 
 const SubOptionsList = styled.ul`
   padding-left: 0px;
   margin: 4px 0 0 0;
   list-style: none;
-`;
+  width: 100%;
+`
diff --git a/frontend/webapp/reuseable-components/button/DocsButton.tsx b/frontend/webapp/reuseable-components/button/DocsButton.tsx
new file mode 100644
index 000000000..266089a82
--- /dev/null
+++ b/frontend/webapp/reuseable-components/button/DocsButton.tsx
@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import styled from 'styled-components'
+import { Button, ButtonProps } from '.'
+
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  gap: 6px;
+  min-width: 100px;
+`
+
+export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint?: string; variant?: ButtonProps['variant'] }) => {
+  return (
+    <StyledButton variant={variant} onClick={() => window.open(`https://docs.odigos.io${endpoint}`, '_blank', 'noopener noreferrer')}>
+      <Image src='/icons/common/notebook.svg' alt='Docs' width={18} height={18} />
+      Docs
+    </StyledButton>
+  )
+}
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index e74273f42..bba671fd3 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -1,9 +1,9 @@
-import React, { ButtonHTMLAttributes } from 'react';
-import styled, { css } from 'styled-components';
+import React, { ButtonHTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
-  isDisabled?: boolean;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+  isDisabled?: boolean
 }
 
 const variantStyles = {
@@ -63,7 +63,7 @@ const variantStyles = {
       background: ${({ theme }) => theme.colors.danger};
     }
   `,
-};
+}
 
 const StyledButton = styled.button<ButtonProps>`
   height: 36px;
@@ -87,10 +87,10 @@ const StyledButton = styled.button<ButtonProps>`
         background-color: #eaeaea;
       }
     `}
-`;
+`
 
 const ButtonContainer = styled.div<{
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
 }>`
   border: 2px solid transparent;
   padding: 2px;
@@ -100,24 +100,14 @@ const ButtonContainer = styled.div<{
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
-`;
+`
 
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  variant = 'primary',
-  isDisabled = false,
-  ...props
-}) => {
+export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', isDisabled = false, ...props }) => {
   return (
     <ButtonContainer variant={variant}>
-      <StyledButton
-        variant={variant}
-        disabled={isDisabled}
-        isDisabled={isDisabled}
-        {...props}
-      >
+      <StyledButton variant={variant} disabled={isDisabled} isDisabled={isDisabled} {...props}>
         {children}
       </StyledButton>
     </ButtonContainer>
-  );
-};
+  )
+}
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index 0528fce7f..b710d83f4 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -1,48 +1,37 @@
-import React from 'react';
-import { Text } from '../text';
-import styled from 'styled-components';
-import { Checkbox } from '../checkbox';
-import { ExportedSignals } from '@/types';
+import React from 'react'
+import { Text } from '../text'
+import styled from 'styled-components'
+import { Checkbox } from '../checkbox'
+import { ExportedSignals } from '@/types'
 
 interface Monitor {
-  id: string;
-  title: string;
-  tooltip?: string;
+  id: string | number
+  title: string
+  tooltip?: string
 }
 
 interface CheckboxListProps {
-  monitors: Monitor[];
-  title?: string;
-  exportedSignals: ExportedSignals;
-  handleSignalChange: (signal: string, value: boolean) => void;
+  monitors: Monitor[]
+  title?: string
+  exportedSignals: ExportedSignals
+  handleSignalChange: (signal: Monitor['id'], value: boolean) => void
 }
 
 const ListContainer = styled.div`
   display: flex;
   gap: 32px;
-`;
+`
 
 const TextWrapper = styled.div`
   margin-bottom: 14px;
-`;
+`
 
-const CheckboxList: React.FC<CheckboxListProps> = ({
-  monitors,
-  title,
-  exportedSignals,
-  handleSignalChange,
-}) => {
+const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title, exportedSignals, handleSignalChange }) => {
   function isItemDisabled(item: Monitor) {
-    const selectedItems = Object.values(exportedSignals).filter(
-      (value) => value
-    );
+    const selectedItems = Object.values(exportedSignals).filter((value) => value)
+    const trueValues = Object.values(exportedSignals).filter(Boolean)
 
-    const trueValues = Object.values(exportedSignals).filter(Boolean);
-
-    return (
-      (monitors.length === 1 && trueValues.length === 1) ||
-      (selectedItems.length === 1 && exportedSignals[item.id])
-    );
+    return (monitors.length === 1 && trueValues.length === 1) || (selectedItems.length === 1 && exportedSignals[item.id])
   }
 
   return (
@@ -54,6 +43,7 @@ const CheckboxList: React.FC<CheckboxListProps> = ({
           </Text>
         </TextWrapper>
       )}
+
       <ListContainer>
         {monitors.map((monitor) => (
           <Checkbox
@@ -66,7 +56,7 @@ const CheckboxList: React.FC<CheckboxListProps> = ({
         ))}
       </ListContainer>
     </div>
-  );
-};
+  )
+}
 
-export { CheckboxList };
+export { CheckboxList }
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 110f5c759..c139acfc8 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1,5 +1,6 @@
 export * from './text';
 export * from './button';
+export * from './button/DocsButton';
 export * from './section-title';
 export * from './input';
 export * from './tooltip';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 67b935d7a..214dd63e9 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -1,38 +1,38 @@
-import Image from 'next/image';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Input } from '../input';
-import { Button } from '../button';
-import { Text } from '../text';
-import { Tooltip } from '../tooltip';
+import Image from 'next/image'
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { Input } from '../input'
+import { Button } from '../button'
+import { Text } from '../text'
+import { Tooltip } from '../tooltip'
 
 interface InputListProps {
-  initialValues?: string[];
-  title?: string;
-  tooltip?: string;
-  required?: boolean;
-  value?: string[];
-  onChange: (values: string[]) => void;
+  initialValues?: string[]
+  title?: string
+  tooltip?: string
+  required?: boolean
+  value?: string[]
+  onChange: (values: string[]) => void
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`;
+`
 
 const InputRow = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
-`;
+`
 
 const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
-`;
+`
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
@@ -44,63 +44,62 @@ const AddButton = styled(Button)<{ disabled: boolean }>`
   align-self: flex-start;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: opacity 0.3s;
-`;
+`
 
 const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 500;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration-line: underline;
-`;
+`
 
 const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-`;
+`
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-`;
-
-const InputList: React.FC<InputListProps> = ({
-  initialValues = [''],
-  title,
-  tooltip,
-  required,
-  onChange,
-  value = [''],
-}) => {
-  const [inputs, setInputs] = useState<string[]>(value || initialValues);
+`
+
+const INITIAL = ['']
+
+const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
+  const [inputs, setInputs] = useState<string[]>(value || initialValues)
+
+  useEffect(() => {
+    if (!inputs.length) setInputs(INITIAL)
+  }, [])
 
   useEffect(() => {
     if (initialValues.length > 0) {
-      onChange(initialValues);
+      onChange(initialValues)
     }
-  }, [initialValues]);
+  }, [initialValues])
 
   const handleAddInput = () => {
-    setInputs([...inputs, '']);
-  };
+    setInputs([...inputs, ''])
+  }
 
   const handleDeleteInput = (index: number) => {
-    const newInputs = inputs.filter((_, i) => i !== index);
-    setInputs(newInputs);
-    onChange(newInputs);
-  };
+    const newInputs = inputs.filter((_, i) => i !== index)
+    setInputs(newInputs)
+    onChange(newInputs)
+  }
 
   const handleInputChange = (value: string, index: number) => {
-    const newInputs = [...inputs];
-    newInputs[index] = value;
-    setInputs(newInputs);
-    onChange(newInputs);
-  };
+    const newInputs = [...inputs]
+    newInputs[index] = value
+    setInputs(newInputs)
+    onChange(newInputs)
+  }
 
   // Check if any input field is empty
-  const isAddButtonDisabled = inputs.some((input) => input.trim() === '');
+  const isAddButtonDisabled = inputs.some((input) => input.trim() === '')
 
   return (
     <Container>
@@ -108,49 +107,31 @@ const InputList: React.FC<InputListProps> = ({
         <HeaderWrapper>
           <Title>{title}</Title>
           {!required && (
-            <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+            <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
               (optional)
             </Text>
           )}
           {tooltip && (
             <Tooltip text={tooltip || ''}>
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
+              <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />
             </Tooltip>
           )}
         </HeaderWrapper>
       )}
       {inputs.map((value, index) => (
         <InputRow key={index}>
-          <Input
-            value={value}
-            onChange={(e) => handleInputChange(e.target.value, index)}
-          />
+          <Input value={value} onChange={(e) => handleInputChange(e.target.value, index)} />
           <DeleteButton onClick={() => handleDeleteInput(index)}>
-            <Image
-              src="/icons/common/trash.svg"
-              alt="Delete"
-              width={16}
-              height={16}
-            />
+            <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </InputRow>
       ))}
-      <AddButton
-        disabled={isAddButtonDisabled}
-        variant={'tertiary'}
-        onClick={handleAddInput}
-      >
-        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddInput}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
-  );
-};
+  )
+}
 
-export { InputList };
+export { InputList }
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index cbd7904ea..c85714cfa 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -1,45 +1,45 @@
-import Image from 'next/image';
-import React, { useState, useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { Input } from '../input';
-import { Button } from '../button';
-import { Text } from '../text';
-import { Tooltip } from '../tooltip';
+import Image from 'next/image'
+import React, { useState, useEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { Input } from '../input'
+import { Button } from '../button'
+import { Text } from '../text'
+import { Tooltip } from '../tooltip'
 
 interface KeyValueInputsListProps {
-  initialKeyValuePairs?: { key: string; value: string }[];
-  value?: { key: string; value: string }[];
-  title?: string;
-  tooltip?: string;
-  required?: boolean;
-  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void;
+  initialKeyValuePairs?: { key: string; value: string }[]
+  value?: { key: string; value: string }[]
+  title?: string
+  tooltip?: string
+  required?: boolean
+  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`;
+`
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-`;
+`
 
 const Row = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 12px;
-`;
+`
 
 const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
-`;
+`
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
@@ -51,77 +51,74 @@ const AddButton = styled(Button)<{ disabled: boolean }>`
   align-self: flex-start;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: opacity 0.3s;
-`;
+`
 
 const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 500;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration-line: underline;
-`;
+`
 
 const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-`;
+`
+
+const INITIAL = [{ key: '', value: '' }]
 
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
-  initialKeyValuePairs = [{ key: '', value: '' }],
-  value = [{ key: '', value: '' }],
+  initialKeyValuePairs = INITIAL,
+  value = INITIAL,
+  onChange,
   title,
   tooltip,
   required,
-  onChange,
 }) => {
-  const [keyValuePairs, setKeyValuePairs] = useState<
-    { key: string; value: string }[]
-  >(value || initialKeyValuePairs);
+  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs)
 
-  const validPairsRef = useRef<{ key: string; value: string }[]>([]);
+  useEffect(() => {
+    if (!keyValuePairs.length) setKeyValuePairs(INITIAL)
+  }, [])
+
+  const validPairsRef = useRef<{ key: string; value: string }[]>([])
 
   useEffect(() => {
     // Filter out rows where either key or value is empty
-    const validKeyValuePairs = keyValuePairs.filter(
-      (pair) => pair.key.trim() !== '' && pair.value.trim() !== ''
-    );
+    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '')
 
     // Only trigger onChange if valid key-value pairs have changed
-    if (
-      JSON.stringify(validPairsRef.current) !==
-      JSON.stringify(validKeyValuePairs)
-    ) {
-      validPairsRef.current = validKeyValuePairs;
+    if (JSON.stringify(validPairsRef.current) !== JSON.stringify(validKeyValuePairs)) {
+      validPairsRef.current = validKeyValuePairs
       if (onChange) {
-        onChange(validKeyValuePairs);
+        onChange(validKeyValuePairs)
       }
     }
-  }, [keyValuePairs, onChange]);
+  }, [keyValuePairs, onChange])
 
   const handleAddRow = () => {
-    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }]);
-  };
+    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }])
+  }
 
   const handleDeleteRow = (index: number) => {
-    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index));
-  };
+    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index))
+  }
 
   const handleKeyChange = (key: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs];
-    newKeyValuePairs[index].key = key;
-    setKeyValuePairs(newKeyValuePairs);
-  };
+    const newKeyValuePairs = [...keyValuePairs]
+    newKeyValuePairs[index].key = key
+    setKeyValuePairs(newKeyValuePairs)
+  }
 
   const handleValueChange = (value: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs];
-    newKeyValuePairs[index].value = value;
-    setKeyValuePairs(newKeyValuePairs);
-  };
+    const newKeyValuePairs = [...keyValuePairs]
+    newKeyValuePairs[index].value = value
+    setKeyValuePairs(newKeyValuePairs)
+  }
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = keyValuePairs.some(
-    (pair) => pair.key.trim() === '' || pair.value.trim() === ''
-  );
+  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '')
 
   return (
     <Container>
@@ -130,60 +127,30 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
           <HeaderWrapper>
             <Title>{title}</Title>
             {!required && (
-              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+              <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
                 (optional)
               </Text>
             )}
-            {tooltip && (
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
-            )}
+            {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />}
           </HeaderWrapper>
         </Tooltip>
       )}
       {keyValuePairs.map((pair, index) => (
         <Row key={index}>
-          <Input
-            value={pair.key}
-            onChange={(e) => handleKeyChange(e.target.value, index)}
-            placeholder="Define attribute"
-          />
-          <Image
-            src="/icons/common/arrow-right.svg"
-            alt="Arrow"
-            width={16}
-            height={16}
-          />
-          <Input
-            value={pair.value}
-            onChange={(e) => handleValueChange(e.target.value, index)}
-            placeholder="Define value"
-          />
+          <Input value={pair.key} onChange={(e) => handleKeyChange(e.target.value, index)} placeholder='Define attribute' />
+          <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
+          <Input value={pair.value} onChange={(e) => handleValueChange(e.target.value, index)} placeholder='Define value' />
           <DeleteButton onClick={() => handleDeleteRow(index)}>
-            <Image
-              src="/icons/common/trash.svg"
-              alt="Delete"
-              width={16}
-              height={16}
-            />
+            <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </Row>
       ))}
-      <AddButton
-        disabled={isAddButtonDisabled}
-        variant={'tertiary'}
-        onClick={handleAddRow}
-      >
-        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddRow}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
-  );
-};
+  )
+}
 
-export default KeyValueInputsList;
+export default KeyValueInputsList
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 393e02dcc..926a55265 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -1,25 +1,25 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from 'react'
+import styled from 'styled-components'
 
-interface TextProps {
-  children: React.ReactNode;
-  color?: string;
-  size?: number;
-  weight?: number;
-  align?: 'left' | 'center' | 'right';
-  family?: 'primary' | 'secondary';
-  opacity?: number;
-  decoration?: string;
+interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  children: React.ReactNode
+  color?: string
+  size?: number
+  weight?: number
+  align?: 'left' | 'center' | 'right'
+  family?: 'primary' | 'secondary'
+  opacity?: number
+  decoration?: string
 }
 
 const TextWrapper = styled.div<{
-  color?: string;
-  size?: number;
-  weight?: number;
-  align?: 'left' | 'center' | 'right';
-  family?: 'primary' | 'secondary';
-  opacity?: number;
-  decoration?: string;
+  color?: string
+  size?: number
+  weight?: number
+  align?: 'left' | 'center' | 'right'
+  family?: 'primary' | 'secondary'
+  opacity?: number
+  decoration?: string
 }>`
   color: ${({ color, theme }) => color || theme.colors.text};
   font-size: ${({ size }) => (size !== undefined ? size : 16)}px;
@@ -29,14 +29,14 @@ const TextWrapper = styled.div<{
   text-decoration: ${({ decoration }) => decoration || 'none'};
   font-family: ${({ theme, family }) => {
     if (family === 'secondary') {
-      return theme.font_family.secondary;
+      return theme.font_family.secondary
     }
-    return theme.font_family.primary;
+    return theme.font_family.primary
   }};
-`;
+`
 
 const Text: React.FC<TextProps> = ({ children, ...props }) => {
-  return <TextWrapper {...props}>{children}</TextWrapper>;
-};
+  return <TextWrapper {...props}>{children}</TextWrapper>
+}
 
-export { Text };
+export { Text }

From f435debe385df716c211e17d960311d5df7e7267 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Tue, 22 Oct 2024 11:32:38 +0300
Subject: [PATCH 290/374] [GEN-1541] Add delete action mutation (#1609)

This pull request introduces changes to the `DeleteAction` functionality
in the `frontend/graph` package, adding support for an `actionType`
parameter. This enhancement allows for more specific handling of
different action types during deletion.

Key changes include:

### GraphQL Schema and Resolvers

*
[`frontend/graph/schema.graphqls`](diffhunk://#diff-bc07b91dedd1782d9ddbbb6374ad97c7604f9a267de5174645723d863c732f80L314-R314):
Updated the `deleteAction` mutation to include an `actionType`
parameter.
*
[`frontend/graph/schema.resolvers.go`](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L603-R620):
Modified the `DeleteAction` resolver to handle different action types
based on the `actionType` parameter.

### Generated Code

*
[`frontend/graph/generated.go`](diffhunk://#diff-4bacf1f13939a5c243f3f83d21f4560b331d13667d81ea5945ed1f57ddb205f2L200-R200):
Updated the `DeleteAction` method signatures and complexity calculations
to include the `actionType` parameter.
[[1]](diffhunk://#diff-4bacf1f13939a5c243f3f83d21f4560b331d13667d81ea5945ed1f57ddb205f2L200-R200)
[[2]](diffhunk://#diff-4bacf1f13939a5c243f3f83d21f4560b331d13667d81ea5945ed1f57ddb205f2L266-R266)
[[3]](diffhunk://#diff-4bacf1f13939a5c243f3f83d21f4560b331d13667d81ea5945ed1f57ddb205f2L911-R911)
[[4]](diffhunk://#diff-4bacf1f13939a5c243f3f83d21f4560b331d13667d81ea5945ed1f57ddb205f2R1342-R1350)
[[5]](diffhunk://#diff-4bacf1f13939a5c243f3f83d21f4560b331d13667d81ea5945ed1f57ddb205f2L5793-R5802)

### Action Services

*
[`frontend/services/actions/addclusterinfo.go`](diffhunk://#diff-c2da2861415e61f772e3b44d22810aa34b4eba6070f744709c4b1b6b919a3f09R148-R162):
Added the `DeleteAddClusterInfo` function to handle the deletion of
`AddClusterInfo` actions.
*
[`frontend/services/actions/addclusterinfo.go`](diffhunk://#diff-c2da2861415e61f772e3b44d22810aa34b4eba6070f744709c4b1b6b919a3f09R13):
Imported `apierrors` for error handling in the new deletion function.
---
 frontend/graph/generated.go                 | 17 +++++++++++++----
 frontend/graph/schema.graphqls              |  2 +-
 frontend/graph/schema.resolvers.go          | 20 ++++++++++++++++++--
 frontend/services/actions/addclusterinfo.go | 16 ++++++++++++++++
 4 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 47916d30c..42dd0c20e 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -197,7 +197,7 @@ type ComplexityRoot struct {
 	Mutation struct {
 		CreateAction                 func(childComplexity int, action model.ActionInput) int
 		CreateNewDestination         func(childComplexity int, destination model.DestinationInput) int
-		DeleteAction                 func(childComplexity int, id string) int
+		DeleteAction                 func(childComplexity int, id string, actionType string) int
 		PersistK8sNamespace          func(childComplexity int, namespace model.PersistNamespaceItemInput) int
 		PersistK8sSources            func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
 		TestConnectionForDestination func(childComplexity int, destination model.DestinationInput) int
@@ -263,7 +263,7 @@ type MutationResolver interface {
 	UpdateDestination(ctx context.Context, id string, destination model.DestinationInput) (*model.Destination, error)
 	CreateAction(ctx context.Context, action model.ActionInput) (model.Action, error)
 	UpdateAction(ctx context.Context, id string, action model.ActionInput) (model.Action, error)
-	DeleteAction(ctx context.Context, id string) (bool, error)
+	DeleteAction(ctx context.Context, id string, actionType string) (bool, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
@@ -908,7 +908,7 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 			return 0, false
 		}
 
-		return e.complexity.Mutation.DeleteAction(childComplexity, args["id"].(string)), true
+		return e.complexity.Mutation.DeleteAction(childComplexity, args["id"].(string), args["actionType"].(string)), true
 
 	case "Mutation.persistK8sNamespace":
 		if e.complexity.Mutation.PersistK8sNamespace == nil {
@@ -1339,6 +1339,15 @@ func (ec *executionContext) field_Mutation_deleteAction_args(ctx context.Context
 		}
 	}
 	args["id"] = arg0
+	var arg1 string
+	if tmp, ok := rawArgs["actionType"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("actionType"))
+		arg1, err = ec.unmarshalNString2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["actionType"] = arg1
 	return args, nil
 }
 
@@ -5790,7 +5799,7 @@ func (ec *executionContext) _Mutation_deleteAction(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().DeleteAction(rctx, fc.Args["id"].(string))
+		return ec.resolvers.Mutation().DeleteAction(rctx, fc.Args["id"].(string), fc.Args["actionType"].(string))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 591a40011..83a1d71be 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -311,5 +311,5 @@ type Mutation {
 
   createAction(action: ActionInput!): Action!
   updateAction(id: ID!, action: ActionInput!): Action!
-  deleteAction(id: ID!): Boolean!
+  deleteAction(id: ID!, actionType: String!): Boolean!
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 553cbbf33..aa8415bea 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -600,8 +600,24 @@ func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action m
 }
 
 // DeleteAction is the resolver for the deleteAction field.
-func (r *mutationResolver) DeleteAction(ctx context.Context, id string) (bool, error) {
-	panic(fmt.Errorf("not implemented: DeleteAction - deleteAction"))
+func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionType string) (bool, error) {
+
+	switch actionType {
+	case actionservices.ActionTypeAddClusterInfo:
+		err := actionservices.DeleteAddClusterInfo(ctx, id)
+		if err != nil {
+			return false, fmt.Errorf("failed to delete AddClusterInfo: %v", err)
+		}
+
+	case actionservices.ActionTypeDeleteAttribute:
+		// Handle other action types...
+
+	default:
+		return false, fmt.Errorf("unsupported action type: %s", actionType)
+	}
+
+	// Return true if the deletion was successful
+	return true, nil
 }
 
 // ComputePlatform is the resolver for the computePlatform field.
diff --git a/frontend/services/actions/addclusterinfo.go b/frontend/services/actions/addclusterinfo.go
index aefc359ef..57f324883 100644
--- a/frontend/services/actions/addclusterinfo.go
+++ b/frontend/services/actions/addclusterinfo.go
@@ -10,6 +10,7 @@ import (
 	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
 	"github.com/odigos-io/odigos/frontend/services"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
@@ -144,3 +145,18 @@ func UpdateAddClusterInfo(ctx context.Context, id string, action model.ActionInp
 
 	return response, nil
 }
+
+func DeleteAddClusterInfo(ctx context.Context, id string) error {
+	odigosns := consts.DefaultOdigosNamespace
+
+	// Delete the action by its ID from Kubernetes
+	err := kube.DefaultClient.ActionsClient.AddClusterInfos(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			return fmt.Errorf("AddClusterInfo action with ID %s not found", id)
+		}
+		return fmt.Errorf("failed to delete AddClusterInfo action: %v", err)
+	}
+
+	return nil
+}

From 9dbdc2125c0919a46f8dd246cdff76c6c66518c0 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:36:23 +0300
Subject: [PATCH 291/374] Lint rules (#1610)

---
 frontend/webapp/.eslintrc.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/webapp/.eslintrc.json b/frontend/webapp/.eslintrc.json
index a8cdd12f5..2e1cbf9e1 100644
--- a/frontend/webapp/.eslintrc.json
+++ b/frontend/webapp/.eslintrc.json
@@ -1,6 +1,7 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
+    "semi": ["error", "always"],
     "quotes": ["error", "single", { "avoidEscape": true }]
   }
 }

From a55f35b424d1b4fad90c5e8961bd10bd0fcb3038 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:45:09 +0300
Subject: [PATCH 292/374] fix: KeyValueInputsList would not always call
 onChange

---
 .../key-value-input-list/index.tsx            | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index c85714cfa..8cb213e6a 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -82,39 +82,39 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
     if (!keyValuePairs.length) setKeyValuePairs(INITIAL)
   }, [])
 
-  const validPairsRef = useRef<{ key: string; value: string }[]>([])
+  const recordedPairs = useRef('')
 
   useEffect(() => {
     // Filter out rows where either key or value is empty
     const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '')
+    const stringified = JSON.stringify(validKeyValuePairs)
 
     // Only trigger onChange if valid key-value pairs have changed
-    if (JSON.stringify(validPairsRef.current) !== JSON.stringify(validKeyValuePairs)) {
-      validPairsRef.current = validKeyValuePairs
-      if (onChange) {
-        onChange(validKeyValuePairs)
-      }
+    if (recordedPairs.current !== stringified) {
+      recordedPairs.current = stringified
+
+      if (onChange) onChange(validKeyValuePairs)
     }
   }, [keyValuePairs, onChange])
 
   const handleAddRow = () => {
-    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }])
-  }
-
-  const handleDeleteRow = (index: number) => {
-    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index))
+    setKeyValuePairs((prev) => {
+      const payload = [...prev]
+      payload.push({ key: '', value: '' })
+      return payload
+    })
   }
 
-  const handleKeyChange = (key: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs]
-    newKeyValuePairs[index].key = key
-    setKeyValuePairs(newKeyValuePairs)
+  const handleDeleteRow = (idx: number) => {
+    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx))
   }
 
-  const handleValueChange = (value: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs]
-    newKeyValuePairs[index].value = value
-    setKeyValuePairs(newKeyValuePairs)
+  const handleChange = (key: 'key' | 'value', val: string, idx: number) => {
+    setKeyValuePairs((prev) => {
+      const payload = [...prev]
+      payload[idx][key] = val
+      return payload
+    })
   }
 
   // Check if any key or value field is empty
@@ -137,9 +137,9 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
       )}
       {keyValuePairs.map((pair, index) => (
         <Row key={index}>
-          <Input value={pair.key} onChange={(e) => handleKeyChange(e.target.value, index)} placeholder='Define attribute' />
+          <Input value={pair.key} onChange={(e) => handleChange('key', e.target.value, index)} placeholder='Define attribute' />
           <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
-          <Input value={pair.value} onChange={(e) => handleValueChange(e.target.value, index)} placeholder='Define value' />
+          <Input value={pair.value} onChange={(e) => handleChange('value', e.target.value, index)} placeholder='Define value' />
           <DeleteButton onClick={() => handleDeleteRow(index)}>
             <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>

From 619bb6d2c7495cb92e23462357949c8852c617c9 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:45:44 +0300
Subject: [PATCH 293/374] feat: custom fields with state management

---
 .../action-custom-fields.tsx                  | 12 ++--
 .../main/actions/choose-action-body/index.tsx | 24 ++++++--
 .../webapp/hooks/actions/useActionFormData.ts | 60 ++++++++++++++++---
 3 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
index 259a62233..7d782038c 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -4,6 +4,8 @@ import type { ActionsType } from '@/types'
 
 interface ActionCustomFieldsProps {
   actionType?: ActionsType
+  value: any
+  setValue: (value: any) => void
 }
 
 const FieldWrapper = styled.div`
@@ -15,13 +17,13 @@ const FieldTitle = styled(Text)`
   margin-bottom: 12px;
 `
 
-const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) => {
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
   switch (actionType) {
     case 'AddClusterInfo':
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to add</FieldTitle>
-          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
@@ -29,7 +31,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) =
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to delete</FieldTitle>
-          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
@@ -37,7 +39,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) =
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to rename</FieldTitle>
-          <KeyValueInputsList required value={[]} onChange={(arr) => console.log(arr)} />
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
@@ -45,7 +47,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType }) =
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to mask</FieldTitle>
-          <InputList required value={[]} onChange={(arr) => console.log(arr)} />
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
       )
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 94e3fe6ab..4e2b20eef 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useMemo } from 'react'
 import styled from 'styled-components'
 import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components'
 import { MONITORING_OPTIONS } from '@/components/setup/destination/utils'
@@ -26,7 +26,13 @@ interface ChooseActionContentProps {
 }
 
 const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
-  const { actionName, setActionName, actionNotes, setActionNotes, exportedSignals, setExportedSignals } = useActionFormData()
+  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData()
+
+  useEffect(() => {
+    return () => {
+      resetFormData()
+    }
+  }, [])
 
   return (
     <Fragment>
@@ -49,14 +55,22 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
 
       <FieldWrapper>
         <FieldTitle>Action name</FieldTitle>
-        <Input placeholder='Use a name that describes the action' value={actionName} onChange={({ target: { value } }) => setActionName(value)} />
+        <Input
+          placeholder='Use a name that describes the action'
+          value={formData.name}
+          onChange={({ target: { value } }) => handleFormChange('name', value)}
+        />
       </FieldWrapper>
 
-      <ActionCustomFields actionType={action.type} />
+      <ActionCustomFields
+        actionType={action.type}
+        value={formData.details ? JSON.parse(formData.details) : undefined}
+        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
+      />
 
       <FieldWrapper>
         <FieldTitle>Notes</FieldTitle>
-        <TextArea value={actionNotes} onChange={({ target: { value } }) => setActionNotes(value)} />
+        <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
     </Fragment>
   )
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index d69bcff01..4e6faf8a1 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,21 +1,65 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+
+type Signal = 'TRACES' | 'METRICS' | 'LOGS'
+type FormData = {
+  type: string
+  name: string
+  notes: string
+  disable: boolean
+  signals: Signal[]
+  details: string
+}
+
+const INITIAL: FormData = {
+  type: '',
+  name: '',
+  notes: '',
+  disable: true,
+  signals: [],
+  details: '',
+}
 
 export function useActionFormData() {
-  const [actionName, setActionName] = useState('')
-  const [actionNotes, setActionNotes] = useState('')
+  const [formData, setFormData] = useState({ ...INITIAL })
   const [exportedSignals, setExportedSignals] = useState({
     logs: false,
     metrics: false,
     traces: false,
   })
 
+  const resetFormData = () => {
+    setFormData({ ...INITIAL })
+  }
+
+  const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
+    setFormData((prev) => {
+      const prevVal = prev[key]
+
+      if (Array.isArray(prevVal)) {
+      }
+
+      return {
+        ...prev,
+        [key]: val,
+      }
+    })
+  }
+
+  useEffect(() => {
+    const signals: (typeof INITIAL)['signals'] = []
+
+    Object.entries(exportedSignals).forEach(([k, v]) => {
+      if (v) signals.push(k.toUpperCase() as Signal)
+    })
+
+    handleFormChange('signals', signals)
+  }, [exportedSignals])
+
   return {
-    actionName,
-    setActionName,
-    actionNotes,
-    setActionNotes,
+    formData,
+    handleFormChange,
+    resetFormData,
     exportedSignals,
     setExportedSignals,
-    // resetFormData,
   }
 }

From 389fc46dad9e08fa29de1ea3f60c820916f1cb1e Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:50:42 +0300
Subject: [PATCH 294/374] fix: semicolon

---
 .../action-custom-fields.tsx                  |  36 ++---
 .../main/actions/choose-action-body/index.tsx |  40 +++---
 .../choose-action-modal/action-options.ts     |  22 +--
 .../actions/choose-action-modal/index.tsx     |  46 +++---
 .../webapp/hooks/actions/useActionFormData.ts |  48 +++----
 .../auto-complete-input/index.tsx             | 134 +++++++++---------
 .../{DocsButton.tsx => docs-button.tsx}       |  12 +-
 .../reuseable-components/button/index.tsx     |  20 +--
 .../checkbox-list/index.tsx                   |  40 +++---
 frontend/webapp/reuseable-components/index.ts |   2 +-
 .../reuseable-components/input-list/index.tsx |  82 +++++------
 .../key-value-input-list/index.tsx            |  92 ++++++------
 .../reuseable-components/text/index.tsx       |  46 +++---
 13 files changed, 310 insertions(+), 310 deletions(-)
 rename frontend/webapp/reuseable-components/button/{DocsButton.tsx => docs-button.tsx} (81%)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
index 7d782038c..637a332c9 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -1,21 +1,21 @@
-import styled from 'styled-components'
-import { InputList, KeyValueInputsList, Text } from '@/reuseable-components'
-import type { ActionsType } from '@/types'
+import styled from 'styled-components';
+import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
+import type { ActionsType } from '@/types';
 
 interface ActionCustomFieldsProps {
-  actionType?: ActionsType
-  value: any
-  setValue: (value: any) => void
+  actionType?: ActionsType;
+  value: any;
+  setValue: (value: any) => void;
 }
 
 const FieldWrapper = styled.div`
   width: 100%;
   margin: 8px 0;
-`
+`;
 
 const FieldTitle = styled(Text)`
   margin-bottom: 12px;
-`
+`;
 
 const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
   switch (actionType) {
@@ -25,7 +25,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
           <FieldTitle>Attributes to add</FieldTitle>
           <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
     case 'DeleteAttribute':
       return (
@@ -33,7 +33,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
           <FieldTitle>Attributes to delete</FieldTitle>
           <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
     case 'RenameAttribute':
       return (
@@ -41,7 +41,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
           <FieldTitle>Attributes to rename</FieldTitle>
           <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
     case 'PiiMasking':
       return (
@@ -49,20 +49,20 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
           <FieldTitle>Attributes to mask</FieldTitle>
           <InputList required value={value} onChange={(arr) => setValue(arr)} />
         </FieldWrapper>
-      )
+      );
 
     case 'ErrorSampler':
-      return null
+      return null;
 
     case 'ProbabilisticSampler':
-      return null
+      return null;
 
     case 'LatencySampler':
-      return null
+      return null;
 
     default:
-      return null
+      return null;
   }
-}
+};
 
-export default ActionCustomFields
+export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 4e2b20eef..2e2e6865e 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,38 +1,38 @@
-import React, { Fragment, useEffect, useMemo } from 'react'
-import styled from 'styled-components'
-import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components'
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils'
-import { useActionFormData } from '@/hooks/actions/useActionFormData'
-import ActionCustomFields from './action-custom-fields'
-import { type ActionOption } from '../choose-action-modal/action-options'
+import React, { Fragment, useEffect } from 'react';
+import styled from 'styled-components';
+import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { useActionFormData } from '@/hooks/actions/useActionFormData';
+import ActionCustomFields from './action-custom-fields';
+import { type ActionOption } from '../choose-action-modal/action-options';
 
 const Description = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   line-height: 150%;
   display: flex;
-`
+`;
 
 const FieldWrapper = styled.div`
   width: 100%;
   margin: 8px 0;
-`
+`;
 
 const FieldTitle = styled(Text)`
   margin-bottom: 12px;
-`
+`;
 
 interface ChooseActionContentProps {
-  action: ActionOption
+  action: ActionOption;
 }
 
 const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
-  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData()
+  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData();
 
   useEffect(() => {
     return () => {
-      resetFormData()
-    }
-  }, [])
+      resetFormData();
+    };
+  }, []);
 
   return (
     <Fragment>
@@ -47,8 +47,8 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
           monitors={MONITORING_OPTIONS}
           exportedSignals={exportedSignals}
           handleSignalChange={(id, val) => {
-            const found = MONITORING_OPTIONS.find((item) => item.id === id)
-            if (found) setExportedSignals((prev) => ({ ...prev, [found.type]: val }))
+            const found = MONITORING_OPTIONS.find((item) => item.id === id);
+            if (found) setExportedSignals((prev) => ({ ...prev, [found.type]: val }));
           }}
         />
       </FieldWrapper>
@@ -73,7 +73,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
         <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
     </Fragment>
-  )
-}
+  );
+};
 
-export { ChooseActionBody }
+export { ChooseActionBody };
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index a271c67ba..b8699adcf 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,15 +1,15 @@
-import { ActionsType } from '@/types'
+import { ActionsType } from '@/types';
 
 export type ActionOption = {
-  id: string
-  type?: ActionsType
-  label: string
-  description?: string
-  docsEndpoint?: string
-  docsDescription?: string
-  icon?: string
-  items?: ActionOption[]
-}
+  id: string;
+  type?: ActionsType;
+  label: string;
+  description?: string;
+  docsEndpoint?: string;
+  docsDescription?: string;
+  icon?: string;
+  items?: ActionOption[];
+};
 
 export const ACTION_OPTIONS: ActionOption[] = [
   {
@@ -83,4 +83,4 @@ export const ACTION_OPTIONS: ActionOption[] = [
       },
     ],
   },
-]
+];
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 2924da792..347811bad 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,8 +1,8 @@
-import React, { useRef, useCallback, useState } from 'react'
-import styled from 'styled-components'
-import { AutocompleteInput, Modal, NavigationButtons, Text, Divider } from '@/reuseable-components'
-import { ChooseActionBody } from '../choose-action-body'
-import { ACTION_OPTIONS, type ActionOption } from './action-options'
+import React, { useRef, useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider } from '@/reuseable-components';
+import { ChooseActionBody } from '../choose-action-body';
+import { ACTION_OPTIONS, type ActionOption } from './action-options';
 
 const DefineActionContainer = styled.section`
   height: 640px;
@@ -10,7 +10,7 @@ const DefineActionContainer = styled.section`
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
-`
+`;
 
 const WidthConstraint = styled.div`
   display: flex;
@@ -20,20 +20,20 @@ const WidthConstraint = styled.div`
   gap: 16px;
   max-width: 640px;
   margin: 32px 0 24px 0;
-`
+`;
 
 const SubTitle = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   line-height: 150%;
-`
+`;
 
 interface AddActionModalProps {
-  isModalOpen: boolean
-  handleCloseModal: () => void
+  isModalOpen: boolean;
+  handleCloseModal: () => void;
 }
 
 interface ModalActionComponentProps {
-  onNext: () => void
+  onNext: () => void;
 }
 
 const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({ onNext }) => {
@@ -43,25 +43,25 @@ const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({
       onClick: onNext,
       variant: 'primary' as const,
     },
-  ]
+  ];
 
-  return <NavigationButtons buttons={buttons} />
-})
+  return <NavigationButtons buttons={buttons} />;
+});
 
 export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
-  const submitRef = useRef<(() => void) | null>(null)
-  const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null)
+  const submitRef = useRef<(() => void) | null>(null);
+  const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
 
   const handleNext = useCallback(() => {
     if (submitRef.current) {
-      handleCloseModal()
+      handleCloseModal();
     }
-  }, [handleCloseModal])
+  }, [handleCloseModal]);
 
   const handleClose = useCallback(() => {
-    handleCloseModal()
-    setSelectedItem(null)
-  }, [handleCloseModal])
+    handleCloseModal();
+    setSelectedItem(null);
+  }, [handleCloseModal]);
 
   return (
     <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
@@ -85,5 +85,5 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
         ) : null}
       </DefineActionContainer>
     </Modal>
-  )
-}
+  );
+};
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index 4e6faf8a1..5c11848bf 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 
-type Signal = 'TRACES' | 'METRICS' | 'LOGS'
+type Signal = 'TRACES' | 'METRICS' | 'LOGS';
 type FormData = {
-  type: string
-  name: string
-  notes: string
-  disable: boolean
-  signals: Signal[]
-  details: string
-}
+  type: string;
+  name: string;
+  notes: string;
+  disable: boolean;
+  signals: Signal[];
+  details: string;
+};
 
 const INITIAL: FormData = {
   type: '',
@@ -17,23 +17,23 @@ const INITIAL: FormData = {
   disable: true,
   signals: [],
   details: '',
-}
+};
 
 export function useActionFormData() {
-  const [formData, setFormData] = useState({ ...INITIAL })
+  const [formData, setFormData] = useState({ ...INITIAL });
   const [exportedSignals, setExportedSignals] = useState({
     logs: false,
     metrics: false,
     traces: false,
-  })
+  });
 
   const resetFormData = () => {
-    setFormData({ ...INITIAL })
-  }
+    setFormData({ ...INITIAL });
+  };
 
   const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
     setFormData((prev) => {
-      const prevVal = prev[key]
+      const prevVal = prev[key];
 
       if (Array.isArray(prevVal)) {
       }
@@ -41,19 +41,19 @@ export function useActionFormData() {
       return {
         ...prev,
         [key]: val,
-      }
-    })
-  }
+      };
+    });
+  };
 
   useEffect(() => {
-    const signals: (typeof INITIAL)['signals'] = []
+    const signals: (typeof INITIAL)['signals'] = [];
 
     Object.entries(exportedSignals).forEach(([k, v]) => {
-      if (v) signals.push(k.toUpperCase() as Signal)
-    })
+      if (v) signals.push(k.toUpperCase() as Signal);
+    });
 
-    handleFormChange('signals', signals)
-  }, [exportedSignals])
+    handleFormChange('signals', signals);
+  }, [exportedSignals]);
 
   return {
     formData,
@@ -61,5 +61,5 @@ export function useActionFormData() {
     resetFormData,
     exportedSignals,
     setExportedSignals,
-  }
+  };
 }
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 236286467..b67065705 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,84 +1,84 @@
-import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react'
-import styled from 'styled-components'
-import Image from 'next/image'
-import { Text } from '../text'
+import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
+import styled from 'styled-components';
+import Image from 'next/image';
+import { Text } from '../text';
 
 export interface Option {
-  id: string
-  label: string
-  description?: string
-  icon?: string
-  items?: Option[] // For handling a list of items
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  items?: Option[]; // For handling a list of items
 }
 
 interface AutocompleteInputProps {
-  options: Option[]
-  placeholder?: string
-  onOptionSelect?: (option: Option) => void
+  options: Option[];
+  placeholder?: string;
+  onOptionSelect?: (option: Option) => void;
 }
 
 const filterOptions = (optionsList: Option[], input: string): Option[] => {
   return optionsList.reduce<Option[]>((acc, option) => {
     if (option.items) {
-      const filteredSubItems = filterOptions(option.items, input)
+      const filteredSubItems = filterOptions(option.items, input);
       if (filteredSubItems.length) {
-        acc.push({ ...option, items: filteredSubItems })
+        acc.push({ ...option, items: filteredSubItems });
       }
     } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
-      acc.push(option)
+      acc.push(option);
     }
-    return acc
-  }, [])
-}
+    return acc;
+  }, []);
+};
 
 const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder = 'Type to search...', onOptionSelect }) => {
-  const [query, setQuery] = useState('')
-  const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''))
-  const [showOptions, setShowOptions] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(-1)
+  const [query, setQuery] = useState('');
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''));
+  const [showOptions, setShowOptions] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const input = e.target.value
-    setQuery(input)
+    const input = e.target.value;
+    setQuery(input);
     if (input) {
-      const filtered = filterOptions(options, input)
-      setFilteredOptions(filtered)
-      setShowOptions(true)
+      const filtered = filterOptions(options, input);
+      setFilteredOptions(filtered);
+      setShowOptions(true);
     } else {
-      setShowOptions(false)
+      setShowOptions(false);
     }
-  }
+  };
 
   const handleOptionClick = (option: Option) => {
-    setQuery(option.label)
-    setShowOptions(false)
+    setQuery(option.label);
+    setShowOptions(false);
     if (onOptionSelect) {
-      onOptionSelect(option)
+      onOptionSelect(option);
     }
-  }
+  };
 
   const flattenOptions = (options: Option[]): Option[] => {
     return options.reduce<Option[]>((acc, option) => {
-      acc.push(option)
+      acc.push(option);
       if (option.items) {
-        acc = acc.concat(flattenOptions(option.items))
+        acc = acc.concat(flattenOptions(option.items));
       }
-      return acc
-    }, [])
-  }
+      return acc;
+    }, []);
+  };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     // Flatten the options to handle keyboard navigation - TODO: Refactor this
-    return
-    const flatOptions = flattenOptions(filteredOptions)
+    return;
+    const flatOptions = flattenOptions(filteredOptions);
     if (e.key === 'ArrowDown' && activeIndex < flatOptions.length - 1) {
-      setActiveIndex(activeIndex + 1)
+      setActiveIndex(activeIndex + 1);
     } else if (e.key === 'ArrowUp' && activeIndex > 0) {
-      setActiveIndex(activeIndex - 1)
+      setActiveIndex(activeIndex - 1);
     } else if (e.key === 'Enter' && activeIndex >= 0) {
-      handleOptionClick(flatOptions[activeIndex])
+      handleOptionClick(flatOptions[activeIndex]);
     }
-  }
+  };
 
   return (
     <AutocompleteContainer>
@@ -101,17 +101,17 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder =
         </OptionsList>
       )}
     </AutocompleteContainer>
-  )
-}
+  );
+};
 
 interface OptionItemProps {
-  option: Option
-  isActive: boolean
-  onClick: (option: Option) => void
+  option: Option;
+  isActive: boolean;
+  onClick: (option: Option) => void;
 }
 
 const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
-  const hasSubItems = !!option.items && option.items.length > 0
+  const hasSubItems = !!option.items && option.items.length > 0;
 
   return (
     <OptionItemContainer isActive={isActive} isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
@@ -135,16 +135,16 @@ const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
         )}
       </OptionContent>
     </OptionItemContainer>
-  )
-}
+  );
+};
 
-export { AutocompleteInput }
+export { AutocompleteInput };
 
 /** Styled Components */
 
 const AutocompleteContainer = styled.div`
   position: relative;
-`
+`;
 
 const InputWrapper = styled.div`
   width: calc(100% - 16px);
@@ -163,7 +163,7 @@ const InputWrapper = styled.div`
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
-`
+`;
 
 const StyledInput = styled.input`
   flex: 1;
@@ -187,7 +187,7 @@ const StyledInput = styled.input`
     background-color: #555;
     cursor: not-allowed;
   }
-`
+`;
 
 const OptionsList = styled.ul`
   position: absolute;
@@ -200,11 +200,11 @@ const OptionsList = styled.ul`
   border: 1px solid ${({ theme }) => theme.colors.border};
   z-index: 9999;
   padding: 12px;
-`
+`;
 
 interface OptionItemContainerProps {
-  isActive: boolean
-  isList: boolean
+  isActive: boolean;
+  isList: boolean;
 }
 
 const OptionItemContainer = styled.li<OptionItemContainerProps>`
@@ -220,16 +220,16 @@ const OptionItemContainer = styled.li<OptionItemContainerProps>`
   &:hover {
     background: ${({ theme, isList }) => !isList && theme.colors.white_opacity['008']};
   }
-`
+`;
 
 const OptionContent = styled.div`
   width: 100%;
-`
+`;
 
 const SubOptionContainer = styled.div`
   display: flex;
   width: 100%;
-`
+`;
 
 const VerticalLine = styled.div`
   width: 1px;
@@ -237,28 +237,28 @@ const VerticalLine = styled.div`
   background-color: ${({ theme }) => theme.colors.white_opacity['008']};
   position: absolute;
   left: 33px;
-`
+`;
 
 const OptionLabelWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
-`
+`;
 
 const OptionLabel = styled(Text)`
   flex: 1;
   font-size: 14px;
-`
+`;
 
 const OptionDescription = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   font-size: 10px;
   line-height: 150%;
-`
+`;
 
 const SubOptionsList = styled.ul`
   padding-left: 0px;
   margin: 4px 0 0 0;
   list-style: none;
   width: 100%;
-`
+`;
diff --git a/frontend/webapp/reuseable-components/button/DocsButton.tsx b/frontend/webapp/reuseable-components/button/docs-button.tsx
similarity index 81%
rename from frontend/webapp/reuseable-components/button/DocsButton.tsx
rename to frontend/webapp/reuseable-components/button/docs-button.tsx
index 266089a82..fbfdba92b 100644
--- a/frontend/webapp/reuseable-components/button/DocsButton.tsx
+++ b/frontend/webapp/reuseable-components/button/docs-button.tsx
@@ -1,6 +1,6 @@
-import Image from 'next/image'
-import styled from 'styled-components'
-import { Button, ButtonProps } from '.'
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Button, ButtonProps } from '.';
 
 const StyledButton = styled(Button)`
   display: flex;
@@ -9,7 +9,7 @@ const StyledButton = styled(Button)`
   font-size: 14px;
   gap: 6px;
   min-width: 100px;
-`
+`;
 
 export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint?: string; variant?: ButtonProps['variant'] }) => {
   return (
@@ -17,5 +17,5 @@ export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint
       <Image src='/icons/common/notebook.svg' alt='Docs' width={18} height={18} />
       Docs
     </StyledButton>
-  )
-}
+  );
+};
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index bba671fd3..03c1ea7fa 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -1,9 +1,9 @@
-import React, { ButtonHTMLAttributes } from 'react'
-import styled, { css } from 'styled-components'
+import React, { ButtonHTMLAttributes } from 'react';
+import styled, { css } from 'styled-components';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
-  isDisabled?: boolean
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+  isDisabled?: boolean;
 }
 
 const variantStyles = {
@@ -63,7 +63,7 @@ const variantStyles = {
       background: ${({ theme }) => theme.colors.danger};
     }
   `,
-}
+};
 
 const StyledButton = styled.button<ButtonProps>`
   height: 36px;
@@ -87,10 +87,10 @@ const StyledButton = styled.button<ButtonProps>`
         background-color: #eaeaea;
       }
     `}
-`
+`;
 
 const ButtonContainer = styled.div<{
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
 }>`
   border: 2px solid transparent;
   padding: 2px;
@@ -100,7 +100,7 @@ const ButtonContainer = styled.div<{
   &:focus-within {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
-`
+`;
 
 export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', isDisabled = false, ...props }) => {
   return (
@@ -109,5 +109,5 @@ export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', i
         {children}
       </StyledButton>
     </ButtonContainer>
-  )
-}
+  );
+};
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index b710d83f4..4d211aaf2 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -1,37 +1,37 @@
-import React from 'react'
-import { Text } from '../text'
-import styled from 'styled-components'
-import { Checkbox } from '../checkbox'
-import { ExportedSignals } from '@/types'
+import React from 'react';
+import { Text } from '../text';
+import styled from 'styled-components';
+import { Checkbox } from '../checkbox';
+import { ExportedSignals } from '@/types';
 
 interface Monitor {
-  id: string | number
-  title: string
-  tooltip?: string
+  id: string | number;
+  title: string;
+  tooltip?: string;
 }
 
 interface CheckboxListProps {
-  monitors: Monitor[]
-  title?: string
-  exportedSignals: ExportedSignals
-  handleSignalChange: (signal: Monitor['id'], value: boolean) => void
+  monitors: Monitor[];
+  title?: string;
+  exportedSignals: ExportedSignals;
+  handleSignalChange: (signal: Monitor['id'], value: boolean) => void;
 }
 
 const ListContainer = styled.div`
   display: flex;
   gap: 32px;
-`
+`;
 
 const TextWrapper = styled.div`
   margin-bottom: 14px;
-`
+`;
 
 const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title, exportedSignals, handleSignalChange }) => {
   function isItemDisabled(item: Monitor) {
-    const selectedItems = Object.values(exportedSignals).filter((value) => value)
-    const trueValues = Object.values(exportedSignals).filter(Boolean)
+    const selectedItems = Object.values(exportedSignals).filter((value) => value);
+    const trueValues = Object.values(exportedSignals).filter(Boolean);
 
-    return (monitors.length === 1 && trueValues.length === 1) || (selectedItems.length === 1 && exportedSignals[item.id])
+    return (monitors.length === 1 && trueValues.length === 1) || (selectedItems.length === 1 && exportedSignals[item.id]);
   }
 
   return (
@@ -56,7 +56,7 @@ const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title, exportedSi
         ))}
       </ListContainer>
     </div>
-  )
-}
+  );
+};
 
-export { CheckboxList }
+export { CheckboxList };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index c139acfc8..4868acbc5 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1,6 +1,6 @@
 export * from './text';
 export * from './button';
-export * from './button/DocsButton';
+export * from './button/docs-button';
 export * from './section-title';
 export * from './input';
 export * from './tooltip';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 214dd63e9..4fc9ff711 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -1,38 +1,38 @@
-import Image from 'next/image'
-import React, { useEffect, useState } from 'react'
-import styled from 'styled-components'
-import { Input } from '../input'
-import { Button } from '../button'
-import { Text } from '../text'
-import { Tooltip } from '../tooltip'
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
 
 interface InputListProps {
-  initialValues?: string[]
-  title?: string
-  tooltip?: string
-  required?: boolean
-  value?: string[]
-  onChange: (values: string[]) => void
+  initialValues?: string[];
+  title?: string;
+  tooltip?: string;
+  required?: boolean;
+  value?: string[];
+  onChange: (values: string[]) => void;
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`
+`;
 
 const InputRow = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
-`
+`;
 
 const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
-`
+`;
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
@@ -44,62 +44,62 @@ const AddButton = styled(Button)<{ disabled: boolean }>`
   align-self: flex-start;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: opacity 0.3s;
-`
+`;
 
 const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 500;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration-line: underline;
-`
+`;
 
 const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-`
+`;
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-`
+`;
 
-const INITIAL = ['']
+const INITIAL = [''];
 
 const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
-  const [inputs, setInputs] = useState<string[]>(value || initialValues)
+  const [inputs, setInputs] = useState<string[]>(value || initialValues);
 
   useEffect(() => {
-    if (!inputs.length) setInputs(INITIAL)
-  }, [])
+    if (!inputs.length) setInputs(INITIAL);
+  }, []);
 
   useEffect(() => {
     if (initialValues.length > 0) {
-      onChange(initialValues)
+      onChange(initialValues);
     }
-  }, [initialValues])
+  }, [initialValues]);
 
   const handleAddInput = () => {
-    setInputs([...inputs, ''])
-  }
+    setInputs([...inputs, '']);
+  };
 
   const handleDeleteInput = (index: number) => {
-    const newInputs = inputs.filter((_, i) => i !== index)
-    setInputs(newInputs)
-    onChange(newInputs)
-  }
+    const newInputs = inputs.filter((_, i) => i !== index);
+    setInputs(newInputs);
+    onChange(newInputs);
+  };
 
   const handleInputChange = (value: string, index: number) => {
-    const newInputs = [...inputs]
-    newInputs[index] = value
-    setInputs(newInputs)
-    onChange(newInputs)
-  }
+    const newInputs = [...inputs];
+    newInputs[index] = value;
+    setInputs(newInputs);
+    onChange(newInputs);
+  };
 
   // Check if any input field is empty
-  const isAddButtonDisabled = inputs.some((input) => input.trim() === '')
+  const isAddButtonDisabled = inputs.some((input) => input.trim() === '');
 
   return (
     <Container>
@@ -131,7 +131,7 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
-  )
-}
+  );
+};
 
-export { InputList }
+export { InputList };
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index 8cb213e6a..ec79435e2 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -1,45 +1,45 @@
-import Image from 'next/image'
-import React, { useState, useEffect, useRef } from 'react'
-import styled from 'styled-components'
-import { Input } from '../input'
-import { Button } from '../button'
-import { Text } from '../text'
-import { Tooltip } from '../tooltip'
+import Image from 'next/image';
+import React, { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
 
 interface KeyValueInputsListProps {
-  initialKeyValuePairs?: { key: string; value: string }[]
-  value?: { key: string; value: string }[]
-  title?: string
-  tooltip?: string
-  required?: boolean
-  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void
+  initialKeyValuePairs?: { key: string; value: string }[];
+  value?: { key: string; value: string }[];
+  title?: string;
+  tooltip?: string;
+  required?: boolean;
+  onChange?: (validKeyValuePairs: { key: string; value: string }[]) => void;
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`
+`;
 
 const HeaderWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 4px;
-`
+`;
 
 const Row = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 12px;
-`
+`;
 
 const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
-`
+`;
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
   color: white;
@@ -51,22 +51,22 @@ const AddButton = styled(Button)<{ disabled: boolean }>`
   align-self: flex-start;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: opacity 0.3s;
-`
+`;
 
 const ButtonText = styled(Text)`
   font-size: 14px;
   font-weight: 500;
   font-family: ${({ theme }) => theme.font_family.secondary};
   text-decoration-line: underline;
-`
+`;
 
 const Title = styled(Text)`
   font-size: 14px;
   opacity: 0.8;
   line-height: 22px;
-`
+`;
 
-const INITIAL = [{ key: '', value: '' }]
+const INITIAL = [{ key: '', value: '' }];
 
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   initialKeyValuePairs = INITIAL,
@@ -76,49 +76,49 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   tooltip,
   required,
 }) => {
-  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs)
+  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs);
 
   useEffect(() => {
-    if (!keyValuePairs.length) setKeyValuePairs(INITIAL)
-  }, [])
+    if (!keyValuePairs.length) setKeyValuePairs(INITIAL);
+  }, []);
 
-  const recordedPairs = useRef('')
+  const recordedPairs = useRef('');
 
   useEffect(() => {
     // Filter out rows where either key or value is empty
-    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '')
-    const stringified = JSON.stringify(validKeyValuePairs)
+    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '');
+    const stringified = JSON.stringify(validKeyValuePairs);
 
     // Only trigger onChange if valid key-value pairs have changed
     if (recordedPairs.current !== stringified) {
-      recordedPairs.current = stringified
+      recordedPairs.current = stringified;
 
-      if (onChange) onChange(validKeyValuePairs)
+      if (onChange) onChange(validKeyValuePairs);
     }
-  }, [keyValuePairs, onChange])
+  }, [keyValuePairs, onChange]);
 
   const handleAddRow = () => {
     setKeyValuePairs((prev) => {
-      const payload = [...prev]
-      payload.push({ key: '', value: '' })
-      return payload
-    })
-  }
+      const payload = [...prev];
+      payload.push({ key: '', value: '' });
+      return payload;
+    });
+  };
 
   const handleDeleteRow = (idx: number) => {
-    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx))
-  }
+    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx));
+  };
 
   const handleChange = (key: 'key' | 'value', val: string, idx: number) => {
     setKeyValuePairs((prev) => {
-      const payload = [...prev]
-      payload[idx][key] = val
-      return payload
-    })
-  }
+      const payload = [...prev];
+      payload[idx][key] = val;
+      return payload;
+    });
+  };
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '')
+  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '');
 
   return (
     <Container>
@@ -150,7 +150,7 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
-  )
-}
+  );
+};
 
-export default KeyValueInputsList
+export default KeyValueInputsList;
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 926a55265..e7435cf66 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -1,25 +1,25 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from 'react';
+import styled from 'styled-components';
 
 interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  children: React.ReactNode
-  color?: string
-  size?: number
-  weight?: number
-  align?: 'left' | 'center' | 'right'
-  family?: 'primary' | 'secondary'
-  opacity?: number
-  decoration?: string
+  children: React.ReactNode;
+  color?: string;
+  size?: number;
+  weight?: number;
+  align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
+  opacity?: number;
+  decoration?: string;
 }
 
 const TextWrapper = styled.div<{
-  color?: string
-  size?: number
-  weight?: number
-  align?: 'left' | 'center' | 'right'
-  family?: 'primary' | 'secondary'
-  opacity?: number
-  decoration?: string
+  color?: string;
+  size?: number;
+  weight?: number;
+  align?: 'left' | 'center' | 'right';
+  family?: 'primary' | 'secondary';
+  opacity?: number;
+  decoration?: string;
 }>`
   color: ${({ color, theme }) => color || theme.colors.text};
   font-size: ${({ size }) => (size !== undefined ? size : 16)}px;
@@ -29,14 +29,14 @@ const TextWrapper = styled.div<{
   text-decoration: ${({ decoration }) => decoration || 'none'};
   font-family: ${({ theme, family }) => {
     if (family === 'secondary') {
-      return theme.font_family.secondary
+      return theme.font_family.secondary;
     }
-    return theme.font_family.primary
+    return theme.font_family.primary;
   }};
-`
+`;
 
 const Text: React.FC<TextProps> = ({ children, ...props }) => {
-  return <TextWrapper {...props}>{children}</TextWrapper>
-}
+  return <TextWrapper {...props}>{children}</TextWrapper>;
+};
 
-export { Text }
+export { Text };

From 2487549cb0d2790b035c0ce651478a54e51b492d Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:53:35 +0300
Subject: [PATCH 295/374] fix: docs link

---
 .../manage.destination.header.tsx             | 21 +++++--------------
 .../button/docs-button.tsx                    |  3 ++-
 frontend/webapp/utils/constants/urls.tsx      | 21 +++++++------------
 3 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
index fb221b83d..90bcb5abd 100644
--- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
 import theme from '@/styles/palette';
 import { LinkIcon } from '@keyval-dev/design-system';
+import { DOCS_LINK } from '@/utils';
 
 const ManageDestinationHeaderWrapper = styled.div`
   display: flex;
@@ -10,11 +11,7 @@ const ManageDestinationHeaderWrapper = styled.div`
   align-items: center;
   border-radius: 25px;
   margin: 24px 0;
-  background: radial-gradient(
-      78.09% 72.18% at 100% -0%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
+  background: radial-gradient(78.09% 72.18% at 100% -0%, rgba(150, 242, 255, 0.4) 0%, rgba(150, 242, 255, 0) 61.91%),
     linear-gradient(180deg, #2e4c55 0%, #303355 100%);
 `;
 
@@ -27,9 +24,7 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageDestinationHeader({
-  data: { image_url, display_name, type },
-}) {
+export function ManageDestinationHeader({ data: { image_url, display_name, type } }) {
   return (
     <ManageDestinationHeaderWrapper>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
@@ -37,15 +32,9 @@ export function ManageDestinationHeader({
         <KeyvalText size={24} weight={700}>
           {display_name}
         </KeyvalText>
-        <div
-          style={{ cursor: 'pointer' }}
-          onClick={() =>
-            window.open(`https://docs.odigos.io/backends/${type}`, '_blank')
-          }
-        >
+        <div style={{ cursor: 'pointer' }} onClick={() => window.open(`${DOCS_LINK}/backends/${type}`, '_blank')}>
           <KeyvalText style={{ display: 'flex', gap: 3 }}>
-            find out more about {display_name} in{' '}
-            <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
+            find out more about {display_name} in <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
             <LinkIcon style={{ marginTop: 2 }} />
           </KeyvalText>
         </div>
diff --git a/frontend/webapp/reuseable-components/button/docs-button.tsx b/frontend/webapp/reuseable-components/button/docs-button.tsx
index fbfdba92b..1de7c9242 100644
--- a/frontend/webapp/reuseable-components/button/docs-button.tsx
+++ b/frontend/webapp/reuseable-components/button/docs-button.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import styled from 'styled-components';
 import { Button, ButtonProps } from '.';
+import { DOCS_LINK } from '@/utils';
 
 const StyledButton = styled(Button)`
   display: flex;
@@ -13,7 +14,7 @@ const StyledButton = styled(Button)`
 
 export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint?: string; variant?: ButtonProps['variant'] }) => {
   return (
-    <StyledButton variant={variant} onClick={() => window.open(`https://docs.odigos.io${endpoint}`, '_blank', 'noopener noreferrer')}>
+    <StyledButton variant={variant} onClick={() => window.open(`${DOCS_LINK}${endpoint}`, '_blank', 'noopener noreferrer')}>
       <Image src='/icons/common/notebook.svg' alt='Docs' width={18} height={18} />
       Docs
     </StyledButton>
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index b8702439d..921492eca 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -13,15 +13,12 @@ const API = {
   CHECK_CONNECTION: `${BASE_URL}/destinations/testConnection`,
   SOURCES: `${BASE_URL}/sources`,
   SET_ACTION: (type: string) => `${BASE_URL}/actions/types/${type}`,
-  PUT_ACTION: (type: string, id: string) =>
-    `${BASE_URL}/actions/types/${type}/${id}`,
+  PUT_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
   ACTIONS: `${BASE_URL}/actions`,
-  DELETE_ACTION: (type: string, id: string) =>
-    `${BASE_URL}/actions/types/${type}/${id}`,
+  DELETE_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
   OVERVIEW_METRICS: `${BASE_URL}/metrics/overview`,
   INSTRUMENTATION_RULES: `${BASE_URL}/instrumentation-rules`,
-  INSTRUMENTATION_RULE: (id: string) =>
-    `${BASE_URL}/instrumentation-rules/${id}`,
+  INSTRUMENTATION_RULE: (id: string) => `${BASE_URL}/instrumentation-rules/${id}`,
 };
 
 const QUERIES = {
@@ -35,13 +32,11 @@ const QUERIES = {
   API_ACTIONS: 'apiActions',
 };
 
-const SLACK_INVITE_LINK =
-  'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
+const SLACK_INVITE_LINK = 'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
 
-export const ACTION_DOCS_LINK =
-  'https://docs.odigos.io/pipeline/actions/introduction';
-export const ACTION_ITEM_DOCS_LINK = 'https://docs.odigos.io/pipeline/actions';
+export const DOCS_LINK = 'https://docs.odigos.io';
+export const ACTION_DOCS_LINK = `${DOCS_LINK}/pipeline/actions/introduction`;
+export const ACTION_ITEM_DOCS_LINK = `${DOCS_LINK}/pipeline/actions`;
+export const INSTRUMENTATION_RULES_DOCS_LINK = `${DOCS_LINK}/pipeline/rules/overview`;
 
 export { API, QUERIES, SLACK_INVITE_LINK, BASE_URL };
-export const INSTRUMENTATION_RULES_DOCS_LINK =
-  'https://docs.odigos.io/pipeline/rules/overview';

From 9e5224baad00dd8c50ba2ad43aace2cfdf9a82ff Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:55:01 +0300
Subject: [PATCH 296/374] fix: frament & imports

---
 .../main/actions/choose-action-body/index.tsx        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 2e2e6865e..4edeebb5f 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,10 +1,10 @@
-import React, { Fragment, useEffect } from 'react';
 import styled from 'styled-components';
-import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
-import { useActionFormData } from '@/hooks/actions/useActionFormData';
+import React, { useEffect } from 'react';
 import ActionCustomFields from './action-custom-fields';
+import { useActionFormData } from '@/hooks/actions/useActionFormData';
+import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
 import { type ActionOption } from '../choose-action-modal/action-options';
+import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components';
 
 const Description = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
@@ -35,7 +35,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
   }, []);
 
   return (
-    <Fragment>
+    <>
       <Description>
         {action.docsDescription}
         <DocsButton endpoint={action.docsEndpoint} />
@@ -72,7 +72,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
         <FieldTitle>Notes</FieldTitle>
         <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
-    </Fragment>
+    </>
   );
 };
 

From e4a83502e33bee2e00a4003de8b797d997274dae Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:57:23 +0300
Subject: [PATCH 297/374] fix: MONITORING_OPTIONS from global consts

---
 .../actions.table/actions.table.row.tsx       |  2 +-
 .../destinations.table.row.tsx                |  2 +-
 .../destination.card/destination.card.tsx     |  2 +-
 .../main/actions/choose-action-body/index.tsx |  2 +-
 .../setup/destination/destination.section.tsx |  2 +-
 frontend/webapp/utils/constants/monitors.ts   | 14 -----------
 .../constants/monitors.tsx}                   | 24 ++++++++++++-------
 7 files changed, 21 insertions(+), 27 deletions(-)
 delete mode 100644 frontend/webapp/utils/constants/monitors.ts
 rename frontend/webapp/{components/setup/destination/utils.tsx => utils/constants/monitors.tsx} (70%)

diff --git a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx b/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
index 8d89c227b..383712998 100644
--- a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
+++ b/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { KeyvalCheckbox, KeyvalText } from '@/design.system';
 import ActionRowDynamicContent from './action.row.dynamic.content';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { ActionIcon } from '../action.icon';
 
 const StyledTr = styled.tr`
diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
index 3112f6964..7963c7861 100644
--- a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
+++ b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
@@ -3,7 +3,7 @@ import theme from '@/styles/palette';
 import { Destination } from '@/types';
 import styled, { css } from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
 import { ConditionCheck } from '@/components/common';
 
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 163416787..a8586dac7 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { KeyvalCard, KeyvalImage, KeyvalText } from '@/design.system';
 import { TapList } from '../tap.list/tap.list';
-import { MONITORING_OPTIONS } from '../utils';
+import { MONITORING_OPTIONS } from '../../../../utils/constants/monitors';
 import {
   ApplicationNameWrapper,
   DestinationCardContentWrapper,
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 4edeebb5f..6262974cf 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import React, { useEffect } from 'react';
 import ActionCustomFields from './action-custom-fields';
 import { useActionFormData } from '@/hooks/actions/useActionFormData';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { type ActionOption } from '../choose-action-modal/action-options';
 import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components';
 
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index 77ac2e3de..f996a43ae 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -5,7 +5,7 @@ import { KeyvalLoader } from '@/design.system';
 import { EmptyList } from '@/components/lists';
 import { OVERVIEW, QUERIES, SETUP } from '@/utils';
 import { getDestinationsTypes } from '@/services';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { DestinationList, DestinationOptionMenu } from '@/components/setup';
 import {
   LoaderWrapper,
diff --git a/frontend/webapp/utils/constants/monitors.ts b/frontend/webapp/utils/constants/monitors.ts
deleted file mode 100644
index 7bd5f3daf..000000000
--- a/frontend/webapp/utils/constants/monitors.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const MONITORS_OPTIONS = [
-  {
-    id: 'logs',
-    value: 'Logs',
-  },
-  {
-    id: 'metrics',
-    value: 'Metrics',
-  },
-  {
-    id: 'traces',
-    value: 'Traces',
-  },
-];
diff --git a/frontend/webapp/components/setup/destination/utils.tsx b/frontend/webapp/utils/constants/monitors.tsx
similarity index 70%
rename from frontend/webapp/components/setup/destination/utils.tsx
rename to frontend/webapp/utils/constants/monitors.tsx
index b4c0ba3c6..4dfeb16f0 100644
--- a/frontend/webapp/components/setup/destination/utils.tsx
+++ b/frontend/webapp/utils/constants/monitors.tsx
@@ -1,12 +1,5 @@
 import { SETUP } from '@/utils/constants';
-import {
-  LogsFocusIcon,
-  LogsIcon,
-  MetricsFocusIcon,
-  MetricsIcon,
-  TraceFocusIcon,
-  TraceIcon,
-} from '@keyval-dev/design-system';
+import { LogsFocusIcon, LogsIcon, MetricsFocusIcon, MetricsIcon, TraceFocusIcon, TraceIcon } from '@keyval-dev/design-system';
 
 export type MonitoringOption = {
   title: string;
@@ -47,3 +40,18 @@ export const MONITORING_OPTIONS = [
     tapped: true,
   },
 ];
+
+export const MONITORS_OPTIONS = [
+  {
+    id: 'logs',
+    value: 'Logs',
+  },
+  {
+    id: 'metrics',
+    value: 'Metrics',
+  },
+  {
+    id: 'traces',
+    value: 'Traces',
+  },
+];

From a908130c42151e490a925a763cacf61436e15739 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 14:58:32 +0300
Subject: [PATCH 298/374] fix: use const, not string

---
 .../choose-action-body/action-custom-fields.tsx  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
index 637a332c9..c3c94f01b 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
-import type { ActionsType } from '@/types';
+import { ActionsType } from '@/types';
 
 interface ActionCustomFieldsProps {
   actionType?: ActionsType;
@@ -19,7 +19,7 @@ const FieldTitle = styled(Text)`
 
 const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
   switch (actionType) {
-    case 'AddClusterInfo':
+    case ActionsType.ADD_CLUSTER_INFO:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to add</FieldTitle>
@@ -27,7 +27,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
         </FieldWrapper>
       );
 
-    case 'DeleteAttribute':
+    case ActionsType.DELETE_ATTRIBUTES:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to delete</FieldTitle>
@@ -35,7 +35,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
         </FieldWrapper>
       );
 
-    case 'RenameAttribute':
+    case ActionsType.RENAME_ATTRIBUTES:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to rename</FieldTitle>
@@ -43,7 +43,7 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
         </FieldWrapper>
       );
 
-    case 'PiiMasking':
+    case ActionsType.PII_MASKING:
       return (
         <FieldWrapper>
           <FieldTitle>Attributes to mask</FieldTitle>
@@ -51,13 +51,13 @@ const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, val
         </FieldWrapper>
       );
 
-    case 'ErrorSampler':
+    case ActionsType.ERROR_SAMPLER:
       return null;
 
-    case 'ProbabilisticSampler':
+    case ActionsType.PROBABILISTIC_SAMPLER:
       return null;
 
-    case 'LatencySampler':
+    case ActionsType.LATENCY_SAMPLER:
       return null;
 
     default:

From 31f1db36411f4d65400bc21be03c176c15b76812 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 16:18:32 +0300
Subject: [PATCH 299/374] fix: dynamic signals for actions

---
 .../main/actions/choose-action-body/index.tsx | 32 +++----
 .../choose-action-modal/action-options.ts     |  9 ++
 .../actions/choose-action-modal/index.tsx     | 23 +++--
 frontend/webapp/hooks/actions/index.ts        |  1 +
 .../webapp/hooks/actions/useActionFormData.ts | 42 ++-------
 .../monitoring-checkboxes/index.tsx           | 87 +++++++++++++++++++
 frontend/webapp/utils/constants/monitors.tsx  | 10 ++-
 7 files changed, 139 insertions(+), 65 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 6262974cf..682a4bfb4 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,10 +1,10 @@
+import React from 'react';
 import styled from 'styled-components';
-import React, { useEffect } from 'react';
 import ActionCustomFields from './action-custom-fields';
-import { useActionFormData } from '@/hooks/actions/useActionFormData';
-import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
+import { ActionFormData } from '@/hooks/actions/useActionFormData';
 import { type ActionOption } from '../choose-action-modal/action-options';
-import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+import { MonitoringCheckboxes } from '@/reuseable-components/monitoring-checkboxes';
 
 const Description = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
@@ -23,17 +23,11 @@ const FieldTitle = styled(Text)`
 
 interface ChooseActionContentProps {
   action: ActionOption;
+  formData: ActionFormData;
+  handleFormChange: (key: keyof ActionFormData, val: any) => void;
 }
 
-const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
-  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData();
-
-  useEffect(() => {
-    return () => {
-      resetFormData();
-    };
-  }, []);
-
+const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData, handleFormChange }) => {
   return (
     <>
       <Description>
@@ -42,14 +36,10 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
       </Description>
 
       <FieldWrapper>
-        <FieldTitle>Monitoring</FieldTitle>
-        <CheckboxList
-          monitors={MONITORING_OPTIONS}
-          exportedSignals={exportedSignals}
-          handleSignalChange={(id, val) => {
-            const found = MONITORING_OPTIONS.find((item) => item.id === id);
-            if (found) setExportedSignals((prev) => ({ ...prev, [found.type]: val }));
-          }}
+        <MonitoringCheckboxes
+          allowedSignals={action.allowedSignals}
+          selectedSignals={formData.signals}
+          setSelectedSignals={(value) => handleFormChange('signals', value)}
         />
       </FieldWrapper>
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index b8699adcf..8b9f31f7b 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,4 +1,5 @@
 import { ActionsType } from '@/types';
+import { SignalLowercase } from '@/utils';
 
 export type ActionOption = {
   id: string;
@@ -9,6 +10,7 @@ export type ActionOption = {
   docsDescription?: string;
   icon?: string;
   items?: ActionOption[];
+  allowedSignals?: SignalLowercase[];
 };
 
 export const ACTION_OPTIONS: ActionOption[] = [
@@ -21,6 +23,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
     docsDescription:
       'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'delete_attribute',
@@ -30,6 +33,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     icon: '/icons/actions/deleteattribute.svg',
     docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
     docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'rename_attribute',
@@ -40,6 +44,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
     docsDescription:
       'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'pii-masking',
@@ -49,6 +54,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     icon: '/icons/actions/piimasking.svg',
     docsEndpoint: '/pipeline/actions/attributes/piimasking',
     docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
+    allowedSignals: ['traces'],
   },
   {
     id: 'sampler',
@@ -62,6 +68,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         type: ActionsType.ERROR_SAMPLER,
         docsEndpoint: '/pipeline/actions/sampling/errorsampler',
         docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
+        allowedSignals: ['traces'],
       },
       {
         id: 'probabilistic-sampler',
@@ -71,6 +78,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
         docsDescription:
           'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
+        allowedSignals: ['traces'],
       },
       {
         id: 'latency-action',
@@ -80,6 +88,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         docsEndpoint: '/pipeline/actions/sampling/latencysampler',
         docsDescription:
           'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
+        allowedSignals: ['traces'],
       },
     ],
   },
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 347811bad..65cca01e8 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,8 +1,9 @@
-import React, { useRef, useCallback, useState } from 'react';
 import styled from 'styled-components';
-import { AutocompleteInput, Modal, NavigationButtons, Text, Divider } from '@/reuseable-components';
+import React, { useRef, useState } from 'react';
+import { useActionFormData } from '@/hooks/actions';
 import { ChooseActionBody } from '../choose-action-body';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, Option } from '@/reuseable-components';
 
 const DefineActionContainer = styled.section`
   height: 640px;
@@ -51,17 +52,23 @@ const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({
 export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
   const submitRef = useRef<(() => void) | null>(null);
   const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
+  const { formData, handleFormChange, resetFormData } = useActionFormData();
 
-  const handleNext = useCallback(() => {
+  const handleNext = () => {
     if (submitRef.current) {
       handleCloseModal();
     }
-  }, [handleCloseModal]);
+  };
 
-  const handleClose = useCallback(() => {
+  const handleClose = () => {
     handleCloseModal();
     setSelectedItem(null);
-  }, [handleCloseModal]);
+  };
+
+  const handleSelect = (item: Option) => {
+    resetFormData();
+    setSelectedItem(item);
+  };
 
   return (
     <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
@@ -75,12 +82,12 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
           </SubTitle>
         </WidthConstraint>
 
-        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={(item) => setSelectedItem(item)} />
+        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={handleSelect} />
 
         {!!selectedItem?.type ? (
           <WidthConstraint>
             <Divider margin='16px 0' />
-            <ChooseActionBody action={selectedItem} />
+            <ChooseActionBody action={selectedItem} formData={formData} handleFormChange={handleFormChange} />
           </WidthConstraint>
         ) : null}
       </DefineActionContainer>
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 7fd95ef9d..373528190 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,3 +1,4 @@
 export * from './useActionState';
 export * from './useActions';
 export * from './useGetActions';
+export * from './useActionFormData';
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index 5c11848bf..ea0f083f0 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { SignalUppercase } from '@/utils';
 
-type Signal = 'TRACES' | 'METRICS' | 'LOGS';
-type FormData = {
+export type ActionFormData = {
   type: string;
   name: string;
   notes: string;
   disable: boolean;
-  signals: Signal[];
+  signals: SignalUppercase[];
   details: string;
 };
 
-const INITIAL: FormData = {
+const INITIAL: ActionFormData = {
   type: '',
   name: '',
   notes: '',
@@ -21,45 +21,21 @@ const INITIAL: FormData = {
 
 export function useActionFormData() {
   const [formData, setFormData] = useState({ ...INITIAL });
-  const [exportedSignals, setExportedSignals] = useState({
-    logs: false,
-    metrics: false,
-    traces: false,
-  });
 
   const resetFormData = () => {
     setFormData({ ...INITIAL });
   };
 
   const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
-    setFormData((prev) => {
-      const prevVal = prev[key];
-
-      if (Array.isArray(prevVal)) {
-      }
-
-      return {
-        ...prev,
-        [key]: val,
-      };
-    });
+    setFormData((prev) => ({
+      ...prev,
+      [key]: val,
+    }));
   };
 
-  useEffect(() => {
-    const signals: (typeof INITIAL)['signals'] = [];
-
-    Object.entries(exportedSignals).forEach(([k, v]) => {
-      if (v) signals.push(k.toUpperCase() as Signal);
-    });
-
-    handleFormChange('signals', signals);
-  }, [exportedSignals]);
-
   return {
     formData,
     handleFormChange,
     resetFormData,
-    exportedSignals,
-    setExportedSignals,
   };
 }
diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
new file mode 100644
index 000000000..3b4515955
--- /dev/null
+++ b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
@@ -0,0 +1,87 @@
+import { Text } from '../text';
+import { Checkbox } from '../checkbox';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+import { MONITORING_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
+
+interface MonitoringCheckboxesProps {
+  isVertical?: boolean;
+  allowedSignals?: (SignalUppercase | SignalLowercase)[];
+  selectedSignals: (SignalUppercase | SignalLowercase)[];
+  setSelectedSignals: (value: SignalUppercase[]) => void;
+}
+
+const ListContainer = styled.div<{ isVertical?: boolean }>`
+  display: flex;
+  flex-direction: ${({ isVertical }) => (isVertical ? 'column' : 'row')};
+  gap: ${({ isVertical }) => (isVertical ? '16px' : '32px')};
+`;
+
+const TextWrapper = styled.div`
+  margin-bottom: 14px;
+`;
+
+const monitors = MONITORING_OPTIONS;
+const initialStatuses: Record<SignalLowercase, boolean> = {
+  logs: false,
+  metrics: false,
+  traces: false,
+};
+
+const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical, allowedSignals, selectedSignals, setSelectedSignals }) => {
+  const [signalStatuses, setSignalStatuses] = useState({ ...initialStatuses });
+
+  useEffect(() => {
+    const payload = { ...initialStatuses };
+
+    selectedSignals.forEach((str) => {
+      payload[str.toLowerCase()] = true;
+    });
+
+    if (JSON.stringify(payload) !== JSON.stringify(signalStatuses)) {
+      setSignalStatuses(payload);
+    }
+  }, [selectedSignals]);
+
+  const handleChange = (key: keyof typeof signalStatuses, value: boolean) => {
+    const selected: SignalUppercase[] = [];
+
+    setSignalStatuses((prev) => {
+      const payload = { ...prev, [key]: value };
+
+      Object.entries(payload).forEach(([sig, bool]) => {
+        if (bool) selected.push(sig.toUpperCase() as SignalUppercase);
+      });
+
+      return payload;
+    });
+
+    setSelectedSignals(selected);
+  };
+
+  const isDisabled = (item: (typeof MONITORING_OPTIONS)[0]) => {
+    return !!allowedSignals && !allowedSignals.find((str) => str.toLowerCase() === item.type);
+  };
+
+  return (
+    <div>
+      <TextWrapper>
+        <Text>Monitoring</Text>
+      </TextWrapper>
+
+      <ListContainer isVertical={isVertical}>
+        {monitors.map((monitor) => (
+          <Checkbox
+            key={monitor.id}
+            title={monitor.title}
+            initialValue={signalStatuses[monitor.type]}
+            onChange={(value) => handleChange(monitor.type, value)}
+            disabled={isDisabled(monitor)}
+          />
+        ))}
+      </ListContainer>
+    </div>
+  );
+};
+
+export { MonitoringCheckboxes };
diff --git a/frontend/webapp/utils/constants/monitors.tsx b/frontend/webapp/utils/constants/monitors.tsx
index 4dfeb16f0..df3983ae6 100644
--- a/frontend/webapp/utils/constants/monitors.tsx
+++ b/frontend/webapp/utils/constants/monitors.tsx
@@ -1,14 +1,18 @@
 import { SETUP } from '@/utils/constants';
 import { LogsFocusIcon, LogsIcon, MetricsFocusIcon, MetricsIcon, TraceFocusIcon, TraceIcon } from '@keyval-dev/design-system';
 
+export type SignalUppercase = 'TRACES' | 'METRICS' | 'LOGS';
+export type SignalLowercase = 'traces' | 'metrics' | 'logs';
+
 export type MonitoringOption = {
+  id: number;
   title: string;
-  tapped: boolean;
   icons: object;
-  id: number;
+  type: SignalLowercase;
+  tapped: boolean;
 };
 
-export const MONITORING_OPTIONS = [
+export const MONITORING_OPTIONS: MonitoringOption[] = [
   {
     id: 1,
     icons: {

From bc3bad30fd1dce12485a4551f155391f2bfa4c1c Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 16:40:51 +0300
Subject: [PATCH 300/374] fix: drawer & modal widths

---
 .../form-container.tsx                               | 12 ++++--------
 .../main/overview/overview-drawer/index.tsx          |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
index 71bd10c1b..4948674a1 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
@@ -14,27 +14,23 @@ export const FormContainer = ({
   <StyledFormContainer>
     <CheckboxList
       monitors={monitors}
-      title="This connection will monitor:"
+      title='This connection will monitor:'
       exportedSignals={exportedSignals}
       handleSignalChange={handleSignalChange}
     />
     <Input
-      title="Destination name"
-      placeholder="Enter destination name"
+      title='Destination name'
+      placeholder='Enter destination name'
       value={destinationName}
       onChange={(e) => setDestinationName(e.target.value)}
     />
-    <DynamicConnectDestinationFormFields
-      fields={dynamicFields}
-      onChange={handleDynamicFieldChange}
-    />
+    <DynamicConnectDestinationFormFields fields={dynamicFields} onChange={handleDynamicFieldChange} />
   </StyledFormContainer>
 );
 
 const StyledFormContainer = styled.div`
   display: flex;
   width: 100%;
-  max-width: 500px;
   flex-direction: column;
   gap: 24px;
   height: 443px;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 64d6bbda8..9186db8ba 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -26,7 +26,7 @@ const componentMap = {
   ),
 };
 
-const DRAWER_WIDTH = '560px';
+const DRAWER_WIDTH = '640px';
 
 const OverviewDrawer = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);

From f1ac07b2072e0e927e22a4dbc27ff573ff14788e Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Tue, 22 Oct 2024 16:41:15 +0300
Subject: [PATCH 301/374] [GEN-1546] Add delete attr new api (#1612)

---
 frontend/graph/generated.go                  |  96 ++++++--------
 frontend/graph/model/models_gen.go           |  14 +--
 frontend/graph/schema.graphqls               |   2 +-
 frontend/graph/schema.resolvers.go           |  29 ++---
 frontend/services/actions/deleteattribute.go | 124 +++++++++++++++++++
 5 files changed, 175 insertions(+), 90 deletions(-)
 create mode 100644 frontend/services/actions/deleteattribute.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 42dd0c20e..b775fce8b 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -2881,9 +2881,9 @@ func (ec *executionContext) _DeleteAttributeAction_details(ctx context.Context,
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.DeleteAttribute)
+	res := resTmp.([]string)
 	fc.Result = res
-	return ec.marshalNDeleteAttribute2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDeleteAttributeᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2ᚕstringᚄ(ctx, field.Selections, res)
 }
 
 func (ec *executionContext) fieldContext_DeleteAttributeAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
@@ -2893,11 +2893,7 @@ func (ec *executionContext) fieldContext_DeleteAttributeAction_details(_ context
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "attributeName":
-				return ec.fieldContext_DeleteAttribute_attributeName(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type DeleteAttribute", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
@@ -11141,60 +11137,6 @@ func (ec *executionContext) marshalNConditionStatus2githubᚗcomᚋodigosᚑio
 	return v
 }
 
-func (ec *executionContext) marshalNDeleteAttribute2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDeleteAttributeᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.DeleteAttribute) graphql.Marshaler {
-	ret := make(graphql.Array, len(v))
-	var wg sync.WaitGroup
-	isLen1 := len(v) == 1
-	if !isLen1 {
-		wg.Add(len(v))
-	}
-	for i := range v {
-		i := i
-		fc := &graphql.FieldContext{
-			Index:  &i,
-			Result: &v[i],
-		}
-		ctx := graphql.WithFieldContext(ctx, fc)
-		f := func(i int) {
-			defer func() {
-				if r := recover(); r != nil {
-					ec.Error(ctx, ec.Recover(ctx, r))
-					ret = nil
-				}
-			}()
-			if !isLen1 {
-				defer wg.Done()
-			}
-			ret[i] = ec.marshalNDeleteAttribute2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDeleteAttribute(ctx, sel, v[i])
-		}
-		if isLen1 {
-			f(i)
-		} else {
-			go f(i)
-		}
-
-	}
-	wg.Wait()
-
-	for _, e := range ret {
-		if e == graphql.Null {
-			return graphql.Null
-		}
-	}
-
-	return ret
-}
-
-func (ec *executionContext) marshalNDeleteAttribute2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDeleteAttribute(ctx context.Context, sel ast.SelectionSet, v *model.DeleteAttribute) graphql.Marshaler {
-	if v == nil {
-		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
-			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
-		}
-		return graphql.Null
-	}
-	return ec._DeleteAttribute(ctx, sel, v)
-}
-
 func (ec *executionContext) marshalNDestination2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx context.Context, sel ast.SelectionSet, v model.Destination) graphql.Marshaler {
 	return ec._Destination(ctx, sel, &v)
 }
@@ -11928,6 +11870,38 @@ func (ec *executionContext) marshalNString2string(ctx context.Context, sel ast.S
 	return res
 }
 
+func (ec *executionContext) unmarshalNString2ᚕstringᚄ(ctx context.Context, v interface{}) ([]string, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]string, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNString2string(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalNString2ᚕstringᚄ(ctx context.Context, sel ast.SelectionSet, v []string) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	for i := range v {
+		ret[i] = ec.marshalNString2string(ctx, sel, v[i])
+	}
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
 func (ec *executionContext) marshalNSupportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSupportedSignals(ctx context.Context, sel ast.SelectionSet, v model.SupportedSignals) graphql.Marshaler {
 	return ec._SupportedSignals(ctx, sel, &v)
 }
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 5c8620305..5e5284eb2 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -82,13 +82,13 @@ type DeleteAttribute struct {
 }
 
 type DeleteAttributeAction struct {
-	ID      string             `json:"id"`
-	Type    string             `json:"type"`
-	Name    *string            `json:"name,omitempty"`
-	Notes   *string            `json:"notes,omitempty"`
-	Disable bool               `json:"disable"`
-	Signals []SignalType       `json:"signals"`
-	Details []*DeleteAttribute `json:"details"`
+	ID      string       `json:"id"`
+	Type    string       `json:"type"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details []string     `json:"details"`
 }
 
 func (DeleteAttributeAction) IsAction()              {}
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 83a1d71be..fadc9592b 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -273,7 +273,7 @@ type DeleteAttributeAction implements Action {
   notes: String
   disable: Boolean!
   signals: [SignalType!]!
-  details: [DeleteAttribute!]!
+  details: [String!]!
 }
 
 input ActionInput {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index aa8415bea..e8c2c0a2b 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -558,50 +558,34 @@ func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, des
 func (r *mutationResolver) CreateAction(ctx context.Context, action model.ActionInput) (model.Action, error) {
 	switch action.Type {
 	case actionservices.ActionTypeAddClusterInfo:
-		res, err := actionservices.CreateAddClusterInfo(ctx, action)
-
-		if err != nil {
-			return nil, fmt.Errorf("failed to create AddClusterInfo: %v", err)
-		}
-
-		return res, nil
+		return actionservices.CreateAddClusterInfo(ctx, action)
 
 	case actionservices.ActionTypeDeleteAttribute:
-
-	// Handle other action types...
+		return actionservices.CreateDeleteAttribute(ctx, action)
 
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
 
-	return nil, nil
 }
 
 // UpdateAction is the resolver for the updateAction field.
 func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
 	switch action.Type {
 	case actionservices.ActionTypeAddClusterInfo:
-		res, err := actionservices.UpdateAddClusterInfo(ctx, id, action)
-
-		if err != nil {
-			return nil, fmt.Errorf("failed to update AddClusterInfo: %v", err)
-		}
-
-		return res, nil
+		return actionservices.UpdateAddClusterInfo(ctx, id, action)
 
 	case actionservices.ActionTypeDeleteAttribute:
-		// Handle other action types...
+		return actionservices.UpdateDeleteAttribute(ctx, id, action)
 
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
 
-	return nil, nil
 }
 
 // DeleteAction is the resolver for the deleteAction field.
 func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionType string) (bool, error) {
-
 	switch actionType {
 	case actionservices.ActionTypeAddClusterInfo:
 		err := actionservices.DeleteAddClusterInfo(ctx, id)
@@ -610,7 +594,10 @@ func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionTy
 		}
 
 	case actionservices.ActionTypeDeleteAttribute:
-		// Handle other action types...
+		err := actionservices.DeleteDeleteAttribute(ctx, id)
+		if err != nil {
+			return false, fmt.Errorf("failed to delete DeleteAttribute: %v", err)
+		}
 
 	default:
 		return false, fmt.Errorf("unsupported action type: %s", actionType)
diff --git a/frontend/services/actions/deleteattribute.go b/frontend/services/actions/deleteattribute.go
new file mode 100644
index 000000000..ae5e84ba0
--- /dev/null
+++ b/frontend/services/actions/deleteattribute.go
@@ -0,0 +1,124 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/actions/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type DeleteAttributeDetails struct {
+	AttributeNamesToDelete []string `json:"attributeNamesToDelete"`
+}
+
+// CreateDeleteAttribute creates a new DeleteAttribute action in Kubernetes
+func CreateDeleteAttribute(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	var details DeleteAttributeDetails
+	err := json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for DeleteAttribute: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	deleteAttributeAction := &v1alpha1.DeleteAttribute{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "da-",
+		},
+		Spec: v1alpha1.DeleteAttributeSpec{
+			ActionName:             services.DerefString(action.Name),
+			Notes:                  services.DerefString(action.Notes),
+			Disabled:               action.Disable,
+			Signals:                signals,
+			AttributeNamesToDelete: details.AttributeNamesToDelete,
+		},
+	}
+
+	generatedAction, err := kube.DefaultClient.ActionsClient.DeleteAttributes(odigosns).Create(ctx, deleteAttributeAction, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to create DeleteAttribute: %v", err)
+	}
+
+	response := &model.DeleteAttributeAction{
+		ID:      generatedAction.Name,
+		Type:    ActionTypeDeleteAttribute,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: details.AttributeNamesToDelete,
+	}
+
+	return response, nil
+}
+
+// UpdateDeleteAttribute updates an existing DeleteAttribute action in Kubernetes
+func UpdateDeleteAttribute(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	existingAction, err := kube.DefaultClient.ActionsClient.DeleteAttributes(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch DeleteAttribute: %v", err)
+	}
+
+	var details DeleteAttributeDetails
+	err = json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for DeleteAttribute: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	existingAction.Spec.ActionName = services.DerefString(action.Name)
+	existingAction.Spec.Notes = services.DerefString(action.Notes)
+	existingAction.Spec.Disabled = action.Disable
+	existingAction.Spec.Signals = signals
+	existingAction.Spec.AttributeNamesToDelete = details.AttributeNamesToDelete
+
+	updatedAction, err := kube.DefaultClient.ActionsClient.DeleteAttributes(odigosns).Update(ctx, existingAction, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update DeleteAttribute: %v", err)
+	}
+
+	response := &model.DeleteAttributeAction{
+		ID:      updatedAction.Name,
+		Type:    ActionTypeDeleteAttribute,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: details.AttributeNamesToDelete,
+	}
+
+	return response, nil
+}
+
+// DeleteDeleteAttribute deletes an existing DeleteAttribute action from Kubernetes
+func DeleteDeleteAttribute(ctx context.Context, id string) error {
+	odigosns := consts.DefaultOdigosNamespace
+
+	err := kube.DefaultClient.ActionsClient.DeleteAttributes(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			return fmt.Errorf("DeleteAttribute action with ID %s not found", id)
+		}
+		return fmt.Errorf("failed to delete DeleteAttribute action: %v", err)
+	}
+
+	return nil
+}

From 1052f1306f82cc79e00887a0896bb0e7f3399fb9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@keyval.dev>
Date: Tue, 22 Oct 2024 16:41:50 +0300
Subject: [PATCH 302/374] chore: wip

---
 frontend/graph/generated.go             | 463 ++++++++++++++++++++++++
 frontend/graph/model/models_gen.go      |  27 ++
 frontend/graph/schema.graphqls          |  10 +
 frontend/graph/schema.resolvers.go      |   1 -
 frontend/services/actions/constants.go  |   1 +
 frontend/services/actions/piimasking.go | 124 +++++++
 6 files changed, 625 insertions(+), 1 deletion(-)
 create mode 100644 frontend/services/actions/piimasking.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 42dd0c20e..57ed8f597 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -210,6 +210,16 @@ type ComplexityRoot struct {
 		Supported func(childComplexity int) int
 	}
 
+	PiiMaskingAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+		Type    func(childComplexity int) int
+	}
+
 	Query struct {
 		ComputePlatform        func(childComplexity int) int
 		Config                 func(childComplexity int) int
@@ -989,6 +999,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
 
+	case "PiiMaskingAction.details":
+		if e.complexity.PiiMaskingAction.Details == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Details(childComplexity), true
+
+	case "PiiMaskingAction.disable":
+		if e.complexity.PiiMaskingAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Disable(childComplexity), true
+
+	case "PiiMaskingAction.id":
+		if e.complexity.PiiMaskingAction.ID == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.ID(childComplexity), true
+
+	case "PiiMaskingAction.name":
+		if e.complexity.PiiMaskingAction.Name == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Name(childComplexity), true
+
+	case "PiiMaskingAction.notes":
+		if e.complexity.PiiMaskingAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Notes(childComplexity), true
+
+	case "PiiMaskingAction.signals":
+		if e.complexity.PiiMaskingAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Signals(childComplexity), true
+
+	case "PiiMaskingAction.type":
+		if e.complexity.PiiMaskingAction.Type == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Type(childComplexity), true
+
 	case "Query.computePlatform":
 		if e.complexity.Query.ComputePlatform == nil {
 			break
@@ -5884,6 +5943,305 @@ func (ec *executionContext) fieldContext_ObservabilitySignalSupport_supported(_
 	return fc, nil
 }
 
+func (ec *executionContext) _PiiMaskingAction_id(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_type(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_name(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_notes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Notes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_disable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Disable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_details(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]string)
+	fc.Result = res
+	return ec.marshalOString2ᚕstringᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
 	if err != nil {
@@ -8922,6 +9280,13 @@ func (ec *executionContext) _Action(ctx context.Context, sel ast.SelectionSet, o
 			return graphql.Null
 		}
 		return ec._DeleteAttributeAction(ctx, sel, obj)
+	case model.PiiMaskingAction:
+		return ec._PiiMaskingAction(ctx, sel, &obj)
+	case *model.PiiMaskingAction:
+		if obj == nil {
+			return graphql.Null
+		}
+		return ec._PiiMaskingAction(ctx, sel, obj)
 	default:
 		panic(fmt.Errorf("unexpected type %T", obj))
 	}
@@ -10410,6 +10775,66 @@ func (ec *executionContext) _ObservabilitySignalSupport(ctx context.Context, sel
 	return out
 }
 
+var piiMaskingActionImplementors = []string{"PiiMaskingAction", "Action"}
+
+func (ec *executionContext) _PiiMaskingAction(ctx context.Context, sel ast.SelectionSet, obj *model.PiiMaskingAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, piiMaskingActionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("PiiMaskingAction")
+		case "id":
+			out.Values[i] = ec._PiiMaskingAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._PiiMaskingAction_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._PiiMaskingAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._PiiMaskingAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._PiiMaskingAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._PiiMaskingAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._PiiMaskingAction_details(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var queryImplementors = []string{"Query"}
 
 func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
@@ -12384,6 +12809,44 @@ func (ec *executionContext) marshalOSourceContainerRuntimeDetails2ᚕᚖgithub
 	return ret
 }
 
+func (ec *executionContext) unmarshalOString2ᚕstringᚄ(ctx context.Context, v interface{}) ([]string, error) {
+	if v == nil {
+		return nil, nil
+	}
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]string, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNString2string(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalOString2ᚕstringᚄ(ctx context.Context, sel ast.SelectionSet, v []string) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	for i := range v {
+		ret[i] = ec.marshalNString2string(ctx, sel, v[i])
+	}
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
 func (ec *executionContext) unmarshalOString2ᚖstring(ctx context.Context, v interface{}) (*string, error) {
 	if v == nil {
 		return nil, nil
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 5c8620305..ddebb6925 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -227,6 +227,33 @@ type PersistNamespaceSourceInput struct {
 	Selected *bool           `json:"selected,omitempty"`
 }
 
+type PiiMaskingAction struct {
+	ID      string       `json:"id"`
+	Type    string       `json:"type"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details []string     `json:"details,omitempty"`
+}
+
+func (PiiMaskingAction) IsAction()              {}
+func (this PiiMaskingAction) GetID() string     { return this.ID }
+func (this PiiMaskingAction) GetType() string   { return this.Type }
+func (this PiiMaskingAction) GetName() *string  { return this.Name }
+func (this PiiMaskingAction) GetNotes() *string { return this.Notes }
+func (this PiiMaskingAction) GetDisable() bool  { return this.Disable }
+func (this PiiMaskingAction) GetSignals() []SignalType {
+	if this.Signals == nil {
+		return nil
+	}
+	interfaceSlice := make([]SignalType, 0, len(this.Signals))
+	for _, concrete := range this.Signals {
+		interfaceSlice = append(interfaceSlice, concrete)
+	}
+	return interfaceSlice
+}
+
 type Query struct {
 }
 
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 83a1d71be..6081ea92c 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -276,6 +276,16 @@ type DeleteAttributeAction implements Action {
   details: [DeleteAttribute!]!
 }
 
+type PiiMaskingAction implements Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: [String!]
+}
+
 input ActionInput {
   type: String!
   name: String
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index aa8415bea..35f52555e 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -601,7 +601,6 @@ func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action m
 
 // DeleteAction is the resolver for the deleteAction field.
 func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionType string) (bool, error) {
-
 	switch actionType {
 	case actionservices.ActionTypeAddClusterInfo:
 		err := actionservices.DeleteAddClusterInfo(ctx, id)
diff --git a/frontend/services/actions/constants.go b/frontend/services/actions/constants.go
index fa77420e2..d032f86c3 100644
--- a/frontend/services/actions/constants.go
+++ b/frontend/services/actions/constants.go
@@ -3,5 +3,6 @@ package services
 const (
 	ActionTypeAddClusterInfo  = "AddClusterInfo"
 	ActionTypeDeleteAttribute = "DeleteAttribute"
+	ActionTypePiiMasking      = "PiiMasking"
 	// Add more action types as needed
 )
diff --git a/frontend/services/actions/piimasking.go b/frontend/services/actions/piimasking.go
new file mode 100644
index 000000000..d39c4cbb2
--- /dev/null
+++ b/frontend/services/actions/piimasking.go
@@ -0,0 +1,124 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/actions/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type PiiMaskingDetails struct {
+	PiiCategories []v1alpha1.PiiCategory `json:"piiCategories"`
+}
+
+// CreatePiiMasking creates a new PiiMasking action in Kubernetes
+func CreatePiiMasking(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	var details PiiMaskingDetails
+	err := json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for PiiMasking: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	piiMaskingAction := &v1alpha1.PiiMasking{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "pi-",
+		},
+		Spec: v1alpha1.PiiMaskingSpec{
+			ActionName:    services.DerefString(action.Name),
+			Notes:         services.DerefString(action.Notes),
+			Disabled:      action.Disable,
+			Signals:       signals,
+			PiiCategories: details.PiiCategories,
+		},
+	}
+
+	generatedAction, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).Create(ctx, piiMaskingAction, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to create PiiMasking: %v", err)
+	}
+
+	response := &model.PiiMaskingAction{
+		ID:      generatedAction.Name,
+		Type:    ActionTypePiiMasking,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: details.PiiCategories,
+	}
+
+	return response, nil
+}
+
+// UpdatePiiMasking updates an existing PiiMasking action in Kubernetes
+func UpdatePiiMasking(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	existingAction, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch PiiMasking: %v", err)
+	}
+
+	var details PiiMaskingDetails
+	err = json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for PiiMasking: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	existingAction.Spec.ActionName = services.DerefString(action.Name)
+	existingAction.Spec.Notes = services.DerefString(action.Notes)
+	existingAction.Spec.Disabled = action.Disable
+	existingAction.Spec.Signals = signals
+	existingAction.Spec.PiiCategories = details.PiiCategories
+
+	updatedAction, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).Update(ctx, existingAction, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update PiiMasking: %v", err)
+	}
+
+	response := &model.PiiMaskingAction{
+		ID:      updatedAction.Name,
+		Type:    ActionTypePiiMasking,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: details.PiiCategories,
+	}
+
+	return response, nil
+}
+
+// DeletePiiMasking deletes an existing PiiMasking action from Kubernetes
+func DeletePiiMasking(ctx context.Context, id string) error {
+	odigosns := consts.DefaultOdigosNamespace
+
+	err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			return fmt.Errorf("PiiMasking action with ID %s not found", id)
+		}
+		return fmt.Errorf("failed to delete PiiMasking action: %v", err)
+	}
+
+	return nil
+}

From 254427a8568e543ddbd04f02df0500883d4c97db Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Tue, 22 Oct 2024 16:52:34 +0300
Subject: [PATCH 303/374] [GEN-1546] Add pii masking new api (#1613)

---
 frontend/graph/generated.go             | 463 ++++++++++++++++++++++++
 frontend/graph/model/models_gen.go      |  27 ++
 frontend/graph/schema.graphqls          |  10 +
 frontend/graph/schema.resolvers.go      |  14 +-
 frontend/services/actions/constants.go  |   1 +
 frontend/services/actions/piimasking.go | 134 +++++++
 6 files changed, 644 insertions(+), 5 deletions(-)
 create mode 100644 frontend/services/actions/piimasking.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index b775fce8b..813f2b661 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -210,6 +210,16 @@ type ComplexityRoot struct {
 		Supported func(childComplexity int) int
 	}
 
+	PiiMaskingAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+		Type    func(childComplexity int) int
+	}
+
 	Query struct {
 		ComputePlatform        func(childComplexity int) int
 		Config                 func(childComplexity int) int
@@ -989,6 +999,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
 
+	case "PiiMaskingAction.details":
+		if e.complexity.PiiMaskingAction.Details == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Details(childComplexity), true
+
+	case "PiiMaskingAction.disable":
+		if e.complexity.PiiMaskingAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Disable(childComplexity), true
+
+	case "PiiMaskingAction.id":
+		if e.complexity.PiiMaskingAction.ID == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.ID(childComplexity), true
+
+	case "PiiMaskingAction.name":
+		if e.complexity.PiiMaskingAction.Name == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Name(childComplexity), true
+
+	case "PiiMaskingAction.notes":
+		if e.complexity.PiiMaskingAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Notes(childComplexity), true
+
+	case "PiiMaskingAction.signals":
+		if e.complexity.PiiMaskingAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Signals(childComplexity), true
+
+	case "PiiMaskingAction.type":
+		if e.complexity.PiiMaskingAction.Type == nil {
+			break
+		}
+
+		return e.complexity.PiiMaskingAction.Type(childComplexity), true
+
 	case "Query.computePlatform":
 		if e.complexity.Query.ComputePlatform == nil {
 			break
@@ -5880,6 +5939,305 @@ func (ec *executionContext) fieldContext_ObservabilitySignalSupport_supported(_
 	return fc, nil
 }
 
+func (ec *executionContext) _PiiMaskingAction_id(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_type(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_name(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_notes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Notes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_disable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Disable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PiiMaskingAction_details(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]string)
+	fc.Result = res
+	return ec.marshalOString2ᚕstringᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_PiiMaskingAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "PiiMaskingAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
 	if err != nil {
@@ -8918,6 +9276,13 @@ func (ec *executionContext) _Action(ctx context.Context, sel ast.SelectionSet, o
 			return graphql.Null
 		}
 		return ec._DeleteAttributeAction(ctx, sel, obj)
+	case model.PiiMaskingAction:
+		return ec._PiiMaskingAction(ctx, sel, &obj)
+	case *model.PiiMaskingAction:
+		if obj == nil {
+			return graphql.Null
+		}
+		return ec._PiiMaskingAction(ctx, sel, obj)
 	default:
 		panic(fmt.Errorf("unexpected type %T", obj))
 	}
@@ -10406,6 +10771,66 @@ func (ec *executionContext) _ObservabilitySignalSupport(ctx context.Context, sel
 	return out
 }
 
+var piiMaskingActionImplementors = []string{"PiiMaskingAction", "Action"}
+
+func (ec *executionContext) _PiiMaskingAction(ctx context.Context, sel ast.SelectionSet, obj *model.PiiMaskingAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, piiMaskingActionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("PiiMaskingAction")
+		case "id":
+			out.Values[i] = ec._PiiMaskingAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._PiiMaskingAction_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._PiiMaskingAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._PiiMaskingAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._PiiMaskingAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._PiiMaskingAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._PiiMaskingAction_details(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var queryImplementors = []string{"Query"}
 
 func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
@@ -12358,6 +12783,44 @@ func (ec *executionContext) marshalOSourceContainerRuntimeDetails2ᚕᚖgithub
 	return ret
 }
 
+func (ec *executionContext) unmarshalOString2ᚕstringᚄ(ctx context.Context, v interface{}) ([]string, error) {
+	if v == nil {
+		return nil, nil
+	}
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]string, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNString2string(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalOString2ᚕstringᚄ(ctx context.Context, sel ast.SelectionSet, v []string) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	for i := range v {
+		ret[i] = ec.marshalNString2string(ctx, sel, v[i])
+	}
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
 func (ec *executionContext) unmarshalOString2ᚖstring(ctx context.Context, v interface{}) (*string, error) {
 	if v == nil {
 		return nil, nil
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 5e5284eb2..e0fc10e51 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -227,6 +227,33 @@ type PersistNamespaceSourceInput struct {
 	Selected *bool           `json:"selected,omitempty"`
 }
 
+type PiiMaskingAction struct {
+	ID      string       `json:"id"`
+	Type    string       `json:"type"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details []string     `json:"details,omitempty"`
+}
+
+func (PiiMaskingAction) IsAction()              {}
+func (this PiiMaskingAction) GetID() string     { return this.ID }
+func (this PiiMaskingAction) GetType() string   { return this.Type }
+func (this PiiMaskingAction) GetName() *string  { return this.Name }
+func (this PiiMaskingAction) GetNotes() *string { return this.Notes }
+func (this PiiMaskingAction) GetDisable() bool  { return this.Disable }
+func (this PiiMaskingAction) GetSignals() []SignalType {
+	if this.Signals == nil {
+		return nil
+	}
+	interfaceSlice := make([]SignalType, 0, len(this.Signals))
+	for _, concrete := range this.Signals {
+		interfaceSlice = append(interfaceSlice, concrete)
+	}
+	return interfaceSlice
+}
+
 type Query struct {
 }
 
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index fadc9592b..b9f5c3a53 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -276,6 +276,16 @@ type DeleteAttributeAction implements Action {
   details: [String!]!
 }
 
+type PiiMaskingAction implements Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: [String!]
+}
+
 input ActionInput {
   type: String!
   name: String
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index e8c2c0a2b..94909090e 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -559,10 +559,10 @@ func (r *mutationResolver) CreateAction(ctx context.Context, action model.Action
 	switch action.Type {
 	case actionservices.ActionTypeAddClusterInfo:
 		return actionservices.CreateAddClusterInfo(ctx, action)
-
 	case actionservices.ActionTypeDeleteAttribute:
 		return actionservices.CreateDeleteAttribute(ctx, action)
-
+	case actionservices.ActionTypePiiMasking:
+		return actionservices.CreatePiiMasking(ctx, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
@@ -574,10 +574,10 @@ func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action m
 	switch action.Type {
 	case actionservices.ActionTypeAddClusterInfo:
 		return actionservices.UpdateAddClusterInfo(ctx, id, action)
-
 	case actionservices.ActionTypeDeleteAttribute:
 		return actionservices.UpdateDeleteAttribute(ctx, id, action)
-
+	case actionservices.ActionTypePiiMasking:
+		return actionservices.UpdatePiiMasking(ctx, id, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
@@ -598,7 +598,11 @@ func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionTy
 		if err != nil {
 			return false, fmt.Errorf("failed to delete DeleteAttribute: %v", err)
 		}
-
+	case actionservices.ActionTypePiiMasking:
+		err := actionservices.DeletePiiMasking(ctx, id)
+		if err != nil {
+			return false, fmt.Errorf("failed to delete PiiMasking: %v", err)
+		}
 	default:
 		return false, fmt.Errorf("unsupported action type: %s", actionType)
 	}
diff --git a/frontend/services/actions/constants.go b/frontend/services/actions/constants.go
index fa77420e2..d032f86c3 100644
--- a/frontend/services/actions/constants.go
+++ b/frontend/services/actions/constants.go
@@ -3,5 +3,6 @@ package services
 const (
 	ActionTypeAddClusterInfo  = "AddClusterInfo"
 	ActionTypeDeleteAttribute = "DeleteAttribute"
+	ActionTypePiiMasking      = "PiiMasking"
 	// Add more action types as needed
 )
diff --git a/frontend/services/actions/piimasking.go b/frontend/services/actions/piimasking.go
new file mode 100644
index 000000000..6056100ae
--- /dev/null
+++ b/frontend/services/actions/piimasking.go
@@ -0,0 +1,134 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/actions/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type PiiMaskingDetails struct {
+	PiiCategories []v1alpha1.PiiCategory `json:"piiCategories"`
+}
+
+// CreatePiiMasking creates a new PiiMasking action in Kubernetes
+func CreatePiiMasking(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	var details PiiMaskingDetails
+	err := json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for PiiMasking: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	piiMaskingAction := &v1alpha1.PiiMasking{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "pi-",
+		},
+		Spec: v1alpha1.PiiMaskingSpec{
+			ActionName:    services.DerefString(action.Name),
+			Notes:         services.DerefString(action.Notes),
+			Disabled:      action.Disable,
+			Signals:       signals,
+			PiiCategories: details.PiiCategories,
+		},
+	}
+
+	generatedAction, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).Create(ctx, piiMaskingAction, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to create PiiMasking: %v", err)
+	}
+
+	piiCategories := make([]string, len(details.PiiCategories))
+	for i, category := range details.PiiCategories {
+		piiCategories[i] = string(category)
+	}
+
+	response := &model.PiiMaskingAction{
+		ID:      generatedAction.Name,
+		Type:    ActionTypePiiMasking,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: piiCategories,
+	}
+
+	return response, nil
+}
+
+// UpdatePiiMasking updates an existing PiiMasking action in Kubernetes
+func UpdatePiiMasking(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	existingAction, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch PiiMasking: %v", err)
+	}
+
+	var details PiiMaskingDetails
+	err = json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for PiiMasking: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	existingAction.Spec.ActionName = services.DerefString(action.Name)
+	existingAction.Spec.Notes = services.DerefString(action.Notes)
+	existingAction.Spec.Disabled = action.Disable
+	existingAction.Spec.Signals = signals
+	existingAction.Spec.PiiCategories = details.PiiCategories
+
+	updatedAction, err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).Update(ctx, existingAction, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update PiiMasking: %v", err)
+	}
+
+	piiCategories := make([]string, len(details.PiiCategories))
+	for i, category := range details.PiiCategories {
+		piiCategories[i] = string(category)
+	}
+
+	response := &model.PiiMaskingAction{
+		ID:      updatedAction.Name,
+		Type:    ActionTypePiiMasking,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: piiCategories,
+	}
+
+	return response, nil
+}
+
+// DeletePiiMasking deletes an existing PiiMasking action from Kubernetes
+func DeletePiiMasking(ctx context.Context, id string) error {
+	odigosns := consts.DefaultOdigosNamespace
+
+	err := kube.DefaultClient.ActionsClient.PiiMaskings(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			return fmt.Errorf("PiiMasking action with ID %s not found", id)
+		}
+		return fmt.Errorf("failed to delete PiiMasking action: %v", err)
+	}
+
+	return nil
+}

From c769731c9c72dda4402f92a788b7c1e89f8b07b6 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 16:57:53 +0300
Subject: [PATCH 304/374] [GEN-1513]: actions modal form (#1608)

---
 .../actions.table/actions.table.row.tsx       |   2 +-
 .../manage.destination.header.tsx             |  21 +---
 .../destinations.table.row.tsx                |   2 +-
 .../destination.card/destination.card.tsx     |   2 +-
 .../action-custom-fields.tsx                  |  68 +++++++++++
 .../main/actions/choose-action-body/index.tsx |  69 +++++++++++
 .../choose-action-modal/action-options.ts     |  42 ++++++-
 .../actions/choose-action-modal/index.tsx     |  80 +++++++------
 .../form-container.tsx                        |  12 +-
 .../main/overview/overview-drawer/index.tsx   |   2 +-
 .../setup/destination/destination.section.tsx |   2 +-
 frontend/webapp/hooks/actions/index.ts        |   1 +
 .../webapp/hooks/actions/useActionFormData.ts |  41 +++++++
 .../webapp/public/icons/common/notebook.svg   |   3 +
 .../auto-complete-input/index.tsx             |  81 +++++--------
 .../button/docs-button.tsx                    |  22 ++++
 .../reuseable-components/button/index.tsx     |  16 +--
 .../checkbox-list/index.tsx                   |  22 +---
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/input-list/index.tsx |  45 ++-----
 .../key-value-input-list/index.tsx            | 111 ++++++------------
 .../monitoring-checkboxes/index.tsx           |  87 ++++++++++++++
 .../reuseable-components/text/index.tsx       |   2 +-
 frontend/webapp/utils/constants/monitors.ts   |  14 ---
 .../constants/monitors.tsx}                   |  34 ++++--
 frontend/webapp/utils/constants/urls.tsx      |  21 ++--
 26 files changed, 512 insertions(+), 291 deletions(-)
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/index.tsx
 create mode 100644 frontend/webapp/hooks/actions/useActionFormData.ts
 create mode 100644 frontend/webapp/public/icons/common/notebook.svg
 create mode 100644 frontend/webapp/reuseable-components/button/docs-button.tsx
 create mode 100644 frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
 delete mode 100644 frontend/webapp/utils/constants/monitors.ts
 rename frontend/webapp/{components/setup/destination/utils.tsx => utils/constants/monitors.tsx} (58%)

diff --git a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx b/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
index 8d89c227b..383712998 100644
--- a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
+++ b/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { KeyvalCheckbox, KeyvalText } from '@/design.system';
 import ActionRowDynamicContent from './action.row.dynamic.content';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { ActionIcon } from '../action.icon';
 
 const StyledTr = styled.tr`
diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
index fb221b83d..90bcb5abd 100644
--- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
+++ b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
 import theme from '@/styles/palette';
 import { LinkIcon } from '@keyval-dev/design-system';
+import { DOCS_LINK } from '@/utils';
 
 const ManageDestinationHeaderWrapper = styled.div`
   display: flex;
@@ -10,11 +11,7 @@ const ManageDestinationHeaderWrapper = styled.div`
   align-items: center;
   border-radius: 25px;
   margin: 24px 0;
-  background: radial-gradient(
-      78.09% 72.18% at 100% -0%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
+  background: radial-gradient(78.09% 72.18% at 100% -0%, rgba(150, 242, 255, 0.4) 0%, rgba(150, 242, 255, 0) 61.91%),
     linear-gradient(180deg, #2e4c55 0%, #303355 100%);
 `;
 
@@ -27,9 +24,7 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageDestinationHeader({
-  data: { image_url, display_name, type },
-}) {
+export function ManageDestinationHeader({ data: { image_url, display_name, type } }) {
   return (
     <ManageDestinationHeaderWrapper>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
@@ -37,15 +32,9 @@ export function ManageDestinationHeader({
         <KeyvalText size={24} weight={700}>
           {display_name}
         </KeyvalText>
-        <div
-          style={{ cursor: 'pointer' }}
-          onClick={() =>
-            window.open(`https://docs.odigos.io/backends/${type}`, '_blank')
-          }
-        >
+        <div style={{ cursor: 'pointer' }} onClick={() => window.open(`${DOCS_LINK}/backends/${type}`, '_blank')}>
           <KeyvalText style={{ display: 'flex', gap: 3 }}>
-            find out more about {display_name} in{' '}
-            <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
+            find out more about {display_name} in <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
             <LinkIcon style={{ marginTop: 2 }} />
           </KeyvalText>
         </div>
diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
index 3112f6964..7963c7861 100644
--- a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
+++ b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
@@ -3,7 +3,7 @@ import theme from '@/styles/palette';
 import { Destination } from '@/types';
 import styled, { css } from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
 import { ConditionCheck } from '@/components/common';
 
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 163416787..a8586dac7 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { KeyvalCard, KeyvalImage, KeyvalText } from '@/design.system';
 import { TapList } from '../tap.list/tap.list';
-import { MONITORING_OPTIONS } from '../utils';
+import { MONITORING_OPTIONS } from '../../../../utils/constants/monitors';
 import {
   ApplicationNameWrapper,
   DestinationCardContentWrapper,
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
new file mode 100644
index 000000000..c3c94f01b
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
+import { ActionsType } from '@/types';
+
+interface ActionCustomFieldsProps {
+  actionType?: ActionsType;
+  value: any;
+  setValue: (value: any) => void;
+}
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
+  switch (actionType) {
+    case ActionsType.ADD_CLUSTER_INFO:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to add</FieldTitle>
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.DELETE_ATTRIBUTES:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to delete</FieldTitle>
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.RENAME_ATTRIBUTES:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to rename</FieldTitle>
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.PII_MASKING:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to mask</FieldTitle>
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.ERROR_SAMPLER:
+      return null;
+
+    case ActionsType.PROBABILISTIC_SAMPLER:
+      return null;
+
+    case ActionsType.LATENCY_SAMPLER:
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
new file mode 100644
index 000000000..682a4bfb4
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+import ActionCustomFields from './action-custom-fields';
+import { ActionFormData } from '@/hooks/actions/useActionFormData';
+import { type ActionOption } from '../choose-action-modal/action-options';
+import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+import { MonitoringCheckboxes } from '@/reuseable-components/monitoring-checkboxes';
+
+const Description = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  line-height: 150%;
+  display: flex;
+`;
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+interface ChooseActionContentProps {
+  action: ActionOption;
+  formData: ActionFormData;
+  handleFormChange: (key: keyof ActionFormData, val: any) => void;
+}
+
+const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData, handleFormChange }) => {
+  return (
+    <>
+      <Description>
+        {action.docsDescription}
+        <DocsButton endpoint={action.docsEndpoint} />
+      </Description>
+
+      <FieldWrapper>
+        <MonitoringCheckboxes
+          allowedSignals={action.allowedSignals}
+          selectedSignals={formData.signals}
+          setSelectedSignals={(value) => handleFormChange('signals', value)}
+        />
+      </FieldWrapper>
+
+      <FieldWrapper>
+        <FieldTitle>Action name</FieldTitle>
+        <Input
+          placeholder='Use a name that describes the action'
+          value={formData.name}
+          onChange={({ target: { value } }) => handleFormChange('name', value)}
+        />
+      </FieldWrapper>
+
+      <ActionCustomFields
+        actionType={action.type}
+        value={formData.details ? JSON.parse(formData.details) : undefined}
+        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
+      />
+
+      <FieldWrapper>
+        <FieldTitle>Notes</FieldTitle>
+        <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
+      </FieldWrapper>
+    </>
+  );
+};
+
+export { ChooseActionBody };
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index b0e342e3c..8b9f31f7b 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,12 +1,29 @@
 import { ActionsType } from '@/types';
+import { SignalLowercase } from '@/utils';
 
-export const ACTION_OPTIONS = [
+export type ActionOption = {
+  id: string;
+  type?: ActionsType;
+  label: string;
+  description?: string;
+  docsEndpoint?: string;
+  docsDescription?: string;
+  icon?: string;
+  items?: ActionOption[];
+  allowedSignals?: SignalLowercase[];
+};
+
+export const ACTION_OPTIONS: ActionOption[] = [
   {
     id: 'add_cluster_info',
     label: 'Add Cluster Info',
     description: 'Add static cluster-scoped attributes to your data.',
     type: ActionsType.ADD_CLUSTER_INFO,
     icon: '/icons/actions/addclusterinfo.svg',
+    docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
+    docsDescription:
+      'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'delete_attribute',
@@ -14,6 +31,9 @@ export const ACTION_OPTIONS = [
     description: 'Delete attributes from logs, metrics, and traces.',
     type: ActionsType.DELETE_ATTRIBUTES,
     icon: '/icons/actions/deleteattribute.svg',
+    docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
+    docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'rename_attribute',
@@ -21,6 +41,10 @@ export const ACTION_OPTIONS = [
     description: 'Rename attributes in logs, metrics, and traces.',
     type: ActionsType.RENAME_ATTRIBUTES,
     icon: '/icons/actions/renameattribute.svg',
+    docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
+    docsDescription:
+      'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
+    allowedSignals: ['traces', 'metrics', 'logs'],
   },
   {
     id: 'pii-masking',
@@ -28,12 +52,13 @@ export const ACTION_OPTIONS = [
     description: 'Mask PII data in your traces.',
     type: ActionsType.PII_MASKING,
     icon: '/icons/actions/piimasking.svg',
+    docsEndpoint: '/pipeline/actions/attributes/piimasking',
+    docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
+    allowedSignals: ['traces'],
   },
   {
     id: 'sampler',
     label: 'Samplers',
-    description: '',
-    type: ActionsType.PROBABILISTIC_SAMPLER,
     icon: '/icons/actions/sampler.svg',
     items: [
       {
@@ -41,18 +66,29 @@ export const ACTION_OPTIONS = [
         label: 'Error Sampler',
         description: 'Sample errors based on percentage.',
         type: ActionsType.ERROR_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/errorsampler',
+        docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
+        allowedSignals: ['traces'],
       },
       {
         id: 'probabilistic-sampler',
         label: 'Probabilistic Sampler',
         description: 'Sample traces based on percentage.',
         type: ActionsType.PROBABILISTIC_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
+        docsDescription:
+          'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
+        allowedSignals: ['traces'],
       },
       {
         id: 'latency-action',
         label: 'Latency Action',
         description: 'Add latency to your traces.',
         type: ActionsType.LATENCY_SAMPLER,
+        docsEndpoint: '/pipeline/actions/sampling/latencysampler',
+        docsDescription:
+          'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
+        allowedSignals: ['traces'],
       },
     ],
   },
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 977d632b2..65cca01e8 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,21 +1,19 @@
-import React, { useRef, useCallback } from 'react';
-import {
-  AutocompleteInput,
-  Modal,
-  NavigationButtons,
-  Text,
-} from '@/reuseable-components';
 import styled from 'styled-components';
-import { ACTION_OPTIONS } from './action-options';
+import React, { useRef, useState } from 'react';
+import { useActionFormData } from '@/hooks/actions';
+import { ChooseActionBody } from '../choose-action-body';
+import { ACTION_OPTIONS, type ActionOption } from './action-options';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, Option } from '@/reuseable-components';
 
 const DefineActionContainer = styled.section`
   height: 640px;
   padding: 0px 220px;
   display: flex;
   flex-direction: column;
+  overflow-y: scroll;
 `;
 
-const HeaderWrapper = styled.div`
+const WidthConstraint = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -39,53 +37,59 @@ interface ModalActionComponentProps {
   onNext: () => void;
 }
 
-const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(
-  ({ onNext }) => {
-    const buttons = [
-      {
-        label: 'DONE',
-        onClick: onNext,
-        variant: 'primary' as const,
-      },
-    ];
+const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({ onNext }) => {
+  const buttons = [
+    {
+      label: 'DONE',
+      onClick: onNext,
+      variant: 'primary' as const,
+    },
+  ];
 
-    return <NavigationButtons buttons={buttons} />;
-  }
-);
+  return <NavigationButtons buttons={buttons} />;
+});
 
-export const AddActionModal: React.FC<AddActionModalProps> = ({
-  isModalOpen,
-  handleCloseModal,
-}) => {
+export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
   const submitRef = useRef<(() => void) | null>(null);
+  const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
+  const { formData, handleFormChange, resetFormData } = useActionFormData();
 
-  const handleNext = useCallback(() => {
+  const handleNext = () => {
     if (submitRef.current) {
       handleCloseModal();
     }
-  }, [handleCloseModal]);
+  };
 
-  const handleClose = useCallback(() => {
+  const handleClose = () => {
     handleCloseModal();
-  }, [handleCloseModal]);
+    setSelectedItem(null);
+  };
+
+  const handleSelect = (item: Option) => {
+    resetFormData();
+    setSelectedItem(item);
+  };
 
   return (
-    <Modal
-      isOpen={isModalOpen}
-      actionComponent={<ModalActionComponent onNext={handleNext} />}
-      header={{ title: 'Add Action' }}
-      onClose={handleClose}
-    >
+    <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
       <DefineActionContainer>
-        <HeaderWrapper>
+        <WidthConstraint>
           <Text size={20}>{'Define Action'}</Text>
           <SubTitle>
             {
               'Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
             }
           </SubTitle>
-        </HeaderWrapper>
-        <AutocompleteInput options={ACTION_OPTIONS} />
+        </WidthConstraint>
+
+        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={handleSelect} />
+
+        {!!selectedItem?.type ? (
+          <WidthConstraint>
+            <Divider margin='16px 0' />
+            <ChooseActionBody action={selectedItem} formData={formData} handleFormChange={handleFormChange} />
+          </WidthConstraint>
+        ) : null}
       </DefineActionContainer>
     </Modal>
   );
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
index 71bd10c1b..4948674a1 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/form-container.tsx
@@ -14,27 +14,23 @@ export const FormContainer = ({
   <StyledFormContainer>
     <CheckboxList
       monitors={monitors}
-      title="This connection will monitor:"
+      title='This connection will monitor:'
       exportedSignals={exportedSignals}
       handleSignalChange={handleSignalChange}
     />
     <Input
-      title="Destination name"
-      placeholder="Enter destination name"
+      title='Destination name'
+      placeholder='Enter destination name'
       value={destinationName}
       onChange={(e) => setDestinationName(e.target.value)}
     />
-    <DynamicConnectDestinationFormFields
-      fields={dynamicFields}
-      onChange={handleDynamicFieldChange}
-    />
+    <DynamicConnectDestinationFormFields fields={dynamicFields} onChange={handleDynamicFieldChange} />
   </StyledFormContainer>
 );
 
 const StyledFormContainer = styled.div`
   display: flex;
   width: 100%;
-  max-width: 500px;
   flex-direction: column;
   gap: 24px;
   height: 443px;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 64d6bbda8..9186db8ba 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -26,7 +26,7 @@ const componentMap = {
   ),
 };
 
-const DRAWER_WIDTH = '560px';
+const DRAWER_WIDTH = '640px';
 
 const OverviewDrawer = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
index 77ac2e3de..f996a43ae 100644
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ b/frontend/webapp/containers/setup/destination/destination.section.tsx
@@ -5,7 +5,7 @@ import { KeyvalLoader } from '@/design.system';
 import { EmptyList } from '@/components/lists';
 import { OVERVIEW, QUERIES, SETUP } from '@/utils';
 import { getDestinationsTypes } from '@/services';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { DestinationList, DestinationOptionMenu } from '@/components/setup';
 import {
   LoaderWrapper,
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 7fd95ef9d..373528190 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,3 +1,4 @@
 export * from './useActionState';
 export * from './useActions';
 export * from './useGetActions';
+export * from './useActionFormData';
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
new file mode 100644
index 000000000..ea0f083f0
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { SignalUppercase } from '@/utils';
+
+export type ActionFormData = {
+  type: string;
+  name: string;
+  notes: string;
+  disable: boolean;
+  signals: SignalUppercase[];
+  details: string;
+};
+
+const INITIAL: ActionFormData = {
+  type: '',
+  name: '',
+  notes: '',
+  disable: true,
+  signals: [],
+  details: '',
+};
+
+export function useActionFormData() {
+  const [formData, setFormData] = useState({ ...INITIAL });
+
+  const resetFormData = () => {
+    setFormData({ ...INITIAL });
+  };
+
+  const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      [key]: val,
+    }));
+  };
+
+  return {
+    formData,
+    handleFormChange,
+    resetFormData,
+  };
+}
diff --git a/frontend/webapp/public/icons/common/notebook.svg b/frontend/webapp/public/icons/common/notebook.svg
new file mode 100644
index 000000000..8b334a30f
--- /dev/null
+++ b/frontend/webapp/public/icons/common/notebook.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00016 3.37696V14.3327M8.00016 3.37696C10.0168 2.64365 12.6703 2.23608 14.6668 3.37696V13.7103C12.5356 12.7969 9.9581 13.4427 8.00016 14.3327M8.00016 3.37696C5.98356 2.64365 3.33004 2.23608 1.3335 3.37696V13.7103C3.46472 12.7969 6.04222 13.4427 8.00016 14.3327" stroke="#F9F9F9" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index 2b31ea584..b67065705 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
 import styled from 'styled-components';
-import { Text } from '../text';
 import Image from 'next/image';
+import { Text } from '../text';
 
-interface Option {
+export interface Option {
   id: string;
   label: string;
   description?: string;
@@ -17,13 +17,23 @@ interface AutocompleteInputProps {
   onOptionSelect?: (option: Option) => void;
 }
 
-const AutocompleteInput: FC<AutocompleteInputProps> = ({
-  options,
-  placeholder = 'Type to search...',
-  onOptionSelect,
-}) => {
+const filterOptions = (optionsList: Option[], input: string): Option[] => {
+  return optionsList.reduce<Option[]>((acc, option) => {
+    if (option.items) {
+      const filteredSubItems = filterOptions(option.items, input);
+      if (filteredSubItems.length) {
+        acc.push({ ...option, items: filteredSubItems });
+      }
+    } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
+      acc.push(option);
+    }
+    return acc;
+  }, []);
+};
+
+const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder = 'Type to search...', onOptionSelect }) => {
   const [query, setQuery] = useState('');
-  const [filteredOptions, setFilteredOptions] = useState<Option[]>([]);
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''));
   const [showOptions, setShowOptions] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
 
@@ -39,20 +49,6 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
     }
   };
 
-  const filterOptions = (optionsList: Option[], input: string): Option[] => {
-    return optionsList.reduce<Option[]>((acc, option) => {
-      if (option.items) {
-        const filteredSubItems = filterOptions(option.items, input);
-        if (filteredSubItems.length) {
-          acc.push({ ...option, items: filteredSubItems });
-        }
-      } else if (option.label.toLowerCase().includes(input.toLowerCase())) {
-        acc.push(option);
-      }
-      return acc;
-    }, []);
-  };
-
   const handleOptionClick = (option: Option) => {
     setQuery(option.label);
     setShowOptions(false);
@@ -88,24 +84,19 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({
     <AutocompleteContainer>
       <InputWrapper>
         <StyledInput
-          type="text"
+          type='text'
           value={query}
           placeholder={placeholder}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           onBlur={() => setShowOptions(false)}
-          onFocus={() => query && setShowOptions(true)}
+          onFocus={() => setShowOptions(true)}
         />
       </InputWrapper>
       {showOptions && (
         <OptionsList>
           {filteredOptions.map((option, index) => (
-            <OptionItem
-              key={option.id}
-              option={option}
-              isActive={index === activeIndex}
-              onClick={handleOptionClick}
-            />
+            <OptionItem key={option.id} option={option} isActive={index === activeIndex} onClick={handleOptionClick} />
           ))}
         </OptionsList>
       )}
@@ -123,29 +114,21 @@ const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
   const hasSubItems = !!option.items && option.items.length > 0;
 
   return (
-    <OptionItemContainer
-      isActive={isActive}
-      isList={hasSubItems}
-      onMouseDown={() => onClick(option)}
-    >
-      {option.icon && (
-        <Image width={16} height={16} src={option.icon} alt={option.label} />
-      )}
+    <OptionItemContainer isActive={isActive} isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
+      {option.icon && <Image width={16} height={16} src={option.icon} alt={option.label} />}
+
       <OptionContent>
         <OptionLabelWrapper>
           <OptionLabel>{option.label}</OptionLabel>
           <OptionDescription>{option.description}</OptionDescription>
         </OptionLabelWrapper>
-        {option.items && option.items.length > 0 && (
+
+        {hasSubItems && (
           <SubOptionsList>
-            {option.items.map((subOption) => (
+            {option.items?.map((subOption) => (
               <SubOptionContainer key={subOption.id}>
                 <VerticalLine />
-                <OptionItem
-                  option={subOption}
-                  isActive={false}
-                  onClick={onClick}
-                />
+                <OptionItem option={subOption} isActive={false} onClick={onClick} />
               </SubOptionContainer>
             ))}
           </SubOptionsList>
@@ -225,18 +208,17 @@ interface OptionItemContainerProps {
 }
 
 const OptionItemContainer = styled.li<OptionItemContainerProps>`
+  width: 100%;
   padding: 8px 12px;
   cursor: ${({ isList }) => (isList ? 'default' : 'pointer')};
   border-radius: 24px;
   gap: 8px;
   display: flex;
   align-items: ${({ isList }) => (isList ? 'flex-start' : 'center')};
-  background: ${({ isActive, theme }) =>
-    isActive ? theme.colors.activeBackground : 'transparent'};
+  background: ${({ isActive, theme }) => (isActive ? theme.colors.activeBackground : 'transparent')};
 
   &:hover {
-    background: ${({ theme, isList }) =>
-      !isList && theme.colors.white_opacity['008']};
+    background: ${({ theme, isList }) => !isList && theme.colors.white_opacity['008']};
   }
 `;
 
@@ -278,4 +260,5 @@ const SubOptionsList = styled.ul`
   padding-left: 0px;
   margin: 4px 0 0 0;
   list-style: none;
+  width: 100%;
 `;
diff --git a/frontend/webapp/reuseable-components/button/docs-button.tsx b/frontend/webapp/reuseable-components/button/docs-button.tsx
new file mode 100644
index 000000000..1de7c9242
--- /dev/null
+++ b/frontend/webapp/reuseable-components/button/docs-button.tsx
@@ -0,0 +1,22 @@
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Button, ButtonProps } from '.';
+import { DOCS_LINK } from '@/utils';
+
+const StyledButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  gap: 6px;
+  min-width: 100px;
+`;
+
+export const DocsButton = ({ endpoint = '/', variant = 'secondary' }: { endpoint?: string; variant?: ButtonProps['variant'] }) => {
+  return (
+    <StyledButton variant={variant} onClick={() => window.open(`${DOCS_LINK}${endpoint}`, '_blank', 'noopener noreferrer')}>
+      <Image src='/icons/common/notebook.svg' alt='Docs' width={18} height={18} />
+      Docs
+    </StyledButton>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index e74273f42..03c1ea7fa 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
   isDisabled?: boolean;
 }
@@ -102,20 +102,10 @@ const ButtonContainer = styled.div<{
   }
 `;
 
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  variant = 'primary',
-  isDisabled = false,
-  ...props
-}) => {
+export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', isDisabled = false, ...props }) => {
   return (
     <ButtonContainer variant={variant}>
-      <StyledButton
-        variant={variant}
-        disabled={isDisabled}
-        isDisabled={isDisabled}
-        {...props}
-      >
+      <StyledButton variant={variant} disabled={isDisabled} isDisabled={isDisabled} {...props}>
         {children}
       </StyledButton>
     </ButtonContainer>
diff --git a/frontend/webapp/reuseable-components/checkbox-list/index.tsx b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
index 0528fce7f..4d211aaf2 100644
--- a/frontend/webapp/reuseable-components/checkbox-list/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox-list/index.tsx
@@ -5,7 +5,7 @@ import { Checkbox } from '../checkbox';
 import { ExportedSignals } from '@/types';
 
 interface Monitor {
-  id: string;
+  id: string | number;
   title: string;
   tooltip?: string;
 }
@@ -14,7 +14,7 @@ interface CheckboxListProps {
   monitors: Monitor[];
   title?: string;
   exportedSignals: ExportedSignals;
-  handleSignalChange: (signal: string, value: boolean) => void;
+  handleSignalChange: (signal: Monitor['id'], value: boolean) => void;
 }
 
 const ListContainer = styled.div`
@@ -26,23 +26,12 @@ const TextWrapper = styled.div`
   margin-bottom: 14px;
 `;
 
-const CheckboxList: React.FC<CheckboxListProps> = ({
-  monitors,
-  title,
-  exportedSignals,
-  handleSignalChange,
-}) => {
+const CheckboxList: React.FC<CheckboxListProps> = ({ monitors, title, exportedSignals, handleSignalChange }) => {
   function isItemDisabled(item: Monitor) {
-    const selectedItems = Object.values(exportedSignals).filter(
-      (value) => value
-    );
-
+    const selectedItems = Object.values(exportedSignals).filter((value) => value);
     const trueValues = Object.values(exportedSignals).filter(Boolean);
 
-    return (
-      (monitors.length === 1 && trueValues.length === 1) ||
-      (selectedItems.length === 1 && exportedSignals[item.id])
-    );
+    return (monitors.length === 1 && trueValues.length === 1) || (selectedItems.length === 1 && exportedSignals[item.id]);
   }
 
   return (
@@ -54,6 +43,7 @@ const CheckboxList: React.FC<CheckboxListProps> = ({
           </Text>
         </TextWrapper>
       )}
+
       <ListContainer>
         {monitors.map((monitor) => (
           <Checkbox
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 110f5c759..4868acbc5 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1,5 +1,6 @@
 export * from './text';
 export * from './button';
+export * from './button/docs-button';
 export * from './section-title';
 export * from './input';
 export * from './tooltip';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 67b935d7a..4fc9ff711 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -66,16 +66,15 @@ const HeaderWrapper = styled.div`
   margin-bottom: 4px;
 `;
 
-const InputList: React.FC<InputListProps> = ({
-  initialValues = [''],
-  title,
-  tooltip,
-  required,
-  onChange,
-  value = [''],
-}) => {
+const INITIAL = [''];
+
+const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
   const [inputs, setInputs] = useState<string[]>(value || initialValues);
 
+  useEffect(() => {
+    if (!inputs.length) setInputs(INITIAL);
+  }, []);
+
   useEffect(() => {
     if (initialValues.length > 0) {
       onChange(initialValues);
@@ -108,45 +107,27 @@ const InputList: React.FC<InputListProps> = ({
         <HeaderWrapper>
           <Title>{title}</Title>
           {!required && (
-            <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+            <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
               (optional)
             </Text>
           )}
           {tooltip && (
             <Tooltip text={tooltip || ''}>
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
+              <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />
             </Tooltip>
           )}
         </HeaderWrapper>
       )}
       {inputs.map((value, index) => (
         <InputRow key={index}>
-          <Input
-            value={value}
-            onChange={(e) => handleInputChange(e.target.value, index)}
-          />
+          <Input value={value} onChange={(e) => handleInputChange(e.target.value, index)} />
           <DeleteButton onClick={() => handleDeleteInput(index)}>
-            <Image
-              src="/icons/common/trash.svg"
-              alt="Delete"
-              width={16}
-              height={16}
-            />
+            <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </InputRow>
       ))}
-      <AddButton
-        disabled={isAddButtonDisabled}
-        variant={'tertiary'}
-        onClick={handleAddInput}
-      >
-        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddInput}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index cbd7904ea..ec79435e2 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -66,62 +66,59 @@ const Title = styled(Text)`
   line-height: 22px;
 `;
 
+const INITIAL = [{ key: '', value: '' }];
+
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
-  initialKeyValuePairs = [{ key: '', value: '' }],
-  value = [{ key: '', value: '' }],
+  initialKeyValuePairs = INITIAL,
+  value = INITIAL,
+  onChange,
   title,
   tooltip,
   required,
-  onChange,
 }) => {
-  const [keyValuePairs, setKeyValuePairs] = useState<
-    { key: string; value: string }[]
-  >(value || initialKeyValuePairs);
+  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs);
+
+  useEffect(() => {
+    if (!keyValuePairs.length) setKeyValuePairs(INITIAL);
+  }, []);
 
-  const validPairsRef = useRef<{ key: string; value: string }[]>([]);
+  const recordedPairs = useRef('');
 
   useEffect(() => {
     // Filter out rows where either key or value is empty
-    const validKeyValuePairs = keyValuePairs.filter(
-      (pair) => pair.key.trim() !== '' && pair.value.trim() !== ''
-    );
+    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '');
+    const stringified = JSON.stringify(validKeyValuePairs);
 
     // Only trigger onChange if valid key-value pairs have changed
-    if (
-      JSON.stringify(validPairsRef.current) !==
-      JSON.stringify(validKeyValuePairs)
-    ) {
-      validPairsRef.current = validKeyValuePairs;
-      if (onChange) {
-        onChange(validKeyValuePairs);
-      }
+    if (recordedPairs.current !== stringified) {
+      recordedPairs.current = stringified;
+
+      if (onChange) onChange(validKeyValuePairs);
     }
   }, [keyValuePairs, onChange]);
 
   const handleAddRow = () => {
-    setKeyValuePairs([...keyValuePairs, { key: '', value: '' }]);
-  };
-
-  const handleDeleteRow = (index: number) => {
-    setKeyValuePairs(keyValuePairs.filter((_, i) => i !== index));
+    setKeyValuePairs((prev) => {
+      const payload = [...prev];
+      payload.push({ key: '', value: '' });
+      return payload;
+    });
   };
 
-  const handleKeyChange = (key: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs];
-    newKeyValuePairs[index].key = key;
-    setKeyValuePairs(newKeyValuePairs);
+  const handleDeleteRow = (idx: number) => {
+    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx));
   };
 
-  const handleValueChange = (value: string, index: number) => {
-    const newKeyValuePairs = [...keyValuePairs];
-    newKeyValuePairs[index].value = value;
-    setKeyValuePairs(newKeyValuePairs);
+  const handleChange = (key: 'key' | 'value', val: string, idx: number) => {
+    setKeyValuePairs((prev) => {
+      const payload = [...prev];
+      payload[idx][key] = val;
+      return payload;
+    });
   };
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = keyValuePairs.some(
-    (pair) => pair.key.trim() === '' || pair.value.trim() === ''
-  );
+  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '');
 
   return (
     <Container>
@@ -130,56 +127,26 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
           <HeaderWrapper>
             <Title>{title}</Title>
             {!required && (
-              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+              <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
                 (optional)
               </Text>
             )}
-            {tooltip && (
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
-            )}
+            {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />}
           </HeaderWrapper>
         </Tooltip>
       )}
       {keyValuePairs.map((pair, index) => (
         <Row key={index}>
-          <Input
-            value={pair.key}
-            onChange={(e) => handleKeyChange(e.target.value, index)}
-            placeholder="Define attribute"
-          />
-          <Image
-            src="/icons/common/arrow-right.svg"
-            alt="Arrow"
-            width={16}
-            height={16}
-          />
-          <Input
-            value={pair.value}
-            onChange={(e) => handleValueChange(e.target.value, index)}
-            placeholder="Define value"
-          />
+          <Input value={pair.key} onChange={(e) => handleChange('key', e.target.value, index)} placeholder='Define attribute' />
+          <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
+          <Input value={pair.value} onChange={(e) => handleChange('value', e.target.value, index)} placeholder='Define value' />
           <DeleteButton onClick={() => handleDeleteRow(index)}>
-            <Image
-              src="/icons/common/trash.svg"
-              alt="Delete"
-              width={16}
-              height={16}
-            />
+            <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </Row>
       ))}
-      <AddButton
-        disabled={isAddButtonDisabled}
-        variant={'tertiary'}
-        onClick={handleAddRow}
-      >
-        <Image src="/icons/common/plus.svg" alt="Add" width={16} height={16} />
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddRow}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
       </AddButton>
     </Container>
diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
new file mode 100644
index 000000000..3b4515955
--- /dev/null
+++ b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
@@ -0,0 +1,87 @@
+import { Text } from '../text';
+import { Checkbox } from '../checkbox';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+import { MONITORING_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
+
+interface MonitoringCheckboxesProps {
+  isVertical?: boolean;
+  allowedSignals?: (SignalUppercase | SignalLowercase)[];
+  selectedSignals: (SignalUppercase | SignalLowercase)[];
+  setSelectedSignals: (value: SignalUppercase[]) => void;
+}
+
+const ListContainer = styled.div<{ isVertical?: boolean }>`
+  display: flex;
+  flex-direction: ${({ isVertical }) => (isVertical ? 'column' : 'row')};
+  gap: ${({ isVertical }) => (isVertical ? '16px' : '32px')};
+`;
+
+const TextWrapper = styled.div`
+  margin-bottom: 14px;
+`;
+
+const monitors = MONITORING_OPTIONS;
+const initialStatuses: Record<SignalLowercase, boolean> = {
+  logs: false,
+  metrics: false,
+  traces: false,
+};
+
+const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical, allowedSignals, selectedSignals, setSelectedSignals }) => {
+  const [signalStatuses, setSignalStatuses] = useState({ ...initialStatuses });
+
+  useEffect(() => {
+    const payload = { ...initialStatuses };
+
+    selectedSignals.forEach((str) => {
+      payload[str.toLowerCase()] = true;
+    });
+
+    if (JSON.stringify(payload) !== JSON.stringify(signalStatuses)) {
+      setSignalStatuses(payload);
+    }
+  }, [selectedSignals]);
+
+  const handleChange = (key: keyof typeof signalStatuses, value: boolean) => {
+    const selected: SignalUppercase[] = [];
+
+    setSignalStatuses((prev) => {
+      const payload = { ...prev, [key]: value };
+
+      Object.entries(payload).forEach(([sig, bool]) => {
+        if (bool) selected.push(sig.toUpperCase() as SignalUppercase);
+      });
+
+      return payload;
+    });
+
+    setSelectedSignals(selected);
+  };
+
+  const isDisabled = (item: (typeof MONITORING_OPTIONS)[0]) => {
+    return !!allowedSignals && !allowedSignals.find((str) => str.toLowerCase() === item.type);
+  };
+
+  return (
+    <div>
+      <TextWrapper>
+        <Text>Monitoring</Text>
+      </TextWrapper>
+
+      <ListContainer isVertical={isVertical}>
+        {monitors.map((monitor) => (
+          <Checkbox
+            key={monitor.id}
+            title={monitor.title}
+            initialValue={signalStatuses[monitor.type]}
+            onChange={(value) => handleChange(monitor.type, value)}
+            disabled={isDisabled(monitor)}
+          />
+        ))}
+      </ListContainer>
+    </div>
+  );
+};
+
+export { MonitoringCheckboxes };
diff --git a/frontend/webapp/reuseable-components/text/index.tsx b/frontend/webapp/reuseable-components/text/index.tsx
index 393e02dcc..e7435cf66 100644
--- a/frontend/webapp/reuseable-components/text/index.tsx
+++ b/frontend/webapp/reuseable-components/text/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface TextProps {
+interface TextProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   children: React.ReactNode;
   color?: string;
   size?: number;
diff --git a/frontend/webapp/utils/constants/monitors.ts b/frontend/webapp/utils/constants/monitors.ts
deleted file mode 100644
index 7bd5f3daf..000000000
--- a/frontend/webapp/utils/constants/monitors.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const MONITORS_OPTIONS = [
-  {
-    id: 'logs',
-    value: 'Logs',
-  },
-  {
-    id: 'metrics',
-    value: 'Metrics',
-  },
-  {
-    id: 'traces',
-    value: 'Traces',
-  },
-];
diff --git a/frontend/webapp/components/setup/destination/utils.tsx b/frontend/webapp/utils/constants/monitors.tsx
similarity index 58%
rename from frontend/webapp/components/setup/destination/utils.tsx
rename to frontend/webapp/utils/constants/monitors.tsx
index b4c0ba3c6..df3983ae6 100644
--- a/frontend/webapp/components/setup/destination/utils.tsx
+++ b/frontend/webapp/utils/constants/monitors.tsx
@@ -1,21 +1,18 @@
 import { SETUP } from '@/utils/constants';
-import {
-  LogsFocusIcon,
-  LogsIcon,
-  MetricsFocusIcon,
-  MetricsIcon,
-  TraceFocusIcon,
-  TraceIcon,
-} from '@keyval-dev/design-system';
+import { LogsFocusIcon, LogsIcon, MetricsFocusIcon, MetricsIcon, TraceFocusIcon, TraceIcon } from '@keyval-dev/design-system';
+
+export type SignalUppercase = 'TRACES' | 'METRICS' | 'LOGS';
+export type SignalLowercase = 'traces' | 'metrics' | 'logs';
 
 export type MonitoringOption = {
+  id: number;
   title: string;
-  tapped: boolean;
   icons: object;
-  id: number;
+  type: SignalLowercase;
+  tapped: boolean;
 };
 
-export const MONITORING_OPTIONS = [
+export const MONITORING_OPTIONS: MonitoringOption[] = [
   {
     id: 1,
     icons: {
@@ -47,3 +44,18 @@ export const MONITORING_OPTIONS = [
     tapped: true,
   },
 ];
+
+export const MONITORS_OPTIONS = [
+  {
+    id: 'logs',
+    value: 'Logs',
+  },
+  {
+    id: 'metrics',
+    value: 'Metrics',
+  },
+  {
+    id: 'traces',
+    value: 'Traces',
+  },
+];
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index b8702439d..921492eca 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -13,15 +13,12 @@ const API = {
   CHECK_CONNECTION: `${BASE_URL}/destinations/testConnection`,
   SOURCES: `${BASE_URL}/sources`,
   SET_ACTION: (type: string) => `${BASE_URL}/actions/types/${type}`,
-  PUT_ACTION: (type: string, id: string) =>
-    `${BASE_URL}/actions/types/${type}/${id}`,
+  PUT_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
   ACTIONS: `${BASE_URL}/actions`,
-  DELETE_ACTION: (type: string, id: string) =>
-    `${BASE_URL}/actions/types/${type}/${id}`,
+  DELETE_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
   OVERVIEW_METRICS: `${BASE_URL}/metrics/overview`,
   INSTRUMENTATION_RULES: `${BASE_URL}/instrumentation-rules`,
-  INSTRUMENTATION_RULE: (id: string) =>
-    `${BASE_URL}/instrumentation-rules/${id}`,
+  INSTRUMENTATION_RULE: (id: string) => `${BASE_URL}/instrumentation-rules/${id}`,
 };
 
 const QUERIES = {
@@ -35,13 +32,11 @@ const QUERIES = {
   API_ACTIONS: 'apiActions',
 };
 
-const SLACK_INVITE_LINK =
-  'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
+const SLACK_INVITE_LINK = 'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
 
-export const ACTION_DOCS_LINK =
-  'https://docs.odigos.io/pipeline/actions/introduction';
-export const ACTION_ITEM_DOCS_LINK = 'https://docs.odigos.io/pipeline/actions';
+export const DOCS_LINK = 'https://docs.odigos.io';
+export const ACTION_DOCS_LINK = `${DOCS_LINK}/pipeline/actions/introduction`;
+export const ACTION_ITEM_DOCS_LINK = `${DOCS_LINK}/pipeline/actions`;
+export const INSTRUMENTATION_RULES_DOCS_LINK = `${DOCS_LINK}/pipeline/rules/overview`;
 
 export { API, QUERIES, SLACK_INVITE_LINK, BASE_URL };
-export const INSTRUMENTATION_RULES_DOCS_LINK =
-  'https://docs.odigos.io/pipeline/rules/overview';

From 89a6594c41e1a0d38cf11a0328f9b614d10b7a5a Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 22 Oct 2024 17:19:42 +0300
Subject: [PATCH 305/374] fix: stringify for graphql

---
 .../action-custom-fields.tsx                  | 68 -------------------
 .../custom-fields/add-cluster-info.tsx        | 61 +++++++++++++++++
 .../custom-fields/delete-attributes.tsx       | 42 ++++++++++++
 .../custom-fields/index.tsx                   | 45 ++++++++++++
 .../custom-fields/pii-masking.tsx             | 42 ++++++++++++
 .../custom-fields/rename-attributes.tsx       | 56 +++++++++++++++
 .../main/actions/choose-action-body/index.tsx |  8 +--
 7 files changed, 248 insertions(+), 74 deletions(-)
 delete mode 100644 frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
deleted file mode 100644
index c3c94f01b..000000000
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import styled from 'styled-components';
-import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
-import { ActionsType } from '@/types';
-
-interface ActionCustomFieldsProps {
-  actionType?: ActionsType;
-  value: any;
-  setValue: (value: any) => void;
-}
-
-const FieldWrapper = styled.div`
-  width: 100%;
-  margin: 8px 0;
-`;
-
-const FieldTitle = styled(Text)`
-  margin-bottom: 12px;
-`;
-
-const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
-  switch (actionType) {
-    case ActionsType.ADD_CLUSTER_INFO:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to add</FieldTitle>
-          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.DELETE_ATTRIBUTES:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to delete</FieldTitle>
-          <InputList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.RENAME_ATTRIBUTES:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to rename</FieldTitle>
-          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.PII_MASKING:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to mask</FieldTitle>
-          <InputList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.ERROR_SAMPLER:
-      return null;
-
-    case ActionsType.PROBABILISTIC_SAMPLER:
-      return null;
-
-    case ActionsType.LATENCY_SAMPLER:
-      return null;
-
-    default:
-      return null;
-  }
-};
-
-export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
new file mode 100644
index 000000000..3534faf59
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { KeyValueInputsList, Text } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  clusterAttributes: {
+    attributeName: string;
+    attributeStringValue: string;
+  }[];
+};
+
+const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(
+    () =>
+      value ? (JSON.parse(value) as Parsed).clusterAttributes.map((obj) => ({ key: obj.attributeName, value: obj.attributeStringValue })) : undefined,
+    [value]
+  );
+
+  const handleChange = (
+    arr: {
+      key: string;
+      value: string;
+    }[]
+  ) => {
+    const payload: Parsed = {
+      clusterAttributes: [],
+    };
+
+    arr.forEach((obj) => {
+      payload.clusterAttributes.push({
+        attributeName: obj.key,
+        attributeStringValue: obj.value,
+      });
+    });
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to add</FieldTitle>
+      <KeyValueInputsList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default AddClusterInfo;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
new file mode 100644
index 000000000..84507cb85
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { InputList, Text } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  attributeNamesToDelete: string[];
+};
+
+const DeleteAttributes: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => (value ? (JSON.parse(value) as Parsed).attributeNamesToDelete : undefined), [value]);
+
+  const handleChange = (arr: string[]) => {
+    const payload: Parsed = {
+      attributeNamesToDelete: arr,
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to delete</FieldTitle>
+      <InputList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default DeleteAttributes;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
new file mode 100644
index 000000000..ccd1a04ff
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
@@ -0,0 +1,45 @@
+import { ActionsType } from '@/types';
+import AddClusterInfo from './add-cluster-info';
+import DeleteAttributes from './delete-attributes';
+import RenameAttributes from './rename-attributes';
+import PiiMasking from './pii-masking';
+
+interface ActionCustomFieldsProps {
+  actionType?: ActionsType;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
+  switch (actionType) {
+    case ActionsType.ADD_CLUSTER_INFO: {
+      return <AddClusterInfo value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.DELETE_ATTRIBUTES: {
+      return <DeleteAttributes value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.RENAME_ATTRIBUTES: {
+      return <RenameAttributes value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.PII_MASKING: {
+      return <PiiMasking value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.ERROR_SAMPLER:
+      return null;
+
+    case ActionsType.PROBABILISTIC_SAMPLER:
+      return null;
+
+    case ActionsType.LATENCY_SAMPLER:
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
new file mode 100644
index 000000000..e286ffb82
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { InputList, Text } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  piiCategories: string[];
+};
+
+const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => (value ? (JSON.parse(value) as Parsed).piiCategories : undefined), [value]);
+
+  const handleChange = (arr: string[]) => {
+    const payload: Parsed = {
+      piiCategories: arr,
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to mask</FieldTitle>
+      <InputList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default PiiMasking;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
new file mode 100644
index 000000000..209977015
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { KeyValueInputsList, Text } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  renames: {
+    [oldKey: string]: string;
+  };
+};
+
+const RenameAttributes: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(
+    () => (value ? Object.entries((JSON.parse(value) as Parsed).renames).map(([k, v]) => ({ key: k, value: v })) : undefined),
+    [value]
+  );
+
+  const handleChange = (
+    arr: {
+      key: string;
+      value: string;
+    }[]
+  ) => {
+    const payload: Parsed = {
+      renames: {},
+    };
+
+    arr.forEach((obj) => {
+      payload.renames[obj.key] = obj.value;
+    });
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to rename</FieldTitle>
+      <KeyValueInputsList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default RenameAttributes;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 682a4bfb4..6190373e3 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import ActionCustomFields from './action-custom-fields';
+import ActionCustomFields from './custom-fields';
 import { ActionFormData } from '@/hooks/actions/useActionFormData';
 import { type ActionOption } from '../choose-action-modal/action-options';
 import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
@@ -52,11 +52,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData
         />
       </FieldWrapper>
 
-      <ActionCustomFields
-        actionType={action.type}
-        value={formData.details ? JSON.parse(formData.details) : undefined}
-        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
-      />
+      <ActionCustomFields actionType={action.type} value={formData.details} setValue={(val) => handleFormChange('details', val)} />
 
       <FieldWrapper>
         <FieldTitle>Notes</FieldTitle>

From 19eb1fe0cf786fe19deb1962f8e5776d238a969d Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 27 Oct 2024 09:35:27 +0200
Subject: [PATCH 306/374] [GEN-1515]: fix stringify for graphql (#1615)

---
 .../custom-fields/add-cluster-info.tsx        | 52 +++++++++++++++++++
 .../custom-fields/delete-attributes.tsx       | 34 ++++++++++++
 .../custom-fields/index.tsx                   | 45 ++++++++++++++++
 .../custom-fields/pii-masking.tsx             | 34 ++++++++++++
 .../custom-fields/rename-attributes.tsx       | 48 +++++++++++++++++
 .../custom-fields/styled.ts                   | 11 ++++
 .../main/actions/choose-action-body/index.tsx |  8 +--
 7 files changed, 226 insertions(+), 6 deletions(-)
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
new file mode 100644
index 000000000..80003811f
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { FieldTitle, FieldWrapper } from './styled';
+import { KeyValueInputsList } from '@/reuseable-components';
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  clusterAttributes: {
+    attributeName: string;
+    attributeStringValue: string;
+  }[];
+};
+
+const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(
+    () =>
+      safeJsonParse<Parsed>(value, { clusterAttributes: [] }).clusterAttributes.map((obj) => ({
+        key: obj.attributeName,
+        value: obj.attributeStringValue,
+      })),
+    [value]
+  );
+
+  const handleChange = (
+    arr: {
+      key: string;
+      value: string;
+    }[]
+  ) => {
+    const payload: Parsed = {
+      clusterAttributes: arr.map((obj) => ({
+        attributeName: obj.key,
+        attributeStringValue: obj.value,
+      })),
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to add</FieldTitle>
+      <KeyValueInputsList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default AddClusterInfo;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
new file mode 100644
index 000000000..3f267a0d6
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { InputList } from '@/reuseable-components';
+import { FieldTitle, FieldWrapper } from './styled';
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  attributeNamesToDelete: string[];
+};
+
+const DeleteAttributes: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { attributeNamesToDelete: [] }).attributeNamesToDelete, [value]);
+
+  const handleChange = (arr: string[]) => {
+    const payload: Parsed = {
+      attributeNamesToDelete: arr,
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to delete</FieldTitle>
+      <InputList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default DeleteAttributes;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
new file mode 100644
index 000000000..ccd1a04ff
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
@@ -0,0 +1,45 @@
+import { ActionsType } from '@/types';
+import AddClusterInfo from './add-cluster-info';
+import DeleteAttributes from './delete-attributes';
+import RenameAttributes from './rename-attributes';
+import PiiMasking from './pii-masking';
+
+interface ActionCustomFieldsProps {
+  actionType?: ActionsType;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
+  switch (actionType) {
+    case ActionsType.ADD_CLUSTER_INFO: {
+      return <AddClusterInfo value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.DELETE_ATTRIBUTES: {
+      return <DeleteAttributes value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.RENAME_ATTRIBUTES: {
+      return <RenameAttributes value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.PII_MASKING: {
+      return <PiiMasking value={value} setValue={setValue} />;
+    }
+
+    case ActionsType.ERROR_SAMPLER:
+      return null;
+
+    case ActionsType.PROBABILISTIC_SAMPLER:
+      return null;
+
+    case ActionsType.LATENCY_SAMPLER:
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
new file mode 100644
index 000000000..21cde2910
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { InputList } from '@/reuseable-components';
+import { FieldTitle, FieldWrapper } from './styled';
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  piiCategories: string[];
+};
+
+const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { piiCategories: [] }).piiCategories, [value]);
+
+  const handleChange = (arr: string[]) => {
+    const payload: Parsed = {
+      piiCategories: arr,
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to mask</FieldTitle>
+      <InputList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default PiiMasking;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
new file mode 100644
index 000000000..bd8cc7bb1
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { FieldTitle, FieldWrapper } from './styled';
+import { KeyValueInputsList } from '@/reuseable-components';
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  renames: {
+    [oldKey: string]: string;
+  };
+};
+
+const RenameAttributes: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(
+    () => Object.entries(safeJsonParse<Parsed>(value, { renames: {} }).renames).map(([k, v]) => ({ key: k, value: v })),
+    [value]
+  );
+
+  const handleChange = (
+    arr: {
+      key: string;
+      value: string;
+    }[]
+  ) => {
+    const payload: Parsed = {
+      renames: {},
+    };
+
+    arr.forEach((obj) => {
+      payload.renames[obj.key] = obj.value;
+    });
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Attributes to rename</FieldTitle>
+      <KeyValueInputsList value={mappedValue} onChange={handleChange} />
+    </FieldWrapper>
+  );
+};
+
+export default RenameAttributes;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
new file mode 100644
index 000000000..996df2e6e
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+
+export const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 8px 0;
+`;
+
+export const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 682a4bfb4..6190373e3 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import ActionCustomFields from './action-custom-fields';
+import ActionCustomFields from './custom-fields';
 import { ActionFormData } from '@/hooks/actions/useActionFormData';
 import { type ActionOption } from '../choose-action-modal/action-options';
 import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
@@ -52,11 +52,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData
         />
       </FieldWrapper>
 
-      <ActionCustomFields
-        actionType={action.type}
-        value={formData.details ? JSON.parse(formData.details) : undefined}
-        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
-      />
+      <ActionCustomFields actionType={action.type} value={formData.details} setValue={(val) => handleFormChange('details', val)} />
 
       <FieldWrapper>
         <FieldTitle>Notes</FieldTitle>

From 944480fd9ad0707e46b36b35ec0892c04fa839c2 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 27 Oct 2024 10:12:00 +0200
Subject: [PATCH 307/374] [GEN-1547]  Add error sampler api (#1629)

---
 frontend/graph/generated.go               | 431 ++++++++++++++++++++++
 frontend/graph/model/models_gen.go        |  27 ++
 frontend/graph/schema.graphqls            |  10 +
 frontend/graph/schema.resolvers.go        |  11 +-
 frontend/services/actions/constants.go    |   1 +
 frontend/services/actions/errorsampler.go | 125 +++++++
 6 files changed, 603 insertions(+), 2 deletions(-)
 create mode 100644 frontend/services/actions/errorsampler.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 813f2b661..0828f3397 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -126,6 +126,16 @@ type ComplexityRoot struct {
 		Name  func(childComplexity int) int
 	}
 
+	ErrorSamplerAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+		Type    func(childComplexity int) int
+	}
+
 	ExportedSignals struct {
 		Logs    func(childComplexity int) int
 		Metrics func(childComplexity int) int
@@ -634,6 +644,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.DestinationsCategory.Name(childComplexity), true
 
+	case "ErrorSamplerAction.details":
+		if e.complexity.ErrorSamplerAction.Details == nil {
+			break
+		}
+
+		return e.complexity.ErrorSamplerAction.Details(childComplexity), true
+
+	case "ErrorSamplerAction.disable":
+		if e.complexity.ErrorSamplerAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.ErrorSamplerAction.Disable(childComplexity), true
+
+	case "ErrorSamplerAction.id":
+		if e.complexity.ErrorSamplerAction.ID == nil {
+			break
+		}
+
+		return e.complexity.ErrorSamplerAction.ID(childComplexity), true
+
+	case "ErrorSamplerAction.name":
+		if e.complexity.ErrorSamplerAction.Name == nil {
+			break
+		}
+
+		return e.complexity.ErrorSamplerAction.Name(childComplexity), true
+
+	case "ErrorSamplerAction.notes":
+		if e.complexity.ErrorSamplerAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.ErrorSamplerAction.Notes(childComplexity), true
+
+	case "ErrorSamplerAction.signals":
+		if e.complexity.ErrorSamplerAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.ErrorSamplerAction.Signals(childComplexity), true
+
+	case "ErrorSamplerAction.type":
+		if e.complexity.ErrorSamplerAction.Type == nil {
+			break
+		}
+
+		return e.complexity.ErrorSamplerAction.Type(childComplexity), true
+
 	case "ExportedSignals.logs":
 		if e.complexity.ExportedSignals.Logs == nil {
 			break
@@ -3755,6 +3814,308 @@ func (ec *executionContext) fieldContext_DestinationsCategory_items(_ context.Co
 	return fc, nil
 }
 
+func (ec *executionContext) _ErrorSamplerAction_id(ctx context.Context, field graphql.CollectedField, obj *model.ErrorSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ErrorSamplerAction_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ErrorSamplerAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ErrorSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ErrorSamplerAction_type(ctx context.Context, field graphql.CollectedField, obj *model.ErrorSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ErrorSamplerAction_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ErrorSamplerAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ErrorSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ErrorSamplerAction_name(ctx context.Context, field graphql.CollectedField, obj *model.ErrorSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ErrorSamplerAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ErrorSamplerAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ErrorSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ErrorSamplerAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.ErrorSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ErrorSamplerAction_notes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Notes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ErrorSamplerAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ErrorSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ErrorSamplerAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.ErrorSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ErrorSamplerAction_disable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Disable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ErrorSamplerAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ErrorSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ErrorSamplerAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.ErrorSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ErrorSamplerAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ErrorSamplerAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ErrorSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ErrorSamplerAction_details(ctx context.Context, field graphql.CollectedField, obj *model.ErrorSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ErrorSamplerAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ErrorSamplerAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ErrorSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _ExportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.ExportedSignals) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_ExportedSignals_traces(ctx, field)
 	if err != nil {
@@ -9283,6 +9644,13 @@ func (ec *executionContext) _Action(ctx context.Context, sel ast.SelectionSet, o
 			return graphql.Null
 		}
 		return ec._PiiMaskingAction(ctx, sel, obj)
+	case model.ErrorSamplerAction:
+		return ec._ErrorSamplerAction(ctx, sel, &obj)
+	case *model.ErrorSamplerAction:
+		if obj == nil {
+			return graphql.Null
+		}
+		return ec._ErrorSamplerAction(ctx, sel, obj)
 	default:
 		panic(fmt.Errorf("unexpected type %T", obj))
 	}
@@ -10077,6 +10445,69 @@ func (ec *executionContext) _DestinationsCategory(ctx context.Context, sel ast.S
 	return out
 }
 
+var errorSamplerActionImplementors = []string{"ErrorSamplerAction", "Action"}
+
+func (ec *executionContext) _ErrorSamplerAction(ctx context.Context, sel ast.SelectionSet, obj *model.ErrorSamplerAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, errorSamplerActionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ErrorSamplerAction")
+		case "id":
+			out.Values[i] = ec._ErrorSamplerAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._ErrorSamplerAction_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._ErrorSamplerAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._ErrorSamplerAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._ErrorSamplerAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._ErrorSamplerAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._ErrorSamplerAction_details(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var exportedSignalsImplementors = []string{"ExportedSignals"}
 
 func (ec *executionContext) _ExportedSignals(ctx context.Context, sel ast.SelectionSet, obj *model.ExportedSignals) graphql.Marshaler {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index e0fc10e51..0a13f4705 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -121,6 +121,33 @@ type DestinationInput struct {
 	Fields          []*FieldInput         `json:"fields"`
 }
 
+type ErrorSamplerAction struct {
+	ID      string       `json:"id"`
+	Type    string       `json:"type"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details string       `json:"details"`
+}
+
+func (ErrorSamplerAction) IsAction()              {}
+func (this ErrorSamplerAction) GetID() string     { return this.ID }
+func (this ErrorSamplerAction) GetType() string   { return this.Type }
+func (this ErrorSamplerAction) GetName() *string  { return this.Name }
+func (this ErrorSamplerAction) GetNotes() *string { return this.Notes }
+func (this ErrorSamplerAction) GetDisable() bool  { return this.Disable }
+func (this ErrorSamplerAction) GetSignals() []SignalType {
+	if this.Signals == nil {
+		return nil
+	}
+	interfaceSlice := make([]SignalType, 0, len(this.Signals))
+	for _, concrete := range this.Signals {
+		interfaceSlice = append(interfaceSlice, concrete)
+	}
+	return interfaceSlice
+}
+
 type ExportedSignalsInput struct {
 	Traces  bool `json:"traces"`
 	Metrics bool `json:"metrics"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index b9f5c3a53..934c51832 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -286,6 +286,16 @@ type PiiMaskingAction implements Action {
   details: [String!]
 }
 
+type ErrorSamplerAction implements Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: String!
+}
+
 input ActionInput {
   type: String!
   name: String
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 94909090e..8f2dcfc9d 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -563,10 +563,11 @@ func (r *mutationResolver) CreateAction(ctx context.Context, action model.Action
 		return actionservices.CreateDeleteAttribute(ctx, action)
 	case actionservices.ActionTypePiiMasking:
 		return actionservices.CreatePiiMasking(ctx, action)
+	case actionservices.ActionTypeErrorSampler:
+		return actionservices.CreateErrorSampler(ctx, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
-
 }
 
 // UpdateAction is the resolver for the updateAction field.
@@ -578,10 +579,11 @@ func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action m
 		return actionservices.UpdateDeleteAttribute(ctx, id, action)
 	case actionservices.ActionTypePiiMasking:
 		return actionservices.UpdatePiiMasking(ctx, id, action)
+	case actionservices.ActionTypeErrorSampler:
+		return actionservices.UpdateErrorSampler(ctx, id, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
-
 }
 
 // DeleteAction is the resolver for the deleteAction field.
@@ -603,6 +605,11 @@ func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionTy
 		if err != nil {
 			return false, fmt.Errorf("failed to delete PiiMasking: %v", err)
 		}
+	case actionservices.ActionTypeErrorSampler:
+		err := actionservices.DeleteErrorSampler(ctx, id)
+		if err != nil {
+			return false, fmt.Errorf("failed to delete ErrorSampler: %v", err)
+		}
 	default:
 		return false, fmt.Errorf("unsupported action type: %s", actionType)
 	}
diff --git a/frontend/services/actions/constants.go b/frontend/services/actions/constants.go
index d032f86c3..1df231f6d 100644
--- a/frontend/services/actions/constants.go
+++ b/frontend/services/actions/constants.go
@@ -4,5 +4,6 @@ const (
 	ActionTypeAddClusterInfo  = "AddClusterInfo"
 	ActionTypeDeleteAttribute = "DeleteAttribute"
 	ActionTypePiiMasking      = "PiiMasking"
+	ActionTypeErrorSampler    = "ErrorSampler"
 	// Add more action types as needed
 )
diff --git a/frontend/services/actions/errorsampler.go b/frontend/services/actions/errorsampler.go
new file mode 100644
index 000000000..1d97db211
--- /dev/null
+++ b/frontend/services/actions/errorsampler.go
@@ -0,0 +1,125 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"strconv"
+
+	"github.com/odigos-io/odigos/api/actions/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type ErrorSamplerDetails struct {
+	FallbackSamplingRatio float64 `json:"fallback_sampling_ratio"`
+}
+
+// CreateErrorSampler creates a new ErrorSampler action in Kubernetes
+func CreateErrorSampler(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	var details ErrorSamplerDetails
+	err := json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for ErrorSampler: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	errorSamplerAction := &v1alpha1.ErrorSampler{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "es-",
+		},
+		Spec: v1alpha1.ErrorSamplerSpec{
+			ActionName:            services.DerefString(action.Name),
+			Notes:                 services.DerefString(action.Notes),
+			Disabled:              action.Disable,
+			Signals:               signals,
+			FallbackSamplingRatio: details.FallbackSamplingRatio,
+		},
+	}
+
+	generatedAction, err := kube.DefaultClient.ActionsClient.ErrorSamplers(odigosns).Create(ctx, errorSamplerAction, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to create ErrorSampler: %v", err)
+	}
+	detailsString := strconv.FormatFloat(details.FallbackSamplingRatio, 'f', -1, 64)
+	response := &model.ErrorSamplerAction{
+		ID:      generatedAction.Name,
+		Type:    ActionTypeErrorSampler,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: detailsString,
+	}
+
+	return response, nil
+}
+
+// UpdateErrorSampler updates an existing ErrorSampler action in Kubernetes
+func UpdateErrorSampler(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	existingAction, err := kube.DefaultClient.ActionsClient.ErrorSamplers(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch ErrorSampler: %v", err)
+	}
+
+	var details ErrorSamplerDetails
+	err = json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for ErrorSampler: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	existingAction.Spec.ActionName = services.DerefString(action.Name)
+	existingAction.Spec.Notes = services.DerefString(action.Notes)
+	existingAction.Spec.Disabled = action.Disable
+	existingAction.Spec.Signals = signals
+	existingAction.Spec.FallbackSamplingRatio = details.FallbackSamplingRatio
+
+	updatedAction, err := kube.DefaultClient.ActionsClient.ErrorSamplers(odigosns).Update(ctx, existingAction, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update ErrorSampler: %v", err)
+	}
+	detailsString := strconv.FormatFloat(details.FallbackSamplingRatio, 'f', -1, 64)
+	response := &model.ErrorSamplerAction{
+		ID:      updatedAction.Name,
+		Type:    ActionTypeErrorSampler,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: detailsString,
+	}
+
+	return response, nil
+}
+
+// DeleteErrorSampler deletes an existing ErrorSampler action from Kubernetes
+func DeleteErrorSampler(ctx context.Context, id string) error {
+	odigosns := consts.DefaultOdigosNamespace
+
+	err := kube.DefaultClient.ActionsClient.ErrorSamplers(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			return fmt.Errorf("ErrorSampler action with ID %s not found", id)
+		}
+		return fmt.Errorf("failed to delete ErrorSampler action: %v", err)
+	}
+
+	return nil
+}

From 2637c1e27cc964ddf318f91493d08e2af3344a25 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 27 Oct 2024 10:50:25 +0200
Subject: [PATCH 308/374] [GEN-1555] Add new latency sampler api (#1630)

---
 frontend/graph/generated.go                 | 457 ++++++++++++++++++++
 frontend/graph/model/models_gen.go          |  27 ++
 frontend/graph/schema.graphqls              |  10 +
 frontend/graph/schema.resolvers.go          |   9 +
 frontend/services/actions/constants.go      |   2 +-
 frontend/services/actions/latencysampler.go | 139 ++++++
 frontend/services/utils.go                  |   4 +
 7 files changed, 647 insertions(+), 1 deletion(-)
 create mode 100644 frontend/services/actions/latencysampler.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 0828f3397..9d2f8564f 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -204,6 +204,16 @@ type ComplexityRoot struct {
 		ServiceName                    func(childComplexity int) int
 	}
 
+	LatencySamplerAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+		Type    func(childComplexity int) int
+	}
+
 	Mutation struct {
 		CreateAction                 func(childComplexity int, action model.ActionInput) int
 		CreateNewDestination         func(childComplexity int, destination model.DestinationInput) int
@@ -943,6 +953,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.K8sActualSource.ServiceName(childComplexity), true
 
+	case "LatencySamplerAction.details":
+		if e.complexity.LatencySamplerAction.Details == nil {
+			break
+		}
+
+		return e.complexity.LatencySamplerAction.Details(childComplexity), true
+
+	case "LatencySamplerAction.disable":
+		if e.complexity.LatencySamplerAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.LatencySamplerAction.Disable(childComplexity), true
+
+	case "LatencySamplerAction.id":
+		if e.complexity.LatencySamplerAction.ID == nil {
+			break
+		}
+
+		return e.complexity.LatencySamplerAction.ID(childComplexity), true
+
+	case "LatencySamplerAction.name":
+		if e.complexity.LatencySamplerAction.Name == nil {
+			break
+		}
+
+		return e.complexity.LatencySamplerAction.Name(childComplexity), true
+
+	case "LatencySamplerAction.notes":
+		if e.complexity.LatencySamplerAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.LatencySamplerAction.Notes(childComplexity), true
+
+	case "LatencySamplerAction.signals":
+		if e.complexity.LatencySamplerAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.LatencySamplerAction.Signals(childComplexity), true
+
+	case "LatencySamplerAction.type":
+		if e.complexity.LatencySamplerAction.Type == nil {
+			break
+		}
+
+		return e.complexity.LatencySamplerAction.Type(childComplexity), true
+
 	case "Mutation.createAction":
 		if e.complexity.Mutation.CreateAction == nil {
 			break
@@ -5717,6 +5776,308 @@ func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplication
 	return fc, nil
 }
 
+func (ec *executionContext) _LatencySamplerAction_id(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_type(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_name(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_notes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Notes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_disable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Disable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_details(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*string)
+	fc.Result = res
+	return ec.marshalNString2ᚕᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Mutation_createNewDestination(ctx, field)
 	if err != nil {
@@ -9651,6 +10012,13 @@ func (ec *executionContext) _Action(ctx context.Context, sel ast.SelectionSet, o
 			return graphql.Null
 		}
 		return ec._ErrorSamplerAction(ctx, sel, obj)
+	case model.LatencySamplerAction:
+		return ec._LatencySamplerAction(ctx, sel, &obj)
+	case *model.LatencySamplerAction:
+		if obj == nil {
+			return graphql.Null
+		}
+		return ec._LatencySamplerAction(ctx, sel, obj)
 	default:
 		panic(fmt.Errorf("unexpected type %T", obj))
 	}
@@ -11058,6 +11426,69 @@ func (ec *executionContext) _K8sActualSource(ctx context.Context, sel ast.Select
 	return out
 }
 
+var latencySamplerActionImplementors = []string{"LatencySamplerAction", "Action"}
+
+func (ec *executionContext) _LatencySamplerAction(ctx context.Context, sel ast.SelectionSet, obj *model.LatencySamplerAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, latencySamplerActionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("LatencySamplerAction")
+		case "id":
+			out.Values[i] = ec._LatencySamplerAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._LatencySamplerAction_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._LatencySamplerAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._LatencySamplerAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._LatencySamplerAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._LatencySamplerAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._LatencySamplerAction_details(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var mutationImplementors = []string{"Mutation"}
 
 func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
@@ -12758,6 +13189,32 @@ func (ec *executionContext) marshalNString2ᚕstringᚄ(ctx context.Context, sel
 	return ret
 }
 
+func (ec *executionContext) unmarshalNString2ᚕᚖstring(ctx context.Context, v interface{}) ([]*string, error) {
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*string, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalOString2ᚖstring(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalNString2ᚕᚖstring(ctx context.Context, sel ast.SelectionSet, v []*string) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	for i := range v {
+		ret[i] = ec.marshalOString2ᚖstring(ctx, sel, v[i])
+	}
+
+	return ret
+}
+
 func (ec *executionContext) marshalNSupportedSignals2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSupportedSignals(ctx context.Context, sel ast.SelectionSet, v model.SupportedSignals) graphql.Marshaler {
 	return ec._SupportedSignals(ctx, sel, &v)
 }
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 0a13f4705..b9b7a665b 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -236,6 +236,33 @@ type K8sSourceID struct {
 	Name      string          `json:"name"`
 }
 
+type LatencySamplerAction struct {
+	ID      string       `json:"id"`
+	Type    string       `json:"type"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details []*string    `json:"details"`
+}
+
+func (LatencySamplerAction) IsAction()              {}
+func (this LatencySamplerAction) GetID() string     { return this.ID }
+func (this LatencySamplerAction) GetType() string   { return this.Type }
+func (this LatencySamplerAction) GetName() *string  { return this.Name }
+func (this LatencySamplerAction) GetNotes() *string { return this.Notes }
+func (this LatencySamplerAction) GetDisable() bool  { return this.Disable }
+func (this LatencySamplerAction) GetSignals() []SignalType {
+	if this.Signals == nil {
+		return nil
+	}
+	interfaceSlice := make([]SignalType, 0, len(this.Signals))
+	for _, concrete := range this.Signals {
+		interfaceSlice = append(interfaceSlice, concrete)
+	}
+	return interfaceSlice
+}
+
 type Mutation struct {
 }
 
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 934c51832..7df718959 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -296,6 +296,16 @@ type ErrorSamplerAction implements Action {
   details: String!
 }
 
+type LatencySamplerAction implements Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: [String]!
+}
+
 input ActionInput {
   type: String!
   name: String
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 8f2dcfc9d..f9b960bd3 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -565,6 +565,8 @@ func (r *mutationResolver) CreateAction(ctx context.Context, action model.Action
 		return actionservices.CreatePiiMasking(ctx, action)
 	case actionservices.ActionTypeErrorSampler:
 		return actionservices.CreateErrorSampler(ctx, action)
+	case actionservices.ActionLatencySampler:
+		return actionservices.CreateLatencySampler(ctx, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
@@ -581,6 +583,8 @@ func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action m
 		return actionservices.UpdatePiiMasking(ctx, id, action)
 	case actionservices.ActionTypeErrorSampler:
 		return actionservices.UpdateErrorSampler(ctx, id, action)
+	case actionservices.ActionLatencySampler:
+		return actionservices.UpdateLatencySampler(ctx, id, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
@@ -610,6 +614,11 @@ func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionTy
 		if err != nil {
 			return false, fmt.Errorf("failed to delete ErrorSampler: %v", err)
 		}
+	case actionservices.ActionLatencySampler:
+		err := actionservices.DeleteLatencySampler(ctx, id)
+		if err != nil {
+			return false, fmt.Errorf("failed to delete LatencySampler: %v", err)
+		}
 	default:
 		return false, fmt.Errorf("unsupported action type: %s", actionType)
 	}
diff --git a/frontend/services/actions/constants.go b/frontend/services/actions/constants.go
index 1df231f6d..22e42a914 100644
--- a/frontend/services/actions/constants.go
+++ b/frontend/services/actions/constants.go
@@ -5,5 +5,5 @@ const (
 	ActionTypeDeleteAttribute = "DeleteAttribute"
 	ActionTypePiiMasking      = "PiiMasking"
 	ActionTypeErrorSampler    = "ErrorSampler"
-	// Add more action types as needed
+	ActionLatencySampler      = "LatencySampler"
 )
diff --git a/frontend/services/actions/latencysampler.go b/frontend/services/actions/latencysampler.go
new file mode 100644
index 000000000..6350e9551
--- /dev/null
+++ b/frontend/services/actions/latencysampler.go
@@ -0,0 +1,139 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/actions/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type LatencySamplerDetails struct {
+	EndpointsFilters []v1alpha1.HttpRouteFilter `json:"endpoints_filters"`
+}
+
+// CreateLatencySampler creates a new LatencySampler action in Kubernetes
+func CreateLatencySampler(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	var details LatencySamplerDetails
+	err := json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for LatencySampler: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	latencySamplerAction := &v1alpha1.LatencySampler{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "ls-",
+		},
+		Spec: v1alpha1.LatencySamplerSpec{
+			ActionName:       services.DerefString(action.Name),
+			Notes:            services.DerefString(action.Notes),
+			Disabled:         action.Disable,
+			Signals:          signals,
+			EndpointsFilters: details.EndpointsFilters,
+		},
+	}
+
+	generatedAction, err := kube.DefaultClient.ActionsClient.LatencySamplers(odigosns).Create(ctx, latencySamplerAction, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to create LatencySampler: %v", err)
+	}
+
+	// Convert Endpoint Filters to JSON string for response details
+	detailsJSON, err := json.Marshal(details.EndpointsFilters)
+	if err != nil {
+		return nil, fmt.Errorf("failed to marshal endpoint filters: %v", err)
+	}
+	responseDetails := []*string{services.StringPtr(string(detailsJSON))}
+
+	response := &model.LatencySamplerAction{
+		ID:      generatedAction.Name,
+		Type:    ActionLatencySampler,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: responseDetails,
+	}
+
+	return response, nil
+}
+
+// UpdateLatencySampler updates an existing LatencySampler action in Kubernetes
+func UpdateLatencySampler(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	existingAction, err := kube.DefaultClient.ActionsClient.LatencySamplers(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch LatencySampler: %v", err)
+	}
+
+	var details LatencySamplerDetails
+	err = json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for LatencySampler: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	// Update the existing action with new values
+	existingAction.Spec.ActionName = services.DerefString(action.Name)
+	existingAction.Spec.Notes = services.DerefString(action.Notes)
+	existingAction.Spec.Disabled = action.Disable
+	existingAction.Spec.Signals = signals
+	existingAction.Spec.EndpointsFilters = details.EndpointsFilters
+
+	updatedAction, err := kube.DefaultClient.ActionsClient.LatencySamplers(odigosns).Update(ctx, existingAction, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update LatencySampler: %v", err)
+	}
+
+	// Convert Endpoint Filters to JSON string for response details
+	detailsJSON, err := json.Marshal(details.EndpointsFilters)
+	if err != nil {
+		return nil, fmt.Errorf("failed to marshal endpoint filters: %v", err)
+	}
+	responseDetails := []*string{services.StringPtr(string(detailsJSON))}
+
+	response := &model.LatencySamplerAction{
+		ID:      updatedAction.Name,
+		Type:    ActionLatencySampler,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: responseDetails,
+	}
+
+	return response, nil
+}
+
+// DeleteLatencySampler deletes an existing LatencySampler action from Kubernetes
+func DeleteLatencySampler(ctx context.Context, id string) error {
+	odigosns := consts.DefaultOdigosNamespace
+
+	err := kube.DefaultClient.ActionsClient.LatencySamplers(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			return fmt.Errorf("LatencySampler action with ID %s not found", id)
+		}
+		return fmt.Errorf("failed to delete LatencySampler action: %v", err)
+	}
+
+	return nil
+}
diff --git a/frontend/services/utils.go b/frontend/services/utils.go
index 25e8e291a..bf0b7db2c 100644
--- a/frontend/services/utils.go
+++ b/frontend/services/utils.go
@@ -74,3 +74,7 @@ func DerefString(s *string) string {
 	}
 	return ""
 }
+
+func StringPtr(s string) *string {
+	return &s
+}

From 4cedea9ed8b831e389f51abf33360c81008a03bd Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 27 Oct 2024 11:53:42 +0200
Subject: [PATCH 309/374] [GEN-1557] Add prod sampler new api (#1631)

This pull request introduces a new `ProbabilisticSamplerAction` to the
codebase, along with the necessary updates to support its creation,
update, and deletion. The key changes include adding the new action
type, updating the GraphQL schema, and implementing the corresponding
service functions.

### Addition of `ProbabilisticSamplerAction`:

*
[`frontend/graph/model/models_gen.go`](diffhunk://#diff-642ccd7ed71fdfa394bd7f7fd99c9c33e20ff18c876a91cb989d379a44390469R311-R337):
Added the `ProbabilisticSamplerAction` struct and its methods to the
model.
*
[`frontend/graph/schema.graphqls`](diffhunk://#diff-bc07b91dedd1782d9ddbbb6374ad97c7604f9a267de5174645723d863c732f80R309-R318):
Updated the GraphQL schema to include the `ProbabilisticSamplerAction`
type.

### Resolver Updates:

*
[`frontend/graph/schema.resolvers.go`](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L568-R571):
Updated the `CreateAction`, `UpdateAction`, and `DeleteAction` resolvers
to handle the new `ProbabilisticSamplerAction` type.
[[1]](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L568-R571)
[[2]](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L586-R591)
[[3]](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70L617-R630)

### Constants Update:

*
[`frontend/services/actions/constants.go`](diffhunk://#diff-377602090c56364ea3a4d6cdadda1ad9b1c6ba9e122f882e5a1f640b1e62acf8L8-R9):
Added `ActionTypeProbabilisticSampler` and corrected the naming of
`ActionTypeLatencySampler`.

### Service Implementation:

*
[`frontend/services/actions/probabilisticsampler.go`](diffhunk://#diff-2f6dc14f04b67e0a11a5b999216a0e08f575927294c5033187b84f1179fb5624R1-R139):
Implemented the service functions `CreateProbabilisticSampler`,
`UpdateProbabilisticSampler`, and `DeleteProbabilisticSampler` to manage
`ProbabilisticSamplerAction` in Kubernetes.
---
 frontend/graph/generated.go                   | 431 ++++++++++++++++++
 frontend/graph/model/models_gen.go            |  27 ++
 frontend/graph/schema.graphqls                |  10 +
 frontend/graph/schema.resolvers.go            |  15 +-
 frontend/services/actions/constants.go        |  11 +-
 frontend/services/actions/latencysampler.go   |   4 +-
 .../services/actions/probabilisticsampler.go  | 139 ++++++
 7 files changed, 627 insertions(+), 10 deletions(-)
 create mode 100644 frontend/services/actions/probabilisticsampler.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 9d2f8564f..1640dd00d 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -240,6 +240,16 @@ type ComplexityRoot struct {
 		Type    func(childComplexity int) int
 	}
 
+	ProbabilisticSamplerAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+		Type    func(childComplexity int) int
+	}
+
 	Query struct {
 		ComputePlatform        func(childComplexity int) int
 		Config                 func(childComplexity int) int
@@ -1166,6 +1176,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.PiiMaskingAction.Type(childComplexity), true
 
+	case "ProbabilisticSamplerAction.details":
+		if e.complexity.ProbabilisticSamplerAction.Details == nil {
+			break
+		}
+
+		return e.complexity.ProbabilisticSamplerAction.Details(childComplexity), true
+
+	case "ProbabilisticSamplerAction.disable":
+		if e.complexity.ProbabilisticSamplerAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.ProbabilisticSamplerAction.Disable(childComplexity), true
+
+	case "ProbabilisticSamplerAction.id":
+		if e.complexity.ProbabilisticSamplerAction.ID == nil {
+			break
+		}
+
+		return e.complexity.ProbabilisticSamplerAction.ID(childComplexity), true
+
+	case "ProbabilisticSamplerAction.name":
+		if e.complexity.ProbabilisticSamplerAction.Name == nil {
+			break
+		}
+
+		return e.complexity.ProbabilisticSamplerAction.Name(childComplexity), true
+
+	case "ProbabilisticSamplerAction.notes":
+		if e.complexity.ProbabilisticSamplerAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.ProbabilisticSamplerAction.Notes(childComplexity), true
+
+	case "ProbabilisticSamplerAction.signals":
+		if e.complexity.ProbabilisticSamplerAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.ProbabilisticSamplerAction.Signals(childComplexity), true
+
+	case "ProbabilisticSamplerAction.type":
+		if e.complexity.ProbabilisticSamplerAction.Type == nil {
+			break
+		}
+
+		return e.complexity.ProbabilisticSamplerAction.Type(childComplexity), true
+
 	case "Query.computePlatform":
 		if e.complexity.Query.ComputePlatform == nil {
 			break
@@ -6960,6 +7019,308 @@ func (ec *executionContext) fieldContext_PiiMaskingAction_details(_ context.Cont
 	return fc, nil
 }
 
+func (ec *executionContext) _ProbabilisticSamplerAction_id(ctx context.Context, field graphql.CollectedField, obj *model.ProbabilisticSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ProbabilisticSamplerAction_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ProbabilisticSamplerAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ProbabilisticSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ProbabilisticSamplerAction_type(ctx context.Context, field graphql.CollectedField, obj *model.ProbabilisticSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ProbabilisticSamplerAction_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ProbabilisticSamplerAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ProbabilisticSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ProbabilisticSamplerAction_name(ctx context.Context, field graphql.CollectedField, obj *model.ProbabilisticSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ProbabilisticSamplerAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ProbabilisticSamplerAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ProbabilisticSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ProbabilisticSamplerAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.ProbabilisticSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ProbabilisticSamplerAction_notes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Notes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ProbabilisticSamplerAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ProbabilisticSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ProbabilisticSamplerAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.ProbabilisticSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ProbabilisticSamplerAction_disable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Disable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ProbabilisticSamplerAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ProbabilisticSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ProbabilisticSamplerAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.ProbabilisticSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ProbabilisticSamplerAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ProbabilisticSamplerAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ProbabilisticSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _ProbabilisticSamplerAction_details(ctx context.Context, field graphql.CollectedField, obj *model.ProbabilisticSamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ProbabilisticSamplerAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ProbabilisticSamplerAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ProbabilisticSamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query_computePlatform(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query_computePlatform(ctx, field)
 	if err != nil {
@@ -10019,6 +10380,13 @@ func (ec *executionContext) _Action(ctx context.Context, sel ast.SelectionSet, o
 			return graphql.Null
 		}
 		return ec._LatencySamplerAction(ctx, sel, obj)
+	case model.ProbabilisticSamplerAction:
+		return ec._ProbabilisticSamplerAction(ctx, sel, &obj)
+	case *model.ProbabilisticSamplerAction:
+		if obj == nil {
+			return graphql.Null
+		}
+		return ec._ProbabilisticSamplerAction(ctx, sel, obj)
 	default:
 		panic(fmt.Errorf("unexpected type %T", obj))
 	}
@@ -11693,6 +12061,69 @@ func (ec *executionContext) _PiiMaskingAction(ctx context.Context, sel ast.Selec
 	return out
 }
 
+var probabilisticSamplerActionImplementors = []string{"ProbabilisticSamplerAction", "Action"}
+
+func (ec *executionContext) _ProbabilisticSamplerAction(ctx context.Context, sel ast.SelectionSet, obj *model.ProbabilisticSamplerAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, probabilisticSamplerActionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("ProbabilisticSamplerAction")
+		case "id":
+			out.Values[i] = ec._ProbabilisticSamplerAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._ProbabilisticSamplerAction_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._ProbabilisticSamplerAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._ProbabilisticSamplerAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._ProbabilisticSamplerAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._ProbabilisticSamplerAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._ProbabilisticSamplerAction_details(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var queryImplementors = []string{"Query"}
 
 func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index b9b7a665b..ba4b03711 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -308,6 +308,33 @@ func (this PiiMaskingAction) GetSignals() []SignalType {
 	return interfaceSlice
 }
 
+type ProbabilisticSamplerAction struct {
+	ID      string       `json:"id"`
+	Type    string       `json:"type"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details string       `json:"details"`
+}
+
+func (ProbabilisticSamplerAction) IsAction()              {}
+func (this ProbabilisticSamplerAction) GetID() string     { return this.ID }
+func (this ProbabilisticSamplerAction) GetType() string   { return this.Type }
+func (this ProbabilisticSamplerAction) GetName() *string  { return this.Name }
+func (this ProbabilisticSamplerAction) GetNotes() *string { return this.Notes }
+func (this ProbabilisticSamplerAction) GetDisable() bool  { return this.Disable }
+func (this ProbabilisticSamplerAction) GetSignals() []SignalType {
+	if this.Signals == nil {
+		return nil
+	}
+	interfaceSlice := make([]SignalType, 0, len(this.Signals))
+	for _, concrete := range this.Signals {
+		interfaceSlice = append(interfaceSlice, concrete)
+	}
+	return interfaceSlice
+}
+
 type Query struct {
 }
 
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 7df718959..c566883dd 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -306,6 +306,16 @@ type LatencySamplerAction implements Action {
   details: [String]!
 }
 
+type ProbabilisticSamplerAction implements Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: String!
+}
+
 input ActionInput {
   type: String!
   name: String
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index f9b960bd3..8a5ad1696 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -565,8 +565,10 @@ func (r *mutationResolver) CreateAction(ctx context.Context, action model.Action
 		return actionservices.CreatePiiMasking(ctx, action)
 	case actionservices.ActionTypeErrorSampler:
 		return actionservices.CreateErrorSampler(ctx, action)
-	case actionservices.ActionLatencySampler:
+	case actionservices.ActionTypeLatencySampler:
 		return actionservices.CreateLatencySampler(ctx, action)
+	case actionservices.ActionTypeProbabilisticSampler:
+		return actionservices.CreateProbabilisticSampler(ctx, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
@@ -583,8 +585,10 @@ func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action m
 		return actionservices.UpdatePiiMasking(ctx, id, action)
 	case actionservices.ActionTypeErrorSampler:
 		return actionservices.UpdateErrorSampler(ctx, id, action)
-	case actionservices.ActionLatencySampler:
+	case actionservices.ActionTypeLatencySampler:
 		return actionservices.UpdateLatencySampler(ctx, id, action)
+	case actionservices.ActionTypeProbabilisticSampler:
+		return actionservices.UpdateProbabilisticSampler(ctx, id, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
@@ -614,11 +618,16 @@ func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionTy
 		if err != nil {
 			return false, fmt.Errorf("failed to delete ErrorSampler: %v", err)
 		}
-	case actionservices.ActionLatencySampler:
+	case actionservices.ActionTypeLatencySampler:
 		err := actionservices.DeleteLatencySampler(ctx, id)
 		if err != nil {
 			return false, fmt.Errorf("failed to delete LatencySampler: %v", err)
 		}
+	case actionservices.ActionTypeProbabilisticSampler:
+		err := actionservices.DeleteProbabilisticSampler(ctx, id)
+		if err != nil {
+			return false, fmt.Errorf("failed to delete ProbabilisticSampler: %v", err)
+		}
 	default:
 		return false, fmt.Errorf("unsupported action type: %s", actionType)
 	}
diff --git a/frontend/services/actions/constants.go b/frontend/services/actions/constants.go
index 22e42a914..fc8a7ef90 100644
--- a/frontend/services/actions/constants.go
+++ b/frontend/services/actions/constants.go
@@ -1,9 +1,10 @@
 package services
 
 const (
-	ActionTypeAddClusterInfo  = "AddClusterInfo"
-	ActionTypeDeleteAttribute = "DeleteAttribute"
-	ActionTypePiiMasking      = "PiiMasking"
-	ActionTypeErrorSampler    = "ErrorSampler"
-	ActionLatencySampler      = "LatencySampler"
+	ActionTypeAddClusterInfo       = "AddClusterInfo"
+	ActionTypeDeleteAttribute      = "DeleteAttribute"
+	ActionTypePiiMasking           = "PiiMasking"
+	ActionTypeErrorSampler         = "ErrorSampler"
+	ActionTypeLatencySampler       = "LatencySampler"
+	ActionTypeProbabilisticSampler = "ProbabilisticSampler"
 )
diff --git a/frontend/services/actions/latencysampler.go b/frontend/services/actions/latencysampler.go
index 6350e9551..32be71ddc 100644
--- a/frontend/services/actions/latencysampler.go
+++ b/frontend/services/actions/latencysampler.go
@@ -60,7 +60,7 @@ func CreateLatencySampler(ctx context.Context, action model.ActionInput) (model.
 
 	response := &model.LatencySamplerAction{
 		ID:      generatedAction.Name,
-		Type:    ActionLatencySampler,
+		Type:    ActionTypeLatencySampler,
 		Name:    action.Name,
 		Notes:   action.Notes,
 		Disable: action.Disable,
@@ -112,7 +112,7 @@ func UpdateLatencySampler(ctx context.Context, id string, action model.ActionInp
 
 	response := &model.LatencySamplerAction{
 		ID:      updatedAction.Name,
-		Type:    ActionLatencySampler,
+		Type:    ActionTypeLatencySampler,
 		Name:    action.Name,
 		Notes:   action.Notes,
 		Disable: action.Disable,
diff --git a/frontend/services/actions/probabilisticsampler.go b/frontend/services/actions/probabilisticsampler.go
new file mode 100644
index 000000000..f00c13506
--- /dev/null
+++ b/frontend/services/actions/probabilisticsampler.go
@@ -0,0 +1,139 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/actions/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type ProbabilisticSamplerDetails struct {
+	SamplingPercentage string `json:"sampling_percentage"`
+}
+
+// CreateProbabilisticSampler creates a new ProbabilisticSampler action in Kubernetes
+func CreateProbabilisticSampler(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	var details ProbabilisticSamplerDetails
+	err := json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for ProbabilisticSampler: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	probabilisticSamplerAction := &v1alpha1.ProbabilisticSampler{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "ps-",
+		},
+		Spec: v1alpha1.ProbabilisticSamplerSpec{
+			ActionName:         services.DerefString(action.Name),
+			Notes:              services.DerefString(action.Notes),
+			Disabled:           action.Disable,
+			Signals:            signals,
+			SamplingPercentage: details.SamplingPercentage,
+		},
+	}
+
+	generatedAction, err := kube.DefaultClient.ActionsClient.ProbabilisticSamplers(odigosns).Create(ctx, probabilisticSamplerAction, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to create ProbabilisticSampler: %v", err)
+	}
+
+	// Convert SamplingPercentage to JSON string and assign it as the first element of []*string
+	detailsJSON, err := json.Marshal(details.SamplingPercentage)
+	if err != nil {
+		return nil, fmt.Errorf("failed to marshal sampling percentage: %v", err)
+	}
+	responseDetails := string(detailsJSON)
+
+	response := &model.ProbabilisticSamplerAction{
+		ID:      generatedAction.Name,
+		Type:    ActionTypeProbabilisticSampler,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: responseDetails,
+	}
+
+	return response, nil
+}
+
+// UpdateProbabilisticSampler updates an existing ProbabilisticSampler action in Kubernetes
+func UpdateProbabilisticSampler(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	existingAction, err := kube.DefaultClient.ActionsClient.ProbabilisticSamplers(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch ProbabilisticSampler: %v", err)
+	}
+
+	var details ProbabilisticSamplerDetails
+	err = json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for ProbabilisticSampler: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	// Update the existing action with new values
+	existingAction.Spec.ActionName = services.DerefString(action.Name)
+	existingAction.Spec.Notes = services.DerefString(action.Notes)
+	existingAction.Spec.Disabled = action.Disable
+	existingAction.Spec.Signals = signals
+	existingAction.Spec.SamplingPercentage = details.SamplingPercentage
+
+	updatedAction, err := kube.DefaultClient.ActionsClient.ProbabilisticSamplers(odigosns).Update(ctx, existingAction, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update ProbabilisticSampler: %v", err)
+	}
+
+	// Convert SamplingPercentage to JSON string and assign it as the first element of []*string
+	detailsJSON, err := json.Marshal(details.SamplingPercentage)
+	if err != nil {
+		return nil, fmt.Errorf("failed to marshal sampling percentage: %v", err)
+	}
+	responseDetails := string(detailsJSON)
+
+	response := &model.ProbabilisticSamplerAction{
+		ID:      updatedAction.Name,
+		Type:    ActionTypeProbabilisticSampler,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: responseDetails,
+	}
+
+	return response, nil
+}
+
+// DeleteProbabilisticSampler deletes an existing ProbabilisticSampler action from Kubernetes
+func DeleteProbabilisticSampler(ctx context.Context, id string) error {
+	odigosns := consts.DefaultOdigosNamespace
+
+	err := kube.DefaultClient.ActionsClient.ProbabilisticSamplers(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			return fmt.Errorf("ProbabilisticSampler action with ID %s not found", id)
+		}
+		return fmt.Errorf("failed to delete ProbabilisticSampler action: %v", err)
+	}
+
+	return nil
+}

From 40f2215cb56320ea72eafc4308d7eb115e236a8c Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 27 Oct 2024 13:39:07 +0200
Subject: [PATCH 310/374] [GEN-1559] Add new gql api for rename attr action
 (#1634)

---
 frontend/graph/generated.go                  | 431 +++++++++++++++++++
 frontend/graph/model/models_gen.go           |  27 ++
 frontend/graph/schema.graphqls               |  10 +
 frontend/graph/schema.resolvers.go           |   9 +
 frontend/services/actions/constants.go       |   1 +
 frontend/services/actions/renameattribute.go | 138 ++++++
 6 files changed, 616 insertions(+)
 create mode 100644 frontend/services/actions/renameattribute.go

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 1640dd00d..cc019056c 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -258,6 +258,16 @@ type ComplexityRoot struct {
 		PotentialDestinations  func(childComplexity int) int
 	}
 
+	RenameAttributeAction struct {
+		Details func(childComplexity int) int
+		Disable func(childComplexity int) int
+		ID      func(childComplexity int) int
+		Name    func(childComplexity int) int
+		Notes   func(childComplexity int) int
+		Signals func(childComplexity int) int
+		Type    func(childComplexity int) int
+	}
+
 	SourceContainerRuntimeDetails struct {
 		ContainerName func(childComplexity int) int
 		Language      func(childComplexity int) int
@@ -1265,6 +1275,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.PotentialDestinations(childComplexity), true
 
+	case "RenameAttributeAction.details":
+		if e.complexity.RenameAttributeAction.Details == nil {
+			break
+		}
+
+		return e.complexity.RenameAttributeAction.Details(childComplexity), true
+
+	case "RenameAttributeAction.disable":
+		if e.complexity.RenameAttributeAction.Disable == nil {
+			break
+		}
+
+		return e.complexity.RenameAttributeAction.Disable(childComplexity), true
+
+	case "RenameAttributeAction.id":
+		if e.complexity.RenameAttributeAction.ID == nil {
+			break
+		}
+
+		return e.complexity.RenameAttributeAction.ID(childComplexity), true
+
+	case "RenameAttributeAction.name":
+		if e.complexity.RenameAttributeAction.Name == nil {
+			break
+		}
+
+		return e.complexity.RenameAttributeAction.Name(childComplexity), true
+
+	case "RenameAttributeAction.notes":
+		if e.complexity.RenameAttributeAction.Notes == nil {
+			break
+		}
+
+		return e.complexity.RenameAttributeAction.Notes(childComplexity), true
+
+	case "RenameAttributeAction.signals":
+		if e.complexity.RenameAttributeAction.Signals == nil {
+			break
+		}
+
+		return e.complexity.RenameAttributeAction.Signals(childComplexity), true
+
+	case "RenameAttributeAction.type":
+		if e.complexity.RenameAttributeAction.Type == nil {
+			break
+		}
+
+		return e.complexity.RenameAttributeAction.Type(childComplexity), true
+
 	case "SourceContainerRuntimeDetails.containerName":
 		if e.complexity.SourceContainerRuntimeDetails.ContainerName == nil {
 			break
@@ -7705,6 +7764,308 @@ func (ec *executionContext) fieldContext_Query___schema(_ context.Context, field
 	return fc, nil
 }
 
+func (ec *executionContext) _RenameAttributeAction_id(ctx context.Context, field graphql.CollectedField, obj *model.RenameAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_RenameAttributeAction_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_RenameAttributeAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "RenameAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _RenameAttributeAction_type(ctx context.Context, field graphql.CollectedField, obj *model.RenameAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_RenameAttributeAction_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_RenameAttributeAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "RenameAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _RenameAttributeAction_name(ctx context.Context, field graphql.CollectedField, obj *model.RenameAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_RenameAttributeAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_RenameAttributeAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "RenameAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _RenameAttributeAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.RenameAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_RenameAttributeAction_notes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Notes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_RenameAttributeAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "RenameAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _RenameAttributeAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.RenameAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_RenameAttributeAction_disable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Disable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_RenameAttributeAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "RenameAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _RenameAttributeAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.RenameAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_RenameAttributeAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_RenameAttributeAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "RenameAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _RenameAttributeAction_details(ctx context.Context, field graphql.CollectedField, obj *model.RenameAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_RenameAttributeAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_RenameAttributeAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "RenameAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
 	if err != nil {
@@ -10387,6 +10748,13 @@ func (ec *executionContext) _Action(ctx context.Context, sel ast.SelectionSet, o
 			return graphql.Null
 		}
 		return ec._ProbabilisticSamplerAction(ctx, sel, obj)
+	case model.RenameAttributeAction:
+		return ec._RenameAttributeAction(ctx, sel, &obj)
+	case *model.RenameAttributeAction:
+		if obj == nil {
+			return graphql.Null
+		}
+		return ec._RenameAttributeAction(ctx, sel, obj)
 	default:
 		panic(fmt.Errorf("unexpected type %T", obj))
 	}
@@ -12272,6 +12640,69 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 	return out
 }
 
+var renameAttributeActionImplementors = []string{"RenameAttributeAction", "Action"}
+
+func (ec *executionContext) _RenameAttributeAction(ctx context.Context, sel ast.SelectionSet, obj *model.RenameAttributeAction) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, renameAttributeActionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("RenameAttributeAction")
+		case "id":
+			out.Values[i] = ec._RenameAttributeAction_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._RenameAttributeAction_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._RenameAttributeAction_name(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._RenameAttributeAction_notes(ctx, field, obj)
+		case "disable":
+			out.Values[i] = ec._RenameAttributeAction_disable(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "signals":
+			out.Values[i] = ec._RenameAttributeAction_signals(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "details":
+			out.Values[i] = ec._RenameAttributeAction_details(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var sourceContainerRuntimeDetailsImplementors = []string{"SourceContainerRuntimeDetails"}
 
 func (ec *executionContext) _SourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, obj *model.SourceContainerRuntimeDetails) graphql.Marshaler {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index ba4b03711..0c87f8234 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -338,6 +338,33 @@ func (this ProbabilisticSamplerAction) GetSignals() []SignalType {
 type Query struct {
 }
 
+type RenameAttributeAction struct {
+	ID      string       `json:"id"`
+	Type    string       `json:"type"`
+	Name    *string      `json:"name,omitempty"`
+	Notes   *string      `json:"notes,omitempty"`
+	Disable bool         `json:"disable"`
+	Signals []SignalType `json:"signals"`
+	Details string       `json:"details"`
+}
+
+func (RenameAttributeAction) IsAction()              {}
+func (this RenameAttributeAction) GetID() string     { return this.ID }
+func (this RenameAttributeAction) GetType() string   { return this.Type }
+func (this RenameAttributeAction) GetName() *string  { return this.Name }
+func (this RenameAttributeAction) GetNotes() *string { return this.Notes }
+func (this RenameAttributeAction) GetDisable() bool  { return this.Disable }
+func (this RenameAttributeAction) GetSignals() []SignalType {
+	if this.Signals == nil {
+		return nil
+	}
+	interfaceSlice := make([]SignalType, 0, len(this.Signals))
+	for _, concrete := range this.Signals {
+		interfaceSlice = append(interfaceSlice, concrete)
+	}
+	return interfaceSlice
+}
+
 type SourceContainerRuntimeDetails struct {
 	ContainerName string `json:"containerName"`
 	Language      string `json:"language"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index c566883dd..b7d94ef16 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -316,6 +316,16 @@ type ProbabilisticSamplerAction implements Action {
   details: String!
 }
 
+type RenameAttributeAction implements Action {
+  id: ID!
+  type: String!
+  name: String
+  notes: String
+  disable: Boolean!
+  signals: [SignalType!]!
+  details: String!
+}
+
 input ActionInput {
   type: String!
   name: String
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 8a5ad1696..361ba024e 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -569,6 +569,8 @@ func (r *mutationResolver) CreateAction(ctx context.Context, action model.Action
 		return actionservices.CreateLatencySampler(ctx, action)
 	case actionservices.ActionTypeProbabilisticSampler:
 		return actionservices.CreateProbabilisticSampler(ctx, action)
+	case actionservices.ActionTypeRenameAttribute:
+		return actionservices.CreateRenameAttribute(ctx, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
@@ -589,6 +591,8 @@ func (r *mutationResolver) UpdateAction(ctx context.Context, id string, action m
 		return actionservices.UpdateLatencySampler(ctx, id, action)
 	case actionservices.ActionTypeProbabilisticSampler:
 		return actionservices.UpdateProbabilisticSampler(ctx, id, action)
+	case actionservices.ActionTypeRenameAttribute:
+		return actionservices.UpdateRenameAttribute(ctx, id, action)
 	default:
 		return nil, fmt.Errorf("unsupported action type: %s", action.Type)
 	}
@@ -628,6 +632,11 @@ func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionTy
 		if err != nil {
 			return false, fmt.Errorf("failed to delete ProbabilisticSampler: %v", err)
 		}
+	case actionservices.ActionTypeRenameAttribute:
+		err := actionservices.DeleteRenameAttribute(ctx, id)
+		if err != nil {
+			return false, fmt.Errorf("failed to delete RenameAttribute: %v", err)
+		}
 	default:
 		return false, fmt.Errorf("unsupported action type: %s", actionType)
 	}
diff --git a/frontend/services/actions/constants.go b/frontend/services/actions/constants.go
index fc8a7ef90..aed6dc0fa 100644
--- a/frontend/services/actions/constants.go
+++ b/frontend/services/actions/constants.go
@@ -3,6 +3,7 @@ package services
 const (
 	ActionTypeAddClusterInfo       = "AddClusterInfo"
 	ActionTypeDeleteAttribute      = "DeleteAttribute"
+	ActionTypeRenameAttribute      = "RenameAttribute"
 	ActionTypePiiMasking           = "PiiMasking"
 	ActionTypeErrorSampler         = "ErrorSampler"
 	ActionTypeLatencySampler       = "LatencySampler"
diff --git a/frontend/services/actions/renameattribute.go b/frontend/services/actions/renameattribute.go
new file mode 100644
index 000000000..61a3740ab
--- /dev/null
+++ b/frontend/services/actions/renameattribute.go
@@ -0,0 +1,138 @@
+package services
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/actions/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/frontend/services"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type RenameAttributeDetails struct {
+	Renames map[string]string `json:"renames"`
+}
+
+// CreateRenameAttribute creates a new RenameAttribute action in Kubernetes
+func CreateRenameAttribute(ctx context.Context, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	var details RenameAttributeDetails
+	err := json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for RenameAttribute: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	renameAttributeAction := &v1alpha1.RenameAttribute{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "ra-",
+		},
+		Spec: v1alpha1.RenameAttributeSpec{
+			ActionName: services.DerefString(action.Name),
+			Notes:      services.DerefString(action.Notes),
+			Disabled:   action.Disable,
+			Signals:    signals,
+			Renames:    details.Renames,
+		},
+	}
+
+	generatedAction, err := kube.DefaultClient.ActionsClient.RenameAttributes(odigosns).Create(ctx, renameAttributeAction, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to create RenameAttribute: %v", err)
+	}
+
+	// Convert Renames to JSON string for response details
+	detailsJSON, err := json.Marshal(details.Renames)
+	if err != nil {
+		return nil, fmt.Errorf("failed to marshal renames: %v", err)
+	}
+	responseDetails := string(detailsJSON)
+
+	response := &model.RenameAttributeAction{
+		ID:      generatedAction.Name,
+		Type:    ActionTypeRenameAttribute,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: responseDetails,
+	}
+
+	return response, nil
+}
+
+// UpdateRenameAttribute updates an existing RenameAttribute action in Kubernetes
+func UpdateRenameAttribute(ctx context.Context, id string, action model.ActionInput) (model.Action, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	existingAction, err := kube.DefaultClient.ActionsClient.RenameAttributes(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to fetch RenameAttribute: %v", err)
+	}
+
+	var details RenameAttributeDetails
+	err = json.Unmarshal([]byte(action.Details), &details)
+	if err != nil {
+		return nil, fmt.Errorf("invalid details for RenameAttribute: %v", err)
+	}
+
+	signals, err := services.ConvertSignals(action.Signals)
+	if err != nil {
+		return nil, fmt.Errorf("failed to convert signals: %v", err)
+	}
+
+	// Update the existing action with new values
+	existingAction.Spec.ActionName = services.DerefString(action.Name)
+	existingAction.Spec.Notes = services.DerefString(action.Notes)
+	existingAction.Spec.Disabled = action.Disable
+	existingAction.Spec.Signals = signals
+	existingAction.Spec.Renames = details.Renames
+
+	updatedAction, err := kube.DefaultClient.ActionsClient.RenameAttributes(odigosns).Update(ctx, existingAction, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("failed to update RenameAttribute: %v", err)
+	}
+
+	// Convert Renames to JSON string for response details
+	detailsJSON, err := json.Marshal(details.Renames)
+	if err != nil {
+		return nil, fmt.Errorf("failed to marshal renames: %v", err)
+	}
+	responseDetails := string(detailsJSON)
+
+	response := &model.RenameAttributeAction{
+		ID:      updatedAction.Name,
+		Type:    ActionTypeRenameAttribute,
+		Name:    action.Name,
+		Notes:   action.Notes,
+		Disable: action.Disable,
+		Signals: action.Signals,
+		Details: responseDetails,
+	}
+
+	return response, nil
+}
+
+func DeleteRenameAttribute(ctx context.Context, id string) error {
+	odigosns := consts.DefaultOdigosNamespace
+
+	err := kube.DefaultClient.ActionsClient.RenameAttributes(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			return fmt.Errorf("RenameAttribute action with ID %s not found", id)
+		}
+		return fmt.Errorf("failed to delete RenameAttribute action: %v", err)
+	}
+
+	return nil
+}

From 2d4b1bb14d6bc33e9e71f1d8f3b941982767baac Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 27 Oct 2024 17:44:55 +0200
Subject: [PATCH 311/374] [GEN-1517]: actions add via gql (#1635)

Co-authored-by: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
---
 frontend/webapp/.eslintrc.json                |   9 +-
 frontend/webapp/app/layout.tsx                |  12 +-
 .../notification/notification-manager.tsx     |  18 +-
 .../custom-fields/error-sampler.tsx           |  43 +++++
 .../custom-fields/index.tsx                   |  46 +++--
 .../custom-fields/pii-masking.tsx             |  49 +++++-
 .../custom-fields/probabilistic-sampler.tsx   |  39 +++++
 .../main/actions/choose-action-body/index.tsx |   6 +-
 .../choose-action-modal/action-options.ts     |  18 +-
 .../actions/choose-action-modal/index.tsx     |  79 +++++----
 frontend/webapp/graphql/mutations/action.ts   |   9 +
 frontend/webapp/hooks/actions/index.ts        |   5 +-
 .../webapp/hooks/actions/useActionFormData.ts |  43 +++--
 .../webapp/hooks/actions/useCreateAction.ts   |  30 ++++
 .../monitoring-checkboxes/index.tsx           |  80 ++++-----
 .../nodes-data-flow/builder.ts                | 162 ++++++------------
 frontend/webapp/types/actions.ts              |  11 ++
 17 files changed, 400 insertions(+), 259 deletions(-)
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
 create mode 100644 frontend/webapp/graphql/mutations/action.ts
 create mode 100644 frontend/webapp/hooks/actions/useCreateAction.ts

diff --git a/frontend/webapp/.eslintrc.json b/frontend/webapp/.eslintrc.json
index 2e1cbf9e1..437e574eb 100644
--- a/frontend/webapp/.eslintrc.json
+++ b/frontend/webapp/.eslintrc.json
@@ -2,6 +2,13 @@
   "extends": "next/core-web-vitals",
   "rules": {
     "semi": ["error", "always"],
-    "quotes": ["error", "single", { "avoidEscape": true }]
+    "quotes": [
+      "error",
+      "single",
+      {
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
+    ]
   }
 }
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index dfee65de7..bb8b58cab 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -8,7 +8,7 @@ import { ThemeProvider } from 'styled-components';
 import { NotificationManager } from '@/components';
 import ReduxProvider from '@/store/redux-provider';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { ThemeProviderWrapper } from '@keyval-dev/design-system';
+// import { ThemeProviderWrapper } from '@keyval-dev/design-system';
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -18,11 +18,7 @@ const LAYOUT_STYLE: React.CSSProperties = {
   height: '100vh',
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -35,7 +31,7 @@ export default function RootLayout({
   useSSE();
 
   return (
-    <html lang="en">
+    <html lang='en'>
       <ReduxProvider>
         <ApolloWrapper>
           <QueryClientProvider client={queryClient}>
@@ -43,7 +39,7 @@ export default function RootLayout({
               {/* <ThemeProviderWrapper> */}
               <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
                 {children}
-                {/* <NotificationManager /> */}
+                <NotificationManager />
               </body>
               {/* </ThemeProviderWrapper> */}
             </ThemeProvider>
diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx
index 845928853..b091ea56f 100644
--- a/frontend/webapp/components/notification/notification-manager.tsx
+++ b/frontend/webapp/components/notification/notification-manager.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-
-import Notification from './notification';
+// import Notification from './notification';
 import styled from 'styled-components';
 import { RootState } from '@/store';
 
@@ -16,17 +15,20 @@ const NotificationsWrapper = styled.div`
 `;
 
 export const NotificationManager: React.FC = () => {
-  const notifications = useSelector(
-    (state: RootState) => state.notification.notifications
-  );
+  const notifications = useSelector((state: RootState) => state.notification.notifications);
+
+  // temporary - until we fix the "theme" error on import from "design.system"
+  useEffect(() => {
+    if (notifications.length) alert(notifications[notifications.length - 1].message);
+  }, [notifications.length]);
 
   return (
     <NotificationsWrapper>
-      {notifications
+      {/* {notifications
         .filter((notification) => notification.isNew)
         .map((notification) => (
           <Notification key={notification.id} {...notification} />
-        ))}
+        ))} */}
     </NotificationsWrapper>
   );
 };
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
new file mode 100644
index 000000000..4c0b0d876
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { Input } from '@/reuseable-components';
+import { FieldTitle, FieldWrapper } from './styled';
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  fallback_sampling_ratio: number;
+};
+
+const MIN = 0,
+  MAX = 100;
+
+const ErrorSampler: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { fallback_sampling_ratio: 0 }).fallback_sampling_ratio, [value]);
+
+  const handleChange = (val: string) => {
+    let num = Number(val);
+
+    if (Number.isNaN(num) || num < MIN || num > MAX) {
+      num = MIN;
+    }
+
+    const payload: Parsed = {
+      fallback_sampling_ratio: num,
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Fallback sampling ratio</FieldTitle>
+      <Input type='number' min={MIN} max={MAX} value={mappedValue} onChange={({ target: { value: v } }) => handleChange(v)} />
+    </FieldWrapper>
+  );
+};
+
+export default ErrorSampler;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
index ccd1a04ff..213d04b6a 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
@@ -1,8 +1,11 @@
+import React from 'react';
 import { ActionsType } from '@/types';
 import AddClusterInfo from './add-cluster-info';
 import DeleteAttributes from './delete-attributes';
 import RenameAttributes from './rename-attributes';
 import PiiMasking from './pii-masking';
+import ErrorSampler from './error-sampler';
+import ProbabilisticSampler from './probabilistic-sampler';
 
 interface ActionCustomFieldsProps {
   actionType?: ActionsType;
@@ -10,36 +13,29 @@ interface ActionCustomFieldsProps {
   setValue: (value: string) => void;
 }
 
-const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
-  switch (actionType) {
-    case ActionsType.ADD_CLUSTER_INFO: {
-      return <AddClusterInfo value={value} setValue={setValue} />;
-    }
-
-    case ActionsType.DELETE_ATTRIBUTES: {
-      return <DeleteAttributes value={value} setValue={setValue} />;
-    }
-
-    case ActionsType.RENAME_ATTRIBUTES: {
-      return <RenameAttributes value={value} setValue={setValue} />;
-    }
+type ComponentProps = {
+  value: string;
+  setValue: (value: string) => void;
+};
 
-    case ActionsType.PII_MASKING: {
-      return <PiiMasking value={value} setValue={setValue} />;
-    }
+type ComponentType = React.FC<ComponentProps> | null;
 
-    case ActionsType.ERROR_SAMPLER:
-      return null;
+const componentsMap: Record<ActionsType, ComponentType> = {
+  [ActionsType.ADD_CLUSTER_INFO]: AddClusterInfo,
+  [ActionsType.DELETE_ATTRIBUTES]: DeleteAttributes,
+  [ActionsType.RENAME_ATTRIBUTES]: RenameAttributes,
+  [ActionsType.PII_MASKING]: PiiMasking,
+  [ActionsType.ERROR_SAMPLER]: ErrorSampler,
+  [ActionsType.PROBABILISTIC_SAMPLER]: ProbabilisticSampler,
+  [ActionsType.LATENCY_SAMPLER]: null,
+};
 
-    case ActionsType.PROBABILISTIC_SAMPLER:
-      return null;
+const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
+  if (!actionType) return null;
 
-    case ActionsType.LATENCY_SAMPLER:
-      return null;
+  const Component = componentsMap[actionType];
 
-    default:
-      return null;
-  }
+  return Component ? <Component value={value} setValue={setValue} /> : null;
 };
 
 export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
index 21cde2910..fe02e3f08 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import styled from 'styled-components';
 import { safeJsonParse } from '@/utils';
-import { InputList } from '@/reuseable-components';
+import { Checkbox } from '@/reuseable-components';
 import { FieldTitle, FieldWrapper } from './styled';
+import React, { useEffect, useMemo, useState } from 'react';
 
 type Props = {
   value: string;
@@ -12,21 +13,61 @@ type Parsed = {
   piiCategories: string[];
 };
 
+const ListContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+`;
+
+const strictPicklist = [
+  {
+    id: 'CREDIT_CARD',
+    label: 'Credit Card',
+  },
+];
+
 const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
   const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { piiCategories: [] }).piiCategories, [value]);
+  const [isLastSelection, setIsLastSelection] = useState(mappedValue.length === 1);
+
+  useEffect(() => {
+    if (!mappedValue.length) {
+      const payload: Parsed = {
+        piiCategories: strictPicklist.map(({ id }) => id),
+      };
+
+      setValue(JSON.stringify(payload));
+      setIsLastSelection(payload.piiCategories.length === 1);
+    }
+    // eslint-disable-next-line
+  }, []);
+
+  const handleChange = (id: string, isAdd: boolean) => {
+    const arr = isAdd ? [...mappedValue, id] : mappedValue.filter((str) => str !== id);
 
-  const handleChange = (arr: string[]) => {
     const payload: Parsed = {
       piiCategories: arr,
     };
 
     setValue(JSON.stringify(payload));
+    setIsLastSelection(arr.length === 1);
   };
 
   return (
     <FieldWrapper>
       <FieldTitle>Attributes to mask</FieldTitle>
-      <InputList value={mappedValue} onChange={handleChange} />
+
+      <ListContainer>
+        {strictPicklist.map(({ id, label }) => (
+          <Checkbox
+            key={id}
+            title={label}
+            disabled={isLastSelection && mappedValue.includes(id)}
+            initialValue={mappedValue.includes(id)}
+            onChange={(bool) => handleChange(id, bool)}
+          />
+        ))}
+      </ListContainer>
     </FieldWrapper>
   );
 };
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
new file mode 100644
index 000000000..fe7f69db7
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { Input } from '@/reuseable-components';
+import { FieldTitle, FieldWrapper } from './styled';
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = {
+  sampling_percentage: string;
+};
+
+const MIN = 0,
+  MAX = 100;
+
+const ProbabilisticSampler: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { sampling_percentage: '0' }).sampling_percentage, [value]);
+
+  const handleChange = (val: string) => {
+    const num = Math.max(MIN, Math.min(Number(val), MAX)) || MIN;
+
+    const payload: Parsed = {
+      sampling_percentage: String(num),
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <FieldTitle>Sampling percentage</FieldTitle>
+      <Input type='number' min={MIN} max={MAX} value={mappedValue} onChange={({ target: { value: v } }) => handleChange(v)} />
+    </FieldWrapper>
+  );
+};
+
+export default ProbabilisticSampler;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 6190373e3..1f95e57d8 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+import { type ActionInput } from '@/types';
 import ActionCustomFields from './custom-fields';
-import { ActionFormData } from '@/hooks/actions/useActionFormData';
 import { type ActionOption } from '../choose-action-modal/action-options';
 import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
 import { MonitoringCheckboxes } from '@/reuseable-components/monitoring-checkboxes';
@@ -23,8 +23,8 @@ const FieldTitle = styled(Text)`
 
 interface ChooseActionContentProps {
   action: ActionOption;
-  formData: ActionFormData;
-  handleFormChange: (key: keyof ActionFormData, val: any) => void;
+  formData: ActionInput;
+  handleFormChange: (key: keyof ActionInput, val: any) => void;
 }
 
 const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData, handleFormChange }) => {
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index 8b9f31f7b..1fb1b3143 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,5 +1,5 @@
 import { ActionsType } from '@/types';
-import { SignalLowercase } from '@/utils';
+import { SignalUppercase } from '@/utils';
 
 export type ActionOption = {
   id: string;
@@ -10,7 +10,7 @@ export type ActionOption = {
   docsDescription?: string;
   icon?: string;
   items?: ActionOption[];
-  allowedSignals?: SignalLowercase[];
+  allowedSignals?: SignalUppercase[];
 };
 
 export const ACTION_OPTIONS: ActionOption[] = [
@@ -23,7 +23,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
     docsDescription:
       'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
-    allowedSignals: ['traces', 'metrics', 'logs'],
+    allowedSignals: ['TRACES', 'METRICS', 'LOGS'],
   },
   {
     id: 'delete_attribute',
@@ -33,7 +33,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     icon: '/icons/actions/deleteattribute.svg',
     docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
     docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
-    allowedSignals: ['traces', 'metrics', 'logs'],
+    allowedSignals: ['TRACES', 'METRICS', 'LOGS'],
   },
   {
     id: 'rename_attribute',
@@ -44,7 +44,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
     docsDescription:
       'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
-    allowedSignals: ['traces', 'metrics', 'logs'],
+    allowedSignals: ['TRACES', 'METRICS', 'LOGS'],
   },
   {
     id: 'pii-masking',
@@ -54,7 +54,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     icon: '/icons/actions/piimasking.svg',
     docsEndpoint: '/pipeline/actions/attributes/piimasking',
     docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
-    allowedSignals: ['traces'],
+    allowedSignals: ['TRACES'],
   },
   {
     id: 'sampler',
@@ -68,7 +68,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         type: ActionsType.ERROR_SAMPLER,
         docsEndpoint: '/pipeline/actions/sampling/errorsampler',
         docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
-        allowedSignals: ['traces'],
+        allowedSignals: ['TRACES'],
       },
       {
         id: 'probabilistic-sampler',
@@ -78,7 +78,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
         docsDescription:
           'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
-        allowedSignals: ['traces'],
+        allowedSignals: ['TRACES'],
       },
       {
         id: 'latency-action',
@@ -88,7 +88,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         docsEndpoint: '/pipeline/actions/sampling/latencysampler',
         docsDescription:
           'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
-        allowedSignals: ['traces'],
+        allowedSignals: ['TRACES'],
       },
     ],
   },
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 65cca01e8..4f9b16826 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import React, { useRef, useState } from 'react';
-import { useActionFormData } from '@/hooks/actions';
+import React, { useMemo, useState } from 'react';
 import { ChooseActionBody } from '../choose-action-body';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
-import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, Option } from '@/reuseable-components';
+import { useActionFormData, useCreateAction } from '@/hooks/actions';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, FadeLoader } from '@/reuseable-components';
 
 const DefineActionContainer = styled.section`
   height: 640px;
@@ -28,50 +28,60 @@ const SubTitle = styled(Text)`
   line-height: 150%;
 `;
 
+const Center = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
 interface AddActionModalProps {
   isModalOpen: boolean;
   handleCloseModal: () => void;
 }
 
-interface ModalActionComponentProps {
-  onNext: () => void;
-}
-
-const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(({ onNext }) => {
-  const buttons = [
-    {
-      label: 'DONE',
-      onClick: onNext,
-      variant: 'primary' as const,
-    },
-  ];
-
-  return <NavigationButtons buttons={buttons} />;
-});
-
 export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
-  const submitRef = useRef<(() => void) | null>(null);
+  const { formData, handleFormChange, resetFormData, validateForm } = useActionFormData();
+  const { createAction, loading } = useCreateAction({ onSuccess: handleClose });
   const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
-  const { formData, handleFormChange, resetFormData } = useActionFormData();
 
-  const handleNext = () => {
-    if (submitRef.current) {
-      handleCloseModal();
-    }
+  const isFormOk = useMemo(() => !!selectedItem && validateForm(), [selectedItem, formData]);
+
+  const handleSubmit = async () => {
+    createAction(formData);
   };
 
-  const handleClose = () => {
-    handleCloseModal();
+  function handleClose() {
+    resetFormData();
     setSelectedItem(null);
-  };
+    handleCloseModal();
+  }
 
-  const handleSelect = (item: Option) => {
+  const handleSelect = (item: ActionOption) => {
     resetFormData();
+    handleFormChange('type', item.type);
     setSelectedItem(item);
   };
 
   return (
-    <Modal isOpen={isModalOpen} actionComponent={<ModalActionComponent onNext={handleNext} />} header={{ title: 'Add Action' }} onClose={handleClose}>
+    <Modal
+      isOpen={isModalOpen}
+      onClose={handleClose}
+      header={{ title: 'Add Action' }}
+      actionComponent={
+        <NavigationButtons
+          buttons={[
+            {
+              variant: 'primary',
+              label: 'DONE',
+              onClick: handleSubmit,
+              disabled: !isFormOk || loading,
+            },
+          ]}
+        />
+      }
+    >
       <DefineActionContainer>
         <WidthConstraint>
           <Text size={20}>{'Define Action'}</Text>
@@ -87,7 +97,14 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
         {!!selectedItem?.type ? (
           <WidthConstraint>
             <Divider margin='16px 0' />
-            <ChooseActionBody action={selectedItem} formData={formData} handleFormChange={handleFormChange} />
+
+            {loading ? (
+              <Center>
+                <FadeLoader cssOverride={{ scale: 2 }} />
+              </Center>
+            ) : (
+              <ChooseActionBody action={selectedItem} formData={formData} handleFormChange={handleFormChange} />
+            )}
           </WidthConstraint>
         ) : null}
       </DefineActionContainer>
diff --git a/frontend/webapp/graphql/mutations/action.ts b/frontend/webapp/graphql/mutations/action.ts
new file mode 100644
index 000000000..aee5f41e3
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/action.ts
@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_ACTION = gql`
+  mutation CreateAction($action: ActionInput!) {
+    createAction(action: $action) {
+      id
+    }
+  }
+`;
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 373528190..ad92ad62b 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,4 +1,5 @@
-export * from './useActionState';
+export * from './useActionFormData';
 export * from './useActions';
+export * from './useActionState';
+export * from './useCreateAction';
 export * from './useGetActions';
-export * from './useActionFormData';
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index ea0f083f0..ef4b525d7 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,20 +1,11 @@
 import { useState } from 'react';
-import { SignalUppercase } from '@/utils';
-
-export type ActionFormData = {
-  type: string;
-  name: string;
-  notes: string;
-  disable: boolean;
-  signals: SignalUppercase[];
-  details: string;
-};
+import { ActionInput } from '@/types';
 
-const INITIAL: ActionFormData = {
+const INITIAL: ActionInput = {
   type: '',
   name: '',
   notes: '',
-  disable: true,
+  disable: false,
   signals: [],
   details: '',
 };
@@ -22,10 +13,6 @@ const INITIAL: ActionFormData = {
 export function useActionFormData() {
   const [formData, setFormData] = useState({ ...INITIAL });
 
-  const resetFormData = () => {
-    setFormData({ ...INITIAL });
-  };
-
   const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
     setFormData((prev) => ({
       ...prev,
@@ -33,9 +20,33 @@ export function useActionFormData() {
     }));
   };
 
+  const resetFormData = () => {
+    setFormData({ ...INITIAL });
+  };
+
+  const validateForm = () => {
+    let ok = true;
+
+    Object.entries(formData).forEach(([k, v]) => {
+      switch (k) {
+        case 'type':
+        case 'signals':
+        case 'details':
+          if (Array.isArray(v) ? !v.length : !v) ok = false;
+          break;
+
+        default:
+          break;
+      }
+    });
+
+    return ok;
+  };
+
   return {
     formData,
     handleFormChange,
     resetFormData,
+    validateForm,
   };
 }
diff --git a/frontend/webapp/hooks/actions/useCreateAction.ts b/frontend/webapp/hooks/actions/useCreateAction.ts
new file mode 100644
index 000000000..f8449da78
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useCreateAction.ts
@@ -0,0 +1,30 @@
+import { useNotify } from '../useNotify';
+import type { ActionInput } from '@/types';
+import { useMutation } from '@apollo/client';
+import { CREATE_ACTION } from '@/graphql/mutations/action';
+import { useComputePlatform } from '../compute-platform';
+
+export const useCreateAction = ({ onSuccess }: { onSuccess?: () => void }) => {
+  const [createAction, { loading }] = useMutation(CREATE_ACTION, {
+    onError: (error) =>
+      notify({
+        message: error.message,
+        title: 'Create Action Error',
+        type: 'error',
+        target: 'notification',
+        crdType: 'notification',
+      }),
+    onCompleted: () => {
+      refetch();
+      onSuccess && onSuccess();
+    },
+  });
+
+  const { refetch } = useComputePlatform();
+  const notify = useNotify();
+
+  return {
+    createAction: (action: ActionInput) => createAction({ variables: { action } }),
+    loading,
+  };
+};
diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
index 3b4515955..84d3188aa 100644
--- a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
+++ b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
@@ -6,8 +6,8 @@ import { MONITORING_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
 
 interface MonitoringCheckboxesProps {
   isVertical?: boolean;
-  allowedSignals?: (SignalUppercase | SignalLowercase)[];
-  selectedSignals: (SignalUppercase | SignalLowercase)[];
+  allowedSignals?: SignalUppercase[];
+  selectedSignals: SignalUppercase[];
   setSelectedSignals: (value: SignalUppercase[]) => void;
 }
 
@@ -22,45 +22,38 @@ const TextWrapper = styled.div`
 `;
 
 const monitors = MONITORING_OPTIONS;
-const initialStatuses: Record<SignalLowercase, boolean> = {
-  logs: false,
-  metrics: false,
-  traces: false,
+
+const isAllowed = (type: SignalLowercase, allowedSignals: MonitoringCheckboxesProps['allowedSignals']) => {
+  return !allowedSignals?.length || !!allowedSignals?.find((str) => str === type.toUpperCase());
+};
+
+const isSelected = (type: SignalLowercase, selectedSignals: MonitoringCheckboxesProps['selectedSignals']) => {
+  return !!selectedSignals?.find((str) => str === type.toUpperCase());
 };
 
 const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical, allowedSignals, selectedSignals, setSelectedSignals }) => {
-  const [signalStatuses, setSignalStatuses] = useState({ ...initialStatuses });
+  const [isLastSelection, setIsLastSelection] = useState(false);
 
   useEffect(() => {
-    const payload = { ...initialStatuses };
+    const payload: SignalUppercase[] = [];
 
-    selectedSignals.forEach((str) => {
-      payload[str.toLowerCase()] = true;
+    monitors.forEach(({ type }) => {
+      if (isAllowed(type, allowedSignals)) {
+        payload.push(type.toUpperCase() as SignalUppercase);
+      }
     });
 
-    if (JSON.stringify(payload) !== JSON.stringify(signalStatuses)) {
-      setSignalStatuses(payload);
-    }
-  }, [selectedSignals]);
-
-  const handleChange = (key: keyof typeof signalStatuses, value: boolean) => {
-    const selected: SignalUppercase[] = [];
-
-    setSignalStatuses((prev) => {
-      const payload = { ...prev, [key]: value };
+    setSelectedSignals(payload);
+    setIsLastSelection(payload.length === 1);
+    // eslint-disable-next-line
+  }, [allowedSignals]);
 
-      Object.entries(payload).forEach(([sig, bool]) => {
-        if (bool) selected.push(sig.toUpperCase() as SignalUppercase);
-      });
-
-      return payload;
-    });
-
-    setSelectedSignals(selected);
-  };
+  const handleChange = (key: SignalLowercase, isAdd: boolean) => {
+    const keyUpper = key.toUpperCase() as SignalUppercase;
+    const payload = isAdd ? [...selectedSignals, keyUpper] : selectedSignals.filter((str) => str !== keyUpper);
 
-  const isDisabled = (item: (typeof MONITORING_OPTIONS)[0]) => {
-    return !!allowedSignals && !allowedSignals.find((str) => str.toLowerCase() === item.type);
+    setSelectedSignals(payload);
+    setIsLastSelection(payload.length === 1);
   };
 
   return (
@@ -70,15 +63,22 @@ const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical,
       </TextWrapper>
 
       <ListContainer isVertical={isVertical}>
-        {monitors.map((monitor) => (
-          <Checkbox
-            key={monitor.id}
-            title={monitor.title}
-            initialValue={signalStatuses[monitor.type]}
-            onChange={(value) => handleChange(monitor.type, value)}
-            disabled={isDisabled(monitor)}
-          />
-        ))}
+        {monitors.map((monitor) => {
+          const allowed = isAllowed(monitor.type, allowedSignals);
+          const selected = isSelected(monitor.type, selectedSignals);
+
+          if (!allowed) return null;
+
+          return (
+            <Checkbox
+              key={monitor.id}
+              title={monitor.title}
+              disabled={!allowed || (isLastSelection && selected)}
+              initialValue={selected}
+              onChange={(value) => handleChange(monitor.type, value)}
+            />
+          );
+        })}
       </ListContainer>
     </div>
   );
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 749030575..61db870e7 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,12 +1,7 @@
 import theme from '@/styles/theme';
 import { Node, Edge } from 'react-flow-renderer';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import {
-  ActionData,
-  ActionItem,
-  ActualDestination,
-  K8sActualSource,
-} from '@/types';
+import { ActionData, ActionItem, ActualDestination, K8sActualSource } from '@/types';
 
 // Constants
 const NODE_HEIGHT = 80;
@@ -16,13 +11,7 @@ const ACTION_ICON_PATH = '/icons/actions/';
 const HEADER_ICON_PATH = '/icons/overview/';
 
 // Helper to create a node
-const createNode = (
-  id: string,
-  type: string,
-  x: number,
-  y: number,
-  data: Record<string, any>
-): Node => ({
+const createNode = (id: string, type: string, x: number, y: number, data: Record<string, any>): Node => ({
   id,
   type,
   position: { x, y },
@@ -30,12 +19,7 @@ const createNode = (
 });
 
 // Helper to create an edge
-const createEdge = (
-  id: string,
-  source: string,
-  target: string,
-  animated = true
-): Edge => ({
+const createEdge = (id: string, source: string, target: string, animated = true): Edge => ({
   id,
   source,
   target,
@@ -45,9 +29,7 @@ const createEdge = (
 
 // Extract the monitors from exported signals
 const extractMonitors = (exportedSignals: Record<string, boolean>) =>
-  Object.keys(exportedSignals).filter(
-    (signal) => exportedSignals[signal] === true
-  );
+  Object.keys(exportedSignals).filter((signal) => exportedSignals[signal] === true);
 
 export const buildNodesAndEdges = ({
   sources,
@@ -75,26 +57,18 @@ export const buildNodesAndEdges = ({
       tagValue: sources.length,
     }),
     ...sources.map((source, index) =>
-      createNode(
-        `source-${index}`,
-        'base',
-        leftColumnX,
-        NODE_HEIGHT * (index + 1),
-        {
-          type: 'source',
-          title:
-            source.name +
-            (source.reportedName ? ` (${source.reportedName})` : ''),
-          subTitle: source.kind,
-          imageUri: getMainContainerLanguageLogo(source),
-          status: 'healthy',
-          id: {
-            kind: source.kind,
-            name: source.name,
-            namespace: source.namespace,
-          },
-        }
-      )
+      createNode(`source-${index}`, 'base', leftColumnX, NODE_HEIGHT * (index + 1), {
+        type: 'source',
+        title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
+        subTitle: source.kind,
+        imageUri: getMainContainerLanguageLogo(source),
+        status: 'healthy',
+        id: {
+          kind: source.kind,
+          name: source.name,
+          namespace: source.namespace,
+        },
+      })
     ),
   ];
 
@@ -106,21 +80,15 @@ export const buildNodesAndEdges = ({
       tagValue: destinations.length,
     }),
     ...destinations.map((destination, index) =>
-      createNode(
-        `destination-${index}`,
-        'base',
-        rightColumnX,
-        NODE_HEIGHT * (index + 1),
-        {
-          type: 'destination',
-          title: destination.name,
-          subTitle: destination.destinationType.displayName,
-          imageUri: destination.destinationType.imageUrl,
-          status: 'healthy',
-          monitors: extractMonitors(destination.exportedSignals),
-          id: destination.id,
-        }
-      )
+      createNode(`destination-${index}`, 'base', rightColumnX, NODE_HEIGHT * (index + 1), {
+        type: 'destination',
+        title: destination.name,
+        subTitle: destination.destinationType.displayName,
+        imageUri: destination.destinationType.imageUrl,
+        status: 'healthy',
+        monitors: extractMonitors(destination.exportedSignals),
+        id: destination.id,
+      })
     ),
   ];
 
@@ -132,45 +100,32 @@ export const buildNodesAndEdges = ({
       tagValue: actions.length,
     }),
     ...actions.map((action, index) => {
-      const actionSpec: ActionItem =
-        typeof action.spec === 'string'
-          ? JSON.parse(action.spec)
-          : (action.spec as ActionItem);
-
-      return createNode(
-        `action-${index}`,
-        'base',
-        centerColumnX,
-        NODE_HEIGHT * (index + 1),
-        {
-          type: 'action',
-          title: actionSpec.actionName,
-          subTitle: action.type,
-          imageUri: `${ACTION_ICON_PATH}${action.type.toLowerCase()}.svg`,
-          monitors: actionSpec.signals,
-          status: 'healthy',
-          id: action.id,
-        }
-      );
+      const actionSpec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
+      const typeLowerCased = action.type.toLowerCase();
+      const isSampler = typeLowerCased.indexOf('sampler') === action.type.length - 7;
+
+      return createNode(`action-${index}`, 'base', centerColumnX, NODE_HEIGHT * (index + 1), {
+        type: 'action',
+        title: actionSpec.actionName,
+        subTitle: action.type,
+        imageUri: `${ACTION_ICON_PATH}${isSampler ? 'sampler' : typeLowerCased}.svg`,
+        monitors: actionSpec.signals,
+        status: 'healthy',
+        id: action.id,
+      });
     }),
   ];
 
   if (actionsNode.length === 1) {
     actionsNode.push(
-      createNode(
-        `action-0`,
-        'addAction',
-        centerColumnX,
-        NODE_HEIGHT * (actions.length + 1),
-        {
-          type: 'addAction',
-          title: 'ADD ACTION',
-          subTitle: '',
-          imageUri: `${ACTION_ICON_PATH}add-action.svg`,
-          status: 'healthy',
-          onClick: () => console.log('Add Action'),
-        }
-      )
+      createNode(`action-0`, 'addAction', centerColumnX, NODE_HEIGHT * (actions.length + 1), {
+        type: 'addAction',
+        title: 'ADD ACTION',
+        subTitle: '',
+        imageUri: `${ACTION_ICON_PATH}add-action.svg`,
+        status: 'healthy',
+        onClick: () => console.log('Add Action'),
+      })
     );
   }
 
@@ -182,36 +137,19 @@ export const buildNodesAndEdges = ({
 
   // Connect sources to actions
   const sourceToActionEdges: Edge[] = sources.map((_, sourceIndex) => {
-    const actionIndex =
-      actionsNode.length === 2 ? 0 : sourceIndex % actions.length;
-    return createEdge(
-      `source-${sourceIndex}-to-action-${actionIndex}`,
-      `source-${sourceIndex}`,
-      `action-${actionIndex}`,
-      false
-    );
+    const actionIndex = actionsNode.length === 2 ? 0 : sourceIndex % actions.length;
+    return createEdge(`source-${sourceIndex}-to-action-${actionIndex}`, `source-${sourceIndex}`, `action-${actionIndex}`, false);
   });
   // Connect actions to destinations
   const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) => {
     return destinations.map((_, destinationIndex) =>
-      createEdge(
-        `action-${actionIndex}-to-destination-${destinationIndex}`,
-        `action-${actionIndex}`,
-        `destination-${destinationIndex}`
-      )
+      createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, `action-${actionIndex}`, `destination-${destinationIndex}`)
     );
   });
 
   if (actions.length === 0) {
     for (let i = 0; i < destinations.length; i++) {
-      actionToDestinationEdges.push(
-        createEdge(
-          `action-0-to-destination-${i}`,
-          `action-0`,
-          `destination-${i}`,
-          false
-        )
-      );
+      actionToDestinationEdges.push(createEdge(`action-0-to-destination-${i}`, `action-0`, `destination-${i}`, false));
     }
   }
 
diff --git a/frontend/webapp/types/actions.ts b/frontend/webapp/types/actions.ts
index 37ba58dbe..420d29b46 100644
--- a/frontend/webapp/types/actions.ts
+++ b/frontend/webapp/types/actions.ts
@@ -1,3 +1,5 @@
+import { type SignalUppercase } from '@/utils';
+
 export enum ActionsType {
   ADD_CLUSTER_INFO = 'AddClusterInfo',
   DELETE_ATTRIBUTES = 'DeleteAttribute',
@@ -52,3 +54,12 @@ export interface ActionState {
   disabled: boolean;
   type: string;
 }
+
+export type ActionInput = {
+  type: string;
+  name: string;
+  notes: string;
+  disable: boolean;
+  signals: SignalUppercase[];
+  details: string;
+};

From eff6d90c38e62c6415fd0bac51d1e2a455ddb4a2 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 28 Oct 2024 14:33:28 +0200
Subject: [PATCH 312/374] [GEN-1529]: latency sampler (#1644)

---
 .../custom-fields/add-cluster-info.tsx        |   8 +-
 .../custom-fields/delete-attributes.tsx       |   5 +-
 .../custom-fields/error-sampler.tsx           |   5 +-
 .../custom-fields/index.tsx                   |   3 +-
 .../custom-fields/latency-sampler.tsx         |  71 +++++++
 .../custom-fields/pii-masking.tsx             |   5 +-
 .../custom-fields/probabilistic-sampler.tsx   |   5 +-
 .../custom-fields/rename-attributes.tsx       |   7 +-
 .../custom-fields/styled.ts                   |   1 +
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../input-table/index.tsx                     | 188 ++++++++++++++++++
 .../reuseable-components/input/index.tsx      |  43 +---
 .../key-value-input-list/index.tsx            |   3 +-
 .../nodes-data-flow/builder.ts                |   2 +-
 frontend/webapp/types/actions.ts              |  51 ++++-
 15 files changed, 338 insertions(+), 60 deletions(-)
 create mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
 create mode 100644 frontend/webapp/reuseable-components/input-table/index.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
index 80003811f..b28cbf97d 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
@@ -2,18 +2,14 @@ import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
 import { FieldTitle, FieldWrapper } from './styled';
 import { KeyValueInputsList } from '@/reuseable-components';
+import type { AddClusterInfoSpec } from '@/types';
 
 type Props = {
   value: string;
   setValue: (value: string) => void;
 };
 
-type Parsed = {
-  clusterAttributes: {
-    attributeName: string;
-    attributeStringValue: string;
-  }[];
-};
+type Parsed = AddClusterInfoSpec;
 
 const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
   const mappedValue = useMemo(
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
index 3f267a0d6..e4ddf55e5 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
@@ -2,15 +2,14 @@ import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
 import { InputList } from '@/reuseable-components';
 import { FieldTitle, FieldWrapper } from './styled';
+import type { DeleteAttributesSpec } from '@/types';
 
 type Props = {
   value: string;
   setValue: (value: string) => void;
 };
 
-type Parsed = {
-  attributeNamesToDelete: string[];
-};
+type Parsed = DeleteAttributesSpec;
 
 const DeleteAttributes: React.FC<Props> = ({ value, setValue }) => {
   const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { attributeNamesToDelete: [] }).attributeNamesToDelete, [value]);
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
index 4c0b0d876..14f0fb6b1 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
@@ -2,15 +2,14 @@ import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
 import { Input } from '@/reuseable-components';
 import { FieldTitle, FieldWrapper } from './styled';
+import type { ErrorSamplerSpec } from '@/types';
 
 type Props = {
   value: string;
   setValue: (value: string) => void;
 };
 
-type Parsed = {
-  fallback_sampling_ratio: number;
-};
+type Parsed = ErrorSamplerSpec;
 
 const MIN = 0,
   MAX = 100;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
index 213d04b6a..0994033e7 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
@@ -6,6 +6,7 @@ import RenameAttributes from './rename-attributes';
 import PiiMasking from './pii-masking';
 import ErrorSampler from './error-sampler';
 import ProbabilisticSampler from './probabilistic-sampler';
+import LatencySampler from './latency-sampler';
 
 interface ActionCustomFieldsProps {
   actionType?: ActionsType;
@@ -27,7 +28,7 @@ const componentsMap: Record<ActionsType, ComponentType> = {
   [ActionsType.PII_MASKING]: PiiMasking,
   [ActionsType.ERROR_SAMPLER]: ErrorSampler,
   [ActionsType.PROBABILISTIC_SAMPLER]: ProbabilisticSampler,
-  [ActionsType.LATENCY_SAMPLER]: null,
+  [ActionsType.LATENCY_SAMPLER]: LatencySampler,
 };
 
 const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
new file mode 100644
index 000000000..0eddf2e95
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { safeJsonParse } from '@/utils';
+import { FieldWrapper } from './styled';
+import { InputTable } from '@/reuseable-components';
+import type { LatencySamplerSpec } from '@/types';
+
+type Props = {
+  value: string;
+  setValue: (value: string) => void;
+};
+
+type Parsed = LatencySamplerSpec;
+
+const LatencySampler: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(() => safeJsonParse<Parsed>(value, { endpoints_filters: [] }).endpoints_filters, [value]);
+
+  const handleChange = (arr: Parsed['endpoints_filters']) => {
+    const payload: Parsed = {
+      endpoints_filters: arr,
+    };
+
+    setValue(JSON.stringify(payload));
+  };
+
+  return (
+    <FieldWrapper>
+      <InputTable
+        columns={[
+          {
+            title: 'Service',
+            keyName: 'service_name',
+            placeholder: 'Choose service',
+            required: true,
+            tooltip:
+              'Service name: The rule applies to a specific service name. Only traces originating from this service’s root span will be considered.',
+          },
+          {
+            title: 'HTTP route',
+            keyName: 'http_route',
+            placeholder: 'e.g. /api/v1/users',
+            required: true,
+            tooltip:
+              'HTTP route: The specific HTTP route prefix to match for sampling. Only traces with routes beginning with this prefix will be considered. For instance, configuring /buy will also match /buy/product.',
+          },
+          {
+            title: 'Threshold',
+            keyName: 'minimum_latency_threshold',
+            placeholder: 'e.g. 1000',
+            required: true,
+            type: 'number',
+            tooltip:
+              'Minimum latency threshold (ms): Specifies the minimum latency in milliseconds; traces with latency below this threshold are ignored.',
+          },
+          {
+            title: 'Fallback',
+            keyName: 'fallback_sampling_ratio',
+            placeholder: 'e.g. 20',
+            required: true,
+            type: 'number',
+            tooltip:
+              'Fallback sampling ratio: Specifies the percentage of traces that meet the service/http_route filter but fall below the threshold that you still want to retain. For example, if a rule is set for service A and http_route B with a minimum latency threshold of 1 second, you might still want to keep some traces below this threshold. Setting the ratio to 20% ensures that 20% of these traces will be retained.',
+          },
+        ]}
+        value={mappedValue}
+        onChange={handleChange}
+      />
+    </FieldWrapper>
+  );
+};
+
+export default LatencySampler;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
index fe02e3f08..a2324f90a 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
@@ -3,15 +3,14 @@ import { safeJsonParse } from '@/utils';
 import { Checkbox } from '@/reuseable-components';
 import { FieldTitle, FieldWrapper } from './styled';
 import React, { useEffect, useMemo, useState } from 'react';
+import type { PiiMaskingSpec } from '@/types';
 
 type Props = {
   value: string;
   setValue: (value: string) => void;
 };
 
-type Parsed = {
-  piiCategories: string[];
-};
+type Parsed = PiiMaskingSpec;
 
 const ListContainer = styled.div`
   display: flex;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
index fe7f69db7..75ebb1e6b 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
@@ -2,15 +2,14 @@ import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
 import { Input } from '@/reuseable-components';
 import { FieldTitle, FieldWrapper } from './styled';
+import type { ProbabilisticSamplerSpec } from '@/types';
 
 type Props = {
   value: string;
   setValue: (value: string) => void;
 };
 
-type Parsed = {
-  sampling_percentage: string;
-};
+type Parsed = ProbabilisticSamplerSpec;
 
 const MIN = 0,
   MAX = 100;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
index bd8cc7bb1..aee984694 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
@@ -2,17 +2,14 @@ import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
 import { FieldTitle, FieldWrapper } from './styled';
 import { KeyValueInputsList } from '@/reuseable-components';
+import type { RenameAttributesSpec } from '@/types';
 
 type Props = {
   value: string;
   setValue: (value: string) => void;
 };
 
-type Parsed = {
-  renames: {
-    [oldKey: string]: string;
-  };
-};
+type Parsed = RenameAttributesSpec;
 
 const RenameAttributes: React.FC<Props> = ({ value, setValue }) => {
   const mappedValue = useMemo(
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
index 996df2e6e..37fc6bec9 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
@@ -3,6 +3,7 @@ import { Text } from '@/reuseable-components';
 
 export const FieldWrapper = styled.div`
   width: 100%;
+  max-width: 640px;
   margin: 8px 0;
 `;
 
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 4868acbc5..d1d7431a3 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -25,3 +25,4 @@ export * from './nodes-data-flow';
 export * from './tab-list';
 export * from './auto-complete-input';
 export * from './drawer';
+export * from './input-table';
diff --git a/frontend/webapp/reuseable-components/input-table/index.tsx b/frontend/webapp/reuseable-components/input-table/index.tsx
new file mode 100644
index 000000000..9c2f95209
--- /dev/null
+++ b/frontend/webapp/reuseable-components/input-table/index.tsx
@@ -0,0 +1,188 @@
+import Image from 'next/image';
+import React, { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { Input } from '../input';
+import { Button } from '../button';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+
+interface Props {
+  columns: {
+    title: string;
+    keyName: string;
+    type?: 'number';
+    placeholder?: string;
+    tooltip?: string;
+    required?: boolean;
+  }[];
+  initialValues?: Record<string, any>[];
+  value?: Record<string, any>[];
+  onChange?: (values: Record<string, any>[]) => void;
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const OptionalText = styled(Text)`
+  color: #7a7a7a;
+  opacity: 0.8;
+`;
+
+const DeleteButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+`;
+
+const AddButton = styled(Button)<{ disabled: boolean }>`
+  color: white;
+  background: transparent;
+  display: flex;
+  gap: 8px;
+  border: none;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  align-self: flex-start;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  transition: opacity 0.3s;
+`;
+
+const ButtonText = styled(Text)`
+  font-size: 14px;
+  font-weight: 500;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value = [], onChange }) => {
+  const [initialObject, setInitialObject] = useState({});
+  const [rows, setRows] = useState(value || initialValues);
+
+  useEffect(() => {
+    const init = {};
+    columns.forEach(({ keyName }) => (init[keyName] = ''));
+    setInitialObject(init);
+
+    if (!rows.length) setRows([{ ...init }]);
+  }, []);
+
+  const recordedPairs = useRef('');
+
+  useEffect(() => {
+    // Filter out rows where any values are empty
+    const validKeyValuePairs = rows.filter((row) => !Object.values(row).filter((val) => !val).length);
+    const stringified = JSON.stringify(validKeyValuePairs);
+
+    // Only trigger onChange if valid pairs have changed
+    if (recordedPairs.current !== stringified) {
+      recordedPairs.current = stringified;
+
+      if (onChange) onChange(validKeyValuePairs);
+    }
+  }, [rows, onChange]);
+
+  const handleAddRow = () => {
+    setRows((prev) => {
+      const payload = [...prev];
+      payload.push({ ...initialObject });
+      return payload;
+    });
+  };
+
+  const handleDeleteRow = (idx: number) => {
+    setRows((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleChange = (key: string, val: string | number, idx: number) => {
+    setRows((prev) => {
+      const payload = [...prev];
+      payload[idx][key] = val;
+      return payload;
+    });
+  };
+
+  // Check if any key or value field is empty
+  const isAddButtonDisabled = rows.some((row) => !!Object.values(row).filter((val) => !val).length);
+
+  // adjust cell-width based on the amount of inputs on-screen,
+  // the "0.4" is to consider the delete button
+  const maxWidth = `${Math.floor(640 / (columns.length + 0.4))}px`;
+
+  return (
+    <Container>
+      <table style={{ marginBottom: '12px' }}>
+        <thead>
+          <tr>
+            {columns.map(({ title, tooltip, required }) => (
+              <th key={`input-table-head-${title}`} style={{ maxWidth }}>
+                <HeaderWrapper>
+                  <Title>{title}</Title>
+                  {!required && <OptionalText>(optional)</OptionalText>}
+                  {tooltip && (
+                    <Tooltip text={tooltip || ''}>
+                      <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />
+                    </Tooltip>
+                  )}
+                </HeaderWrapper>
+              </th>
+            ))}
+
+            <th>{/* this is here because of delete button */}</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {rows.map((row, idx) => (
+            <tr key={`input-table-row-${idx}`} style={{ height: '50px' }}>
+              {columns.map(({ type, keyName, placeholder }) => (
+                <td key={`input-table-row-${idx}-${keyName}`} style={{ maxWidth, padding: '0 2px' }}>
+                  <Input
+                    type={type}
+                    value={row[keyName]}
+                    onChange={({ target: { value: val } }) => handleChange(keyName, type === 'number' ? Number(val) : val, idx)}
+                    placeholder={placeholder}
+                    style={{
+                      maxWidth,
+                      paddingLeft: '6px',
+                    }}
+                  />
+                </td>
+              ))}
+
+              <td>
+                <DeleteButton onClick={() => handleDeleteRow(idx)}>
+                  <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
+                </DeleteButton>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddRow}>
+        <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
+        <ButtonText>ADD ENDPOINT FILTER</ButtonText>
+      </AddButton>
+    </Container>
+  );
+};
+
+export default InputTable;
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 4e64e8151..407cd1235 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -62,13 +62,13 @@ const InputWrapper = styled.div<{
 `;
 
 const StyledInput = styled.input<{ hasIcon?: string }>`
+  padding-left: ${({ hasIcon }) => (hasIcon ? '0' : '16px')};
   flex: 1;
   border: none;
   outline: none;
   background: none;
   color: ${({ theme }) => theme.colors.text};
   font-size: 14px;
-  padding-left: ${({ hasIcon }) => (hasIcon ? '0' : '16px')};
   font-family: ${({ theme }) => theme.font_family.primary};
   font-weight: 300;
   &::placeholder {
@@ -83,6 +83,11 @@ const StyledInput = styled.input<{ hasIcon?: string }>`
     background-color: #555;
     cursor: not-allowed;
   }
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 `;
 
 const IconWrapper = styled.div`
@@ -137,21 +142,7 @@ const HeaderWrapper = styled.div`
 
 // Wrap Input with forwardRef to handle the ref prop
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      icon,
-      buttonLabel,
-      onButtonClick,
-      errorMessage,
-      title,
-      tooltip,
-      required,
-      initialValue,
-      onChange,
-      ...props
-    },
-    ref
-  ) => {
+  ({ icon, buttonLabel, onButtonClick, errorMessage, title, tooltip, required, initialValue, onChange, ...props }, ref) => {
     const [value, setValue] = useState<string>(initialValue || '');
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -167,32 +158,20 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           <HeaderWrapper>
             <Title>{title}</Title>
             {!required && (
-              <Text color="#7A7A7A" size={14} weight={300} opacity={0.8}>
+              <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
                 (optional)
               </Text>
             )}
             <Tooltip text={tooltip || ''}>
-              {tooltip && (
-                <Image
-                  src="/icons/common/info.svg"
-                  alt=""
-                  width={16}
-                  height={16}
-                  style={{ marginBottom: 4 }}
-                />
-              )}
+              {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />}
             </Tooltip>
           </HeaderWrapper>
         )}
 
-        <InputWrapper
-          isDisabled={props.disabled}
-          hasError={!!errorMessage}
-          isActive={!!props.autoFocus}
-        >
+        <InputWrapper isDisabled={props.disabled} hasError={!!errorMessage} isActive={!!props.autoFocus}>
           {icon && (
             <IconWrapper>
-              <Image src={icon} alt="" width={14} height={14} />
+              <Image src={icon} alt='' width={14} height={14} />
             </IconWrapper>
           )}
           <StyledInput
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index ec79435e2..784bd0b87 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -135,8 +135,9 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
           </HeaderWrapper>
         </Tooltip>
       )}
+
       {keyValuePairs.map((pair, index) => (
-        <Row key={index}>
+        <Row key={`key-value-pair-${title}-${index}`}>
           <Input value={pair.key} onChange={(e) => handleChange('key', e.target.value, index)} placeholder='Define attribute' />
           <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
           <Input value={pair.value} onChange={(e) => handleChange('value', e.target.value, index)} placeholder='Define value' />
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 61db870e7..df1ab89c9 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -102,7 +102,7 @@ export const buildNodesAndEdges = ({
     ...actions.map((action, index) => {
       const actionSpec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
       const typeLowerCased = action.type.toLowerCase();
-      const isSampler = typeLowerCased.indexOf('sampler') === action.type.length - 7;
+      const isSampler = typeLowerCased.includes('sampler');
 
       return createNode(`action-${index}`, 'base', centerColumnX, NODE_HEIGHT * (index + 1), {
         type: 'action',
diff --git a/frontend/webapp/types/actions.ts b/frontend/webapp/types/actions.ts
index 420d29b46..9cb9466cc 100644
--- a/frontend/webapp/types/actions.ts
+++ b/frontend/webapp/types/actions.ts
@@ -16,6 +16,44 @@ export enum ActionsSortType {
   TYPE = 'type',
 }
 
+export type AddClusterInfoSpec = {
+  clusterAttributes: {
+    attributeName: string;
+    attributeStringValue: string;
+  }[];
+};
+
+export type DeleteAttributesSpec = {
+  attributeNamesToDelete: string[];
+};
+
+export type RenameAttributesSpec = {
+  renames: {
+    [oldKey: string]: string;
+  };
+};
+
+export type PiiMaskingSpec = {
+  piiCategories: string[];
+};
+
+export type ErrorSamplerSpec = {
+  fallback_sampling_ratio: number;
+};
+
+export type ProbabilisticSamplerSpec = {
+  sampling_percentage: string;
+};
+
+export type LatencySamplerSpec = {
+  endpoints_filters: {
+    service_name: string;
+    http_route: string;
+    minimum_latency_threshold: number;
+    fallback_sampling_ratio: number;
+  }[];
+};
+
 export interface ActionItemCard {
   id: string;
   title: string;
@@ -29,8 +67,13 @@ export interface ActionItem {
   notes: string;
   signals: string[];
   disabled?: boolean;
-  type: string;
-  [key: string]: any;
+  clusterAttributes?: AddClusterInfoSpec['clusterAttributes'];
+  attributeNamesToDelete?: DeleteAttributesSpec['attributeNamesToDelete'];
+  renames?: RenameAttributesSpec['renames'];
+  piiCategories?: PiiMaskingSpec['piiCategories'];
+  fallback_sampling_ratio?: ErrorSamplerSpec['fallback_sampling_ratio'];
+  sampling_percentage?: ProbabilisticSamplerSpec['sampling_percentage'];
+  endpoints_filters?: LatencySamplerSpec['endpoints_filters'];
 }
 
 export interface ActionData {
@@ -39,6 +82,10 @@ export interface ActionData {
   spec: ActionItem | string;
 }
 
+export interface ActionDataParsed extends ActionData {
+  spec: ActionItem;
+}
+
 interface Monitor {
   id: string;
   label: string;

From 1ea39de9f640c128d707b20407c02b14d3eb4d07 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 28 Oct 2024 16:20:43 +0200
Subject: [PATCH 313/374] [GEN-1521]: update action - AddClusterInfo (#1646)

---
 .../common/configured-fields/index.tsx        |  37 ++-
 .../build-card-from-action-spec.ts            |  94 +++++++
 .../actions/action-drawer-container/index.tsx |  25 ++
 .../choose-action-modal/action-options.ts     |  12 +-
 .../actions/choose-action-modal/index.tsx     |   2 +-
 .../webapp/containers/main/actions/index.ts   |   2 +
 .../overview/overview-data-flow/index.tsx     |  16 +-
 .../main/overview/overview-drawer/index.tsx   | 237 +++++++++---------
 .../graphql/queries/compute-platform.ts       |   1 +
 .../webapp/hooks/actions/useGetActions.ts     |  12 +-
 .../destinations/useDestinationFormData.ts    |  65 ++---
 .../hooks/overview/useNodeDataFlowHandlers.ts |  59 +++--
 .../nodes-data-flow/builder.ts                |  10 +-
 frontend/webapp/store/useDrawerStore.tsx      |   4 +-
 .../webapp/utils/functions/get-action-icon.ts |  12 +
 frontend/webapp/utils/functions/index.tsx     |   1 +
 16 files changed, 356 insertions(+), 233 deletions(-)
 create mode 100644 frontend/webapp/containers/main/actions/action-drawer-container/build-card-from-action-spec.ts
 create mode 100644 frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
 create mode 100644 frontend/webapp/utils/functions/get-action-icon.ts

diff --git a/frontend/webapp/components/common/configured-fields/index.tsx b/frontend/webapp/components/common/configured-fields/index.tsx
index 591e1e550..c1fbcf01f 100644
--- a/frontend/webapp/components/common/configured-fields/index.tsx
+++ b/frontend/webapp/components/common/configured-fields/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import { Text } from '@/reuseable-components';
 
@@ -31,18 +31,16 @@ const ItemValue = styled(Text)`
   line-height: 18px;
 `;
 
-export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({
-  details,
-}) => {
-  const parseValue = (value: any) => {
+export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({ details }) => {
+  const parseValue = (value: string) => {
+    let str = '';
+
     try {
       const parsed = JSON.parse(value);
-      if (typeof parsed === 'string') {
-        return parsed;
-      }
 
+      // Handle arrays
       if (Array.isArray(parsed)) {
-        return parsed
+        str = parsed
           .map((item) => {
             if (typeof item === 'object' && item !== null) {
               return `${item.key}: ${item.value}`;
@@ -54,15 +52,28 @@ export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({
       }
 
       // Handle objects (non-array JSON objects)
-      if (typeof parsed === 'object' && parsed !== null) {
-        return Object.entries(parsed)
+      else if (typeof parsed === 'object' && parsed !== null) {
+        str = Object.entries(parsed)
           .map(([key, val]) => `${key}: ${val}`)
           .join(', ');
       }
+
+      // Should never reach this if it's a string (it will throw)
+      else {
+        str = value;
+      }
     } catch (error) {
-      return value;
+      str = value;
     }
-    return value;
+
+    const strSplitted = str.split('\n');
+
+    return strSplitted.map((str, idx) => (
+      <Fragment key={`str-br-${str}-${idx}`}>
+        {str}
+        {idx < strSplitted.length - 1 ? <br /> : null}
+      </Fragment>
+    ));
   };
 
   return (
diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/build-card-from-action-spec.ts b/frontend/webapp/containers/main/actions/action-drawer-container/build-card-from-action-spec.ts
new file mode 100644
index 000000000..a14628433
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/build-card-from-action-spec.ts
@@ -0,0 +1,94 @@
+import type { ActionDataParsed } from '@/types';
+
+const buildCardFromActionSpec = (action: ActionDataParsed) => {
+  const {
+    type,
+    spec: {
+      actionName,
+      notes,
+      signals,
+      disabled,
+
+      clusterAttributes,
+      attributeNamesToDelete,
+      renames,
+      piiCategories,
+      fallback_sampling_ratio,
+      sampling_percentage,
+      endpoints_filters,
+    },
+  } = action as ActionDataParsed;
+
+  const arr = [
+    { title: 'Type', value: type || 'N/A' },
+    { title: 'Enabled', value: String(!disabled) },
+    { title: 'Name', value: actionName || 'N/A' },
+    { title: 'Notes', value: notes || 'N/A' },
+    { title: 'Monitors', value: signals.map((str) => str.toLowerCase()).join(', ') },
+  ];
+
+  if (clusterAttributes) {
+    let str = '';
+    clusterAttributes.forEach(({ attributeName, attributeStringValue }, idx) => {
+      str += `${attributeName}: ${attributeStringValue}`;
+      if (idx < clusterAttributes.length - 1) str += '\n';
+    });
+
+    arr.push({ title: 'Attributes', value: str });
+  }
+
+  if (attributeNamesToDelete) {
+    let str = '';
+    attributeNamesToDelete.forEach((attributeName, idx) => {
+      str += attributeName;
+      if (idx < attributeNamesToDelete.length - 1) str += ', ';
+    });
+
+    arr.push({ title: 'Attributes', value: str });
+  }
+
+  if (renames) {
+    let str = '';
+    const entries = Object.entries(renames);
+    entries.forEach(([oldName, newName], idx) => {
+      str += `${oldName}: ${newName}`;
+      if (idx < entries.length - 1) str += ', ';
+    });
+
+    arr.push({ title: 'Attributes', value: str });
+  }
+
+  if (piiCategories) {
+    let str = '';
+    piiCategories.forEach((attributeName, idx) => {
+      str += attributeName;
+      if (idx < piiCategories.length - 1) str += ', ';
+    });
+
+    arr.push({ title: 'Attributes', value: str });
+  }
+
+  if (fallback_sampling_ratio) {
+    arr.push({ title: 'Sampling Ratio', value: String(fallback_sampling_ratio) });
+  }
+
+  if (sampling_percentage) {
+    arr.push({ title: 'Sampling Percentage', value: sampling_percentage });
+  }
+
+  if (endpoints_filters) {
+    endpoints_filters.forEach(({ service_name, http_route, minimum_latency_threshold, fallback_sampling_ratio }, idx) => {
+      let str = '';
+      str += `Service Name: ${service_name}\n`;
+      str += `HTTP Route: ${http_route}\n`;
+      str += `Min. Latency: ${minimum_latency_threshold}\n`;
+      str += `Sampling Ratio: ${fallback_sampling_ratio}`;
+
+      arr.push({ title: `Endpoint${endpoints_filters.length > 1 ? ` #${idx + 1}` : ''}`, value: str });
+    });
+  }
+
+  return arr;
+};
+
+export default buildCardFromActionSpec;
diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
new file mode 100644
index 000000000..f8c794091
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import { useDrawerStore } from '@/store';
+import { CardDetails } from '@/components';
+import type { ActionDataParsed } from '@/types';
+import buildCardFromActionSpec from './build-card-from-action-spec';
+
+interface Props {
+  isEditing: boolean;
+}
+
+const ActionDrawer: React.FC = ({ isEditing }: Props) => {
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+
+  const cardData = useMemo(() => {
+    if (!selectedItem) return [];
+
+    const arr = buildCardFromActionSpec(selectedItem.item as ActionDataParsed);
+
+    return arr;
+  }, [selectedItem]);
+
+  return <CardDetails data={cardData} />;
+};
+
+export { ActionDrawer };
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index 1fb1b3143..c2c16a9b8 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,5 +1,5 @@
 import { ActionsType } from '@/types';
-import { SignalUppercase } from '@/utils';
+import { getActionIcon, SignalUppercase } from '@/utils';
 
 export type ActionOption = {
   id: string;
@@ -19,7 +19,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     label: 'Add Cluster Info',
     description: 'Add static cluster-scoped attributes to your data.',
     type: ActionsType.ADD_CLUSTER_INFO,
-    icon: '/icons/actions/addclusterinfo.svg',
+    icon: getActionIcon(ActionsType.ADD_CLUSTER_INFO),
     docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
     docsDescription:
       'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
@@ -30,7 +30,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     label: 'Delete Attribute',
     description: 'Delete attributes from logs, metrics, and traces.',
     type: ActionsType.DELETE_ATTRIBUTES,
-    icon: '/icons/actions/deleteattribute.svg',
+    icon: getActionIcon(ActionsType.DELETE_ATTRIBUTES),
     docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
     docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
     allowedSignals: ['TRACES', 'METRICS', 'LOGS'],
@@ -40,7 +40,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     label: 'Rename Attribute',
     description: 'Rename attributes in logs, metrics, and traces.',
     type: ActionsType.RENAME_ATTRIBUTES,
-    icon: '/icons/actions/renameattribute.svg',
+    icon: getActionIcon(ActionsType.RENAME_ATTRIBUTES),
     docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
     docsDescription:
       'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
@@ -51,7 +51,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
     label: 'PII Masking',
     description: 'Mask PII data in your traces.',
     type: ActionsType.PII_MASKING,
-    icon: '/icons/actions/piimasking.svg',
+    icon: getActionIcon(ActionsType.PII_MASKING),
     docsEndpoint: '/pipeline/actions/attributes/piimasking',
     docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
     allowedSignals: ['TRACES'],
@@ -59,7 +59,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
   {
     id: 'sampler',
     label: 'Samplers',
-    icon: '/icons/actions/sampler.svg',
+    icon: getActionIcon('sampler'),
     items: [
       {
         id: 'error-sampler',
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 4f9b16826..1d7943245 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import React, { useMemo, useState } from 'react';
-import { ChooseActionBody } from '../choose-action-body';
+import { ChooseActionBody } from '../';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
 import { useActionFormData, useCreateAction } from '@/hooks/actions';
 import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, FadeLoader } from '@/reuseable-components';
diff --git a/frontend/webapp/containers/main/actions/index.ts b/frontend/webapp/containers/main/actions/index.ts
index 7fce4982a..ceaa14b9c 100644
--- a/frontend/webapp/containers/main/actions/index.ts
+++ b/frontend/webapp/containers/main/actions/index.ts
@@ -3,3 +3,5 @@ export * from './choose-action';
 export * from './edit-action';
 export * from './create-action';
 export * from './choose-action-modal';
+export * from './choose-action-body';
+export * from './action-drawer-container';
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 233bf6711..116e41f66 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -4,13 +4,7 @@ import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
-import {
-  useGetActions,
-  useActualSources,
-  useContainerWidth,
-  useActualDestination,
-  useNodeDataFlowHandlers,
-} from '@/hooks';
+import { useGetActions, useActualSources, useContainerWidth, useActualDestination, useNodeDataFlowHandlers } from '@/hooks';
 
 const OverviewDrawer = dynamic(() => import('../overview-drawer'), {
   ssr: false,
@@ -27,7 +21,7 @@ export function OverviewDataFlowContainer() {
   const { sources } = useActualSources();
   const { destinations } = useActualDestination();
   const { containerRef, containerWidth } = useContainerWidth();
-  const { handleNodeClick } = useNodeDataFlowHandlers(sources, destinations);
+  const { handleNodeClick } = useNodeDataFlowHandlers({ sources, actions, destinations });
 
   const columnWidth = 296;
 
@@ -46,11 +40,7 @@ export function OverviewDataFlowContainer() {
     <OverviewDataFlowWrapper ref={containerRef}>
       <OverviewDrawer />
       <OverviewActionMenuContainer />
-      <NodeBaseDataFlow
-        nodes={nodes}
-        edges={edges}
-        onNodeClick={handleNodeClick}
-      />
+      <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={handleNodeClick} />
     </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 9186db8ba..e5d1984ce 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,41 +1,33 @@
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
+import { getActionIcon, LANGUAGES_LOGOS } from '@/utils';
 import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
+import { ActionDrawer } from '../../actions';
 import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
 import { useActualSources, useUpdateDestination } from '@/hooks';
 import { DestinationDrawer, DestinationDrawerHandle } from '../../destinations';
-import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import {
-  WorkloadId,
-  K8sActualSource,
-  ActualDestination,
-  isActualDestination,
-  OVERVIEW_ENTITY_TYPES,
-  PatchSourceRequestInput,
-} from '@/types';
+import { getMainContainerLanguageLogo, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils/constants/programming-languages';
+import { WorkloadId, K8sActualSource, ActualDestination, OVERVIEW_ENTITY_TYPES, PatchSourceRequestInput, ActionDataParsed } from '@/types';
 
 const componentMap = {
   source: SourceDrawer,
-  action: () => <div>Action</div>,
-  destination: ({ isEditing }: { isEditing: boolean }) => (
-    <DestinationDrawer isEditing={isEditing} />
-  ),
+  action: ActionDrawer,
+  destination: ({ isEditing }: { isEditing: boolean }) => <DestinationDrawer isEditing={isEditing} />,
 };
 
 const DRAWER_WIDTH = '640px';
 
 const OverviewDrawer = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
-  const setDrawerItem = useDrawerStore(
-    ({ setSelectedItem }) => setSelectedItem
-  );
+  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
+
   const [isEditing, setIsEditing] = useState(false);
-  const [title, setTitle] = useState(selectedItem?.item?.name || '');
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [title, setTitle] = useState('');
 
   const { updateExistingDestination } = useUpdateDestination();
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
@@ -48,36 +40,52 @@ const OverviewDrawer = () => {
   //TODO: split file to separate components by type: source, destination, action
 
   function initialTitle() {
-    if (
-      selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
-      selectedItem.item
-    ) {
-      const title = (selectedItem.item as K8sActualSource).reportedName;
-      setTitle(title || '');
-    } else if (
-      selectedItem?.type === OVERVIEW_ENTITY_TYPES.DESTINATION &&
-      selectedItem.item
-    ) {
-      const title = (selectedItem.item as ActualDestination).name;
-      setTitle(title || '');
-    } else {
-      setTitle('');
+    let str = '';
+
+    if (!!selectedItem?.item) {
+      const { type, item } = selectedItem;
+
+      if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
+        str = (item as K8sActualSource).reportedName;
+      } else if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
+        str = (item as ActionDataParsed).spec.actionName;
+      } else if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
+        str = (item as ActualDestination).name;
+      }
     }
+
+    setTitle(str);
   }
 
+  const handleCancel = () => {
+    setIsEditing(false);
+    initialTitle();
+  };
+
+  const handleClose = () => {
+    setIsEditing(false);
+    setSelectedItem(null);
+    setIsDeleteModalOpen(false);
+  };
+
+  const handleCloseDeleteModal = () => {
+    setIsDeleteModalOpen(false);
+  };
+
   const handleSave = async () => {
-    if (selectedItem?.type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
+    if (!selectedItem?.item) return null;
+    const { type, id, item } = selectedItem;
+
+    if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
       if (destinationDrawerRef.current && titleRef.current) {
-        const name = titleRef.current.value;
+        const newTitle = titleRef.current.value;
         const destinationData = {
           ...destinationDrawerRef.current.getCurrentData(),
-          name,
+          name: newTitle,
         };
+
         try {
-          await updateExistingDestination(
-            selectedItem.id as string,
-            destinationData
-          );
+          await updateExistingDestination(id as string, destinationData);
         } catch (error) {
           console.error('Error updating destination:', error);
         }
@@ -85,137 +93,130 @@ const OverviewDrawer = () => {
       }
     }
 
-    if (selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE) {
+    if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
+      alert('TODO !');
+    }
+
+    if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
       if (titleRef.current) {
         const newTitle = titleRef.current.value;
         setTitle(newTitle);
-        if (
-          selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
-          selectedItem.item
-        ) {
-          const sourceItem = selectedItem.item as K8sActualSource;
-
-          const sourceId: WorkloadId = {
-            namespace: sourceItem.namespace,
-            kind: sourceItem.kind,
-            name: sourceItem.name,
-          };
-
-          const patchRequest: PatchSourceRequestInput = {
-            reportedName: newTitle,
-          };
-
-          try {
-            await updateActualSource(sourceId, patchRequest);
-          } catch (error) {
-            console.error('Error updating source:', error);
-          }
+
+        const { namespace, name, kind } = item as K8sActualSource;
+
+        const sourceId: WorkloadId = {
+          namespace,
+          kind,
+          name,
+        };
+
+        const patchRequest: PatchSourceRequestInput = {
+          reportedName: newTitle,
+        };
+
+        try {
+          await updateActualSource(sourceId, patchRequest);
+        } catch (error) {
+          console.error('Error updating source:', error);
         }
       }
       setIsEditing(false);
     }
   };
 
-  const handleCancel = () => {
-    setIsEditing(false);
-    initialTitle();
-  };
-
-  const handleClose = () => {
-    setIsEditing(false);
-    setDrawerItem(null);
-    setIsDeleteModalOpen(false);
-  };
-
   const handleDelete = async () => {
-    if (
-      selectedItem?.type === OVERVIEW_ENTITY_TYPES.SOURCE &&
-      selectedItem.item
-    ) {
-      const sourceItem = selectedItem.item as K8sActualSource;
+    if (!selectedItem?.item) return null;
+    const { type, item } = selectedItem;
+
+    if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
+      const { namespace, name, kind } = item as K8sActualSource;
 
       try {
-        await deleteSourcesForNamespace(sourceItem.namespace, [
+        await deleteSourcesForNamespace(namespace, [
           {
-            kind: sourceItem.kind,
-            name: sourceItem.name,
+            kind,
+            name,
             selected: false,
           },
         ]);
-        handleClose();
       } catch (error) {
         console.error('Error deleting source:', error);
       }
     }
-    setDrawerItem(null); // Close the drawer on delete
-  };
 
-  const handleCloseDeleteModal = () => {
-    setIsDeleteModalOpen(false);
+    if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
+      alert('TODO !');
+    }
+
+    if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
+      alert('TODO !');
+    }
+
+    handleClose();
   };
 
-  if (!selectedItem) return null;
+  if (!selectedItem?.item) return null;
 
-  const SpecificComponent = componentMap[selectedItem.type];
+  const { type, item } = selectedItem;
+  const SpecificComponent = componentMap[type];
 
   return SpecificComponent ? (
     <>
-      <Drawer
-        isOpen
-        onClose={handleClose}
-        width={DRAWER_WIDTH}
-        closeOnEscape={!isDeleteModalOpen}
-      >
+      <Drawer isOpen onClose={handleClose} width={DRAWER_WIDTH} closeOnEscape={!isDeleteModalOpen}>
         <DrawerContent>
           <DrawerHeader
             ref={titleRef}
             title={title}
             onClose={isEditing ? handleCancel : handleClose}
-            imageUri={
-              selectedItem?.item ? getItemImageByType(selectedItem?.item) : ''
-            }
-            {...{ isEditing, setIsEditing }}
+            imageUri={item ? getItemImageByType(type, item) : ''}
+            isEditing={isEditing}
+            setIsEditing={setIsEditing}
           />
+
           <ContentArea>
-            {selectedItem.type === OVERVIEW_ENTITY_TYPES.DESTINATION ? (
-              <DestinationDrawer
-                ref={destinationDrawerRef}
-                isEditing={isEditing}
-              />
+            {type === OVERVIEW_ENTITY_TYPES.DESTINATION ? (
+              <DestinationDrawer ref={destinationDrawerRef} isEditing={isEditing} />
             ) : (
               <SpecificComponent isEditing={isEditing} />
             )}
           </ContentArea>
-          {isEditing && (
-            <>
-              <DrawerFooter
-                onSave={handleSave}
-                onCancel={handleCancel}
-                onDelete={() => setIsDeleteModalOpen(true)}
-              />
-            </>
-          )}
+
+          {isEditing && <DrawerFooter onSave={handleSave} onCancel={handleCancel} onDelete={() => setIsDeleteModalOpen(true)} />}
         </DrawerContent>
       </Drawer>
+
       <DeleteEntityModal
         title={title}
         isModalOpen={isDeleteModalOpen}
         handleDelete={handleDelete}
         handleCloseModal={handleCloseDeleteModal}
-        description="Are you sure you want to delete this source?"
+        description='Are you sure you want to delete this source?'
       />
     </>
   ) : null;
 };
 
-function getItemImageByType(item: K8sActualSource | ActualDestination): string {
-  if (isActualDestination(item)) {
-    // item is of type ActualDestination
-    return item.destinationType.imageUrl;
-  } else {
-    // item is of type K8sActualSource
-    return getMainContainerLanguageLogo(item as K8sActualSource);
+function getItemImageByType(type: string, item: K8sActualSource | ActionDataParsed | ActualDestination): string {
+  let src = '';
+
+  switch (type) {
+    case OVERVIEW_ENTITY_TYPES.SOURCE:
+      src = getMainContainerLanguageLogo(item as K8sActualSource);
+      break;
+
+    case OVERVIEW_ENTITY_TYPES.ACTION:
+      src = getActionIcon((item as ActionDataParsed).type);
+      break;
+
+    case OVERVIEW_ENTITY_TYPES.DESTINATION:
+      src = (item as ActualDestination).destinationType.imageUrl;
+      break;
+
+    default:
+      break;
   }
+
+  return src || LANGUAGES_LOGOS[WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN];
 }
 
 export default OverviewDrawer;
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index b833920f4..7f1fb3986 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -48,6 +48,7 @@ export const GET_COMPUTE_PLATFORM = gql`
         }
       }
       actions {
+        id
         type
         spec
       }
diff --git a/frontend/webapp/hooks/actions/useGetActions.ts b/frontend/webapp/hooks/actions/useGetActions.ts
index f4e0ebd1a..302e483de 100644
--- a/frontend/webapp/hooks/actions/useGetActions.ts
+++ b/frontend/webapp/hooks/actions/useGetActions.ts
@@ -1,3 +1,5 @@
+import { safeJsonParse } from '@/utils';
+import type { ActionItem } from '@/types';
 import { useComputePlatform } from '../compute-platform';
 
 // Define the hook
@@ -5,6 +7,14 @@ export const useGetActions = () => {
   const { data } = useComputePlatform();
 
   return {
-    actions: data?.computePlatform.actions || [], // Return the actions or an empty array if not available
+    actions:
+      data?.computePlatform?.actions?.map((item) => {
+        const parsedSpec = typeof item.spec === 'string' ? safeJsonParse(item.spec, {} as ActionItem) : item.spec;
+
+        return {
+          ...item,
+          spec: parsedSpec,
+        };
+      }) || [],
   };
 };
diff --git a/frontend/webapp/hooks/destinations/useDestinationFormData.ts b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
index bba30a780..1210843f2 100644
--- a/frontend/webapp/hooks/destinations/useDestinationFormData.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
@@ -4,13 +4,7 @@ import { useDrawerStore } from '@/store';
 import { useQuery } from '@apollo/client';
 import { useConnectDestinationForm } from '@/hooks';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
-import {
-  DynamicField,
-  ActualDestination,
-  isActualDestination,
-  DestinationDetailsResponse,
-  SupportedDestinationSignals,
-} from '@/types';
+import { DynamicField, ActualDestination, isActualDestination, DestinationDetailsResponse, SupportedDestinationSignals } from '@/types';
 
 const DEFAULT_SUPPORTED_SIGNALS: SupportedDestinationSignals = {
   logs: { supported: false },
@@ -25,27 +19,21 @@ export function useDestinationFormData() {
     metrics: false,
     traces: false,
   });
-  const [supportedSignals, setSupportedSignals] =
-    useState<SupportedDestinationSignals>(DEFAULT_SUPPORTED_SIGNALS);
+  const [supportedSignals, setSupportedSignals] = useState<SupportedDestinationSignals>(DEFAULT_SUPPORTED_SIGNALS);
 
   const destination = useDrawerStore(({ selectedItem }) => selectedItem);
   const shouldSkip = !isActualDestination(destination?.item);
-  const destinationType = isActualDestination(destination?.item)
-    ? destination.item.destinationType.type
-    : null;
+  const destinationType = isActualDestination(destination?.item) ? destination.item.destinationType.type : null;
 
   const { buildFormDynamicFields } = useConnectDestinationForm();
 
-  const { data: destinationFields } = useQuery<DestinationDetailsResponse>(
-    GET_DESTINATION_TYPE_DETAILS,
-    { variables: { type: destinationType }, skip: shouldSkip }
-  );
+  const { data: destinationFields } = useQuery<DestinationDetailsResponse>(GET_DESTINATION_TYPE_DETAILS, {
+    variables: { type: destinationType },
+    skip: shouldSkip,
+  });
 
   // Memoize the buildFormDynamicFields to ensure it's stable across renders
-  const memoizedBuildFormDynamicFields = useCallback(
-    buildFormDynamicFields,
-    []
-  );
+  const memoizedBuildFormDynamicFields = useCallback(buildFormDynamicFields, []);
 
   const initialDynamicFieldsRef = useRef<DynamicField[]>([]);
   const initialExportedSignalsRef = useRef({
@@ -53,9 +41,7 @@ export function useDestinationFormData() {
     metrics: false,
     traces: false,
   });
-  const initialSupportedSignalsRef = useRef<SupportedDestinationSignals>(
-    DEFAULT_SUPPORTED_SIGNALS
-  );
+  const initialSupportedSignalsRef = useRef<SupportedDestinationSignals>(DEFAULT_SUPPORTED_SIGNALS);
 
   useEffect(() => {
     if (destinationFields && isActualDestination(destination?.item)) {
@@ -63,9 +49,7 @@ export function useDestinationFormData() {
       const destinationTypeDetails = destinationFields.destinationTypeDetails;
 
       const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
-      const formFields = memoizedBuildFormDynamicFields(
-        destinationTypeDetails?.fields || []
-      );
+      const formFields = memoizedBuildFormDynamicFields(destinationTypeDetails?.fields || []);
 
       const df = formFields.map((field) => {
         let fieldValue: any = parsedFields[field.name] || '';
@@ -73,7 +57,7 @@ export function useDestinationFormData() {
         // Check if fieldValue is a JSON string that needs stringifying
         try {
           const parsedValue = JSON.parse(fieldValue);
-          console.log({ parsedValue });
+
           if (Array.isArray(parsedValue)) {
             // If it's an array, stringify it for setting the value
             fieldValue = parsedValue;
@@ -99,23 +83,14 @@ export function useDestinationFormData() {
   }, [destinationFields, destination, memoizedBuildFormDynamicFields]);
 
   const cardData = useMemo(() => {
-    if (
-      shouldSkip ||
-      !isActualDestination(destination?.item) ||
-      !destinationFields
-    ) {
-      return [
-        { title: 'Error', value: 'No destination selected or data missing' },
-      ];
+    if (shouldSkip || !isActualDestination(destination?.item) || !destinationFields) {
+      return [{ title: 'Error', value: 'No destination selected or data missing' }];
     }
 
     const { exportedSignals, destinationType, fields } = destination.item;
     const parsedFields = safeJsonParse<Record<string, string>>(fields, {});
     const destinationDetails = destinationFields.destinationTypeDetails?.fields;
-    const fieldsData = buildDestinationFieldData(
-      parsedFields,
-      destinationDetails
-    );
+    const fieldsData = buildDestinationFieldData(parsedFields, destinationDetails);
 
     return [
       { title: 'Destination', value: destinationType.displayName || 'N/A' },
@@ -143,20 +118,14 @@ export function useDestinationFormData() {
   };
 }
 
-function buildDestinationFieldData(
-  parsedFields: Record<string, string>,
-  fieldDetails?: { name: string; displayName: string }[]
-) {
+function buildDestinationFieldData(parsedFields: Record<string, string>, fieldDetails?: { name: string; displayName: string }[]) {
   return Object.entries(parsedFields).map(([key, value]) => ({
-    title:
-      fieldDetails?.find((field) => field.name === key)?.displayName || key,
+    title: fieldDetails?.find((field) => field.name === key)?.displayName || key,
     value: value || 'N/A',
   }));
 }
 
-function buildMonitorsList(
-  exportedSignals: ActualDestination['exportedSignals']
-): string {
+function buildMonitorsList(exportedSignals: ActualDestination['exportedSignals']): string {
   return (
     Object.keys(exportedSignals)
       .filter((key) => exportedSignals[key] && key !== '__typename')
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
index eb0291a82..d6216d013 100644
--- a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
+++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -1,52 +1,61 @@
 // src/hooks/useNodeDataFlowHandlers.ts
 import { useCallback } from 'react';
 import { useDrawerStore } from '@/store';
-import { K8sActualSource, ActualDestination } from '@/types';
+import { K8sActualSource, ActualDestination, ActionDataParsed, OVERVIEW_ENTITY_TYPES } from '@/types';
 
-const TYPE_SOURCE = 'source';
-const TYPE_DESTINATION = 'destination';
-
-export function useNodeDataFlowHandlers(
-  sources: K8sActualSource[],
-  destinations: ActualDestination[]
-) {
-  const setSelectedItem = useDrawerStore(
-    ({ setSelectedItem }) => setSelectedItem
-  );
+export function useNodeDataFlowHandlers({
+  sources,
+  actions,
+  destinations,
+}: {
+  sources: K8sActualSource[];
+  actions: ActionDataParsed[];
+  destinations: ActualDestination[];
+}) {
+  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
   const handleNodeClick = useCallback(
     (_, object: any) => {
-      if (object.data.type === TYPE_SOURCE) {
-        const { id } = object.data;
-        const selectedDrawerItem = sources.find(
-          ({ kind, name, namespace }) =>
-            kind === id.kind && name === id.name && namespace === id.namespace
-        );
+      const {
+        data: { id, type },
+      } = object;
+
+      if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
+        const selectedDrawerItem = sources.find(({ kind, name, namespace }) => kind === id.kind && name === id.name && namespace === id.namespace);
         if (!selectedDrawerItem) return;
 
         const { kind, name, namespace } = selectedDrawerItem;
 
         setSelectedItem({
           id: { kind, name, namespace },
+          type,
+          item: selectedDrawerItem,
+        });
+      }
+
+      if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
+        const selectedDrawerItem = actions.find((action) => action.id === id);
+        if (!selectedDrawerItem) return;
+
+        setSelectedItem({
+          id,
+          type,
           item: selectedDrawerItem,
-          type: TYPE_SOURCE,
         });
       }
 
-      if (object.data.type === TYPE_DESTINATION) {
-        const { id } = object.data;
-        const selectedDrawerItem = destinations.find(
-          (destination) => destination.id === id
-        );
+      if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
+        const selectedDrawerItem = destinations.find((destination) => destination.id === id);
+        if (!selectedDrawerItem) return;
 
         setSelectedItem({
           id,
+          type,
           item: selectedDrawerItem,
-          type: TYPE_DESTINATION,
         });
       }
     },
-    [sources, destinations, setSelectedItem]
+    [sources, actions, destinations, setSelectedItem]
   );
 
   return {
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index df1ab89c9..c37402216 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,13 +1,13 @@
 import theme from '@/styles/theme';
+import { getActionIcon } from '@/utils';
 import { Node, Edge } from 'react-flow-renderer';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import { ActionData, ActionItem, ActualDestination, K8sActualSource } from '@/types';
+import type { ActionData, ActionItem, ActualDestination, K8sActualSource } from '@/types';
 
 // Constants
 const NODE_HEIGHT = 80;
 
 const STROKE_COLOR = theme.colors.border;
-const ACTION_ICON_PATH = '/icons/actions/';
 const HEADER_ICON_PATH = '/icons/overview/';
 
 // Helper to create a node
@@ -101,14 +101,12 @@ export const buildNodesAndEdges = ({
     }),
     ...actions.map((action, index) => {
       const actionSpec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
-      const typeLowerCased = action.type.toLowerCase();
-      const isSampler = typeLowerCased.includes('sampler');
 
       return createNode(`action-${index}`, 'base', centerColumnX, NODE_HEIGHT * (index + 1), {
         type: 'action',
         title: actionSpec.actionName,
         subTitle: action.type,
-        imageUri: `${ACTION_ICON_PATH}${isSampler ? 'sampler' : typeLowerCased}.svg`,
+        imageUri: getActionIcon(action.type),
         monitors: actionSpec.signals,
         status: 'healthy',
         id: action.id,
@@ -122,7 +120,7 @@ export const buildNodesAndEdges = ({
         type: 'addAction',
         title: 'ADD ACTION',
         subTitle: '',
-        imageUri: `${ACTION_ICON_PATH}add-action.svg`,
+        imageUri: getActionIcon(),
         status: 'healthy',
         onClick: () => console.log('Add Action'),
       })
diff --git a/frontend/webapp/store/useDrawerStore.tsx b/frontend/webapp/store/useDrawerStore.tsx
index 863dda558..3b392ef5e 100644
--- a/frontend/webapp/store/useDrawerStore.tsx
+++ b/frontend/webapp/store/useDrawerStore.tsx
@@ -1,12 +1,12 @@
 // drawerStore.ts
 import { create } from 'zustand';
-import { ActualDestination, K8sActualSource, WorkloadId } from '@/types';
+import { ActionDataParsed, ActualDestination, K8sActualSource, WorkloadId } from '@/types';
 
 type ItemType = 'source' | 'action' | 'destination';
 
 interface BaseItem {
   id: string | WorkloadId;
-  item?: K8sActualSource | ActualDestination;
+  item?: K8sActualSource | ActionDataParsed | ActualDestination;
   type: ItemType;
   // Add common properties here
 }
diff --git a/frontend/webapp/utils/functions/get-action-icon.ts b/frontend/webapp/utils/functions/get-action-icon.ts
new file mode 100644
index 000000000..d4fadfb07
--- /dev/null
+++ b/frontend/webapp/utils/functions/get-action-icon.ts
@@ -0,0 +1,12 @@
+const ACTION_ICON_PATH = '/icons/actions/';
+
+export const getActionIcon = (actionType?: string) => {
+  if (!actionType) {
+    return `${ACTION_ICON_PATH}add-action.svg`;
+  }
+
+  const typeLowerCased = actionType.toLowerCase();
+  const isSampler = typeLowerCased.includes('sampler');
+
+  return `${ACTION_ICON_PATH}${isSampler ? 'sampler' : typeLowerCased}.svg`;
+};
diff --git a/frontend/webapp/utils/functions/index.tsx b/frontend/webapp/utils/functions/index.tsx
index 916b6e9f8..2c82868e5 100644
--- a/frontend/webapp/utils/functions/index.tsx
+++ b/frontend/webapp/utils/functions/index.tsx
@@ -1 +1,2 @@
 export * from './strings';
+export * from './get-action-icon';

From f3c1a264d06442ef673a49b2ed3e735672d712fd Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 28 Oct 2024 16:57:28 +0200
Subject: [PATCH 314/374] [GEN-1579]: button outline (#1647)

---
 frontend/webapp/reuseable-components/button/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 03c1ea7fa..79d049acb 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -77,6 +77,7 @@ const StyledButton = styled.button<ButtonProps>`
   text-transform: uppercase;
   text-decoration: underline;
   font-weight: 600;
+  outline: none;
   ${({ variant }) => variant && variantStyles[variant]}
   ${({ isDisabled }) =>
     isDisabled &&
@@ -92,6 +93,7 @@ const StyledButton = styled.button<ButtonProps>`
 const ButtonContainer = styled.div<{
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
 }>`
+  height: fit-content;
   border: 2px solid transparent;
   padding: 2px;
   border-radius: 32px;

From 3bb2338e31cbd6bb6ca0d635079a65dae67df0b4 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 28 Oct 2024 17:41:44 +0200
Subject: [PATCH 315/374] [GEN-1580]: useKeyDown hook fixed (#1648)

---
 frontend/webapp/hooks/useKeyDown.ts           | 112 ++++++++++++++++--
 .../reuseable-components/drawer/index.tsx     |  35 ++----
 .../reuseable-components/modal/index.tsx      |  39 ++----
 3 files changed, 119 insertions(+), 67 deletions(-)

diff --git a/frontend/webapp/hooks/useKeyDown.ts b/frontend/webapp/hooks/useKeyDown.ts
index 01591c6b5..ae3a2a66e 100644
--- a/frontend/webapp/hooks/useKeyDown.ts
+++ b/frontend/webapp/hooks/useKeyDown.ts
@@ -1,19 +1,109 @@
-import { useEffect } from "react";
-
-export function useKeyDown(key, callback) {
-  const handleKeyDown = (event) => {
-    if (key === event.key) {
-      callback(event);
-    }
-  };
+import { useEffect } from 'react';
 
+export function useKeyDown(key: Key | null, callback: (e: KeyboardEvent) => void) {
   useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (key && key === e.key) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        callback(e);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener('keydown', handleKeyDown);
     };
   }, [key, callback]);
 
-  return handleKeyDown;
+  return null;
 }
+
+// Chat GPT scraped from: https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+type Key =
+  | 'Backspace'
+  | 'Tab'
+  | 'Enter'
+  | 'Shift'
+  | 'Control'
+  | 'Alt'
+  | 'Pause'
+  | 'CapsLock'
+  | 'Escape'
+  | 'Space'
+  | 'PageUp'
+  | 'PageDown'
+  | 'End'
+  | 'Home'
+  | 'ArrowLeft'
+  | 'ArrowUp'
+  | 'ArrowRight'
+  | 'ArrowDown'
+  | 'PrintScreen'
+  | 'Insert'
+  | 'Delete'
+  | '0'
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | 'a'
+  | 'b'
+  | 'c'
+  | 'd'
+  | 'e'
+  | 'f'
+  | 'g'
+  | 'h'
+  | 'i'
+  | 'j'
+  | 'k'
+  | 'l'
+  | 'm'
+  | 'n'
+  | 'o'
+  | 'p'
+  | 'q'
+  | 'r'
+  | 's'
+  | 't'
+  | 'u'
+  | 'v'
+  | 'w'
+  | 'x'
+  | 'y'
+  | 'z'
+  | 'Meta'
+  | 'ContextMenu'
+  | 'F1'
+  | 'F2'
+  | 'F3'
+  | 'F4'
+  | 'F5'
+  | 'F6'
+  | 'F7'
+  | 'F8'
+  | 'F9'
+  | 'F10'
+  | 'F11'
+  | 'F12'
+  | 'NumLock'
+  | 'ScrollLock'
+  | 'AudioVolumeMute'
+  | 'AudioVolumeDown'
+  | 'AudioVolumeUp'
+  | 'MediaTrackNext'
+  | 'MediaTrackPrevious'
+  | 'MediaStop'
+  | 'MediaPlayPause'
+  | 'LaunchMail'
+  | 'LaunchApp1'
+  | 'LaunchApp2'
+  | 'Unidentified';
diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
index 75a31bd22..317048905 100644
--- a/frontend/webapp/reuseable-components/drawer/index.tsx
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react';
+import React from 'react';
+import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
 
 interface DrawerProps {
@@ -33,41 +34,21 @@ const DrawerContainer = styled.div<{
   position: fixed;
   top: 0;
   bottom: 0;
-  ${({ position, width }) => position}: 0;
+  ${({ position }) => position}: 0;
   width: ${({ width }) => width};
   background-color: ${({ theme }) => theme.colors.translucent_bg};
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  transform: translateX(
-    ${({ isOpen, position }) =>
-      isOpen ? '0' : position === 'left' ? '-100%' : '100%'}
-  );
+  transform: translateX(${({ isOpen, position }) => (isOpen ? '0' : position === 'left' ? '-100%' : '100%')});
   transition: transform 0.3s ease;
   z-index: 1000;
   overflow-y: auto;
 `;
 
-export const Drawer: React.FC<DrawerProps> = ({
-  isOpen,
-  onClose,
-  position = 'right',
-  width = '300px',
-  children,
-  closeOnEscape = true,
-}) => {
-  // Handle closing the drawer when escape key is pressed
-  useEffect(() => {
+export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, position = 'right', width = '300px', children, closeOnEscape = true }) => {
+  useKeyDown(isOpen ? 'Escape' : null, () => {
     if (!closeOnEscape) return;
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
-        event.stopPropagation();
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleEscape);
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, onClose, closeOnEscape]);
+    onClose();
+  });
 
   return (
     <>
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index bc0934d10..e718d781a 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import { Text } from '../text';
 import ReactDOM from 'react-dom';
+import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
 
 interface ModalProps {
@@ -33,10 +34,8 @@ const ModalWrapper = styled.div`
   border-radius: 40px;
   max-height: 84vh;
   border: ${({ theme }) => `1px solid ${theme.colors.border}`};
-  box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8),
-    0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),
-    0px 10px 10px 0px rgba(17, 17, 17, 0.8),
-    0px 0px 8px 0px rgba(17, 17, 17, 0.8);
+  box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8), 0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),
+    0px 10px 10px 0px rgba(17, 17, 17, 0.8), 0px 0px 8px 0px rgba(17, 17, 17, 0.8);
 `;
 
 const ModalHeader = styled.div`
@@ -89,24 +88,11 @@ const CancelText = styled(Text)`
   cursor: pointer;
 `;
 
-const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  header,
-  onClose,
-  children,
-  actionComponent,
-}) => {
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleEscape);
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, onClose]);
+const Modal: React.FC<ModalProps> = ({ isOpen, header, onClose, children, actionComponent }) => {
+  useKeyDown(isOpen ? 'Escape' : null, () => {
+    onClose();
+  });
+
   if (!isOpen) return null;
 
   return ReactDOM.createPortal(
@@ -115,12 +101,7 @@ const Modal: React.FC<ModalProps> = ({
         {header && (
           <ModalHeader>
             <ModalCloseButton onClick={onClose}>
-              <Image
-                src="/icons/common/x.svg"
-                alt="close"
-                width={15}
-                height={12}
-              />
+              <Image src='/icons/common/x.svg' alt='close' width={15} height={12} />
               <CancelText>{'Cancel'}</CancelText>
             </ModalCloseButton>
             <ModalTitleContainer>

From 2a83b847e1a6b93a8d18a16cd5adc2fb6422b078 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 29 Oct 2024 11:12:01 +0200
Subject: [PATCH 316/374] [GEN-1591]: make "add action" in overview functional
 (#1650)

---
 .../main/overview/add-entity/index.tsx        |  74 ++++-------
 .../hooks/overview/useNodeDataFlowHandlers.ts |  19 +--
 .../nodes-data-flow/builder.ts                | 121 ++++++++++--------
 .../nodes-data-flow/index.tsx                 |  20 +--
 .../{add-action-node.tsx => add-node.tsx}     |  55 ++++----
 frontend/webapp/store/index.ts                |   4 +-
 frontend/webapp/store/useModalStore.tsx       |  11 ++
 frontend/webapp/types/common.ts               |   8 +-
 8 files changed, 159 insertions(+), 153 deletions(-)
 rename frontend/webapp/reuseable-components/nodes-data-flow/nodes/{add-action-node.tsx => add-node.tsx} (55%)
 create mode 100644 frontend/webapp/store/useModalStore.tsx

diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index f158c2a93..2743a05ba 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback } from 'react';
 import Image from 'next/image';
 import theme from '@/styles/theme';
+import { useModalStore } from '@/store';
 import { AddActionModal } from '../../actions';
 import styled, { css } from 'styled-components';
 import { useActualSources, useOnClickOutside } from '@/hooks';
@@ -61,9 +62,9 @@ const ButtonText = styled(Text)`
 
 // Default options for the dropdown
 const DEFAULT_OPTIONS: DropdownOption[] = [
-  { id: 'source', value: 'Source' },
-  { id: 'action', value: 'Action' },
-  { id: 'destination', value: 'Destination' },
+  { id: OVERVIEW_ENTITY_TYPES.SOURCE, value: 'Source' },
+  { id: OVERVIEW_ENTITY_TYPES.ACTION, value: 'Action' },
+  { id: OVERVIEW_ENTITY_TYPES.DESTINATION, value: 'Destination' },
 ];
 
 interface AddEntityButtonDropdownProps {
@@ -71,80 +72,53 @@ interface AddEntityButtonDropdownProps {
   placeholder?: string;
 }
 
-const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({
-  options = DEFAULT_OPTIONS,
-  placeholder = 'ADD...',
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
+const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
+  const { currentModal, setCurrentModal } = useModalStore();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const [currentModal, setCurrentModal] = useState<string>('');
 
-  const { isPolling, createSourcesForNamespace, persistNamespaceItems } =
-    useActualSources();
+  const { isPolling, createSourcesForNamespace, persistNamespaceItems } = useActualSources();
 
-  useOnClickOutside(dropdownRef, () => setIsOpen(false));
+  useOnClickOutside(dropdownRef, () => setIsDropdownOpen(false));
 
-  const handleToggle = useCallback(() => {
-    setIsOpen((prev) => !prev);
-  }, []);
+  const handleToggle = () => {
+    setIsDropdownOpen((prev) => !prev);
+  };
 
-  const handleSelect = useCallback((option: DropdownOption) => {
+  const handleSelect = (option: DropdownOption) => {
     setCurrentModal(option.id);
-    setIsOpen(false);
-  }, []);
+    setIsDropdownOpen(false);
+  };
 
-  const handleCloseModal = useCallback(() => {
+  const handleCloseModal = () => {
     setCurrentModal('');
-  }, []);
+  };
 
   return (
     <Container ref={dropdownRef}>
       <StyledButton onClick={handleToggle}>
-        {isPolling ? (
-          <FadeLoader color={theme.colors.primary} />
-        ) : (
-          <Image
-            src="/icons/common/plus-black.svg"
-            width={16}
-            height={16}
-            alt="Add"
-          />
-        )}
+        {isPolling ? <FadeLoader color={theme.colors.primary} /> : <Image src='/icons/common/plus-black.svg' width={16} height={16} alt='Add' />}
         <ButtonText size={14}>{placeholder}</ButtonText>
       </StyledButton>
-      {isOpen && (
+      {isDropdownOpen && (
         <DropdownListContainer>
           {options.map((option) => (
-            <DropdownItem
-              key={option.id}
-              isSelected={false}
-              onClick={() => handleSelect(option)}
-            >
-              <Image
-                src={`/icons/overview/${option.id}s.svg`}
-                width={16}
-                height={16}
-                alt={`Add ${option.value}`}
-              />
+            <DropdownItem key={option.id} isSelected={false} onClick={() => handleSelect(option)}>
+              <Image src={`/icons/overview/${option.id}s.svg`} width={16} height={16} alt={`Add ${option.value}`} />
               <Text size={14}>{option.value}</Text>
             </DropdownItem>
           ))}
         </DropdownListContainer>
       )}
+
       <AddSourceModal
         isOpen={currentModal === OVERVIEW_ENTITY_TYPES.SOURCE}
         onClose={handleCloseModal}
         createSourcesForNamespace={createSourcesForNamespace}
         persistNamespaceItems={persistNamespaceItems}
       />
-      <AddDestinationModal
-        isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.DESTINATION}
-        handleCloseModal={handleCloseModal}
-      />
-      <AddActionModal
-        isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.ACTION}
-        handleCloseModal={handleCloseModal}
-      />
+      <AddDestinationModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.DESTINATION} handleCloseModal={handleCloseModal} />
+      <AddActionModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.ACTION} handleCloseModal={handleCloseModal} />
     </Container>
   );
 };
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
index d6216d013..c5ffcc312 100644
--- a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
+++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -1,7 +1,7 @@
 // src/hooks/useNodeDataFlowHandlers.ts
 import { useCallback } from 'react';
-import { useDrawerStore } from '@/store';
-import { K8sActualSource, ActualDestination, ActionDataParsed, OVERVIEW_ENTITY_TYPES } from '@/types';
+import { useDrawerStore, useModalStore } from '@/store';
+import { K8sActualSource, ActualDestination, ActionDataParsed, OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES } from '@/types';
 
 export function useNodeDataFlowHandlers({
   sources,
@@ -12,6 +12,7 @@ export function useNodeDataFlowHandlers({
   actions: ActionDataParsed[];
   destinations: ActualDestination[];
 }) {
+  const { setCurrentModal } = useModalStore();
   const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
   const handleNodeClick = useCallback(
@@ -31,9 +32,7 @@ export function useNodeDataFlowHandlers({
           type,
           item: selectedDrawerItem,
         });
-      }
-
-      if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
+      } else if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
         const selectedDrawerItem = actions.find((action) => action.id === id);
         if (!selectedDrawerItem) return;
 
@@ -42,9 +41,7 @@ export function useNodeDataFlowHandlers({
           type,
           item: selectedDrawerItem,
         });
-      }
-
-      if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
+      } else if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
         const selectedDrawerItem = destinations.find((destination) => destination.id === id);
         if (!selectedDrawerItem) return;
 
@@ -53,6 +50,12 @@ export function useNodeDataFlowHandlers({
           type,
           item: selectedDrawerItem,
         });
+      } else if (type === OVERVIEW_NODE_TYPES.ADD_SOURCE) {
+        setCurrentModal(OVERVIEW_ENTITY_TYPES.SOURCE);
+      } else if (type === OVERVIEW_NODE_TYPES.ADD_ACTION) {
+        setCurrentModal(OVERVIEW_ENTITY_TYPES.ACTION);
+      } else if (type === OVERVIEW_NODE_TYPES.ADD_DESTIONATION) {
+        setCurrentModal(OVERVIEW_ENTITY_TYPES.DESTINATION);
       }
     },
     [sources, actions, destinations, setSelectedItem]
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index c37402216..52391bc01 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -2,7 +2,7 @@ import theme from '@/styles/theme';
 import { getActionIcon } from '@/utils';
 import { Node, Edge } from 'react-flow-renderer';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import type { ActionData, ActionItem, ActualDestination, K8sActualSource } from '@/types';
+import { OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, type ActionData, type ActionItem, type ActualDestination, type K8sActualSource } from '@/types';
 
 // Constants
 const NODE_HEIGHT = 80;
@@ -56,20 +56,30 @@ export const buildNodesAndEdges = ({
       title: 'Sources',
       tagValue: sources.length,
     }),
-    ...sources.map((source, index) =>
-      createNode(`source-${index}`, 'base', leftColumnX, NODE_HEIGHT * (index + 1), {
-        type: 'source',
-        title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
-        subTitle: source.kind,
-        imageUri: getMainContainerLanguageLogo(source),
-        status: 'healthy',
-        id: {
-          kind: source.kind,
-          name: source.name,
-          namespace: source.namespace,
-        },
-      })
-    ),
+    ...(!sources.length
+      ? [
+          createNode(`source-0`, 'add', leftColumnX, NODE_HEIGHT, {
+            type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
+            title: 'ADD SOURCE',
+            subTitle: 'Add first source to collect OpenTelemetry data',
+            imageUri: '',
+            status: 'healthy',
+          }),
+        ]
+      : sources.map((source, index) =>
+          createNode(`source-${index}`, 'base', leftColumnX, NODE_HEIGHT * (index + 1), {
+            type: OVERVIEW_ENTITY_TYPES.SOURCE,
+            title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
+            subTitle: source.kind,
+            imageUri: getMainContainerLanguageLogo(source),
+            status: 'healthy',
+            id: {
+              kind: source.kind,
+              name: source.name,
+              namespace: source.namespace,
+            },
+          })
+        )),
   ];
 
   // Build Destination Nodes
@@ -79,17 +89,27 @@ export const buildNodesAndEdges = ({
       title: 'Destinations',
       tagValue: destinations.length,
     }),
-    ...destinations.map((destination, index) =>
-      createNode(`destination-${index}`, 'base', rightColumnX, NODE_HEIGHT * (index + 1), {
-        type: 'destination',
-        title: destination.name,
-        subTitle: destination.destinationType.displayName,
-        imageUri: destination.destinationType.imageUrl,
-        status: 'healthy',
-        monitors: extractMonitors(destination.exportedSignals),
-        id: destination.id,
-      })
-    ),
+    ...(!destinations.length
+      ? [
+          createNode(`destination-0`, 'add', rightColumnX, NODE_HEIGHT, {
+            type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
+            title: 'ADD DESTIONATION',
+            subTitle: 'Add first destination to monitor OpenTelemetry data',
+            imageUri: '',
+            status: 'healthy',
+          }),
+        ]
+      : destinations.map((destination, index) =>
+          createNode(`destination-${index}`, 'base', rightColumnX, NODE_HEIGHT * (index + 1), {
+            type: OVERVIEW_ENTITY_TYPES.DESTINATION,
+            title: destination.name,
+            subTitle: destination.destinationType.displayName,
+            imageUri: destination.destinationType.imageUrl,
+            status: 'healthy',
+            monitors: extractMonitors(destination.exportedSignals),
+            id: destination.id,
+          })
+        )),
   ];
 
   // Build Action Nodes
@@ -99,34 +119,31 @@ export const buildNodesAndEdges = ({
       title: 'Actions',
       tagValue: actions.length,
     }),
-    ...actions.map((action, index) => {
-      const actionSpec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
-
-      return createNode(`action-${index}`, 'base', centerColumnX, NODE_HEIGHT * (index + 1), {
-        type: 'action',
-        title: actionSpec.actionName,
-        subTitle: action.type,
-        imageUri: getActionIcon(action.type),
-        monitors: actionSpec.signals,
-        status: 'healthy',
-        id: action.id,
-      });
-    }),
+    ...(!actions.length
+      ? [
+          createNode(`action-0`, 'add', centerColumnX, NODE_HEIGHT, {
+            type: OVERVIEW_NODE_TYPES.ADD_ACTION,
+            title: 'ADD ACTION',
+            subTitle: 'Add first action to modify the OpenTelemetry data',
+            imageUri: '',
+            status: 'healthy',
+          }),
+        ]
+      : actions.map((action, index) => {
+          const actionSpec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
+
+          return createNode(`action-${index}`, 'base', centerColumnX, NODE_HEIGHT * (index + 1), {
+            type: OVERVIEW_ENTITY_TYPES.ACTION,
+            title: actionSpec.actionName,
+            subTitle: action.type,
+            imageUri: getActionIcon(action.type),
+            monitors: actionSpec.signals,
+            status: 'healthy',
+            id: action.id,
+          });
+        })),
   ];
 
-  if (actionsNode.length === 1) {
-    actionsNode.push(
-      createNode(`action-0`, 'addAction', centerColumnX, NODE_HEIGHT * (actions.length + 1), {
-        type: 'addAction',
-        title: 'ADD ACTION',
-        subTitle: '',
-        imageUri: getActionIcon(),
-        status: 'healthy',
-        onClick: () => console.log('Add Action'),
-      })
-    );
-  }
-
   // Combine all nodes
   const nodes = [...sourcesNode, ...destinationNode, ...actionsNode];
 
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
index 53e684fd9..fe339032f 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -4,12 +4,12 @@ import '@xyflow/react/dist/style.css';
 import BaseNode from './nodes/base-node';
 import { ReactFlow } from '@xyflow/react';
 import headerNode from './nodes/header-node';
-import AddActionNode from './nodes/add-action-node';
+import AddNode from './nodes/add-node';
 
 const nodeTypes = {
-  base: BaseNode,
   header: headerNode,
-  addAction: AddActionNode,
+  add: AddNode,
+  base: BaseNode,
 };
 
 interface NodeBaseDataFlowProps {
@@ -18,20 +18,10 @@ interface NodeBaseDataFlowProps {
   onNodeClick?: (event: React.MouseEvent, object: any) => void;
 }
 
-export function NodeBaseDataFlow({
-  nodes,
-  edges,
-  onNodeClick,
-}: NodeBaseDataFlowProps) {
+export function NodeBaseDataFlow({ nodes, edges, onNodeClick }: NodeBaseDataFlowProps) {
   return (
     <div style={{ height: 'calc(100vh - 100px)' }}>
-      <ReactFlow
-        nodeTypes={nodeTypes}
-        nodes={nodes}
-        edges={edges}
-        zoomOnScroll={false}
-        onNodeClick={onNodeClick}
-      />
+      <ReactFlow nodeTypes={nodeTypes} nodes={nodes} edges={edges} zoomOnScroll={false} onNodeClick={onNodeClick} />
     </div>
   );
 }
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
similarity index 55%
rename from frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
rename to frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
index a9bddaf50..b09d5fc55 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
@@ -1,5 +1,5 @@
+import React from 'react';
 import Image from 'next/image';
-import React, { memo } from 'react';
 import styled from 'styled-components';
 import { Text } from '@/reuseable-components';
 import { Handle, Position } from '@xyflow/react';
@@ -42,36 +42,41 @@ const SubTitle = styled(Text)`
 `;
 
 interface BaseNodeProps {
+  data: Record<string, any>;
+
+  id: string;
+  parentId?: any;
+  type: string;
+
   isConnectable: boolean;
+  selectable: boolean;
+  selected?: any;
+  deletable: boolean;
+  draggable: boolean;
+  dragging: boolean;
+  dragHandle?: any;
+
+  width: number;
+  height: number;
+  zIndex: number;
+  positionAbsoluteX: number;
+  positionAbsoluteY: number;
+  sourcePosition?: any;
+  targetPosition?: any;
 }
 
-export default memo(({ isConnectable }: BaseNodeProps) => {
+const AddNode = ({ id, isConnectable, data }: BaseNodeProps) => {
   return (
     <BaseNodeContainer>
       <TitleWrapper>
-        <Image
-          src={'/icons/common/plus.svg'}
-          width={16}
-          height={16}
-          alt="plus"
-        />
-        <Title>{'ADD ACTION'}</Title>
+        <Image src='/icons/common/plus.svg' width={16} height={16} alt='plus' />
+        <Title>{data.title}</Title>
       </TitleWrapper>
-      <SubTitle>{'Add first action to modify the OpenTelemetry data'}</SubTitle>
-      <Handle
-        type="target"
-        position={Position.Left}
-        id="action-input"
-        isConnectable={isConnectable}
-        style={{ visibility: 'hidden' }}
-      />
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="action-output"
-        isConnectable={isConnectable}
-        style={{ visibility: 'hidden' }}
-      />
+      <SubTitle>{data.subTitle}</SubTitle>
+      <Handle type='target' position={Position.Left} id={`${id}-input`} isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
+      <Handle type='source' position={Position.Right} id={`${id}-output`} isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
     </BaseNodeContainer>
   );
-});
+};
+
+export default AddNode;
diff --git a/frontend/webapp/store/index.ts b/frontend/webapp/store/index.ts
index aa72ad258..f116f1d8a 100644
--- a/frontend/webapp/store/index.ts
+++ b/frontend/webapp/store/index.ts
@@ -7,8 +7,7 @@ const rootReducer = combineReducers({
 
 export const store = configureStore({
   reducer: rootReducer,
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware({ serializableCheck: false }),
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
 });
 
 export type RootState = ReturnType<typeof store.getState>;
@@ -17,3 +16,4 @@ export type AppDispatch = typeof store.dispatch;
 export * from './slices';
 export * from './useAppStore';
 export * from './useDrawerStore';
+export * from './useModalStore';
diff --git a/frontend/webapp/store/useModalStore.tsx b/frontend/webapp/store/useModalStore.tsx
new file mode 100644
index 000000000..161308c49
--- /dev/null
+++ b/frontend/webapp/store/useModalStore.tsx
@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface ModalStoreState {
+  currentModal: string;
+  setCurrentModal: (str: string) => void;
+}
+
+export const useModalStore = create<ModalStoreState>((set) => ({
+  currentModal: '',
+  setCurrentModal: (str) => set({ currentModal: str }),
+}));
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index c90203c9e..b6b6b553c 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -38,6 +38,12 @@ export interface StepProps {
 
 export enum OVERVIEW_ENTITY_TYPES {
   SOURCE = 'source',
-  DESTINATION = 'destination',
   ACTION = 'action',
+  DESTINATION = 'destination',
+}
+
+export enum OVERVIEW_NODE_TYPES {
+  ADD_SOURCE = 'addSource',
+  ADD_ACTION = 'addAction',
+  ADD_DESTIONATION = 'addDestination',
 }

From 9ac0d137d1e3f369a5c152b37a80231107fbd2c6 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 29 Oct 2024 11:56:30 +0200
Subject: [PATCH 317/374] [GEN-1583]: fix validations for "add actions" custom
 fields (#1651)

---
 .../custom-fields/add-cluster-info.tsx        |  4 +-
 .../custom-fields/delete-attributes.tsx       |  4 +-
 .../custom-fields/error-sampler.tsx           |  4 +-
 .../custom-fields/latency-sampler.tsx         |  4 +-
 .../custom-fields/pii-masking.tsx             |  4 +-
 .../custom-fields/probabilistic-sampler.tsx   |  4 +-
 .../custom-fields/rename-attributes.tsx       |  4 +-
 .../webapp/hooks/actions/useActionFormData.ts |  2 +-
 .../reuseable-components/input-list/index.tsx | 40 ++++++++++++-------
 9 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
index b28cbf97d..485809608 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
@@ -34,7 +34,9 @@ const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
       })),
     };
 
-    setValue(JSON.stringify(payload));
+    const str = !!payload.clusterAttributes.length ? JSON.stringify(payload) : '';
+
+    setValue(str);
   };
 
   return (
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
index e4ddf55e5..f84f7878c 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
@@ -19,7 +19,9 @@ const DeleteAttributes: React.FC<Props> = ({ value, setValue }) => {
       attributeNamesToDelete: arr,
     };
 
-    setValue(JSON.stringify(payload));
+    const str = !!payload.attributeNamesToDelete.length ? JSON.stringify(payload) : '';
+
+    setValue(str);
   };
 
   return (
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
index 14f0fb6b1..396c3c883 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
@@ -28,7 +28,9 @@ const ErrorSampler: React.FC<Props> = ({ value, setValue }) => {
       fallback_sampling_ratio: num,
     };
 
-    setValue(JSON.stringify(payload));
+    const str = !!payload.fallback_sampling_ratio ? JSON.stringify(payload) : '';
+
+    setValue(str);
   };
 
   return (
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
index 0eddf2e95..bec057805 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
@@ -19,7 +19,9 @@ const LatencySampler: React.FC<Props> = ({ value, setValue }) => {
       endpoints_filters: arr,
     };
 
-    setValue(JSON.stringify(payload));
+    const str = !!payload.endpoints_filters.length ? JSON.stringify(payload) : '';
+
+    setValue(str);
   };
 
   return (
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
index a2324f90a..eb487d607 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
@@ -48,7 +48,9 @@ const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
       piiCategories: arr,
     };
 
-    setValue(JSON.stringify(payload));
+    const str = !!arr.length ? JSON.stringify(payload) : '';
+
+    setValue(str);
     setIsLastSelection(arr.length === 1);
   };
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
index 75ebb1e6b..674e42223 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
@@ -24,7 +24,9 @@ const ProbabilisticSampler: React.FC<Props> = ({ value, setValue }) => {
       sampling_percentage: String(num),
     };
 
-    setValue(JSON.stringify(payload));
+    const str = !!payload.sampling_percentage ? JSON.stringify(payload) : '';
+
+    setValue(str);
   };
 
   return (
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
index aee984694..734be8c8f 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
@@ -31,7 +31,9 @@ const RenameAttributes: React.FC<Props> = ({ value, setValue }) => {
       payload.renames[obj.key] = obj.value;
     });
 
-    setValue(JSON.stringify(payload));
+    const str = !!arr.length ? JSON.stringify(payload) : '';
+
+    setValue(str);
   };
 
   return (
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index ef4b525d7..0225f7977 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ActionInput } from '@/types';
+import type { ActionInput } from '@/types';
 
 const INITIAL: ActionInput = {
   type: '',
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 4fc9ff711..932d21a1d 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Input } from '../input';
 import { Button } from '../button';
@@ -75,27 +75,39 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
     if (!inputs.length) setInputs(INITIAL);
   }, []);
 
+  const recordedValues = useRef('');
+
   useEffect(() => {
-    if (initialValues.length > 0) {
-      onChange(initialValues);
+    // Filter out rows where either key or value is empty
+    const validValues = inputs.filter((val) => val.trim() !== '');
+    const stringified = JSON.stringify(validValues);
+
+    // Only trigger onChange if valid key-value pairs have changed
+    if (recordedValues.current !== stringified) {
+      recordedValues.current = stringified;
+
+      if (onChange) onChange(validValues);
     }
-  }, [initialValues]);
+  }, [inputs, onChange]);
 
   const handleAddInput = () => {
-    setInputs([...inputs, '']);
+    setInputs((prev) => {
+      const payload = [...prev];
+      payload.push('');
+      return payload;
+    });
   };
 
-  const handleDeleteInput = (index: number) => {
-    const newInputs = inputs.filter((_, i) => i !== index);
-    setInputs(newInputs);
-    onChange(newInputs);
+  const handleDeleteInput = (idx: number) => {
+    setInputs((prev) => prev.filter((_, i) => i !== idx));
   };
 
-  const handleInputChange = (value: string, index: number) => {
-    const newInputs = [...inputs];
-    newInputs[index] = value;
-    setInputs(newInputs);
-    onChange(newInputs);
+  const handleInputChange = (val: string, idx: number) => {
+    setInputs((prev) => {
+      const payload = [...prev];
+      payload[idx] = val;
+      return payload;
+    });
   };
 
   // Check if any input field is empty

From 33cb867e209e38694e45ff8632369d9601fd0566 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 29 Oct 2024 16:17:32 +0200
Subject: [PATCH 318/374] [GEN-1521]: update actions (#1652)

---
 .../actions/action-drawer-container/index.tsx | 65 +++++++++++++++++--
 .../main/actions/choose-action-body/index.tsx | 45 ++++++++-----
 .../destination-drawer-container/index.tsx    | 34 +++-------
 .../main/overview/overview-drawer/index.tsx   | 56 ++++++++++++----
 frontend/webapp/graphql/mutations/action.ts   |  8 +++
 .../webapp/hooks/actions/useActionFormData.ts | 40 +++++++++++-
 .../webapp/hooks/actions/useCreateAction.ts   |  9 ++-
 .../webapp/hooks/actions/useUpdateAction.ts   | 40 ++++++++++++
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../reuseable-components/toggle/index.tsx     | 18 ++---
 frontend/webapp/store/useDrawerStore.tsx      |  6 +-
 11 files changed, 243 insertions(+), 79 deletions(-)
 create mode 100644 frontend/webapp/hooks/actions/useUpdateAction.ts

diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
index f8c794091..8a752be45 100644
--- a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
@@ -1,25 +1,78 @@
-import React, { useMemo } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
 import { CardDetails } from '@/components';
-import type { ActionDataParsed } from '@/types';
+import { useActionFormData } from '@/hooks';
+import { ChooseActionBody } from '../choose-action-body';
+import type { ActionDataParsed, ActionInput } from '@/types';
 import buildCardFromActionSpec from './build-card-from-action-spec';
+import { ACTION_OPTIONS } from '../choose-action-modal/action-options';
+
+export type ActionDrawerHandle = {
+  getCurrentData: () => ActionInput | null;
+};
 
 interface Props {
   isEditing: boolean;
 }
 
-const ActionDrawer: React.FC = ({ isEditing }: Props) => {
+const ActionDrawer = forwardRef<ActionDrawerHandle, Props>(({ isEditing }, ref) => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const { formData, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useActionFormData();
 
   const cardData = useMemo(() => {
     if (!selectedItem) return [];
 
-    const arr = buildCardFromActionSpec(selectedItem.item as ActionDataParsed);
+    const { item } = selectedItem as { item: ActionDataParsed };
+    const arr = buildCardFromActionSpec(item);
 
     return arr;
   }, [selectedItem]);
 
-  return <CardDetails data={cardData} />;
-};
+  const thisAction = useMemo(() => {
+    if (!selectedItem || !isEditing) {
+      resetFormData();
+      return undefined;
+    }
+
+    const { item } = selectedItem as { item: ActionDataParsed };
+    const found =
+      ACTION_OPTIONS.find(({ type }) => type === item.type) ||
+      ACTION_OPTIONS.find(({ id }) => id === 'sampler')?.items?.find(({ type }) => type === item.type);
+
+    if (!found) return undefined;
+
+    loadFormWithDrawerItem(selectedItem);
+
+    return found;
+  }, [selectedItem, isEditing]);
+
+  useImperativeHandle(ref, () => ({
+    getCurrentData: () => (validateForm() ? formData : null),
+  }));
+
+  return isEditing && thisAction ? (
+    <FormContainer>
+      <ChooseActionBody isUpdate action={thisAction} formData={formData} handleFormChange={handleFormChange} />
+    </FormContainer>
+  ) : (
+    <CardDetails data={cardData} />
+  );
+});
+
+ActionDrawer.displayName = 'ActionDrawer';
 
 export { ActionDrawer };
+
+const FormContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 24px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: overlay;
+  max-height: calc(100vh - 220px);
+`;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 1f95e57d8..65229fd37 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -3,8 +3,7 @@ import styled from 'styled-components';
 import { type ActionInput } from '@/types';
 import ActionCustomFields from './custom-fields';
 import { type ActionOption } from '../choose-action-modal/action-options';
-import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
-import { MonitoringCheckboxes } from '@/reuseable-components/monitoring-checkboxes';
+import { DocsButton, Input, Text, TextArea, Toggle, MonitoringCheckboxes } from '@/reuseable-components';
 
 const Description = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
@@ -22,18 +21,32 @@ const FieldTitle = styled(Text)`
 `;
 
 interface ChooseActionContentProps {
+  isUpdate?: boolean;
   action: ActionOption;
   formData: ActionInput;
   handleFormChange: (key: keyof ActionInput, val: any) => void;
 }
 
-const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData, handleFormChange }) => {
+const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action, formData, handleFormChange }) => {
   return (
     <>
-      <Description>
-        {action.docsDescription}
-        <DocsButton endpoint={action.docsEndpoint} />
-      </Description>
+      {isUpdate && (
+        <FieldWrapper>
+          <FieldTitle>Status</FieldTitle>
+          <Toggle
+            title={!formData.disable ? 'Active' : 'Inactive'}
+            initialValue={!formData.disable}
+            onChange={(bool) => handleFormChange('disable', !bool)}
+          />
+        </FieldWrapper>
+      )}
+
+      {!isUpdate && (
+        <Description>
+          {action.docsDescription}
+          <DocsButton endpoint={action.docsEndpoint} />
+        </Description>
+      )}
 
       <FieldWrapper>
         <MonitoringCheckboxes
@@ -43,14 +56,16 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action, formData
         />
       </FieldWrapper>
 
-      <FieldWrapper>
-        <FieldTitle>Action name</FieldTitle>
-        <Input
-          placeholder='Use a name that describes the action'
-          value={formData.name}
-          onChange={({ target: { value } }) => handleFormChange('name', value)}
-        />
-      </FieldWrapper>
+      {!isUpdate && (
+        <FieldWrapper>
+          <FieldTitle>Action name</FieldTitle>
+          <Input
+            placeholder='Use a name that describes the action'
+            value={formData.name}
+            onChange={({ target: { value } }) => handleFormChange('name', value)}
+          />
+        </FieldWrapper>
+      )}
 
       <ActionCustomFields actionType={action.type} value={formData.details} setValue={(val) => handleFormChange('details', val)} />
 
diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
index fa354eeb9..0190e3d1e 100644
--- a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -1,16 +1,8 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import styled from 'styled-components';
 import { ExportedSignals } from '@/types';
 import { CardDetails, EditDestinationForm } from '@/components';
-import {
-  useDestinationFormData,
-  useEditDestinationFormHandlers,
-} from '@/hooks';
+import { useDestinationFormData, useEditDestinationFormHandlers } from '@/hooks';
 
 export type DestinationDrawerHandle = {
   getCurrentData: () => {
@@ -24,24 +16,12 @@ interface DestinationDrawerProps {
   isEditing: boolean;
 }
 
-const DestinationDrawer = forwardRef<
-  DestinationDrawerHandle,
-  DestinationDrawerProps
->(({ isEditing }, ref) => {
+const DestinationDrawer = forwardRef<DestinationDrawerHandle, DestinationDrawerProps>(({ isEditing }, ref) => {
   const [isFormDirty, setIsFormDirty] = useState(false);
-  const {
-    cardData,
-    dynamicFields,
-    exportedSignals,
-    supportedSignals,
-    destinationType,
-    resetFormData,
-    setDynamicFields,
-    setExportedSignals,
-  } = useDestinationFormData();
+  const { cardData, dynamicFields, exportedSignals, supportedSignals, destinationType, resetFormData, setDynamicFields, setExportedSignals } =
+    useDestinationFormData();
 
-  const { handleSignalChange, handleDynamicFieldChange } =
-    useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
+  const { handleSignalChange, handleDynamicFieldChange } = useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
 
   useEffect(() => {
     if (!isEditing && isFormDirty) {
@@ -83,6 +63,8 @@ const DestinationDrawer = forwardRef<
   );
 });
 
+DestinationDrawer.displayName = 'DestinationDrawer';
+
 export { DestinationDrawer };
 
 const FormContainer = styled.div`
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index e5d1984ce..99a09daaa 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -5,18 +5,19 @@ import { getActionIcon, LANGUAGES_LOGOS } from '@/utils';
 import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
-import { ActionDrawer } from '../../actions';
 import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
-import { useActualSources, useUpdateDestination } from '@/hooks';
-import { DestinationDrawer, DestinationDrawerHandle } from '../../destinations';
+import { useActualSources, useNotify, useUpdateDestination } from '@/hooks';
+import { ActionDrawer, type ActionDrawerHandle } from '../../actions';
+import { DestinationDrawer, type DestinationDrawerHandle } from '../../destinations';
 import { getMainContainerLanguageLogo, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils/constants/programming-languages';
 import { WorkloadId, K8sActualSource, ActualDestination, OVERVIEW_ENTITY_TYPES, PatchSourceRequestInput, ActionDataParsed } from '@/types';
+import { useUpdateAction } from '@/hooks/actions/useUpdateAction';
 
 const componentMap = {
   source: SourceDrawer,
   action: ActionDrawer,
-  destination: ({ isEditing }: { isEditing: boolean }) => <DestinationDrawer isEditing={isEditing} />,
+  destination: DestinationDrawer,
 };
 
 const DRAWER_WIDTH = '640px';
@@ -29,12 +30,21 @@ const OverviewDrawer = () => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [title, setTitle] = useState('');
 
+  const notify = useNotify();
+  const { updateAction } = useUpdateAction();
   const { updateExistingDestination } = useUpdateDestination();
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
 
   const titleRef = useRef<HTMLInputElement>(null);
+  const actionDrawerRef = useRef<ActionDrawerHandle>(null);
   const destinationDrawerRef = useRef<DestinationDrawerHandle>(null);
 
+  const refMap = {
+    source: undefined,
+    action: actionDrawerRef,
+    destination: destinationDrawerRef,
+  };
+
   useEffect(initialTitle, [selectedItem]);
 
   //TODO: split file to separate components by type: source, destination, action
@@ -79,13 +89,14 @@ const OverviewDrawer = () => {
     if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
       if (destinationDrawerRef.current && titleRef.current) {
         const newTitle = titleRef.current.value;
-        const destinationData = {
-          ...destinationDrawerRef.current.getCurrentData(),
+        const formData = destinationDrawerRef.current.getCurrentData();
+        const payload = {
+          ...formData,
           name: newTitle,
         };
 
         try {
-          await updateExistingDestination(id as string, destinationData);
+          await updateExistingDestination(id as string, payload);
         } catch (error) {
           console.error('Error updating destination:', error);
         }
@@ -94,7 +105,28 @@ const OverviewDrawer = () => {
     }
 
     if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
-      alert('TODO !');
+      if (actionDrawerRef.current && titleRef.current) {
+        const newTitle = titleRef.current.value;
+        const formData = actionDrawerRef.current.getCurrentData();
+
+        if (!formData) {
+          notify({
+            message: 'Required fields are missing!',
+            title: 'Update Action Error',
+            type: 'error',
+            target: 'notification',
+            crdType: 'notification',
+          });
+        } else {
+          const payload = {
+            ...formData,
+            name: newTitle,
+          };
+
+          await updateAction(id as string, payload);
+          setIsEditing(false);
+        }
+      }
     }
 
     if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
@@ -159,6 +191,7 @@ const OverviewDrawer = () => {
 
   const { type, item } = selectedItem;
   const SpecificComponent = componentMap[type];
+  const specificRef = refMap[type];
 
   return SpecificComponent ? (
     <>
@@ -174,11 +207,8 @@ const OverviewDrawer = () => {
           />
 
           <ContentArea>
-            {type === OVERVIEW_ENTITY_TYPES.DESTINATION ? (
-              <DestinationDrawer ref={destinationDrawerRef} isEditing={isEditing} />
-            ) : (
-              <SpecificComponent isEditing={isEditing} />
-            )}
+            {/* @ts-ignore (because of ref) */}
+            <SpecificComponent ref={specificRef} isEditing={isEditing} />
           </ContentArea>
 
           {isEditing && <DrawerFooter onSave={handleSave} onCancel={handleCancel} onDelete={() => setIsDeleteModalOpen(true)} />}
diff --git a/frontend/webapp/graphql/mutations/action.ts b/frontend/webapp/graphql/mutations/action.ts
index aee5f41e3..c358435f1 100644
--- a/frontend/webapp/graphql/mutations/action.ts
+++ b/frontend/webapp/graphql/mutations/action.ts
@@ -7,3 +7,11 @@ export const CREATE_ACTION = gql`
     }
   }
 `;
+
+export const UPDATE_ACTION = gql`
+  mutation UpdateAction($id: ID!, $action: ActionInput!) {
+    updateAction(id: $id, action: $action) {
+      id
+    }
+  }
+`;
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index 0225f7977..7ddd74e55 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import type { ActionInput } from '@/types';
+import type { ActionDataParsed, ActionInput } from '@/types';
+import { DrawerBaseItem } from '@/store';
 
 const INITIAL: ActionInput = {
   type: '',
@@ -43,10 +44,47 @@ export function useActionFormData() {
     return ok;
   };
 
+  const loadFormWithDrawerItem = (drawerItem: DrawerBaseItem) => {
+    const { type, spec } = drawerItem.item as ActionDataParsed;
+
+    const updatedData: ActionInput = {
+      ...INITIAL,
+      type,
+    };
+
+    Object.entries(spec).forEach(([k, v]) => {
+      switch (k) {
+        case 'actionName': {
+          updatedData['name'] = v;
+          break;
+        }
+
+        case 'disabled': {
+          updatedData['disable'] = v;
+          break;
+        }
+
+        case 'notes':
+        case 'signals': {
+          updatedData[k] = v;
+          break;
+        }
+
+        default: {
+          updatedData['details'] = JSON.stringify({ [k]: v });
+          break;
+        }
+      }
+    });
+
+    setFormData(updatedData);
+  };
+
   return {
     formData,
     handleFormChange,
     resetFormData,
     validateForm,
+    loadFormWithDrawerItem,
   };
 }
diff --git a/frontend/webapp/hooks/actions/useCreateAction.ts b/frontend/webapp/hooks/actions/useCreateAction.ts
index f8449da78..91d36d857 100644
--- a/frontend/webapp/hooks/actions/useCreateAction.ts
+++ b/frontend/webapp/hooks/actions/useCreateAction.ts
@@ -9,7 +9,7 @@ export const useCreateAction = ({ onSuccess }: { onSuccess?: () => void }) => {
     onError: (error) =>
       notify({
         message: error.message,
-        title: 'Create Action Error',
+        title: 'Create Action',
         type: 'error',
         target: 'notification',
         crdType: 'notification',
@@ -17,6 +17,13 @@ export const useCreateAction = ({ onSuccess }: { onSuccess?: () => void }) => {
     onCompleted: () => {
       refetch();
       onSuccess && onSuccess();
+      notify({
+        message: 'Successfully created',
+        title: 'Create Action',
+        type: 'success',
+        target: 'notification',
+        crdType: 'notification',
+      });
     },
   });
 
diff --git a/frontend/webapp/hooks/actions/useUpdateAction.ts b/frontend/webapp/hooks/actions/useUpdateAction.ts
new file mode 100644
index 000000000..6a5d8f1f1
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useUpdateAction.ts
@@ -0,0 +1,40 @@
+import { useNotify } from '../useNotify';
+import type { ActionInput } from '@/types';
+import { useMutation } from '@apollo/client';
+import { UPDATE_ACTION } from '@/graphql/mutations/action';
+import { useComputePlatform } from '../compute-platform';
+import { useDrawerStore } from '@/store';
+
+export const useUpdateAction = () => {
+  const [updateAction, { loading }] = useMutation(UPDATE_ACTION, {
+    onError: (error) => {
+      notify({
+        message: error.message,
+        title: 'Update Action',
+        type: 'error',
+        target: 'notification',
+        crdType: 'notification',
+      });
+    },
+    onCompleted: () => {
+      setDrawerItem(null);
+      refetch();
+      notify({
+        message: 'Successfully updated',
+        title: 'Update Action',
+        type: 'success',
+        target: 'notification',
+        crdType: 'notification',
+      });
+    },
+  });
+
+  const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
+  const { refetch } = useComputePlatform();
+  const notify = useNotify();
+
+  return {
+    updateAction: (id: string, action: ActionInput) => updateAction({ variables: { id, action } }),
+    loading,
+  };
+};
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index d1d7431a3..51870d07d 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -13,6 +13,7 @@ export * from './modal';
 export * from './navigation-buttons';
 export * from './tag';
 export * from './checkbox-list';
+export * from './monitoring-checkboxes';
 export * from './notification-note';
 export * from './fade-loader';
 export * from './textarea';
diff --git a/frontend/webapp/reuseable-components/toggle/index.tsx b/frontend/webapp/reuseable-components/toggle/index.tsx
index 893fd788e..fa1cc5b0f 100644
--- a/frontend/webapp/reuseable-components/toggle/index.tsx
+++ b/frontend/webapp/reuseable-components/toggle/index.tsx
@@ -28,8 +28,7 @@ const ToggleSwitch = styled.div<{ isActive: boolean; disabled?: boolean }>`
   display: flex;
   align-items: center;
   padding: 2px;
-  background-color: ${({ isActive, theme }) =>
-    isActive ? theme.colors.primary : 'transparent'};
+  background-color: ${({ isActive, theme }) => (isActive ? theme.colors.primary : 'transparent')};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ isActive }) => (isActive ? 1 : 0.4)};
@@ -40,19 +39,12 @@ const ToggleSwitch = styled.div<{ isActive: boolean; disabled?: boolean }>`
     height: 12px;
     border-radius: 50%;
     background-color: ${({ theme }) => theme.colors.secondary};
-    transform: ${({ isActive }) =>
-      isActive ? 'translateX(12px)' : 'translateX(0)'};
+    transform: ${({ isActive }) => (isActive ? 'translateX(12px)' : 'translateX(0)')};
     transition: transform 0.3s;
   }
 `;
 
-const Toggle: React.FC<ToggleProps> = ({
-  title,
-  tooltip,
-  initialValue = false,
-  onChange,
-  disabled,
-}) => {
+const Toggle: React.FC<ToggleProps> = ({ title, tooltip, initialValue = false, onChange, disabled }) => {
   const [isActive, setIsActive] = useState(initialValue);
 
   useEffect(() => {
@@ -74,9 +66,7 @@ const Toggle: React.FC<ToggleProps> = ({
       <Container disabled={disabled} onClick={handleToggle}>
         <ToggleSwitch isActive={isActive} disabled={disabled} />
         <Text size={14}>{title}</Text>
-        {tooltip && (
-          <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
-        )}
+        {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} />}
       </Container>
     </Tooltip>
   );
diff --git a/frontend/webapp/store/useDrawerStore.tsx b/frontend/webapp/store/useDrawerStore.tsx
index 3b392ef5e..d8fe3c52c 100644
--- a/frontend/webapp/store/useDrawerStore.tsx
+++ b/frontend/webapp/store/useDrawerStore.tsx
@@ -4,7 +4,7 @@ import { ActionDataParsed, ActualDestination, K8sActualSource, WorkloadId } from
 
 type ItemType = 'source' | 'action' | 'destination';
 
-interface BaseItem {
+export interface DrawerBaseItem {
   id: string | WorkloadId;
   item?: K8sActualSource | ActionDataParsed | ActualDestination;
   type: ItemType;
@@ -12,8 +12,8 @@ interface BaseItem {
 }
 
 interface DrawerStoreState {
-  selectedItem: BaseItem | null;
-  setSelectedItem: (item: BaseItem | null) => void;
+  selectedItem: DrawerBaseItem | null;
+  setSelectedItem: (item: DrawerBaseItem | null) => void;
   isDrawerOpen: boolean;
   openDrawer: () => void;
   closeDrawer: () => void;

From d42c32b73a0666593ccc3e3a199acb3c4457a0aa Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 29 Oct 2024 17:54:11 +0200
Subject: [PATCH 319/374] [GEN-1593]: upgraded "status" component (#1655)

---
 .../common/configured-fields/index.tsx        |  9 +-
 .../webapp/components/main/header/index.tsx   | 13 +--
 .../build-card-from-action-spec.ts            |  2 +-
 .../webapp/hooks/actions/useActionCRUD.ts     | 77 +++++++++++++++
 .../connection-status/index.tsx               | 89 ------------------
 frontend/webapp/reuseable-components/index.ts |  2 +-
 .../nodes-data-flow/builder.ts                | 27 ++++--
 .../nodes-data-flow/nodes/base-node.tsx       | 93 +++++++------------
 .../reuseable-components/status/index.tsx     | 92 ++++++++++++++++++
 frontend/webapp/types/common.ts               |  4 +
 .../webapp/utils/functions/get-status-icon.ts |  5 +
 .../utils/functions/{index.tsx => index.ts}   |  1 +
 12 files changed, 245 insertions(+), 169 deletions(-)
 create mode 100644 frontend/webapp/hooks/actions/useActionCRUD.ts
 delete mode 100644 frontend/webapp/reuseable-components/connection-status/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/status/index.tsx
 create mode 100644 frontend/webapp/utils/functions/get-status-icon.ts
 rename frontend/webapp/utils/functions/{index.tsx => index.ts} (63%)

diff --git a/frontend/webapp/components/common/configured-fields/index.tsx b/frontend/webapp/components/common/configured-fields/index.tsx
index c1fbcf01f..4a12ca226 100644
--- a/frontend/webapp/components/common/configured-fields/index.tsx
+++ b/frontend/webapp/components/common/configured-fields/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
-import { Text } from '@/reuseable-components';
+import { Text, Status } from '@/reuseable-components';
 
 type TypeDetail = {
   title: string;
@@ -81,7 +81,12 @@ export const ConfiguredFields: React.FC<ConfiguredFieldsProps> = ({ details }) =
       {details.map((detail, index) => (
         <ListItem key={index}>
           <ItemTitle>{detail.title}</ItemTitle>
-          <ItemValue>{parseValue(detail.value)}</ItemValue>
+
+          {detail.title === 'Status' ? (
+            <Status isActive={detail.value == 'true'} withIcon withBorder withSmaller withSpecialFont />
+          ) : (
+            <ItemValue>{parseValue(detail.value)}</ItemValue>
+          )}
         </ListItem>
       ))}
     </ListContainer>
diff --git a/frontend/webapp/components/main/header/index.tsx b/frontend/webapp/components/main/header/index.tsx
index aa33bb0c2..13e83668e 100644
--- a/frontend/webapp/components/main/header/index.tsx
+++ b/frontend/webapp/components/main/header/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
-import { ConnectionStatus } from '@/reuseable-components';
 import { PlatformTitle } from './cp-title';
+import { Status } from '@/reuseable-components';
 
 interface MainHeaderProps {}
 
@@ -29,17 +29,12 @@ export const MainHeader: React.FC<MainHeaderProps> = () => {
   return (
     <HeaderContainer>
       <Logo>
-        <Image
-          src="/brand/transparent-logo-white.svg"
-          alt="logo"
-          width={84}
-          height={20}
-        />
+        <Image src='/brand/transparent-logo-white.svg' alt='logo' width={84} height={20} />
       </Logo>
       <PlatformTitleWrapper>
-        <PlatformTitle type="k8s" />
+        <PlatformTitle type='k8s' />
       </PlatformTitleWrapper>
-      <ConnectionStatus title="Connection Alive" status="alive" />
+      <Status title='Connection Alive' isActive withIcon withBackground />
     </HeaderContainer>
   );
 };
diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/build-card-from-action-spec.ts b/frontend/webapp/containers/main/actions/action-drawer-container/build-card-from-action-spec.ts
index a14628433..7b872ebf2 100644
--- a/frontend/webapp/containers/main/actions/action-drawer-container/build-card-from-action-spec.ts
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/build-card-from-action-spec.ts
@@ -21,7 +21,7 @@ const buildCardFromActionSpec = (action: ActionDataParsed) => {
 
   const arr = [
     { title: 'Type', value: type || 'N/A' },
-    { title: 'Enabled', value: String(!disabled) },
+    { title: 'Status', value: String(!disabled) },
     { title: 'Name', value: actionName || 'N/A' },
     { title: 'Notes', value: notes || 'N/A' },
     { title: 'Monitors', value: signals.map((str) => str.toLowerCase()).join(', ') },
diff --git a/frontend/webapp/hooks/actions/useActionCRUD.ts b/frontend/webapp/hooks/actions/useActionCRUD.ts
new file mode 100644
index 000000000..7e9b814c8
--- /dev/null
+++ b/frontend/webapp/hooks/actions/useActionCRUD.ts
@@ -0,0 +1,77 @@
+import { useDrawerStore } from '@/store';
+import { useNotify } from '../useNotify';
+import { useMutation } from '@apollo/client';
+import type { ActionInput, ActionsType } from '@/types';
+import { useComputePlatform } from '../compute-platform';
+import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations/action';
+
+interface UseActionCrudParams {
+  onSuccess?: () => void;
+  onError?: () => void;
+}
+
+export const useActionCRUD = (params?: UseActionCrudParams) => {
+  const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
+  const { refetch } = useComputePlatform();
+  const notify = useNotify();
+
+  const handleError = (title: string, message: string) => {
+    notify({
+      title,
+      message,
+      type: 'error',
+      target: 'notification',
+      crdType: 'notification',
+    });
+
+    if (params?.onError) params.onError();
+  };
+
+  const handleComplete = (title: string, message: string) => {
+    setDrawerItem(null);
+    refetch();
+    notify({
+      title,
+      message,
+      type: 'success',
+      target: 'notification',
+      crdType: 'notification',
+    });
+
+    if (params?.onSuccess) params.onSuccess();
+  };
+
+  const [createAction, cState] = useMutation(CREATE_ACTION, {
+    onError: (error) => {
+      handleError('Create Action', error.message);
+    },
+    onCompleted: () => {
+      handleComplete('Create Action', 'successfully created');
+    },
+  });
+
+  const [updateAction, uState] = useMutation(UPDATE_ACTION, {
+    onError: (error) => {
+      handleError('Update Action', error.message);
+    },
+    onCompleted: () => {
+      handleComplete('Update Action', 'successfully updated');
+    },
+  });
+
+  const [deleteAction, dState] = useMutation(DELETE_ACTION, {
+    onError: (error) => {
+      handleError('Delete Action', error.message);
+    },
+    onCompleted: () => {
+      handleComplete('Delete Action', 'successfully deleted');
+    },
+  });
+
+  return {
+    loading: cState.loading || uState.loading || dState.loading,
+    createAction: (action: ActionInput) => createAction({ variables: { action } }),
+    updateAction: (id: string, action: ActionInput) => updateAction({ variables: { id, action } }),
+    deleteAction: (id: string, actionType: ActionsType) => deleteAction({ variables: { id, actionType } }),
+  };
+};
diff --git a/frontend/webapp/reuseable-components/connection-status/index.tsx b/frontend/webapp/reuseable-components/connection-status/index.tsx
deleted file mode 100644
index be67caa13..000000000
--- a/frontend/webapp/reuseable-components/connection-status/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import Image from 'next/image';
-import React from 'react';
-import { Text } from '../text';
-import styled from 'styled-components';
-
-interface ConnectionStatusProps {
-  title: string;
-  subtitle?: string;
-  status: 'alive' | 'lost';
-}
-
-const StatusWrapper = styled.div<{ status: 'alive' | 'lost' }>`
-  display: flex;
-  align-items: center;
-  padding: 8px 24px;
-  border-radius: 32px;
-  background: ${({ status }) =>
-    status === 'alive'
-      ? `linear-gradient(
-    90deg,
-    rgba(23, 32, 19, 0) 0%,
-    rgba(23, 32, 19, 0.8) 50%,
-    #172013 100%
-  )`
-      : `linear-gradient(90deg, rgba(51, 21, 21, 0.00) 0%, rgba(51, 21, 21, 0.80) 50%, #331515 100%)`};
-`;
-
-const IconWrapper = styled.div`
-  margin-right: 8px;
-  display: flex;
-  align-items: center;
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Title = styled(Text)<{ status: 'alive' | 'lost' }>`
-  font-weight: 400;
-  font-size: 14px;
-  color: ${({ status, theme }) =>
-    status === 'alive' ? theme.text.success : theme.text.error};
-`;
-
-const Subtitle = styled(Text)`
-  font-size: 12px;
-  font-weight: 400;
-  color: #db5151;
-`;
-
-const TextDivider = styled.div`
-  width: 1px;
-  height: 12px;
-  background: rgba(237, 124, 124, 0.16);
-  margin: 0 8px;
-`;
-
-const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
-  title,
-  subtitle,
-  status,
-}) => {
-  return (
-    <StatusWrapper status={status}>
-      <IconWrapper>
-        <Image
-          src={`/icons/notification/${
-            status === 'alive' ? 'success-icon' : 'error-icon2'
-          }.svg`}
-          alt="status"
-          width={16}
-          height={16}
-        />
-      </IconWrapper>
-      <TextWrapper>
-        <Title status={status}>{title}</Title>
-        {subtitle && (
-          <TextWrapper>
-            <TextDivider />
-            <Subtitle>{subtitle}</Subtitle>
-          </TextWrapper>
-        )}
-      </TextWrapper>
-    </StatusWrapper>
-  );
-};
-
-export { ConnectionStatus };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 51870d07d..bd0b758b5 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -21,9 +21,9 @@ export * from './input-list';
 export * from './key-value-input-list';
 export * from './no-data-found';
 export * from './skeleton-loader';
-export * from './connection-status';
 export * from './nodes-data-flow';
 export * from './tab-list';
 export * from './auto-complete-input';
 export * from './drawer';
 export * from './input-table';
+export * from './status';
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 52391bc01..095297743 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -2,7 +2,15 @@ import theme from '@/styles/theme';
 import { getActionIcon } from '@/utils';
 import { Node, Edge } from 'react-flow-renderer';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
-import { OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, type ActionData, type ActionItem, type ActualDestination, type K8sActualSource } from '@/types';
+import {
+  OVERVIEW_ENTITY_TYPES,
+  OVERVIEW_NODE_TYPES,
+  STATUSES,
+  type ActionData,
+  type ActionItem,
+  type ActualDestination,
+  type K8sActualSource,
+} from '@/types';
 
 // Constants
 const NODE_HEIGHT = 80;
@@ -63,7 +71,7 @@ export const buildNodesAndEdges = ({
             title: 'ADD SOURCE',
             subTitle: 'Add first source to collect OpenTelemetry data',
             imageUri: '',
-            status: 'healthy',
+            status: STATUSES.HEALTHY,
           }),
         ]
       : sources.map((source, index) =>
@@ -72,7 +80,7 @@ export const buildNodesAndEdges = ({
             title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
             subTitle: source.kind,
             imageUri: getMainContainerLanguageLogo(source),
-            status: 'healthy',
+            status: STATUSES.HEALTHY,
             id: {
               kind: source.kind,
               name: source.name,
@@ -96,7 +104,7 @@ export const buildNodesAndEdges = ({
             title: 'ADD DESTIONATION',
             subTitle: 'Add first destination to monitor OpenTelemetry data',
             imageUri: '',
-            status: 'healthy',
+            status: STATUSES.HEALTHY,
           }),
         ]
       : destinations.map((destination, index) =>
@@ -105,7 +113,7 @@ export const buildNodesAndEdges = ({
             title: destination.name,
             subTitle: destination.destinationType.displayName,
             imageUri: destination.destinationType.imageUrl,
-            status: 'healthy',
+            status: STATUSES.HEALTHY,
             monitors: extractMonitors(destination.exportedSignals),
             id: destination.id,
           })
@@ -126,20 +134,21 @@ export const buildNodesAndEdges = ({
             title: 'ADD ACTION',
             subTitle: 'Add first action to modify the OpenTelemetry data',
             imageUri: '',
-            status: 'healthy',
+            status: STATUSES.HEALTHY,
           }),
         ]
       : actions.map((action, index) => {
           const actionSpec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
 
           return createNode(`action-${index}`, 'base', centerColumnX, NODE_HEIGHT * (index + 1), {
+            id: action.id,
             type: OVERVIEW_ENTITY_TYPES.ACTION,
-            title: actionSpec.actionName,
+            status: STATUSES.HEALTHY,
+            title: actionSpec.actionName || action.type,
             subTitle: action.type,
             imageUri: getActionIcon(action.type),
             monitors: actionSpec.signals,
-            status: 'healthy',
-            id: action.id,
+            isActive: !actionSpec.disabled,
           });
         })),
   ];
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
index 2d2ecb397..d84a12595 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
@@ -1,4 +1,4 @@
-import { Text } from '@/reuseable-components';
+import { Status, Text } from '@/reuseable-components';
 import { Handle, Position } from '@xyflow/react';
 import Image from 'next/image';
 import React, { memo } from 'react';
@@ -28,11 +28,7 @@ const SourceIconWrapper = styled.div`
   align-items: center;
   gap: 8px;
   border-radius: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(249, 249, 249, 0.06) 0%,
-    rgba(249, 249, 249, 0.02) 100%
-  );
+  background: linear-gradient(180deg, rgba(249, 249, 249, 0.06) 0%, rgba(249, 249, 249, 0.02) 100%);
 `;
 
 const BodyWrapper = styled.div`
@@ -55,11 +51,12 @@ const FooterText = styled(Text)`
 
 export interface NodeDataProps {
   type: 'source' | 'action' | 'destination';
+  status: 'healthy' | 'unhealthy';
   title: string;
   subTitle: string;
   imageUri: string;
   monitors?: string[];
-  status: 'healthy' | 'unhealthy';
+  isActive?: boolean;
 }
 
 interface BaseNodeProps {
@@ -68,7 +65,7 @@ interface BaseNodeProps {
 }
 
 export default memo(({ isConnectable, data }: BaseNodeProps) => {
-  const { title, subTitle, imageUri, type, monitors } = data;
+  const { title, subTitle, imageUri, type, monitors, isActive } = data;
 
   function renderHandles() {
     switch (type) {
@@ -76,46 +73,22 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
         return (
           <>
             {/* Source nodes have an output handle */}
-            <Handle
-              type="source"
-              position={Position.Right}
-              id="source-output"
-              style={{ visibility: 'hidden' }}
-              isConnectable={isConnectable}
-            />
+            <Handle type='source' position={Position.Right} id='source-output' style={{ visibility: 'hidden' }} isConnectable={isConnectable} />
           </>
         );
       case 'action':
         return (
           <>
             {/* Action nodes have both input and output handles */}
-            <Handle
-              type="target"
-              position={Position.Left}
-              id="action-input"
-              isConnectable={isConnectable}
-              style={{ visibility: 'hidden' }}
-            />
-            <Handle
-              type="source"
-              position={Position.Right}
-              id="action-output"
-              isConnectable={isConnectable}
-              style={{ visibility: 'hidden' }}
-            />
+            <Handle type='target' position={Position.Left} id='action-input' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
+            <Handle type='source' position={Position.Right} id='action-output' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
           </>
         );
       case 'destination':
         return (
           <>
             {/* Destination nodes only have an input handle */}
-            <Handle
-              style={{ visibility: 'hidden' }}
-              type="target"
-              position={Position.Left}
-              id="destination-input"
-              isConnectable={isConnectable}
-            />
+            <Handle style={{ visibility: 'hidden' }} type='target' position={Position.Left} id='destination-input' isConnectable={isConnectable} />
           </>
         );
       default:
@@ -124,34 +97,37 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
   }
 
   function renderMonitors() {
-    if (monitors) {
-      return (
-        <FooterWrapper>
-          <FooterText>{'·'}</FooterText>
-          {monitors.map((monitor, index) => (
-            <Image
-              key={index}
-              src={`/icons/monitors/${monitor}.svg`}
-              width={10}
-              height={10}
-              alt={monitor}
-            />
-          ))}
-        </FooterWrapper>
-      );
+    if (!monitors) {
+      return null;
     }
-    return null;
+
+    return (
+      <FooterWrapper>
+        <FooterText>{'·'}</FooterText>
+        {monitors.map((monitor, index) => (
+          <Image key={index} src={`/icons/monitors/${monitor}.svg`} width={10} height={10} alt={monitor} />
+        ))}
+      </FooterWrapper>
+    );
+  }
+
+  function renderStatus() {
+    if (typeof isActive !== 'boolean') {
+      return null;
+    }
+
+    return (
+      <FooterWrapper>
+        <FooterText>{'·'}</FooterText>
+        <Status isActive={isActive} withSmaller withSpecialFont />
+      </FooterWrapper>
+    );
   }
 
   return (
     <BaseNodeContainer>
       <SourceIconWrapper>
-        <Image
-          src={imageUri || '/icons/common/folder.svg'}
-          width={20}
-          height={20}
-          alt="source"
-        />
+        <Image src={imageUri || '/icons/common/folder.svg'} width={20} height={20} alt='source' />
       </SourceIconWrapper>
       <BodyWrapper>
         <Text>{title}</Text>
@@ -159,6 +135,7 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
           <FooterText>{subTitle}</FooterText>
 
           {renderMonitors()}
+          {renderStatus()}
         </FooterWrapper>
       </BodyWrapper>
       {renderHandles()}
diff --git a/frontend/webapp/reuseable-components/status/index.tsx b/frontend/webapp/reuseable-components/status/index.tsx
new file mode 100644
index 000000000..9d60a81ba
--- /dev/null
+++ b/frontend/webapp/reuseable-components/status/index.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import styled from 'styled-components';
+import { getStatusIcon } from '@/utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  isActive?: boolean;
+  withBackground?: boolean;
+  withBorder?: boolean;
+  withSmaller?: boolean;
+  withSpecialFont?: boolean;
+  withIcon?: boolean;
+}
+
+const StatusWrapper = styled.div<Props>`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  padding: ${({ withIcon, withBorder, withSmaller }) => (withIcon || withBorder ? (withSmaller ? '4px 8px' : '8px 24px') : '0')};
+  border-radius: 32px;
+  border: 1px solid ${({ withBorder, isActive, theme }) => (withBorder ? (isActive ? '#2d4323' : '#802828') : 'transparent')};
+  background: ${({ withBackground, isActive }) =>
+    withBackground
+      ? isActive
+        ? `linear-gradient(90deg, rgba(23, 32, 19, 0) 0%, rgba(23, 32, 19, 0.8) 50%, #172013 100%)`
+        : `linear-gradient(90deg, rgba(51, 21, 21, 0.00) 0%, rgba(51, 21, 21, 0.80) 50%, #331515 100%)`
+      : 'transparent'};
+`;
+
+const IconWrapper = styled.div<Props>`
+  display: flex;
+  align-items: center;
+  margin-right: ${({ withSmaller }) => (withSmaller ? '6px' : '8px')};
+`;
+
+const TextWrapper = styled.div<Props>`
+  display: flex;
+  align-items: center;
+`;
+
+const Title = styled(Text)<Props>`
+  font-weight: 400;
+  font-size: ${({ withSmaller }) => (withSmaller ? '12px' : '14px')};
+  font-family: ${({ withSpecialFont, theme }) => (withSpecialFont ? theme.font_family.secondary : theme.font_family.primary)};
+  color: ${({ isActive, theme }) => (isActive ? theme.text.success : theme.text.error)};
+  text-transform: ${({ withSpecialFont }) => (withSpecialFont ? 'uppercase' : 'unset')};
+`;
+
+const SubTitle = styled(Text)<Props>`
+  font-weight: 400;
+  font-size: ${({ withSmaller }) => (withSmaller ? '10px' : '12px')};
+  font-family: ${({ withSpecialFont, theme }) => (withSpecialFont ? theme.font_family.secondary : theme.font_family.primary)};
+  color: ${({ isActive, theme }) => (isActive ? theme.colors.green['600'] : theme.colors.red['600'])};
+  text-transform: ${({ withSpecialFont }) => (withSpecialFont ? 'uppercase' : 'unset')};
+`;
+
+const TextDivider = styled.div<Props>`
+  width: 1px;
+  height: 12px;
+  background: ${({ isActive }) => (isActive ? 'rgba(124, 237, 124, 0.16)' : 'rgba(237, 124, 124, 0.16)')};
+  margin: 0 8px;
+`;
+
+const Status: React.FC<Props> = (props) => {
+  const { title, subtitle, isActive, withIcon, withSmaller } = props;
+
+  return (
+    <StatusWrapper {...props}>
+      {withIcon && (
+        <IconWrapper {...props}>
+          <Image src={getStatusIcon(isActive)} alt='status' width={withSmaller ? 14 : 16} height={withSmaller ? 14 : 16} />
+        </IconWrapper>
+      )}
+
+      <TextWrapper {...props}>
+        <Title {...props}>{title || (isActive ? 'Active' : 'Inactive')}</Title>
+
+        {subtitle && (
+          <TextWrapper {...props}>
+            <TextDivider {...props} />
+            <SubTitle {...props}>{subtitle}</SubTitle>
+          </TextWrapper>
+        )}
+      </TextWrapper>
+    </StatusWrapper>
+  );
+};
+
+export { Status };
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index b6b6b553c..1c836e9eb 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -47,3 +47,7 @@ export enum OVERVIEW_NODE_TYPES {
   ADD_ACTION = 'addAction',
   ADD_DESTIONATION = 'addDestination',
 }
+
+export enum STATUSES {
+  HEALTHY = 'healthy',
+}
diff --git a/frontend/webapp/utils/functions/get-status-icon.ts b/frontend/webapp/utils/functions/get-status-icon.ts
new file mode 100644
index 000000000..eeca573a4
--- /dev/null
+++ b/frontend/webapp/utils/functions/get-status-icon.ts
@@ -0,0 +1,5 @@
+const ICON_PATH = '/icons/notification/';
+
+export const getStatusIcon = (active?: boolean) => {
+  return `${ICON_PATH}${active ? 'success-icon' : 'error-icon2'}.svg`;
+};
diff --git a/frontend/webapp/utils/functions/index.tsx b/frontend/webapp/utils/functions/index.ts
similarity index 63%
rename from frontend/webapp/utils/functions/index.tsx
rename to frontend/webapp/utils/functions/index.ts
index 2c82868e5..df073e059 100644
--- a/frontend/webapp/utils/functions/index.tsx
+++ b/frontend/webapp/utils/functions/index.ts
@@ -1,2 +1,3 @@
 export * from './strings';
 export * from './get-action-icon';
+export * from './get-status-icon';

From c15a6ba751c2b7fab156899bffeac25416e0dcc4 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 30 Oct 2024 09:35:17 +0200
Subject: [PATCH 320/374] [GEN-1574]: delete actions (#1657)

---
 .../actions/choose-action-modal/index.tsx     |  6 +--
 .../main/overview/overview-drawer/index.tsx   |  9 ++--
 frontend/webapp/graphql/mutations/action.ts   |  6 +++
 frontend/webapp/graphql/mutations/index.ts    |  1 +
 frontend/webapp/hooks/actions/index.ts        |  2 +-
 .../webapp/hooks/actions/useActionCRUD.ts     | 54 ++++++-------------
 .../webapp/hooks/actions/useCreateAction.ts   | 37 -------------
 .../webapp/hooks/actions/useUpdateAction.ts   | 40 --------------
 frontend/webapp/types/actions.ts              |  2 +-
 9 files changed, 32 insertions(+), 125 deletions(-)
 delete mode 100644 frontend/webapp/hooks/actions/useCreateAction.ts
 delete mode 100644 frontend/webapp/hooks/actions/useUpdateAction.ts

diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 1d7943245..55caa97dc 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import React, { useMemo, useState } from 'react';
 import { ChooseActionBody } from '../';
+import React, { useMemo, useState } from 'react';
+import { useActionCRUD, useActionFormData } from '@/hooks/actions';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
-import { useActionFormData, useCreateAction } from '@/hooks/actions';
 import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, FadeLoader } from '@/reuseable-components';
 
 const DefineActionContainer = styled.section`
@@ -43,7 +43,7 @@ interface AddActionModalProps {
 
 export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
   const { formData, handleFormChange, resetFormData, validateForm } = useActionFormData();
-  const { createAction, loading } = useCreateAction({ onSuccess: handleClose });
+  const { createAction, loading } = useActionCRUD({ onSuccess: handleClose });
   const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
 
   const isFormOk = useMemo(() => !!selectedItem && validateForm(), [selectedItem, formData]);
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 99a09daaa..e153c4910 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -7,12 +7,11 @@ import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
-import { useActualSources, useNotify, useUpdateDestination } from '@/hooks';
 import { ActionDrawer, type ActionDrawerHandle } from '../../actions';
 import { DestinationDrawer, type DestinationDrawerHandle } from '../../destinations';
+import { useActionCRUD, useActualSources, useNotify, useUpdateDestination } from '@/hooks';
 import { getMainContainerLanguageLogo, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils/constants/programming-languages';
 import { WorkloadId, K8sActualSource, ActualDestination, OVERVIEW_ENTITY_TYPES, PatchSourceRequestInput, ActionDataParsed } from '@/types';
-import { useUpdateAction } from '@/hooks/actions/useUpdateAction';
 
 const componentMap = {
   source: SourceDrawer,
@@ -31,7 +30,7 @@ const OverviewDrawer = () => {
   const [title, setTitle] = useState('');
 
   const notify = useNotify();
-  const { updateAction } = useUpdateAction();
+  const { updateAction, deleteAction } = useActionCRUD();
   const { updateExistingDestination } = useUpdateDestination();
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
 
@@ -177,7 +176,9 @@ const OverviewDrawer = () => {
     }
 
     if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
-      alert('TODO !');
+      const { id, type } = item as ActionDataParsed;
+
+      await deleteAction(id, type);
     }
 
     if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
diff --git a/frontend/webapp/graphql/mutations/action.ts b/frontend/webapp/graphql/mutations/action.ts
index c358435f1..2c3de107c 100644
--- a/frontend/webapp/graphql/mutations/action.ts
+++ b/frontend/webapp/graphql/mutations/action.ts
@@ -15,3 +15,9 @@ export const UPDATE_ACTION = gql`
     }
   }
 `;
+
+export const DELETE_ACTION = gql`
+  mutation DeleteAction($id: ID!, $actionType: String!) {
+    deleteAction(id: $id, actionType: $actionType)
+  }
+`;
diff --git a/frontend/webapp/graphql/mutations/index.ts b/frontend/webapp/graphql/mutations/index.ts
index 77b8f63f9..c8372be67 100644
--- a/frontend/webapp/graphql/mutations/index.ts
+++ b/frontend/webapp/graphql/mutations/index.ts
@@ -1,3 +1,4 @@
 export * from './destination';
 export * from './source';
 export * from './namespace';
+export * from './action';
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index ad92ad62b..8d94dd9e0 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,5 +1,5 @@
 export * from './useActionFormData';
 export * from './useActions';
 export * from './useActionState';
-export * from './useCreateAction';
 export * from './useGetActions';
+export * from './useActionCRUD';
diff --git a/frontend/webapp/hooks/actions/useActionCRUD.ts b/frontend/webapp/hooks/actions/useActionCRUD.ts
index 7e9b814c8..5bf25fe02 100644
--- a/frontend/webapp/hooks/actions/useActionCRUD.ts
+++ b/frontend/webapp/hooks/actions/useActionCRUD.ts
@@ -3,7 +3,7 @@ import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
 import type { ActionInput, ActionsType } from '@/types';
 import { useComputePlatform } from '../compute-platform';
-import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations/action';
+import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations';
 
 interface UseActionCrudParams {
   onSuccess?: () => void;
@@ -15,57 +15,33 @@ export const useActionCRUD = (params?: UseActionCrudParams) => {
   const { refetch } = useComputePlatform();
   const notify = useNotify();
 
-  const handleError = (title: string, message: string) => {
-    notify({
-      title,
-      message,
-      type: 'error',
-      target: 'notification',
-      crdType: 'notification',
-    });
+  const notifyUser = (title: string, message: string, type: 'error' | 'success') => {
+    notify({ title, message, type, target: 'notification', crdType: 'notification' });
+  };
 
-    if (params?.onError) params.onError();
+  const handleError = (title: string, message: string) => {
+    notifyUser(title, message, 'error');
+    params?.onError?.();
   };
 
   const handleComplete = (title: string, message: string) => {
+    notifyUser(title, message, 'success');
     setDrawerItem(null);
     refetch();
-    notify({
-      title,
-      message,
-      type: 'success',
-      target: 'notification',
-      crdType: 'notification',
-    });
-
-    if (params?.onSuccess) params.onSuccess();
+    params?.onSuccess?.();
   };
 
   const [createAction, cState] = useMutation(CREATE_ACTION, {
-    onError: (error) => {
-      handleError('Create Action', error.message);
-    },
-    onCompleted: () => {
-      handleComplete('Create Action', 'successfully created');
-    },
+    onError: (error) => handleError('Create Action', error.message),
+    onCompleted: () => handleComplete('Create Action', 'successfully created'),
   });
-
   const [updateAction, uState] = useMutation(UPDATE_ACTION, {
-    onError: (error) => {
-      handleError('Update Action', error.message);
-    },
-    onCompleted: () => {
-      handleComplete('Update Action', 'successfully updated');
-    },
+    onError: (error) => handleError('Update Action', error.message),
+    onCompleted: () => handleComplete('Update Action', 'successfully updated'),
   });
-
   const [deleteAction, dState] = useMutation(DELETE_ACTION, {
-    onError: (error) => {
-      handleError('Delete Action', error.message);
-    },
-    onCompleted: () => {
-      handleComplete('Delete Action', 'successfully deleted');
-    },
+    onError: (error) => handleError('Delete Action', error.message),
+    onCompleted: () => handleComplete('Delete Action', 'successfully deleted'),
   });
 
   return {
diff --git a/frontend/webapp/hooks/actions/useCreateAction.ts b/frontend/webapp/hooks/actions/useCreateAction.ts
deleted file mode 100644
index 91d36d857..000000000
--- a/frontend/webapp/hooks/actions/useCreateAction.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useNotify } from '../useNotify';
-import type { ActionInput } from '@/types';
-import { useMutation } from '@apollo/client';
-import { CREATE_ACTION } from '@/graphql/mutations/action';
-import { useComputePlatform } from '../compute-platform';
-
-export const useCreateAction = ({ onSuccess }: { onSuccess?: () => void }) => {
-  const [createAction, { loading }] = useMutation(CREATE_ACTION, {
-    onError: (error) =>
-      notify({
-        message: error.message,
-        title: 'Create Action',
-        type: 'error',
-        target: 'notification',
-        crdType: 'notification',
-      }),
-    onCompleted: () => {
-      refetch();
-      onSuccess && onSuccess();
-      notify({
-        message: 'Successfully created',
-        title: 'Create Action',
-        type: 'success',
-        target: 'notification',
-        crdType: 'notification',
-      });
-    },
-  });
-
-  const { refetch } = useComputePlatform();
-  const notify = useNotify();
-
-  return {
-    createAction: (action: ActionInput) => createAction({ variables: { action } }),
-    loading,
-  };
-};
diff --git a/frontend/webapp/hooks/actions/useUpdateAction.ts b/frontend/webapp/hooks/actions/useUpdateAction.ts
deleted file mode 100644
index 6a5d8f1f1..000000000
--- a/frontend/webapp/hooks/actions/useUpdateAction.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useNotify } from '../useNotify';
-import type { ActionInput } from '@/types';
-import { useMutation } from '@apollo/client';
-import { UPDATE_ACTION } from '@/graphql/mutations/action';
-import { useComputePlatform } from '../compute-platform';
-import { useDrawerStore } from '@/store';
-
-export const useUpdateAction = () => {
-  const [updateAction, { loading }] = useMutation(UPDATE_ACTION, {
-    onError: (error) => {
-      notify({
-        message: error.message,
-        title: 'Update Action',
-        type: 'error',
-        target: 'notification',
-        crdType: 'notification',
-      });
-    },
-    onCompleted: () => {
-      setDrawerItem(null);
-      refetch();
-      notify({
-        message: 'Successfully updated',
-        title: 'Update Action',
-        type: 'success',
-        target: 'notification',
-        crdType: 'notification',
-      });
-    },
-  });
-
-  const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
-  const { refetch } = useComputePlatform();
-  const notify = useNotify();
-
-  return {
-    updateAction: (id: string, action: ActionInput) => updateAction({ variables: { id, action } }),
-    loading,
-  };
-};
diff --git a/frontend/webapp/types/actions.ts b/frontend/webapp/types/actions.ts
index 9cb9466cc..6c883f38f 100644
--- a/frontend/webapp/types/actions.ts
+++ b/frontend/webapp/types/actions.ts
@@ -78,7 +78,7 @@ export interface ActionItem {
 
 export interface ActionData {
   id: string;
-  type: string;
+  type: ActionsType;
   spec: ActionItem | string;
 }
 

From fa609c38a8f65fa2b49df64c9df53c92a060541d Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Wed, 30 Oct 2024 13:05:48 +0200
Subject: [PATCH 321/374] [GEN-1592] Add instrumentation rules to gql (#1659)

This pull request introduces several new types and fields to the GraphQL
schema and updates the corresponding resolvers and models to support
instrumentation rules and payload collections.

### GraphQL Schema Enhancements:
* Added new types and inputs for `PodWorkload`, `OtelSdks`,
`InstrumentationRule`, `InstrumentationLibraryGlobalId`, and
`PayloadCollection` in `frontend/graph/schema.graphqls`.
[[1]](diffhunk://#diff-bc07b91dedd1782d9ddbbb6374ad97c7604f9a267de5174645723d863c732f80R107-R209)
[[2]](diffhunk://#diff-bc07b91dedd1782d9ddbbb6374ad97c7604f9a267de5174645723d863c732f80R222)
* Added new mutation fields for creating, updating, and deleting
instrumentation rules in `frontend/graph/schema.graphqls`.

### Model Updates:
* Introduced new types and inputs for `DbQueryPayloadCollection`,
`HTTPPayloadCollection`, `MessagingPayloadCollection`,
`InstrumentationLibraryGlobalID`, `InstrumentationRule`, and
`PayloadCollection` in `frontend/graph/model/models_gen.go`.
[[1]](diffhunk://#diff-642ccd7ed71fdfa394bd7f7fd99c9c33e20ff18c876a91cb989d379a44390469R70)
[[2]](diffhunk://#diff-642ccd7ed71fdfa394bd7f7fd99c9c33e20ff18c876a91cb989d379a44390469R81-R90)
[[3]](diffhunk://#diff-642ccd7ed71fdfa394bd7f7fd99c9c33e20ff18c876a91cb989d379a44390469R191-R202)
[[4]](diffhunk://#diff-642ccd7ed71fdfa394bd7f7fd99c9c33e20ff18c876a91cb989d379a44390469R214-R249)
[[5]](diffhunk://#diff-642ccd7ed71fdfa394bd7f7fd99c9c33e20ff18c876a91cb989d379a44390469R320-R358)
[[6]](diffhunk://#diff-642ccd7ed71fdfa394bd7f7fd99c9c33e20ff18c876a91cb989d379a44390469R397-R408)

### Resolver Implementations:
* Added resolver methods for `InstrumentationRules` in `ComputePlatform`
and CRUD operations for `InstrumentationRule` in `Mutation` in
`frontend/graph/schema.resolvers.go`.
[[1]](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70R271-R275)
[[2]](diffhunk://#diff-8e6e95029056db2c0301fc338e0ca5a04356ce5d45ee9514bbd167f2d85bae70R653-R672)

### Configuration and Dependency Updates:
* Updated `frontend/Makefile` to pin the `gqlgen` version to `v0.17.49`.
* Added `instrumentationRules` to `frontend/gqlgen.yml` for code
generation.
---
 frontend/Makefile                        |    2 +-
 frontend/gqlgen.yml                      |    2 +
 frontend/graph/generated.go              | 4027 ++++++++++++++++++----
 frontend/graph/model/models_gen.go       |  104 +-
 frontend/graph/schema.graphqls           |   99 +
 frontend/graph/schema.resolvers.go       |   25 +
 frontend/services/instrumentationrule.go |  305 ++
 7 files changed, 3866 insertions(+), 698 deletions(-)
 create mode 100644 frontend/services/instrumentationrule.go

diff --git a/frontend/Makefile b/frontend/Makefile
index a3dc15e31..6dfe36f60 100644
--- a/frontend/Makefile
+++ b/frontend/Makefile
@@ -1,2 +1,2 @@
 gqlgen:
-	go run github.com/99designs/gqlgen generate
\ No newline at end of file
+	 go get github.com/99designs/gqlgen@v0.17.49 && go run github.com/99designs/gqlgen generate
\ No newline at end of file
diff --git a/frontend/gqlgen.yml b/frontend/gqlgen.yml
index 7212cc7cb..562c27730 100644
--- a/frontend/gqlgen.yml
+++ b/frontend/gqlgen.yml
@@ -56,6 +56,8 @@ models:
         resolver: true
       k8sActualSources:
         resolver: true
+      instrumentationRules:
+        resolver: true
   K8sActualNamespace:
     fields:
       k8sActualSources:
diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index cc019056c..aad7a896e 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -66,13 +66,14 @@ type ComplexityRoot struct {
 	}
 
 	ComputePlatform struct {
-		Actions             func(childComplexity int) int
-		ComputePlatformType func(childComplexity int) int
-		Destinations        func(childComplexity int) int
-		K8sActualNamespace  func(childComplexity int, name string) int
-		K8sActualNamespaces func(childComplexity int) int
-		K8sActualSource     func(childComplexity int, name *string, namespace *string, kind *string) int
-		K8sActualSources    func(childComplexity int) int
+		Actions              func(childComplexity int) int
+		ComputePlatformType  func(childComplexity int) int
+		Destinations         func(childComplexity int) int
+		InstrumentationRules func(childComplexity int) int
+		K8sActualNamespace   func(childComplexity int, name string) int
+		K8sActualNamespaces  func(childComplexity int) int
+		K8sActualSource      func(childComplexity int, name *string, namespace *string, kind *string) int
+		K8sActualSources     func(childComplexity int) int
 	}
 
 	Condition struct {
@@ -83,6 +84,11 @@ type ComplexityRoot struct {
 		Type               func(childComplexity int) int
 	}
 
+	DbQueryPayloadCollection struct {
+		DropPartialPayloads func(childComplexity int) int
+		MaxPayloadLength    func(childComplexity int) int
+	}
+
 	DeleteAttribute struct {
 		AttributeName func(childComplexity int) int
 	}
@@ -164,6 +170,12 @@ type ComplexityRoot struct {
 		Categories func(childComplexity int) int
 	}
 
+	HttpPayloadCollection struct {
+		DropPartialPayloads func(childComplexity int) int
+		MaxPayloadLength    func(childComplexity int) int
+		MimeTypes           func(childComplexity int) int
+	}
+
 	IcaInstanceResponse struct {
 		ID   func(childComplexity int) int
 		Spec func(childComplexity int) int
@@ -175,11 +187,27 @@ type ComplexityRoot struct {
 		Options     func(childComplexity int) int
 	}
 
+	InstrumentationLibraryGlobalId struct {
+		Language func(childComplexity int) int
+		Name     func(childComplexity int) int
+		SpanKind func(childComplexity int) int
+	}
+
 	InstrumentationOption struct {
 		OptionKey func(childComplexity int) int
 		SpanKind  func(childComplexity int) int
 	}
 
+	InstrumentationRule struct {
+		Disabled                 func(childComplexity int) int
+		InstrumentationLibraries func(childComplexity int) int
+		Notes                    func(childComplexity int) int
+		PayloadCollection        func(childComplexity int) int
+		RuleID                   func(childComplexity int) int
+		RuleName                 func(childComplexity int) int
+		Workloads                func(childComplexity int) int
+	}
+
 	InstrumentedApplicationDetails struct {
 		Conditions             func(childComplexity int) int
 		Containers             func(childComplexity int) int
@@ -214,15 +242,23 @@ type ComplexityRoot struct {
 		Type    func(childComplexity int) int
 	}
 
+	MessagingPayloadCollection struct {
+		DropPartialPayloads func(childComplexity int) int
+		MaxPayloadLength    func(childComplexity int) int
+	}
+
 	Mutation struct {
 		CreateAction                 func(childComplexity int, action model.ActionInput) int
+		CreateInstrumentationRule    func(childComplexity int, instrumentationRule model.InstrumentationRuleInput) int
 		CreateNewDestination         func(childComplexity int, destination model.DestinationInput) int
 		DeleteAction                 func(childComplexity int, id string, actionType string) int
+		DeleteInstrumentationRule    func(childComplexity int, ruleID string) int
 		PersistK8sNamespace          func(childComplexity int, namespace model.PersistNamespaceItemInput) int
 		PersistK8sSources            func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
 		TestConnectionForDestination func(childComplexity int, destination model.DestinationInput) int
 		UpdateAction                 func(childComplexity int, id string, action model.ActionInput) int
 		UpdateDestination            func(childComplexity int, id string, destination model.DestinationInput) int
+		UpdateInstrumentationRule    func(childComplexity int, ruleID string, instrumentationRule model.InstrumentationRuleInput) int
 		UpdateK8sActualSource        func(childComplexity int, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) int
 	}
 
@@ -230,6 +266,13 @@ type ComplexityRoot struct {
 		Supported func(childComplexity int) int
 	}
 
+	PayloadCollection struct {
+		DbQuery      func(childComplexity int) int
+		HTTPRequest  func(childComplexity int) int
+		HTTPResponse func(childComplexity int) int
+		Messaging    func(childComplexity int) int
+	}
+
 	PiiMaskingAction struct {
 		Details func(childComplexity int) int
 		Disable func(childComplexity int) int
@@ -240,6 +283,12 @@ type ComplexityRoot struct {
 		Type    func(childComplexity int) int
 	}
 
+	PodWorkload struct {
+		Kind      func(childComplexity int) int
+		Name      func(childComplexity int) int
+		Namespace func(childComplexity int) int
+	}
+
 	ProbabilisticSamplerAction struct {
 		Details func(childComplexity int) int
 		Disable func(childComplexity int) int
@@ -295,6 +344,7 @@ type ComputePlatformResolver interface {
 	K8sActualSources(ctx context.Context, obj *model.ComputePlatform) ([]*model.K8sActualSource, error)
 	Destinations(ctx context.Context, obj *model.ComputePlatform) ([]*model.Destination, error)
 	Actions(ctx context.Context, obj *model.ComputePlatform) ([]*model.IcaInstanceResponse, error)
+	InstrumentationRules(ctx context.Context, obj *model.ComputePlatform) ([]*model.InstrumentationRule, error)
 }
 type DestinationResolver interface {
 	Type(ctx context.Context, obj *model.Destination) (string, error)
@@ -314,6 +364,9 @@ type MutationResolver interface {
 	CreateAction(ctx context.Context, action model.ActionInput) (model.Action, error)
 	UpdateAction(ctx context.Context, id string, action model.ActionInput) (model.Action, error)
 	DeleteAction(ctx context.Context, id string, actionType string) (bool, error)
+	CreateInstrumentationRule(ctx context.Context, instrumentationRule model.InstrumentationRuleInput) (*model.InstrumentationRule, error)
+	UpdateInstrumentationRule(ctx context.Context, ruleID string, instrumentationRule model.InstrumentationRuleInput) (*model.InstrumentationRule, error)
+	DeleteInstrumentationRule(ctx context.Context, ruleID string) (bool, error)
 }
 type QueryResolver interface {
 	ComputePlatform(ctx context.Context) (*model.ComputePlatform, error)
@@ -426,6 +479,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ComputePlatform.Destinations(childComplexity), true
 
+	case "ComputePlatform.instrumentationRules":
+		if e.complexity.ComputePlatform.InstrumentationRules == nil {
+			break
+		}
+
+		return e.complexity.ComputePlatform.InstrumentationRules(childComplexity), true
+
 	case "ComputePlatform.k8sActualNamespace":
 		if e.complexity.ComputePlatform.K8sActualNamespace == nil {
 			break
@@ -499,6 +559,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Condition.Type(childComplexity), true
 
+	case "DbQueryPayloadCollection.dropPartialPayloads":
+		if e.complexity.DbQueryPayloadCollection.DropPartialPayloads == nil {
+			break
+		}
+
+		return e.complexity.DbQueryPayloadCollection.DropPartialPayloads(childComplexity), true
+
+	case "DbQueryPayloadCollection.maxPayloadLength":
+		if e.complexity.DbQueryPayloadCollection.MaxPayloadLength == nil {
+			break
+		}
+
+		return e.complexity.DbQueryPayloadCollection.MaxPayloadLength(childComplexity), true
+
 	case "DeleteAttribute.attributeName":
 		if e.complexity.DeleteAttribute.AttributeName == nil {
 			break
@@ -814,6 +888,27 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.GetDestinationTypesResponse.Categories(childComplexity), true
 
+	case "HttpPayloadCollection.dropPartialPayloads":
+		if e.complexity.HttpPayloadCollection.DropPartialPayloads == nil {
+			break
+		}
+
+		return e.complexity.HttpPayloadCollection.DropPartialPayloads(childComplexity), true
+
+	case "HttpPayloadCollection.maxPayloadLength":
+		if e.complexity.HttpPayloadCollection.MaxPayloadLength == nil {
+			break
+		}
+
+		return e.complexity.HttpPayloadCollection.MaxPayloadLength(childComplexity), true
+
+	case "HttpPayloadCollection.mimeTypes":
+		if e.complexity.HttpPayloadCollection.MimeTypes == nil {
+			break
+		}
+
+		return e.complexity.HttpPayloadCollection.MimeTypes(childComplexity), true
+
 	case "IcaInstanceResponse.id":
 		if e.complexity.IcaInstanceResponse.ID == nil {
 			break
@@ -849,6 +944,27 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.InstrumentationLibrary.Options(childComplexity), true
 
+	case "InstrumentationLibraryGlobalId.language":
+		if e.complexity.InstrumentationLibraryGlobalId.Language == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationLibraryGlobalId.Language(childComplexity), true
+
+	case "InstrumentationLibraryGlobalId.name":
+		if e.complexity.InstrumentationLibraryGlobalId.Name == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationLibraryGlobalId.Name(childComplexity), true
+
+	case "InstrumentationLibraryGlobalId.spanKind":
+		if e.complexity.InstrumentationLibraryGlobalId.SpanKind == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationLibraryGlobalId.SpanKind(childComplexity), true
+
 	case "InstrumentationOption.optionKey":
 		if e.complexity.InstrumentationOption.OptionKey == nil {
 			break
@@ -863,6 +979,55 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.InstrumentationOption.SpanKind(childComplexity), true
 
+	case "InstrumentationRule.disabled":
+		if e.complexity.InstrumentationRule.Disabled == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationRule.Disabled(childComplexity), true
+
+	case "InstrumentationRule.instrumentationLibraries":
+		if e.complexity.InstrumentationRule.InstrumentationLibraries == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationRule.InstrumentationLibraries(childComplexity), true
+
+	case "InstrumentationRule.notes":
+		if e.complexity.InstrumentationRule.Notes == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationRule.Notes(childComplexity), true
+
+	case "InstrumentationRule.payloadCollection":
+		if e.complexity.InstrumentationRule.PayloadCollection == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationRule.PayloadCollection(childComplexity), true
+
+	case "InstrumentationRule.ruleId":
+		if e.complexity.InstrumentationRule.RuleID == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationRule.RuleID(childComplexity), true
+
+	case "InstrumentationRule.ruleName":
+		if e.complexity.InstrumentationRule.RuleName == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationRule.RuleName(childComplexity), true
+
+	case "InstrumentationRule.workloads":
+		if e.complexity.InstrumentationRule.Workloads == nil {
+			break
+		}
+
+		return e.complexity.InstrumentationRule.Workloads(childComplexity), true
+
 	case "InstrumentedApplicationDetails.conditions":
 		if e.complexity.InstrumentedApplicationDetails.Conditions == nil {
 			break
@@ -1022,6 +1187,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.LatencySamplerAction.Type(childComplexity), true
 
+	case "MessagingPayloadCollection.dropPartialPayloads":
+		if e.complexity.MessagingPayloadCollection.DropPartialPayloads == nil {
+			break
+		}
+
+		return e.complexity.MessagingPayloadCollection.DropPartialPayloads(childComplexity), true
+
+	case "MessagingPayloadCollection.maxPayloadLength":
+		if e.complexity.MessagingPayloadCollection.MaxPayloadLength == nil {
+			break
+		}
+
+		return e.complexity.MessagingPayloadCollection.MaxPayloadLength(childComplexity), true
+
 	case "Mutation.createAction":
 		if e.complexity.Mutation.CreateAction == nil {
 			break
@@ -1034,6 +1213,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.CreateAction(childComplexity, args["action"].(model.ActionInput)), true
 
+	case "Mutation.createInstrumentationRule":
+		if e.complexity.Mutation.CreateInstrumentationRule == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_createInstrumentationRule_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.CreateInstrumentationRule(childComplexity, args["instrumentationRule"].(model.InstrumentationRuleInput)), true
+
 	case "Mutation.createNewDestination":
 		if e.complexity.Mutation.CreateNewDestination == nil {
 			break
@@ -1058,6 +1249,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.DeleteAction(childComplexity, args["id"].(string), args["actionType"].(string)), true
 
+	case "Mutation.deleteInstrumentationRule":
+		if e.complexity.Mutation.DeleteInstrumentationRule == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_deleteInstrumentationRule_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.DeleteInstrumentationRule(childComplexity, args["ruleId"].(string)), true
+
 	case "Mutation.persistK8sNamespace":
 		if e.complexity.Mutation.PersistK8sNamespace == nil {
 			break
@@ -1118,6 +1321,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.UpdateDestination(childComplexity, args["id"].(string), args["destination"].(model.DestinationInput)), true
 
+	case "Mutation.updateInstrumentationRule":
+		if e.complexity.Mutation.UpdateInstrumentationRule == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_updateInstrumentationRule_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.UpdateInstrumentationRule(childComplexity, args["ruleId"].(string), args["instrumentationRule"].(model.InstrumentationRuleInput)), true
+
 	case "Mutation.updateK8sActualSource":
 		if e.complexity.Mutation.UpdateK8sActualSource == nil {
 			break
@@ -1137,6 +1352,34 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
 
+	case "PayloadCollection.dbQuery":
+		if e.complexity.PayloadCollection.DbQuery == nil {
+			break
+		}
+
+		return e.complexity.PayloadCollection.DbQuery(childComplexity), true
+
+	case "PayloadCollection.httpRequest":
+		if e.complexity.PayloadCollection.HTTPRequest == nil {
+			break
+		}
+
+		return e.complexity.PayloadCollection.HTTPRequest(childComplexity), true
+
+	case "PayloadCollection.httpResponse":
+		if e.complexity.PayloadCollection.HTTPResponse == nil {
+			break
+		}
+
+		return e.complexity.PayloadCollection.HTTPResponse(childComplexity), true
+
+	case "PayloadCollection.messaging":
+		if e.complexity.PayloadCollection.Messaging == nil {
+			break
+		}
+
+		return e.complexity.PayloadCollection.Messaging(childComplexity), true
+
 	case "PiiMaskingAction.details":
 		if e.complexity.PiiMaskingAction.Details == nil {
 			break
@@ -1186,6 +1429,27 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.PiiMaskingAction.Type(childComplexity), true
 
+	case "PodWorkload.kind":
+		if e.complexity.PodWorkload.Kind == nil {
+			break
+		}
+
+		return e.complexity.PodWorkload.Kind(childComplexity), true
+
+	case "PodWorkload.name":
+		if e.complexity.PodWorkload.Name == nil {
+			break
+		}
+
+		return e.complexity.PodWorkload.Name(childComplexity), true
+
+	case "PodWorkload.namespace":
+		if e.complexity.PodWorkload.Namespace == nil {
+			break
+		}
+
+		return e.complexity.PodWorkload.Namespace(childComplexity), true
+
 	case "ProbabilisticSamplerAction.details":
 		if e.complexity.ProbabilisticSamplerAction.Details == nil {
 			break
@@ -1403,16 +1667,23 @@ func (e *executableSchema) Exec(ctx context.Context) graphql.ResponseHandler {
 	ec := executionContext{rc, e, 0, 0, make(chan graphql.DeferredResult)}
 	inputUnmarshalMap := graphql.BuildUnmarshalerMap(
 		ec.unmarshalInputActionInput,
+		ec.unmarshalInputDbQueryPayloadCollectionInput,
 		ec.unmarshalInputDestinationInput,
 		ec.unmarshalInputExportedSignalsInput,
 		ec.unmarshalInputFieldInput,
+		ec.unmarshalInputHttpPayloadCollectionInput,
+		ec.unmarshalInputInstrumentationLibraryGlobalIdInput,
+		ec.unmarshalInputInstrumentationRuleInput,
 		ec.unmarshalInputK8sDesiredNamespaceInput,
 		ec.unmarshalInputK8sDesiredSourceInput,
 		ec.unmarshalInputK8sNamespaceId,
 		ec.unmarshalInputK8sSourceId,
+		ec.unmarshalInputMessagingPayloadCollectionInput,
 		ec.unmarshalInputPatchSourceRequestInput,
+		ec.unmarshalInputPayloadCollectionInput,
 		ec.unmarshalInputPersistNamespaceItemInput,
 		ec.unmarshalInputPersistNamespaceSourceInput,
+		ec.unmarshalInputPodWorkloadInput,
 	)
 	first := true
 
@@ -1607,6 +1878,21 @@ func (ec *executionContext) field_Mutation_createAction_args(ctx context.Context
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_createInstrumentationRule_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 model.InstrumentationRuleInput
+	if tmp, ok := rawArgs["instrumentationRule"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("instrumentationRule"))
+		arg0, err = ec.unmarshalNInstrumentationRuleInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRuleInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["instrumentationRule"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_createNewDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -1646,6 +1932,21 @@ func (ec *executionContext) field_Mutation_deleteAction_args(ctx context.Context
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_deleteInstrumentationRule_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["ruleId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("ruleId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["ruleId"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_persistK8sNamespace_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -1748,6 +2049,30 @@ func (ec *executionContext) field_Mutation_updateDestination_args(ctx context.Co
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_updateInstrumentationRule_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["ruleId"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("ruleId"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["ruleId"] = arg0
+	var arg1 model.InstrumentationRuleInput
+	if tmp, ok := rawArgs["instrumentationRule"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("instrumentationRule"))
+		arg1, err = ec.unmarshalNInstrumentationRuleInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRuleInput(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["instrumentationRule"] = arg1
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_updateK8sActualSource_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -2637,6 +2962,66 @@ func (ec *executionContext) fieldContext_ComputePlatform_actions(_ context.Conte
 	return fc, nil
 }
 
+func (ec *executionContext) _ComputePlatform_instrumentationRules(ctx context.Context, field graphql.CollectedField, obj *model.ComputePlatform) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ComputePlatform_instrumentationRules(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.ComputePlatform().InstrumentationRules(rctx, obj)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.InstrumentationRule)
+	fc.Result = res
+	return ec.marshalNInstrumentationRule2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRuleᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ComputePlatform_instrumentationRules(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ComputePlatform",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "ruleId":
+				return ec.fieldContext_InstrumentationRule_ruleId(ctx, field)
+			case "ruleName":
+				return ec.fieldContext_InstrumentationRule_ruleName(ctx, field)
+			case "notes":
+				return ec.fieldContext_InstrumentationRule_notes(ctx, field)
+			case "disabled":
+				return ec.fieldContext_InstrumentationRule_disabled(ctx, field)
+			case "workloads":
+				return ec.fieldContext_InstrumentationRule_workloads(ctx, field)
+			case "instrumentationLibraries":
+				return ec.fieldContext_InstrumentationRule_instrumentationLibraries(ctx, field)
+			case "payloadCollection":
+				return ec.fieldContext_InstrumentationRule_payloadCollection(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationRule", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Condition_type(ctx context.Context, field graphql.CollectedField, obj *model.Condition) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Condition_type(ctx, field)
 	if err != nil {
@@ -2848,8 +3233,8 @@ func (ec *executionContext) fieldContext_Condition_message(_ context.Context, fi
 	return fc, nil
 }
 
-func (ec *executionContext) _DeleteAttribute_attributeName(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttribute) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DeleteAttribute_attributeName(ctx, field)
+func (ec *executionContext) _DbQueryPayloadCollection_maxPayloadLength(ctx context.Context, field graphql.CollectedField, obj *model.DbQueryPayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DbQueryPayloadCollection_maxPayloadLength(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2862,38 +3247,35 @@ func (ec *executionContext) _DeleteAttribute_attributeName(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.AttributeName, nil
+		return obj.MaxPayloadLength, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*int)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DeleteAttribute_attributeName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DbQueryPayloadCollection_maxPayloadLength(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DeleteAttribute",
+		Object:     "DbQueryPayloadCollection",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Int does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DeleteAttributeAction_id(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DeleteAttributeAction_id(ctx, field)
+func (ec *executionContext) _DbQueryPayloadCollection_dropPartialPayloads(ctx context.Context, field graphql.CollectedField, obj *model.DbQueryPayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DbQueryPayloadCollection_dropPartialPayloads(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2906,38 +3288,35 @@ func (ec *executionContext) _DeleteAttributeAction_id(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ID, nil
+		return obj.DropPartialPayloads, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*bool)
 	fc.Result = res
-	return ec.marshalNID2string(ctx, field.Selections, res)
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DeleteAttributeAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DbQueryPayloadCollection_dropPartialPayloads(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DeleteAttributeAction",
+		Object:     "DbQueryPayloadCollection",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ID does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _DeleteAttributeAction_type(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DeleteAttributeAction_type(ctx, field)
+func (ec *executionContext) _DeleteAttribute_attributeName(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttribute) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttribute_attributeName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2950,7 +3329,7 @@ func (ec *executionContext) _DeleteAttributeAction_type(ctx context.Context, fie
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return obj.AttributeName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -2967,9 +3346,9 @@ func (ec *executionContext) _DeleteAttributeAction_type(ctx context.Context, fie
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_DeleteAttributeAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_DeleteAttribute_attributeName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "DeleteAttributeAction",
+		Object:     "DeleteAttribute",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -2980,8 +3359,8 @@ func (ec *executionContext) fieldContext_DeleteAttributeAction_type(_ context.Co
 	return fc, nil
 }
 
-func (ec *executionContext) _DeleteAttributeAction_name(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_DeleteAttributeAction_name(ctx, field)
+func (ec *executionContext) _DeleteAttributeAction_id(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_id(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -2994,7 +3373,95 @@ func (ec *executionContext) _DeleteAttributeAction_name(ctx context.Context, fie
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DeleteAttributeAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DeleteAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DeleteAttributeAction_type(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_DeleteAttributeAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "DeleteAttributeAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _DeleteAttributeAction_name(ctx context.Context, field graphql.CollectedField, obj *model.DeleteAttributeAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_DeleteAttributeAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -4878,6 +5345,129 @@ func (ec *executionContext) fieldContext_GetDestinationTypesResponse_categories(
 	return fc, nil
 }
 
+func (ec *executionContext) _HttpPayloadCollection_mimeTypes(ctx context.Context, field graphql.CollectedField, obj *model.HTTPPayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_HttpPayloadCollection_mimeTypes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.MimeTypes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.([]*string)
+	fc.Result = res
+	return ec.marshalOString2ᚕᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_HttpPayloadCollection_mimeTypes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "HttpPayloadCollection",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _HttpPayloadCollection_maxPayloadLength(ctx context.Context, field graphql.CollectedField, obj *model.HTTPPayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_HttpPayloadCollection_maxPayloadLength(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.MaxPayloadLength, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*int)
+	fc.Result = res
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_HttpPayloadCollection_maxPayloadLength(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "HttpPayloadCollection",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _HttpPayloadCollection_dropPartialPayloads(ctx context.Context, field graphql.CollectedField, obj *model.HTTPPayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_HttpPayloadCollection_dropPartialPayloads(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DropPartialPayloads, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*bool)
+	fc.Result = res
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_HttpPayloadCollection_dropPartialPayloads(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "HttpPayloadCollection",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _IcaInstanceResponse_id(ctx context.Context, field graphql.CollectedField, obj *model.IcaInstanceResponse) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_IcaInstanceResponse_id(ctx, field)
 	if err != nil {
@@ -5104,8 +5694,8 @@ func (ec *executionContext) fieldContext_InstrumentationLibrary_options(_ contex
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentationOption_optionKey(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationOption) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentationOption_optionKey(ctx, field)
+func (ec *executionContext) _InstrumentationLibraryGlobalId_name(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationLibraryGlobalID) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationLibraryGlobalId_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5118,7 +5708,7 @@ func (ec *executionContext) _InstrumentationOption_optionKey(ctx context.Context
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.OptionKey, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5135,9 +5725,9 @@ func (ec *executionContext) _InstrumentationOption_optionKey(ctx context.Context
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentationOption_optionKey(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationLibraryGlobalId_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentationOption",
+		Object:     "InstrumentationLibraryGlobalId",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -5148,8 +5738,8 @@ func (ec *executionContext) fieldContext_InstrumentationOption_optionKey(_ conte
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentationOption_spanKind(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationOption) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentationOption_spanKind(ctx, field)
+func (ec *executionContext) _InstrumentationLibraryGlobalId_spanKind(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationLibraryGlobalID) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationLibraryGlobalId_spanKind(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5169,19 +5759,16 @@ func (ec *executionContext) _InstrumentationOption_spanKind(ctx context.Context,
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.SpanKind)
+	res := resTmp.(*model.SpanKind)
 	fc.Result = res
-	return ec.marshalNSpanKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx, field.Selections, res)
+	return ec.marshalOSpanKind2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentationOption_spanKind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationLibraryGlobalId_spanKind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentationOption",
+		Object:     "InstrumentationLibraryGlobalId",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -5192,8 +5779,8 @@ func (ec *executionContext) fieldContext_InstrumentationOption_spanKind(_ contex
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
+func (ec *executionContext) _InstrumentationLibraryGlobalId_language(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationLibraryGlobalID) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationLibraryGlobalId_language(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5206,7 +5793,7 @@ func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Containers, nil
+		return obj.Language, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5215,32 +5802,26 @@ func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx conte
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.([]*model.SourceContainerRuntimeDetails)
+	res := resTmp.(*model.ProgrammingLanguage)
 	fc.Result = res
-	return ec.marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx, field.Selections, res)
+	return ec.marshalOProgrammingLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_containers(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationLibraryGlobalId_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentedApplicationDetails",
+		Object:     "InstrumentationLibraryGlobalId",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "containerName":
-				return ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
-			case "language":
-				return ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type SourceContainerRuntimeDetails", field.Name)
+			return nil, errors.New("field of type ProgrammingLanguage does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+func (ec *executionContext) _InstrumentationOption_optionKey(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationOption) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationOption_optionKey(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5253,47 +5834,38 @@ func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Conditions, nil
+		return obj.OptionKey, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.Condition)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationOption_optionKey(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentedApplicationDetails",
+		Object:     "InstrumentationOption",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "type":
-				return ec.fieldContext_Condition_type(ctx, field)
-			case "status":
-				return ec.fieldContext_Condition_status(ctx, field)
-			case "lastTransitionTime":
-				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
-			case "reason":
-				return ec.fieldContext_Condition_reason(ctx, field)
-			case "message":
-				return ec.fieldContext_Condition_message(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _InstrumentedApplicationDetails_instrumentationOptions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_InstrumentedApplicationDetails_instrumentationOptions(ctx, field)
+func (ec *executionContext) _InstrumentationOption_spanKind(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationOption) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationOption_spanKind(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5306,7 +5878,7 @@ func (ec *executionContext) _InstrumentedApplicationDetails_instrumentationOptio
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.InstrumentationOptions, nil
+		return obj.SpanKind, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5318,32 +5890,26 @@ func (ec *executionContext) _InstrumentedApplicationDetails_instrumentationOptio
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.InstrumentationLibrary)
+	res := resTmp.(model.SpanKind)
 	fc.Result = res
-	return ec.marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryᚄ(ctx, field.Selections, res)
+	return ec.marshalNSpanKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_instrumentationOptions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationOption_spanKind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "InstrumentedApplicationDetails",
+		Object:     "InstrumentationOption",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "libraryName":
-				return ec.fieldContext_InstrumentationLibrary_libraryName(ctx, field)
-			case "options":
-				return ec.fieldContext_InstrumentationLibrary_options(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type InstrumentationLibrary", field.Name)
+			return nil, errors.New("field of type SpanKind does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
+func (ec *executionContext) _InstrumentationRule_ruleId(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationRule) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationRule_ruleId(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5356,7 +5922,7 @@ func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.RuleID, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5370,24 +5936,24 @@ func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field
 	}
 	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalNID2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationRule_ruleId(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "InstrumentationRule",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type ID does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
+func (ec *executionContext) _InstrumentationRule_ruleName(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationRule) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationRule_ruleName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5400,7 +5966,7 @@ func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.InstrumentationLabelEnabled, nil
+		return obj.RuleName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5409,26 +5975,26 @@ func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*bool)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_instrumentationLabelEnabled(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationRule_ruleName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "InstrumentationRule",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
+func (ec *executionContext) _InstrumentationRule_notes(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationRule) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationRule_notes(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5441,69 +6007,35 @@ func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.K8sActualNamespace().K8sActualSources(rctx, obj, fc.Args["instrumentationLabeled"].(*bool))
+		return obj.Notes, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]*model.K8sActualSource)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationRule_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualNamespace",
+		Object:     "InstrumentationRule",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "namespace":
-				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
-			case "kind":
-				return ec.fieldContext_K8sActualSource_kind(ctx, field)
-			case "name":
-				return ec.fieldContext_K8sActualSource_name(ctx, field)
-			case "serviceName":
-				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
-			case "numberOfInstances":
-				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
-			case "reportedName":
-				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
-			case "autoInstrumented":
-				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
-			case "autoInstrumentedDecision":
-				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
-			case "instrumentedApplicationDetails":
-				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_K8sActualNamespace_k8sActualSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_namespace(ctx, field)
+func (ec *executionContext) _InstrumentationRule_disabled(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationRule) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationRule_disabled(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5516,38 +6048,35 @@ func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Namespace, nil
+		return obj.Disabled, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*bool)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationRule_disabled(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "InstrumentationRule",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_kind(ctx, field)
+func (ec *executionContext) _InstrumentationRule_workloads(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationRule) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationRule_workloads(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5560,38 +6089,43 @@ func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Kind, nil
+		return obj.Workloads, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.K8sResourceKind)
+	res := resTmp.([]*model.PodWorkload)
 	fc.Result = res
-	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
+	return ec.marshalOPodWorkload2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPodWorkloadᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationRule_workloads(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "InstrumentationRule",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type K8sResourceKind does not have child fields")
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_PodWorkload_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_PodWorkload_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_PodWorkload_name(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type PodWorkload", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_name(ctx, field)
+func (ec *executionContext) _InstrumentationRule_instrumentationLibraries(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationRule) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationRule_instrumentationLibraries(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5604,38 +6138,43 @@ func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field gra
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.InstrumentationLibraries, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]*model.InstrumentationLibraryGlobalID)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalOInstrumentationLibraryGlobalId2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryGlobalIDᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationRule_instrumentationLibraries(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "InstrumentationRule",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "name":
+				return ec.fieldContext_InstrumentationLibraryGlobalId_name(ctx, field)
+			case "spanKind":
+				return ec.fieldContext_InstrumentationLibraryGlobalId_spanKind(ctx, field)
+			case "language":
+				return ec.fieldContext_InstrumentationLibraryGlobalId_language(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationLibraryGlobalId", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+func (ec *executionContext) _InstrumentationRule_payloadCollection(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentationRule) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentationRule_payloadCollection(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5648,7 +6187,7 @@ func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, fi
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ServiceName, nil
+		return obj.PayloadCollection, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5657,26 +6196,36 @@ func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, fi
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(*model.PayloadCollection)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPayloadCollection(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentationRule_payloadCollection(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "InstrumentationRule",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "httpRequest":
+				return ec.fieldContext_PayloadCollection_httpRequest(ctx, field)
+			case "httpResponse":
+				return ec.fieldContext_PayloadCollection_httpResponse(ctx, field)
+			case "dbQuery":
+				return ec.fieldContext_PayloadCollection_dbQuery(ctx, field)
+			case "messaging":
+				return ec.fieldContext_PayloadCollection_messaging(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type PayloadCollection", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+func (ec *executionContext) _InstrumentedApplicationDetails_containers(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5689,7 +6238,7 @@ func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.NumberOfInstances, nil
+		return obj.Containers, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5698,26 +6247,32 @@ func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Conte
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*int)
+	res := resTmp.([]*model.SourceContainerRuntimeDetails)
 	fc.Result = res
-	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+	return ec.marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_containers(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "InstrumentedApplicationDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Int does not have child fields")
+			switch field.Name {
+			case "containerName":
+				return ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
+			case "language":
+				return ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SourceContainerRuntimeDetails", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_reportedName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+func (ec *executionContext) _InstrumentedApplicationDetails_conditions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5730,7 +6285,7 @@ func (ec *executionContext) _K8sActualSource_reportedName(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ReportedName, nil
+		return obj.Conditions, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5739,26 +6294,38 @@ func (ec *executionContext) _K8sActualSource_reportedName(ctx context.Context, f
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]*model.Condition)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐConditionᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_reportedName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_conditions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "InstrumentedApplicationDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			switch field.Name {
+			case "type":
+				return ec.fieldContext_Condition_type(ctx, field)
+			case "status":
+				return ec.fieldContext_Condition_status(ctx, field)
+			case "lastTransitionTime":
+				return ec.fieldContext_Condition_lastTransitionTime(ctx, field)
+			case "reason":
+				return ec.fieldContext_Condition_reason(ctx, field)
+			case "message":
+				return ec.fieldContext_Condition_message(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Condition", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+func (ec *executionContext) _InstrumentedApplicationDetails_instrumentationOptions(ctx context.Context, field graphql.CollectedField, obj *model.InstrumentedApplicationDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_InstrumentedApplicationDetails_instrumentationOptions(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5771,7 +6338,7 @@ func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.AutoInstrumented, nil
+		return obj.InstrumentationOptions, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5783,26 +6350,32 @@ func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Contex
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.([]*model.InstrumentationLibrary)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_InstrumentedApplicationDetails_instrumentationOptions(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "InstrumentedApplicationDetails",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "libraryName":
+				return ec.fieldContext_InstrumentationLibrary_libraryName(ctx, field)
+			case "options":
+				return ec.fieldContext_InstrumentationLibrary_options(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationLibrary", field.Name)
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5815,7 +6388,7 @@ func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.AutoInstrumentedDecision, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5832,9 +6405,9 @@ func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx contex
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumentedDecision(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "K8sActualNamespace",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -5845,8 +6418,8 @@ func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumentedDecisio
 	return fc, nil
 }
 
-func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_instrumentationLabelEnabled(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_instrumentationLabelEnabled(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5859,7 +6432,7 @@ func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.InstrumentedApplicationDetails, nil
+		return obj.InstrumentationLabelEnabled, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5868,34 +6441,26 @@ func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*model.InstrumentedApplicationDetails)
+	res := resTmp.(*bool)
 	fc.Result = res
-	return ec.marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx, field.Selections, res)
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplicationDetails(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_instrumentationLabelEnabled(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "K8sActualSource",
+		Object:     "K8sActualNamespace",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "containers":
-				return ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
-			case "conditions":
-				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
-			case "instrumentationOptions":
-				return ec.fieldContext_InstrumentedApplicationDetails_instrumentationOptions(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _LatencySamplerAction_id(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_LatencySamplerAction_id(ctx, field)
+func (ec *executionContext) _K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualNamespace) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualNamespace_k8sActualSources(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5908,7 +6473,7 @@ func (ec *executionContext) _LatencySamplerAction_id(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ID, nil
+		return ec.resolvers.K8sActualNamespace().K8sActualSources(rctx, obj, fc.Args["instrumentationLabeled"].(*bool))
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5920,26 +6485,57 @@ func (ec *executionContext) _LatencySamplerAction_id(ctx context.Context, field
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.([]*model.K8sActualSource)
 	fc.Result = res
-	return ec.marshalNID2string(ctx, field.Selections, res)
+	return ec.marshalNK8sActualSource2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sActualSource(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_LatencySamplerAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualNamespace_k8sActualSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "LatencySamplerAction",
+		Object:     "K8sActualNamespace",
 		Field:      field,
-		IsMethod:   false,
-		IsResolver: false,
+		IsMethod:   true,
+		IsResolver: true,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ID does not have child fields")
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_K8sActualSource_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_K8sActualSource_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_K8sActualSource_name(ctx, field)
+			case "serviceName":
+				return ec.fieldContext_K8sActualSource_serviceName(ctx, field)
+			case "numberOfInstances":
+				return ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
+			case "reportedName":
+				return ec.fieldContext_K8sActualSource_reportedName(ctx, field)
+			case "autoInstrumented":
+				return ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
+			case "autoInstrumentedDecision":
+				return ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
+			case "instrumentedApplicationDetails":
+				return ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type K8sActualSource", field.Name)
 		},
 	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_K8sActualNamespace_k8sActualSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
 	return fc, nil
 }
 
-func (ec *executionContext) _LatencySamplerAction_type(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_LatencySamplerAction_type(ctx, field)
+func (ec *executionContext) _K8sActualSource_namespace(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_namespace(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5952,7 +6548,7 @@ func (ec *executionContext) _LatencySamplerAction_type(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return obj.Namespace, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -5969,9 +6565,9 @@ func (ec *executionContext) _LatencySamplerAction_type(ctx context.Context, fiel
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_LatencySamplerAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "LatencySamplerAction",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -5982,8 +6578,8 @@ func (ec *executionContext) fieldContext_LatencySamplerAction_type(_ context.Con
 	return fc, nil
 }
 
-func (ec *executionContext) _LatencySamplerAction_name(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_LatencySamplerAction_name(ctx, field)
+func (ec *executionContext) _K8sActualSource_kind(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_kind(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -5996,35 +6592,38 @@ func (ec *executionContext) _LatencySamplerAction_name(ctx context.Context, fiel
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.Kind, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(model.K8sResourceKind)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_LatencySamplerAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "LatencySamplerAction",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type K8sResourceKind does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _LatencySamplerAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_LatencySamplerAction_notes(ctx, field)
+func (ec *executionContext) _K8sActualSource_name(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6037,23 +6636,26 @@ func (ec *executionContext) _LatencySamplerAction_notes(ctx context.Context, fie
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Notes, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_LatencySamplerAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "LatencySamplerAction",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -6064,8 +6666,8 @@ func (ec *executionContext) fieldContext_LatencySamplerAction_notes(_ context.Co
 	return fc, nil
 }
 
-func (ec *executionContext) _LatencySamplerAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_LatencySamplerAction_disable(ctx, field)
+func (ec *executionContext) _K8sActualSource_serviceName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_serviceName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6078,38 +6680,35 @@ func (ec *executionContext) _LatencySamplerAction_disable(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Disable, nil
+		return obj.ServiceName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_LatencySamplerAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_serviceName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "LatencySamplerAction",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _LatencySamplerAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_LatencySamplerAction_signals(ctx, field)
+func (ec *executionContext) _K8sActualSource_numberOfInstances(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_numberOfInstances(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6122,38 +6721,35 @@ func (ec *executionContext) _LatencySamplerAction_signals(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Signals, nil
+		return obj.NumberOfInstances, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]model.SignalType)
+	res := resTmp.(*int)
 	fc.Result = res
-	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_LatencySamplerAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_numberOfInstances(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "LatencySamplerAction",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type SignalType does not have child fields")
+			return nil, errors.New("field of type Int does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _LatencySamplerAction_details(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_LatencySamplerAction_details(ctx, field)
+func (ec *executionContext) _K8sActualSource_reportedName(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_reportedName(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6166,26 +6762,23 @@ func (ec *executionContext) _LatencySamplerAction_details(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Details, nil
+		return obj.ReportedName, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.([]*string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNString2ᚕᚖstring(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_LatencySamplerAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_reportedName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "LatencySamplerAction",
+		Object:     "K8sActualSource",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -6196,8 +6789,8 @@ func (ec *executionContext) fieldContext_LatencySamplerAction_details(_ context.
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_createNewDestination(ctx, field)
+func (ec *executionContext) _K8sActualSource_autoInstrumented(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumented(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6210,7 +6803,7 @@ func (ec *executionContext) _Mutation_createNewDestination(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().CreateNewDestination(rctx, fc.Args["destination"].(model.DestinationInput))
+		return obj.AutoInstrumented, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -6222,53 +6815,26 @@ func (ec *executionContext) _Mutation_createNewDestination(ctx context.Context,
 		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.Destination)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumented(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "K8sActualSource",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "id":
-				return ec.fieldContext_Destination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_Destination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_Destination_type(ctx, field)
-			case "exportedSignals":
-				return ec.fieldContext_Destination_exportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_Destination_fields(ctx, field)
-			case "destinationType":
-				return ec.fieldContext_Destination_destinationType(ctx, field)
-			case "conditions":
-				return ec.fieldContext_Destination_conditions(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_createNewDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_persistK8sNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_persistK8sNamespace(ctx, field)
+func (ec *executionContext) _K8sActualSource_autoInstrumentedDecision(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_autoInstrumentedDecision(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6281,7 +6847,7 @@ func (ec *executionContext) _Mutation_persistK8sNamespace(ctx context.Context, f
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().PersistK8sNamespace(rctx, fc.Args["namespace"].(model.PersistNamespaceItemInput))
+		return obj.AutoInstrumentedDecision, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -6293,37 +6859,26 @@ func (ec *executionContext) _Mutation_persistK8sNamespace(ctx context.Context, f
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_persistK8sNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_autoInstrumentedDecision(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "K8sActualSource",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_persistK8sNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_persistK8sSources(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_persistK8sSources(ctx, field)
+func (ec *executionContext) _K8sActualSource_instrumentedApplicationDetails(ctx context.Context, field graphql.CollectedField, obj *model.K8sActualSource) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_K8sActualSource_instrumentedApplicationDetails(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6336,49 +6891,1207 @@ func (ec *executionContext) _Mutation_persistK8sSources(ctx context.Context, fie
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().PersistK8sSources(rctx, fc.Args["namespace"].(string), fc.Args["sources"].([]*model.PersistNamespaceSourceInput))
+		return obj.InstrumentedApplicationDetails, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(*model.InstrumentedApplicationDetails)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_persistK8sSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_K8sActualSource_instrumentedApplicationDetails(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "K8sActualSource",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
-		},
-	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
+			switch field.Name {
+			case "containers":
+				return ec.fieldContext_InstrumentedApplicationDetails_containers(ctx, field)
+			case "conditions":
+				return ec.fieldContext_InstrumentedApplicationDetails_conditions(ctx, field)
+			case "instrumentationOptions":
+				return ec.fieldContext_InstrumentedApplicationDetails_instrumentationOptions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentedApplicationDetails", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_id(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_id(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ID, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNID2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type ID does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_type(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_type(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Type, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_name(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_name(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Name, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_notes(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Notes, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*string)
+	fc.Result = res
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_disable(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Disable, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_signals(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Signals, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]model.SignalType)
+	fc.Result = res
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type SignalType does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _LatencySamplerAction_details(ctx context.Context, field graphql.CollectedField, obj *model.LatencySamplerAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_LatencySamplerAction_details(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Details, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*string)
+	fc.Result = res
+	return ec.marshalNString2ᚕᚖstring(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_LatencySamplerAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "LatencySamplerAction",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _MessagingPayloadCollection_maxPayloadLength(ctx context.Context, field graphql.CollectedField, obj *model.MessagingPayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_MessagingPayloadCollection_maxPayloadLength(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.MaxPayloadLength, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*int)
+	fc.Result = res
+	return ec.marshalOInt2ᚖint(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_MessagingPayloadCollection_maxPayloadLength(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "MessagingPayloadCollection",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _MessagingPayloadCollection_dropPartialPayloads(ctx context.Context, field graphql.CollectedField, obj *model.MessagingPayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_MessagingPayloadCollection_dropPartialPayloads(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DropPartialPayloads, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
+	res := resTmp.(*bool)
+	fc.Result = res
+	return ec.marshalOBoolean2ᚖbool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_MessagingPayloadCollection_dropPartialPayloads(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "MessagingPayloadCollection",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createNewDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().CreateNewDestination(rctx, fc.Args["destination"].(model.DestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_createNewDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createNewDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_persistK8sNamespace(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_persistK8sNamespace(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().PersistK8sNamespace(rctx, fc.Args["namespace"].(model.PersistNamespaceItemInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_persistK8sNamespace(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_persistK8sNamespace_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_persistK8sSources(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_persistK8sSources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().PersistK8sSources(rctx, fc.Args["namespace"].(string), fc.Args["sources"].([]*model.PersistNamespaceSourceInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_persistK8sSources(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_persistK8sSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_testConnectionForDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_testConnectionForDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().TestConnectionForDestination(rctx, fc.Args["destination"].(model.DestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.TestConnectionResponse)
+	fc.Result = res
+	return ec.marshalNTestConnectionResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐTestConnectionResponse(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_testConnectionForDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "succeeded":
+				return ec.fieldContext_TestConnectionResponse_succeeded(ctx, field)
+			case "statusCode":
+				return ec.fieldContext_TestConnectionResponse_statusCode(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_TestConnectionResponse_destinationType(ctx, field)
+			case "message":
+				return ec.fieldContext_TestConnectionResponse_message(ctx, field)
+			case "reason":
+				return ec.fieldContext_TestConnectionResponse_reason(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type TestConnectionResponse", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_testConnectionForDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateK8sActualSource(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateK8sActualSource(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateK8sActualSource(rctx, fc.Args["sourceId"].(model.K8sSourceID), fc.Args["patchSourceRequest"].(model.PatchSourceRequestInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateK8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateK8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateDestination(rctx, fc.Args["id"].(string), fc.Args["destination"].(model.DestinationInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.Destination)
+	fc.Result = res
+	return ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_Destination_id(ctx, field)
+			case "name":
+				return ec.fieldContext_Destination_name(ctx, field)
+			case "type":
+				return ec.fieldContext_Destination_type(ctx, field)
+			case "exportedSignals":
+				return ec.fieldContext_Destination_exportedSignals(ctx, field)
+			case "fields":
+				return ec.fieldContext_Destination_fields(ctx, field)
+			case "destinationType":
+				return ec.fieldContext_Destination_destinationType(ctx, field)
+			case "conditions":
+				return ec.fieldContext_Destination_conditions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_createAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().CreateAction(rctx, fc.Args["action"].(model.ActionInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.Action)
+	fc.Result = res
+	return ec.marshalNAction2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐAction(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_createAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("FieldContext.Child cannot be called on type INTERFACE")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateAction(rctx, fc.Args["id"].(string), fc.Args["action"].(model.ActionInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.Action)
+	fc.Result = res
+	return ec.marshalNAction2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐAction(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("FieldContext.Child cannot be called on type INTERFACE")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
 		}
 	}()
 	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_persistK8sSources_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+	if fc.Args, err = ec.field_Mutation_updateAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_deleteAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_deleteAction(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().DeleteAction(rctx, fc.Args["id"].(string), fc.Args["actionType"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_deleteAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_deleteAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_createInstrumentationRule(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_createInstrumentationRule(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().CreateInstrumentationRule(rctx, fc.Args["instrumentationRule"].(model.InstrumentationRuleInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.InstrumentationRule)
+	fc.Result = res
+	return ec.marshalNInstrumentationRule2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRule(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_createInstrumentationRule(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "ruleId":
+				return ec.fieldContext_InstrumentationRule_ruleId(ctx, field)
+			case "ruleName":
+				return ec.fieldContext_InstrumentationRule_ruleName(ctx, field)
+			case "notes":
+				return ec.fieldContext_InstrumentationRule_notes(ctx, field)
+			case "disabled":
+				return ec.fieldContext_InstrumentationRule_disabled(ctx, field)
+			case "workloads":
+				return ec.fieldContext_InstrumentationRule_workloads(ctx, field)
+			case "instrumentationLibraries":
+				return ec.fieldContext_InstrumentationRule_instrumentationLibraries(ctx, field)
+			case "payloadCollection":
+				return ec.fieldContext_InstrumentationRule_payloadCollection(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationRule", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_createInstrumentationRule_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_updateInstrumentationRule(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_updateInstrumentationRule(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().UpdateInstrumentationRule(rctx, fc.Args["ruleId"].(string), fc.Args["instrumentationRule"].(model.InstrumentationRuleInput))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.InstrumentationRule)
+	fc.Result = res
+	return ec.marshalNInstrumentationRule2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRule(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_updateInstrumentationRule(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "ruleId":
+				return ec.fieldContext_InstrumentationRule_ruleId(ctx, field)
+			case "ruleName":
+				return ec.fieldContext_InstrumentationRule_ruleName(ctx, field)
+			case "notes":
+				return ec.fieldContext_InstrumentationRule_notes(ctx, field)
+			case "disabled":
+				return ec.fieldContext_InstrumentationRule_disabled(ctx, field)
+			case "workloads":
+				return ec.fieldContext_InstrumentationRule_workloads(ctx, field)
+			case "instrumentationLibraries":
+				return ec.fieldContext_InstrumentationRule_instrumentationLibraries(ctx, field)
+			case "payloadCollection":
+				return ec.fieldContext_InstrumentationRule_payloadCollection(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type InstrumentationRule", field.Name)
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_updateInstrumentationRule_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _Mutation_deleteInstrumentationRule(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_deleteInstrumentationRule(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().DeleteInstrumentationRule(rctx, fc.Args["ruleId"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_deleteInstrumentationRule(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_deleteInstrumentationRule_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
 		ec.Error(ctx, err)
 		return fc, err
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_testConnectionForDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_testConnectionForDestination(ctx, field)
+func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Context, field graphql.CollectedField, obj *model.ObservabilitySignalSupport) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Supported, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_ObservabilitySignalSupport_supported(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "ObservabilitySignalSupport",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _PayloadCollection_httpRequest(ctx context.Context, field graphql.CollectedField, obj *model.PayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PayloadCollection_httpRequest(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6391,61 +8104,43 @@ func (ec *executionContext) _Mutation_testConnectionForDestination(ctx context.C
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().TestConnectionForDestination(rctx, fc.Args["destination"].(model.DestinationInput))
+		return obj.HTTPRequest, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.TestConnectionResponse)
+	res := resTmp.(*model.HTTPPayloadCollection)
 	fc.Result = res
-	return ec.marshalNTestConnectionResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐTestConnectionResponse(ctx, field.Selections, res)
+	return ec.marshalOHttpPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐHTTPPayloadCollection(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_testConnectionForDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PayloadCollection_httpRequest(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "PayloadCollection",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "succeeded":
-				return ec.fieldContext_TestConnectionResponse_succeeded(ctx, field)
-			case "statusCode":
-				return ec.fieldContext_TestConnectionResponse_statusCode(ctx, field)
-			case "destinationType":
-				return ec.fieldContext_TestConnectionResponse_destinationType(ctx, field)
-			case "message":
-				return ec.fieldContext_TestConnectionResponse_message(ctx, field)
-			case "reason":
-				return ec.fieldContext_TestConnectionResponse_reason(ctx, field)
+			case "mimeTypes":
+				return ec.fieldContext_HttpPayloadCollection_mimeTypes(ctx, field)
+			case "maxPayloadLength":
+				return ec.fieldContext_HttpPayloadCollection_maxPayloadLength(ctx, field)
+			case "dropPartialPayloads":
+				return ec.fieldContext_HttpPayloadCollection_dropPartialPayloads(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type TestConnectionResponse", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type HttpPayloadCollection", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_testConnectionForDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_updateK8sActualSource(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_updateK8sActualSource(ctx, field)
+func (ec *executionContext) _PayloadCollection_httpResponse(ctx context.Context, field graphql.CollectedField, obj *model.PayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PayloadCollection_httpResponse(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6458,49 +8153,43 @@ func (ec *executionContext) _Mutation_updateK8sActualSource(ctx context.Context,
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().UpdateK8sActualSource(rctx, fc.Args["sourceId"].(model.K8sSourceID), fc.Args["patchSourceRequest"].(model.PatchSourceRequestInput))
+		return obj.HTTPResponse, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(*model.HTTPPayloadCollection)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalOHttpPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐHTTPPayloadCollection(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_updateK8sActualSource(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PayloadCollection_httpResponse(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "PayloadCollection",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			switch field.Name {
+			case "mimeTypes":
+				return ec.fieldContext_HttpPayloadCollection_mimeTypes(ctx, field)
+			case "maxPayloadLength":
+				return ec.fieldContext_HttpPayloadCollection_maxPayloadLength(ctx, field)
+			case "dropPartialPayloads":
+				return ec.fieldContext_HttpPayloadCollection_dropPartialPayloads(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type HttpPayloadCollection", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_updateK8sActualSource_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_updateDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_updateDestination(ctx, field)
+func (ec *executionContext) _PayloadCollection_dbQuery(ctx context.Context, field graphql.CollectedField, obj *model.PayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PayloadCollection_dbQuery(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6513,65 +8202,41 @@ func (ec *executionContext) _Mutation_updateDestination(ctx context.Context, fie
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().UpdateDestination(rctx, fc.Args["id"].(string), fc.Args["destination"].(model.DestinationInput))
+		return obj.DbQuery, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(*model.Destination)
+	res := resTmp.(*model.DbQueryPayloadCollection)
 	fc.Result = res
-	return ec.marshalNDestination2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDestination(ctx, field.Selections, res)
+	return ec.marshalODbQueryPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDbQueryPayloadCollection(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_updateDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PayloadCollection_dbQuery(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "PayloadCollection",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
 			switch field.Name {
-			case "id":
-				return ec.fieldContext_Destination_id(ctx, field)
-			case "name":
-				return ec.fieldContext_Destination_name(ctx, field)
-			case "type":
-				return ec.fieldContext_Destination_type(ctx, field)
-			case "exportedSignals":
-				return ec.fieldContext_Destination_exportedSignals(ctx, field)
-			case "fields":
-				return ec.fieldContext_Destination_fields(ctx, field)
-			case "destinationType":
-				return ec.fieldContext_Destination_destinationType(ctx, field)
-			case "conditions":
-				return ec.fieldContext_Destination_conditions(ctx, field)
+			case "maxPayloadLength":
+				return ec.fieldContext_DbQueryPayloadCollection_maxPayloadLength(ctx, field)
+			case "dropPartialPayloads":
+				return ec.fieldContext_DbQueryPayloadCollection_dropPartialPayloads(ctx, field)
 			}
-			return nil, fmt.Errorf("no field named %q was found under type Destination", field.Name)
+			return nil, fmt.Errorf("no field named %q was found under type DbQueryPayloadCollection", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_updateDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_createAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_createAction(ctx, field)
+func (ec *executionContext) _PayloadCollection_messaging(ctx context.Context, field graphql.CollectedField, obj *model.PayloadCollection) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PayloadCollection_messaging(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6584,49 +8249,41 @@ func (ec *executionContext) _Mutation_createAction(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().CreateAction(rctx, fc.Args["action"].(model.ActionInput))
+		return obj.Messaging, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(model.Action)
+	res := resTmp.(*model.MessagingPayloadCollection)
 	fc.Result = res
-	return ec.marshalNAction2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐAction(ctx, field.Selections, res)
+	return ec.marshalOMessagingPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐMessagingPayloadCollection(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_createAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PayloadCollection_messaging(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "PayloadCollection",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("FieldContext.Child cannot be called on type INTERFACE")
+			switch field.Name {
+			case "maxPayloadLength":
+				return ec.fieldContext_MessagingPayloadCollection_maxPayloadLength(ctx, field)
+			case "dropPartialPayloads":
+				return ec.fieldContext_MessagingPayloadCollection_dropPartialPayloads(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type MessagingPayloadCollection", field.Name)
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_createAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_updateAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_updateAction(ctx, field)
+func (ec *executionContext) _PiiMaskingAction_id(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_id(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6639,7 +8296,7 @@ func (ec *executionContext) _Mutation_updateAction(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().UpdateAction(rctx, fc.Args["id"].(string), fc.Args["action"].(model.ActionInput))
+		return obj.ID, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -6651,37 +8308,26 @@ func (ec *executionContext) _Mutation_updateAction(ctx context.Context, field gr
 		}
 		return graphql.Null
 	}
-	res := resTmp.(model.Action)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNAction2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐAction(ctx, field.Selections, res)
+	return ec.marshalNID2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_updateAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PiiMaskingAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "PiiMaskingAction",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("FieldContext.Child cannot be called on type INTERFACE")
+			return nil, errors.New("field of type ID does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_updateAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _Mutation_deleteAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_Mutation_deleteAction(ctx, field)
+func (ec *executionContext) _PiiMaskingAction_type(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_type(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6694,7 +8340,7 @@ func (ec *executionContext) _Mutation_deleteAction(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return ec.resolvers.Mutation().DeleteAction(rctx, fc.Args["id"].(string), fc.Args["actionType"].(string))
+		return obj.Type, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -6706,37 +8352,26 @@ func (ec *executionContext) _Mutation_deleteAction(ctx context.Context, field gr
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_Mutation_deleteAction(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PiiMaskingAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "Mutation",
+		Object:     "PiiMaskingAction",
 		Field:      field,
-		IsMethod:   true,
-		IsResolver: true,
+		IsMethod:   false,
+		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
-	defer func() {
-		if r := recover(); r != nil {
-			err = ec.Recover(ctx, r)
-			ec.Error(ctx, err)
-		}
-	}()
-	ctx = graphql.WithFieldContext(ctx, fc)
-	if fc.Args, err = ec.field_Mutation_deleteAction_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
-		ec.Error(ctx, err)
-		return fc, err
-	}
 	return fc, nil
 }
 
-func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Context, field graphql.CollectedField, obj *model.ObservabilitySignalSupport) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+func (ec *executionContext) _PiiMaskingAction_name(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6749,38 +8384,35 @@ func (ec *executionContext) _ObservabilitySignalSupport_supported(ctx context.Co
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Supported, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_ObservabilitySignalSupport_supported(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PiiMaskingAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "ObservabilitySignalSupport",
+		Object:     "PiiMaskingAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _PiiMaskingAction_id(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_PiiMaskingAction_id(ctx, field)
+func (ec *executionContext) _PiiMaskingAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_notes(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6793,38 +8425,35 @@ func (ec *executionContext) _PiiMaskingAction_id(ctx context.Context, field grap
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ID, nil
+		return obj.Notes, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		if !graphql.HasFieldError(ctx, fc) {
-			ec.Errorf(ctx, "must not be null")
-		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(*string)
 	fc.Result = res
-	return ec.marshalNID2string(ctx, field.Selections, res)
+	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_PiiMaskingAction_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PiiMaskingAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "PiiMaskingAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type ID does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _PiiMaskingAction_type(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_PiiMaskingAction_type(ctx, field)
+func (ec *executionContext) _PiiMaskingAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_disable(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6837,7 +8466,7 @@ func (ec *executionContext) _PiiMaskingAction_type(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Type, nil
+		return obj.Disable, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -6849,26 +8478,26 @@ func (ec *executionContext) _PiiMaskingAction_type(ctx context.Context, field gr
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(bool)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_PiiMaskingAction_type(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PiiMaskingAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "PiiMaskingAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Boolean does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _PiiMaskingAction_name(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_PiiMaskingAction_name(ctx, field)
+func (ec *executionContext) _PiiMaskingAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_signals(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6881,35 +8510,38 @@ func (ec *executionContext) _PiiMaskingAction_name(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Name, nil
+		return obj.Signals, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]model.SignalType)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_PiiMaskingAction_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PiiMaskingAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "PiiMaskingAction",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type SignalType does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _PiiMaskingAction_notes(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_PiiMaskingAction_notes(ctx, field)
+func (ec *executionContext) _PiiMaskingAction_details(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PiiMaskingAction_details(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6922,7 +8554,7 @@ func (ec *executionContext) _PiiMaskingAction_notes(ctx context.Context, field g
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Notes, nil
+		return obj.Details, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -6931,12 +8563,12 @@ func (ec *executionContext) _PiiMaskingAction_notes(ctx context.Context, field g
 	if resTmp == nil {
 		return graphql.Null
 	}
-	res := resTmp.(*string)
+	res := resTmp.([]string)
 	fc.Result = res
-	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
+	return ec.marshalOString2ᚕstringᚄ(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_PiiMaskingAction_notes(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PiiMaskingAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
 		Object:     "PiiMaskingAction",
 		Field:      field,
@@ -6949,8 +8581,8 @@ func (ec *executionContext) fieldContext_PiiMaskingAction_notes(_ context.Contex
 	return fc, nil
 }
 
-func (ec *executionContext) _PiiMaskingAction_disable(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_PiiMaskingAction_disable(ctx, field)
+func (ec *executionContext) _PodWorkload_namespace(ctx context.Context, field graphql.CollectedField, obj *model.PodWorkload) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PodWorkload_namespace(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -6963,7 +8595,7 @@ func (ec *executionContext) _PiiMaskingAction_disable(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Disable, nil
+		return obj.Namespace, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -6975,26 +8607,26 @@ func (ec *executionContext) _PiiMaskingAction_disable(ctx context.Context, field
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_PiiMaskingAction_disable(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PodWorkload_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "PiiMaskingAction",
+		Object:     "PodWorkload",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _PiiMaskingAction_signals(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_PiiMaskingAction_signals(ctx, field)
+func (ec *executionContext) _PodWorkload_kind(ctx context.Context, field graphql.CollectedField, obj *model.PodWorkload) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PodWorkload_kind(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -7007,7 +8639,7 @@ func (ec *executionContext) _PiiMaskingAction_signals(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Signals, nil
+		return obj.Kind, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -7019,26 +8651,26 @@ func (ec *executionContext) _PiiMaskingAction_signals(ctx context.Context, field
 		}
 		return graphql.Null
 	}
-	res := resTmp.([]model.SignalType)
+	res := resTmp.(model.K8sResourceKind)
 	fc.Result = res
-	return ec.marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalTypeᚄ(ctx, field.Selections, res)
+	return ec.marshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_PiiMaskingAction_signals(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PodWorkload_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "PiiMaskingAction",
+		Object:     "PodWorkload",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type SignalType does not have child fields")
+			return nil, errors.New("field of type K8sResourceKind does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _PiiMaskingAction_details(ctx context.Context, field graphql.CollectedField, obj *model.PiiMaskingAction) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_PiiMaskingAction_details(ctx, field)
+func (ec *executionContext) _PodWorkload_name(ctx context.Context, field graphql.CollectedField, obj *model.PodWorkload) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_PodWorkload_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -7051,23 +8683,26 @@ func (ec *executionContext) _PiiMaskingAction_details(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Details, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
 		return graphql.Null
 	}
-	res := resTmp.([]string)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalOString2ᚕstringᚄ(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_PiiMaskingAction_details(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_PodWorkload_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "PiiMaskingAction",
+		Object:     "PodWorkload",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -7430,6 +9065,8 @@ func (ec *executionContext) fieldContext_Query_computePlatform(_ context.Context
 				return ec.fieldContext_ComputePlatform_destinations(ctx, field)
 			case "actions":
 				return ec.fieldContext_ComputePlatform_actions(ctx, field)
+			case "instrumentationRules":
+				return ec.fieldContext_ComputePlatform_instrumentationRules(ctx, field)
 			}
 			return nil, fmt.Errorf("no field named %q was found under type ComputePlatform", field.Name)
 		},
@@ -10344,6 +11981,40 @@ func (ec *executionContext) unmarshalInputActionInput(ctx context.Context, obj i
 	return it, nil
 }
 
+func (ec *executionContext) unmarshalInputDbQueryPayloadCollectionInput(ctx context.Context, obj interface{}) (model.DbQueryPayloadCollectionInput, error) {
+	var it model.DbQueryPayloadCollectionInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"maxPayloadLength", "dropPartialPayloads"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "maxPayloadLength":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("maxPayloadLength"))
+			data, err := ec.unmarshalOInt2ᚖint(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.MaxPayloadLength = data
+		case "dropPartialPayloads":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("dropPartialPayloads"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.DropPartialPayloads = data
+		}
+	}
+
+	return it, nil
+}
+
 func (ec *executionContext) unmarshalInputDestinationInput(ctx context.Context, obj interface{}) (model.DestinationInput, error) {
 	var it model.DestinationInput
 	asMap := map[string]interface{}{}
@@ -10467,6 +12138,150 @@ func (ec *executionContext) unmarshalInputFieldInput(ctx context.Context, obj in
 	return it, nil
 }
 
+func (ec *executionContext) unmarshalInputHttpPayloadCollectionInput(ctx context.Context, obj interface{}) (model.HTTPPayloadCollectionInput, error) {
+	var it model.HTTPPayloadCollectionInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"mimeTypes", "maxPayloadLength", "dropPartialPayloads"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "mimeTypes":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("mimeTypes"))
+			data, err := ec.unmarshalOString2ᚕᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.MimeTypes = data
+		case "maxPayloadLength":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("maxPayloadLength"))
+			data, err := ec.unmarshalOInt2ᚖint(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.MaxPayloadLength = data
+		case "dropPartialPayloads":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("dropPartialPayloads"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.DropPartialPayloads = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputInstrumentationLibraryGlobalIdInput(ctx context.Context, obj interface{}) (model.InstrumentationLibraryGlobalIDInput, error) {
+	var it model.InstrumentationLibraryGlobalIDInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"name", "spanKind", "language"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		case "spanKind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("spanKind"))
+			data, err := ec.unmarshalOSpanKind2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.SpanKind = data
+		case "language":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("language"))
+			data, err := ec.unmarshalOProgrammingLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Language = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputInstrumentationRuleInput(ctx context.Context, obj interface{}) (model.InstrumentationRuleInput, error) {
+	var it model.InstrumentationRuleInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"ruleName", "notes", "disabled", "workloads", "instrumentationLibraries", "payloadCollection"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "ruleName":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("ruleName"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.RuleName = data
+		case "notes":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("notes"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Notes = data
+		case "disabled":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("disabled"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Disabled = data
+		case "workloads":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("workloads"))
+			data, err := ec.unmarshalOPodWorkloadInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPodWorkloadInputᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Workloads = data
+		case "instrumentationLibraries":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("instrumentationLibraries"))
+			data, err := ec.unmarshalOInstrumentationLibraryGlobalIdInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryGlobalIDInputᚄ(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.InstrumentationLibraries = data
+		case "payloadCollection":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("payloadCollection"))
+			data, err := ec.unmarshalOPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPayloadCollectionInput(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.PayloadCollection = data
+		}
+	}
+
+	return it, nil
+}
+
 func (ec *executionContext) unmarshalInputK8sDesiredNamespaceInput(ctx context.Context, obj interface{}) (model.K8sDesiredNamespaceInput, error) {
 	var it model.K8sDesiredNamespaceInput
 	asMap := map[string]interface{}{}
@@ -10548,75 +12363,157 @@ func (ec *executionContext) unmarshalInputK8sNamespaceId(ctx context.Context, ob
 			if err != nil {
 				return it, err
 			}
-			it.Name = data
+			it.Name = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj interface{}) (model.K8sSourceID, error) {
+	var it model.K8sSourceID
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"namespace", "kind", "name"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "namespace":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Namespace = data
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Kind = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		}
+	}
+
+	return it, nil
+}
+
+func (ec *executionContext) unmarshalInputMessagingPayloadCollectionInput(ctx context.Context, obj interface{}) (model.MessagingPayloadCollectionInput, error) {
+	var it model.MessagingPayloadCollectionInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"maxPayloadLength", "dropPartialPayloads"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "maxPayloadLength":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("maxPayloadLength"))
+			data, err := ec.unmarshalOInt2ᚖint(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.MaxPayloadLength = data
+		case "dropPartialPayloads":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("dropPartialPayloads"))
+			data, err := ec.unmarshalOBoolean2ᚖbool(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.DropPartialPayloads = data
 		}
 	}
 
 	return it, nil
 }
 
-func (ec *executionContext) unmarshalInputK8sSourceId(ctx context.Context, obj interface{}) (model.K8sSourceID, error) {
-	var it model.K8sSourceID
+func (ec *executionContext) unmarshalInputPatchSourceRequestInput(ctx context.Context, obj interface{}) (model.PatchSourceRequestInput, error) {
+	var it model.PatchSourceRequestInput
 	asMap := map[string]interface{}{}
 	for k, v := range obj.(map[string]interface{}) {
 		asMap[k] = v
 	}
 
-	fieldsInOrder := [...]string{"namespace", "kind", "name"}
+	fieldsInOrder := [...]string{"reportedName"}
 	for _, k := range fieldsInOrder {
 		v, ok := asMap[k]
 		if !ok {
 			continue
 		}
 		switch k {
-		case "namespace":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
-			data, err := ec.unmarshalNString2string(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Namespace = data
-		case "kind":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
-			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
-			if err != nil {
-				return it, err
-			}
-			it.Kind = data
-		case "name":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
-			data, err := ec.unmarshalNString2string(ctx, v)
+		case "reportedName":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("reportedName"))
+			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
 			if err != nil {
 				return it, err
 			}
-			it.Name = data
+			it.ReportedName = data
 		}
 	}
 
 	return it, nil
 }
 
-func (ec *executionContext) unmarshalInputPatchSourceRequestInput(ctx context.Context, obj interface{}) (model.PatchSourceRequestInput, error) {
-	var it model.PatchSourceRequestInput
+func (ec *executionContext) unmarshalInputPayloadCollectionInput(ctx context.Context, obj interface{}) (model.PayloadCollectionInput, error) {
+	var it model.PayloadCollectionInput
 	asMap := map[string]interface{}{}
 	for k, v := range obj.(map[string]interface{}) {
 		asMap[k] = v
 	}
 
-	fieldsInOrder := [...]string{"reportedName"}
+	fieldsInOrder := [...]string{"httpRequest", "httpResponse", "dbQuery", "messaging"}
 	for _, k := range fieldsInOrder {
 		v, ok := asMap[k]
 		if !ok {
 			continue
 		}
 		switch k {
-		case "reportedName":
-			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("reportedName"))
-			data, err := ec.unmarshalOString2ᚖstring(ctx, v)
+		case "httpRequest":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("httpRequest"))
+			data, err := ec.unmarshalOHttpPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐHTTPPayloadCollectionInput(ctx, v)
 			if err != nil {
 				return it, err
 			}
-			it.ReportedName = data
+			it.HTTPRequest = data
+		case "httpResponse":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("httpResponse"))
+			data, err := ec.unmarshalOHttpPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐHTTPPayloadCollectionInput(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.HTTPResponse = data
+		case "dbQuery":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("dbQuery"))
+			data, err := ec.unmarshalODbQueryPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDbQueryPayloadCollectionInput(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.DbQuery = data
+		case "messaging":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("messaging"))
+			data, err := ec.unmarshalOMessagingPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐMessagingPayloadCollectionInput(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Messaging = data
 		}
 	}
 
@@ -10698,6 +12595,47 @@ func (ec *executionContext) unmarshalInputPersistNamespaceSourceInput(ctx contex
 	return it, nil
 }
 
+func (ec *executionContext) unmarshalInputPodWorkloadInput(ctx context.Context, obj interface{}) (model.PodWorkloadInput, error) {
+	var it model.PodWorkloadInput
+	asMap := map[string]interface{}{}
+	for k, v := range obj.(map[string]interface{}) {
+		asMap[k] = v
+	}
+
+	fieldsInOrder := [...]string{"namespace", "kind", "name"}
+	for _, k := range fieldsInOrder {
+		v, ok := asMap[k]
+		if !ok {
+			continue
+		}
+		switch k {
+		case "namespace":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("namespace"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Namespace = data
+		case "kind":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("kind"))
+			data, err := ec.unmarshalNK8sResourceKind2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐK8sResourceKind(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Kind = data
+		case "name":
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("name"))
+			data, err := ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
+			it.Name = data
+		}
+	}
+
+	return it, nil
+}
+
 // endregion **************************** input.gotpl *****************************
 
 // region    ************************** interface.gotpl ***************************
@@ -11093,6 +13031,42 @@ func (ec *executionContext) _ComputePlatform(ctx context.Context, sel ast.Select
 				continue
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+		case "instrumentationRules":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._ComputePlatform_instrumentationRules(ctx, field, obj)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			if field.Deferrable != nil {
+				dfs, ok := deferred[field.Deferrable.Label]
+				di := 0
+				if ok {
+					dfs.AddField(field)
+					di = len(dfs.Values) - 1
+				} else {
+					dfs = graphql.NewFieldSet([]graphql.CollectedField{field})
+					deferred[field.Deferrable.Label] = dfs
+				}
+				dfs.Concurrently(di, func(ctx context.Context) graphql.Marshaler {
+					return innerFunc(ctx, dfs)
+				})
+
+				// don't run the out.Concurrently() call below
+				out.Values[i] = graphql.Null
+				continue
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
@@ -11167,6 +13141,44 @@ func (ec *executionContext) _Condition(ctx context.Context, sel ast.SelectionSet
 	return out
 }
 
+var dbQueryPayloadCollectionImplementors = []string{"DbQueryPayloadCollection"}
+
+func (ec *executionContext) _DbQueryPayloadCollection(ctx context.Context, sel ast.SelectionSet, obj *model.DbQueryPayloadCollection) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, dbQueryPayloadCollectionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("DbQueryPayloadCollection")
+		case "maxPayloadLength":
+			out.Values[i] = ec._DbQueryPayloadCollection_maxPayloadLength(ctx, field, obj)
+		case "dropPartialPayloads":
+			out.Values[i] = ec._DbQueryPayloadCollection_dropPartialPayloads(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var deleteAttributeImplementors = []string{"DeleteAttribute"}
 
 func (ec *executionContext) _DeleteAttribute(ctx context.Context, sel ast.SelectionSet, obj *model.DeleteAttribute) graphql.Marshaler {
@@ -11799,19 +13811,152 @@ func (ec *executionContext) _GetDestinationDetailsResponse(ctx context.Context,
 	return out
 }
 
-var getDestinationTypesResponseImplementors = []string{"GetDestinationTypesResponse"}
+var getDestinationTypesResponseImplementors = []string{"GetDestinationTypesResponse"}
+
+func (ec *executionContext) _GetDestinationTypesResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetDestinationTypesResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, getDestinationTypesResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("GetDestinationTypesResponse")
+		case "categories":
+			out.Values[i] = ec._GetDestinationTypesResponse_categories(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var httpPayloadCollectionImplementors = []string{"HttpPayloadCollection"}
+
+func (ec *executionContext) _HttpPayloadCollection(ctx context.Context, sel ast.SelectionSet, obj *model.HTTPPayloadCollection) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, httpPayloadCollectionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("HttpPayloadCollection")
+		case "mimeTypes":
+			out.Values[i] = ec._HttpPayloadCollection_mimeTypes(ctx, field, obj)
+		case "maxPayloadLength":
+			out.Values[i] = ec._HttpPayloadCollection_maxPayloadLength(ctx, field, obj)
+		case "dropPartialPayloads":
+			out.Values[i] = ec._HttpPayloadCollection_dropPartialPayloads(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var icaInstanceResponseImplementors = []string{"IcaInstanceResponse"}
+
+func (ec *executionContext) _IcaInstanceResponse(ctx context.Context, sel ast.SelectionSet, obj *model.IcaInstanceResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, icaInstanceResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("IcaInstanceResponse")
+		case "id":
+			out.Values[i] = ec._IcaInstanceResponse_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "type":
+			out.Values[i] = ec._IcaInstanceResponse_type(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "spec":
+			out.Values[i] = ec._IcaInstanceResponse_spec(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var instrumentationLibraryImplementors = []string{"InstrumentationLibrary"}
 
-func (ec *executionContext) _GetDestinationTypesResponse(ctx context.Context, sel ast.SelectionSet, obj *model.GetDestinationTypesResponse) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, getDestinationTypesResponseImplementors)
+func (ec *executionContext) _InstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationLibrary) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationLibraryImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("GetDestinationTypesResponse")
-		case "categories":
-			out.Values[i] = ec._GetDestinationTypesResponse_categories(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("InstrumentationLibrary")
+		case "libraryName":
+			out.Values[i] = ec._InstrumentationLibrary_libraryName(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "options":
+			out.Values[i] = ec._InstrumentationLibrary_options(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
@@ -11838,32 +13983,26 @@ func (ec *executionContext) _GetDestinationTypesResponse(ctx context.Context, se
 	return out
 }
 
-var icaInstanceResponseImplementors = []string{"IcaInstanceResponse"}
+var instrumentationLibraryGlobalIdImplementors = []string{"InstrumentationLibraryGlobalId"}
 
-func (ec *executionContext) _IcaInstanceResponse(ctx context.Context, sel ast.SelectionSet, obj *model.IcaInstanceResponse) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, icaInstanceResponseImplementors)
+func (ec *executionContext) _InstrumentationLibraryGlobalId(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationLibraryGlobalID) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationLibraryGlobalIdImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("IcaInstanceResponse")
-		case "id":
-			out.Values[i] = ec._IcaInstanceResponse_id(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "type":
-			out.Values[i] = ec._IcaInstanceResponse_type(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "spec":
-			out.Values[i] = ec._IcaInstanceResponse_spec(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("InstrumentationLibraryGlobalId")
+		case "name":
+			out.Values[i] = ec._InstrumentationLibraryGlobalId_name(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "spanKind":
+			out.Values[i] = ec._InstrumentationLibraryGlobalId_spanKind(ctx, field, obj)
+		case "language":
+			out.Values[i] = ec._InstrumentationLibraryGlobalId_language(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -11887,24 +14026,24 @@ func (ec *executionContext) _IcaInstanceResponse(ctx context.Context, sel ast.Se
 	return out
 }
 
-var instrumentationLibraryImplementors = []string{"InstrumentationLibrary"}
+var instrumentationOptionImplementors = []string{"InstrumentationOption"}
 
-func (ec *executionContext) _InstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationLibrary) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationLibraryImplementors)
+func (ec *executionContext) _InstrumentationOption(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationOption) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationOptionImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("InstrumentationLibrary")
-		case "libraryName":
-			out.Values[i] = ec._InstrumentationLibrary_libraryName(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("InstrumentationOption")
+		case "optionKey":
+			out.Values[i] = ec._InstrumentationOption_optionKey(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
-		case "options":
-			out.Values[i] = ec._InstrumentationLibrary_options(ctx, field, obj)
+		case "spanKind":
+			out.Values[i] = ec._InstrumentationOption_spanKind(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
@@ -11931,27 +14070,34 @@ func (ec *executionContext) _InstrumentationLibrary(ctx context.Context, sel ast
 	return out
 }
 
-var instrumentationOptionImplementors = []string{"InstrumentationOption"}
+var instrumentationRuleImplementors = []string{"InstrumentationRule"}
 
-func (ec *executionContext) _InstrumentationOption(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationOption) graphql.Marshaler {
-	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationOptionImplementors)
+func (ec *executionContext) _InstrumentationRule(ctx context.Context, sel ast.SelectionSet, obj *model.InstrumentationRule) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, instrumentationRuleImplementors)
 
 	out := graphql.NewFieldSet(fields)
 	deferred := make(map[string]*graphql.FieldSet)
 	for i, field := range fields {
 		switch field.Name {
 		case "__typename":
-			out.Values[i] = graphql.MarshalString("InstrumentationOption")
-		case "optionKey":
-			out.Values[i] = ec._InstrumentationOption_optionKey(ctx, field, obj)
-			if out.Values[i] == graphql.Null {
-				out.Invalids++
-			}
-		case "spanKind":
-			out.Values[i] = ec._InstrumentationOption_spanKind(ctx, field, obj)
+			out.Values[i] = graphql.MarshalString("InstrumentationRule")
+		case "ruleId":
+			out.Values[i] = ec._InstrumentationRule_ruleId(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "ruleName":
+			out.Values[i] = ec._InstrumentationRule_ruleName(ctx, field, obj)
+		case "notes":
+			out.Values[i] = ec._InstrumentationRule_notes(ctx, field, obj)
+		case "disabled":
+			out.Values[i] = ec._InstrumentationRule_disabled(ctx, field, obj)
+		case "workloads":
+			out.Values[i] = ec._InstrumentationRule_workloads(ctx, field, obj)
+		case "instrumentationLibraries":
+			out.Values[i] = ec._InstrumentationRule_instrumentationLibraries(ctx, field, obj)
+		case "payloadCollection":
+			out.Values[i] = ec._InstrumentationRule_payloadCollection(ctx, field, obj)
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -12225,6 +14371,44 @@ func (ec *executionContext) _LatencySamplerAction(ctx context.Context, sel ast.S
 	return out
 }
 
+var messagingPayloadCollectionImplementors = []string{"MessagingPayloadCollection"}
+
+func (ec *executionContext) _MessagingPayloadCollection(ctx context.Context, sel ast.SelectionSet, obj *model.MessagingPayloadCollection) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, messagingPayloadCollectionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("MessagingPayloadCollection")
+		case "maxPayloadLength":
+			out.Values[i] = ec._MessagingPayloadCollection_maxPayloadLength(ctx, field, obj)
+		case "dropPartialPayloads":
+			out.Values[i] = ec._MessagingPayloadCollection_dropPartialPayloads(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var mutationImplementors = []string{"Mutation"}
 
 func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet) graphql.Marshaler {
@@ -12307,6 +14491,27 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "createInstrumentationRule":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_createInstrumentationRule(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "updateInstrumentationRule":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_updateInstrumentationRule(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "deleteInstrumentationRule":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_deleteInstrumentationRule(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}
@@ -12369,6 +14574,48 @@ func (ec *executionContext) _ObservabilitySignalSupport(ctx context.Context, sel
 	return out
 }
 
+var payloadCollectionImplementors = []string{"PayloadCollection"}
+
+func (ec *executionContext) _PayloadCollection(ctx context.Context, sel ast.SelectionSet, obj *model.PayloadCollection) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, payloadCollectionImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("PayloadCollection")
+		case "httpRequest":
+			out.Values[i] = ec._PayloadCollection_httpRequest(ctx, field, obj)
+		case "httpResponse":
+			out.Values[i] = ec._PayloadCollection_httpResponse(ctx, field, obj)
+		case "dbQuery":
+			out.Values[i] = ec._PayloadCollection_dbQuery(ctx, field, obj)
+		case "messaging":
+			out.Values[i] = ec._PayloadCollection_messaging(ctx, field, obj)
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var piiMaskingActionImplementors = []string{"PiiMaskingAction", "Action"}
 
 func (ec *executionContext) _PiiMaskingAction(ctx context.Context, sel ast.SelectionSet, obj *model.PiiMaskingAction) graphql.Marshaler {
@@ -12429,6 +14676,55 @@ func (ec *executionContext) _PiiMaskingAction(ctx context.Context, sel ast.Selec
 	return out
 }
 
+var podWorkloadImplementors = []string{"PodWorkload"}
+
+func (ec *executionContext) _PodWorkload(ctx context.Context, sel ast.SelectionSet, obj *model.PodWorkload) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, podWorkloadImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("PodWorkload")
+		case "namespace":
+			out.Values[i] = ec._PodWorkload_namespace(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "kind":
+			out.Values[i] = ec._PodWorkload_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._PodWorkload_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var probabilisticSamplerActionImplementors = []string{"ProbabilisticSamplerAction", "Action"}
 
 func (ec *executionContext) _ProbabilisticSamplerAction(ctx context.Context, sel ast.SelectionSet, obj *model.ProbabilisticSamplerAction) graphql.Marshaler {
@@ -13659,11 +15955,80 @@ func (ec *executionContext) unmarshalNInstallationStatus2githubᚗcomᚋodigos
 	return res, graphql.ErrorOnPath(ctx, err)
 }
 
-func (ec *executionContext) marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx context.Context, sel ast.SelectionSet, v model.InstallationStatus) graphql.Marshaler {
-	return v
+func (ec *executionContext) marshalNInstallationStatus2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstallationStatus(ctx context.Context, sel ast.SelectionSet, v model.InstallationStatus) graphql.Marshaler {
+	return v
+}
+
+func (ec *executionContext) marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationLibrary) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNInstrumentationLibrary2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibrary(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNInstrumentationLibrary2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationLibrary) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._InstrumentationLibrary(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalNInstrumentationLibraryGlobalId2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryGlobalID(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationLibraryGlobalID) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._InstrumentationLibraryGlobalId(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNInstrumentationLibraryGlobalIdInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryGlobalIDInput(ctx context.Context, v interface{}) (*model.InstrumentationLibraryGlobalIDInput, error) {
+	res, err := ec.unmarshalInputInstrumentationLibraryGlobalIdInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
 }
 
-func (ec *executionContext) marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationLibrary) graphql.Marshaler {
+func (ec *executionContext) marshalNInstrumentationOption2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOptionᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationOption) graphql.Marshaler {
 	ret := make(graphql.Array, len(v))
 	var wg sync.WaitGroup
 	isLen1 := len(v) == 1
@@ -13687,7 +16052,7 @@ func (ec *executionContext) marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋ
 			if !isLen1 {
 				defer wg.Done()
 			}
-			ret[i] = ec.marshalNInstrumentationLibrary2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibrary(ctx, sel, v[i])
+			ret[i] = ec.marshalNInstrumentationOption2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOption(ctx, sel, v[i])
 		}
 		if isLen1 {
 			f(i)
@@ -13707,17 +16072,21 @@ func (ec *executionContext) marshalNInstrumentationLibrary2ᚕᚖgithubᚗcomᚋ
 	return ret
 }
 
-func (ec *executionContext) marshalNInstrumentationLibrary2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibrary(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationLibrary) graphql.Marshaler {
+func (ec *executionContext) marshalNInstrumentationOption2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOption(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationOption) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
 			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
 		}
 		return graphql.Null
 	}
-	return ec._InstrumentationLibrary(ctx, sel, v)
+	return ec._InstrumentationOption(ctx, sel, v)
 }
 
-func (ec *executionContext) marshalNInstrumentationOption2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOptionᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationOption) graphql.Marshaler {
+func (ec *executionContext) marshalNInstrumentationRule2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRule(ctx context.Context, sel ast.SelectionSet, v model.InstrumentationRule) graphql.Marshaler {
+	return ec._InstrumentationRule(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNInstrumentationRule2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRuleᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationRule) graphql.Marshaler {
 	ret := make(graphql.Array, len(v))
 	var wg sync.WaitGroup
 	isLen1 := len(v) == 1
@@ -13741,7 +16110,7 @@ func (ec *executionContext) marshalNInstrumentationOption2ᚕᚖgithubᚗcomᚋo
 			if !isLen1 {
 				defer wg.Done()
 			}
-			ret[i] = ec.marshalNInstrumentationOption2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOption(ctx, sel, v[i])
+			ret[i] = ec.marshalNInstrumentationRule2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRule(ctx, sel, v[i])
 		}
 		if isLen1 {
 			f(i)
@@ -13761,14 +16130,19 @@ func (ec *executionContext) marshalNInstrumentationOption2ᚕᚖgithubᚗcomᚋo
 	return ret
 }
 
-func (ec *executionContext) marshalNInstrumentationOption2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationOption(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationOption) graphql.Marshaler {
+func (ec *executionContext) marshalNInstrumentationRule2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRule(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentationRule) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
 			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
 		}
 		return graphql.Null
 	}
-	return ec._InstrumentationOption(ctx, sel, v)
+	return ec._InstrumentationRule(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNInstrumentationRuleInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationRuleInput(ctx context.Context, v interface{}) (model.InstrumentationRuleInput, error) {
+	res, err := ec.unmarshalInputInstrumentationRuleInput(ctx, v)
+	return res, graphql.ErrorOnPath(ctx, err)
 }
 
 func (ec *executionContext) unmarshalNInt2int(ctx context.Context, v interface{}) (int, error) {
@@ -13913,6 +16287,21 @@ func (ec *executionContext) unmarshalNPersistNamespaceSourceInput2ᚖgithubᚗco
 	return &res, graphql.ErrorOnPath(ctx, err)
 }
 
+func (ec *executionContext) marshalNPodWorkload2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPodWorkload(ctx context.Context, sel ast.SelectionSet, v *model.PodWorkload) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._PodWorkload(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalNPodWorkloadInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPodWorkloadInput(ctx context.Context, v interface{}) (*model.PodWorkloadInput, error) {
+	res, err := ec.unmarshalInputPodWorkloadInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) unmarshalNSignalType2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSignalType(ctx context.Context, v interface{}) (model.SignalType, error) {
 	var res model.SignalType
 	err := res.UnmarshalGQL(v)
@@ -14428,6 +16817,21 @@ func (ec *executionContext) marshalOCondition2ᚕᚖgithubᚗcomᚋodigosᚑio
 	return ret
 }
 
+func (ec *executionContext) marshalODbQueryPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDbQueryPayloadCollection(ctx context.Context, sel ast.SelectionSet, v *model.DbQueryPayloadCollection) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._DbQueryPayloadCollection(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalODbQueryPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐDbQueryPayloadCollectionInput(ctx context.Context, v interface{}) (*model.DbQueryPayloadCollectionInput, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := ec.unmarshalInputDbQueryPayloadCollectionInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
 func (ec *executionContext) marshalOGetConfigResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐGetConfigResponse(ctx context.Context, sel ast.SelectionSet, v *model.GetConfigResponse) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
@@ -14449,6 +16853,88 @@ func (ec *executionContext) marshalOGetDestinationTypesResponse2ᚖgithubᚗcom
 	return ec._GetDestinationTypesResponse(ctx, sel, v)
 }
 
+func (ec *executionContext) marshalOHttpPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐHTTPPayloadCollection(ctx context.Context, sel ast.SelectionSet, v *model.HTTPPayloadCollection) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._HttpPayloadCollection(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalOHttpPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐHTTPPayloadCollectionInput(ctx context.Context, v interface{}) (*model.HTTPPayloadCollectionInput, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := ec.unmarshalInputHttpPayloadCollectionInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOInstrumentationLibraryGlobalId2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryGlobalIDᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.InstrumentationLibraryGlobalID) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNInstrumentationLibraryGlobalId2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryGlobalID(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalOInstrumentationLibraryGlobalIdInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryGlobalIDInputᚄ(ctx context.Context, v interface{}) ([]*model.InstrumentationLibraryGlobalIDInput, error) {
+	if v == nil {
+		return nil, nil
+	}
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*model.InstrumentationLibraryGlobalIDInput, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNInstrumentationLibraryGlobalIdInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentationLibraryGlobalIDInput(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
 func (ec *executionContext) marshalOInstrumentedApplicationDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐInstrumentedApplicationDetails(ctx context.Context, sel ast.SelectionSet, v *model.InstrumentedApplicationDetails) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
@@ -14486,6 +16972,119 @@ func (ec *executionContext) marshalOK8sActualSource2ᚖgithubᚗcomᚋodigosᚑi
 	return ec._K8sActualSource(ctx, sel, v)
 }
 
+func (ec *executionContext) marshalOMessagingPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐMessagingPayloadCollection(ctx context.Context, sel ast.SelectionSet, v *model.MessagingPayloadCollection) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._MessagingPayloadCollection(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalOMessagingPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐMessagingPayloadCollectionInput(ctx context.Context, v interface{}) (*model.MessagingPayloadCollectionInput, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := ec.unmarshalInputMessagingPayloadCollectionInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOPayloadCollection2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPayloadCollection(ctx context.Context, sel ast.SelectionSet, v *model.PayloadCollection) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return ec._PayloadCollection(ctx, sel, v)
+}
+
+func (ec *executionContext) unmarshalOPayloadCollectionInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPayloadCollectionInput(ctx context.Context, v interface{}) (*model.PayloadCollectionInput, error) {
+	if v == nil {
+		return nil, nil
+	}
+	res, err := ec.unmarshalInputPayloadCollectionInput(ctx, v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOPodWorkload2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPodWorkloadᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.PodWorkload) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNPodWorkload2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPodWorkload(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) unmarshalOPodWorkloadInput2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPodWorkloadInputᚄ(ctx context.Context, v interface{}) ([]*model.PodWorkloadInput, error) {
+	if v == nil {
+		return nil, nil
+	}
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*model.PodWorkloadInput, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalNPodWorkloadInput2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPodWorkloadInput(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) unmarshalOProgrammingLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx context.Context, v interface{}) (*model.ProgrammingLanguage, error) {
+	if v == nil {
+		return nil, nil
+	}
+	var res = new(model.ProgrammingLanguage)
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOProgrammingLanguage2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐProgrammingLanguage(ctx context.Context, sel ast.SelectionSet, v *model.ProgrammingLanguage) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return v
+}
+
 func (ec *executionContext) marshalOSourceContainerRuntimeDetails2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetailsᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.SourceContainerRuntimeDetails) graphql.Marshaler {
 	if v == nil {
 		return graphql.Null
@@ -14533,6 +17132,22 @@ func (ec *executionContext) marshalOSourceContainerRuntimeDetails2ᚕᚖgithub
 	return ret
 }
 
+func (ec *executionContext) unmarshalOSpanKind2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx context.Context, v interface{}) (*model.SpanKind, error) {
+	if v == nil {
+		return nil, nil
+	}
+	var res = new(model.SpanKind)
+	err := res.UnmarshalGQL(v)
+	return res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalOSpanKind2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSpanKind(ctx context.Context, sel ast.SelectionSet, v *model.SpanKind) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	return v
+}
+
 func (ec *executionContext) unmarshalOString2ᚕstringᚄ(ctx context.Context, v interface{}) ([]string, error) {
 	if v == nil {
 		return nil, nil
@@ -14571,6 +17186,38 @@ func (ec *executionContext) marshalOString2ᚕstringᚄ(ctx context.Context, sel
 	return ret
 }
 
+func (ec *executionContext) unmarshalOString2ᚕᚖstring(ctx context.Context, v interface{}) ([]*string, error) {
+	if v == nil {
+		return nil, nil
+	}
+	var vSlice []interface{}
+	if v != nil {
+		vSlice = graphql.CoerceList(v)
+	}
+	var err error
+	res := make([]*string, len(vSlice))
+	for i := range vSlice {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithIndex(i))
+		res[i], err = ec.unmarshalOString2ᚖstring(ctx, vSlice[i])
+		if err != nil {
+			return nil, err
+		}
+	}
+	return res, nil
+}
+
+func (ec *executionContext) marshalOString2ᚕᚖstring(ctx context.Context, sel ast.SelectionSet, v []*string) graphql.Marshaler {
+	if v == nil {
+		return graphql.Null
+	}
+	ret := make(graphql.Array, len(v))
+	for i := range v {
+		ret[i] = ec.marshalOString2ᚖstring(ctx, sel, v[i])
+	}
+
+	return ret
+}
+
 func (ec *executionContext) unmarshalOString2ᚖstring(ctx context.Context, v interface{}) (*string, error) {
 	if v == nil {
 		return nil, nil
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index 0c87f8234..d6395ae8d 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -60,13 +60,14 @@ type ClusterInfo struct {
 }
 
 type ComputePlatform struct {
-	ComputePlatformType ComputePlatformType    `json:"computePlatformType"`
-	K8sActualNamespace  *K8sActualNamespace    `json:"k8sActualNamespace,omitempty"`
-	K8sActualNamespaces []*K8sActualNamespace  `json:"k8sActualNamespaces"`
-	K8sActualSource     *K8sActualSource       `json:"k8sActualSource,omitempty"`
-	K8sActualSources    []*K8sActualSource     `json:"k8sActualSources"`
-	Destinations        []*Destination         `json:"destinations"`
-	Actions             []*IcaInstanceResponse `json:"actions"`
+	ComputePlatformType  ComputePlatformType    `json:"computePlatformType"`
+	K8sActualNamespace   *K8sActualNamespace    `json:"k8sActualNamespace,omitempty"`
+	K8sActualNamespaces  []*K8sActualNamespace  `json:"k8sActualNamespaces"`
+	K8sActualSource      *K8sActualSource       `json:"k8sActualSource,omitempty"`
+	K8sActualSources     []*K8sActualSource     `json:"k8sActualSources"`
+	Destinations         []*Destination         `json:"destinations"`
+	Actions              []*IcaInstanceResponse `json:"actions"`
+	InstrumentationRules []*InstrumentationRule `json:"instrumentationRules"`
 }
 
 type Condition struct {
@@ -77,6 +78,16 @@ type Condition struct {
 	Message            *string         `json:"message,omitempty"`
 }
 
+type DbQueryPayloadCollection struct {
+	MaxPayloadLength    *int  `json:"maxPayloadLength,omitempty"`
+	DropPartialPayloads *bool `json:"dropPartialPayloads,omitempty"`
+}
+
+type DbQueryPayloadCollectionInput struct {
+	MaxPayloadLength    *int  `json:"maxPayloadLength,omitempty"`
+	DropPartialPayloads *bool `json:"dropPartialPayloads,omitempty"`
+}
+
 type DeleteAttribute struct {
 	AttributeName string `json:"attributeName"`
 }
@@ -177,6 +188,18 @@ type GetDestinationDetailsResponse struct {
 	Fields []*Field `json:"fields"`
 }
 
+type HTTPPayloadCollection struct {
+	MimeTypes           []*string `json:"mimeTypes,omitempty"`
+	MaxPayloadLength    *int      `json:"maxPayloadLength,omitempty"`
+	DropPartialPayloads *bool     `json:"dropPartialPayloads,omitempty"`
+}
+
+type HTTPPayloadCollectionInput struct {
+	MimeTypes           []*string `json:"mimeTypes,omitempty"`
+	MaxPayloadLength    *int      `json:"maxPayloadLength,omitempty"`
+	DropPartialPayloads *bool     `json:"dropPartialPayloads,omitempty"`
+}
+
 type IcaInstanceResponse struct {
 	ID   string `json:"id"`
 	Type string `json:"type"`
@@ -188,11 +211,42 @@ type InstrumentationLibrary struct {
 	Options     []*InstrumentationOption `json:"options"`
 }
 
+type InstrumentationLibraryGlobalID struct {
+	Name     string               `json:"name"`
+	SpanKind *SpanKind            `json:"spanKind,omitempty"`
+	Language *ProgrammingLanguage `json:"language,omitempty"`
+}
+
+type InstrumentationLibraryGlobalIDInput struct {
+	Name     string               `json:"name"`
+	SpanKind *SpanKind            `json:"spanKind,omitempty"`
+	Language *ProgrammingLanguage `json:"language,omitempty"`
+}
+
 type InstrumentationOption struct {
 	OptionKey string   `json:"optionKey"`
 	SpanKind  SpanKind `json:"spanKind"`
 }
 
+type InstrumentationRule struct {
+	RuleID                   string                            `json:"ruleId"`
+	RuleName                 *string                           `json:"ruleName,omitempty"`
+	Notes                    *string                           `json:"notes,omitempty"`
+	Disabled                 *bool                             `json:"disabled,omitempty"`
+	Workloads                []*PodWorkload                    `json:"workloads,omitempty"`
+	InstrumentationLibraries []*InstrumentationLibraryGlobalID `json:"instrumentationLibraries,omitempty"`
+	PayloadCollection        *PayloadCollection                `json:"payloadCollection,omitempty"`
+}
+
+type InstrumentationRuleInput struct {
+	RuleName                 *string                                `json:"ruleName,omitempty"`
+	Notes                    *string                                `json:"notes,omitempty"`
+	Disabled                 *bool                                  `json:"disabled,omitempty"`
+	Workloads                []*PodWorkloadInput                    `json:"workloads,omitempty"`
+	InstrumentationLibraries []*InstrumentationLibraryGlobalIDInput `json:"instrumentationLibraries,omitempty"`
+	PayloadCollection        *PayloadCollectionInput                `json:"payloadCollection,omitempty"`
+}
+
 type InstrumentedApplicationDetails struct {
 	Containers             []*SourceContainerRuntimeDetails `json:"containers,omitempty"`
 	Conditions             []*Condition                     `json:"conditions,omitempty"`
@@ -263,6 +317,16 @@ func (this LatencySamplerAction) GetSignals() []SignalType {
 	return interfaceSlice
 }
 
+type MessagingPayloadCollection struct {
+	MaxPayloadLength    *int  `json:"maxPayloadLength,omitempty"`
+	DropPartialPayloads *bool `json:"dropPartialPayloads,omitempty"`
+}
+
+type MessagingPayloadCollectionInput struct {
+	MaxPayloadLength    *int  `json:"maxPayloadLength,omitempty"`
+	DropPartialPayloads *bool `json:"dropPartialPayloads,omitempty"`
+}
+
 type Mutation struct {
 }
 
@@ -270,6 +334,20 @@ type PatchSourceRequestInput struct {
 	ReportedName *string `json:"reportedName,omitempty"`
 }
 
+type PayloadCollection struct {
+	HTTPRequest  *HTTPPayloadCollection      `json:"httpRequest,omitempty"`
+	HTTPResponse *HTTPPayloadCollection      `json:"httpResponse,omitempty"`
+	DbQuery      *DbQueryPayloadCollection   `json:"dbQuery,omitempty"`
+	Messaging    *MessagingPayloadCollection `json:"messaging,omitempty"`
+}
+
+type PayloadCollectionInput struct {
+	HTTPRequest  *HTTPPayloadCollectionInput      `json:"httpRequest,omitempty"`
+	HTTPResponse *HTTPPayloadCollectionInput      `json:"httpResponse,omitempty"`
+	DbQuery      *DbQueryPayloadCollectionInput   `json:"dbQuery,omitempty"`
+	Messaging    *MessagingPayloadCollectionInput `json:"messaging,omitempty"`
+}
+
 type PersistNamespaceItemInput struct {
 	Name           string `json:"name"`
 	FutureSelected *bool  `json:"futureSelected,omitempty"`
@@ -308,6 +386,18 @@ func (this PiiMaskingAction) GetSignals() []SignalType {
 	return interfaceSlice
 }
 
+type PodWorkload struct {
+	Namespace string          `json:"namespace"`
+	Kind      K8sResourceKind `json:"kind"`
+	Name      string          `json:"name"`
+}
+
+type PodWorkloadInput struct {
+	Namespace string          `json:"namespace"`
+	Kind      K8sResourceKind `json:"kind"`
+	Name      string          `json:"name"`
+}
+
 type ProbabilisticSamplerAction struct {
 	ID      string       `json:"id"`
 	Type    string       `json:"type"`
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index b7d94ef16..2e78804bd 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -104,12 +104,101 @@ input K8sDesiredSourceInput {
   autoInstrument: Boolean
 }
 
+type PodWorkload {
+  namespace: String!
+  kind: K8sResourceKind!
+  name: String!
+}
+
+input PodWorkloadInput {
+  namespace: String!
+  kind: K8sResourceKind!
+  name: String!
+}
+
 input K8sSourceId {
   namespace: String!
   kind: K8sResourceKind!
   name: String!
 }
 
+type InstrumentationRule {
+  ruleId: ID!
+  ruleName: String
+  notes: String
+  disabled: Boolean
+  workloads: [PodWorkload!]
+  instrumentationLibraries: [InstrumentationLibraryGlobalId!]
+  payloadCollection: PayloadCollection
+}
+
+input InstrumentationRuleInput {
+  ruleName: String
+  notes: String
+  disabled: Boolean
+  workloads: [PodWorkloadInput!]
+  instrumentationLibraries: [InstrumentationLibraryGlobalIdInput!]
+  payloadCollection: PayloadCollectionInput
+}
+
+type InstrumentationLibraryGlobalId {
+  name: String!
+  spanKind: SpanKind
+  language: ProgrammingLanguage
+}
+
+input InstrumentationLibraryGlobalIdInput {
+  name: String!
+  spanKind: SpanKind
+  language: ProgrammingLanguage
+}
+
+type PayloadCollection {
+  httpRequest: HttpPayloadCollection
+  httpResponse: HttpPayloadCollection
+  dbQuery: DbQueryPayloadCollection
+  messaging: MessagingPayloadCollection
+}
+
+input PayloadCollectionInput {
+  httpRequest: HttpPayloadCollectionInput
+  httpResponse: HttpPayloadCollectionInput
+  dbQuery: DbQueryPayloadCollectionInput
+  messaging: MessagingPayloadCollectionInput
+}
+
+type HttpPayloadCollection {
+  mimeTypes: [String]
+  maxPayloadLength: Int
+  dropPartialPayloads: Boolean
+}
+
+input HttpPayloadCollectionInput {
+  mimeTypes: [String]
+  maxPayloadLength: Int
+  dropPartialPayloads: Boolean
+}
+
+type DbQueryPayloadCollection {
+  maxPayloadLength: Int
+  dropPartialPayloads: Boolean
+}
+
+input DbQueryPayloadCollectionInput {
+  maxPayloadLength: Int
+  dropPartialPayloads: Boolean
+}
+
+type MessagingPayloadCollection {
+  maxPayloadLength: Int
+  dropPartialPayloads: Boolean
+}
+
+input MessagingPayloadCollectionInput {
+  maxPayloadLength: Int
+  dropPartialPayloads: Boolean
+}
+
 type ComputePlatform {
   computePlatformType: ComputePlatformType!
   k8sActualNamespace(name: String!): K8sActualNamespace
@@ -122,6 +211,7 @@ type ComputePlatform {
   k8sActualSources: [K8sActualSource]!
   destinations: [Destination!]!
   actions: [IcaInstanceResponse!]!
+  instrumentationRules: [InstrumentationRule!]!
 }
 
 type SupportedSignals {
@@ -362,4 +452,13 @@ type Mutation {
   createAction(action: ActionInput!): Action!
   updateAction(id: ID!, action: ActionInput!): Action!
   deleteAction(id: ID!, actionType: String!): Boolean!
+
+  createInstrumentationRule(
+    instrumentationRule: InstrumentationRuleInput!
+  ): InstrumentationRule!
+  updateInstrumentationRule(
+    ruleId: ID!
+    instrumentationRule: InstrumentationRuleInput!
+  ): InstrumentationRule!
+  deleteInstrumentationRule(ruleId: ID!): Boolean!
 }
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 361ba024e..f213dd5e1 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -268,6 +268,11 @@ func (r *computePlatformResolver) Actions(ctx context.Context, obj *model.Comput
 	return response, nil
 }
 
+// InstrumentationRules is the resolver for the instrumentationRules field.
+func (r *computePlatformResolver) InstrumentationRules(ctx context.Context, obj *model.ComputePlatform) ([]*model.InstrumentationRule, error) {
+	return services.ListInstrumentationRules(ctx)
+}
+
 // Type is the resolver for the type field.
 func (r *destinationResolver) Type(ctx context.Context, obj *model.Destination) (string, error) {
 	panic(fmt.Errorf("not implemented: Type - type"))
@@ -645,6 +650,26 @@ func (r *mutationResolver) DeleteAction(ctx context.Context, id string, actionTy
 	return true, nil
 }
 
+// CreateInstrumentationRule is the resolver for the createInstrumentationRule field.
+func (r *mutationResolver) CreateInstrumentationRule(ctx context.Context, instrumentationRule model.InstrumentationRuleInput) (*model.InstrumentationRule, error) {
+	return services.CreateInstrumentationRule(ctx, instrumentationRule)
+}
+
+// UpdateInstrumentationRule is the resolver for the updateInstrumentationRule field.
+func (r *mutationResolver) UpdateInstrumentationRule(ctx context.Context, ruleID string, instrumentationRule model.InstrumentationRuleInput) (*model.InstrumentationRule, error) {
+	return services.UpdateInstrumentationRule(ctx, ruleID, instrumentationRule)
+}
+
+// DeleteInstrumentationRule is the resolver for the deleteInstrumentationRule field.
+func (r *mutationResolver) DeleteInstrumentationRule(ctx context.Context, ruleID string) (bool, error) {
+	_, err := services.DeleteInstrumentationRule(ctx, ruleID)
+	if err != nil {
+		return false, err
+	}
+
+	return true, nil
+}
+
 // ComputePlatform is the resolver for the computePlatform field.
 func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlatform, error) {
 	return &model.ComputePlatform{
diff --git a/frontend/services/instrumentationrule.go b/frontend/services/instrumentationrule.go
new file mode 100644
index 000000000..8f980c834
--- /dev/null
+++ b/frontend/services/instrumentationrule.go
@@ -0,0 +1,305 @@
+package services
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	instrumentationrules "github.com/odigos-io/odigos/api/odigos/v1alpha1/instrumentationrules"
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/graph/model"
+	"github.com/odigos-io/odigos/frontend/kube"
+	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+// ListInstrumentationRules fetches all instrumentation rules
+func ListInstrumentationRules(ctx context.Context) ([]*model.InstrumentationRule, error) {
+	odigosns := consts.DefaultOdigosNamespace
+	instrumentationRules, err := kube.DefaultClient.OdigosClient.InstrumentationRules(odigosns).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("error getting instrumentation rules: %w", err)
+	}
+
+	var gqlRules []*model.InstrumentationRule
+	for _, rule := range instrumentationRules.Items {
+
+		gqlRules = append(gqlRules, &model.InstrumentationRule{
+			RuleID:                   rule.Name,
+			RuleName:                 &rule.Spec.RuleName,
+			Notes:                    &rule.Spec.Notes,
+			Disabled:                 &rule.Spec.Disabled,
+			Workloads:                convertWorkloads(rule.Spec.Workloads),
+			InstrumentationLibraries: convertInstrumentationLibraries(rule.Spec.InstrumentationLibraries),
+			PayloadCollection:        convertPayloadCollection(rule.Spec.PayloadCollection),
+		})
+	}
+	return gqlRules, nil
+}
+
+func GetInstrumentationRule(ctx context.Context, id string) (*model.InstrumentationRule, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	rule, err := kube.DefaultClient.OdigosClient.InstrumentationRules(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, handleNotFoundError(err, id, "instrumentation rule")
+	}
+
+	return &model.InstrumentationRule{
+		RuleID:                   rule.Name,
+		RuleName:                 &rule.Spec.RuleName,
+		Notes:                    &rule.Spec.Notes,
+		Disabled:                 &rule.Spec.Disabled,
+		Workloads:                convertWorkloads(rule.Spec.Workloads),
+		InstrumentationLibraries: convertInstrumentationLibraries(rule.Spec.InstrumentationLibraries),
+		PayloadCollection:        convertPayloadCollection(rule.Spec.PayloadCollection),
+	}, nil
+}
+
+func UpdateInstrumentationRule(ctx context.Context, id string, input model.InstrumentationRuleInput) (*model.InstrumentationRule, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	// Retrieve existing rule
+	existingRule, err := kube.DefaultClient.OdigosClient.InstrumentationRules(odigosns).Get(ctx, id, metav1.GetOptions{})
+	if err != nil {
+		return nil, handleNotFoundError(err, id, "instrumentation rule")
+	}
+	// Update the existing rule's specification
+	existingRule.Spec.RuleName = *input.RuleName
+	existingRule.Spec.Notes = *input.Notes
+	existingRule.Spec.Disabled = *input.Disabled
+	if input.Workloads != nil {
+		convertedWorkloads := make([]workload.PodWorkload, len(input.Workloads))
+		for i, w := range input.Workloads {
+			convertedWorkloads[i] = workload.PodWorkload{
+				Name:      w.Name,
+				Namespace: w.Namespace,
+				Kind:      workload.WorkloadKind(w.Kind),
+			}
+		}
+		existingRule.Spec.Workloads = &convertedWorkloads
+	} else {
+		existingRule.Spec.Workloads = nil
+	}
+
+	if input.InstrumentationLibraries != nil {
+		convertedLibraries := make([]v1alpha1.InstrumentationLibraryGlobalId, len(input.InstrumentationLibraries))
+		for i, lib := range input.InstrumentationLibraries {
+			convertedLibraries[i] = v1alpha1.InstrumentationLibraryGlobalId{
+				Name:     lib.Name,
+				SpanKind: common.SpanKind(*lib.SpanKind),
+				Language: common.ProgrammingLanguage(*lib.Language),
+			}
+		}
+		existingRule.Spec.InstrumentationLibraries = &convertedLibraries
+	} else {
+		existingRule.Spec.InstrumentationLibraries = nil
+	}
+
+	if input.PayloadCollection != nil {
+		payloadCollection := &instrumentationrules.PayloadCollection{}
+
+		if input.PayloadCollection.HTTPRequest != nil {
+			payloadCollection.HttpRequest = &instrumentationrules.HttpPayloadCollection{}
+		}
+
+		if input.PayloadCollection.HTTPResponse != nil {
+			payloadCollection.HttpResponse = &instrumentationrules.HttpPayloadCollection{}
+		}
+
+		if input.PayloadCollection.DbQuery != nil {
+			payloadCollection.DbQuery = &instrumentationrules.DbQueryPayloadCollection{}
+		}
+
+		if input.PayloadCollection.Messaging != nil {
+			payloadCollection.Messaging = &instrumentationrules.MessagingPayloadCollection{}
+		}
+
+		existingRule.Spec.PayloadCollection = payloadCollection
+	} else {
+		existingRule.Spec.PayloadCollection = nil
+	}
+
+	// Update rule in Kubernetes
+	updatedRule, err := kube.DefaultClient.OdigosClient.InstrumentationRules(odigosns).Update(ctx, existingRule, metav1.UpdateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("error updating instrumentation rule: %w", err)
+	}
+
+	return &model.InstrumentationRule{
+		RuleID:                   updatedRule.Name,
+		RuleName:                 &updatedRule.Spec.RuleName,
+		Notes:                    &updatedRule.Spec.Notes,
+		Disabled:                 &updatedRule.Spec.Disabled,
+		Workloads:                convertWorkloads(updatedRule.Spec.Workloads),
+		InstrumentationLibraries: convertInstrumentationLibraries(updatedRule.Spec.InstrumentationLibraries),
+		PayloadCollection:        convertPayloadCollection(updatedRule.Spec.PayloadCollection),
+	}, nil
+}
+
+func DeleteInstrumentationRule(ctx context.Context, id string) (bool, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	err := kube.DefaultClient.OdigosClient.InstrumentationRules(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+	if err != nil {
+		return false, handleNotFoundError(err, id, "instrumentation rule")
+	}
+
+	return true, nil
+}
+
+func CreateInstrumentationRule(ctx context.Context, input model.InstrumentationRuleInput) (*model.InstrumentationRule, error) {
+	odigosns := consts.DefaultOdigosNamespace
+
+	ruleName := *input.RuleName
+	notes := *input.Notes
+	disabled := *input.Disabled
+
+	var workloads *[]workload.PodWorkload
+	if input.Workloads != nil {
+		convertedWorkloads := make([]workload.PodWorkload, len(input.Workloads))
+		for i, w := range input.Workloads {
+			convertedWorkloads[i] = workload.PodWorkload{
+				Name:      w.Name,
+				Namespace: w.Namespace,
+				Kind:      workload.WorkloadKind(w.Kind),
+			}
+		}
+		workloads = &convertedWorkloads
+	}
+	var instrumentationLibraries *[]v1alpha1.InstrumentationLibraryGlobalId
+	if input.InstrumentationLibraries != nil {
+		convertedLibraries := make([]v1alpha1.InstrumentationLibraryGlobalId, len(input.InstrumentationLibraries))
+		for i, lib := range input.InstrumentationLibraries {
+			convertedLibraries[i] = v1alpha1.InstrumentationLibraryGlobalId{
+				Name:     lib.Name,
+				SpanKind: common.SpanKind(*lib.SpanKind),
+				Language: common.ProgrammingLanguage(*lib.Language),
+			}
+		}
+		instrumentationLibraries = &convertedLibraries
+	}
+
+	var payloadCollection *instrumentationrules.PayloadCollection
+	if input.PayloadCollection != nil {
+		payloadCollection = &instrumentationrules.PayloadCollection{}
+
+		if input.PayloadCollection.HTTPRequest != nil {
+			payloadCollection.HttpRequest = &instrumentationrules.HttpPayloadCollection{}
+		}
+
+		if input.PayloadCollection.HTTPResponse != nil {
+			payloadCollection.HttpResponse = &instrumentationrules.HttpPayloadCollection{}
+		}
+
+		if input.PayloadCollection.DbQuery != nil {
+			payloadCollection.DbQuery = &instrumentationrules.DbQueryPayloadCollection{}
+		}
+
+		if input.PayloadCollection.Messaging != nil {
+			payloadCollection.Messaging = &instrumentationrules.MessagingPayloadCollection{}
+		}
+	}
+
+	// Define the new rule spec based on the input
+	newRule := &v1alpha1.InstrumentationRule{
+		ObjectMeta: metav1.ObjectMeta{
+			GenerateName: "ui-instrumentation-rule-",
+		},
+		Spec: v1alpha1.InstrumentationRuleSpec{
+			RuleName:                 ruleName,
+			Notes:                    notes,
+			Disabled:                 disabled,
+			Workloads:                workloads,
+			InstrumentationLibraries: instrumentationLibraries,
+			PayloadCollection:        payloadCollection,
+		},
+	}
+
+	// Create the rule in Kubernetes
+	createdRule, err := kube.DefaultClient.OdigosClient.InstrumentationRules(odigosns).Create(ctx, newRule, metav1.CreateOptions{})
+	if err != nil {
+		return nil, fmt.Errorf("error creating instrumentation rule: %w", err)
+	}
+	// Convert to GraphQL model and return
+	return &model.InstrumentationRule{
+		RuleID: createdRule.Name,
+	}, nil
+}
+
+func handleNotFoundError(err error, id string, entity string) error {
+	if apierrors.IsNotFound(err) {
+		return fmt.Errorf("%s with ID %s not found", entity, id)
+	}
+	return fmt.Errorf("error getting %s: %w", entity, err)
+}
+
+// Converts Workloads to GraphQL-compatible format
+func convertWorkloads(workloads *[]workload.PodWorkload) []*model.PodWorkload {
+	var gqlWorkloads []*model.PodWorkload
+	if workloads != nil {
+		for _, w := range *workloads {
+			gqlWorkloads = append(gqlWorkloads, &model.PodWorkload{
+				Namespace: w.Namespace,
+				Kind:      model.K8sResourceKind(w.Kind),
+				Name:      w.Name,
+			})
+		}
+	}
+	return gqlWorkloads
+}
+
+// Converts InstrumentationLibraries to GraphQL-compatible format
+func convertInstrumentationLibraries(libraries *[]v1alpha1.InstrumentationLibraryGlobalId) []*model.InstrumentationLibraryGlobalID {
+	var gqlLibraries []*model.InstrumentationLibraryGlobalID
+	if libraries != nil {
+		for _, lib := range *libraries {
+			spanKind := model.SpanKind(lib.SpanKind)
+			language := model.ProgrammingLanguage(lib.Language)
+			gqlLibraries = append(gqlLibraries, &model.InstrumentationLibraryGlobalID{
+				Name:     lib.Name,
+				SpanKind: &spanKind,
+				Language: &language,
+			})
+		}
+	}
+	return gqlLibraries
+}
+
+// Converts PayloadCollection to GraphQL-compatible format
+func convertPayloadCollection(payload *instrumentationrules.PayloadCollection) *model.PayloadCollection {
+	if payload == nil {
+		return nil
+	}
+
+	return &model.PayloadCollection{
+		HTTPRequest:  toHTTPPayload(payload.HttpRequest),
+		HTTPResponse: toHTTPPayload(payload.HttpResponse),
+		DbQuery:      toDbQueryPayload(payload.DbQuery),
+		Messaging:    toMessagingPayload(payload.Messaging),
+	}
+}
+
+// Helpers to create empty payloads if they exist
+func toHTTPPayload(payload *instrumentationrules.HttpPayloadCollection) *model.HTTPPayloadCollection {
+	if payload == nil {
+		return nil
+	}
+	return &model.HTTPPayloadCollection{}
+}
+
+func toDbQueryPayload(payload *instrumentationrules.DbQueryPayloadCollection) *model.DbQueryPayloadCollection {
+	if payload == nil {
+		return nil
+	}
+	return &model.DbQueryPayloadCollection{}
+}
+
+func toMessagingPayload(payload *instrumentationrules.MessagingPayloadCollection) *model.MessagingPayloadCollection {
+	if payload == nil {
+		return nil
+	}
+	return &model.MessagingPayloadCollection{}
+}

From 78eda6ed9d5152b8996800c7b2aea377d70ac046 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 30 Oct 2024 13:42:01 +0200
Subject: [PATCH 322/374] [GEN-1582]: UI tweaks (#1658)

---
 .../actions/action-drawer-container/index.tsx |  5 +-
 .../custom-fields/add-cluster-info.tsx        | 10 +--
 .../custom-fields/delete-attributes.tsx       |  8 +-
 .../custom-fields/error-sampler.tsx           | 14 ++--
 .../custom-fields/index.tsx                   |  6 +-
 .../custom-fields/latency-sampler.tsx         | 83 +++++++++----------
 .../custom-fields/pii-masking.tsx             | 11 ++-
 .../custom-fields/probabilistic-sampler.tsx   | 14 ++--
 .../custom-fields/rename-attributes.tsx       | 10 +--
 .../custom-fields/styled.ts                   | 12 ---
 .../main/actions/choose-action-body/index.tsx | 41 +++++----
 .../actions/choose-action-modal/index.tsx     | 45 ++++------
 .../choose-source-modal/index.tsx             | 60 ++++----------
 .../choose-sources-body/index.tsx             |  5 +-
 .../auto-complete-input/index.tsx             |  5 +-
 .../reuseable-components/checkbox/index.tsx   | 29 ++-----
 .../field-label/index.tsx                     | 45 ++++++++++
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../reuseable-components/input-list/index.tsx | 39 ++-------
 .../input-table/index.tsx                     | 39 ++-------
 .../reuseable-components/input/index.tsx      | 33 +-------
 .../key-value-input-list/index.tsx            | 36 ++------
 .../monitoring-checkboxes/index.tsx           | 12 +--
 .../nodes-data-flow/nodes/base-node.tsx       | 21 +++--
 .../reuseable-components/textarea/index.tsx   | 51 ++----------
 frontend/webapp/types/common.ts               |  1 +
 26 files changed, 237 insertions(+), 399 deletions(-)
 delete mode 100644 frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
 create mode 100644 frontend/webapp/reuseable-components/field-label/index.tsx

diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
index 8a752be45..444ac81d4 100644
--- a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
@@ -65,11 +65,10 @@ ActionDrawer.displayName = 'ActionDrawer';
 export { ActionDrawer };
 
 const FormContainer = styled.div`
-  display: flex;
   width: 100%;
-  flex-direction: column;
-  gap: 24px;
   height: 100%;
+  display: flex;
+  flex-direction: column;
   overflow-y: auto;
   padding-right: 16px;
   box-sizing: border-box;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
index 485809608..f33c3778f 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/add-cluster-info.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
-import { FieldTitle, FieldWrapper } from './styled';
-import { KeyValueInputsList } from '@/reuseable-components';
 import type { AddClusterInfoSpec } from '@/types';
+import { KeyValueInputsList } from '@/reuseable-components';
 
 type Props = {
   value: string;
@@ -39,12 +38,7 @@ const AddClusterInfo: React.FC<Props> = ({ value, setValue }) => {
     setValue(str);
   };
 
-  return (
-    <FieldWrapper>
-      <FieldTitle>Attributes to add</FieldTitle>
-      <KeyValueInputsList value={mappedValue} onChange={handleChange} />
-    </FieldWrapper>
-  );
+  return <KeyValueInputsList title='Attributes to add' required value={mappedValue} onChange={handleChange} />;
 };
 
 export default AddClusterInfo;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
index f84f7878c..cc99960ec 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/delete-attributes.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
 import { InputList } from '@/reuseable-components';
-import { FieldTitle, FieldWrapper } from './styled';
 import type { DeleteAttributesSpec } from '@/types';
 
 type Props = {
@@ -24,12 +23,7 @@ const DeleteAttributes: React.FC<Props> = ({ value, setValue }) => {
     setValue(str);
   };
 
-  return (
-    <FieldWrapper>
-      <FieldTitle>Attributes to delete</FieldTitle>
-      <InputList value={mappedValue} onChange={handleChange} />
-    </FieldWrapper>
-  );
+  return <InputList title='Attributes to delete' required value={mappedValue} onChange={handleChange} />;
 };
 
 export default DeleteAttributes;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
index 396c3c883..692fa30aa 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/error-sampler.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
 import { Input } from '@/reuseable-components';
-import { FieldTitle, FieldWrapper } from './styled';
 import type { ErrorSamplerSpec } from '@/types';
 
 type Props = {
@@ -34,10 +33,15 @@ const ErrorSampler: React.FC<Props> = ({ value, setValue }) => {
   };
 
   return (
-    <FieldWrapper>
-      <FieldTitle>Fallback sampling ratio</FieldTitle>
-      <Input type='number' min={MIN} max={MAX} value={mappedValue} onChange={({ target: { value: v } }) => handleChange(v)} />
-    </FieldWrapper>
+    <Input
+      title='Fallback sampling ratio'
+      required
+      type='number'
+      min={MIN}
+      max={MAX}
+      value={mappedValue}
+      onChange={({ target: { value: v } }) => handleChange(v)}
+    />
   );
 };
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
index 0994033e7..d0e0f4c93 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { ActionsType } from '@/types';
+import PiiMasking from './pii-masking';
+import ErrorSampler from './error-sampler';
+import LatencySampler from './latency-sampler';
 import AddClusterInfo from './add-cluster-info';
 import DeleteAttributes from './delete-attributes';
 import RenameAttributes from './rename-attributes';
-import PiiMasking from './pii-masking';
-import ErrorSampler from './error-sampler';
 import ProbabilisticSampler from './probabilistic-sampler';
-import LatencySampler from './latency-sampler';
 
 interface ActionCustomFieldsProps {
   actionType?: ActionsType;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
index bec057805..809c2919e 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/latency-sampler.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
-import { FieldWrapper } from './styled';
 import { InputTable } from '@/reuseable-components';
 import type { LatencySamplerSpec } from '@/types';
 
@@ -25,48 +24,46 @@ const LatencySampler: React.FC<Props> = ({ value, setValue }) => {
   };
 
   return (
-    <FieldWrapper>
-      <InputTable
-        columns={[
-          {
-            title: 'Service',
-            keyName: 'service_name',
-            placeholder: 'Choose service',
-            required: true,
-            tooltip:
-              'Service name: The rule applies to a specific service name. Only traces originating from this service’s root span will be considered.',
-          },
-          {
-            title: 'HTTP route',
-            keyName: 'http_route',
-            placeholder: 'e.g. /api/v1/users',
-            required: true,
-            tooltip:
-              'HTTP route: The specific HTTP route prefix to match for sampling. Only traces with routes beginning with this prefix will be considered. For instance, configuring /buy will also match /buy/product.',
-          },
-          {
-            title: 'Threshold',
-            keyName: 'minimum_latency_threshold',
-            placeholder: 'e.g. 1000',
-            required: true,
-            type: 'number',
-            tooltip:
-              'Minimum latency threshold (ms): Specifies the minimum latency in milliseconds; traces with latency below this threshold are ignored.',
-          },
-          {
-            title: 'Fallback',
-            keyName: 'fallback_sampling_ratio',
-            placeholder: 'e.g. 20',
-            required: true,
-            type: 'number',
-            tooltip:
-              'Fallback sampling ratio: Specifies the percentage of traces that meet the service/http_route filter but fall below the threshold that you still want to retain. For example, if a rule is set for service A and http_route B with a minimum latency threshold of 1 second, you might still want to keep some traces below this threshold. Setting the ratio to 20% ensures that 20% of these traces will be retained.',
-          },
-        ]}
-        value={mappedValue}
-        onChange={handleChange}
-      />
-    </FieldWrapper>
+    <InputTable
+      columns={[
+        {
+          title: 'Service',
+          keyName: 'service_name',
+          placeholder: 'Choose service',
+          required: true,
+          tooltip:
+            'Service name: The rule applies to a specific service name. Only traces originating from this service’s root span will be considered.',
+        },
+        {
+          title: 'HTTP route',
+          keyName: 'http_route',
+          placeholder: 'e.g. /api/v1/users',
+          required: true,
+          tooltip:
+            'HTTP route: The specific HTTP route prefix to match for sampling. Only traces with routes beginning with this prefix will be considered. For instance, configuring /buy will also match /buy/product.',
+        },
+        {
+          title: 'Threshold',
+          keyName: 'minimum_latency_threshold',
+          placeholder: 'e.g. 1000',
+          required: true,
+          type: 'number',
+          tooltip:
+            'Minimum latency threshold (ms): Specifies the minimum latency in milliseconds; traces with latency below this threshold are ignored.',
+        },
+        {
+          title: 'Fallback',
+          keyName: 'fallback_sampling_ratio',
+          placeholder: 'e.g. 20',
+          required: true,
+          type: 'number',
+          tooltip:
+            'Fallback sampling ratio: Specifies the percentage of traces that meet the service/http_route filter but fall below the threshold that you still want to retain. For example, if a rule is set for service A and http_route B with a minimum latency threshold of 1 second, you might still want to keep some traces below this threshold. Setting the ratio to 20% ensures that 20% of these traces will be retained.',
+        },
+      ]}
+      value={mappedValue}
+      onChange={handleChange}
+    />
   );
 };
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
index eb487d607..d955ecef6 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/pii-masking.tsx
@@ -1,9 +1,8 @@
 import styled from 'styled-components';
 import { safeJsonParse } from '@/utils';
-import { Checkbox } from '@/reuseable-components';
-import { FieldTitle, FieldWrapper } from './styled';
-import React, { useEffect, useMemo, useState } from 'react';
 import type { PiiMaskingSpec } from '@/types';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Checkbox, FieldLabel } from '@/reuseable-components';
 
 type Props = {
   value: string;
@@ -55,8 +54,8 @@ const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
   };
 
   return (
-    <FieldWrapper>
-      <FieldTitle>Attributes to mask</FieldTitle>
+    <>
+      <FieldLabel title='Attributes to mask' required />
 
       <ListContainer>
         {strictPicklist.map(({ id, label }) => (
@@ -69,7 +68,7 @@ const PiiMasking: React.FC<Props> = ({ value, setValue }) => {
           />
         ))}
       </ListContainer>
-    </FieldWrapper>
+    </>
   );
 };
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
index 674e42223..8952275cc 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/probabilistic-sampler.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
 import { Input } from '@/reuseable-components';
-import { FieldTitle, FieldWrapper } from './styled';
 import type { ProbabilisticSamplerSpec } from '@/types';
 
 type Props = {
@@ -30,10 +29,15 @@ const ProbabilisticSampler: React.FC<Props> = ({ value, setValue }) => {
   };
 
   return (
-    <FieldWrapper>
-      <FieldTitle>Sampling percentage</FieldTitle>
-      <Input type='number' min={MIN} max={MAX} value={mappedValue} onChange={({ target: { value: v } }) => handleChange(v)} />
-    </FieldWrapper>
+    <Input
+      title='Sampling percentage'
+      required
+      type='number'
+      min={MIN}
+      max={MAX}
+      value={mappedValue}
+      onChange={({ target: { value: v } }) => handleChange(v)}
+    />
   );
 };
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
index 734be8c8f..2e7c4b3d9 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/rename-attributes.tsx
@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import { safeJsonParse } from '@/utils';
-import { FieldTitle, FieldWrapper } from './styled';
-import { KeyValueInputsList } from '@/reuseable-components';
 import type { RenameAttributesSpec } from '@/types';
+import { KeyValueInputsList } from '@/reuseable-components';
 
 type Props = {
   value: string;
@@ -36,12 +35,7 @@ const RenameAttributes: React.FC<Props> = ({ value, setValue }) => {
     setValue(str);
   };
 
-  return (
-    <FieldWrapper>
-      <FieldTitle>Attributes to rename</FieldTitle>
-      <KeyValueInputsList value={mappedValue} onChange={handleChange} />
-    </FieldWrapper>
-  );
+  return <KeyValueInputsList title='Attributes to rename' required value={mappedValue} onChange={handleChange} />;
 };
 
 export default RenameAttributes;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts b/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
deleted file mode 100644
index 37fc6bec9..000000000
--- a/frontend/webapp/containers/main/actions/choose-action-body/custom-fields/styled.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { Text } from '@/reuseable-components';
-
-export const FieldWrapper = styled.div`
-  width: 100%;
-  max-width: 640px;
-  margin: 8px 0;
-`;
-
-export const FieldTitle = styled(Text)`
-  margin-bottom: 12px;
-`;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 65229fd37..e96746b33 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -3,17 +3,11 @@ import styled from 'styled-components';
 import { type ActionInput } from '@/types';
 import ActionCustomFields from './custom-fields';
 import { type ActionOption } from '../choose-action-modal/action-options';
-import { DocsButton, Input, Text, TextArea, Toggle, MonitoringCheckboxes } from '@/reuseable-components';
-
-const Description = styled(Text)`
-  color: ${({ theme }) => theme.text.grey};
-  line-height: 150%;
-  display: flex;
-`;
+import { DocsButton, Input, Text, TextArea, Toggle, MonitoringCheckboxes, SectionTitle } from '@/reuseable-components';
 
 const FieldWrapper = styled.div`
   width: 100%;
-  margin: 8px 0;
+  margin: 24px 0;
 `;
 
 const FieldTitle = styled(Text)`
@@ -42,10 +36,7 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action
       )}
 
       {!isUpdate && (
-        <Description>
-          {action.docsDescription}
-          <DocsButton endpoint={action.docsEndpoint} />
-        </Description>
+        <SectionTitle title='' description={action.docsDescription as string} actionButton={<DocsButton endpoint={action.docsEndpoint} />} />
       )}
 
       <FieldWrapper>
@@ -58,8 +49,8 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action
 
       {!isUpdate && (
         <FieldWrapper>
-          <FieldTitle>Action name</FieldTitle>
           <Input
+            title='Action name'
             placeholder='Use a name that describes the action'
             value={formData.name}
             onChange={({ target: { value } }) => handleFormChange('name', value)}
@@ -70,11 +61,31 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action
       <ActionCustomFields actionType={action.type} value={formData.details} setValue={(val) => handleFormChange('details', val)} />
 
       <FieldWrapper>
-        <FieldTitle>Notes</FieldTitle>
-        <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
+        <TextArea title='Notes' value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
       </FieldWrapper>
     </>
   );
 };
 
 export { ChooseActionBody };
+
+/* <CheckboxList
+        monitors={[
+          { id: 'logs', title: 'Logs' },
+          { id: 'traces', title: 'Traces' },
+          { id: 'metrics', title: 'Metrics' },
+        ]}
+        title='Monitoring'
+        exportedSignals={{
+          logs: formData.signals.includes('LOGS'),
+          traces: formData.signals.includes('TRACES'),
+          metrics: formData.signals.includes('METRICS'),
+        }}
+        handleSignalChange={(key, isAdd) => {
+          const selectedSignals = [];
+          const keyUpper = (key as string).toUpperCase() as SignalUppercase;
+          const payload = isAdd ? [...selectedSignals, keyUpper] : selectedSignals.filter((str) => str !== keyUpper);
+
+          handleFormChange('signals', payload);
+        }}
+      /> */
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 55caa97dc..8bbaabc05 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -3,31 +3,19 @@ import { ChooseActionBody } from '../';
 import React, { useMemo, useState } from 'react';
 import { useActionCRUD, useActionFormData } from '@/hooks/actions';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
-import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, FadeLoader } from '@/reuseable-components';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, FadeLoader, SectionTitle } from '@/reuseable-components';
 
-const DefineActionContainer = styled.section`
+const Container = styled.section`
+  width: 100%;
+  max-width: 640px;
   height: 640px;
-  padding: 0px 220px;
+  margin: 0 15vw;
+  padding-top: 64px;
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
 `;
 
-const WidthConstraint = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 16px;
-  max-width: 640px;
-  margin: 32px 0 24px 0;
-`;
-
-const SubTitle = styled(Text)`
-  color: ${({ theme }) => theme.text.grey};
-  line-height: 150%;
-`;
-
 const Center = styled.div`
   width: 100%;
   display: flex;
@@ -82,20 +70,15 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
         />
       }
     >
-      <DefineActionContainer>
-        <WidthConstraint>
-          <Text size={20}>{'Define Action'}</Text>
-          <SubTitle>
-            {
-              'Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
-            }
-          </SubTitle>
-        </WidthConstraint>
-
+      <Container>
+        <SectionTitle
+          title='Define Action'
+          description='Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
+        />
         <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={handleSelect} />
 
         {!!selectedItem?.type ? (
-          <WidthConstraint>
+          <div>
             <Divider margin='16px 0' />
 
             {loading ? (
@@ -105,9 +88,9 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
             ) : (
               <ChooseActionBody action={selectedItem} formData={formData} handleFormChange={handleFormChange} />
             )}
-          </WidthConstraint>
+          </div>
         ) : null}
-      </DefineActionContainer>
+      </Container>
     </Modal>
   );
 };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
index 44c566f2c..a706cde73 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
@@ -1,12 +1,11 @@
-import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
-import { Modal, NavigationButtons } from '@/reuseable-components';
-import { K8sActualSource, PersistNamespaceItemInput } from '@/types';
+import React, { useState, useCallback } from 'react';
 import { useConnectSourcesMenuState } from '@/hooks';
 import { ChooseSourcesBody } from '../choose-sources-body';
+import { Modal, NavigationButtons } from '@/reuseable-components';
+import { K8sActualSource, PersistNamespaceItemInput } from '@/types';
 
 const ChooseSourcesBodyWrapper = styled.div`
-  width: 1080px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -16,21 +15,11 @@ const ChooseSourcesBodyWrapper = styled.div`
 interface AddSourceModalProps {
   isOpen: boolean;
   onClose: () => void;
-  createSourcesForNamespace: (
-    namespaceName: string,
-    sources: { kind: string; name: string; selected: boolean }[]
-  ) => Promise<void>;
-  persistNamespaceItems: (
-    namespaceItems: PersistNamespaceItemInput[]
-  ) => Promise<void>;
+  createSourcesForNamespace: (namespaceName: string, sources: { kind: string; name: string; selected: boolean }[]) => Promise<void>;
+  persistNamespaceItems: (namespaceItems: PersistNamespaceItemInput[]) => Promise<void>;
 }
 
-export const AddSourceModal: React.FC<AddSourceModalProps> = ({
-  isOpen,
-  onClose,
-  createSourcesForNamespace,
-  persistNamespaceItems,
-}) => {
+export const AddSourceModal: React.FC<AddSourceModalProps> = ({ isOpen, onClose, createSourcesForNamespace, persistNamespaceItems }) => {
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
   const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
     sourcesList,
@@ -38,9 +27,7 @@ export const AddSourceModal: React.FC<AddSourceModalProps> = ({
 
   const handleNextClick = useCallback(async () => {
     try {
-      const namespaceItems: PersistNamespaceItemInput[] = Object.entries(
-        stateMenu.futureAppsCheckbox
-      ).map(([namespaceName, futureSelected]) => ({
+      const namespaceItems: PersistNamespaceItemInput[] = Object.entries(stateMenu.futureAppsCheckbox).map(([namespaceName, futureSelected]) => ({
         name: namespaceName,
         futureSelected,
       }));
@@ -48,16 +35,14 @@ export const AddSourceModal: React.FC<AddSourceModalProps> = ({
       await persistNamespaceItems(namespaceItems);
 
       await Promise.all(
-        Object.entries(stateMenu.selectedItems).map(
-          async ([namespaceName, sources]) => {
-            const formattedSources = sources.map((source) => ({
-              kind: source.kind,
-              name: source.name,
-              selected: true,
-            }));
-            await createSourcesForNamespace(namespaceName, formattedSources);
-          }
-        )
+        Object.entries(stateMenu.selectedItems).map(async ([namespaceName, sources]) => {
+          const formattedSources = sources.map((source) => ({
+            kind: source.kind,
+            name: source.name,
+            selected: true,
+          }));
+          await createSourcesForNamespace(namespaceName, formattedSources);
+        })
       );
 
       onClose();
@@ -79,20 +64,9 @@ export const AddSourceModal: React.FC<AddSourceModalProps> = ({
   );
 
   return (
-    <Modal
-      isOpen={isOpen}
-      header={{ title: 'Add Source' }}
-      actionComponent={ModalActionComponent}
-      onClose={onClose}
-    >
+    <Modal isOpen={isOpen} header={{ title: 'Add Source' }} actionComponent={ModalActionComponent} onClose={onClose}>
       <ChooseSourcesBodyWrapper>
-        <ChooseSourcesBody
-          isModal
-          stateMenu={stateMenu}
-          sourcesList={sourcesList}
-          stateHandlers={stateHandlers}
-          setSourcesList={setSourcesList}
-        />
+        <ChooseSourcesBody isModal stateMenu={stateMenu} sourcesList={sourcesList} stateHandlers={stateHandlers} setSourcesList={setSourcesList} />
       </ChooseSourcesBodyWrapper>
     </Modal>
   );
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
index 5e7e28d2e..58f401b90 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
@@ -16,7 +16,10 @@ import {
 } from '../choose-sources-menu/type';
 
 const ContentWrapper = styled.div`
-  width: 660px;
+  width: 100%;
+  max-width: 640px;
+  height: 640px;
+  margin: 0 15vw;
   padding-top: 64px;
 `;
 
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index b67065705..c33616d75 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,7 +1,7 @@
-import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
-import styled from 'styled-components';
 import Image from 'next/image';
 import { Text } from '../text';
+import styled from 'styled-components';
+import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
 
 export interface Option {
   id: string;
@@ -144,6 +144,7 @@ export { AutocompleteInput };
 
 const AutocompleteContainer = styled.div`
   position: relative;
+  margin-top: 24px;
 `;
 
 const InputWrapper = styled.div`
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
index 39b15255f..13f05adb1 100644
--- a/frontend/webapp/reuseable-components/checkbox/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { Tooltip } from '../tooltip';
 import Image from 'next/image';
 import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
 
 interface CheckboxProps {
   title?: string;
@@ -24,26 +24,16 @@ const CheckboxWrapper = styled.div<{ isChecked: boolean; disabled?: boolean }>`
   width: 18px;
   height: 18px;
   border-radius: 6px;
-  border: ${({ isChecked }) =>
-    isChecked
-      ? '1px dashed transparent'
-      : '1px dashed rgba(249, 249, 249, 0.4)'};
+  border: ${({ isChecked }) => (isChecked ? '1px dashed transparent' : '1px dashed rgba(249, 249, 249, 0.4)')};
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${({ isChecked, theme }) =>
-    isChecked ? theme.colors.majestic_blue : 'transparent'};
+  background-color: ${({ isChecked, theme }) => (isChecked ? theme.colors.majestic_blue : 'transparent')};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
   transition: border 0.3s, background-color 0.3s;
 `;
 
-const Checkbox: React.FC<CheckboxProps> = ({
-  title,
-  tooltip,
-  initialValue = false,
-  onChange,
-  disabled,
-}) => {
+const Checkbox: React.FC<CheckboxProps> = ({ title, tooltip, initialValue = false, onChange, disabled }) => {
   const [isChecked, setIsChecked] = useState(initialValue);
 
   useEffect(() => {
@@ -63,14 +53,13 @@ const Checkbox: React.FC<CheckboxProps> = ({
   return (
     <Container disabled={disabled} onClick={handleToggle}>
       <CheckboxWrapper isChecked={isChecked} disabled={disabled}>
-        {isChecked && (
-          <Image src="/icons/common/check.svg" alt="" width={12} height={12} />
-        )}
+        {isChecked && <Image src='/icons/common/check.svg' alt='' width={12} height={12} />}
       </CheckboxWrapper>
+
       {title && <Text size={14}>{title}</Text>}
       {tooltip && (
         <Tooltip text={tooltip || ''}>
-          <Image src="/icons/common/info.svg" alt="" width={16} height={16} />
+          <Image src='/icons/common/info.svg' alt='' width={16} height={16} />
         </Tooltip>
       )}
     </Container>
diff --git a/frontend/webapp/reuseable-components/field-label/index.tsx b/frontend/webapp/reuseable-components/field-label/index.tsx
new file mode 100644
index 000000000..93eb60663
--- /dev/null
+++ b/frontend/webapp/reuseable-components/field-label/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Image from 'next/image';
+import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  opacity: 0.8;
+  line-height: 22px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const OptionalText = styled(Text)`
+  font-size: 12px;
+  color: #7a7a7a;
+  opacity: 0.8;
+`;
+
+const FieldLabel = ({ title, required, tooltip }: { title?: string; required?: boolean; tooltip?: string }) => {
+  if (!title) return null;
+
+  return (
+    <Wrapper>
+      <Title>{title}</Title>
+      {!required && <OptionalText>(optional)</OptionalText>}
+      {tooltip && (
+        <Tooltip text={tooltip || ''}>
+          <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />
+        </Tooltip>
+      )}
+    </Wrapper>
+  );
+};
+
+export { FieldLabel };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index bd0b758b5..aaa72679a 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -27,3 +27,4 @@ export * from './auto-complete-input';
 export * from './drawer';
 export * from './input-table';
 export * from './status';
+export * from './field-label';
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 932d21a1d..f36dad131 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -1,10 +1,10 @@
 import Image from 'next/image';
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import { Text } from '../text';
 import { Input } from '../input';
 import { Button } from '../button';
-import { Text } from '../text';
-import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import { FieldLabel } from '../field-label';
+import React, { useEffect, useRef, useState } from 'react';
 
 interface InputListProps {
   initialValues?: string[];
@@ -53,19 +53,6 @@ const ButtonText = styled(Text)`
   text-decoration-line: underline;
 `;
 
-const Title = styled(Text)`
-  font-size: 14px;
-  opacity: 0.8;
-  line-height: 22px;
-`;
-
-const HeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-`;
-
 const INITIAL = [''];
 
 const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
@@ -115,21 +102,8 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
 
   return (
     <Container>
-      {title && (
-        <HeaderWrapper>
-          <Title>{title}</Title>
-          {!required && (
-            <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
-              (optional)
-            </Text>
-          )}
-          {tooltip && (
-            <Tooltip text={tooltip || ''}>
-              <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />
-            </Tooltip>
-          )}
-        </HeaderWrapper>
-      )}
+      <FieldLabel title={title} required={required} tooltip={tooltip} />
+
       {inputs.map((value, index) => (
         <InputRow key={index}>
           <Input value={value} onChange={(e) => handleInputChange(e.target.value, index)} />
@@ -138,6 +112,7 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
           </DeleteButton>
         </InputRow>
       ))}
+
       <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddInput}>
         <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
diff --git a/frontend/webapp/reuseable-components/input-table/index.tsx b/frontend/webapp/reuseable-components/input-table/index.tsx
index 9c2f95209..c55e9715f 100644
--- a/frontend/webapp/reuseable-components/input-table/index.tsx
+++ b/frontend/webapp/reuseable-components/input-table/index.tsx
@@ -1,10 +1,10 @@
 import Image from 'next/image';
-import React, { useState, useEffect, useRef } from 'react';
-import styled from 'styled-components';
+import { Text } from '../text';
 import { Input } from '../input';
 import { Button } from '../button';
-import { Text } from '../text';
-import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import { FieldLabel } from '../field-label';
+import React, { useState, useEffect, useRef } from 'react';
 
 interface Props {
   columns: {
@@ -26,18 +26,6 @@ const Container = styled.div`
   width: 100%;
 `;
 
-const HeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-`;
-
-const OptionalText = styled(Text)`
-  color: #7a7a7a;
-  opacity: 0.8;
-`;
-
 const DeleteButton = styled.button`
   background: none;
   border: none;
@@ -63,15 +51,6 @@ const ButtonText = styled(Text)`
   text-decoration-line: underline;
 `;
 
-const Title = styled(Text)`
-  font-size: 14px;
-  opacity: 0.8;
-  line-height: 22px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
 export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value = [], onChange }) => {
   const [initialObject, setInitialObject] = useState({});
   const [rows, setRows] = useState(value || initialValues);
@@ -133,15 +112,7 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
           <tr>
             {columns.map(({ title, tooltip, required }) => (
               <th key={`input-table-head-${title}`} style={{ maxWidth }}>
-                <HeaderWrapper>
-                  <Title>{title}</Title>
-                  {!required && <OptionalText>(optional)</OptionalText>}
-                  {tooltip && (
-                    <Tooltip text={tooltip || ''}>
-                      <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />
-                    </Tooltip>
-                  )}
-                </HeaderWrapper>
+                <FieldLabel title={title} required={required} tooltip={tooltip} />
               </th>
             ))}
 
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 407cd1235..9f3f4ea74 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image';
-import React, { useState, forwardRef } from 'react';
 import { Text } from '../text';
+import { FieldLabel } from '../field-label';
 import styled, { css } from 'styled-components';
-import { Tooltip } from '../tooltip';
+import React, { useState, forwardRef } from 'react';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   icon?: string;
@@ -126,20 +126,6 @@ const ErrorMessage = styled(Text)`
   margin-top: 4px;
 `;
 
-const Title = styled(Text)`
-  font-size: 14px;
-  opacity: 0.8;
-  line-height: 22px;
-  margin-bottom: 4px;
-`;
-
-const HeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-`;
-
 // Wrap Input with forwardRef to handle the ref prop
 const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ icon, buttonLabel, onButtonClick, errorMessage, title, tooltip, required, initialValue, onChange, ...props }, ref) => {
@@ -154,19 +140,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <Container>
-        {title && (
-          <HeaderWrapper>
-            <Title>{title}</Title>
-            {!required && (
-              <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
-                (optional)
-              </Text>
-            )}
-            <Tooltip text={tooltip || ''}>
-              {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />}
-            </Tooltip>
-          </HeaderWrapper>
-        )}
+        <FieldLabel title={title} required={required} tooltip={tooltip} />
 
         <InputWrapper isDisabled={props.disabled} hasError={!!errorMessage} isActive={!!props.autoFocus}>
           {icon && (
@@ -187,6 +161,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             </Button>
           )}
         </InputWrapper>
+
         {errorMessage && (
           <ErrorWrapper>
             <ErrorMessage>{errorMessage}</ErrorMessage>
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index 784bd0b87..dfe6f1afc 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -1,10 +1,10 @@
 import Image from 'next/image';
-import React, { useState, useEffect, useRef } from 'react';
-import styled from 'styled-components';
+import { Text } from '../text';
 import { Input } from '../input';
 import { Button } from '../button';
-import { Text } from '../text';
-import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import { FieldLabel } from '../field-label';
+import React, { useState, useEffect, useRef } from 'react';
 
 interface KeyValueInputsListProps {
   initialKeyValuePairs?: { key: string; value: string }[];
@@ -21,13 +21,6 @@ const Container = styled.div`
   width: 100%;
 `;
 
-const HeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-`;
-
 const Row = styled.div`
   display: flex;
   align-items: center;
@@ -60,12 +53,6 @@ const ButtonText = styled(Text)`
   text-decoration-line: underline;
 `;
 
-const Title = styled(Text)`
-  font-size: 14px;
-  opacity: 0.8;
-  line-height: 22px;
-`;
-
 const INITIAL = [{ key: '', value: '' }];
 
 export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
@@ -122,19 +109,7 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
 
   return (
     <Container>
-      {title && (
-        <Tooltip text={tooltip || ''}>
-          <HeaderWrapper>
-            <Title>{title}</Title>
-            {!required && (
-              <Text color='#7A7A7A' size={14} weight={300} opacity={0.8}>
-                (optional)
-              </Text>
-            )}
-            {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ marginBottom: 4 }} />}
-          </HeaderWrapper>
-        </Tooltip>
-      )}
+      <FieldLabel title={title} required={required} tooltip={tooltip} />
 
       {keyValuePairs.map((pair, index) => (
         <Row key={`key-value-pair-${title}-${index}`}>
@@ -146,6 +121,7 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
           </DeleteButton>
         </Row>
       ))}
+
       <AddButton disabled={isAddButtonDisabled} variant={'tertiary'} onClick={handleAddRow}>
         <Image src='/icons/common/plus.svg' alt='Add' width={16} height={16} />
         <ButtonText>ADD ATTRIBUTE</ButtonText>
diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
index 84d3188aa..0bb8c52f6 100644
--- a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
+++ b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
@@ -1,6 +1,6 @@
-import { Text } from '../text';
-import { Checkbox } from '../checkbox';
 import styled from 'styled-components';
+import { Checkbox } from '../checkbox';
+import { FieldLabel } from '../field-label';
 import React, { useEffect, useState } from 'react';
 import { MONITORING_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
 
@@ -17,10 +17,6 @@ const ListContainer = styled.div<{ isVertical?: boolean }>`
   gap: ${({ isVertical }) => (isVertical ? '16px' : '32px')};
 `;
 
-const TextWrapper = styled.div`
-  margin-bottom: 14px;
-`;
-
 const monitors = MONITORING_OPTIONS;
 
 const isAllowed = (type: SignalLowercase, allowedSignals: MonitoringCheckboxesProps['allowedSignals']) => {
@@ -58,9 +54,7 @@ const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical,
 
   return (
     <div>
-      <TextWrapper>
-        <Text>Monitoring</Text>
-      </TextWrapper>
+      <FieldLabel title='Monitoring' required />
 
       <ListContainer isVertical={isVertical}>
         {monitors.map((monitor) => {
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
index d84a12595..ee004451f 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
@@ -1,8 +1,9 @@
-import { Status, Text } from '@/reuseable-components';
-import { Handle, Position } from '@xyflow/react';
+import React from 'react';
 import Image from 'next/image';
-import React, { memo } from 'react';
 import styled from 'styled-components';
+import type { STATUSES } from '@/types';
+import { Handle, Position } from '@xyflow/react';
+import { Status, Text } from '@/reuseable-components';
 
 const BaseNodeContainer = styled.div`
   display: flex;
@@ -50,8 +51,9 @@ const FooterText = styled(Text)`
 `;
 
 export interface NodeDataProps {
+  id: string;
   type: 'source' | 'action' | 'destination';
-  status: 'healthy' | 'unhealthy';
+  status: STATUSES;
   title: string;
   subTitle: string;
   imageUri: string;
@@ -60,11 +62,12 @@ export interface NodeDataProps {
 }
 
 interface BaseNodeProps {
-  data: NodeDataProps;
+  id: string;
   isConnectable: boolean;
+  data: NodeDataProps;
 }
 
-export default memo(({ isConnectable, data }: BaseNodeProps) => {
+const BaseNode = ({ isConnectable, data }: BaseNodeProps) => {
   const { title, subTitle, imageUri, type, monitors, isActive } = data;
 
   function renderHandles() {
@@ -88,7 +91,7 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
         return (
           <>
             {/* Destination nodes only have an input handle */}
-            <Handle style={{ visibility: 'hidden' }} type='target' position={Position.Left} id='destination-input' isConnectable={isConnectable} />
+            <Handle type='target' position={Position.Left} id='destination-input' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
           </>
         );
       default:
@@ -141,4 +144,6 @@ export default memo(({ isConnectable, data }: BaseNodeProps) => {
       {renderHandles()}
     </BaseNodeContainer>
   );
-});
+};
+
+export default BaseNode;
diff --git a/frontend/webapp/reuseable-components/textarea/index.tsx b/frontend/webapp/reuseable-components/textarea/index.tsx
index e38121b70..a1e1025a9 100644
--- a/frontend/webapp/reuseable-components/textarea/index.tsx
+++ b/frontend/webapp/reuseable-components/textarea/index.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
-import Image from 'next/image';
 import { Text } from '../text';
-import { Tooltip } from '../tooltip';
+import { FieldLabel } from '../field-label';
 import styled, { css } from 'styled-components';
 
-interface TextAreaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   errorMessage?: string;
   title?: string;
   tooltip?: string;
@@ -99,52 +97,15 @@ const ErrorMessage = styled(Text)`
   margin-top: 4px;
 `;
 
-const Title = styled(Text)`
-  font-size: 14px;
-  opacity: 0.8;
-  line-height: 22px;
-  margin-bottom: 4px;
-`;
-
-const HeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-`;
-
-const TextArea: React.FC<TextAreaProps> = ({
-  errorMessage,
-  title,
-  tooltip,
-  ...props
-}) => {
+const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, required, ...props }) => {
   return (
     <Container>
-      {title && (
-        <HeaderWrapper>
-          <Title>{title}</Title>
-          <Tooltip text={tooltip || ''}>
-            {tooltip && (
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-                style={{ marginBottom: 4 }}
-              />
-            )}
-          </Tooltip>
-        </HeaderWrapper>
-      )}
+      <FieldLabel title={title} required={required} tooltip={tooltip} />
 
-      <InputWrapper
-        isDisabled={props.disabled}
-        hasError={!!errorMessage}
-        isActive={!!props.autoFocus}
-      >
+      <InputWrapper isDisabled={props.disabled} hasError={!!errorMessage} isActive={!!props.autoFocus}>
         <StyledTextArea {...props} />
       </InputWrapper>
+
       {errorMessage && (
         <ErrorWrapper>
           <ErrorMessage>{errorMessage}</ErrorMessage>
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index 1c836e9eb..814a09ae3 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -50,4 +50,5 @@ export enum OVERVIEW_NODE_TYPES {
 
 export enum STATUSES {
   HEALTHY = 'healthy',
+  UNHEALTHY = 'unhealthy',
 }

From 6a91aba00582c7c3cb8910b297bf0e5ea124ad33 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 30 Oct 2024 17:15:04 +0200
Subject: [PATCH 323/374] [GEN-1603]: add rules column to overview (#1661)

---
 .../choose-action-modal/action-options.ts     |   3 +
 .../actions/choose-action-modal/index.tsx     |   9 +-
 .../choose-rule/index.tsx                     |  30 +---
 .../main/overview/add-entity/index.tsx        |  10 +-
 .../overview/overview-data-flow/index.tsx     |  12 +-
 .../main/rules/add-rule-modal/index.tsx       | 104 ++++++++++++
 .../main/rules/add-rule-modal/rule-options.ts |  25 +++
 .../webapp/containers/main/rules/index.ts     |   1 +
 .../hooks/overview/useNodeDataFlowHandlers.ts |   4 +
 .../webapp/public/icons/overview/rules.svg    |   4 +
 .../public/icons/rules/payloadcollection.svg  |   3 +
 .../auto-complete-input/index.tsx             |  40 +++--
 .../nodes-data-flow/builder.ts                | 153 +++++++++++-------
 .../nodes-data-flow/index.tsx                 |  24 +--
 .../nodes-data-flow/nodes/add-node.tsx        |  13 +-
 .../nodes-data-flow/nodes/base-node.tsx       |  23 ++-
 .../nodes-data-flow/nodes/header-node.tsx     |  19 ++-
 .../notification-note/index.tsx               |  55 ++-----
 frontend/webapp/types/common.ts               |   2 +
 .../webapp/types/instrumentation-rules.ts     |   2 +-
 .../webapp/utils/functions/get-action-icon.ts |  12 +-
 .../webapp/utils/functions/get-rule-icon.ts   |   9 ++
 frontend/webapp/utils/functions/index.ts      |   1 +
 23 files changed, 375 insertions(+), 183 deletions(-)
 create mode 100644 frontend/webapp/containers/main/rules/add-rule-modal/index.tsx
 create mode 100644 frontend/webapp/containers/main/rules/add-rule-modal/rule-options.ts
 create mode 100644 frontend/webapp/containers/main/rules/index.ts
 create mode 100644 frontend/webapp/public/icons/overview/rules.svg
 create mode 100644 frontend/webapp/public/icons/rules/payloadcollection.svg
 create mode 100644 frontend/webapp/utils/functions/get-rule-icon.ts

diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index c2c16a9b8..50de8bdb3 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -66,6 +66,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         label: 'Error Sampler',
         description: 'Sample errors based on percentage.',
         type: ActionsType.ERROR_SAMPLER,
+        icon: getActionIcon('sampler'),
         docsEndpoint: '/pipeline/actions/sampling/errorsampler',
         docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
         allowedSignals: ['TRACES'],
@@ -75,6 +76,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         label: 'Probabilistic Sampler',
         description: 'Sample traces based on percentage.',
         type: ActionsType.PROBABILISTIC_SAMPLER,
+        icon: getActionIcon('sampler'),
         docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
         docsDescription:
           'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
@@ -85,6 +87,7 @@ export const ACTION_OPTIONS: ActionOption[] = [
         label: 'Latency Action',
         description: 'Add latency to your traces.',
         type: ActionsType.LATENCY_SAMPLER,
+        icon: getActionIcon('sampler'),
         docsEndpoint: '/pipeline/actions/sampling/latencysampler',
         docsDescription:
           'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 8bbaabc05..43033bdca 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -10,7 +10,7 @@ const Container = styled.section`
   max-width: 640px;
   height: 640px;
   margin: 0 15vw;
-  padding-top: 64px;
+  padding: 64px 12px 0 12px;
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
@@ -18,6 +18,7 @@ const Container = styled.section`
 
 const Center = styled.div`
   width: 100%;
+  margin-top: 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,7 +33,7 @@ interface AddActionModalProps {
 export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
   const { formData, handleFormChange, resetFormData, validateForm } = useActionFormData();
   const { createAction, loading } = useActionCRUD({ onSuccess: handleClose });
-  const [selectedItem, setSelectedItem] = useState<ActionOption | null>(null);
+  const [selectedItem, setSelectedItem] = useState<ActionOption | undefined>(undefined);
 
   const isFormOk = useMemo(() => !!selectedItem && validateForm(), [selectedItem, formData]);
 
@@ -42,7 +43,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
 
   function handleClose() {
     resetFormData();
-    setSelectedItem(null);
+    setSelectedItem(undefined);
     handleCloseModal();
   }
 
@@ -75,7 +76,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
           title='Define Action'
           description='Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
         />
-        <AutocompleteInput options={ACTION_OPTIONS} onOptionSelect={handleSelect} />
+        <AutocompleteInput options={ACTION_OPTIONS} selectedOption={selectedItem} onOptionSelect={handleSelect} style={{ marginTop: '24px' }} />
 
         {!!selectedItem?.type ? (
           <div>
diff --git a/frontend/webapp/containers/main/instrumentation-rules/choose-rule/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/choose-rule/index.tsx
index f66661a29..0bd04be25 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/choose-rule/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/choose-rule/index.tsx
@@ -2,22 +2,17 @@ import React from 'react';
 import { useRouter } from 'next/navigation';
 import { NewActionCard } from '@/components';
 import { KeyvalLink, KeyvalText } from '@/design.system';
-import { ActionItemCard, InstrumentationRuleType } from '@/types';
+import { ActionItemCard, RulesType } from '@/types';
 import { ACTION, INSTRUMENTATION_RULES_DOCS_LINK, OVERVIEW } from '@/utils';
-import {
-  ActionCardWrapper,
-  ActionsListWrapper,
-  DescriptionWrapper,
-  LinkWrapper,
-} from './styled';
+import { ActionCardWrapper, ActionsListWrapper, DescriptionWrapper, LinkWrapper } from './styled';
 
 const ITEMS = [
   {
     id: 'payload-collection',
     title: 'Payload Collection',
     description: 'Record operation payloads as span attributes where supported.',
-    type: InstrumentationRuleType.PAYLOAD_COLLECTION,
-    icon: InstrumentationRuleType.PAYLOAD_COLLECTION,
+    type: RulesType.PAYLOAD_COLLECTION,
+    icon: RulesType.PAYLOAD_COLLECTION,
   },
 ];
 
@@ -31,10 +26,7 @@ export function ChooseInstrumentationRuleContainer(): React.JSX.Element {
   function renderActionsList() {
     return ITEMS.map((item) => {
       return (
-        <ActionCardWrapper
-          data-cy={'choose-instrumentation-rule-' + item.type}
-          key={item.id}
-        >
+        <ActionCardWrapper data-cy={'choose-instrumentation-rule-' + item.type} key={item.id}>
           <NewActionCard item={item} onClick={onItemClick} />
         </ActionCardWrapper>
       );
@@ -44,17 +36,9 @@ export function ChooseInstrumentationRuleContainer(): React.JSX.Element {
   return (
     <>
       <DescriptionWrapper>
-        <KeyvalText size={14}>
-          {OVERVIEW.INSTRUMENTATION_RULE_DESCRIPTION}
-        </KeyvalText>
+        <KeyvalText size={14}>{OVERVIEW.INSTRUMENTATION_RULE_DESCRIPTION}</KeyvalText>
         <LinkWrapper>
-          <KeyvalLink
-            fontSize={14}
-            value={ACTION.LINK_TO_DOCS}
-            onClick={() =>
-              window.open(INSTRUMENTATION_RULES_DOCS_LINK, '_blank')
-            }
-          />
+          <KeyvalLink fontSize={14} value={ACTION.LINK_TO_DOCS} onClick={() => window.open(INSTRUMENTATION_RULES_DOCS_LINK, '_blank')} />
         </LinkWrapper>
       </DescriptionWrapper>
       <ActionsListWrapper>{renderActionsList()}</ActionsListWrapper>
diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index 2743a05ba..2916be866 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useRef, useCallback } from 'react';
 import Image from 'next/image';
 import theme from '@/styles/theme';
 import { useModalStore } from '@/store';
+import { AddRuleModal } from '../../rules';
 import { AddActionModal } from '../../actions';
+import React, { useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { useActualSources, useOnClickOutside } from '@/hooks';
 import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
@@ -29,7 +30,7 @@ const DropdownListContainer = styled.div`
   right: 0;
   top: 48px;
   border-radius: 24px;
-  width: 131px;
+  width: 200px;
   overflow-y: auto;
   background-color: ${({ theme }) => theme.colors.dropdown_bg};
   border: 1px solid ${({ theme }) => theme.colors.border};
@@ -62,6 +63,7 @@ const ButtonText = styled(Text)`
 
 // Default options for the dropdown
 const DEFAULT_OPTIONS: DropdownOption[] = [
+  { id: OVERVIEW_ENTITY_TYPES.RULE, value: 'Instrumentation Rule' },
   { id: OVERVIEW_ENTITY_TYPES.SOURCE, value: 'Source' },
   { id: OVERVIEW_ENTITY_TYPES.ACTION, value: 'Action' },
   { id: OVERVIEW_ENTITY_TYPES.DESTINATION, value: 'Destination' },
@@ -100,6 +102,7 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({ optio
         {isPolling ? <FadeLoader color={theme.colors.primary} /> : <Image src='/icons/common/plus-black.svg' width={16} height={16} alt='Add' />}
         <ButtonText size={14}>{placeholder}</ButtonText>
       </StyledButton>
+
       {isDropdownOpen && (
         <DropdownListContainer>
           {options.map((option) => (
@@ -111,14 +114,15 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({ optio
         </DropdownListContainer>
       )}
 
+      <AddRuleModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.RULE} handleCloseModal={handleCloseModal} />
       <AddSourceModal
         isOpen={currentModal === OVERVIEW_ENTITY_TYPES.SOURCE}
         onClose={handleCloseModal}
         createSourcesForNamespace={createSourcesForNamespace}
         persistNamespaceItems={persistNamespaceItems}
       />
-      <AddDestinationModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.DESTINATION} handleCloseModal={handleCloseModal} />
       <AddActionModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.ACTION} handleCloseModal={handleCloseModal} />
+      <AddDestinationModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.DESTINATION} handleCloseModal={handleCloseModal} />
     </Container>
   );
 };
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 116e41f66..1d9217aee 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -21,13 +21,19 @@ export function OverviewDataFlowContainer() {
   const { sources } = useActualSources();
   const { destinations } = useActualDestination();
   const { containerRef, containerWidth } = useContainerWidth();
-  const { handleNodeClick } = useNodeDataFlowHandlers({ sources, actions, destinations });
+  const { handleNodeClick } = useNodeDataFlowHandlers({
+    rules: [],
+    sources,
+    actions,
+    destinations,
+  });
 
-  const columnWidth = 296;
+  const columnWidth = 255;
 
   // Memoized node and edge builder to improve performance
   const { nodes, edges } = useMemo(() => {
     return buildNodesAndEdges({
+      rules: [],
       sources,
       actions,
       destinations,
@@ -40,7 +46,7 @@ export function OverviewDataFlowContainer() {
     <OverviewDataFlowWrapper ref={containerRef}>
       <OverviewDrawer />
       <OverviewActionMenuContainer />
-      <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={handleNodeClick} />
+      <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={handleNodeClick} columnWidth={columnWidth} />
     </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/containers/main/rules/add-rule-modal/index.tsx b/frontend/webapp/containers/main/rules/add-rule-modal/index.tsx
new file mode 100644
index 000000000..1cbc4319a
--- /dev/null
+++ b/frontend/webapp/containers/main/rules/add-rule-modal/index.tsx
@@ -0,0 +1,104 @@
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+import { RULE_OPTIONS, RuleOption } from './rule-options';
+import { AutocompleteInput, Divider, FadeLoader, Modal, NavigationButtons, NotificationNote, SectionTitle } from '@/reuseable-components';
+
+const Container = styled.section`
+  width: 100%;
+  max-width: 640px;
+  height: 640px;
+  margin: 0 15vw;
+  padding: 64px 12px 0 12px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+`;
+
+const Center = styled.div`
+  width: 100%;
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+interface Props {
+  isModalOpen: boolean;
+  handleCloseModal: () => void;
+}
+
+export const AddRuleModal: React.FC<Props> = ({ isModalOpen, handleCloseModal }) => {
+  // const { formData, handleFormChange, resetFormData, validateForm } = useRuleFormData();
+  // const { createRule, loading } = useRuleCRUD({ onSuccess: handleClose });
+  const [selectedItem, setSelectedItem] = useState<RuleOption | undefined>(undefined);
+
+  useEffect(() => {
+    if (!selectedItem) handleSelect(RULE_OPTIONS[0]);
+  }, [selectedItem]);
+
+  // const isFormOk = useMemo(() => !!selectedItem && validateForm(), [selectedItem, formData]);
+
+  const handleSubmit = async () => {
+    // createRule(formData);
+  };
+
+  function handleClose() {
+    // resetFormData();
+    setSelectedItem(undefined);
+    handleCloseModal();
+  }
+
+  const handleSelect = (item: RuleOption) => {
+    // resetFormData();
+    // handleFormChange('type', item.type);
+    setSelectedItem(item);
+  };
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onClose={handleClose}
+      header={{ title: 'Add Instrumentation Rule' }}
+      actionComponent={
+        <NavigationButtons
+          buttons={[
+            {
+              variant: 'primary',
+              label: 'DONE',
+              onClick: handleSubmit,
+              disabled: true,
+            },
+          ]}
+        />
+      }
+    >
+      <Container>
+        <SectionTitle
+          title='Define Instrumentation Rule'
+          description='Instrumentation rules control how telemetry is recorded from your application. Choose a rule type and provide necessary information.'
+        />
+        <NotificationNote
+          type='info'
+          text='We currently support one rule. We’ll be adding new rule types in the near future.'
+          style={{ marginTop: '24px' }}
+        />
+        <AutocompleteInput options={RULE_OPTIONS} selectedOption={selectedItem} onOptionSelect={handleSelect} style={{ marginTop: '12px' }} />
+
+        {!!selectedItem?.type ? (
+          <div>
+            <Divider margin='16px 0' />
+
+            {/* {loading ? ( */}
+            <Center>
+              <FadeLoader cssOverride={{ scale: 2 }} />
+            </Center>
+            {/* ) : (
+              <ChooseRuleBody rule={selectedItem} formData={formData} handleFormChange={handleFormChange} />
+            )} */}
+          </div>
+        ) : null}
+      </Container>
+    </Modal>
+  );
+};
diff --git a/frontend/webapp/containers/main/rules/add-rule-modal/rule-options.ts b/frontend/webapp/containers/main/rules/add-rule-modal/rule-options.ts
new file mode 100644
index 000000000..bea858d5c
--- /dev/null
+++ b/frontend/webapp/containers/main/rules/add-rule-modal/rule-options.ts
@@ -0,0 +1,25 @@
+import { InstrumentationRuleType } from '@/types';
+import { getRuleIcon } from '@/utils/functions';
+
+export type RuleOption = {
+  id: string;
+  label: string;
+  type?: InstrumentationRuleType;
+  icon?: string;
+  description?: string;
+  docsEndpoint?: string;
+  docsDescription?: string;
+  items?: RuleOption[];
+};
+
+export const RULE_OPTIONS: RuleOption[] = [
+  {
+    id: 'payload_collection',
+    label: 'Payload Collection',
+    description: 'Collect span attributes containing payload data to traces.',
+    type: InstrumentationRuleType.PAYLOAD_COLLECTION,
+    icon: getRuleIcon(InstrumentationRuleType.PAYLOAD_COLLECTION),
+    docsEndpoint: '/pipeline/rules/payloadcollection',
+    docsDescription: 'The “Payload Collection” Rule can be used to add span attributes containing payload data to traces.',
+  },
+];
diff --git a/frontend/webapp/containers/main/rules/index.ts b/frontend/webapp/containers/main/rules/index.ts
new file mode 100644
index 000000000..c5c586edb
--- /dev/null
+++ b/frontend/webapp/containers/main/rules/index.ts
@@ -0,0 +1 @@
+export * from './add-rule-modal';
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
index c5ffcc312..697a9b906 100644
--- a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
+++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -4,10 +4,12 @@ import { useDrawerStore, useModalStore } from '@/store';
 import { K8sActualSource, ActualDestination, ActionDataParsed, OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES } from '@/types';
 
 export function useNodeDataFlowHandlers({
+  rules,
   sources,
   actions,
   destinations,
 }: {
+  rules: any[];
   sources: K8sActualSource[];
   actions: ActionDataParsed[];
   destinations: ActualDestination[];
@@ -50,6 +52,8 @@ export function useNodeDataFlowHandlers({
           type,
           item: selectedDrawerItem,
         });
+      } else if (type === OVERVIEW_NODE_TYPES.ADD_RULE) {
+        setCurrentModal(OVERVIEW_ENTITY_TYPES.RULE);
       } else if (type === OVERVIEW_NODE_TYPES.ADD_SOURCE) {
         setCurrentModal(OVERVIEW_ENTITY_TYPES.SOURCE);
       } else if (type === OVERVIEW_NODE_TYPES.ADD_ACTION) {
diff --git a/frontend/webapp/public/icons/overview/rules.svg b/frontend/webapp/public/icons/overview/rules.svg
new file mode 100644
index 000000000..bb97b05e7
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/rules.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.5 1.94059V1.94836M1.94111 4.49806V4.50583M1 7.99611V8.00389M1.94111 11.4942V11.5019M4.5 14.0516V14.0594M8 14.9922V15M11.5 14.0516V14.0594M14.0589 11.4942V11.5019M15 7.99611V8.00389M14.0589 4.49806V4.50583M11.5 1.94059V1.94836M8 1V1.00777" stroke="#B8B8B8" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 8H8.01125M8 3.5L9.326 4.79876L11.182 4.81802L11.2012 6.674L12.5 8L11.2012 9.326L11.182 11.182L9.326 11.2012L8 12.5L6.674 11.2012L4.81802 11.182L4.79876 9.326L3.5 8L4.79876 6.674L4.81802 4.81802L6.674 4.79876L8 3.5Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/public/icons/rules/payloadcollection.svg b/frontend/webapp/public/icons/rules/payloadcollection.svg
new file mode 100644
index 000000000..f7d8a2a5e
--- /dev/null
+++ b/frontend/webapp/public/icons/rules/payloadcollection.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.99967 7.33333V11.3333M7.99967 11.3333C7.92987 11.3333 7.86007 11.31 7.80254 11.2634C7.37701 10.9186 6.99534 10.5224 6.66634 10.0837M7.99967 11.3333C8.06947 11.3333 8.13927 11.31 8.19681 11.2634C8.62234 10.9186 9.00401 10.5224 9.33301 10.0837M1.33301 6.26667C1.33301 4.77319 1.33301 4.02645 1.62365 3.45603C1.87932 2.95426 2.28727 2.54631 2.78903 2.29065C3.35946 2 4.1062 2 5.59967 2H5.81005C6.12312 2 6.27965 2 6.42174 2.04315C6.54753 2.08135 6.66455 2.14398 6.76614 2.22745C6.88081 2.32175 6.96767 2.45199 7.14134 2.71248L7.52467 3.28752C7.69834 3.54801 7.78521 3.67825 7.89987 3.77255C8.00147 3.85602 8.11847 3.91865 8.24427 3.95685C8.38634 4 8.54287 4 8.85594 4H10.3997C11.8931 4 12.6399 4 13.2103 4.29065C13.7121 4.54631 14.12 4.95426 14.3757 5.45603C14.6663 6.02645 14.6663 6.7732 14.6663 8.26667V9.73333C14.6663 11.2268 14.6663 11.9735 14.3757 12.544C14.12 13.0457 13.7121 13.4537 13.2103 13.7093C12.6399 14 11.8931 14 10.3997 14H5.59967C4.1062 14 3.35946 14 2.78903 13.7093C2.28727 13.4537 1.87932 13.0457 1.62365 12.544C1.33301 11.9735 1.33301 11.2268 1.33301 9.73333V6.26667Z" stroke="#B8B8B8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index c33616d75..f700cc99b 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { Text } from '../text';
 import styled from 'styled-components';
-import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
+import React, { useState, ChangeEvent, KeyboardEvent, FC, useEffect } from 'react';
 
 export interface Option {
   id: string;
@@ -14,7 +14,9 @@ export interface Option {
 interface AutocompleteInputProps {
   options: Option[];
   placeholder?: string;
+  selectedOption?: Option;
   onOptionSelect?: (option: Option) => void;
+  style?: React.CSSProperties;
 }
 
 const filterOptions = (optionsList: Option[], input: string): Option[] => {
@@ -31,15 +33,24 @@ const filterOptions = (optionsList: Option[], input: string): Option[] => {
   }, []);
 };
 
-const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder = 'Type to search...', onOptionSelect }) => {
+const AutocompleteInput: FC<AutocompleteInputProps> = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, style }) => {
   const [query, setQuery] = useState('');
+  const [icon, setIcon] = useState('');
   const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''));
   const [showOptions, setShowOptions] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
 
+  useEffect(() => {
+    if (!!selectedOption && !query) {
+      setQuery(selectedOption.label);
+      setIcon(selectedOption.icon || '');
+    }
+  }, [selectedOption, query]);
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const input = e.target.value;
     setQuery(input);
+    setIcon('');
     if (input) {
       const filtered = filterOptions(options, input);
       setFilteredOptions(filtered);
@@ -50,6 +61,7 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder =
   };
 
   const handleOptionClick = (option: Option) => {
+    setIcon(option.icon || '');
     setQuery(option.label);
     setShowOptions(false);
     if (onOptionSelect) {
@@ -81,8 +93,9 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder =
   };
 
   return (
-    <AutocompleteContainer>
+    <AutocompleteContainer style={style}>
       <InputWrapper>
+        {icon && <Icon src={icon} />}
         <StyledInput
           type='text'
           value={query}
@@ -93,6 +106,7 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder =
           onFocus={() => setShowOptions(true)}
         />
       </InputWrapper>
+
       {showOptions && (
         <OptionsList>
           {filteredOptions.map((option, index) => (
@@ -107,15 +121,16 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({ options, placeholder =
 interface OptionItemProps {
   option: Option;
   isActive: boolean;
+  renderIcon?: boolean;
   onClick: (option: Option) => void;
 }
 
-const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
+const OptionItem: FC<OptionItemProps> = ({ option, isActive, renderIcon = true, onClick }) => {
   const hasSubItems = !!option.items && option.items.length > 0;
 
   return (
     <OptionItemContainer isActive={isActive} isList={hasSubItems} onMouseDown={() => (hasSubItems ? null : onClick(option))}>
-      {option.icon && <Image width={16} height={16} src={option.icon} alt={option.label} />}
+      {option.icon && renderIcon && <Icon src={option.icon} alt={option.label} />}
 
       <OptionContent>
         <OptionLabelWrapper>
@@ -128,7 +143,7 @@ const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
             {option.items?.map((subOption) => (
               <SubOptionContainer key={subOption.id}>
                 <VerticalLine />
-                <OptionItem option={subOption} isActive={false} onClick={onClick} />
+                <OptionItem option={subOption} renderIcon={false} isActive={false} onClick={onClick} />
               </SubOptionContainer>
             ))}
           </SubOptionsList>
@@ -138,13 +153,16 @@ const OptionItem: FC<OptionItemProps> = ({ option, isActive, onClick }) => {
   );
 };
 
+const Icon = ({ src, alt = '' }: { src: string; alt?: string }) => {
+  return <Image width={16} height={16} src={src} alt={alt} />;
+};
+
 export { AutocompleteInput };
 
 /** Styled Components */
 
 const AutocompleteContainer = styled.div`
   position: relative;
-  margin-top: 24px;
 `;
 
 const InputWrapper = styled.div`
@@ -152,8 +170,8 @@ const InputWrapper = styled.div`
   display: flex;
   align-items: center;
   height: 36px;
-  gap: 12px;
-  padding: 0 8px;
+  gap: 8px;
+  padding-left: 12px;
   transition: border-color 0.3s;
   border-radius: 32px;
   border: 1px solid rgba(249, 249, 249, 0.24);
@@ -195,7 +213,7 @@ const OptionsList = styled.ul`
   max-height: 348px;
   top: 32px;
   border-radius: 24px;
-  width: calc(100% - 16px);
+  width: calc(100% - 24px);
   overflow-y: auto;
   background-color: ${({ theme }) => theme.colors.dropdown_bg};
   border: 1px solid ${({ theme }) => theme.colors.border};
@@ -209,7 +227,7 @@ interface OptionItemContainerProps {
 }
 
 const OptionItemContainer = styled.li<OptionItemContainerProps>`
-  width: 100%;
+  width: calc(100% - 24px);
   padding: 8px 12px;
   cursor: ${({ isList }) => (isList ? 'default' : 'pointer')};
   border-radius: 24px;
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 095297743..b8c78ce2b 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,6 +1,7 @@
 import theme from '@/styles/theme';
 import { getActionIcon } from '@/utils';
 import { Node, Edge } from 'react-flow-renderer';
+import { getRuleIcon } from '@/utils/functions';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 import {
   OVERVIEW_ENTITY_TYPES,
@@ -40,12 +41,14 @@ const extractMonitors = (exportedSignals: Record<string, boolean>) =>
   Object.keys(exportedSignals).filter((signal) => exportedSignals[signal] === true);
 
 export const buildNodesAndEdges = ({
+  rules,
   sources,
   actions,
   destinations,
   columnWidth,
   containerWidth,
 }: {
+  rules: any[];
   sources: K8sActualSource[];
   actions: ActionData[];
   destinations: ActualDestination[];
@@ -53,29 +56,60 @@ export const buildNodesAndEdges = ({
   containerWidth: number;
 }) => {
   // Calculate x positions for each column
-  const leftColumnX = 0;
-  const rightColumnX = containerWidth - columnWidth;
-  const centerColumnX = (containerWidth - columnWidth) / 2;
+  const columnPostions = {
+    rules: 0,
+    sources: (containerWidth - columnWidth) / 3,
+    actions: (containerWidth - columnWidth) / 1.5,
+    destinations: containerWidth - columnWidth,
+  };
+
+  // Build Rules Nodes
+  const ruleNodes: Node[] = [
+    createNode('header-rule', 'header', columnPostions['rules'], 0, {
+      icon: `${HEADER_ICON_PATH}rules.svg`,
+      title: 'Instrumentation Rules',
+      tagValue: rules.length,
+    }),
+    ...(!rules.length
+      ? [
+          createNode(`rule-0`, 'add', columnPostions['rules'], NODE_HEIGHT, {
+            type: OVERVIEW_NODE_TYPES.ADD_RULE,
+            title: 'ADD RULE',
+            subTitle: 'Add first rule to modify the OpenTelemetry data',
+            status: STATUSES.HEALTHY,
+          }),
+        ]
+      : rules.map((rule, index) =>
+          createNode(`rule-${index}`, 'base', columnPostions['rules'], NODE_HEIGHT * (index + 1), {
+            id: rule.id,
+            type: OVERVIEW_ENTITY_TYPES.RULE,
+            status: STATUSES.HEALTHY,
+            title: rule.actionName || rule.type,
+            subTitle: rule.type,
+            imageUri: getRuleIcon(rule.type),
+            isActive: false,
+          })
+        )),
+  ];
 
   // Build Source Nodes
-  const sourcesNode: Node[] = [
-    createNode('header-source', 'header', leftColumnX, 0, {
+  const sourceNodes: Node[] = [
+    createNode('header-source', 'header', columnPostions['sources'], 0, {
       icon: `${HEADER_ICON_PATH}sources.svg`,
       title: 'Sources',
       tagValue: sources.length,
     }),
     ...(!sources.length
       ? [
-          createNode(`source-0`, 'add', leftColumnX, NODE_HEIGHT, {
+          createNode(`source-0`, 'add', columnPostions['sources'], NODE_HEIGHT, {
             type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
             title: 'ADD SOURCE',
             subTitle: 'Add first source to collect OpenTelemetry data',
-            imageUri: '',
             status: STATUSES.HEALTHY,
           }),
         ]
       : sources.map((source, index) =>
-          createNode(`source-${index}`, 'base', leftColumnX, NODE_HEIGHT * (index + 1), {
+          createNode(`source-${index}`, 'base', columnPostions['sources'], NODE_HEIGHT * (index + 1), {
             type: OVERVIEW_ENTITY_TYPES.SOURCE,
             title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
             subTitle: source.kind,
@@ -90,57 +124,26 @@ export const buildNodesAndEdges = ({
         )),
   ];
 
-  // Build Destination Nodes
-  const destinationNode: Node[] = [
-    createNode('header-destination', 'header', rightColumnX, 0, {
-      icon: `${HEADER_ICON_PATH}destinations.svg`,
-      title: 'Destinations',
-      tagValue: destinations.length,
-    }),
-    ...(!destinations.length
-      ? [
-          createNode(`destination-0`, 'add', rightColumnX, NODE_HEIGHT, {
-            type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
-            title: 'ADD DESTIONATION',
-            subTitle: 'Add first destination to monitor OpenTelemetry data',
-            imageUri: '',
-            status: STATUSES.HEALTHY,
-          }),
-        ]
-      : destinations.map((destination, index) =>
-          createNode(`destination-${index}`, 'base', rightColumnX, NODE_HEIGHT * (index + 1), {
-            type: OVERVIEW_ENTITY_TYPES.DESTINATION,
-            title: destination.name,
-            subTitle: destination.destinationType.displayName,
-            imageUri: destination.destinationType.imageUrl,
-            status: STATUSES.HEALTHY,
-            monitors: extractMonitors(destination.exportedSignals),
-            id: destination.id,
-          })
-        )),
-  ];
-
   // Build Action Nodes
-  const actionsNode: Node[] = [
-    createNode('header-action', 'header', centerColumnX, 0, {
+  const actionNodes: Node[] = [
+    createNode('header-action', 'header', columnPostions['actions'], 0, {
       icon: `${HEADER_ICON_PATH}actions.svg`,
       title: 'Actions',
       tagValue: actions.length,
     }),
     ...(!actions.length
       ? [
-          createNode(`action-0`, 'add', centerColumnX, NODE_HEIGHT, {
+          createNode(`action-0`, 'add', columnPostions['actions'], NODE_HEIGHT, {
             type: OVERVIEW_NODE_TYPES.ADD_ACTION,
             title: 'ADD ACTION',
             subTitle: 'Add first action to modify the OpenTelemetry data',
-            imageUri: '',
             status: STATUSES.HEALTHY,
           }),
         ]
       : actions.map((action, index) => {
           const actionSpec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
 
-          return createNode(`action-${index}`, 'base', centerColumnX, NODE_HEIGHT * (index + 1), {
+          return createNode(`action-${index}`, 'base', columnPostions['actions'], NODE_HEIGHT * (index + 1), {
             id: action.id,
             type: OVERVIEW_ENTITY_TYPES.ACTION,
             status: STATUSES.HEALTHY,
@@ -153,32 +156,60 @@ export const buildNodesAndEdges = ({
         })),
   ];
 
+  // Build Destination Nodes
+  const destinationNodes: Node[] = [
+    createNode('header-destination', 'header', columnPostions['destinations'], 0, {
+      icon: `${HEADER_ICON_PATH}destinations.svg`,
+      title: 'Destinations',
+      tagValue: destinations.length,
+    }),
+    ...(!destinations.length
+      ? [
+          createNode(`destination-0`, 'add', columnPostions['destinations'], NODE_HEIGHT, {
+            type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
+            title: 'ADD DESTIONATION',
+            subTitle: 'Add first destination to monitor OpenTelemetry data',
+            status: STATUSES.HEALTHY,
+          }),
+        ]
+      : destinations.map((destination, index) =>
+          createNode(`destination-${index}`, 'base', columnPostions['destinations'], NODE_HEIGHT * (index + 1), {
+            type: OVERVIEW_ENTITY_TYPES.DESTINATION,
+            title: destination.name,
+            subTitle: destination.destinationType.displayName,
+            imageUri: destination.destinationType.imageUrl,
+            status: STATUSES.HEALTHY,
+            monitors: extractMonitors(destination.exportedSignals),
+            id: destination.id,
+          })
+        )),
+  ];
+
   // Combine all nodes
-  const nodes = [...sourcesNode, ...destinationNode, ...actionsNode];
+  const nodes = [...ruleNodes, ...sourceNodes, ...actionNodes, ...destinationNodes];
 
   // Build edges - connecting sources to actions, and actions to destinations
   const edges: Edge[] = [];
 
   // Connect sources to actions
-  const sourceToActionEdges: Edge[] = sources.map((_, sourceIndex) => {
-    const actionIndex = actionsNode.length === 2 ? 0 : sourceIndex % actions.length;
-    return createEdge(`source-${sourceIndex}-to-action-${actionIndex}`, `source-${sourceIndex}`, `action-${actionIndex}`, false);
-  });
-  // Connect actions to destinations
-  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) => {
-    return destinations.map((_, destinationIndex) =>
-      createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, `action-${actionIndex}`, `destination-${destinationIndex}`)
-    );
-  });
-
-  if (actions.length === 0) {
-    for (let i = 0; i < destinations.length; i++) {
-      actionToDestinationEdges.push(createEdge(`action-0-to-destination-${i}`, `action-0`, `destination-${i}`, false));
-    }
+  if (!sources.length) {
+    edges.push(createEdge('source-0-to-action-0', 'source-0', 'action-0', false));
+  } else {
+    sources.forEach((_, sourceIndex) => {
+      const actionIndex = 0;
+      edges.push(createEdge(`source-${sourceIndex}-to-action-${actionIndex}`, `source-${sourceIndex}`, `action-${actionIndex}`, false));
+    });
   }
 
-  // Combine all edges
-  edges.push(...sourceToActionEdges, ...actionToDestinationEdges);
+  // Connect actions to destinations
+  if (!destinations.length) {
+    edges.push(createEdge('action-0-to-destination-0', 'action-0', 'destination-0'));
+  } else {
+    destinations.forEach((_, destinationIndex) => {
+      const actionIndex = !actions.length ? 0 : actions.length - 1;
+      edges.push(createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, `action-${actionIndex}`, `destination-${destinationIndex}`));
+    });
+  }
 
   return { nodes, edges };
 };
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
index fe339032f..33a0039f2 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -1,24 +1,28 @@
 'use client';
-import React from 'react';
+import React, { useMemo } from 'react';
 import '@xyflow/react/dist/style.css';
+import AddNode from './nodes/add-node';
 import BaseNode from './nodes/base-node';
 import { ReactFlow } from '@xyflow/react';
-import headerNode from './nodes/header-node';
-import AddNode from './nodes/add-node';
-
-const nodeTypes = {
-  header: headerNode,
-  add: AddNode,
-  base: BaseNode,
-};
+import HeaderNode from './nodes/header-node';
 
 interface NodeBaseDataFlowProps {
   nodes: any[];
   edges: any[];
   onNodeClick?: (event: React.MouseEvent, object: any) => void;
+  columnWidth: number;
 }
 
-export function NodeBaseDataFlow({ nodes, edges, onNodeClick }: NodeBaseDataFlowProps) {
+export function NodeBaseDataFlow({ nodes, edges, onNodeClick, columnWidth }: NodeBaseDataFlowProps) {
+  const nodeTypes = useMemo(
+    () => ({
+      header: (props) => <HeaderNode {...props} columnWidth={columnWidth} />,
+      add: (props) => <AddNode {...props} columnWidth={columnWidth} />,
+      base: (props) => <BaseNode {...props} columnWidth={columnWidth} />,
+    }),
+    [columnWidth]
+  );
+
   return (
     <div style={{ height: 'calc(100vh - 100px)' }}>
       <ReactFlow nodeTypes={nodeTypes} nodes={nodes} edges={edges} zoomOnScroll={false} onNodeClick={onNodeClick} />
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
index b09d5fc55..2e02a89a9 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
@@ -4,10 +4,10 @@ import styled from 'styled-components';
 import { Text } from '@/reuseable-components';
 import { Handle, Position } from '@xyflow/react';
 
-const BaseNodeContainer = styled.div`
-  display: flex;
-  width: 296px;
+const BaseNodeContainer = styled.div<{ columnWidth: number }>`
+  width: ${({ columnWidth }) => `${columnWidth}px`};
   padding: 16px 24px 16px 16px;
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -39,6 +39,7 @@ const Title = styled(Text)`
 const SubTitle = styled(Text)`
   font-size: 12px;
   color: ${({ theme }) => theme.text.grey};
+  text-align: center;
 `;
 
 interface BaseNodeProps {
@@ -63,11 +64,13 @@ interface BaseNodeProps {
   positionAbsoluteY: number;
   sourcePosition?: any;
   targetPosition?: any;
+
+  columnWidth: number;
 }
 
-const AddNode = ({ id, isConnectable, data }: BaseNodeProps) => {
+const AddNode = ({ id, isConnectable, data, columnWidth }: BaseNodeProps) => {
   return (
-    <BaseNodeContainer>
+    <BaseNodeContainer columnWidth={columnWidth}>
       <TitleWrapper>
         <Image src='/icons/common/plus.svg' width={16} height={16} alt='plus' />
         <Title>{data.title}</Title>
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
index ee004451f..8b32f881a 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
@@ -5,14 +5,14 @@ import type { STATUSES } from '@/types';
 import { Handle, Position } from '@xyflow/react';
 import { Status, Text } from '@/reuseable-components';
 
-const BaseNodeContainer = styled.div`
-  display: flex;
+const BaseNodeContainer = styled.div<{ columnWidth: number }>`
+  width: ${({ columnWidth }) => `${columnWidth}px`};
   padding: 16px 24px 16px 16px;
-  align-items: center;
   gap: 8px;
+  display: flex;
+  align-items: center;
   align-self: stretch;
   border-radius: 16px;
-  width: 296px;
   cursor: pointer;
   background-color: ${({ theme }) => theme.colors.white_opacity['004']};
 
@@ -45,6 +45,13 @@ const FooterWrapper = styled.div`
   align-items: center;
 `;
 
+const Title = styled(Text)<{ columnWidth: number }>`
+  width: ${({ columnWidth }) => `${columnWidth - 42}px`};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
 const FooterText = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
   font-size: 10px;
@@ -65,9 +72,10 @@ interface BaseNodeProps {
   id: string;
   isConnectable: boolean;
   data: NodeDataProps;
+  columnWidth: number;
 }
 
-const BaseNode = ({ isConnectable, data }: BaseNodeProps) => {
+const BaseNode = ({ isConnectable, data, columnWidth }: BaseNodeProps) => {
   const { title, subTitle, imageUri, type, monitors, isActive } = data;
 
   function renderHandles() {
@@ -128,15 +136,14 @@ const BaseNode = ({ isConnectable, data }: BaseNodeProps) => {
   }
 
   return (
-    <BaseNodeContainer>
+    <BaseNodeContainer columnWidth={columnWidth}>
       <SourceIconWrapper>
         <Image src={imageUri || '/icons/common/folder.svg'} width={20} height={20} alt='source' />
       </SourceIconWrapper>
       <BodyWrapper>
-        <Text>{title}</Text>
+        <Title columnWidth={columnWidth}>{title}</Title>
         <FooterWrapper>
           <FooterText>{subTitle}</FooterText>
-
           {renderMonitors()}
           {renderStatus()}
         </FooterWrapper>
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
index f8060475b..0a48fcd53 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
@@ -1,15 +1,15 @@
 'use client';
-import React, { memo } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 import { Text } from '@/reuseable-components';
 
-const ColumnContainer = styled.div`
+const ColumnContainer = styled.div<{ columnWidth: number }>`
+  width: ${({ columnWidth }) => `${columnWidth + 40}px`};
+  padding: 12px 0px 16px 0px;
+  gap: 8px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px 0px 16px 0px;
-  width: 336px;
   border-bottom: 1px solid ${({ theme }) => theme.colors.border};
 `;
 
@@ -39,11 +39,12 @@ interface Column {
 
 interface HeaderNodeProps {
   data: Column;
+  columnWidth: number;
 }
 
-export default memo(({ data }: HeaderNodeProps) => {
+const HeaderNode = ({ data, columnWidth }: HeaderNodeProps) => {
   return (
-    <ColumnContainer>
+    <ColumnContainer columnWidth={columnWidth}>
       <Image src={data.icon} width={16} height={16} alt={data.title} />
       <Title size={14}>{data.title}</Title>
       <TagValueContainer>
@@ -51,4 +52,6 @@ export default memo(({ data }: HeaderNodeProps) => {
       </TagValueContainer>
     </ColumnContainer>
   );
-});
+};
+
+export default HeaderNode;
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
index 457ec7cf4..d61749943 100644
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -4,7 +4,7 @@ import Image from 'next/image';
 import { Text } from '../text';
 
 // Define the notification types
-type NotificationType = 'warning' | 'error' | 'success' | 'info';
+type NotificationType = 'warning' | 'error' | 'success' | 'info' | 'default';
 
 interface NotificationProps {
   type: NotificationType;
@@ -13,6 +13,7 @@ interface NotificationProps {
     label: string;
     onClick: () => void;
   };
+  style?: React.CSSProperties;
 }
 
 const NotificationContainer = styled.div<{ type: NotificationType }>`
@@ -31,9 +32,10 @@ const NotificationContainer = styled.div<{ type: NotificationType }>`
       case 'success':
         return '#28A745'; // Green
       case 'info':
-        return '#181944'; // Blue
+        return '#F9F9F90A'; // Default to info color
+      case 'default':
       default:
-        return '#2B2D66'; // Default to info color
+        return '#181944'; // Blue
     }
   }};
 `;
@@ -56,9 +58,10 @@ const Title = styled(Text)<{ type: NotificationType }>`
       case 'success':
         return '#28A745';
       case 'info':
-        return '#AABEF7';
+        return '#B8B8B8';
+      case 'default':
       default:
-        return '#2B2D66';
+        return '#AABEF7';
     }
   }};
 `;
@@ -86,47 +89,21 @@ const ActionButton = styled(Text)`
 const NotificationIcon = ({ type }: { type: NotificationType }) => {
   switch (type) {
     case 'warning':
-      return (
-        <Image
-          src="/icons/notification/warning-icon.svg"
-          alt="warning"
-          width={16}
-          height={16}
-        />
-      );
+      return <Image src='/icons/notification/warning-icon.svg' alt='warning' width={16} height={16} />;
     case 'error':
-      return (
-        <Image
-          src="/icons/notification/error-icon.svg"
-          alt="error"
-          width={16}
-          height={16}
-        />
-      );
+      return <Image src='/icons/notification/error-icon.svg' alt='error' width={16} height={16} />;
     case 'success':
-      return (
-        <Image
-          src="/icons/notification/success-icon.svg"
-          alt="success"
-          width={16}
-          height={16}
-        />
-      );
+      return <Image src='/icons/notification/success-icon.svg' alt='success' width={16} height={16} />;
     case 'info':
+      return <Image src='/icons/common/info.svg' alt='info' width={16} height={16} />;
     default:
-      return (
-        <Image src="/brand/odigos-icon.svg" alt="info" width={16} height={16} />
-      );
+      return <Image src='/brand/odigos-icon.svg' alt='info' width={16} height={16} />;
   }
 };
 
-const NotificationNote: React.FC<NotificationProps> = ({
-  type,
-  text,
-  action,
-}) => {
+const NotificationNote: React.FC<NotificationProps> = ({ type, text, action, style }) => {
   return (
-    <NotificationContainer type={type}>
+    <NotificationContainer type={type} style={style}>
       <TitleWrapper>
         <IconWrapper>
           <NotificationIcon type={type} />
@@ -135,7 +112,7 @@ const NotificationNote: React.FC<NotificationProps> = ({
       </TitleWrapper>
       {action && (
         <ActionButtonWrapper onClick={action.onClick}>
-          <ActionButton decoration="under">{action.label}</ActionButton>
+          <ActionButton decoration='under'>{action.label}</ActionButton>
         </ActionButtonWrapper>
       )}
     </NotificationContainer>
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index 814a09ae3..8fe055b18 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -37,12 +37,14 @@ export interface StepProps {
 }
 
 export enum OVERVIEW_ENTITY_TYPES {
+  RULE = 'rule',
   SOURCE = 'source',
   ACTION = 'action',
   DESTINATION = 'destination',
 }
 
 export enum OVERVIEW_NODE_TYPES {
+  ADD_RULE = 'addRule',
   ADD_SOURCE = 'addSource',
   ADD_ACTION = 'addAction',
   ADD_DESTIONATION = 'addDestination',
diff --git a/frontend/webapp/types/instrumentation-rules.ts b/frontend/webapp/types/instrumentation-rules.ts
index c2c8d560f..681d87a75 100644
--- a/frontend/webapp/types/instrumentation-rules.ts
+++ b/frontend/webapp/types/instrumentation-rules.ts
@@ -1,6 +1,6 @@
 // Enumeration of possible Instrumentation Rule Types
 export enum InstrumentationRuleType {
-  PAYLOAD_COLLECTION = 'payload-collection',
+  PAYLOAD_COLLECTION = 'PayloadCollection',
 }
 
 export enum RulesType {
diff --git a/frontend/webapp/utils/functions/get-action-icon.ts b/frontend/webapp/utils/functions/get-action-icon.ts
index d4fadfb07..a01f5323f 100644
--- a/frontend/webapp/utils/functions/get-action-icon.ts
+++ b/frontend/webapp/utils/functions/get-action-icon.ts
@@ -1,12 +1,10 @@
-const ACTION_ICON_PATH = '/icons/actions/';
+import type { ActionsType } from '@/types';
 
-export const getActionIcon = (actionType?: string) => {
-  if (!actionType) {
-    return `${ACTION_ICON_PATH}add-action.svg`;
-  }
+const ICON_PATH = '/icons/actions/';
 
-  const typeLowerCased = actionType.toLowerCase();
+export const getActionIcon = (type: ActionsType | 'sampler') => {
+  const typeLowerCased = type.toLowerCase();
   const isSampler = typeLowerCased.includes('sampler');
 
-  return `${ACTION_ICON_PATH}${isSampler ? 'sampler' : typeLowerCased}.svg`;
+  return `${ICON_PATH}${isSampler ? 'sampler' : typeLowerCased}.svg`;
 };
diff --git a/frontend/webapp/utils/functions/get-rule-icon.ts b/frontend/webapp/utils/functions/get-rule-icon.ts
new file mode 100644
index 000000000..3583ca039
--- /dev/null
+++ b/frontend/webapp/utils/functions/get-rule-icon.ts
@@ -0,0 +1,9 @@
+import type { InstrumentationRuleType } from '@/types';
+
+const ICON_PATH = '/icons/rules/';
+
+export const getRuleIcon = (type: InstrumentationRuleType) => {
+  const typeLowerCased = type.replaceAll('-', '').toLowerCase();
+
+  return `${ICON_PATH}${typeLowerCased}.svg`;
+};
diff --git a/frontend/webapp/utils/functions/index.ts b/frontend/webapp/utils/functions/index.ts
index df073e059..58f9f1740 100644
--- a/frontend/webapp/utils/functions/index.ts
+++ b/frontend/webapp/utils/functions/index.ts
@@ -1,3 +1,4 @@
 export * from './strings';
 export * from './get-action-icon';
 export * from './get-status-icon';
+export * from './get-rule-icon';

From fa5c4577c7b8bc4bb5232470c259b8f4aedf5c6e Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Thu, 31 Oct 2024 09:07:43 +0200
Subject: [PATCH 324/374] fix: autocompleted notification type (#1664)

---
 .../connect-destination-modal-body/connection-notification.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
index 7cfbac089..960bc3630 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
@@ -17,7 +17,7 @@ export const ConnectionNotification = ({
     {destination?.fields && !showConnectionError && (
       <NotificationNoteWrapper>
         <NotificationNote
-          type="info"
+          type="default"
           text={`Odigos autocompleted ${destination.displayName} connection details.`}
         />
       </NotificationNoteWrapper>

From 93bbe3007de580e070caf3648eb84e601b038d22 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Thu, 31 Oct 2024 18:21:41 +0200
Subject: [PATCH 325/374] [GEN-1604]: create & get rules (#1665)

---
 .../actions/action-drawer-container/index.tsx |  18 ++-
 .../action-custom-fields.tsx                  |  68 ---------
 .../main/actions/choose-action-body/index.tsx |  21 ---
 .../actions/choose-action-modal/index.tsx     |  31 +----
 .../add-rule-modal/index.tsx                  |  78 +++++------
 .../add-rule-modal/rule-options.ts            |   0
 .../choose-rule-body/custom-fields/index.tsx  |  30 ++++
 .../custom-fields/payload-collection.tsx      |  98 +++++++++++++
 .../choose-rule-body/index.tsx                |  60 ++++++++
 .../main/instrumentation-rules/index.ts       |   1 +
 .../build-card-from-rule-spec.ts              |  27 ++++
 .../rule-drawer-container/index.tsx           |  89 ++++++++++++
 .../main/overview/add-entity/index.tsx        |   4 +-
 .../overview/overview-data-flow/index.tsx     |   8 +-
 .../main/overview/overview-drawer/index.tsx   | 130 ++++++++++++------
 .../webapp/containers/main/rules/index.ts     |   1 -
 frontend/webapp/graphql/mutations/index.ts    |   1 +
 .../graphql/mutations/instrumentation-rule.ts |  23 ++++
 .../graphql/queries/compute-platform.ts       |  33 ++++-
 .../hooks/instrumentation-rules/index.ts      |   3 +
 .../useGetInstrumentationRules.ts             |  18 +++
 .../useInstrumentationRuleCRUD.ts             |  54 ++++++++
 .../useInstrumentationRuleFormData.ts         |  80 +++++++++++
 .../hooks/overview/useNodeDataFlowHandlers.ts |  40 +++---
 .../auto-complete-input/index.tsx             |  56 ++++----
 .../reuseable-components/checkbox/index.tsx   |   8 +-
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/modal/styled.ts      |  21 +++
 .../nodes-data-flow/builder.ts                |  12 +-
 frontend/webapp/store/useDrawerStore.tsx      |   6 +-
 frontend/webapp/types/compute-platform.ts     |   5 +-
 .../webapp/types/instrumentation-rules.ts     |  85 ++++++++++--
 .../utils/functions/derive-type-from-rule.ts  |  11 ++
 .../webapp/utils/functions/get-action-icon.ts |   4 +-
 .../webapp/utils/functions/get-rule-icon.ts   |   4 +-
 35 files changed, 843 insertions(+), 286 deletions(-)
 delete mode 100644 frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
 rename frontend/webapp/containers/main/{rules => instrumentation-rules}/add-rule-modal/index.tsx (53%)
 rename frontend/webapp/containers/main/{rules => instrumentation-rules}/add-rule-modal/rule-options.ts (100%)
 create mode 100644 frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/custom-fields/index.tsx
 create mode 100644 frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/custom-fields/payload-collection.tsx
 create mode 100644 frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx
 create mode 100644 frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/build-card-from-rule-spec.ts
 create mode 100644 frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
 delete mode 100644 frontend/webapp/containers/main/rules/index.ts
 create mode 100644 frontend/webapp/graphql/mutations/instrumentation-rule.ts
 create mode 100644 frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
 create mode 100644 frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
 create mode 100644 frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
 create mode 100644 frontend/webapp/reuseable-components/modal/styled.ts
 create mode 100644 frontend/webapp/utils/functions/derive-type-from-rule.ts

diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
index 444ac81d4..4213b8e0a 100644
--- a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
 import { CardDetails } from '@/components';
-import { useActionFormData } from '@/hooks';
+import { useActionFormData, useNotify } from '@/hooks';
 import { ChooseActionBody } from '../choose-action-body';
 import type { ActionDataParsed, ActionInput } from '@/types';
 import buildCardFromActionSpec from './build-card-from-action-spec';
@@ -17,6 +17,7 @@ interface Props {
 }
 
 const ActionDrawer = forwardRef<ActionDrawerHandle, Props>(({ isEditing }, ref) => {
+  const notify = useNotify();
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const { formData, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useActionFormData();
 
@@ -48,7 +49,20 @@ const ActionDrawer = forwardRef<ActionDrawerHandle, Props>(({ isEditing }, ref)
   }, [selectedItem, isEditing]);
 
   useImperativeHandle(ref, () => ({
-    getCurrentData: () => (validateForm() ? formData : null),
+    getCurrentData: () => {
+      if (validateForm()) {
+        return formData;
+      } else {
+        notify({
+          message: 'Required fields are missing!',
+          title: 'Update Action Error',
+          type: 'error',
+          target: 'notification',
+          crdType: 'notification',
+        });
+        return null;
+      }
+    },
   }));
 
   return isEditing && thisAction ? (
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
deleted file mode 100644
index c3c94f01b..000000000
--- a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import styled from 'styled-components';
-import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
-import { ActionsType } from '@/types';
-
-interface ActionCustomFieldsProps {
-  actionType?: ActionsType;
-  value: any;
-  setValue: (value: any) => void;
-}
-
-const FieldWrapper = styled.div`
-  width: 100%;
-  margin: 8px 0;
-`;
-
-const FieldTitle = styled(Text)`
-  margin-bottom: 12px;
-`;
-
-const ActionCustomFields: React.FC<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
-  switch (actionType) {
-    case ActionsType.ADD_CLUSTER_INFO:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to add</FieldTitle>
-          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.DELETE_ATTRIBUTES:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to delete</FieldTitle>
-          <InputList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.RENAME_ATTRIBUTES:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to rename</FieldTitle>
-          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.PII_MASKING:
-      return (
-        <FieldWrapper>
-          <FieldTitle>Attributes to mask</FieldTitle>
-          <InputList required value={value} onChange={(arr) => setValue(arr)} />
-        </FieldWrapper>
-      );
-
-    case ActionsType.ERROR_SAMPLER:
-      return null;
-
-    case ActionsType.PROBABILISTIC_SAMPLER:
-      return null;
-
-    case ActionsType.LATENCY_SAMPLER:
-      return null;
-
-    default:
-      return null;
-  }
-};
-
-export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index e96746b33..12550a740 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -68,24 +68,3 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action
 };
 
 export { ChooseActionBody };
-
-/* <CheckboxList
-        monitors={[
-          { id: 'logs', title: 'Logs' },
-          { id: 'traces', title: 'Traces' },
-          { id: 'metrics', title: 'Metrics' },
-        ]}
-        title='Monitoring'
-        exportedSignals={{
-          logs: formData.signals.includes('LOGS'),
-          traces: formData.signals.includes('TRACES'),
-          metrics: formData.signals.includes('METRICS'),
-        }}
-        handleSignalChange={(key, isAdd) => {
-          const selectedSignals = [];
-          const keyUpper = (key as string).toUpperCase() as SignalUppercase;
-          const payload = isAdd ? [...selectedSignals, keyUpper] : selectedSignals.filter((str) => str !== keyUpper);
-
-          handleFormChange('signals', payload);
-        }}
-      /> */
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 43033bdca..c59b009e5 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,29 +1,8 @@
-import styled from 'styled-components';
 import { ChooseActionBody } from '../';
 import React, { useMemo, useState } from 'react';
 import { useActionCRUD, useActionFormData } from '@/hooks/actions';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
-import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, FadeLoader, SectionTitle } from '@/reuseable-components';
-
-const Container = styled.section`
-  width: 100%;
-  max-width: 640px;
-  height: 640px;
-  margin: 0 15vw;
-  padding: 64px 12px 0 12px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-`;
-
-const Center = styled.div`
-  width: 100%;
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
+import { AutocompleteInput, Modal, NavigationButtons, Divider, FadeLoader, SectionTitle, ModalContent, Center } from '@/reuseable-components';
 
 interface AddActionModalProps {
   isModalOpen: boolean;
@@ -47,9 +26,9 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
     handleCloseModal();
   }
 
-  const handleSelect = (item: ActionOption) => {
+  const handleSelect = (item?: ActionOption) => {
     resetFormData();
-    handleFormChange('type', item.type);
+    handleFormChange('type', item?.type || '');
     setSelectedItem(item);
   };
 
@@ -71,7 +50,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
         />
       }
     >
-      <Container>
+      <ModalContent>
         <SectionTitle
           title='Define Action'
           description='Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
@@ -91,7 +70,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
             )}
           </div>
         ) : null}
-      </Container>
+      </ModalContent>
     </Modal>
   );
 };
diff --git a/frontend/webapp/containers/main/rules/add-rule-modal/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
similarity index 53%
rename from frontend/webapp/containers/main/rules/add-rule-modal/index.tsx
rename to frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
index 1cbc4319a..777ec57d8 100644
--- a/frontend/webapp/containers/main/rules/add-rule-modal/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
@@ -1,27 +1,18 @@
-import styled from 'styled-components';
-import React, { useEffect, useState } from 'react';
+import { ChooseRuleBody } from '../choose-rule-body';
 import { RULE_OPTIONS, RuleOption } from './rule-options';
-import { AutocompleteInput, Divider, FadeLoader, Modal, NavigationButtons, NotificationNote, SectionTitle } from '@/reuseable-components';
-
-const Container = styled.section`
-  width: 100%;
-  max-width: 640px;
-  height: 640px;
-  margin: 0 15vw;
-  padding: 64px 12px 0 12px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-`;
-
-const Center = styled.div`
-  width: 100%;
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
+import React, { useEffect, useMemo, useState } from 'react';
+import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData } from '@/hooks';
+import {
+  AutocompleteInput,
+  Center,
+  Divider,
+  FadeLoader,
+  Modal,
+  ModalContent,
+  NavigationButtons,
+  NotificationNote,
+  SectionTitle,
+} from '@/reuseable-components';
 
 interface Props {
   isModalOpen: boolean;
@@ -29,29 +20,28 @@ interface Props {
 }
 
 export const AddRuleModal: React.FC<Props> = ({ isModalOpen, handleCloseModal }) => {
-  // const { formData, handleFormChange, resetFormData, validateForm } = useRuleFormData();
-  // const { createRule, loading } = useRuleCRUD({ onSuccess: handleClose });
+  const { formData, handleFormChange, resetFormData, validateForm } = useInstrumentationRuleFormData();
+  const { createInstrumentationRule, loading } = useInstrumentationRuleCRUD({ onSuccess: handleClose });
   const [selectedItem, setSelectedItem] = useState<RuleOption | undefined>(undefined);
 
   useEffect(() => {
     if (!selectedItem) handleSelect(RULE_OPTIONS[0]);
   }, [selectedItem]);
 
-  // const isFormOk = useMemo(() => !!selectedItem && validateForm(), [selectedItem, formData]);
+  const isFormOk = useMemo(() => !!selectedItem && validateForm(), [selectedItem, formData]);
 
   const handleSubmit = async () => {
-    // createRule(formData);
+    createInstrumentationRule(formData);
   };
 
   function handleClose() {
-    // resetFormData();
+    resetFormData();
     setSelectedItem(undefined);
     handleCloseModal();
   }
 
-  const handleSelect = (item: RuleOption) => {
-    // resetFormData();
-    // handleFormChange('type', item.type);
+  const handleSelect = (item?: RuleOption) => {
+    resetFormData();
     setSelectedItem(item);
   };
 
@@ -67,13 +57,13 @@ export const AddRuleModal: React.FC<Props> = ({ isModalOpen, handleCloseModal })
               variant: 'primary',
               label: 'DONE',
               onClick: handleSubmit,
-              disabled: true,
+              disabled: !isFormOk || loading,
             },
           ]}
         />
       }
     >
-      <Container>
+      <ModalContent>
         <SectionTitle
           title='Define Instrumentation Rule'
           description='Instrumentation rules control how telemetry is recorded from your application. Choose a rule type and provide necessary information.'
@@ -83,22 +73,28 @@ export const AddRuleModal: React.FC<Props> = ({ isModalOpen, handleCloseModal })
           text='We currently support one rule. We’ll be adding new rule types in the near future.'
           style={{ marginTop: '24px' }}
         />
-        <AutocompleteInput options={RULE_OPTIONS} selectedOption={selectedItem} onOptionSelect={handleSelect} style={{ marginTop: '12px' }} />
+        <AutocompleteInput
+          disabled
+          options={RULE_OPTIONS}
+          selectedOption={selectedItem}
+          onOptionSelect={handleSelect}
+          style={{ marginTop: '12px' }}
+        />
 
         {!!selectedItem?.type ? (
           <div>
             <Divider margin='16px 0' />
 
-            {/* {loading ? ( */}
-            <Center>
-              <FadeLoader cssOverride={{ scale: 2 }} />
-            </Center>
-            {/* ) : (
+            {loading ? (
+              <Center>
+                <FadeLoader cssOverride={{ scale: 2 }} />
+              </Center>
+            ) : (
               <ChooseRuleBody rule={selectedItem} formData={formData} handleFormChange={handleFormChange} />
-            )} */}
+            )}
           </div>
         ) : null}
-      </Container>
+      </ModalContent>
     </Modal>
   );
 };
diff --git a/frontend/webapp/containers/main/rules/add-rule-modal/rule-options.ts b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/rule-options.ts
similarity index 100%
rename from frontend/webapp/containers/main/rules/add-rule-modal/rule-options.ts
rename to frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/rule-options.ts
diff --git a/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/custom-fields/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/custom-fields/index.tsx
new file mode 100644
index 000000000..c310ccfa4
--- /dev/null
+++ b/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/custom-fields/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PayloadCollection from './payload-collection';
+import { type InstrumentationRuleInput, InstrumentationRuleType } from '@/types';
+
+interface RuleCustomFieldsProps {
+  ruleType?: InstrumentationRuleType;
+  value: InstrumentationRuleInput;
+  setValue: (key: keyof InstrumentationRuleInput, value: any) => void;
+}
+
+type ComponentProps = {
+  value: InstrumentationRuleInput;
+  setValue: (key: keyof InstrumentationRuleInput, value: any) => void;
+};
+
+type ComponentType = React.FC<ComponentProps> | null;
+
+const componentsMap: Record<InstrumentationRuleType, ComponentType> = {
+  [InstrumentationRuleType.PAYLOAD_COLLECTION]: PayloadCollection,
+};
+
+const RuleCustomFields: React.FC<RuleCustomFieldsProps> = ({ ruleType, value, setValue }) => {
+  if (!ruleType) return null;
+
+  const Component = componentsMap[ruleType];
+
+  return Component ? <Component value={value} setValue={setValue} /> : null;
+};
+
+export default RuleCustomFields;
diff --git a/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/custom-fields/payload-collection.tsx b/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/custom-fields/payload-collection.tsx
new file mode 100644
index 000000000..160c5da11
--- /dev/null
+++ b/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/custom-fields/payload-collection.tsx
@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Checkbox, FieldLabel } from '@/reuseable-components';
+import { PayloadCollectionType, type InstrumentationRuleInput } from '@/types';
+
+type Props = {
+  value: InstrumentationRuleInput;
+  setValue: (key: keyof InstrumentationRuleInput, value: any) => void;
+};
+
+type Parsed = InstrumentationRuleInput['payloadCollection'];
+
+const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 8px;
+`;
+
+const strictPicklist = [
+  {
+    id: PayloadCollectionType.HTTP_REQUEST,
+    label: 'Collect HTTP Request',
+  },
+  {
+    id: PayloadCollectionType.HTTP_RESPONSE,
+    label: 'Collect HTTP Response',
+  },
+  {
+    id: PayloadCollectionType.DB_QUERY,
+    label: 'Collect DB Query',
+  },
+  {
+    id: PayloadCollectionType.MESSAGING,
+    label: 'Collect Messaging',
+  },
+];
+
+const PayloadCollection: React.FC<Props> = ({ value, setValue }) => {
+  const mappedValue = useMemo(
+    () =>
+      Object.entries(value.payloadCollection)
+        .filter(([k, v]) => !!v)
+        .map(([k]) => k),
+    [value]
+  );
+
+  const [isLastSelection, setIsLastSelection] = useState(mappedValue.length === 1);
+
+  useEffect(() => {
+    if (!mappedValue.length) {
+      const payload: Parsed = {
+        [PayloadCollectionType.HTTP_REQUEST]: {},
+        [PayloadCollectionType.HTTP_RESPONSE]: {},
+        [PayloadCollectionType.DB_QUERY]: {},
+        [PayloadCollectionType.MESSAGING]: {},
+      };
+
+      setValue('payloadCollection', payload);
+      setIsLastSelection(false);
+    }
+    // eslint-disable-next-line
+  }, []);
+
+  const handleChange = (id: string, isAdd: boolean) => {
+    const arr = isAdd ? [...mappedValue, id] : mappedValue.filter((str) => str !== id);
+
+    const payload: Parsed = {
+      [PayloadCollectionType.HTTP_REQUEST]: arr.includes(PayloadCollectionType.HTTP_REQUEST) ? {} : null,
+      [PayloadCollectionType.HTTP_RESPONSE]: arr.includes(PayloadCollectionType.HTTP_RESPONSE) ? {} : null,
+      [PayloadCollectionType.DB_QUERY]: arr.includes(PayloadCollectionType.DB_QUERY) ? {} : null,
+      [PayloadCollectionType.MESSAGING]: arr.includes(PayloadCollectionType.MESSAGING) ? {} : null,
+    };
+
+    setValue('payloadCollection', payload);
+    setIsLastSelection(arr.length === 1);
+  };
+
+  return (
+    <>
+      <FieldLabel title='Type of data to collect' required />
+
+      <ListContainer>
+        {strictPicklist.map(({ id, label }) => (
+          <Checkbox
+            key={id}
+            title={label}
+            disabled={isLastSelection && mappedValue.includes(id)}
+            initialValue={mappedValue.includes(id)}
+            onChange={(bool) => handleChange(id, bool)}
+          />
+        ))}
+      </ListContainer>
+    </>
+  );
+};
+
+export default PayloadCollection;
diff --git a/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx
new file mode 100644
index 000000000..d4e29eb1d
--- /dev/null
+++ b/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import RuleCustomFields from './custom-fields';
+import type { InstrumentationRuleInput } from '@/types';
+import type { RuleOption } from '../add-rule-modal/rule-options';
+import { DocsButton, Input, Text, TextArea, Toggle, SectionTitle } from '@/reuseable-components';
+
+const FieldWrapper = styled.div`
+  width: 100%;
+  margin: 24px 0;
+`;
+
+const FieldTitle = styled(Text)`
+  margin-bottom: 12px;
+`;
+
+interface Props {
+  isUpdate?: boolean;
+  rule: RuleOption;
+  formData: InstrumentationRuleInput;
+  handleFormChange: (key: keyof InstrumentationRuleInput, val: any) => void;
+}
+
+const ChooseRuleBody: React.FC<Props> = ({ isUpdate, rule, formData, handleFormChange }) => {
+  return (
+    <>
+      {isUpdate && (
+        <FieldWrapper>
+          <FieldTitle>Status</FieldTitle>
+          <Toggle
+            title={!formData.disabled ? 'Active' : 'Inactive'}
+            initialValue={!formData.disabled}
+            onChange={(bool) => handleFormChange('disabled', !bool)}
+          />
+        </FieldWrapper>
+      )}
+
+      {!isUpdate && <SectionTitle title='' description={rule.docsDescription as string} actionButton={<DocsButton endpoint={rule.docsEndpoint} />} />}
+
+      {!isUpdate && (
+        <FieldWrapper>
+          <Input
+            title='Rule name'
+            placeholder='Use a name that describes the rule'
+            value={formData.ruleName}
+            onChange={({ target: { value } }) => handleFormChange('ruleName', value)}
+          />
+        </FieldWrapper>
+      )}
+
+      <RuleCustomFields ruleType={rule.type} value={formData} setValue={(key, val) => handleFormChange(key, val)} />
+
+      <FieldWrapper>
+        <TextArea title='Notes' value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
+      </FieldWrapper>
+    </>
+  );
+};
+
+export { ChooseRuleBody };
diff --git a/frontend/webapp/containers/main/instrumentation-rules/index.ts b/frontend/webapp/containers/main/instrumentation-rules/index.ts
index 0ab2deef9..ed68a7de5 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/index.ts
+++ b/frontend/webapp/containers/main/instrumentation-rules/index.ts
@@ -2,3 +2,4 @@ export * from './managed';
 export * from './choose-rule';
 export * from './create-rule';
 export * from './edit-rule';
+export * from './add-rule-modal';
diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/build-card-from-rule-spec.ts b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/build-card-from-rule-spec.ts
new file mode 100644
index 000000000..479a7e1ca
--- /dev/null
+++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/build-card-from-rule-spec.ts
@@ -0,0 +1,27 @@
+import type { InstrumentationRuleSpec } from '@/types';
+
+const buildCardFromRuleSpec = (rule: InstrumentationRuleSpec) => {
+  const { type, ruleName, notes, disabled, payloadCollection } = rule as InstrumentationRuleSpec;
+
+  const arr = [
+    { title: 'Type', value: type || 'N/A' },
+    { title: 'Status', value: String(!disabled) },
+    { title: 'Name', value: ruleName || 'N/A' },
+    { title: 'Notes', value: notes || 'N/A' },
+  ];
+
+  if (payloadCollection) {
+    let str = '';
+    const entries = Object.entries(payloadCollection).filter(([key, val]) => !!val);
+    entries.forEach(([key, val], idx) => {
+      str += key;
+      if (idx < entries.length - 1) str += ', ';
+    });
+
+    arr.push({ title: 'Collect', value: str });
+  }
+
+  return arr;
+};
+
+export default buildCardFromRuleSpec;
diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
new file mode 100644
index 000000000..5a0e5a644
--- /dev/null
+++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
@@ -0,0 +1,89 @@
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import styled from 'styled-components';
+import { useDrawerStore } from '@/store';
+import { CardDetails } from '@/components';
+import { ChooseRuleBody } from '../choose-rule-body';
+import { RULE_OPTIONS } from '../add-rule-modal/rule-options';
+import buildCardFromRuleSpec from './build-card-from-rule-spec';
+import { useInstrumentationRuleFormData, useNotify } from '@/hooks';
+import type { InstrumentationRuleInput, InstrumentationRuleSpec } from '@/types';
+
+export type RuleDrawerHandle = {
+  getCurrentData: () => InstrumentationRuleInput | null;
+};
+
+interface Props {
+  isEditing: boolean;
+}
+
+const RuleDrawer = forwardRef<RuleDrawerHandle, Props>(({ isEditing }, ref) => {
+  const notify = useNotify();
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const { formData, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useInstrumentationRuleFormData();
+
+  const cardData = useMemo(() => {
+    if (!selectedItem) return [];
+
+    const { item } = selectedItem as { item: InstrumentationRuleSpec };
+    const arr = buildCardFromRuleSpec(item);
+
+    return arr;
+  }, [selectedItem]);
+
+  const thisRule = useMemo(() => {
+    if (!selectedItem || !isEditing) {
+      resetFormData();
+      return undefined;
+    }
+
+    const { item } = selectedItem as { item: InstrumentationRuleSpec };
+    const found = RULE_OPTIONS.find(({ type }) => type === item.type);
+
+    if (!found) return undefined;
+
+    loadFormWithDrawerItem(selectedItem);
+
+    return found;
+  }, [selectedItem, isEditing]);
+
+  useImperativeHandle(ref, () => ({
+    getCurrentData: () => {
+      if (validateForm()) {
+        return formData;
+      } else {
+        notify({
+          message: 'Required fields are missing!',
+          title: 'Update Rule Error',
+          type: 'error',
+          target: 'notification',
+          crdType: 'notification',
+        });
+        return null;
+      }
+    },
+  }));
+
+  return isEditing && thisRule ? (
+    <FormContainer>
+      <ChooseRuleBody isUpdate rule={thisRule} formData={formData} handleFormChange={handleFormChange} />
+    </FormContainer>
+  ) : (
+    <CardDetails data={cardData} />
+  );
+});
+
+RuleDrawer.displayName = 'RuleDrawer';
+
+export { RuleDrawer };
+
+const FormContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding-right: 16px;
+  box-sizing: border-box;
+  overflow: overlay;
+  max-height: calc(100vh - 220px);
+`;
diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index 2916be866..d60433a3f 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -1,10 +1,10 @@
 import Image from 'next/image';
 import theme from '@/styles/theme';
 import { useModalStore } from '@/store';
-import { AddRuleModal } from '../../rules';
-import { AddActionModal } from '../../actions';
 import React, { useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
+import { AddActionModal } from '../../actions';
+import { AddRuleModal } from '../../instrumentation-rules';
 import { useActualSources, useOnClickOutside } from '@/hooks';
 import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index 1d9217aee..fdaccfc23 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
 import { useGetActions, useActualSources, useContainerWidth, useActualDestination, useNodeDataFlowHandlers } from '@/hooks';
+import { useGetInstrumentationRules } from '@/hooks/instrumentation-rules/useGetInstrumentationRules';
 
 const OverviewDrawer = dynamic(() => import('../overview-drawer'), {
   ssr: false,
@@ -20,9 +21,10 @@ export function OverviewDataFlowContainer() {
   const { actions } = useGetActions();
   const { sources } = useActualSources();
   const { destinations } = useActualDestination();
+  const { instrumentationRules } = useGetInstrumentationRules();
   const { containerRef, containerWidth } = useContainerWidth();
   const { handleNodeClick } = useNodeDataFlowHandlers({
-    rules: [],
+    rules: instrumentationRules,
     sources,
     actions,
     destinations,
@@ -33,14 +35,14 @@ export function OverviewDataFlowContainer() {
   // Memoized node and edge builder to improve performance
   const { nodes, edges } = useMemo(() => {
     return buildNodesAndEdges({
-      rules: [],
+      rules: instrumentationRules,
       sources,
       actions,
       destinations,
       columnWidth,
       containerWidth,
     });
-  }, [sources, actions, destinations, columnWidth, containerWidth]);
+  }, [instrumentationRules, sources, actions, destinations, columnWidth, containerWidth]);
 
   return (
     <OverviewDataFlowWrapper ref={containerRef}>
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index e153c4910..64619ce36 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { getActionIcon, LANGUAGES_LOGOS } from '@/utils';
+import { getActionIcon, getRuleIcon, LANGUAGES_LOGOS } from '@/utils';
 import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
 import { SourceDrawer } from '../../sources';
@@ -9,14 +9,24 @@ import { Drawer } from '@/reuseable-components';
 import { DeleteEntityModal } from '@/components';
 import { ActionDrawer, type ActionDrawerHandle } from '../../actions';
 import { DestinationDrawer, type DestinationDrawerHandle } from '../../destinations';
-import { useActionCRUD, useActualSources, useNotify, useUpdateDestination } from '@/hooks';
+import { RuleDrawer, RuleDrawerHandle } from '../../instrumentation-rules/rule-drawer-container';
+import { useActionCRUD, useActualSources, useInstrumentationRuleCRUD, useUpdateDestination } from '@/hooks';
 import { getMainContainerLanguageLogo, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils/constants/programming-languages';
-import { WorkloadId, K8sActualSource, ActualDestination, OVERVIEW_ENTITY_TYPES, PatchSourceRequestInput, ActionDataParsed } from '@/types';
+import {
+  WorkloadId,
+  K8sActualSource,
+  ActualDestination,
+  OVERVIEW_ENTITY_TYPES,
+  PatchSourceRequestInput,
+  ActionDataParsed,
+  InstrumentationRuleSpec,
+} from '@/types';
 
 const componentMap = {
-  source: SourceDrawer,
-  action: ActionDrawer,
-  destination: DestinationDrawer,
+  [OVERVIEW_ENTITY_TYPES.RULE]: RuleDrawer,
+  [OVERVIEW_ENTITY_TYPES.SOURCE]: SourceDrawer,
+  [OVERVIEW_ENTITY_TYPES.ACTION]: ActionDrawer,
+  [OVERVIEW_ENTITY_TYPES.DESTINATION]: DestinationDrawer,
 };
 
 const DRAWER_WIDTH = '640px';
@@ -29,19 +39,21 @@ const OverviewDrawer = () => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [title, setTitle] = useState('');
 
-  const notify = useNotify();
   const { updateAction, deleteAction } = useActionCRUD();
   const { updateExistingDestination } = useUpdateDestination();
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
+  const { updateInstrumentationRule, deleteInstrumentationRule } = useInstrumentationRuleCRUD();
 
   const titleRef = useRef<HTMLInputElement>(null);
+  const ruleDrawerRef = useRef<RuleDrawerHandle>(null);
   const actionDrawerRef = useRef<ActionDrawerHandle>(null);
   const destinationDrawerRef = useRef<DestinationDrawerHandle>(null);
 
   const refMap = {
-    source: undefined,
-    action: actionDrawerRef,
-    destination: destinationDrawerRef,
+    [OVERVIEW_ENTITY_TYPES.RULE]: ruleDrawerRef,
+    [OVERVIEW_ENTITY_TYPES.SOURCE]: undefined,
+    [OVERVIEW_ENTITY_TYPES.ACTION]: actionDrawerRef,
+    [OVERVIEW_ENTITY_TYPES.DESTINATION]: destinationDrawerRef,
   };
 
   useEffect(initialTitle, [selectedItem]);
@@ -54,7 +66,9 @@ const OverviewDrawer = () => {
     if (!!selectedItem?.item) {
       const { type, item } = selectedItem;
 
-      if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
+      if (type === OVERVIEW_ENTITY_TYPES.RULE) {
+        str = (item as InstrumentationRuleSpec).ruleName;
+      } else if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
         str = (item as K8sActualSource).reportedName;
       } else if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
         str = (item as ActionDataParsed).spec.actionName;
@@ -85,44 +99,20 @@ const OverviewDrawer = () => {
     if (!selectedItem?.item) return null;
     const { type, id, item } = selectedItem;
 
-    if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
-      if (destinationDrawerRef.current && titleRef.current) {
-        const newTitle = titleRef.current.value;
-        const formData = destinationDrawerRef.current.getCurrentData();
-        const payload = {
-          ...formData,
-          name: newTitle,
-        };
-
-        try {
-          await updateExistingDestination(id as string, payload);
-        } catch (error) {
-          console.error('Error updating destination:', error);
-        }
-        setIsEditing(false);
-      }
-    }
+    if (type === OVERVIEW_ENTITY_TYPES.RULE) {
+      const thisRef = refMap[type];
 
-    if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
-      if (actionDrawerRef.current && titleRef.current) {
+      if (thisRef.current && titleRef.current) {
         const newTitle = titleRef.current.value;
-        const formData = actionDrawerRef.current.getCurrentData();
-
-        if (!formData) {
-          notify({
-            message: 'Required fields are missing!',
-            title: 'Update Action Error',
-            type: 'error',
-            target: 'notification',
-            crdType: 'notification',
-          });
-        } else {
+        const formData = thisRef.current.getCurrentData();
+
+        if (formData) {
           const payload = {
             ...formData,
-            name: newTitle,
+            ruleName: newTitle,
           };
 
-          await updateAction(id as string, payload);
+          await updateInstrumentationRule(id as string, payload);
           setIsEditing(false);
         }
       }
@@ -153,12 +143,57 @@ const OverviewDrawer = () => {
       }
       setIsEditing(false);
     }
+
+    if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
+      const thisRef = refMap[type];
+
+      if (thisRef.current && titleRef.current) {
+        const newTitle = titleRef.current.value;
+        const formData = thisRef.current.getCurrentData();
+
+        if (formData) {
+          const payload = {
+            ...formData,
+            name: newTitle,
+          };
+
+          await updateAction(id as string, payload);
+          setIsEditing(false);
+        }
+      }
+    }
+
+    if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
+      const thisRef = refMap[type];
+
+      if (thisRef.current && titleRef.current) {
+        const newTitle = titleRef.current.value;
+        const formData = thisRef.current.getCurrentData();
+        const payload = {
+          ...formData,
+          name: newTitle,
+        };
+
+        try {
+          await updateExistingDestination(id as string, payload);
+        } catch (error) {
+          console.error('Error updating destination:', error);
+        }
+        setIsEditing(false);
+      }
+    }
   };
 
   const handleDelete = async () => {
     if (!selectedItem?.item) return null;
     const { type, item } = selectedItem;
 
+    if (type === OVERVIEW_ENTITY_TYPES.RULE) {
+      const { ruleId } = item as InstrumentationRuleSpec;
+
+      await deleteInstrumentationRule(ruleId);
+    }
+
     if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
       const { namespace, name, kind } = item as K8sActualSource;
 
@@ -227,10 +262,17 @@ const OverviewDrawer = () => {
   ) : null;
 };
 
-function getItemImageByType(type: string, item: K8sActualSource | ActionDataParsed | ActualDestination): string {
+function getItemImageByType(
+  type: OVERVIEW_ENTITY_TYPES,
+  item: InstrumentationRuleSpec | K8sActualSource | ActionDataParsed | ActualDestination
+): string {
   let src = '';
 
   switch (type) {
+    case OVERVIEW_ENTITY_TYPES.RULE:
+      src = getRuleIcon((item as InstrumentationRuleSpec).type);
+      break;
+
     case OVERVIEW_ENTITY_TYPES.SOURCE:
       src = getMainContainerLanguageLogo(item as K8sActualSource);
       break;
diff --git a/frontend/webapp/containers/main/rules/index.ts b/frontend/webapp/containers/main/rules/index.ts
deleted file mode 100644
index c5c586edb..000000000
--- a/frontend/webapp/containers/main/rules/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './add-rule-modal';
diff --git a/frontend/webapp/graphql/mutations/index.ts b/frontend/webapp/graphql/mutations/index.ts
index c8372be67..925550774 100644
--- a/frontend/webapp/graphql/mutations/index.ts
+++ b/frontend/webapp/graphql/mutations/index.ts
@@ -2,3 +2,4 @@ export * from './destination';
 export * from './source';
 export * from './namespace';
 export * from './action';
+export * from './instrumentation-rule';
diff --git a/frontend/webapp/graphql/mutations/instrumentation-rule.ts b/frontend/webapp/graphql/mutations/instrumentation-rule.ts
new file mode 100644
index 000000000..d40d57058
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/instrumentation-rule.ts
@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_INSTRUMENTATION_RULE = gql`
+  mutation CreateInstrumentationRule($instrumentationRule: InstrumentationRuleInput!) {
+    createInstrumentationRule(instrumentationRule: $instrumentationRule) {
+      ruleId
+    }
+  }
+`;
+
+export const UPDATE_INSTRUMENTATION_RULE = gql`
+  mutation UpdateInstrumentationRule($ruleId: ID!, $instrumentationRule: InstrumentationRuleInput!) {
+    updateInstrumentationRule(ruleId: $ruleId, instrumentationRule: $instrumentationRule) {
+      ruleId
+    }
+  }
+`;
+
+export const DELETE_INSTRUMENTATION_RULE = gql`
+  mutation DeleteInstrumentationRule($ruleId: ID!) {
+    deleteInstrumentationRule(ruleId: $ruleId)
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 7f1fb3986..7c622f7d7 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -52,6 +52,34 @@ export const GET_COMPUTE_PLATFORM = gql`
         type
         spec
       }
+      instrumentationRules {
+        ruleId
+        ruleName
+        notes
+        disabled
+        # workloads {}
+        # instrumentationLibraries {}
+        payloadCollection {
+          httpRequest {
+            mimeTypes
+            maxPayloadLength
+            dropPartialPayloads
+          }
+          httpResponse {
+            mimeTypes
+            maxPayloadLength
+            dropPartialPayloads
+          }
+          dbQuery {
+            maxPayloadLength
+            dropPartialPayloads
+          }
+          messaging {
+            maxPayloadLength
+            dropPartialPayloads
+          }
+        }
+      }
       k8sActualNamespaces {
         name
       }
@@ -60,10 +88,7 @@ export const GET_COMPUTE_PLATFORM = gql`
 `;
 
 export const GET_NAMESPACES = gql`
-  query GetK8sActualNamespace(
-    $namespaceName: String!
-    $instrumentationLabeled: Boolean
-  ) {
+  query GetK8sActualNamespace($namespaceName: String!, $instrumentationLabeled: Boolean) {
     computePlatform {
       k8sActualNamespace(name: $namespaceName) {
         name
diff --git a/frontend/webapp/hooks/instrumentation-rules/index.ts b/frontend/webapp/hooks/instrumentation-rules/index.ts
index 5daec0b4b..7cbf34e7b 100644
--- a/frontend/webapp/hooks/instrumentation-rules/index.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/index.ts
@@ -1 +1,4 @@
 export * from './useInstrumentationRule';
+export * from './useGetInstrumentationRules';
+export * from './useInstrumentationRuleCRUD';
+export * from './useInstrumentationRuleFormData';
diff --git a/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts b/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
new file mode 100644
index 000000000..a09937cd3
--- /dev/null
+++ b/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
@@ -0,0 +1,18 @@
+import { deriveTypeFromRule } from '@/utils/functions/derive-type-from-rule';
+import { useComputePlatform } from '../compute-platform';
+
+export const useGetInstrumentationRules = () => {
+  const { data } = useComputePlatform();
+
+  return {
+    instrumentationRules:
+      data?.computePlatform?.instrumentationRules?.map((item) => {
+        const type = deriveTypeFromRule(item);
+
+        return {
+          ...item,
+          type,
+        };
+      }) || [],
+  };
+};
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
new file mode 100644
index 000000000..28c9f65bb
--- /dev/null
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
@@ -0,0 +1,54 @@
+import { useDrawerStore } from '@/store';
+import { useNotify } from '../useNotify';
+import { useMutation } from '@apollo/client';
+import type { InstrumentationRuleInput } from '@/types';
+import { useComputePlatform } from '../compute-platform';
+import { CREATE_INSTRUMENTATION_RULE, UPDATE_INSTRUMENTATION_RULE, DELETE_INSTRUMENTATION_RULE } from '@/graphql/mutations';
+
+interface Params {
+  onSuccess?: () => void;
+  onError?: () => void;
+}
+
+export const useInstrumentationRuleCRUD = (params?: Params) => {
+  const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
+  const { refetch } = useComputePlatform();
+  const notify = useNotify();
+
+  const notifyUser = (title: string, message: string, type: 'error' | 'success') => {
+    notify({ title, message, type, target: 'notification', crdType: 'notification' });
+  };
+
+  const handleError = (title: string, message: string) => {
+    notifyUser(title, message, 'error');
+    params?.onError?.();
+  };
+
+  const handleComplete = (title: string, message: string) => {
+    notifyUser(title, message, 'success');
+    setDrawerItem(null);
+    refetch();
+    params?.onSuccess?.();
+  };
+
+  const [createInstrumentationRule, cState] = useMutation(CREATE_INSTRUMENTATION_RULE, {
+    onError: (error) => handleError('Create Rule', error.message),
+    onCompleted: () => handleComplete('Create Rule', 'successfully created'),
+  });
+  const [updateInstrumentationRule, uState] = useMutation(UPDATE_INSTRUMENTATION_RULE, {
+    onError: (error) => handleError('Update Rule', error.message),
+    onCompleted: () => handleComplete('Update Rule', 'successfully updated'),
+  });
+  const [deleteInstrumentationRule, dState] = useMutation(DELETE_INSTRUMENTATION_RULE, {
+    onError: (error) => handleError('Delete Rule', error.message),
+    onCompleted: () => handleComplete('Delete Rule', 'successfully deleted'),
+  });
+
+  return {
+    loading: cState.loading || uState.loading || dState.loading,
+    createInstrumentationRule: (instrumentationRule: InstrumentationRuleInput) => createInstrumentationRule({ variables: { instrumentationRule } }),
+    updateInstrumentationRule: (ruleId: string, instrumentationRule: InstrumentationRuleInput) =>
+      updateInstrumentationRule({ variables: { ruleId, instrumentationRule } }),
+    deleteInstrumentationRule: (ruleId: string) => deleteInstrumentationRule({ variables: { ruleId } }),
+  };
+};
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
new file mode 100644
index 000000000..7dfa31b5c
--- /dev/null
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import type { DrawerBaseItem } from '@/store';
+import { PayloadCollectionType, type InstrumentationRuleInput, type InstrumentationRuleSpec } from '@/types';
+
+const INITIAL: InstrumentationRuleInput = {
+  ruleName: '',
+  notes: '',
+  disabled: false,
+  workloads: null,
+  instrumentationLibraries: null,
+  payloadCollection: {
+    [PayloadCollectionType.HTTP_REQUEST]: null,
+    [PayloadCollectionType.HTTP_RESPONSE]: null,
+    [PayloadCollectionType.DB_QUERY]: null,
+    [PayloadCollectionType.MESSAGING]: null,
+  },
+};
+
+export function useInstrumentationRuleFormData() {
+  const [formData, setFormData] = useState({ ...INITIAL });
+
+  const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      [key]: val,
+    }));
+  };
+
+  const resetFormData = () => {
+    setFormData({ ...INITIAL });
+  };
+
+  const validateForm = () => {
+    let ok = true;
+
+    Object.entries(formData).forEach(([k, v]) => {
+      switch (k) {
+        case 'payloadCollection':
+          const hasNoneSelected = !Object.values(v as InstrumentationRuleInput['payloadCollection']).filter((val) => !!val).length;
+          ok = !hasNoneSelected;
+          break;
+
+        default:
+          break;
+      }
+    });
+
+    return ok;
+  };
+
+  const loadFormWithDrawerItem = (drawerItem: DrawerBaseItem) => {
+    const { ruleName, notes, disabled, payloadCollection } = drawerItem.item as InstrumentationRuleSpec;
+
+    const updatedData: InstrumentationRuleInput = {
+      ...INITIAL,
+      ruleName,
+      notes,
+      disabled,
+    };
+
+    if (payloadCollection) {
+      updatedData['payloadCollection'] = {
+        [PayloadCollectionType.HTTP_REQUEST]: !!payloadCollection[PayloadCollectionType.HTTP_REQUEST] ? {} : null,
+        [PayloadCollectionType.HTTP_RESPONSE]: !!payloadCollection[PayloadCollectionType.HTTP_RESPONSE] ? {} : null,
+        [PayloadCollectionType.DB_QUERY]: !!payloadCollection[PayloadCollectionType.DB_QUERY] ? {} : null,
+        [PayloadCollectionType.MESSAGING]: !!payloadCollection[PayloadCollectionType.MESSAGING] ? {} : null,
+      };
+    }
+
+    setFormData(updatedData);
+  };
+
+  return {
+    formData,
+    handleFormChange,
+    resetFormData,
+    validateForm,
+    loadFormWithDrawerItem,
+  };
+}
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
index 697a9b906..cc5801584 100644
--- a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
+++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -1,15 +1,10 @@
 // src/hooks/useNodeDataFlowHandlers.ts
 import { useCallback } from 'react';
 import { useDrawerStore, useModalStore } from '@/store';
-import { K8sActualSource, ActualDestination, ActionDataParsed, OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES } from '@/types';
+import { K8sActualSource, ActualDestination, ActionDataParsed, OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, InstrumentationRuleSpec } from '@/types';
 
-export function useNodeDataFlowHandlers({
-  rules,
-  sources,
-  actions,
-  destinations,
-}: {
-  rules: any[];
+export function useNodeDataFlowHandlers(params: {
+  rules: InstrumentationRuleSpec[];
   sources: K8sActualSource[];
   actions: ActionDataParsed[];
   destinations: ActualDestination[];
@@ -18,13 +13,23 @@ export function useNodeDataFlowHandlers({
   const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
   const handleNodeClick = useCallback(
-    (_, object: any) => {
+    (
+      _,
+      object: {
+        type: string;
+        id: string;
+        position: { x: number; y: number };
+        data: Record<string, any>;
+      }
+    ) => {
       const {
         data: { id, type },
       } = object;
 
       if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
-        const selectedDrawerItem = sources.find(({ kind, name, namespace }) => kind === id.kind && name === id.name && namespace === id.namespace);
+        const selectedDrawerItem = params['sources'].find(
+          ({ kind, name, namespace }) => kind === id.kind && name === id.name && namespace === id.namespace
+        );
         if (!selectedDrawerItem) return;
 
         const { kind, name, namespace } = selectedDrawerItem;
@@ -34,17 +39,8 @@ export function useNodeDataFlowHandlers({
           type,
           item: selectedDrawerItem,
         });
-      } else if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
-        const selectedDrawerItem = actions.find((action) => action.id === id);
-        if (!selectedDrawerItem) return;
-
-        setSelectedItem({
-          id,
-          type,
-          item: selectedDrawerItem,
-        });
-      } else if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
-        const selectedDrawerItem = destinations.find((destination) => destination.id === id);
+      } else if ([OVERVIEW_ENTITY_TYPES.RULE, OVERVIEW_ENTITY_TYPES.ACTION, OVERVIEW_ENTITY_TYPES.DESTINATION].includes(type)) {
+        const selectedDrawerItem = params[`${type}s`].find((item) => id && [item.id, item.ruleId].includes(id));
         if (!selectedDrawerItem) return;
 
         setSelectedItem({
@@ -62,7 +58,7 @@ export function useNodeDataFlowHandlers({
         setCurrentModal(OVERVIEW_ENTITY_TYPES.DESTINATION);
       }
     },
-    [sources, actions, destinations, setSelectedItem]
+    [params, setSelectedItem, setCurrentModal]
   );
 
   return {
diff --git a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
index f700cc99b..8381da6fd 100644
--- a/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
+++ b/frontend/webapp/reuseable-components/auto-complete-input/index.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { Text } from '../text';
 import styled from 'styled-components';
-import React, { useState, ChangeEvent, KeyboardEvent, FC, useEffect } from 'react';
+import React, { useState, ChangeEvent, KeyboardEvent, FC } from 'react';
 
 export interface Option {
   id: string;
@@ -15,8 +15,9 @@ interface AutocompleteInputProps {
   options: Option[];
   placeholder?: string;
   selectedOption?: Option;
-  onOptionSelect?: (option: Option) => void;
+  onOptionSelect?: (option?: Option) => void;
   style?: React.CSSProperties;
+  disabled?: boolean;
 }
 
 const filterOptions = (optionsList: Option[], input: string): Option[] => {
@@ -33,40 +34,35 @@ const filterOptions = (optionsList: Option[], input: string): Option[] => {
   }, []);
 };
 
-const AutocompleteInput: FC<AutocompleteInputProps> = ({ placeholder = 'Type to search...', options, selectedOption, onOptionSelect, style }) => {
-  const [query, setQuery] = useState('');
-  const [icon, setIcon] = useState('');
+const AutocompleteInput: FC<AutocompleteInputProps> = ({
+  placeholder = 'Type to search...',
+  options,
+  selectedOption,
+  onOptionSelect,
+  style,
+  disabled,
+}) => {
+  const [query, setQuery] = useState(selectedOption?.label || '');
+  const [icon, setIcon] = useState(selectedOption?.icon || '');
   const [filteredOptions, setFilteredOptions] = useState<Option[]>(filterOptions(options, ''));
   const [showOptions, setShowOptions] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
 
-  useEffect(() => {
-    if (!!selectedOption && !query) {
-      setQuery(selectedOption.label);
-      setIcon(selectedOption.icon || '');
-    }
-  }, [selectedOption, query]);
-
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const input = e.target.value;
+    const filtered = filterOptions(options, input);
+    const matched = filtered.length === 1 && filtered[0].label === input ? filtered[0] : undefined;
+
     setQuery(input);
-    setIcon('');
-    if (input) {
-      const filtered = filterOptions(options, input);
-      setFilteredOptions(filtered);
-      setShowOptions(true);
-    } else {
-      setShowOptions(false);
-    }
+    setFilteredOptions(filtered);
+    handleOptionClick(matched);
   };
 
-  const handleOptionClick = (option: Option) => {
-    setIcon(option.icon || '');
-    setQuery(option.label);
-    setShowOptions(false);
-    if (onOptionSelect) {
-      onOptionSelect(option);
-    }
+  const handleOptionClick = (option?: Option) => {
+    if (!!option) setQuery(option.label);
+    setIcon(option?.icon || '');
+    setShowOptions(!option);
+    onOptionSelect?.(option);
   };
 
   const flattenOptions = (options: Option[]): Option[] => {
@@ -102,8 +98,9 @@ const AutocompleteInput: FC<AutocompleteInputProps> = ({ placeholder = 'Type to
           placeholder={placeholder}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
-          onBlur={() => setShowOptions(false)}
-          onFocus={() => setShowOptions(true)}
+          disabled={disabled}
+          onBlur={() => !disabled && setShowOptions(false)}
+          onFocus={() => !disabled && setShowOptions(true)}
         />
       </InputWrapper>
 
@@ -203,7 +200,6 @@ const StyledInput = styled.input`
   }
 
   &:disabled {
-    background-color: #555;
     cursor: not-allowed;
   }
 `;
diff --git a/frontend/webapp/reuseable-components/checkbox/index.tsx b/frontend/webapp/reuseable-components/checkbox/index.tsx
index 13f05adb1..8d758ce1c 100644
--- a/frontend/webapp/reuseable-components/checkbox/index.tsx
+++ b/frontend/webapp/reuseable-components/checkbox/index.tsx
@@ -3,6 +3,7 @@ import { Text } from '../text';
 import { Tooltip } from '../tooltip';
 import styled from 'styled-components';
 import React, { useEffect, useState } from 'react';
+import theme from '@/styles/theme';
 
 interface CheckboxProps {
   title?: string;
@@ -55,8 +56,11 @@ const Checkbox: React.FC<CheckboxProps> = ({ title, tooltip, initialValue = fals
       <CheckboxWrapper isChecked={isChecked} disabled={disabled}>
         {isChecked && <Image src='/icons/common/check.svg' alt='' width={12} height={12} />}
       </CheckboxWrapper>
-
-      {title && <Text size={14}>{title}</Text>}
+      {title && (
+        <Text size={12} color={theme.text.grey}>
+          {title}
+        </Text>
+      )}
       {tooltip && (
         <Tooltip text={tooltip || ''}>
           <Image src='/icons/common/info.svg' alt='' width={16} height={16} />
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index aaa72679a..0172e7c88 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -10,6 +10,7 @@ export * from './counter';
 export * from './toggle';
 export * from './checkbox';
 export * from './modal';
+export * from './modal/styled';
 export * from './navigation-buttons';
 export * from './tag';
 export * from './checkbox-list';
diff --git a/frontend/webapp/reuseable-components/modal/styled.ts b/frontend/webapp/reuseable-components/modal/styled.ts
new file mode 100644
index 000000000..eb962dc3c
--- /dev/null
+++ b/frontend/webapp/reuseable-components/modal/styled.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const ModalContent = styled.section`
+  width: 100%;
+  max-width: 640px;
+  height: 640px;
+  margin: 0 15vw;
+  padding: 64px 12px 0 12px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+`;
+
+export const Center = styled.div`
+  width: 100%;
+  margin-top: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index b8c78ce2b..38d24702b 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,5 +1,5 @@
 import theme from '@/styles/theme';
-import { getActionIcon } from '@/utils';
+import { getActionIcon, INSTRUMENTATION_RULES } from '@/utils';
 import { Node, Edge } from 'react-flow-renderer';
 import { getRuleIcon } from '@/utils/functions';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
@@ -7,10 +7,12 @@ import {
   OVERVIEW_ENTITY_TYPES,
   OVERVIEW_NODE_TYPES,
   STATUSES,
+  type InstrumentationRuleSpec,
   type ActionData,
   type ActionItem,
   type ActualDestination,
   type K8sActualSource,
+  InstrumentationRuleType,
 } from '@/types';
 
 // Constants
@@ -48,7 +50,7 @@ export const buildNodesAndEdges = ({
   columnWidth,
   containerWidth,
 }: {
-  rules: any[];
+  rules: InstrumentationRuleSpec[];
   sources: K8sActualSource[];
   actions: ActionData[];
   destinations: ActualDestination[];
@@ -81,13 +83,13 @@ export const buildNodesAndEdges = ({
         ]
       : rules.map((rule, index) =>
           createNode(`rule-${index}`, 'base', columnPostions['rules'], NODE_HEIGHT * (index + 1), {
-            id: rule.id,
+            id: rule.ruleId,
             type: OVERVIEW_ENTITY_TYPES.RULE,
             status: STATUSES.HEALTHY,
-            title: rule.actionName || rule.type,
+            title: rule.ruleName || rule.type,
             subTitle: rule.type,
             imageUri: getRuleIcon(rule.type),
-            isActive: false,
+            isActive: !rule.disabled,
           })
         )),
   ];
diff --git a/frontend/webapp/store/useDrawerStore.tsx b/frontend/webapp/store/useDrawerStore.tsx
index d8fe3c52c..a4efa3a3e 100644
--- a/frontend/webapp/store/useDrawerStore.tsx
+++ b/frontend/webapp/store/useDrawerStore.tsx
@@ -1,12 +1,12 @@
 // drawerStore.ts
 import { create } from 'zustand';
-import { ActionDataParsed, ActualDestination, K8sActualSource, WorkloadId } from '@/types';
+import type { ActionDataParsed, ActualDestination, InstrumentationRuleSpec, K8sActualSource, OVERVIEW_ENTITY_TYPES, WorkloadId } from '@/types';
 
-type ItemType = 'source' | 'action' | 'destination';
+type ItemType = OVERVIEW_ENTITY_TYPES;
 
 export interface DrawerBaseItem {
   id: string | WorkloadId;
-  item?: K8sActualSource | ActionDataParsed | ActualDestination;
+  item?: InstrumentationRuleSpec | K8sActualSource | ActionDataParsed | ActualDestination;
   type: ItemType;
   // Add common properties here
 }
diff --git a/frontend/webapp/types/compute-platform.ts b/frontend/webapp/types/compute-platform.ts
index b00d6223d..5993d5a3e 100644
--- a/frontend/webapp/types/compute-platform.ts
+++ b/frontend/webapp/types/compute-platform.ts
@@ -1,6 +1,8 @@
 import { ActionData } from './actions';
-import { ActualDestination } from './destinations';
 import { K8sActualSource } from './sources';
+import { ActualDestination } from './destinations';
+import { InstrumentationRuleSpec } from './instrumentation-rules';
+
 export type K8sActualNamespace = {
   name: string;
   k8sActualSources?: K8sActualSource[];
@@ -15,6 +17,7 @@ type ComputePlatformData = {
   actions: ActionData[];
   k8sActualSources: K8sActualSource[];
   destinations: ActualDestination[];
+  instrumentationRules: InstrumentationRuleSpec[];
 };
 
 export type ComputePlatform = {
diff --git a/frontend/webapp/types/instrumentation-rules.ts b/frontend/webapp/types/instrumentation-rules.ts
index 681d87a75..392da25cc 100644
--- a/frontend/webapp/types/instrumentation-rules.ts
+++ b/frontend/webapp/types/instrumentation-rules.ts
@@ -3,6 +3,60 @@ export enum InstrumentationRuleType {
   PAYLOAD_COLLECTION = 'PayloadCollection',
 }
 
+enum SpanKind {
+  Internal = 'Internal',
+  Server = 'Server',
+  Client = 'Client',
+  Producer = 'Producer',
+  Consumer = 'Consumer',
+}
+
+enum ProgrammingLanguage {
+  Unspecified = 'Unspecified',
+  Java = 'Java',
+  Go = 'Go',
+  JavaScript = 'JavaScript',
+  Python = 'Python',
+  DotNet = 'DotNet',
+}
+
+enum K8sResourceKind {
+  Deployment = 'Deployment',
+  DaemonSet = 'DaemonSet',
+  StatefulSet = 'StatefulSet',
+}
+
+interface PayloadCollectionInput {
+  httpRequest: {
+    // mimeTypes: string[];
+    // maxPayloadLength: number;
+    // dropPartialPayloads: boolean;
+  } | null;
+  httpResponse: {
+    // mimeTypes: string[];
+    // maxPayloadLength: number;
+    // dropPartialPayloads: boolean;
+  } | null;
+  dbQuery: {
+    // maxPayloadLength: number;
+    // dropPartialPayloads: boolean;
+  } | null;
+  messaging: {
+    // maxPayloadLength: number;
+    // dropPartialPayloads: boolean;
+  } | null;
+}
+
+export interface InstrumentationRuleInput {
+  ruleName: string;
+  notes: string;
+  disabled: boolean;
+  workloads: PodWorkload[] | null;
+  instrumentationLibraries: InstrumentationLibraryInput[] | null;
+  payloadCollection: PayloadCollectionInput;
+}
+
+// delete this ? (used by old-UI)
 export enum RulesType {
   ADD_METADATA = 'add-metadata',
   ERROR_SAMPLING = 'error-sampling',
@@ -16,12 +70,12 @@ export enum RulesSortType {
   STATUS = 'status',
 }
 
-// Define the types for the Instrumentation Rule Spec
 export interface InstrumentationRuleSpec {
-  ruleId?: string;
+  ruleId: string;
+  type?: InstrumentationRuleType; // does not come from backend, it's derived during GET
   ruleName: string;
-  notes?: string;
-  disabled?: boolean;
+  notes: string;
+  disabled: boolean;
   workloads?: PodWorkload[];
   instrumentationLibraries?: InstrumentationLibraryGlobalId[];
   payloadCollection?: PayloadCollection;
@@ -31,7 +85,7 @@ export interface InstrumentationRuleSpec {
 export interface PodWorkload {
   name: string;
   namespace: string;
-  kind: string;
+  kind: K8sResourceKind;
 }
 
 // Definition of Instrumentation Library Global ID
@@ -40,12 +94,25 @@ export interface InstrumentationLibraryGlobalId {
   library: string;
 }
 
+export interface InstrumentationLibraryInput {
+  name: string;
+  spanKind?: SpanKind;
+  language?: ProgrammingLanguage;
+}
+
+export enum PayloadCollectionType {
+  HTTP_REQUEST = 'httpRequest',
+  HTTP_RESPONSE = 'httpResponse',
+  DB_QUERY = 'dbQuery',
+  MESSAGING = 'messaging',
+}
+
 // Payload Collection Interface for Instrumentation Rules
 export interface PayloadCollection {
-  httpRequest?: HttpPayloadCollection;
-  httpResponse?: HttpPayloadCollection;
-  dbQuery?: DbQueryPayloadCollection;
-  messaging?: MessagingPayloadCollection;
+  [PayloadCollectionType.HTTP_REQUEST]?: HttpPayloadCollection;
+  [PayloadCollectionType.HTTP_RESPONSE]?: HttpPayloadCollection;
+  [PayloadCollectionType.DB_QUERY]?: DbQueryPayloadCollection;
+  [PayloadCollectionType.MESSAGING]?: MessagingPayloadCollection;
 }
 
 // Messaging Payload Collection Interface
diff --git a/frontend/webapp/utils/functions/derive-type-from-rule.ts b/frontend/webapp/utils/functions/derive-type-from-rule.ts
new file mode 100644
index 000000000..643ec601f
--- /dev/null
+++ b/frontend/webapp/utils/functions/derive-type-from-rule.ts
@@ -0,0 +1,11 @@
+import { InstrumentationRuleType, type InstrumentationRuleSpec } from '@/types';
+
+const deriveTypeFromRule = (rule: InstrumentationRuleSpec): InstrumentationRuleType | undefined => {
+  if (rule.payloadCollection) {
+    return InstrumentationRuleType.PAYLOAD_COLLECTION;
+  }
+
+  return undefined;
+};
+
+export { deriveTypeFromRule };
diff --git a/frontend/webapp/utils/functions/get-action-icon.ts b/frontend/webapp/utils/functions/get-action-icon.ts
index a01f5323f..c7f4efa76 100644
--- a/frontend/webapp/utils/functions/get-action-icon.ts
+++ b/frontend/webapp/utils/functions/get-action-icon.ts
@@ -2,7 +2,9 @@ import type { ActionsType } from '@/types';
 
 const ICON_PATH = '/icons/actions/';
 
-export const getActionIcon = (type: ActionsType | 'sampler') => {
+export const getActionIcon = (type?: ActionsType | 'sampler') => {
+  if (!type) return '/brand/odigos-icon.svg';
+
   const typeLowerCased = type.toLowerCase();
   const isSampler = typeLowerCased.includes('sampler');
 
diff --git a/frontend/webapp/utils/functions/get-rule-icon.ts b/frontend/webapp/utils/functions/get-rule-icon.ts
index 3583ca039..893fc395b 100644
--- a/frontend/webapp/utils/functions/get-rule-icon.ts
+++ b/frontend/webapp/utils/functions/get-rule-icon.ts
@@ -2,7 +2,9 @@ import type { InstrumentationRuleType } from '@/types';
 
 const ICON_PATH = '/icons/rules/';
 
-export const getRuleIcon = (type: InstrumentationRuleType) => {
+export const getRuleIcon = (type?: InstrumentationRuleType) => {
+  if (!type) return '/brand/odigos-icon.svg';
+
   const typeLowerCased = type.replaceAll('-', '').toLowerCase();
 
   return `${ICON_PATH}${typeLowerCased}.svg`;

From c270e78446e3eb4ad0042a7e05246ed13fa7d51d Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 3 Nov 2024 10:46:42 +0200
Subject: [PATCH 326/374] [GEN-1616] Add delete destination to gql (#1669)

---
 frontend/graph/generated.go        | 91 ++++++++++++++++++++++++++++++
 frontend/graph/schema.graphqls     |  2 +-
 frontend/graph/schema.resolvers.go | 12 ++++
 3 files changed, 104 insertions(+), 1 deletion(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index aad7a896e..560c25e40 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -252,6 +252,7 @@ type ComplexityRoot struct {
 		CreateInstrumentationRule    func(childComplexity int, instrumentationRule model.InstrumentationRuleInput) int
 		CreateNewDestination         func(childComplexity int, destination model.DestinationInput) int
 		DeleteAction                 func(childComplexity int, id string, actionType string) int
+		DeleteDestination            func(childComplexity int, id string) int
 		DeleteInstrumentationRule    func(childComplexity int, ruleID string) int
 		PersistK8sNamespace          func(childComplexity int, namespace model.PersistNamespaceItemInput) int
 		PersistK8sSources            func(childComplexity int, namespace string, sources []*model.PersistNamespaceSourceInput) int
@@ -361,6 +362,7 @@ type MutationResolver interface {
 	TestConnectionForDestination(ctx context.Context, destination model.DestinationInput) (*model.TestConnectionResponse, error)
 	UpdateK8sActualSource(ctx context.Context, sourceID model.K8sSourceID, patchSourceRequest model.PatchSourceRequestInput) (bool, error)
 	UpdateDestination(ctx context.Context, id string, destination model.DestinationInput) (*model.Destination, error)
+	DeleteDestination(ctx context.Context, id string) (bool, error)
 	CreateAction(ctx context.Context, action model.ActionInput) (model.Action, error)
 	UpdateAction(ctx context.Context, id string, action model.ActionInput) (model.Action, error)
 	DeleteAction(ctx context.Context, id string, actionType string) (bool, error)
@@ -1249,6 +1251,18 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Mutation.DeleteAction(childComplexity, args["id"].(string), args["actionType"].(string)), true
 
+	case "Mutation.deleteDestination":
+		if e.complexity.Mutation.DeleteDestination == nil {
+			break
+		}
+
+		args, err := ec.field_Mutation_deleteDestination_args(context.TODO(), rawArgs)
+		if err != nil {
+			return 0, false
+		}
+
+		return e.complexity.Mutation.DeleteDestination(childComplexity, args["id"].(string)), true
+
 	case "Mutation.deleteInstrumentationRule":
 		if e.complexity.Mutation.DeleteInstrumentationRule == nil {
 			break
@@ -1932,6 +1946,21 @@ func (ec *executionContext) field_Mutation_deleteAction_args(ctx context.Context
 	return args, nil
 }
 
+func (ec *executionContext) field_Mutation_deleteDestination_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
+	var err error
+	args := map[string]interface{}{}
+	var arg0 string
+	if tmp, ok := rawArgs["id"]; ok {
+		ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("id"))
+		arg0, err = ec.unmarshalNID2string(ctx, tmp)
+		if err != nil {
+			return nil, err
+		}
+	}
+	args["id"] = arg0
+	return args, nil
+}
+
 func (ec *executionContext) field_Mutation_deleteInstrumentationRule_args(ctx context.Context, rawArgs map[string]interface{}) (map[string]interface{}, error) {
 	var err error
 	args := map[string]interface{}{}
@@ -7684,6 +7713,61 @@ func (ec *executionContext) fieldContext_Mutation_updateDestination(ctx context.
 	return fc, nil
 }
 
+func (ec *executionContext) _Mutation_deleteDestination(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Mutation_deleteDestination(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Mutation().DeleteDestination(rctx, fc.Args["id"].(string))
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Mutation_deleteDestination(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Mutation",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	defer func() {
+		if r := recover(); r != nil {
+			err = ec.Recover(ctx, r)
+			ec.Error(ctx, err)
+		}
+	}()
+	ctx = graphql.WithFieldContext(ctx, fc)
+	if fc.Args, err = ec.field_Mutation_deleteDestination_args(ctx, field.ArgumentMap(ec.Variables)); err != nil {
+		ec.Error(ctx, err)
+		return fc, err
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Mutation_createAction(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Mutation_createAction(ctx, field)
 	if err != nil {
@@ -14470,6 +14554,13 @@ func (ec *executionContext) _Mutation(ctx context.Context, sel ast.SelectionSet)
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "deleteDestination":
+			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
+				return ec._Mutation_deleteDestination(ctx, field)
+			})
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		case "createAction":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
 				return ec._Mutation_createAction(ctx, field)
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index 2e78804bd..dfb5d7a12 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -448,7 +448,7 @@ type Mutation {
     patchSourceRequest: PatchSourceRequestInput!
   ): Boolean!
   updateDestination(id: ID!, destination: DestinationInput!): Destination!
-
+  deleteDestination(id: ID!): Boolean!
   createAction(action: ActionInput!): Action!
   updateAction(id: ID!, action: ActionInput!): Action!
   deleteAction(id: ID!, actionType: String!): Boolean!
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index f213dd5e1..4861299e0 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -559,6 +559,18 @@ func (r *mutationResolver) UpdateDestination(ctx context.Context, id string, des
 	return &resp, nil
 }
 
+// DeleteDestination is the resolver for the deleteDestination field.
+func (r *mutationResolver) DeleteDestination(ctx context.Context, id string) (bool, error) {
+	odigosns := consts.DefaultOdigosNamespace
+	err := kube.DefaultClient.OdigosClient.Destinations(odigosns).Delete(ctx, id, metav1.DeleteOptions{})
+
+	if err != nil {
+		return false, fmt.Errorf("failed to delete destination: %w", err)
+	}
+
+	return true, nil
+}
+
 // CreateAction is the resolver for the createAction field.
 func (r *mutationResolver) CreateAction(ctx context.Context, action model.ActionInput) (model.Action, error) {
 	switch action.Type {

From 9358337d5900a78b53d1e866952c2e98381f5c66 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 3 Nov 2024 10:51:21 +0200
Subject: [PATCH 327/374] [GEN-1601]: refetch after create/update destination
 (#1668)

---
 .../connect-destination-modal-body/index.tsx  | 85 +++++--------------
 .../destinations/useUpdateDestination.ts      | 17 ++--
 2 files changed, 30 insertions(+), 72 deletions(-)

diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
index e1954ce8e..b105c14c5 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/index.tsx
@@ -9,19 +9,8 @@ import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
 import { Body, Container, SideMenuWrapper } from '../styled';
 import { Divider, SectionTitle } from '@/reuseable-components';
 import { ConnectionNotification } from './connection-notification';
-import {
-  useConnectDestinationForm,
-  useConnectEnv,
-  useDestinationFormData,
-  useEditDestinationFormHandlers,
-} from '@/hooks';
-import {
-  StepProps,
-  DestinationInput,
-  DestinationTypeItem,
-  DestinationDetailsResponse,
-  ConfiguredDestination,
-} from '@/types';
+import { useComputePlatform, useConnectDestinationForm, useConnectEnv, useDestinationFormData, useEditDestinationFormHandlers } from '@/hooks';
+import { StepProps, DestinationInput, DestinationTypeItem, DestinationDetailsResponse, ConfiguredDestination } from '@/types';
 
 const SIDE_MENU_DATA: StepProps[] = [
   {
@@ -42,38 +31,24 @@ interface ConnectDestinationModalBodyProps {
   onFormValidChange: (isValid: boolean) => void;
 }
 
-export function ConnectDestinationModalBody({
-  destination,
-  onSubmitRef,
-  onFormValidChange,
-}: ConnectDestinationModalBodyProps) {
+export function ConnectDestinationModalBody({ destination, onSubmitRef, onFormValidChange }: ConnectDestinationModalBodyProps) {
   const [destinationName, setDestinationName] = useState<string>('');
   const [showConnectionError, setShowConnectionError] = useState(false);
 
-  const {
-    dynamicFields,
-    exportedSignals,
-    setDynamicFields,
-    setExportedSignals,
-  } = useDestinationFormData();
+  const { dynamicFields, exportedSignals, setDynamicFields, setExportedSignals } = useDestinationFormData();
 
   const { connectEnv } = useConnectEnv();
+  const { refetch } = useComputePlatform();
   const { buildFormDynamicFields } = useConnectDestinationForm();
 
-  const { handleDynamicFieldChange, handleSignalChange } =
-    useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
+  const { handleDynamicFieldChange, handleSignalChange } = useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
 
-  const addConfiguredDestination = useAppStore(
-    ({ addConfiguredDestination }) => addConfiguredDestination
-  );
+  const addConfiguredDestination = useAppStore(({ addConfiguredDestination }) => addConfiguredDestination);
 
-  const { data } = useQuery<DestinationDetailsResponse>(
-    GET_DESTINATION_TYPE_DETAILS,
-    {
-      variables: { type: destination?.type },
-      skip: !destination,
-    }
-  );
+  const { data } = useQuery<DestinationDetailsResponse>(GET_DESTINATION_TYPE_DETAILS, {
+    variables: { type: destination?.type },
+    skip: !destination,
+  });
 
   useLayoutEffect(() => {
     if (!destination) return;
@@ -109,9 +84,7 @@ export function ConnectDestinationModalBody({
   }, [dynamicFields, destinationName, exportedSignals]);
 
   useEffect(() => {
-    const isFormValid = dynamicFields.every((field) =>
-      field.required ? field.value : true
-    );
+    const isFormValid = dynamicFields.every((field) => (field.required ? field.value : true));
     onFormValidChange(isFormValid);
   }, [dynamicFields]);
 
@@ -131,9 +104,7 @@ export function ConnectDestinationModalBody({
     handleDynamicFieldChange(name, value);
   }
   function processFieldValue(field) {
-    return field.componentType === INPUT_TYPES.DROPDOWN
-      ? field.value.value
-      : field.value;
+    return field.componentType === INPUT_TYPES.DROPDOWN ? field.value.value : field.value;
   }
 
   function processFormFields() {
@@ -185,17 +156,16 @@ export function ConnectDestinationModalBody({
 
     try {
       // Await connection and store the configured destination if successful
-      await connectEnv(body, storeConfiguredDestination);
+      // await connectEnv(body, storeConfiguredDestination);
+      await connectEnv(body, refetch);
     } catch (error) {
       console.error('Failed to submit destination configuration:', error);
       // Handle error (e.g., show notification or alert)
     }
   }
 
-  if (!destination) return null;
-
   const actionButton = useMemo(() => {
-    if (destination.testConnectionSupported) {
+    if (!!destination?.testConnectionSupported) {
       return (
         <TestConnection
           onError={() => {
@@ -212,13 +182,9 @@ export function ConnectDestinationModalBody({
       );
     }
     return null;
-  }, [
-    destination,
-    destinationName,
-    exportedSignals,
-    processFormFields,
-    onFormValidChange,
-  ]);
+  }, [destination, destinationName, exportedSignals, processFormFields, onFormValidChange]);
+
+  if (!destination) return null;
 
   return (
     <Container>
@@ -227,16 +193,9 @@ export function ConnectDestinationModalBody({
       </SideMenuWrapper>
 
       <Body>
-        <SectionTitle
-          title="Create connection"
-          description="Connect selected destination with Odigos."
-          actionButton={actionButton}
-        />
-        <ConnectionNotification
-          showConnectionError={showConnectionError}
-          destination={destination}
-        />
-        <Divider margin="24px 0" />
+        <SectionTitle title='Create connection' description='Connect selected destination with Odigos.' actionButton={actionButton} />
+        <ConnectionNotification showConnectionError={showConnectionError} destination={destination} />
+        <Divider margin='24px 0' />
         <FormContainer
           monitors={monitors}
           dynamicFields={dynamicFields}
diff --git a/frontend/webapp/hooks/destinations/useUpdateDestination.ts b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
index d060dc42e..4970a940c 100644
--- a/frontend/webapp/hooks/destinations/useUpdateDestination.ts
+++ b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
@@ -4,24 +4,23 @@ import { UPDATE_DESTINATION } from '@/graphql';
 import { useDrawerStore } from '@/store';
 import { DestinationInput } from '@/types';
 import { useMutation } from '@apollo/client';
+import { useComputePlatform } from '../compute-platform';
 
 export function useUpdateDestination() {
   const [updateDestinationMutation] = useMutation(UPDATE_DESTINATION);
 
-  const setDrawerItem = useDrawerStore(
-    ({ setSelectedItem }) => setSelectedItem
-  );
+  const setDrawerItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
+  const { refetch } = useComputePlatform();
 
-  async function updateExistingDestination(
-    id: string,
-    destination: DestinationInput
-  ) {
+  async function updateExistingDestination(id: string, destination: DestinationInput) {
     try {
       const { data } = await updateDestinationMutation({
         variables: { id, destination },
       });
-      setDrawerItem({ id, item: data?.updateDestination, type: 'destination' });
-      console.log({ data });
+
+      setDrawerItem(null);
+      refetch();
+
       return data?.updateDestination?.id;
     } catch (error) {
       console.error('Error updating destination:', error);

From 08eacfe520910b7518e023b19fddce18dbb16772 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 3 Nov 2024 11:32:18 +0200
Subject: [PATCH 328/374] [GEN-1581]: lists auto-focus & disable delete (#1670)

---
 .../field-label/index.tsx                     |  4 ++--
 .../reuseable-components/input-list/index.tsx | 18 +++++++--------
 .../input-table/index.tsx                     | 23 ++++++++++---------
 .../key-value-input-list/index.tsx            | 18 +++++++++++----
 4 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/frontend/webapp/reuseable-components/field-label/index.tsx b/frontend/webapp/reuseable-components/field-label/index.tsx
index 93eb60663..504518c30 100644
--- a/frontend/webapp/reuseable-components/field-label/index.tsx
+++ b/frontend/webapp/reuseable-components/field-label/index.tsx
@@ -26,11 +26,11 @@ const OptionalText = styled(Text)`
   opacity: 0.8;
 `;
 
-const FieldLabel = ({ title, required, tooltip }: { title?: string; required?: boolean; tooltip?: string }) => {
+const FieldLabel = ({ title, required, tooltip, style }: { title?: string; required?: boolean; tooltip?: string; style?: React.CSSProperties }) => {
   if (!title) return null;
 
   return (
-    <Wrapper>
+    <Wrapper style={style}>
       <Title>{title}</Title>
       {!required && <OptionalText>(optional)</OptionalText>}
       {tooltip && (
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index f36dad131..0032e67a3 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -31,7 +31,8 @@ const InputRow = styled.div`
 const DeleteButton = styled.button`
   background: none;
   border: none;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `;
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
@@ -78,11 +79,7 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
   }, [inputs, onChange]);
 
   const handleAddInput = () => {
-    setInputs((prev) => {
-      const payload = [...prev];
-      payload.push('');
-      return payload;
-    });
+    setInputs((prev) => [...prev, '']);
   };
 
   const handleDeleteInput = (idx: number) => {
@@ -99,15 +96,16 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
 
   // Check if any input field is empty
   const isAddButtonDisabled = inputs.some((input) => input.trim() === '');
+  const isDelButtonDisabled = inputs.length <= 1;
 
   return (
     <Container>
       <FieldLabel title={title} required={required} tooltip={tooltip} />
 
-      {inputs.map((value, index) => (
-        <InputRow key={index}>
-          <Input value={value} onChange={(e) => handleInputChange(e.target.value, index)} />
-          <DeleteButton onClick={() => handleDeleteInput(index)}>
+      {inputs.map((val, idx) => (
+        <InputRow key={`input-list-${idx}`}>
+          <Input value={val} onChange={(e) => handleInputChange(e.target.value, idx)} autoFocus={inputs.length > 1 && idx === inputs.length - 1} />
+          <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteInput(idx)}>
             <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </InputRow>
diff --git a/frontend/webapp/reuseable-components/input-table/index.tsx b/frontend/webapp/reuseable-components/input-table/index.tsx
index c55e9715f..e71ebea6a 100644
--- a/frontend/webapp/reuseable-components/input-table/index.tsx
+++ b/frontend/webapp/reuseable-components/input-table/index.tsx
@@ -30,6 +30,8 @@ const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `;
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
@@ -100,6 +102,7 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
 
   // Check if any key or value field is empty
   const isAddButtonDisabled = rows.some((row) => !!Object.values(row).filter((val) => !val).length);
+  const isDelButtonDisabled = rows.length <= 1;
 
   // adjust cell-width based on the amount of inputs on-screen,
   // the "0.4" is to consider the delete button
@@ -107,12 +110,12 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
 
   return (
     <Container>
-      <table style={{ marginBottom: '12px' }}>
+      <table style={{ marginBottom: '12px', borderCollapse: 'collapse' }}>
         <thead>
           <tr>
             {columns.map(({ title, tooltip, required }) => (
-              <th key={`input-table-head-${title}`} style={{ maxWidth }}>
-                <FieldLabel title={title} required={required} tooltip={tooltip} />
+              <th key={`input-table-head-${title}`} style={{ maxWidth, paddingLeft: 10 }}>
+                <FieldLabel title={title} required={required} tooltip={tooltip} style={{ marginBottom: 0 }} />
               </th>
             ))}
 
@@ -123,23 +126,21 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
         <tbody>
           {rows.map((row, idx) => (
             <tr key={`input-table-row-${idx}`} style={{ height: '50px' }}>
-              {columns.map(({ type, keyName, placeholder }) => (
-                <td key={`input-table-row-${idx}-${keyName}`} style={{ maxWidth, padding: '0 2px' }}>
+              {columns.map(({ type, keyName, placeholder }, innerIdx) => (
+                <td key={`input-table-${idx}-${keyName}`} style={{ maxWidth, padding: '0 2px' }}>
                   <Input
                     type={type}
+                    placeholder={placeholder}
                     value={row[keyName]}
                     onChange={({ target: { value: val } }) => handleChange(keyName, type === 'number' ? Number(val) : val, idx)}
-                    placeholder={placeholder}
-                    style={{
-                      maxWidth,
-                      paddingLeft: '6px',
-                    }}
+                    autoFocus={rows.length > 1 && idx === rows.length - 1 && innerIdx === 0}
+                    style={{ maxWidth, paddingLeft: 10 }}
                   />
                 </td>
               ))}
 
               <td>
-                <DeleteButton onClick={() => handleDeleteRow(idx)}>
+                <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteRow(idx)}>
                   <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
                 </DeleteButton>
               </td>
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index dfe6f1afc..2ed812ce7 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -32,6 +32,8 @@ const DeleteButton = styled.button`
   background: none;
   border: none;
   cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
 `;
 
 const AddButton = styled(Button)<{ disabled: boolean }>`
@@ -106,17 +108,23 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
 
   // Check if any key or value field is empty
   const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '');
+  const isDelButtonDisabled = keyValuePairs.length <= 1;
 
   return (
     <Container>
       <FieldLabel title={title} required={required} tooltip={tooltip} />
 
-      {keyValuePairs.map((pair, index) => (
-        <Row key={`key-value-pair-${title}-${index}`}>
-          <Input value={pair.key} onChange={(e) => handleChange('key', e.target.value, index)} placeholder='Define attribute' />
+      {keyValuePairs.map((pair, idx) => (
+        <Row key={`key-value-input-list-${idx}`}>
+          <Input
+            placeholder='Define attribute'
+            value={pair.key}
+            onChange={(e) => handleChange('key', e.target.value, idx)}
+            autoFocus={keyValuePairs.length > 1 && idx === keyValuePairs.length - 1}
+          />
           <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
-          <Input value={pair.value} onChange={(e) => handleChange('value', e.target.value, index)} placeholder='Define value' />
-          <DeleteButton onClick={() => handleDeleteRow(index)}>
+          <Input placeholder='Define value' value={pair.value} onChange={(e) => handleChange('value', e.target.value, idx)} />
+          <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteRow(idx)}>
             <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
         </Row>

From 240730f7f6e80698b98266ab27df80979aec78f3 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 3 Nov 2024 13:33:53 +0200
Subject: [PATCH 329/374] [GEN-1613]: delete destination (#1672)

---
 .../main/overview/overview-drawer/index.tsx   | 12 +++--
 .../webapp/graphql/mutations/destination.ts   | 29 +++-------
 .../webapp/hooks/actions/useActionCRUD.ts     |  6 +--
 frontend/webapp/hooks/destinations/index.ts   |  3 +-
 .../destinations/useCreateDestination.ts      | 21 --------
 .../hooks/destinations/useDestinationCRUD.ts  | 53 +++++++++++++++++++
 .../destinations/useUpdateDestination.ts      | 32 -----------
 .../useInstrumentationRuleCRUD.ts             |  6 +--
 frontend/webapp/hooks/setup/useConnectEnv.ts  | 26 +++------
 9 files changed, 81 insertions(+), 107 deletions(-)
 delete mode 100644 frontend/webapp/hooks/destinations/useCreateDestination.ts
 create mode 100644 frontend/webapp/hooks/destinations/useDestinationCRUD.ts
 delete mode 100644 frontend/webapp/hooks/destinations/useUpdateDestination.ts

diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 64619ce36..6fc795165 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -10,7 +10,7 @@ import { DeleteEntityModal } from '@/components';
 import { ActionDrawer, type ActionDrawerHandle } from '../../actions';
 import { DestinationDrawer, type DestinationDrawerHandle } from '../../destinations';
 import { RuleDrawer, RuleDrawerHandle } from '../../instrumentation-rules/rule-drawer-container';
-import { useActionCRUD, useActualSources, useInstrumentationRuleCRUD, useUpdateDestination } from '@/hooks';
+import { useActionCRUD, useActualSources, useDestinationCRUD, useInstrumentationRuleCRUD } from '@/hooks';
 import { getMainContainerLanguageLogo, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils/constants/programming-languages';
 import {
   WorkloadId,
@@ -40,7 +40,7 @@ const OverviewDrawer = () => {
   const [title, setTitle] = useState('');
 
   const { updateAction, deleteAction } = useActionCRUD();
-  const { updateExistingDestination } = useUpdateDestination();
+  const { updateDestination, deleteDestination } = useDestinationCRUD();
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
   const { updateInstrumentationRule, deleteInstrumentationRule } = useInstrumentationRuleCRUD();
 
@@ -175,7 +175,7 @@ const OverviewDrawer = () => {
         };
 
         try {
-          await updateExistingDestination(id as string, payload);
+          await updateDestination(id as string, payload);
         } catch (error) {
           console.error('Error updating destination:', error);
         }
@@ -217,7 +217,9 @@ const OverviewDrawer = () => {
     }
 
     if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
-      alert('TODO !');
+      const { id } = item as ActualDestination;
+
+      await deleteDestination(id);
     }
 
     handleClose();
@@ -256,7 +258,7 @@ const OverviewDrawer = () => {
         isModalOpen={isDeleteModalOpen}
         handleDelete={handleDelete}
         handleCloseModal={handleCloseDeleteModal}
-        description='Are you sure you want to delete this source?'
+        description='Are you sure you want to delete this?'
       />
     </>
   ) : null;
diff --git a/frontend/webapp/graphql/mutations/destination.ts b/frontend/webapp/graphql/mutations/destination.ts
index cdce52cfa..f08c76f30 100644
--- a/frontend/webapp/graphql/mutations/destination.ts
+++ b/frontend/webapp/graphql/mutations/destination.ts
@@ -24,29 +24,12 @@ export const UPDATE_DESTINATION = gql`
   mutation UpdateDestination($id: ID!, $destination: DestinationInput!) {
     updateDestination(id: $id, destination: $destination) {
       id
-      name
-      exportedSignals {
-        traces
-        metrics
-        logs
-      }
-      fields
-      destinationType {
-        type
-        displayName
-        imageUrl
-        supportedSignals {
-          traces {
-            supported
-          }
-          metrics {
-            supported
-          }
-          logs {
-            supported
-          }
-        }
-      }
     }
   }
 `;
+
+export const DELETE_DESTINATION = gql`
+  mutation DeleteDestination($id: ID!) {
+    deleteDestination(id: $id)
+  }
+`;
diff --git a/frontend/webapp/hooks/actions/useActionCRUD.ts b/frontend/webapp/hooks/actions/useActionCRUD.ts
index 5bf25fe02..420e5bc7d 100644
--- a/frontend/webapp/hooks/actions/useActionCRUD.ts
+++ b/frontend/webapp/hooks/actions/useActionCRUD.ts
@@ -31,15 +31,15 @@ export const useActionCRUD = (params?: UseActionCrudParams) => {
     params?.onSuccess?.();
   };
 
-  const [createAction, cState] = useMutation(CREATE_ACTION, {
+  const [createAction, cState] = useMutation<{ createAction: { id: string } }>(CREATE_ACTION, {
     onError: (error) => handleError('Create Action', error.message),
     onCompleted: () => handleComplete('Create Action', 'successfully created'),
   });
-  const [updateAction, uState] = useMutation(UPDATE_ACTION, {
+  const [updateAction, uState] = useMutation<{ updateAction: { id: string } }>(UPDATE_ACTION, {
     onError: (error) => handleError('Update Action', error.message),
     onCompleted: () => handleComplete('Update Action', 'successfully updated'),
   });
-  const [deleteAction, dState] = useMutation(DELETE_ACTION, {
+  const [deleteAction, dState] = useMutation<{ deleteAction: boolean }>(DELETE_ACTION, {
     onError: (error) => handleError('Delete Action', error.message),
     onCompleted: () => handleComplete('Delete Action', 'successfully deleted'),
   });
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index 73ea9289f..4677f854d 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -1,10 +1,9 @@
 export * from './useDestinations';
 export * from './useTestConnection';
 export * from './useConnectDestinationForm';
-export * from './useCreateDestination';
 export * from './usePotentialDestinations';
 export * from './useActualDestinations';
-export * from './useUpdateDestination';
+export * from './useDestinationCRUD';
 export * from './useDestinationFormData';
 export * from './useEditDestinationFormHandlers';
 export * from './useDestinationTypes';
diff --git a/frontend/webapp/hooks/destinations/useCreateDestination.ts b/frontend/webapp/hooks/destinations/useCreateDestination.ts
deleted file mode 100644
index 95b9186fa..000000000
--- a/frontend/webapp/hooks/destinations/useCreateDestination.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DestinationInput } from '@/types';
-import { CREATE_DESTINATION } from '@/graphql';
-import { useMutation } from '@apollo/client';
-
-export function useCreateDestination() {
-  const [createDestination] = useMutation(CREATE_DESTINATION);
-
-  async function createNewDestination(destination: DestinationInput) {
-    try {
-      const { data } = await createDestination({
-        variables: { destination },
-      });
-      return data?.createNewDestination?.id;
-    } catch (error) {
-      console.error('Error creating new destination:', error);
-      throw error;
-    }
-  }
-
-  return { createNewDestination };
-}
diff --git a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
new file mode 100644
index 000000000..cfc85146d
--- /dev/null
+++ b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
@@ -0,0 +1,53 @@
+import { useDrawerStore } from '@/store';
+import { useNotify } from '../useNotify';
+import { useMutation } from '@apollo/client';
+import type { DestinationInput } from '@/types';
+import { useComputePlatform } from '../compute-platform';
+import { CREATE_DESTINATION, DELETE_DESTINATION, UPDATE_DESTINATION } from '@/graphql/mutations';
+
+interface Params {
+  onSuccess?: () => void;
+  onError?: () => void;
+}
+
+export const useDestinationCRUD = (params?: Params) => {
+  const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
+  const { refetch } = useComputePlatform();
+  const notify = useNotify();
+
+  const notifyUser = (title: string, message: string, type: 'error' | 'success') => {
+    notify({ title, message, type, target: 'notification', crdType: 'notification' });
+  };
+
+  const handleError = (title: string, message: string) => {
+    notifyUser(title, message, 'error');
+    params?.onError?.();
+  };
+
+  const handleComplete = (title: string, message: string) => {
+    notifyUser(title, message, 'success');
+    setDrawerItem(null);
+    refetch();
+    params?.onSuccess?.();
+  };
+
+  const [createDestination, cState] = useMutation<{ createNewDestination: { id: string } }>(CREATE_DESTINATION, {
+    onError: (error) => handleError('Create Destination', error.message),
+    onCompleted: () => handleComplete('Create Destination', 'successfully created'),
+  });
+  const [updateDestination, uState] = useMutation<{ updateDestination: { id: string } }>(UPDATE_DESTINATION, {
+    onError: (error) => handleError('Update Destination', error.message),
+    onCompleted: () => handleComplete('Update Destination', 'successfully updated'),
+  });
+  const [deleteDestination, dState] = useMutation<{ deleteDestination: boolean }>(DELETE_DESTINATION, {
+    onError: (error) => handleError('Delete Destination', error.message),
+    onCompleted: () => handleComplete('Delete Destination', 'successfully deleted'),
+  });
+
+  return {
+    loading: cState.loading || uState.loading || dState.loading,
+    createDestination: (destination: DestinationInput) => createDestination({ variables: { destination } }),
+    updateDestination: (id: string, destination: DestinationInput) => updateDestination({ variables: { id, destination } }),
+    deleteDestination: (id: string) => deleteDestination({ variables: { id } }),
+  };
+};
diff --git a/frontend/webapp/hooks/destinations/useUpdateDestination.ts b/frontend/webapp/hooks/destinations/useUpdateDestination.ts
deleted file mode 100644
index 4970a940c..000000000
--- a/frontend/webapp/hooks/destinations/useUpdateDestination.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// src/hooks/useUpdateDestination.ts
-
-import { UPDATE_DESTINATION } from '@/graphql';
-import { useDrawerStore } from '@/store';
-import { DestinationInput } from '@/types';
-import { useMutation } from '@apollo/client';
-import { useComputePlatform } from '../compute-platform';
-
-export function useUpdateDestination() {
-  const [updateDestinationMutation] = useMutation(UPDATE_DESTINATION);
-
-  const setDrawerItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
-  const { refetch } = useComputePlatform();
-
-  async function updateExistingDestination(id: string, destination: DestinationInput) {
-    try {
-      const { data } = await updateDestinationMutation({
-        variables: { id, destination },
-      });
-
-      setDrawerItem(null);
-      refetch();
-
-      return data?.updateDestination?.id;
-    } catch (error) {
-      console.error('Error updating destination:', error);
-      throw error;
-    }
-  }
-
-  return { updateExistingDestination };
-}
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
index 28c9f65bb..c47c8cfa2 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
@@ -31,15 +31,15 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
     params?.onSuccess?.();
   };
 
-  const [createInstrumentationRule, cState] = useMutation(CREATE_INSTRUMENTATION_RULE, {
+  const [createInstrumentationRule, cState] = useMutation<{ createInstrumentationRule: { ruleId: string } }>(CREATE_INSTRUMENTATION_RULE, {
     onError: (error) => handleError('Create Rule', error.message),
     onCompleted: () => handleComplete('Create Rule', 'successfully created'),
   });
-  const [updateInstrumentationRule, uState] = useMutation(UPDATE_INSTRUMENTATION_RULE, {
+  const [updateInstrumentationRule, uState] = useMutation<{ updateInstrumentationRule: { ruleId: string } }>(UPDATE_INSTRUMENTATION_RULE, {
     onError: (error) => handleError('Update Rule', error.message),
     onCompleted: () => handleComplete('Update Rule', 'successfully updated'),
   });
-  const [deleteInstrumentationRule, dState] = useMutation(DELETE_INSTRUMENTATION_RULE, {
+  const [deleteInstrumentationRule, dState] = useMutation<{ deleteInstrumentationRule: boolean }>(DELETE_INSTRUMENTATION_RULE, {
     onError: (error) => handleError('Delete Rule', error.message),
     onCompleted: () => handleComplete('Delete Rule', 'successfully deleted'),
   });
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 9206729b9..807895eb1 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -2,7 +2,7 @@ import { useAppStore } from '@/store';
 import { DestinationInput } from '@/types';
 import { useActualSources } from '../sources';
 import { useState, useCallback } from 'react';
-import { useCreateDestination } from '../destinations';
+import { useDestinationCRUD } from '../destinations';
 
 type ConnectEnvResult = {
   success: boolean;
@@ -10,9 +10,8 @@ type ConnectEnvResult = {
 };
 
 export const useConnectEnv = () => {
-  const { createNewDestination } = useCreateDestination();
-  const { createSourcesForNamespace, persistNamespaceItems } =
-    useActualSources();
+  const { createDestination } = useDestinationCRUD();
+  const { createSourcesForNamespace, persistNamespaceItems } = useActualSources();
 
   const [result, setResult] = useState<ConnectEnvResult | null>(null);
   const [loading, setLoading] = useState(false);
@@ -20,9 +19,7 @@ export const useConnectEnv = () => {
 
   const sourcesList = useAppStore((state) => state.sources);
   const resetSources = useAppStore((state) => state.resetSources);
-  const namespaceFutureSelectAppsList = useAppStore(
-    (state) => state.namespaceFutureSelectAppsList
-  );
+  const namespaceFutureSelectAppsList = useAppStore((state) => state.namespaceFutureSelectAppsList);
 
   const connectEnv = useCallback(
     async (destination: DestinationInput, callback?: () => void) => {
@@ -32,9 +29,7 @@ export const useConnectEnv = () => {
 
       try {
         // Persist namespaces based on namespaceFutureSelectAppsList
-        const namespaceItems = Object.entries(
-          namespaceFutureSelectAppsList
-        ).map(([namespaceName, futureSelected]) => ({
+        const namespaceItems = Object.entries(namespaceFutureSelectAppsList).map(([namespaceName, futureSelected]) => ({
           name: namespaceName,
           futureSelected,
         }));
@@ -54,7 +49,8 @@ export const useConnectEnv = () => {
         resetSources();
 
         // Create destination
-        const destinationId = await createNewDestination(destination);
+        const { data } = await createDestination(destination);
+        const destinationId = data?.createNewDestination.id;
 
         if (!destinationId) {
           throw new Error('Error creating destination.');
@@ -73,13 +69,7 @@ export const useConnectEnv = () => {
         setLoading(false);
       }
     },
-    [
-      sourcesList,
-      createNewDestination,
-      persistNamespaceItems,
-      createSourcesForNamespace,
-      namespaceFutureSelectAppsList,
-    ]
+    [sourcesList, createDestination, persistNamespaceItems, createSourcesForNamespace, namespaceFutureSelectAppsList]
   );
 
   return {

From 9748362f6733d614dafd19210e6ba3246a00165d Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 3 Nov 2024 13:58:45 +0200
Subject: [PATCH 330/374] [GEN-1620] Add metrics to gql  (#1675)

---
 frontend/graph/generated.go        | 1038 ++++++++++++++++++++++++++--
 frontend/graph/model/models_gen.go |   19 +
 frontend/graph/resolver.go         |    9 +-
 frontend/graph/schema.graphqls     |   20 +
 frontend/graph/schema.resolvers.go |   35 +
 frontend/main.go                   |    7 +-
 6 files changed, 1058 insertions(+), 70 deletions(-)

diff --git a/frontend/graph/generated.go b/frontend/graph/generated.go
index 560c25e40..84cbb2e83 100644
--- a/frontend/graph/generated.go
+++ b/frontend/graph/generated.go
@@ -267,6 +267,11 @@ type ComplexityRoot struct {
 		Supported func(childComplexity int) int
 	}
 
+	OverviewMetricsResponse struct {
+		Destinations func(childComplexity int) int
+		Sources      func(childComplexity int) int
+	}
+
 	PayloadCollection struct {
 		DbQuery      func(childComplexity int) int
 		HTTPRequest  func(childComplexity int) int
@@ -305,6 +310,7 @@ type ComplexityRoot struct {
 		Config                 func(childComplexity int) int
 		DestinationTypeDetails func(childComplexity int, typeArg string) int
 		DestinationTypes       func(childComplexity int) int
+		GetOverviewMetrics     func(childComplexity int) int
 		PotentialDestinations  func(childComplexity int) int
 	}
 
@@ -318,6 +324,20 @@ type ComplexityRoot struct {
 		Type    func(childComplexity int) int
 	}
 
+	SingleDestinationMetricsResponse struct {
+		ID            func(childComplexity int) int
+		Throughput    func(childComplexity int) int
+		TotalDataSent func(childComplexity int) int
+	}
+
+	SingleSourceMetricsResponse struct {
+		Kind          func(childComplexity int) int
+		Name          func(childComplexity int) int
+		Namespace     func(childComplexity int) int
+		Throughput    func(childComplexity int) int
+		TotalDataSent func(childComplexity int) int
+	}
+
 	SourceContainerRuntimeDetails struct {
 		ContainerName func(childComplexity int) int
 		Language      func(childComplexity int) int
@@ -376,6 +396,7 @@ type QueryResolver interface {
 	DestinationTypes(ctx context.Context) (*model.GetDestinationTypesResponse, error)
 	DestinationTypeDetails(ctx context.Context, typeArg string) (*model.GetDestinationDetailsResponse, error)
 	PotentialDestinations(ctx context.Context) ([]*model.DestinationDetails, error)
+	GetOverviewMetrics(ctx context.Context) (*model.OverviewMetricsResponse, error)
 }
 
 type executableSchema struct {
@@ -1366,6 +1387,20 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.ObservabilitySignalSupport.Supported(childComplexity), true
 
+	case "OverviewMetricsResponse.destinations":
+		if e.complexity.OverviewMetricsResponse.Destinations == nil {
+			break
+		}
+
+		return e.complexity.OverviewMetricsResponse.Destinations(childComplexity), true
+
+	case "OverviewMetricsResponse.sources":
+		if e.complexity.OverviewMetricsResponse.Sources == nil {
+			break
+		}
+
+		return e.complexity.OverviewMetricsResponse.Sources(childComplexity), true
+
 	case "PayloadCollection.dbQuery":
 		if e.complexity.PayloadCollection.DbQuery == nil {
 			break
@@ -1546,6 +1581,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.Query.DestinationTypes(childComplexity), true
 
+	case "Query.getOverviewMetrics":
+		if e.complexity.Query.GetOverviewMetrics == nil {
+			break
+		}
+
+		return e.complexity.Query.GetOverviewMetrics(childComplexity), true
+
 	case "Query.potentialDestinations":
 		if e.complexity.Query.PotentialDestinations == nil {
 			break
@@ -1602,6 +1644,62 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.RenameAttributeAction.Type(childComplexity), true
 
+	case "SingleDestinationMetricsResponse.id":
+		if e.complexity.SingleDestinationMetricsResponse.ID == nil {
+			break
+		}
+
+		return e.complexity.SingleDestinationMetricsResponse.ID(childComplexity), true
+
+	case "SingleDestinationMetricsResponse.throughput":
+		if e.complexity.SingleDestinationMetricsResponse.Throughput == nil {
+			break
+		}
+
+		return e.complexity.SingleDestinationMetricsResponse.Throughput(childComplexity), true
+
+	case "SingleDestinationMetricsResponse.totalDataSent":
+		if e.complexity.SingleDestinationMetricsResponse.TotalDataSent == nil {
+			break
+		}
+
+		return e.complexity.SingleDestinationMetricsResponse.TotalDataSent(childComplexity), true
+
+	case "SingleSourceMetricsResponse.kind":
+		if e.complexity.SingleSourceMetricsResponse.Kind == nil {
+			break
+		}
+
+		return e.complexity.SingleSourceMetricsResponse.Kind(childComplexity), true
+
+	case "SingleSourceMetricsResponse.name":
+		if e.complexity.SingleSourceMetricsResponse.Name == nil {
+			break
+		}
+
+		return e.complexity.SingleSourceMetricsResponse.Name(childComplexity), true
+
+	case "SingleSourceMetricsResponse.namespace":
+		if e.complexity.SingleSourceMetricsResponse.Namespace == nil {
+			break
+		}
+
+		return e.complexity.SingleSourceMetricsResponse.Namespace(childComplexity), true
+
+	case "SingleSourceMetricsResponse.throughput":
+		if e.complexity.SingleSourceMetricsResponse.Throughput == nil {
+			break
+		}
+
+		return e.complexity.SingleSourceMetricsResponse.Throughput(childComplexity), true
+
+	case "SingleSourceMetricsResponse.totalDataSent":
+		if e.complexity.SingleSourceMetricsResponse.TotalDataSent == nil {
+			break
+		}
+
+		return e.complexity.SingleSourceMetricsResponse.TotalDataSent(childComplexity), true
+
 	case "SourceContainerRuntimeDetails.containerName":
 		if e.complexity.SourceContainerRuntimeDetails.ContainerName == nil {
 			break
@@ -8174,6 +8272,114 @@ func (ec *executionContext) fieldContext_ObservabilitySignalSupport_supported(_
 	return fc, nil
 }
 
+func (ec *executionContext) _OverviewMetricsResponse_sources(ctx context.Context, field graphql.CollectedField, obj *model.OverviewMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_OverviewMetricsResponse_sources(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Sources, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.SingleSourceMetricsResponse)
+	fc.Result = res
+	return ec.marshalNSingleSourceMetricsResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSingleSourceMetricsResponseᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_OverviewMetricsResponse_sources(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "OverviewMetricsResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "namespace":
+				return ec.fieldContext_SingleSourceMetricsResponse_namespace(ctx, field)
+			case "kind":
+				return ec.fieldContext_SingleSourceMetricsResponse_kind(ctx, field)
+			case "name":
+				return ec.fieldContext_SingleSourceMetricsResponse_name(ctx, field)
+			case "totalDataSent":
+				return ec.fieldContext_SingleSourceMetricsResponse_totalDataSent(ctx, field)
+			case "throughput":
+				return ec.fieldContext_SingleSourceMetricsResponse_throughput(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SingleSourceMetricsResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _OverviewMetricsResponse_destinations(ctx context.Context, field graphql.CollectedField, obj *model.OverviewMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_OverviewMetricsResponse_destinations(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Destinations, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.([]*model.SingleDestinationMetricsResponse)
+	fc.Result = res
+	return ec.marshalNSingleDestinationMetricsResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSingleDestinationMetricsResponseᚄ(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_OverviewMetricsResponse_destinations(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "OverviewMetricsResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "id":
+				return ec.fieldContext_SingleDestinationMetricsResponse_id(ctx, field)
+			case "totalDataSent":
+				return ec.fieldContext_SingleDestinationMetricsResponse_totalDataSent(ctx, field)
+			case "throughput":
+				return ec.fieldContext_SingleDestinationMetricsResponse_throughput(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type SingleDestinationMetricsResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _PayloadCollection_httpRequest(ctx context.Context, field graphql.CollectedField, obj *model.PayloadCollection) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_PayloadCollection_httpRequest(ctx, field)
 	if err != nil {
@@ -9356,6 +9562,56 @@ func (ec *executionContext) fieldContext_Query_potentialDestinations(_ context.C
 	return fc, nil
 }
 
+func (ec *executionContext) _Query_getOverviewMetrics(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_Query_getOverviewMetrics(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return ec.resolvers.Query().GetOverviewMetrics(rctx)
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(*model.OverviewMetricsResponse)
+	fc.Result = res
+	return ec.marshalNOverviewMetricsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐOverviewMetricsResponse(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_Query_getOverviewMetrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "Query",
+		Field:      field,
+		IsMethod:   true,
+		IsResolver: true,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "sources":
+				return ec.fieldContext_OverviewMetricsResponse_sources(ctx, field)
+			case "destinations":
+				return ec.fieldContext_OverviewMetricsResponse_destinations(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type OverviewMetricsResponse", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _Query___type(ctx context.Context, field graphql.CollectedField) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_Query___type(ctx, field)
 	if err != nil {
@@ -9787,8 +10043,8 @@ func (ec *executionContext) fieldContext_RenameAttributeAction_details(_ context
 	return fc, nil
 }
 
-func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
+func (ec *executionContext) _SingleDestinationMetricsResponse_id(ctx context.Context, field graphql.CollectedField, obj *model.SingleDestinationMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SingleDestinationMetricsResponse_id(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -9801,7 +10057,7 @@ func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx con
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.ContainerName, nil
+		return obj.ID, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -9818,9 +10074,9 @@ func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx con
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SingleDestinationMetricsResponse_id(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SourceContainerRuntimeDetails",
+		Object:     "SingleDestinationMetricsResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -9831,8 +10087,8 @@ func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_container
 	return fc, nil
 }
 
-func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
+func (ec *executionContext) _SingleDestinationMetricsResponse_totalDataSent(ctx context.Context, field graphql.CollectedField, obj *model.SingleDestinationMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SingleDestinationMetricsResponse_totalDataSent(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -9845,7 +10101,7 @@ func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Language, nil
+		return obj.TotalDataSent, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -9857,26 +10113,26 @@ func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.
 		}
 		return graphql.Null
 	}
-	res := resTmp.(string)
+	res := resTmp.(int)
 	fc.Result = res
-	return ec.marshalNString2string(ctx, field.Selections, res)
+	return ec.marshalNInt2int(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SingleDestinationMetricsResponse_totalDataSent(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SourceContainerRuntimeDetails",
+		Object:     "SingleDestinationMetricsResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type String does not have child fields")
+			return nil, errors.New("field of type Int does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _SupportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SupportedSignals_traces(ctx, field)
+func (ec *executionContext) _SingleDestinationMetricsResponse_throughput(ctx context.Context, field graphql.CollectedField, obj *model.SingleDestinationMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SingleDestinationMetricsResponse_throughput(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -9889,7 +10145,7 @@ func (ec *executionContext) _SupportedSignals_traces(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Traces, nil
+		return obj.Throughput, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -9901,30 +10157,26 @@ func (ec *executionContext) _SupportedSignals_traces(ctx context.Context, field
 		}
 		return graphql.Null
 	}
-	res := resTmp.(model.ObservabilitySignalSupport)
+	res := resTmp.(int)
 	fc.Result = res
-	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+	return ec.marshalNInt2int(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SupportedSignals_traces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SingleDestinationMetricsResponse_throughput(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SupportedSignals",
+		Object:     "SingleDestinationMetricsResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "supported":
-				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+			return nil, errors.New("field of type Int does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _SupportedSignals_metrics(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SupportedSignals_metrics(ctx, field)
+func (ec *executionContext) _SingleSourceMetricsResponse_namespace(ctx context.Context, field graphql.CollectedField, obj *model.SingleSourceMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SingleSourceMetricsResponse_namespace(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -9937,7 +10189,7 @@ func (ec *executionContext) _SupportedSignals_metrics(ctx context.Context, field
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Metrics, nil
+		return obj.Namespace, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -9949,30 +10201,26 @@ func (ec *executionContext) _SupportedSignals_metrics(ctx context.Context, field
 		}
 		return graphql.Null
 	}
-	res := resTmp.(model.ObservabilitySignalSupport)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SupportedSignals_metrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SingleSourceMetricsResponse_namespace(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SupportedSignals",
+		Object:     "SingleSourceMetricsResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "supported":
-				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _SupportedSignals_logs(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_SupportedSignals_logs(ctx, field)
+func (ec *executionContext) _SingleSourceMetricsResponse_kind(ctx context.Context, field graphql.CollectedField, obj *model.SingleSourceMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SingleSourceMetricsResponse_kind(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -9985,7 +10233,7 @@ func (ec *executionContext) _SupportedSignals_logs(ctx context.Context, field gr
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Logs, nil
+		return obj.Kind, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -9997,30 +10245,26 @@ func (ec *executionContext) _SupportedSignals_logs(ctx context.Context, field gr
 		}
 		return graphql.Null
 	}
-	res := resTmp.(model.ObservabilitySignalSupport)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_SupportedSignals_logs(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SingleSourceMetricsResponse_kind(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "SupportedSignals",
+		Object:     "SingleSourceMetricsResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			switch field.Name {
-			case "supported":
-				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
-			}
-			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _TestConnectionResponse_succeeded(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_TestConnectionResponse_succeeded(ctx, field)
+func (ec *executionContext) _SingleSourceMetricsResponse_name(ctx context.Context, field graphql.CollectedField, obj *model.SingleSourceMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SingleSourceMetricsResponse_name(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -10033,7 +10277,7 @@ func (ec *executionContext) _TestConnectionResponse_succeeded(ctx context.Contex
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.Succeeded, nil
+		return obj.Name, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -10045,26 +10289,26 @@ func (ec *executionContext) _TestConnectionResponse_succeeded(ctx context.Contex
 		}
 		return graphql.Null
 	}
-	res := resTmp.(bool)
+	res := resTmp.(string)
 	fc.Result = res
-	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_TestConnectionResponse_succeeded(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SingleSourceMetricsResponse_name(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "TestConnectionResponse",
+		Object:     "SingleSourceMetricsResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
 		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
-			return nil, errors.New("field of type Boolean does not have child fields")
+			return nil, errors.New("field of type String does not have child fields")
 		},
 	}
 	return fc, nil
 }
 
-func (ec *executionContext) _TestConnectionResponse_statusCode(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_TestConnectionResponse_statusCode(ctx, field)
+func (ec *executionContext) _SingleSourceMetricsResponse_totalDataSent(ctx context.Context, field graphql.CollectedField, obj *model.SingleSourceMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SingleSourceMetricsResponse_totalDataSent(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -10077,7 +10321,7 @@ func (ec *executionContext) _TestConnectionResponse_statusCode(ctx context.Conte
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.StatusCode, nil
+		return obj.TotalDataSent, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
@@ -10094,9 +10338,9 @@ func (ec *executionContext) _TestConnectionResponse_statusCode(ctx context.Conte
 	return ec.marshalNInt2int(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) fieldContext_TestConnectionResponse_statusCode(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+func (ec *executionContext) fieldContext_SingleSourceMetricsResponse_totalDataSent(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
 	fc = &graphql.FieldContext{
-		Object:     "TestConnectionResponse",
+		Object:     "SingleSourceMetricsResponse",
 		Field:      field,
 		IsMethod:   false,
 		IsResolver: false,
@@ -10107,8 +10351,8 @@ func (ec *executionContext) fieldContext_TestConnectionResponse_statusCode(_ con
 	return fc, nil
 }
 
-func (ec *executionContext) _TestConnectionResponse_destinationType(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
-	fc, err := ec.fieldContext_TestConnectionResponse_destinationType(ctx, field)
+func (ec *executionContext) _SingleSourceMetricsResponse_throughput(ctx context.Context, field graphql.CollectedField, obj *model.SingleSourceMetricsResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SingleSourceMetricsResponse_throughput(ctx, field)
 	if err != nil {
 		return graphql.Null
 	}
@@ -10121,15 +10365,379 @@ func (ec *executionContext) _TestConnectionResponse_destinationType(ctx context.
 	}()
 	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
 		ctx = rctx // use context from middleware stack in children
-		return obj.DestinationType, nil
+		return obj.Throughput, nil
 	})
 	if err != nil {
 		ec.Error(ctx, err)
 		return graphql.Null
 	}
 	if resTmp == nil {
-		return graphql.Null
-	}
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(int)
+	fc.Result = res
+	return ec.marshalNInt2int(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SingleSourceMetricsResponse_throughput(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SingleSourceMetricsResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SourceContainerRuntimeDetails_containerName(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_containerName(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.ContainerName, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_containerName(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SourceContainerRuntimeDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SourceContainerRuntimeDetails_language(ctx context.Context, field graphql.CollectedField, obj *model.SourceContainerRuntimeDetails) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SourceContainerRuntimeDetails_language(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Language, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SourceContainerRuntimeDetails_language(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SourceContainerRuntimeDetails",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type String does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SupportedSignals_traces(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_traces(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Traces, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ObservabilitySignalSupport)
+	fc.Result = res
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SupportedSignals_traces(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SupportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SupportedSignals_metrics(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_metrics(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Metrics, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ObservabilitySignalSupport)
+	fc.Result = res
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SupportedSignals_metrics(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SupportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _SupportedSignals_logs(ctx context.Context, field graphql.CollectedField, obj *model.SupportedSignals) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_SupportedSignals_logs(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Logs, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(model.ObservabilitySignalSupport)
+	fc.Result = res
+	return ec.marshalNObservabilitySignalSupport2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐObservabilitySignalSupport(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_SupportedSignals_logs(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "SupportedSignals",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "supported":
+				return ec.fieldContext_ObservabilitySignalSupport_supported(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type ObservabilitySignalSupport", field.Name)
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_succeeded(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_succeeded(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Succeeded, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(bool)
+	fc.Result = res
+	return ec.marshalNBoolean2bool(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_succeeded(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Boolean does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_statusCode(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_statusCode(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.StatusCode, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(int)
+	fc.Result = res
+	return ec.marshalNInt2int(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_TestConnectionResponse_statusCode(_ context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "TestConnectionResponse",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			return nil, errors.New("field of type Int does not have child fields")
+		},
+	}
+	return fc, nil
+}
+
+func (ec *executionContext) _TestConnectionResponse_destinationType(ctx context.Context, field graphql.CollectedField, obj *model.TestConnectionResponse) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_TestConnectionResponse_destinationType(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.DestinationType, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		return graphql.Null
+	}
 	res := resTmp.(*string)
 	fc.Result = res
 	return ec.marshalOString2ᚖstring(ctx, field.Selections, res)
@@ -14665,6 +15273,50 @@ func (ec *executionContext) _ObservabilitySignalSupport(ctx context.Context, sel
 	return out
 }
 
+var overviewMetricsResponseImplementors = []string{"OverviewMetricsResponse"}
+
+func (ec *executionContext) _OverviewMetricsResponse(ctx context.Context, sel ast.SelectionSet, obj *model.OverviewMetricsResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, overviewMetricsResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("OverviewMetricsResponse")
+		case "sources":
+			out.Values[i] = ec._OverviewMetricsResponse_sources(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "destinations":
+			out.Values[i] = ec._OverviewMetricsResponse_destinations(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var payloadCollectionImplementors = []string{"PayloadCollection"}
 
 func (ec *executionContext) _PayloadCollection(ctx context.Context, sel ast.SelectionSet, obj *model.PayloadCollection) graphql.Marshaler {
@@ -14995,6 +15647,28 @@ func (ec *executionContext) _Query(ctx context.Context, sel ast.SelectionSet) gr
 					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
 			}
 
+			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
+		case "getOverviewMetrics":
+			field := field
+
+			innerFunc := func(ctx context.Context, fs *graphql.FieldSet) (res graphql.Marshaler) {
+				defer func() {
+					if r := recover(); r != nil {
+						ec.Error(ctx, ec.Recover(ctx, r))
+					}
+				}()
+				res = ec._Query_getOverviewMetrics(ctx, field)
+				if res == graphql.Null {
+					atomic.AddUint32(&fs.Invalids, 1)
+				}
+				return res
+			}
+
+			rrm := func(ctx context.Context) graphql.Marshaler {
+				return ec.OperationContext.RootResolverMiddleware(ctx,
+					func(ctx context.Context) graphql.Marshaler { return innerFunc(ctx, out) })
+			}
+
 			out.Concurrently(i, func(ctx context.Context) graphql.Marshaler { return rrm(innerCtx) })
 		case "__type":
 			out.Values[i] = ec.OperationContext.RootResolverMiddleware(innerCtx, func(ctx context.Context) (res graphql.Marshaler) {
@@ -15090,6 +15764,114 @@ func (ec *executionContext) _RenameAttributeAction(ctx context.Context, sel ast.
 	return out
 }
 
+var singleDestinationMetricsResponseImplementors = []string{"SingleDestinationMetricsResponse"}
+
+func (ec *executionContext) _SingleDestinationMetricsResponse(ctx context.Context, sel ast.SelectionSet, obj *model.SingleDestinationMetricsResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, singleDestinationMetricsResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("SingleDestinationMetricsResponse")
+		case "id":
+			out.Values[i] = ec._SingleDestinationMetricsResponse_id(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "totalDataSent":
+			out.Values[i] = ec._SingleDestinationMetricsResponse_totalDataSent(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "throughput":
+			out.Values[i] = ec._SingleDestinationMetricsResponse_throughput(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
+var singleSourceMetricsResponseImplementors = []string{"SingleSourceMetricsResponse"}
+
+func (ec *executionContext) _SingleSourceMetricsResponse(ctx context.Context, sel ast.SelectionSet, obj *model.SingleSourceMetricsResponse) graphql.Marshaler {
+	fields := graphql.CollectFields(ec.OperationContext, sel, singleSourceMetricsResponseImplementors)
+
+	out := graphql.NewFieldSet(fields)
+	deferred := make(map[string]*graphql.FieldSet)
+	for i, field := range fields {
+		switch field.Name {
+		case "__typename":
+			out.Values[i] = graphql.MarshalString("SingleSourceMetricsResponse")
+		case "namespace":
+			out.Values[i] = ec._SingleSourceMetricsResponse_namespace(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "kind":
+			out.Values[i] = ec._SingleSourceMetricsResponse_kind(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "name":
+			out.Values[i] = ec._SingleSourceMetricsResponse_name(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "totalDataSent":
+			out.Values[i] = ec._SingleSourceMetricsResponse_totalDataSent(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		case "throughput":
+			out.Values[i] = ec._SingleSourceMetricsResponse_throughput(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
+		default:
+			panic("unknown field " + strconv.Quote(field.Name))
+		}
+	}
+	out.Dispatch(ctx)
+	if out.Invalids > 0 {
+		return graphql.Null
+	}
+
+	atomic.AddInt32(&ec.deferred, int32(len(deferred)))
+
+	for label, dfs := range deferred {
+		ec.processDeferredGroup(graphql.DeferredGroup{
+			Label:    label,
+			Path:     graphql.GetPath(ctx),
+			FieldSet: dfs,
+			Context:  ctx,
+		})
+	}
+
+	return out
+}
+
 var sourceContainerRuntimeDetailsImplementors = []string{"SourceContainerRuntimeDetails"}
 
 func (ec *executionContext) _SourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, obj *model.SourceContainerRuntimeDetails) graphql.Marshaler {
@@ -16346,6 +17128,20 @@ func (ec *executionContext) marshalNObservabilitySignalSupport2githubᚗcomᚋod
 	return ec._ObservabilitySignalSupport(ctx, sel, &v)
 }
 
+func (ec *executionContext) marshalNOverviewMetricsResponse2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐOverviewMetricsResponse(ctx context.Context, sel ast.SelectionSet, v model.OverviewMetricsResponse) graphql.Marshaler {
+	return ec._OverviewMetricsResponse(ctx, sel, &v)
+}
+
+func (ec *executionContext) marshalNOverviewMetricsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐOverviewMetricsResponse(ctx context.Context, sel ast.SelectionSet, v *model.OverviewMetricsResponse) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._OverviewMetricsResponse(ctx, sel, v)
+}
+
 func (ec *executionContext) unmarshalNPatchSourceRequestInput2githubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐPatchSourceRequestInput(ctx context.Context, v interface{}) (model.PatchSourceRequestInput, error) {
 	res, err := ec.unmarshalInputPatchSourceRequestInput(ctx, v)
 	return res, graphql.ErrorOnPath(ctx, err)
@@ -16464,6 +17260,114 @@ func (ec *executionContext) marshalNSignalType2ᚕgithubᚗcomᚋodigosᚑioᚋo
 	return ret
 }
 
+func (ec *executionContext) marshalNSingleDestinationMetricsResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSingleDestinationMetricsResponseᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.SingleDestinationMetricsResponse) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNSingleDestinationMetricsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSingleDestinationMetricsResponse(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNSingleDestinationMetricsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSingleDestinationMetricsResponse(ctx context.Context, sel ast.SelectionSet, v *model.SingleDestinationMetricsResponse) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._SingleDestinationMetricsResponse(ctx, sel, v)
+}
+
+func (ec *executionContext) marshalNSingleSourceMetricsResponse2ᚕᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSingleSourceMetricsResponseᚄ(ctx context.Context, sel ast.SelectionSet, v []*model.SingleSourceMetricsResponse) graphql.Marshaler {
+	ret := make(graphql.Array, len(v))
+	var wg sync.WaitGroup
+	isLen1 := len(v) == 1
+	if !isLen1 {
+		wg.Add(len(v))
+	}
+	for i := range v {
+		i := i
+		fc := &graphql.FieldContext{
+			Index:  &i,
+			Result: &v[i],
+		}
+		ctx := graphql.WithFieldContext(ctx, fc)
+		f := func(i int) {
+			defer func() {
+				if r := recover(); r != nil {
+					ec.Error(ctx, ec.Recover(ctx, r))
+					ret = nil
+				}
+			}()
+			if !isLen1 {
+				defer wg.Done()
+			}
+			ret[i] = ec.marshalNSingleSourceMetricsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSingleSourceMetricsResponse(ctx, sel, v[i])
+		}
+		if isLen1 {
+			f(i)
+		} else {
+			go f(i)
+		}
+
+	}
+	wg.Wait()
+
+	for _, e := range ret {
+		if e == graphql.Null {
+			return graphql.Null
+		}
+	}
+
+	return ret
+}
+
+func (ec *executionContext) marshalNSingleSourceMetricsResponse2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSingleSourceMetricsResponse(ctx context.Context, sel ast.SelectionSet, v *model.SingleSourceMetricsResponse) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "the requested element is null which the schema does not allow")
+		}
+		return graphql.Null
+	}
+	return ec._SingleSourceMetricsResponse(ctx, sel, v)
+}
+
 func (ec *executionContext) marshalNSourceContainerRuntimeDetails2ᚖgithubᚗcomᚋodigosᚑioᚋodigosᚋfrontendᚋgraphᚋmodelᚐSourceContainerRuntimeDetails(ctx context.Context, sel ast.SelectionSet, v *model.SourceContainerRuntimeDetails) graphql.Marshaler {
 	if v == nil {
 		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
diff --git a/frontend/graph/model/models_gen.go b/frontend/graph/model/models_gen.go
index d6395ae8d..24f26f103 100644
--- a/frontend/graph/model/models_gen.go
+++ b/frontend/graph/model/models_gen.go
@@ -330,6 +330,11 @@ type MessagingPayloadCollectionInput struct {
 type Mutation struct {
 }
 
+type OverviewMetricsResponse struct {
+	Sources      []*SingleSourceMetricsResponse      `json:"sources"`
+	Destinations []*SingleDestinationMetricsResponse `json:"destinations"`
+}
+
 type PatchSourceRequestInput struct {
 	ReportedName *string `json:"reportedName,omitempty"`
 }
@@ -455,6 +460,20 @@ func (this RenameAttributeAction) GetSignals() []SignalType {
 	return interfaceSlice
 }
 
+type SingleDestinationMetricsResponse struct {
+	ID            string `json:"id"`
+	TotalDataSent int    `json:"totalDataSent"`
+	Throughput    int    `json:"throughput"`
+}
+
+type SingleSourceMetricsResponse struct {
+	Namespace     string `json:"namespace"`
+	Kind          string `json:"kind"`
+	Name          string `json:"name"`
+	TotalDataSent int    `json:"totalDataSent"`
+	Throughput    int    `json:"throughput"`
+}
+
 type SourceContainerRuntimeDetails struct {
 	ContainerName string `json:"containerName"`
 	Language      string `json:"language"`
diff --git a/frontend/graph/resolver.go b/frontend/graph/resolver.go
index a25c09c61..9521df8e2 100644
--- a/frontend/graph/resolver.go
+++ b/frontend/graph/resolver.go
@@ -1,7 +1,12 @@
 package graph
 
+import (
+	collectormetrics "github.com/odigos-io/odigos/frontend/endpoints/collector_metrics"
+)
+
 // This file will not be regenerated automatically.
-//
 // It serves as dependency injection for your app, add any dependencies you require here.
 
-type Resolver struct{}
+type Resolver struct {
+	MetricsConsumer *collectormetrics.OdigosMetricsConsumer
+}
diff --git a/frontend/graph/schema.graphqls b/frontend/graph/schema.graphqls
index dfb5d7a12..8d3d231ae 100644
--- a/frontend/graph/schema.graphqls
+++ b/frontend/graph/schema.graphqls
@@ -425,12 +425,32 @@ input ActionInput {
   details: String!
 }
 
+type OverviewMetricsResponse {
+  sources: [SingleSourceMetricsResponse!]!
+  destinations: [SingleDestinationMetricsResponse!]!
+}
+
+type SingleSourceMetricsResponse {
+  namespace: String!
+  kind: String!
+  name: String!
+  totalDataSent: Int!
+  throughput: Int!
+}
+
+type SingleDestinationMetricsResponse {
+  id: String!
+  totalDataSent: Int!
+  throughput: Int!
+}
+
 type Query {
   computePlatform: ComputePlatform
   config: GetConfigResponse
   destinationTypes: GetDestinationTypesResponse
   destinationTypeDetails(type: String!): GetDestinationDetailsResponse
   potentialDestinations: [DestinationDetails!]!
+  getOverviewMetrics: OverviewMetricsResponse!
 }
 
 type Mutation {
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index 4861299e0..e5de29dfe 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -760,6 +760,41 @@ func (r *queryResolver) PotentialDestinations(ctx context.Context) ([]*model.Des
 	return result, nil
 }
 
+// GetOverviewMetrics is the resolver for the getOverviewMetrics field.
+func (r *queryResolver) GetOverviewMetrics(ctx context.Context) (*model.OverviewMetricsResponse, error) {
+	if r.MetricsConsumer == nil {
+		return nil, fmt.Errorf("metrics consumer not initialized")
+	}
+
+	sourcesMetrics := r.MetricsConsumer.GetSourcesMetrics()
+	destinationsMetrics := r.MetricsConsumer.GetDestinationsMetrics()
+
+	var sourcesResp []*model.SingleSourceMetricsResponse
+	for sID, metric := range sourcesMetrics {
+		sourcesResp = append(sourcesResp, &model.SingleSourceMetricsResponse{
+			Namespace:     sID.Namespace,
+			Kind:          string(sID.Kind),
+			Name:          sID.Name,
+			TotalDataSent: int(metric.TotalDataSent()),
+			Throughput:    int(metric.TotalThroughput()),
+		})
+	}
+
+	var destinationsResp []*model.SingleDestinationMetricsResponse
+	for destId, metric := range destinationsMetrics {
+		destinationsResp = append(destinationsResp, &model.SingleDestinationMetricsResponse{
+			ID:            destId,
+			TotalDataSent: int(metric.TotalDataSent()),
+			Throughput:    int(metric.TotalThroughput()),
+		})
+	}
+
+	return &model.OverviewMetricsResponse{
+		Sources:      sourcesResp,
+		Destinations: destinationsResp,
+	}, nil
+}
+
 // ComputePlatform returns ComputePlatformResolver implementation.
 func (r *Resolver) ComputePlatform() ComputePlatformResolver { return &computePlatformResolver{r} }
 
diff --git a/frontend/main.go b/frontend/main.go
index 6879dc21c..20d855145 100644
--- a/frontend/main.go
+++ b/frontend/main.go
@@ -190,7 +190,12 @@ func startHTTPServer(flags *Flags, odigosMetrics *collectormetrics.OdigosMetrics
 	}
 
 	// GraphQL handlers
-	gqlHandler := handler.NewDefaultServer(graph.NewExecutableSchema(graph.Config{Resolvers: &graph.Resolver{}}))
+	gqlHandler := handler.NewDefaultServer(graph.NewExecutableSchema(graph.Config{
+		Resolvers: &graph.Resolver{
+			MetricsConsumer: odigosMetrics,
+		},
+	}))
+
 	r.POST("/graphql", func(c *gin.Context) {
 		gqlHandler.ServeHTTP(c.Writer, c.Request)
 	})

From a4a5d34b8d774a11bc298d92b32919036eb934af Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 3 Nov 2024 15:14:15 +0200
Subject: [PATCH 331/374] [GEN-1584]: fix close modal & animations (#1676)

---
 .../reuseable-components/drawer/index.tsx     | 42 ++++++----------
 .../reuseable-components/modal/index.tsx      | 31 +++++-------
 frontend/webapp/styles/animations.ts          | 50 +++++++++++++++++++
 frontend/webapp/styles/index.ts               |  2 +
 frontend/webapp/styles/styled.tsx             | 12 +++++
 frontend/webapp/styles/theme.ts               |  1 -
 6 files changed, 93 insertions(+), 45 deletions(-)
 create mode 100644 frontend/webapp/styles/animations.ts

diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
index 317048905..3f3980dd9 100644
--- a/frontend/webapp/reuseable-components/drawer/index.tsx
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -1,47 +1,34 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
+import { fade, Overlay } from '@/styles';
 
 interface DrawerProps {
   isOpen: boolean;
-  width?: string;
   onClose: () => void;
   closeOnEscape?: boolean;
-  position?: 'left' | 'right';
+  position?: 'right' | 'left';
+  width?: string;
   children: React.ReactNode;
 }
 
-// Styled-component for overlay
-const Overlay = styled.div<{ isOpen: boolean }>`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
-  transition: opacity 0.3s ease;
-  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
-  z-index: 999;
-`;
-
 // Styled-component for drawer container
 const DrawerContainer = styled.div<{
-  isOpen: boolean;
-  position: 'left' | 'right';
-  width: string;
+  isOpen: DrawerProps['isOpen'];
+  position: DrawerProps['position'];
+  width: DrawerProps['width'];
 }>`
   position: fixed;
   top: 0;
   bottom: 0;
   ${({ position }) => position}: 0;
+  z-index: 1000;
   width: ${({ width }) => width};
-  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  background: ${({ theme }) => theme.colors.translucent_bg};
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  transform: translateX(${({ isOpen, position }) => (isOpen ? '0' : position === 'left' ? '-100%' : '100%')});
-  transition: transform 0.3s ease;
-  z-index: 1000;
   overflow-y: auto;
+  animation: ${({ isOpen, position = 'right' }) => (isOpen ? fade.in[position] : fade.out[position])} 0.3s ease;
 `;
 
 export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, position = 'right', width = '300px', children, closeOnEscape = true }) => {
@@ -50,12 +37,15 @@ export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, position = 'rig
     onClose();
   });
 
-  return (
+  if (!isOpen) return null;
+
+  return ReactDOM.createPortal(
     <>
-      <Overlay isOpen={isOpen} onClick={onClose} />
+      <Overlay hidden={!isOpen} onClick={onClose} />
       <DrawerContainer isOpen={isOpen} position={position} width={width}>
         {children}
       </DrawerContainer>
-    </>
+    </>,
+    document.body
   );
 };
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index e718d781a..02c8411e0 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -4,6 +4,7 @@ import { Text } from '../text';
 import ReactDOM from 'react-dom';
 import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
+import { fade, Overlay } from '@/styles';
 
 interface ModalProps {
   isOpen: boolean;
@@ -15,27 +16,20 @@ interface ModalProps {
   children: React.ReactNode;
 }
 
-const Overlay = styled.div`
+const ModalWrapper = styled.div<{ isOpen: ModalProps['isOpen'] }>`
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(17, 17, 17, 0.8);
-  backdrop-filter: blur(1px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   z-index: 1000;
-`;
-
-const ModalWrapper = styled.div`
-  background: ${({ theme }) => theme.colors.translucent_bg};
-  border-radius: 40px;
+  width: fit-content;
   max-height: 84vh;
+  background: ${({ theme }) => theme.colors.translucent_bg};
   border: ${({ theme }) => `1px solid ${theme.colors.border}`};
+  border-radius: 40px;
   box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8), 0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),
     0px 10px 10px 0px rgba(17, 17, 17, 0.8), 0px 0px 8px 0px rgba(17, 17, 17, 0.8);
+  animation: ${({ isOpen }) => (isOpen ? fade.in['center'] : fade.out['center'])} 0.3s ease;
 `;
 
 const ModalHeader = styled.div`
@@ -96,8 +90,9 @@ const Modal: React.FC<ModalProps> = ({ isOpen, header, onClose, children, action
   if (!isOpen) return null;
 
   return ReactDOM.createPortal(
-    <Overlay>
-      <ModalWrapper>
+    <>
+      <Overlay hidden={!isOpen} onClick={onClose} />
+      <ModalWrapper isOpen={isOpen}>
         {header && (
           <ModalHeader>
             <ModalCloseButton onClick={onClose}>
@@ -112,7 +107,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, header, onClose, children, action
         )}
         <ModalContent>{children}</ModalContent>
       </ModalWrapper>
-    </Overlay>,
+    </>,
     document.body
   );
 };
diff --git a/frontend/webapp/styles/animations.ts b/frontend/webapp/styles/animations.ts
new file mode 100644
index 000000000..f2e4928b5
--- /dev/null
+++ b/frontend/webapp/styles/animations.ts
@@ -0,0 +1,50 @@
+import { keyframes } from 'styled-components';
+
+type Position = 'left' | 'right' | 'top' | 'bottom' | 'center';
+
+export const fade = {
+  in: {
+    left: keyframes<{ position: Position }>`
+      from { transform: translateX(-100%); }
+      to { transform: translateX(0); }
+    `,
+    right: keyframes<{ position: Position }>`
+      from { transform: translateX(100%); }
+      to { transform: translateX(0); }
+    `,
+    top: keyframes<{ position: Position }>`
+      from { transform: translateY(-100%); }
+      to { transform: translateY(0); }
+    `,
+    bottom: keyframes<{ position: Position }>`
+      from { transform: translateY(100%); }
+      to { transform: translateY(0); }
+    `,
+    center: keyframes<{ position: Position }>`
+      from { transform: translate(-50%, 100%); }
+      to { transform: translate(-50%, -50%); }
+    `,
+  },
+  out: {
+    left: keyframes<{ position: Position }>`
+      from { transform: translateX(0); }
+      to { transform: translateX(-100%); }
+    `,
+    right: keyframes<{ position: Position }>`
+      from { transform: translateX(0); }
+      to { transform: translateX(100%); }
+    `,
+    top: keyframes<{ position: Position }>`
+      from { transform: translateY(0); }
+      to { transform: translateY(-100%); }
+    `,
+    bottom: keyframes<{ position: Position }>`
+      from { transform: translateY(0); }
+      to { transform: translateY(100%); }
+    `,
+    center: keyframes<{ position: Position }>`
+      from { transform: translate(-50%, -50%); }
+      to { transform: translate(-50%, 100%); }
+    `,
+  },
+};
diff --git a/frontend/webapp/styles/index.ts b/frontend/webapp/styles/index.ts
index 839c21672..639634e14 100644
--- a/frontend/webapp/styles/index.ts
+++ b/frontend/webapp/styles/index.ts
@@ -1 +1,3 @@
+export * from './animations';
 export * from './palette';
+export * from './styled';
diff --git a/frontend/webapp/styles/styled.tsx b/frontend/webapp/styles/styled.tsx
index c7e6ad26b..e80d8b763 100644
--- a/frontend/webapp/styles/styled.tsx
+++ b/frontend/webapp/styles/styled.tsx
@@ -8,3 +8,15 @@ export const HideScroll = styled.div`
   -ms-overflow-style: none;
   scrollbar-width: none;
 `;
+
+export const Overlay = styled.div<{ hidden?: boolean }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(1px);
+  visibility: ${({ hidden }) => (hidden ? 'hidden' : 'visible')};
+`;
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 064fe6916..7d2102542 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -1,4 +1,3 @@
-import { drop } from 'cypress/types/lodash';
 import { DefaultTheme } from 'styled-components';
 
 // Define your color palette

From d933798b3f3ae8b5fc152e2316bdf0ea9d3abfa4 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 3 Nov 2024 15:14:26 +0200
Subject: [PATCH 332/374] [GEN-1536]: scramble secret values (#1677)

---
 .../destinations/useDestinationFormData.ts    | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/webapp/hooks/destinations/useDestinationFormData.ts b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
index 1210843f2..2a49d0ce0 100644
--- a/frontend/webapp/hooks/destinations/useDestinationFormData.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationFormData.ts
@@ -4,7 +4,14 @@ import { useDrawerStore } from '@/store';
 import { useQuery } from '@apollo/client';
 import { useConnectDestinationForm } from '@/hooks';
 import { GET_DESTINATION_TYPE_DETAILS } from '@/graphql';
-import { DynamicField, ActualDestination, isActualDestination, DestinationDetailsResponse, SupportedDestinationSignals } from '@/types';
+import {
+  DynamicField,
+  ActualDestination,
+  isActualDestination,
+  DestinationDetailsResponse,
+  SupportedDestinationSignals,
+  DestinationDetailsField,
+} from '@/types';
 
 const DEFAULT_SUPPORTED_SIGNALS: SupportedDestinationSignals = {
   logs: { supported: false },
@@ -118,11 +125,18 @@ export function useDestinationFormData() {
   };
 }
 
-function buildDestinationFieldData(parsedFields: Record<string, string>, fieldDetails?: { name: string; displayName: string }[]) {
-  return Object.entries(parsedFields).map(([key, value]) => ({
-    title: fieldDetails?.find((field) => field.name === key)?.displayName || key,
-    value: value || 'N/A',
-  }));
+function buildDestinationFieldData(parsedFields: Record<string, string>, fieldDetails?: DestinationDetailsField[]) {
+  return Object.entries(parsedFields).map(([key, value]) => {
+    const found = fieldDetails?.find((field) => field.name === key);
+
+    const { type } = safeJsonParse(found?.componentProperties, { type: '' });
+    const secret = type === 'password' ? new Array(value.length).fill('•').join('') : '';
+
+    return {
+      title: found?.displayName || key,
+      value: secret || value || 'N/A',
+    };
+  });
 }
 
 function buildMonitorsList(exportedSignals: ActualDestination['exportedSignals']): string {

From 2c9c79b0515e260dec7a8f496c5367db2f3b0b19 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 4 Nov 2024 11:15:28 +0200
Subject: [PATCH 333/374] [GEN-1621]: add cancel modal & breakdown
 overview-drawer files (#1682)

---
 .../modals/cancel-warning/index.tsx           |  31 ++
 .../modals/delete-entity-modal/index.tsx      |  73 ----
 .../modals/delete-warning/index.tsx           |  31 ++
 frontend/webapp/components/modals/index.ts    |   2 +
 frontend/webapp/components/modals/index.tsx   |   1 -
 .../create.connection.form.tsx                |   2 +-
 .../actions/action-drawer-container/index.tsx | 105 ++++--
 .../actions/choose-action-modal/index.tsx     |  10 +-
 .../add-destination-modal/index.tsx           |  83 ++---
 .../destinations/add-destination/index.tsx    |   9 +-
 .../destination-drawer-container/index.tsx    | 102 +++---
 .../add-rule-modal/index.tsx                  |  10 +-
 .../rule-drawer-container/index.tsx           | 105 ++++--
 .../main/overview/add-entity/index.tsx        |  22 +-
 .../main/overview/all-drawers/index.tsx       |  32 ++
 .../main/overview/all-modals/index.tsx        |  35 ++
 .../overview/overview-data-flow/index.tsx     |  10 +-
 .../overview-drawer/drawer-header/index.tsx   | 109 +++---
 .../main/overview/overview-drawer/index.tsx   | 344 ++++--------------
 .../choose-source-modal/index.tsx             |  42 +--
 .../main/sources/edit.source/index.tsx        |   2 +-
 .../sources/source-drawer-container/index.tsx |  81 ++++-
 frontend/webapp/hooks/useKeyDown.ts           |  25 +-
 .../reuseable-components/button/index.tsx     |  18 +-
 .../reuseable-components/drawer/index.tsx     |  11 +-
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/modal/index.tsx      |  24 +-
 .../modal/warning-modal/index.tsx             |  81 +++++
 frontend/webapp/styles/styled.tsx             |   4 +-
 frontend/webapp/styles/theme.ts               |   1 +
 30 files changed, 741 insertions(+), 665 deletions(-)
 create mode 100644 frontend/webapp/components/modals/cancel-warning/index.tsx
 delete mode 100644 frontend/webapp/components/modals/delete-entity-modal/index.tsx
 create mode 100644 frontend/webapp/components/modals/delete-warning/index.tsx
 create mode 100644 frontend/webapp/components/modals/index.ts
 delete mode 100644 frontend/webapp/components/modals/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/all-drawers/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/all-modals/index.tsx
 create mode 100644 frontend/webapp/reuseable-components/modal/warning-modal/index.tsx

diff --git a/frontend/webapp/components/modals/cancel-warning/index.tsx b/frontend/webapp/components/modals/cancel-warning/index.tsx
new file mode 100644
index 000000000..4426179b7
--- /dev/null
+++ b/frontend/webapp/components/modals/cancel-warning/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { WarningModal } from '@/reuseable-components';
+
+interface Props {
+  isOpen: boolean;
+  name?: string;
+  onApprove: () => void;
+  onDeny: () => void;
+}
+
+const CancelWarning: React.FC<Props> = ({ isOpen, name, onApprove, onDeny }) => {
+  return (
+    <WarningModal
+      isOpen={isOpen}
+      noOverlay
+      title={`Cancel${name ? ` ${name}` : ''}`}
+      description='Are you sure you want to cancel?'
+      approveButton={{
+        text: 'Cancel',
+        variant: 'warning',
+        onClick: onApprove,
+      }}
+      denyButton={{
+        text: 'Go Back',
+        onClick: onDeny,
+      }}
+    />
+  );
+};
+
+export { CancelWarning };
diff --git a/frontend/webapp/components/modals/delete-entity-modal/index.tsx b/frontend/webapp/components/modals/delete-entity-modal/index.tsx
deleted file mode 100644
index ac771fc72..000000000
--- a/frontend/webapp/components/modals/delete-entity-modal/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useCallback } from 'react';
-import { Button, Modal, Text } from '@/reuseable-components';
-import styled from 'styled-components';
-
-interface AddActionModalProps {
-  title: string;
-  description: string;
-  isModalOpen: boolean;
-  handleDelete: () => void;
-  handleCloseModal: () => void;
-}
-
-export const DeleteEntityModal: React.FC<AddActionModalProps> = ({
-  isModalOpen,
-  handleCloseModal,
-  title = '',
-  handleDelete,
-  description = '',
-}) => {
-  const handleClose = useCallback(() => {
-    handleCloseModal();
-  }, [handleCloseModal]);
-
-  return (
-    <Modal isOpen={isModalOpen} onClose={handleClose}>
-      <DeleteEntityModalContainer>
-        <ModalTitle>Delete {title}</ModalTitle>
-        <ModalContent>
-          <ModalDescription>{description}</ModalDescription>
-        </ModalContent>
-        <ModalFooter>
-          <FooterButton variant="danger" onClick={handleDelete}>
-            Delete
-          </FooterButton>
-          <FooterButton variant={'secondary'} onClick={handleClose}>
-            Cancel
-          </FooterButton>
-        </ModalFooter>
-      </DeleteEntityModalContainer>
-    </Modal>
-  );
-};
-
-const ModalTitle = styled(Text)`
-  font-size: 20px;
-  line-height: 28px;
-`;
-
-const ModalDescription = styled(Text)`
-  color: ${({ theme }) => theme.text.grey};
-  width: 416px;
-  font-style: normal;
-  font-weight: 300;
-  line-height: 24px;
-`;
-
-const ModalContent = styled.div`
-  padding: 12px 0px 32px 0;
-`;
-
-const ModalFooter = styled.div`
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-`;
-
-const FooterButton = styled(Button)`
-  width: 224px;
-`;
-
-const DeleteEntityModalContainer = styled.div`
-  padding: 24px 32px;
-`;
diff --git a/frontend/webapp/components/modals/delete-warning/index.tsx b/frontend/webapp/components/modals/delete-warning/index.tsx
new file mode 100644
index 000000000..79b3cfad3
--- /dev/null
+++ b/frontend/webapp/components/modals/delete-warning/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { WarningModal } from '@/reuseable-components';
+
+interface Props {
+  isOpen: boolean;
+  name?: string;
+  onApprove: () => void;
+  onDeny: () => void;
+}
+
+const DeleteWarning: React.FC<Props> = ({ isOpen, name, onApprove, onDeny }) => {
+  return (
+    <WarningModal
+      isOpen={isOpen}
+      noOverlay
+      title={`Delete${name ? ` ${name}` : ''}`}
+      description='Are you sure you want to delete this?'
+      approveButton={{
+        text: 'Delete',
+        variant: 'danger',
+        onClick: onApprove,
+      }}
+      denyButton={{
+        text: 'Cancel',
+        onClick: onDeny,
+      }}
+    />
+  );
+};
+
+export { DeleteWarning };
diff --git a/frontend/webapp/components/modals/index.ts b/frontend/webapp/components/modals/index.ts
new file mode 100644
index 000000000..96e4964db
--- /dev/null
+++ b/frontend/webapp/components/modals/index.ts
@@ -0,0 +1,2 @@
+export * from './cancel-warning';
+export * from './delete-warning';
diff --git a/frontend/webapp/components/modals/index.tsx b/frontend/webapp/components/modals/index.tsx
deleted file mode 100644
index 5b27ff586..000000000
--- a/frontend/webapp/components/modals/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './delete-entity-modal';
diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
index 98112cbed..b39030702 100644
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
+++ b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
@@ -95,7 +95,7 @@ export function CreateConnectionForm({
     filterSupportedMonitors();
   }, [destination]);
 
-  useKeyDown('Enter', handleKeyPress);
+  useKeyDown({ key: 'Enter', active: true }, handleKeyPress);
 
   function handleKeyPress(e: any) {
     if (!isCreateButtonDisabled) {
diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
index 4213b8e0a..dae5a8626 100644
--- a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
@@ -1,25 +1,24 @@
-import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
+import { getActionIcon } from '@/utils';
 import { useDrawerStore } from '@/store';
 import { CardDetails } from '@/components';
-import { useActionFormData, useNotify } from '@/hooks';
+import type { ActionDataParsed } from '@/types';
 import { ChooseActionBody } from '../choose-action-body';
-import type { ActionDataParsed, ActionInput } from '@/types';
+import OverviewDrawer from '../../overview/overview-drawer';
 import buildCardFromActionSpec from './build-card-from-action-spec';
+import { useActionCRUD, useActionFormData, useNotify } from '@/hooks';
 import { ACTION_OPTIONS } from '../choose-action-modal/action-options';
 
-export type ActionDrawerHandle = {
-  getCurrentData: () => ActionInput | null;
-};
-
-interface Props {
-  isEditing: boolean;
-}
+interface Props {}
 
-const ActionDrawer = forwardRef<ActionDrawerHandle, Props>(({ isEditing }, ref) => {
+const ActionDrawer: React.FC<Props> = () => {
   const notify = useNotify();
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const [isEditing, setIsEditing] = useState(false);
+
   const { formData, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useActionFormData();
+  const { updateAction, deleteAction } = useActionCRUD();
 
   const cardData = useMemo(() => {
     if (!selectedItem) return [];
@@ -48,33 +47,65 @@ const ActionDrawer = forwardRef<ActionDrawerHandle, Props>(({ isEditing }, ref)
     return found;
   }, [selectedItem, isEditing]);
 
-  useImperativeHandle(ref, () => ({
-    getCurrentData: () => {
-      if (validateForm()) {
-        return formData;
-      } else {
-        notify({
-          message: 'Required fields are missing!',
-          title: 'Update Action Error',
-          type: 'error',
-          target: 'notification',
-          crdType: 'notification',
-        });
-        return null;
-      }
-    },
-  }));
-
-  return isEditing && thisAction ? (
-    <FormContainer>
-      <ChooseActionBody isUpdate action={thisAction} formData={formData} handleFormChange={handleFormChange} />
-    </FormContainer>
-  ) : (
-    <CardDetails data={cardData} />
-  );
-});
+  if (!selectedItem?.item) return null;
+  const { id, item } = selectedItem;
 
-ActionDrawer.displayName = 'ActionDrawer';
+  const handleEdit = (bool?: boolean) => {
+    if (typeof bool === 'boolean') {
+      setIsEditing(bool);
+    } else {
+      setIsEditing(true);
+    }
+  };
+
+  const handleCancel = () => {
+    resetFormData();
+    setIsEditing(false);
+  };
+
+  const handleDelete = async () => {
+    await deleteAction(id as string, (item as ActionDataParsed).type);
+  };
+
+  const handleSave = async (newTitle: string) => {
+    if (!validateForm()) {
+      notify({
+        message: 'Required fields are missing!',
+        title: 'Update Action Error',
+        type: 'error',
+        target: 'notification',
+        crdType: 'notification',
+      });
+    } else {
+      const payload = {
+        ...formData,
+        name: newTitle,
+      };
+
+      await updateAction(id as string, payload);
+    }
+  };
+
+  return (
+    <OverviewDrawer
+      title={(item as ActionDataParsed).spec.actionName}
+      imageUri={getActionIcon((item as ActionDataParsed).type)}
+      isEdit={isEditing}
+      clickEdit={handleEdit}
+      clickSave={handleSave}
+      clickDelete={handleDelete}
+      clickCancel={handleCancel}
+    >
+      {isEditing && thisAction ? (
+        <FormContainer>
+          <ChooseActionBody isUpdate action={thisAction} formData={formData} handleFormChange={handleFormChange} />
+        </FormContainer>
+      ) : (
+        <CardDetails data={cardData} />
+      )}
+    </OverviewDrawer>
+  );
+};
 
 export { ActionDrawer };
 
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index c59b009e5..ed8fdad7a 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -5,11 +5,11 @@ import { ACTION_OPTIONS, type ActionOption } from './action-options';
 import { AutocompleteInput, Modal, NavigationButtons, Divider, FadeLoader, SectionTitle, ModalContent, Center } from '@/reuseable-components';
 
 interface AddActionModalProps {
-  isModalOpen: boolean;
-  handleCloseModal: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, handleCloseModal }) => {
+export const AddActionModal: React.FC<AddActionModalProps> = ({ isOpen, onClose }) => {
   const { formData, handleFormChange, resetFormData, validateForm } = useActionFormData();
   const { createAction, loading } = useActionCRUD({ onSuccess: handleClose });
   const [selectedItem, setSelectedItem] = useState<ActionOption | undefined>(undefined);
@@ -23,7 +23,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
   function handleClose() {
     resetFormData();
     setSelectedItem(undefined);
-    handleCloseModal();
+    onClose();
   }
 
   const handleSelect = (item?: ActionOption) => {
@@ -34,7 +34,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isModalOpen, han
 
   return (
     <Modal
-      isOpen={isModalOpen}
+      isOpen={isOpen}
       onClose={handleClose}
       header={{ title: 'Add Action' }}
       actionComponent={
diff --git a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
index ffb5de923..c634b6db1 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/add-destination-modal/index.tsx
@@ -5,48 +5,13 @@ import { ChooseDestinationModalBody } from '../choose-destination-modal-body';
 import { ConnectDestinationModalBody } from '../connect-destination-modal-body';
 
 interface AddDestinationModalProps {
-  isModalOpen: boolean;
-  handleCloseModal: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-interface ModalActionComponentProps {
-  onNext: () => void;
-  onBack: () => void;
-  isFormValid?: boolean;
-  item?: DestinationTypeItem;
-}
-
-const ModalActionComponent: React.FC<ModalActionComponentProps> = React.memo(
-  ({ onNext, onBack, isFormValid, item }) => {
-    if (!item) return null;
-
-    const buttons = [
-      {
-        label: 'BACK',
-        iconSrc: '/icons/common/arrow-white.svg',
-        onClick: onBack,
-        variant: 'secondary' as const,
-      },
-      {
-        label: 'DONE',
-        onClick: onNext,
-        variant: 'primary' as const,
-        disabled: !isFormValid,
-      },
-    ];
-
-    return <NavigationButtons buttons={buttons} />;
-  }
-);
-
-export const AddDestinationModal: React.FC<AddDestinationModalProps> = ({
-  isModalOpen,
-  handleCloseModal,
-}) => {
+export const AddDestinationModal: React.FC<AddDestinationModalProps> = ({ isOpen, onClose }) => {
   const submitRef = useRef<(() => void) | null>(null);
-  const [selectedItem, setSelectedItem] = useState<
-    DestinationTypeItem | undefined
-  >();
+  const [selectedItem, setSelectedItem] = useState<DestinationTypeItem | undefined>();
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
 
   const handleNextStep = useCallback((item: DestinationTypeItem) => {
@@ -57,9 +22,9 @@ export const AddDestinationModal: React.FC<AddDestinationModalProps> = ({
     if (submitRef.current) {
       submitRef.current();
       setSelectedItem(undefined);
-      handleCloseModal();
+      onClose();
     }
-  }, [handleCloseModal]);
+  }, [onClose]);
 
   const handleBack = useCallback(() => {
     setSelectedItem(undefined);
@@ -67,16 +32,12 @@ export const AddDestinationModal: React.FC<AddDestinationModalProps> = ({
 
   const handleClose = useCallback(() => {
     setSelectedItem(undefined);
-    handleCloseModal();
-  }, [handleCloseModal]);
+    onClose();
+  }, [onClose]);
 
   const renderModalBody = () => {
     return selectedItem ? (
-      <ConnectDestinationModalBody
-        onSubmitRef={submitRef}
-        destination={selectedItem}
-        onFormValidChange={setIsFormValid}
-      />
+      <ConnectDestinationModalBody onSubmitRef={submitRef} destination={selectedItem} onFormValidChange={setIsFormValid} />
     ) : (
       <ChooseDestinationModalBody onSelect={handleNextStep} />
     );
@@ -84,17 +45,27 @@ export const AddDestinationModal: React.FC<AddDestinationModalProps> = ({
 
   return (
     <Modal
-      isOpen={isModalOpen}
+      isOpen={isOpen}
+      onClose={handleClose}
+      header={{ title: 'Add Destination' }}
       actionComponent={
-        <ModalActionComponent
-          onNext={handleNext}
-          onBack={handleBack}
-          isFormValid={isFormValid}
-          item={selectedItem}
+        <NavigationButtons
+          buttons={[
+            {
+              label: 'BACK',
+              iconSrc: '/icons/common/arrow-white.svg',
+              onClick: handleBack,
+              variant: 'secondary' as const,
+            },
+            {
+              label: 'DONE',
+              onClick: handleNext,
+              variant: 'primary' as const,
+              disabled: !isFormValid,
+            },
+          ]}
         />
       }
-      header={{ title: 'Add Destination' }}
-      onClose={handleClose}
     >
       {renderModalBody()}
     </Modal>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 0312cd4bb..0f63dc7a9 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -73,8 +73,8 @@ export function ChooseDestinationContainer() {
       </HeaderWrapper>
       <ContentWrapper>
         <SectionTitle
-          title="Configure destinations"
-          description="Add backend destinations where collected data will be sent and configure their settings."
+          title='Configure destinations'
+          description='Add backend destinations where collected data will be sent and configure their settings.'
         />
         {isSourcesListEmpty() && destinations.length === 0 && (
           <NotificationNoteWrapper>
@@ -92,10 +92,7 @@ export function ChooseDestinationContainer() {
           <AddDestinationButton onClick={() => handleOpenModal()} />
         </AddDestinationButtonWrapper>
         <ConfiguredDestinationsList data={destinations} />
-        <AddDestinationModal
-          isModalOpen={isModalOpen}
-          handleCloseModal={handleCloseModal}
-        />
+        <AddDestinationModal isOpen={isModalOpen} onClose={handleCloseModal} />
       </ContentWrapper>
     </>
   );
diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
index 0190e3d1e..c7ef22ef4 100644
--- a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -1,69 +1,79 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
-import { ExportedSignals } from '@/types';
+import { useDrawerStore } from '@/store';
+import { ActualDestination } from '@/types';
+import OverviewDrawer from '../../overview/overview-drawer';
 import { CardDetails, EditDestinationForm } from '@/components';
-import { useDestinationFormData, useEditDestinationFormHandlers } from '@/hooks';
+import { useDestinationCRUD, useDestinationFormData, useEditDestinationFormHandlers } from '@/hooks';
 
-export type DestinationDrawerHandle = {
-  getCurrentData: () => {
-    type: string;
-    exportedSignals: ExportedSignals;
-    fields: { key: string; value: any }[];
-  };
-};
+interface Props {}
 
-interface DestinationDrawerProps {
-  isEditing: boolean;
-}
+const DestinationDrawer: React.FC<Props> = () => {
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const [isEditing, setIsEditing] = useState(false);
 
-const DestinationDrawer = forwardRef<DestinationDrawerHandle, DestinationDrawerProps>(({ isEditing }, ref) => {
-  const [isFormDirty, setIsFormDirty] = useState(false);
   const { cardData, dynamicFields, exportedSignals, supportedSignals, destinationType, resetFormData, setDynamicFields, setExportedSignals } =
     useDestinationFormData();
-
   const { handleSignalChange, handleDynamicFieldChange } = useEditDestinationFormHandlers(setExportedSignals, setDynamicFields);
+  const { updateDestination, deleteDestination } = useDestinationCRUD();
 
-  useEffect(() => {
-    if (!isEditing && isFormDirty) {
-      setIsFormDirty(false);
-      resetFormData();
+  if (!selectedItem?.item) return null;
+  const { id, item } = selectedItem;
+
+  const handleEdit = (bool?: boolean) => {
+    if (typeof bool === 'boolean') {
+      setIsEditing(bool);
+    } else {
+      setIsEditing(true);
     }
-  }, [isEditing]);
+  };
 
-  const onDynamicFieldChange = (name: string, value: any) => {
-    handleDynamicFieldChange(name, value);
-    setIsFormDirty(true);
+  const handleCancel = () => {
+    resetFormData();
+    setIsEditing(false);
   };
 
-  const onSignalChange = (signal: keyof ExportedSignals, value: boolean) => {
-    handleSignalChange(signal, value);
-    setIsFormDirty(true);
+  const handleDelete = async () => {
+    await deleteDestination(id as string);
   };
 
-  useImperativeHandle(ref, () => ({
-    getCurrentData: () => ({
+  const handleSave = async (newTitle: string) => {
+    const payload = {
       type: destinationType,
+      name: newTitle,
       exportedSignals,
       fields: dynamicFields.map(({ name, value }) => ({ key: name, value })),
-    }),
-  }));
+    };
 
-  return isEditing ? (
-    <FormContainer>
-      <EditDestinationForm
-        dynamicFields={dynamicFields}
-        exportedSignals={exportedSignals}
-        supportedSignals={supportedSignals}
-        handleSignalChange={onSignalChange}
-        handleDynamicFieldChange={onDynamicFieldChange}
-      />
-    </FormContainer>
-  ) : (
-    <CardDetails data={cardData} />
-  );
-});
+    await updateDestination(id as string, payload);
+  };
 
-DestinationDrawer.displayName = 'DestinationDrawer';
+  return (
+    <OverviewDrawer
+      title={(item as ActualDestination).name}
+      imageUri={(item as ActualDestination).destinationType.imageUrl}
+      isEdit={isEditing}
+      clickEdit={handleEdit}
+      clickSave={handleSave}
+      clickDelete={handleDelete}
+      clickCancel={handleCancel}
+    >
+      {isEditing ? (
+        <FormContainer>
+          <EditDestinationForm
+            dynamicFields={dynamicFields}
+            exportedSignals={exportedSignals}
+            supportedSignals={supportedSignals}
+            handleSignalChange={handleSignalChange}
+            handleDynamicFieldChange={handleDynamicFieldChange}
+          />
+        </FormContainer>
+      ) : (
+        <CardDetails data={cardData} />
+      )}
+    </OverviewDrawer>
+  );
+};
 
 export { DestinationDrawer };
 
diff --git a/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
index 777ec57d8..5c96ad3a8 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
@@ -15,11 +15,11 @@ import {
 } from '@/reuseable-components';
 
 interface Props {
-  isModalOpen: boolean;
-  handleCloseModal: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 }
 
-export const AddRuleModal: React.FC<Props> = ({ isModalOpen, handleCloseModal }) => {
+export const AddRuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
   const { formData, handleFormChange, resetFormData, validateForm } = useInstrumentationRuleFormData();
   const { createInstrumentationRule, loading } = useInstrumentationRuleCRUD({ onSuccess: handleClose });
   const [selectedItem, setSelectedItem] = useState<RuleOption | undefined>(undefined);
@@ -37,7 +37,7 @@ export const AddRuleModal: React.FC<Props> = ({ isModalOpen, handleCloseModal })
   function handleClose() {
     resetFormData();
     setSelectedItem(undefined);
-    handleCloseModal();
+    onClose();
   }
 
   const handleSelect = (item?: RuleOption) => {
@@ -47,7 +47,7 @@ export const AddRuleModal: React.FC<Props> = ({ isModalOpen, handleCloseModal })
 
   return (
     <Modal
-      isOpen={isModalOpen}
+      isOpen={isOpen}
       onClose={handleClose}
       header={{ title: 'Add Instrumentation Rule' }}
       actionComponent={
diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
index 5a0e5a644..ab8231201 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
@@ -1,25 +1,24 @@
-import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
+import { getRuleIcon } from '@/utils';
 import { useDrawerStore } from '@/store';
 import { CardDetails } from '@/components';
 import { ChooseRuleBody } from '../choose-rule-body';
+import type { InstrumentationRuleSpec } from '@/types';
+import OverviewDrawer from '../../overview/overview-drawer';
 import { RULE_OPTIONS } from '../add-rule-modal/rule-options';
 import buildCardFromRuleSpec from './build-card-from-rule-spec';
-import { useInstrumentationRuleFormData, useNotify } from '@/hooks';
-import type { InstrumentationRuleInput, InstrumentationRuleSpec } from '@/types';
+import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData, useNotify } from '@/hooks';
 
-export type RuleDrawerHandle = {
-  getCurrentData: () => InstrumentationRuleInput | null;
-};
-
-interface Props {
-  isEditing: boolean;
-}
+interface Props {}
 
-const RuleDrawer = forwardRef<RuleDrawerHandle, Props>(({ isEditing }, ref) => {
+const RuleDrawer: React.FC<Props> = () => {
   const notify = useNotify();
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const [isEditing, setIsEditing] = useState(false);
+
   const { formData, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useInstrumentationRuleFormData();
+  const { updateInstrumentationRule, deleteInstrumentationRule } = useInstrumentationRuleCRUD();
 
   const cardData = useMemo(() => {
     if (!selectedItem) return [];
@@ -46,33 +45,65 @@ const RuleDrawer = forwardRef<RuleDrawerHandle, Props>(({ isEditing }, ref) => {
     return found;
   }, [selectedItem, isEditing]);
 
-  useImperativeHandle(ref, () => ({
-    getCurrentData: () => {
-      if (validateForm()) {
-        return formData;
-      } else {
-        notify({
-          message: 'Required fields are missing!',
-          title: 'Update Rule Error',
-          type: 'error',
-          target: 'notification',
-          crdType: 'notification',
-        });
-        return null;
-      }
-    },
-  }));
-
-  return isEditing && thisRule ? (
-    <FormContainer>
-      <ChooseRuleBody isUpdate rule={thisRule} formData={formData} handleFormChange={handleFormChange} />
-    </FormContainer>
-  ) : (
-    <CardDetails data={cardData} />
-  );
-});
+  if (!selectedItem?.item) return null;
+  const { id, item } = selectedItem;
 
-RuleDrawer.displayName = 'RuleDrawer';
+  const handleEdit = (bool?: boolean) => {
+    if (typeof bool === 'boolean') {
+      setIsEditing(bool);
+    } else {
+      setIsEditing(true);
+    }
+  };
+
+  const handleCancel = () => {
+    resetFormData();
+    setIsEditing(false);
+  };
+
+  const handleDelete = async () => {
+    await deleteInstrumentationRule(id as string);
+  };
+
+  const handleSave = async (newTitle: string) => {
+    if (!validateForm()) {
+      notify({
+        message: 'Required fields are missing!',
+        title: 'Update Rule Error',
+        type: 'error',
+        target: 'notification',
+        crdType: 'notification',
+      });
+    } else {
+      const payload = {
+        ...formData,
+        ruleName: newTitle,
+      };
+
+      await updateInstrumentationRule(id as string, payload);
+    }
+  };
+
+  return (
+    <OverviewDrawer
+      title={(item as InstrumentationRuleSpec).ruleName}
+      imageUri={getRuleIcon((item as InstrumentationRuleSpec).type)}
+      isEdit={isEditing}
+      clickEdit={handleEdit}
+      clickSave={handleSave}
+      clickDelete={handleDelete}
+      clickCancel={handleCancel}
+    >
+      {isEditing && thisRule ? (
+        <FormContainer>
+          <ChooseRuleBody isUpdate rule={thisRule} formData={formData} handleFormChange={handleFormChange} />
+        </FormContainer>
+      ) : (
+        <CardDetails data={cardData} />
+      )}
+    </OverviewDrawer>
+  );
+};
 
 export { RuleDrawer };
 
diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/containers/main/overview/add-entity/index.tsx
index d60433a3f..c353c5dd4 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/containers/main/overview/add-entity/index.tsx
@@ -3,13 +3,9 @@ import theme from '@/styles/theme';
 import { useModalStore } from '@/store';
 import React, { useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { AddActionModal } from '../../actions';
-import { AddRuleModal } from '../../instrumentation-rules';
 import { useActualSources, useOnClickOutside } from '@/hooks';
 import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
-import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal';
-import { AddDestinationModal } from '../../destinations/add-destination/add-destination-modal';
 
 // Styled components for the dropdown UI
 const Container = styled.div`
@@ -75,11 +71,11 @@ interface AddEntityButtonDropdownProps {
 }
 
 const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
-  const { currentModal, setCurrentModal } = useModalStore();
+  const { setCurrentModal } = useModalStore();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const { isPolling, createSourcesForNamespace, persistNamespaceItems } = useActualSources();
+  const { isPolling } = useActualSources();
 
   useOnClickOutside(dropdownRef, () => setIsDropdownOpen(false));
 
@@ -92,10 +88,6 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({ optio
     setIsDropdownOpen(false);
   };
 
-  const handleCloseModal = () => {
-    setCurrentModal('');
-  };
-
   return (
     <Container ref={dropdownRef}>
       <StyledButton onClick={handleToggle}>
@@ -113,16 +105,6 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({ optio
           ))}
         </DropdownListContainer>
       )}
-
-      <AddRuleModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.RULE} handleCloseModal={handleCloseModal} />
-      <AddSourceModal
-        isOpen={currentModal === OVERVIEW_ENTITY_TYPES.SOURCE}
-        onClose={handleCloseModal}
-        createSourcesForNamespace={createSourcesForNamespace}
-        persistNamespaceItems={persistNamespaceItems}
-      />
-      <AddActionModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.ACTION} handleCloseModal={handleCloseModal} />
-      <AddDestinationModal isModalOpen={currentModal === OVERVIEW_ENTITY_TYPES.DESTINATION} handleCloseModal={handleCloseModal} />
     </Container>
   );
 };
diff --git a/frontend/webapp/containers/main/overview/all-drawers/index.tsx b/frontend/webapp/containers/main/overview/all-drawers/index.tsx
new file mode 100644
index 000000000..0600ceb69
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/all-drawers/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useDrawerStore } from '@/store';
+import { OVERVIEW_ENTITY_TYPES } from '@/types';
+import { SourceDrawer } from '../../sources';
+import { ActionDrawer } from '../../actions';
+import { DestinationDrawer } from '../../destinations';
+import { RuleDrawer } from '../../instrumentation-rules/rule-drawer-container';
+
+const AllDrawers = () => {
+  const selected = useDrawerStore(({ selectedItem }) => selectedItem);
+
+  if (!selected?.item) return null;
+
+  switch (selected.type) {
+    case OVERVIEW_ENTITY_TYPES.RULE:
+      return <RuleDrawer />;
+
+    case OVERVIEW_ENTITY_TYPES.SOURCE:
+      return <SourceDrawer />;
+
+    case OVERVIEW_ENTITY_TYPES.ACTION:
+      return <ActionDrawer />;
+
+    case OVERVIEW_ENTITY_TYPES.DESTINATION:
+      return <DestinationDrawer />;
+
+    default:
+      return <></>;
+  }
+};
+
+export default AllDrawers;
diff --git a/frontend/webapp/containers/main/overview/all-modals/index.tsx b/frontend/webapp/containers/main/overview/all-modals/index.tsx
new file mode 100644
index 000000000..db2ac9bb2
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/all-modals/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useModalStore } from '@/store';
+import { OVERVIEW_ENTITY_TYPES } from '@/types';
+import { AddRuleModal } from '../../instrumentation-rules';
+import { AddActionModal } from '../../actions';
+import { AddDestinationModal } from '../../destinations/add-destination/add-destination-modal';
+import { AddSourceModal } from '../../sources/choose-sources/choose-source-modal';
+
+const AllModals = () => {
+  const selected = useModalStore(({ currentModal }) => currentModal);
+  const setSelected = useModalStore(({ setCurrentModal }) => setCurrentModal);
+
+  if (!selected) return null;
+
+  const handleClose = () => setSelected('');
+
+  switch (selected) {
+    case OVERVIEW_ENTITY_TYPES.RULE:
+      return <AddRuleModal isOpen onClose={handleClose} />;
+
+    case OVERVIEW_ENTITY_TYPES.SOURCE:
+      return <AddSourceModal isOpen onClose={handleClose} />;
+
+    case OVERVIEW_ENTITY_TYPES.ACTION:
+      return <AddActionModal isOpen onClose={handleClose} />;
+
+    case OVERVIEW_ENTITY_TYPES.DESTINATION:
+      return <AddDestinationModal isOpen onClose={handleClose} />;
+
+    default:
+      return <></>;
+  }
+};
+
+export default AllModals;
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index fdaccfc23..bd233065c 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -7,7 +7,11 @@ import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
 import { useGetActions, useActualSources, useContainerWidth, useActualDestination, useNodeDataFlowHandlers } from '@/hooks';
 import { useGetInstrumentationRules } from '@/hooks/instrumentation-rules/useGetInstrumentationRules';
 
-const OverviewDrawer = dynamic(() => import('../overview-drawer'), {
+const AllDrawers = dynamic(() => import('../all-drawers'), {
+  ssr: false,
+});
+
+const AllModals = dynamic(() => import('../all-modals'), {
   ssr: false,
 });
 
@@ -46,9 +50,11 @@ export function OverviewDataFlowContainer() {
 
   return (
     <OverviewDataFlowWrapper ref={containerRef}>
-      <OverviewDrawer />
       <OverviewActionMenuContainer />
       <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={handleNodeClick} columnWidth={columnWidth} />
+
+      <AllDrawers />
+      <AllModals />
     </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
index dd8492c6e..dec2d8c40 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/drawer-header/index.tsx
@@ -1,5 +1,5 @@
 // DrawerHeader.tsx
-import React, { useEffect, useState, forwardRef } from 'react';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 import { Button, Input, Text } from '@/reuseable-components';
@@ -37,11 +37,7 @@ const DrawerItemImageWrapper = styled.div`
   align-items: center;
   gap: 8px;
   border-radius: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(249, 249, 249, 0.06) 0%,
-    rgba(249, 249, 249, 0.02) 100%
-  );
+  background: linear-gradient(180deg, rgba(249, 249, 249, 0.06) 0%, rgba(249, 249, 249, 0.02) 100%);
 `;
 
 const EditButton = styled(Button)`
@@ -59,64 +55,61 @@ const ButtonText = styled(Text)`
   width: fit-content;
 `;
 
+export interface DrawerHeaderRef {
+  getTitle: () => string;
+  clearTitle: () => void;
+}
+
 interface DrawerHeaderProps {
   title: string;
   imageUri: string;
+  isEdit: boolean;
+  onEdit: () => void;
   onClose: () => void;
-  isEditing: boolean;
-  setIsEditing: (isEditing: boolean) => void;
 }
 
-const DrawerHeader = forwardRef<HTMLInputElement, DrawerHeaderProps>(
-  ({ title, imageUri, isEditing, setIsEditing, onClose }, ref) => {
-    const [inputValue, setInputValue] = useState(title);
-
-    useEffect(() => {
-      setInputValue(title);
-    }, [title]);
-
-    return (
-      <HeaderContainer>
-        <SectionItemsWrapper>
-          <DrawerItemImageWrapper>
-            <Image src={imageUri} alt="Drawer Item" width={16} height={16} />
-          </DrawerItemImageWrapper>
-          {!isEditing && <Title>{title}</Title>}
-        </SectionItemsWrapper>
-        {isEditing && (
-          <InputWrapper>
-            <Input
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              autoFocus
-              ref={ref}
-            />
-          </InputWrapper>
+const DrawerHeader = forwardRef<DrawerHeaderRef, DrawerHeaderProps>(({ title, imageUri, isEdit, onEdit, onClose }, ref) => {
+  const [inputValue, setInputValue] = useState(title);
+
+  useEffect(() => {
+    setInputValue(title);
+  }, [title]);
+
+  useImperativeHandle(ref, () => ({
+    getTitle: () => inputValue,
+    clearTitle: () => setInputValue(title),
+  }));
+
+  return (
+    <HeaderContainer>
+      <SectionItemsWrapper>
+        <DrawerItemImageWrapper>
+          <Image src={imageUri} alt='Drawer Item' width={16} height={16} />
+        </DrawerItemImageWrapper>
+        {!isEdit && <Title>{title}</Title>}
+      </SectionItemsWrapper>
+
+      {isEdit && (
+        <InputWrapper>
+          <Input autoFocus value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+        </InputWrapper>
+      )}
+
+      <SectionItemsWrapper gap={8}>
+        {!isEdit && (
+          <EditButton variant='tertiary' onClick={onEdit}>
+            <Image src='/icons/common/edit.svg' alt='Edit' width={16} height={16} />
+            <ButtonText>Edit</ButtonText>
+          </EditButton>
         )}
-        <SectionItemsWrapper gap={8}>
-          {!isEditing && (
-            <EditButton variant="tertiary" onClick={() => setIsEditing(true)}>
-              <Image
-                src="/icons/common/edit.svg"
-                alt="Edit"
-                width={16}
-                height={16}
-              />
-              <ButtonText>Edit</ButtonText>
-            </EditButton>
-          )}
-          <CloseButton variant="secondary" onClick={onClose}>
-            <Image
-              src="/icons/common/x.svg"
-              alt="Close"
-              width={11}
-              height={10}
-            />
-          </CloseButton>
-        </SectionItemsWrapper>
-      </HeaderContainer>
-    );
-  }
-);
+        <CloseButton variant='secondary' onClick={onClose}>
+          <Image src='/icons/common/x.svg' alt='Close' width={11} height={10} />
+        </CloseButton>
+      </SectionItemsWrapper>
+    </HeaderContainer>
+  );
+});
+
+DrawerHeader.displayName = 'DrawerHeader';
 
 export default DrawerHeader;
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 6fc795165..6e7bc319a 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -1,309 +1,109 @@
-import { useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useDrawerStore } from '@/store';
-import { getActionIcon, getRuleIcon, LANGUAGES_LOGOS } from '@/utils';
-import DrawerHeader from './drawer-header';
 import DrawerFooter from './drawer-footer';
-import { SourceDrawer } from '../../sources';
 import { Drawer } from '@/reuseable-components';
-import { DeleteEntityModal } from '@/components';
-import { ActionDrawer, type ActionDrawerHandle } from '../../actions';
-import { DestinationDrawer, type DestinationDrawerHandle } from '../../destinations';
-import { RuleDrawer, RuleDrawerHandle } from '../../instrumentation-rules/rule-drawer-container';
-import { useActionCRUD, useActualSources, useDestinationCRUD, useInstrumentationRuleCRUD } from '@/hooks';
-import { getMainContainerLanguageLogo, WORKLOAD_PROGRAMMING_LANGUAGES } from '@/utils/constants/programming-languages';
-import {
-  WorkloadId,
-  K8sActualSource,
-  ActualDestination,
-  OVERVIEW_ENTITY_TYPES,
-  PatchSourceRequestInput,
-  ActionDataParsed,
-  InstrumentationRuleSpec,
-} from '@/types';
-
-const componentMap = {
-  [OVERVIEW_ENTITY_TYPES.RULE]: RuleDrawer,
-  [OVERVIEW_ENTITY_TYPES.SOURCE]: SourceDrawer,
-  [OVERVIEW_ENTITY_TYPES.ACTION]: ActionDrawer,
-  [OVERVIEW_ENTITY_TYPES.DESTINATION]: DestinationDrawer,
-};
+import DrawerHeader, { DrawerHeaderRef } from './drawer-header';
+import { CancelWarning, DeleteWarning } from '@/components/modals';
 
 const DRAWER_WIDTH = '640px';
 
-const OverviewDrawer = () => {
-  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
-  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
-
-  const [isEditing, setIsEditing] = useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [title, setTitle] = useState('');
-
-  const { updateAction, deleteAction } = useActionCRUD();
-  const { updateDestination, deleteDestination } = useDestinationCRUD();
-  const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
-  const { updateInstrumentationRule, deleteInstrumentationRule } = useInstrumentationRuleCRUD();
-
-  const titleRef = useRef<HTMLInputElement>(null);
-  const ruleDrawerRef = useRef<RuleDrawerHandle>(null);
-  const actionDrawerRef = useRef<ActionDrawerHandle>(null);
-  const destinationDrawerRef = useRef<DestinationDrawerHandle>(null);
-
-  const refMap = {
-    [OVERVIEW_ENTITY_TYPES.RULE]: ruleDrawerRef,
-    [OVERVIEW_ENTITY_TYPES.SOURCE]: undefined,
-    [OVERVIEW_ENTITY_TYPES.ACTION]: actionDrawerRef,
-    [OVERVIEW_ENTITY_TYPES.DESTINATION]: destinationDrawerRef,
-  };
-
-  useEffect(initialTitle, [selectedItem]);
-
-  //TODO: split file to separate components by type: source, destination, action
+interface Props {
+  title: string;
+  imageUri: string;
+  isEdit: boolean;
+  clickEdit: (bool?: boolean) => void;
+  clickSave: (newTitle: string) => void;
+  clickDelete: () => void;
+  clickCancel: () => void;
+}
 
-  function initialTitle() {
-    let str = '';
+const DrawerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
 
-    if (!!selectedItem?.item) {
-      const { type, item } = selectedItem;
+const ContentArea = styled.div`
+  flex-grow: 1;
+  padding: 24px 32px;
+  overflow-y: auto;
+`;
 
-      if (type === OVERVIEW_ENTITY_TYPES.RULE) {
-        str = (item as InstrumentationRuleSpec).ruleName;
-      } else if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
-        str = (item as K8sActualSource).reportedName;
-      } else if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
-        str = (item as ActionDataParsed).spec.actionName;
-      } else if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
-        str = (item as ActualDestination).name;
-      }
-    }
+const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({
+  children,
+  title,
+  imageUri,
+  isEdit,
+  clickEdit,
+  clickSave,
+  clickDelete,
+  clickCancel,
+}) => {
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
-    setTitle(str);
-  }
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
 
-  const handleCancel = () => {
-    setIsEditing(false);
-    initialTitle();
-  };
+  const titleRef = useRef<DrawerHeaderRef>(null);
 
-  const handleClose = () => {
-    setIsEditing(false);
+  const closeDrawer = () => {
     setSelectedItem(null);
+    clickEdit(false);
     setIsDeleteModalOpen(false);
+    setIsCancelModalOpen(false);
   };
 
-  const handleCloseDeleteModal = () => {
+  const closeWarningModals = () => {
     setIsDeleteModalOpen(false);
+    setIsCancelModalOpen(false);
   };
 
-  const handleSave = async () => {
-    if (!selectedItem?.item) return null;
-    const { type, id, item } = selectedItem;
-
-    if (type === OVERVIEW_ENTITY_TYPES.RULE) {
-      const thisRef = refMap[type];
-
-      if (thisRef.current && titleRef.current) {
-        const newTitle = titleRef.current.value;
-        const formData = thisRef.current.getCurrentData();
-
-        if (formData) {
-          const payload = {
-            ...formData,
-            ruleName: newTitle,
-          };
-
-          await updateInstrumentationRule(id as string, payload);
-          setIsEditing(false);
-        }
-      }
-    }
-
-    if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
-      if (titleRef.current) {
-        const newTitle = titleRef.current.value;
-        setTitle(newTitle);
-
-        const { namespace, name, kind } = item as K8sActualSource;
-
-        const sourceId: WorkloadId = {
-          namespace,
-          kind,
-          name,
-        };
-
-        const patchRequest: PatchSourceRequestInput = {
-          reportedName: newTitle,
-        };
-
-        try {
-          await updateActualSource(sourceId, patchRequest);
-        } catch (error) {
-          console.error('Error updating source:', error);
-        }
-      }
-      setIsEditing(false);
-    }
-
-    if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
-      const thisRef = refMap[type];
-
-      if (thisRef.current && titleRef.current) {
-        const newTitle = titleRef.current.value;
-        const formData = thisRef.current.getCurrentData();
-
-        if (formData) {
-          const payload = {
-            ...formData,
-            name: newTitle,
-          };
-
-          await updateAction(id as string, payload);
-          setIsEditing(false);
-        }
-      }
-    }
+  const handleCancel = () => setIsCancelModalOpen(true);
+  const handleDelete = () => setIsDeleteModalOpen(true);
 
-    if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
-      const thisRef = refMap[type];
-
-      if (thisRef.current && titleRef.current) {
-        const newTitle = titleRef.current.value;
-        const formData = thisRef.current.getCurrentData();
-        const payload = {
-          ...formData,
-          name: newTitle,
-        };
-
-        try {
-          await updateDestination(id as string, payload);
-        } catch (error) {
-          console.error('Error updating destination:', error);
-        }
-        setIsEditing(false);
-      }
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!selectedItem?.item) return null;
-    const { type, item } = selectedItem;
-
-    if (type === OVERVIEW_ENTITY_TYPES.RULE) {
-      const { ruleId } = item as InstrumentationRuleSpec;
-
-      await deleteInstrumentationRule(ruleId);
-    }
-
-    if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
-      const { namespace, name, kind } = item as K8sActualSource;
-
-      try {
-        await deleteSourcesForNamespace(namespace, [
-          {
-            kind,
-            name,
-            selected: false,
-          },
-        ]);
-      } catch (error) {
-        console.error('Error deleting source:', error);
-      }
-    }
-
-    if (type === OVERVIEW_ENTITY_TYPES.ACTION) {
-      const { id, type } = item as ActionDataParsed;
-
-      await deleteAction(id, type);
-    }
-
-    if (type === OVERVIEW_ENTITY_TYPES.DESTINATION) {
-      const { id } = item as ActualDestination;
-
-      await deleteDestination(id);
-    }
-
-    handleClose();
-  };
-
-  if (!selectedItem?.item) return null;
-
-  const { type, item } = selectedItem;
-  const SpecificComponent = componentMap[type];
-  const specificRef = refMap[type];
-
-  return SpecificComponent ? (
+  return (
     <>
-      <Drawer isOpen onClose={handleClose} width={DRAWER_WIDTH} closeOnEscape={!isDeleteModalOpen}>
+      <Drawer isOpen onClose={closeDrawer} width={DRAWER_WIDTH} closeOnEscape={!isDeleteModalOpen && !isCancelModalOpen}>
         <DrawerContent>
           <DrawerHeader
             ref={titleRef}
             title={title}
-            onClose={isEditing ? handleCancel : handleClose}
-            imageUri={item ? getItemImageByType(type, item) : ''}
-            isEditing={isEditing}
-            setIsEditing={setIsEditing}
+            imageUri={imageUri}
+            isEdit={isEdit}
+            onEdit={() => clickEdit(true)}
+            onClose={isEdit ? handleCancel : closeDrawer}
           />
 
-          <ContentArea>
-            {/* @ts-ignore (because of ref) */}
-            <SpecificComponent ref={specificRef} isEditing={isEditing} />
-          </ContentArea>
+          <ContentArea>{children}</ContentArea>
 
-          {isEditing && <DrawerFooter onSave={handleSave} onCancel={handleCancel} onDelete={() => setIsDeleteModalOpen(true)} />}
+          {isEdit && <DrawerFooter onSave={() => clickSave(titleRef.current?.getTitle() || '')} onCancel={handleCancel} onDelete={handleDelete} />}
         </DrawerContent>
       </Drawer>
 
-      <DeleteEntityModal
-        title={title}
-        isModalOpen={isDeleteModalOpen}
-        handleDelete={handleDelete}
-        handleCloseModal={handleCloseDeleteModal}
-        description='Are you sure you want to delete this?'
+      <DeleteWarning
+        isOpen={isDeleteModalOpen}
+        name={`${selectedItem?.type}${title ? ` (${title})` : ''}`}
+        onApprove={() => {
+          clickDelete();
+          closeWarningModals();
+        }}
+        onDeny={closeWarningModals}
+      />
+
+      <CancelWarning
+        isOpen={isCancelModalOpen}
+        name='edit mode'
+        onApprove={() => {
+          titleRef.current?.clearTitle();
+          clickCancel();
+          closeWarningModals();
+        }}
+        onDeny={closeWarningModals}
       />
     </>
-  ) : null;
+  );
 };
 
-function getItemImageByType(
-  type: OVERVIEW_ENTITY_TYPES,
-  item: InstrumentationRuleSpec | K8sActualSource | ActionDataParsed | ActualDestination
-): string {
-  let src = '';
-
-  switch (type) {
-    case OVERVIEW_ENTITY_TYPES.RULE:
-      src = getRuleIcon((item as InstrumentationRuleSpec).type);
-      break;
-
-    case OVERVIEW_ENTITY_TYPES.SOURCE:
-      src = getMainContainerLanguageLogo(item as K8sActualSource);
-      break;
-
-    case OVERVIEW_ENTITY_TYPES.ACTION:
-      src = getActionIcon((item as ActionDataParsed).type);
-      break;
-
-    case OVERVIEW_ENTITY_TYPES.DESTINATION:
-      src = (item as ActualDestination).destinationType.imageUrl;
-      break;
-
-    default:
-      break;
-  }
-
-  return src || LANGUAGES_LOGOS[WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN];
-}
-
 export default OverviewDrawer;
-
-const DrawerContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-const ContentArea = styled.div`
-  flex-grow: 1;
-  padding: 24px 32px;
-  overflow-y: auto;
-`;
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
index a706cde73..1a9dcdecf 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import React, { useState, useCallback } from 'react';
-import { useConnectSourcesMenuState } from '@/hooks';
+import { useActualSources, useConnectSourcesMenuState } from '@/hooks';
 import { ChooseSourcesBody } from '../choose-sources-body';
 import { Modal, NavigationButtons } from '@/reuseable-components';
 import { K8sActualSource, PersistNamespaceItemInput } from '@/types';
@@ -15,15 +15,12 @@ const ChooseSourcesBodyWrapper = styled.div`
 interface AddSourceModalProps {
   isOpen: boolean;
   onClose: () => void;
-  createSourcesForNamespace: (namespaceName: string, sources: { kind: string; name: string; selected: boolean }[]) => Promise<void>;
-  persistNamespaceItems: (namespaceItems: PersistNamespaceItemInput[]) => Promise<void>;
 }
 
-export const AddSourceModal: React.FC<AddSourceModalProps> = ({ isOpen, onClose, createSourcesForNamespace, persistNamespaceItems }) => {
+export const AddSourceModal: React.FC<AddSourceModalProps> = ({ isOpen, onClose }) => {
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
-  const { stateMenu, stateHandlers } = useConnectSourcesMenuState({
-    sourcesList,
-  });
+  const { stateMenu, stateHandlers } = useConnectSourcesMenuState({ sourcesList });
+  const { createSourcesForNamespace, persistNamespaceItems } = useActualSources();
 
   const handleNextClick = useCallback(async () => {
     try {
@@ -49,22 +46,25 @@ export const AddSourceModal: React.FC<AddSourceModalProps> = ({ isOpen, onClose,
     } catch (error) {
       console.error('Error during handleNextClick:', error);
     }
-  }, [createSourcesForNamespace, persistNamespaceItems, stateMenu, onClose]);
-
-  const ModalActionComponent = (
-    <NavigationButtons
-      buttons={[
-        {
-          label: 'DONE',
-          onClick: handleNextClick,
-          variant: 'primary',
-        },
-      ]}
-    />
-  );
+  }, [stateMenu, onClose, createSourcesForNamespace, persistNamespaceItems]);
 
   return (
-    <Modal isOpen={isOpen} header={{ title: 'Add Source' }} actionComponent={ModalActionComponent} onClose={onClose}>
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      header={{ title: 'Add Source' }}
+      actionComponent={
+        <NavigationButtons
+          buttons={[
+            {
+              label: 'DONE',
+              onClick: handleNextClick,
+              variant: 'primary',
+            },
+          ]}
+        />
+      }
+    >
       <ChooseSourcesBodyWrapper>
         <ChooseSourcesBody isModal stateMenu={stateMenu} sourcesList={sourcesList} stateHandlers={stateHandlers} setSourcesList={setSourcesList} />
       </ChooseSourcesBodyWrapper>
diff --git a/frontend/webapp/containers/main/sources/edit.source/index.tsx b/frontend/webapp/containers/main/sources/edit.source/index.tsx
index d76dbea46..034ad237f 100644
--- a/frontend/webapp/containers/main/sources/edit.source/index.tsx
+++ b/frontend/webapp/containers/main/sources/edit.source/index.tsx
@@ -69,7 +69,7 @@ export function EditSourceForm() {
     setInputValue(currentSource?.reported_name || '');
   }, [currentSource]);
 
-  useKeyDown('Enter', handleKeyPress);
+  useKeyDown({ key: 'Enter', active: true }, handleKeyPress);
 
   function handleKeyPress(e: any) {
     onSaveClick();
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
index 3676e2d43..f19c48258 100644
--- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
@@ -1,17 +1,23 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useDrawerStore } from '@/store';
-import { K8sActualSource } from '@/types';
+import { useActualSources } from '@/hooks';
 import { CardDetails } from '@/components';
+import OverviewDrawer from '../../overview/overview-drawer';
+import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
+import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 
 const SourceDrawer: React.FC = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
+  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
 
   const cardData = useMemo(() => {
     if (!selectedItem) return [];
 
     // Destructure necessary fields from the selected item
-    const { name, kind, namespace, instrumentedApplicationDetails } =
-      selectedItem.item as K8sActualSource;
+    const { name, kind, namespace, instrumentedApplicationDetails } = selectedItem.item as K8sActualSource;
 
     // Extract the first container and condition if available
     const container = instrumentedApplicationDetails?.containers?.[0];
@@ -25,7 +31,72 @@ const SourceDrawer: React.FC = () => {
     ];
   }, [selectedItem]);
 
-  return <CardDetails data={cardData} />;
+  if (!selectedItem?.item) return null;
+  const { item } = selectedItem;
+
+  const handleEdit = (bool?: boolean) => {
+    if (typeof bool === 'boolean') {
+      setIsEditing(bool);
+    } else {
+      setIsEditing(true);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+  };
+
+  const handleDelete = async () => {
+    const { namespace, name, kind } = item as K8sActualSource;
+
+    try {
+      await deleteSourcesForNamespace(namespace, [
+        {
+          kind,
+          name,
+          selected: false,
+        },
+      ]);
+      setSelectedItem(null);
+    } catch (error) {
+      console.error('Error deleting source:', error);
+    }
+  };
+
+  const handleSave = async (newTitle: string) => {
+    const { namespace, name, kind } = item as K8sActualSource;
+
+    const sourceId: WorkloadId = {
+      namespace,
+      kind,
+      name,
+    };
+
+    const patchRequest: PatchSourceRequestInput = {
+      reportedName: newTitle,
+    };
+
+    try {
+      await updateActualSource(sourceId, patchRequest);
+      setSelectedItem(null);
+    } catch (error) {
+      console.error('Error updating source:', error);
+    }
+  };
+
+  return (
+    <OverviewDrawer
+      title={(item as K8sActualSource).reportedName}
+      imageUri={getMainContainerLanguageLogo(item as K8sActualSource)}
+      isEdit={isEditing}
+      clickEdit={handleEdit}
+      clickSave={handleSave}
+      clickDelete={handleDelete}
+      clickCancel={handleCancel}
+    >
+      <CardDetails data={cardData} />
+    </OverviewDrawer>
+  );
 };
 
 export { SourceDrawer };
diff --git a/frontend/webapp/hooks/useKeyDown.ts b/frontend/webapp/hooks/useKeyDown.ts
index ae3a2a66e..5598b8673 100644
--- a/frontend/webapp/hooks/useKeyDown.ts
+++ b/frontend/webapp/hooks/useKeyDown.ts
@@ -1,9 +1,28 @@
 import { useEffect } from 'react';
 
-export function useKeyDown(key: Key | null, callback: (e: KeyboardEvent) => void) {
+interface KeyDownOptions {
+  active: boolean;
+  key: Key;
+  withAltKey?: boolean;
+  withCtrlKey?: boolean;
+  withShiftKey?: boolean;
+  withMetaKey?: boolean;
+}
+
+export function useKeyDown(
+  { active, key, withAltKey, withCtrlKey, withShiftKey, withMetaKey }: KeyDownOptions,
+  callback: (e: KeyboardEvent) => void
+) {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (key && key === e.key) {
+      if (
+        active &&
+        key === e.key &&
+        (!withAltKey || (withAltKey && e.altKey)) &&
+        (!withCtrlKey || (withCtrlKey && e.ctrlKey)) &&
+        (!withShiftKey || (withShiftKey && e.shiftKey)) &&
+        (!withMetaKey || (withMetaKey && e.metaKey))
+      ) {
         e.preventDefault();
         e.stopPropagation();
 
@@ -16,7 +35,7 @@ export function useKeyDown(key: Key | null, callback: (e: KeyboardEvent) => void
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [key, callback]);
+  }, [key, active, withAltKey, withCtrlKey, withShiftKey, withMetaKey, callback]);
 
   return null;
 }
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index 79d049acb..b86c66b74 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -2,7 +2,7 @@ import React, { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning';
   isDisabled?: boolean;
 }
 
@@ -63,6 +63,20 @@ const variantStyles = {
       background: ${({ theme }) => theme.colors.danger};
     }
   `,
+  warning: css`
+    border-color: transparent;
+    background: ${({ theme }) => theme.colors.warning};
+    &:hover {
+      background: ${({ theme }) => theme.colors.warning};
+      opacity: 0.9;
+    }
+    &:active {
+      background: ${({ theme }) => theme.colors.warning};
+    }
+    &:focus {
+      background: ${({ theme }) => theme.colors.warning};
+    }
+  `,
 };
 
 const StyledButton = styled.button<ButtonProps>`
@@ -91,7 +105,7 @@ const StyledButton = styled.button<ButtonProps>`
 `;
 
 const ButtonContainer = styled.div<{
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger';
+  variant: ButtonProps['variant'];
 }>`
   height: fit-content;
   border: 2px solid transparent;
diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
index 3f3980dd9..b0c3a84ad 100644
--- a/frontend/webapp/reuseable-components/drawer/index.tsx
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -32,10 +32,13 @@ const DrawerContainer = styled.div<{
 `;
 
 export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, position = 'right', width = '300px', children, closeOnEscape = true }) => {
-  useKeyDown(isOpen ? 'Escape' : null, () => {
-    if (!closeOnEscape) return;
-    onClose();
-  });
+  useKeyDown(
+    {
+      key: 'Escape',
+      active: isOpen && closeOnEscape,
+    },
+    () => onClose()
+  );
 
   if (!isOpen) return null;
 
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 0172e7c88..d20bac721 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -10,6 +10,7 @@ export * from './counter';
 export * from './toggle';
 export * from './checkbox';
 export * from './modal';
+export * from './modal/warning-modal';
 export * from './modal/styled';
 export * from './navigation-buttons';
 export * from './tag';
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index 02c8411e0..c1c2d10a0 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import Image from 'next/image';
 import { Text } from '../text';
 import ReactDOM from 'react-dom';
-import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
 import { fade, Overlay } from '@/styles';
+import { useKeyDown, useOnClickOutside } from '@/hooks';
 
 interface ModalProps {
   isOpen: boolean;
+  noOverlay?: boolean;
   header?: {
     title: string;
   };
@@ -82,17 +83,24 @@ const CancelText = styled(Text)`
   cursor: pointer;
 `;
 
-const Modal: React.FC<ModalProps> = ({ isOpen, header, onClose, children, actionComponent }) => {
-  useKeyDown(isOpen ? 'Escape' : null, () => {
-    onClose();
-  });
+const Modal: React.FC<ModalProps> = ({ isOpen, noOverlay, header, onClose, children, actionComponent }) => {
+  const ref = useRef(null);
+  useOnClickOutside(ref, () => onClose());
+  useKeyDown(
+    {
+      key: 'Escape',
+      active: isOpen,
+    },
+    () => onClose()
+  );
 
   if (!isOpen) return null;
 
   return ReactDOM.createPortal(
     <>
-      <Overlay hidden={!isOpen} onClick={onClose} />
-      <ModalWrapper isOpen={isOpen}>
+      <Overlay hideOverlay={noOverlay} />
+
+      <ModalWrapper ref={ref} isOpen={isOpen}>
         {header && (
           <ModalHeader>
             <ModalCloseButton onClick={onClose}>
diff --git a/frontend/webapp/reuseable-components/modal/warning-modal/index.tsx b/frontend/webapp/reuseable-components/modal/warning-modal/index.tsx
new file mode 100644
index 000000000..a3c9135a3
--- /dev/null
+++ b/frontend/webapp/reuseable-components/modal/warning-modal/index.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, ButtonProps, Modal, Text } from '@/reuseable-components';
+import { useKeyDown } from '@/hooks';
+
+interface ButtonParams {
+  text: string;
+  variant?: ButtonProps['variant'];
+  onClick: () => void;
+}
+
+interface Props {
+  isOpen: boolean;
+  noOverlay?: boolean;
+  title: string;
+  description: string;
+  approveButton: ButtonParams;
+  denyButton: ButtonParams;
+}
+
+const Container = styled.div`
+  padding: 24px 32px;
+`;
+
+const Content = styled.div`
+  padding: 12px 0px 32px 0;
+`;
+
+const Title = styled(Text)`
+  font-size: 20px;
+  line-height: 28px;
+`;
+
+const Description = styled(Text)`
+  color: ${({ theme }) => theme.text.grey};
+  width: 416px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 24px;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+`;
+
+const FooterButton = styled(Button)`
+  width: 224px;
+`;
+
+export const WarningModal: React.FC<Props> = ({ isOpen, noOverlay, title = '', description = '', approveButton, denyButton }) => {
+  useKeyDown(
+    {
+      key: 'Enter',
+      active: isOpen,
+    },
+    () => approveButton.onClick()
+  );
+
+  return (
+    <Modal isOpen={isOpen} noOverlay={noOverlay} onClose={denyButton.onClick}>
+      <Container>
+        <Title>{title}</Title>
+
+        <Content>
+          <Description>{description}</Description>
+        </Content>
+
+        <Footer>
+          <FooterButton variant={approveButton.variant || 'primary'} onClick={approveButton.onClick}>
+            {approveButton.text}
+          </FooterButton>
+          <FooterButton variant={denyButton.variant || 'secondary'} onClick={denyButton.onClick}>
+            {denyButton.text}
+          </FooterButton>
+        </Footer>
+      </Container>
+    </Modal>
+  );
+};
diff --git a/frontend/webapp/styles/styled.tsx b/frontend/webapp/styles/styled.tsx
index e80d8b763..94f71a0e3 100644
--- a/frontend/webapp/styles/styled.tsx
+++ b/frontend/webapp/styles/styled.tsx
@@ -9,7 +9,7 @@ export const HideScroll = styled.div`
   scrollbar-width: none;
 `;
 
-export const Overlay = styled.div<{ hidden?: boolean }>`
+export const Overlay = styled.div<{ hideOverlay?: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
@@ -18,5 +18,5 @@ export const Overlay = styled.div<{ hidden?: boolean }>`
   z-index: 999;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(1px);
-  visibility: ${({ hidden }) => (hidden ? 'hidden' : 'visible')};
+  opacity: ${({ hideOverlay }) => (hideOverlay ? 0 : 1)};
 `;
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 7d2102542..5ba050089 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -14,6 +14,7 @@ const colors = {
   dropdown_bg: '#242424',
   blank_background: '#11111100',
   danger: '#EF7676',
+  warning: '#E9CF35',
   white_opacity: {
     '004': 'rgba(249, 249, 249, 0.04)',
     '008': 'rgba(249, 249, 249, 0.08)',

From 0dab5bda3e12074fcd9f6b037d8819acf81d01ea Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 4 Nov 2024 14:22:09 +0200
Subject: [PATCH 334/374] [GEN-1626]: add mockup for overview filters (#1683)

---
 .../overview/add-entity/index.tsx             |  4 +-
 .../components/overview/filters/index.tsx     | 85 +++++++++++++++++++
 frontend/webapp/components/overview/index.tsx |  3 +
 .../overview/monitors-legend/index.tsx        | 42 +++++++++
 .../overview/overview-actions-menu/index.tsx  | 45 ++++++----
 .../webapp/public/icons/common/eye-closed.svg |  9 ++
 .../webapp/public/icons/common/eye-open.svg   |  6 ++
 .../webapp/public/icons/common/filter.svg     |  3 +
 .../public/icons/overview/service-map.svg     |  3 +
 .../public/icons/overview/trace-view.svg      |  3 +
 .../reuseable-components/dropdown/index.tsx   | 84 ++++--------------
 .../reuseable-components/input/index.tsx      | 23 +++--
 .../reuseable-components/modal/index.tsx      | 10 +--
 .../reuseable-components/tab-list/index.tsx   | 54 +++++++-----
 frontend/webapp/styles/styled.tsx             |  2 +-
 frontend/webapp/styles/theme.ts               |  3 +-
 frontend/webapp/utils/constants/monitors.tsx  |  7 +-
 17 files changed, 264 insertions(+), 122 deletions(-)
 rename frontend/webapp/{containers/main => components}/overview/add-entity/index.tsx (94%)
 create mode 100644 frontend/webapp/components/overview/filters/index.tsx
 create mode 100644 frontend/webapp/components/overview/monitors-legend/index.tsx
 create mode 100644 frontend/webapp/public/icons/common/eye-closed.svg
 create mode 100644 frontend/webapp/public/icons/common/eye-open.svg
 create mode 100644 frontend/webapp/public/icons/common/filter.svg
 create mode 100644 frontend/webapp/public/icons/overview/service-map.svg
 create mode 100644 frontend/webapp/public/icons/overview/trace-view.svg

diff --git a/frontend/webapp/containers/main/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx
similarity index 94%
rename from frontend/webapp/containers/main/overview/add-entity/index.tsx
rename to frontend/webapp/components/overview/add-entity/index.tsx
index c353c5dd4..1e175e778 100644
--- a/frontend/webapp/containers/main/overview/add-entity/index.tsx
+++ b/frontend/webapp/components/overview/add-entity/index.tsx
@@ -70,7 +70,7 @@ interface AddEntityButtonDropdownProps {
   placeholder?: string;
 }
 
-const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
+const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
   const { setCurrentModal } = useModalStore();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -109,4 +109,4 @@ const AddEntityButtonDropdown: React.FC<AddEntityButtonDropdownProps> = ({ optio
   );
 };
 
-export { AddEntityButtonDropdown };
+export { AddEntity };
diff --git a/frontend/webapp/components/overview/filters/index.tsx b/frontend/webapp/components/overview/filters/index.tsx
new file mode 100644
index 000000000..5e64aa18a
--- /dev/null
+++ b/frontend/webapp/components/overview/filters/index.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { DropdownOption } from '@/types';
+import { Button, Dropdown, Text } from '@/reuseable-components';
+
+const Container = styled.div`
+  position: relative;
+`;
+
+const ButtonText = styled(Text)`
+  font-family: ${({ theme }) => theme.font_family.primary};
+  font-size: 14px;
+  text-transform: none;
+  margin: 0 6px;
+`;
+
+const Badge = styled.div`
+  background-color: ${({ theme }) => theme.colors.majestic_blue};
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const CardWrapper = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  border: ${({ theme }) => `1px solid ${theme.colors.border}`};
+  border-radius: 24px;
+  width: 360px;
+`;
+
+const CardContent = styled.div`
+  padding: 16px;
+  gap: 12px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Filters = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleOpen = () => setIsOpen((prev) => !prev);
+
+  const [namespace, setNamespace] = useState<DropdownOption | undefined>(undefined);
+  const [filters, setFilters] = useState<DropdownOption[]>([]);
+  const [metrics, setMetrics] = useState<DropdownOption[]>([]);
+
+  return (
+    <Container>
+      <Button variant='secondary' style={{ textDecoration: 'none' }} onClick={toggleOpen}>
+        <Image src='/icons/common/filter.svg' alt='filter' width={14} height={14} />
+        <ButtonText>Filters</ButtonText>
+        <Badge>{filters.length}</Badge>
+      </Button>
+
+      {isOpen && (
+        <CardWrapper>
+          <CardContent>
+            <Dropdown
+              title='Namespace'
+              placeholder='Select namespace'
+              options={[]}
+              value={namespace}
+              onSelect={(val) => setNamespace(val)}
+              required
+            />
+
+            {/* TODO: make this a multi-select dropwdown (with internal checkboxes) */}
+            <Dropdown title='Type' placeholder='All' options={[]} value={filters[0]} onSelect={(val) => setFilters((prev) => prev)} required />
+            {/* TODO: make this a multi-select dropwdown (with internal checkboxes) */}
+            <Dropdown title='Metric' placeholder='All' options={[]} value={metrics[0]} onSelect={(val) => setMetrics((prev) => prev)} required />
+          </CardContent>
+        </CardWrapper>
+      )}
+    </Container>
+  );
+};
+
+export { Filters };
diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index 7e5d4344a..260290801 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -6,3 +6,6 @@ export * from './add.item.menu';
 export * from './actions';
 export * from './sources';
 export * from './destination';
+export * from './add-entity';
+export * from './filters';
+export * from './monitors-legend';
diff --git a/frontend/webapp/components/overview/monitors-legend/index.tsx b/frontend/webapp/components/overview/monitors-legend/index.tsx
new file mode 100644
index 000000000..45fb6ed17
--- /dev/null
+++ b/frontend/webapp/components/overview/monitors-legend/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Image from 'next/image';
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+import { MONITORS_OPTIONS } from '@/utils';
+import { Text } from '@/reuseable-components';
+
+const List = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`;
+
+const ListItem = styled.div`
+  display: flex;
+  align-listitems: center;
+  gap: 4px;
+`;
+
+const MonitorsLegend = () => {
+  return (
+    <List>
+      {MONITORS_OPTIONS.map(({ id, value }) => (
+        <ListItem key={`monitors-legend-${id}`}>
+          <Image
+            src={`/icons/monitors/${id}.svg`}
+            width={14}
+            height={14}
+            alt={value}
+            style={{ filter: 'invert(40%) brightness(80%) grayscale(100%)' }}
+          />
+
+          <Text size={14} color={theme.text.grey}>
+            {value}
+          </Text>
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export { MonitorsLegend };
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
index eb1237421..830afe98f 100644
--- a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Input, TabList } from '@/reuseable-components';
-import { AddEntityButtonDropdown } from '../add-entity';
-import { DropdownOption } from '@/types';
+import { AddEntity, Filters, MonitorsLegend } from '@/components';
 
 const MenuContainer = styled.div`
   display: flex;
@@ -10,10 +9,6 @@ const MenuContainer = styled.div`
   margin: 20px 0;
 `;
 
-const SearchInputContainer = styled.div`
-  width: 200px;
-`;
-
 const DividerContainer = styled.div`
   height: 100%;
   display: flex;
@@ -27,30 +22,48 @@ const Divider = styled.div`
   margin: 0 16px;
 `;
 
+const SearchContainer = styled.div`
+  width: 200px;
+`;
+
+const FilterContainer = styled.div`
+  margin-left: 12px;
+`;
+
+const MonitorsContainer = styled.div`
+  margin: 0 24px;
+`;
+
 // Aligns the AddEntityButtonDropdown to the right
 const StyledAddEntityButtonDropdownWrapper = styled.div`
   margin-left: auto;
 `;
 
 export function OverviewActionMenuContainer() {
-  const [searchFilter, setSearchFilter] = useState<string>('');
+  const [search, setSearch] = useState<string>('');
 
   return (
     <MenuContainer>
       <TabList />
+
       <DividerContainer>
         <Divider />
       </DividerContainer>
-      <SearchInputContainer>
-        <Input
-          placeholder="Search "
-          icon={'/icons/common/search.svg'}
-          value={searchFilter}
-          onChange={(e) => setSearchFilter(e.target.value)}
-        />
-      </SearchInputContainer>
+
+      <SearchContainer>
+        <Input placeholder='Search' icon='/icons/common/search.svg' value={search} onChange={(e) => setSearch(e.target.value)} />
+      </SearchContainer>
+
+      <FilterContainer>
+        <Filters />
+      </FilterContainer>
+
+      <MonitorsContainer>
+        <MonitorsLegend />
+      </MonitorsContainer>
+
       <StyledAddEntityButtonDropdownWrapper>
-        <AddEntityButtonDropdown />
+        <AddEntity />
       </StyledAddEntityButtonDropdownWrapper>
     </MenuContainer>
   );
diff --git a/frontend/webapp/public/icons/common/eye-closed.svg b/frontend/webapp/public/icons/common/eye-closed.svg
new file mode 100644
index 000000000..2eb5156c1
--- /dev/null
+++ b/frontend/webapp/public/icons/common/eye-closed.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.83 9.17999C14.2706 8.61995 13.5576 8.23846 12.7813 8.08386C12.0049 7.92926 11.2002 8.00851 10.4689 8.31152C9.73758 8.61453 9.11264 9.12769 8.67316 9.78607C8.23367 10.4444 7.99938 11.2184 8 12.01C7.99916 13.0663 8.41619 14.08 9.16004 14.83" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 16.01C13.0609 16.01 14.0783 15.5886 14.8284 14.8384C15.5786 14.0883 16 13.0709 16 12.01" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.61 6.39004L6.38 17.62C4.6208 15.9966 3.14099 14.0944 2 11.99C6.71 3.76002 12.44 1.89004 17.61 6.39004Z" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9994 3L17.6094 6.39" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.38 17.62L3 21" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.5695 8.42999C20.4801 9.55186 21.2931 10.7496 21.9995 12.01C17.9995 19.01 13.2695 21.4 8.76953 19.23" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/eye-open.svg b/frontend/webapp/public/icons/common/eye-open.svg
new file mode 100644
index 000000000..d132bd861
--- /dev/null
+++ b/frontend/webapp/public/icons/common/eye-open.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16.01C14.2091 16.01 16 14.2191 16 12.01C16 9.80087 14.2091 8.01001 12 8.01001C9.79086 8.01001 8 9.80087 8 12.01C8 14.2191 9.79086 16.01 12 16.01Z" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 11.98C8.09 1.31996 15.91 1.32996 22 11.98" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 12.01C15.91 22.67 8.09 22.66 2 12.01" stroke="#B8B8B8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/filter.svg b/frontend/webapp/public/icons/common/filter.svg
new file mode 100644
index 000000000..03ee6a5ac
--- /dev/null
+++ b/frontend/webapp/public/icons/common/filter.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.33341 8H10.6667M7.33341 12H8.66675M2.66675 4H13.3334" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/public/icons/overview/service-map.svg b/frontend/webapp/public/icons/overview/service-map.svg
new file mode 100644
index 000000000..41f3e95a1
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/service-map.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.67333 8.61735H4.66667M7.34667 8.61735H7.34M9.66667 7.61735L10.6668 8.61744M10.6668 8.61744L11.6667 9.61735M10.6668 8.61744L11.6668 7.61735M10.6668 8.61744L9.66684 9.61735M6.95406 3.76106L9.05573 4.81189C9.39594 4.982 9.56605 5.06705 9.74417 5.10188C9.91313 5.13491 10.0869 5.13491 10.2558 5.10188C10.434 5.06705 10.6041 4.982 10.9443 4.81189C11.9382 4.31494 12.4351 4.06646 12.8395 4.11932C13.2185 4.16887 13.5581 4.37871 13.7719 4.69556C14 5.0336 14 5.58921 14 6.70044V10.6322C14 11.1108 14 11.3501 13.9271 11.5614C13.8627 11.7482 13.7575 11.9184 13.6192 12.0596C13.4628 12.2193 13.2488 12.3263 12.8207 12.5403L10.9541 13.4737C10.6042 13.6486 10.4293 13.736 10.2459 13.7705C10.0834 13.8009 9.91663 13.8009 9.75414 13.7705C9.57067 13.736 9.39576 13.6486 9.04595 13.4737L6.94427 12.4228C6.60406 12.2527 6.43395 12.1677 6.25583 12.1328C6.08687 12.0998 5.91313 12.0998 5.74417 12.1328C5.56605 12.1677 5.39594 12.2527 5.05573 12.4228C4.06182 12.9198 3.56486 13.1683 3.16049 13.1154C2.78147 13.0658 2.44195 12.856 2.22812 12.5392C2 12.2011 2 11.6455 2 10.5343V6.6025C2 6.12389 2 5.88458 2.07287 5.67331C2.13732 5.48648 2.24249 5.31631 2.38078 5.17511C2.53715 5.01545 2.7512 4.90843 3.17928 4.69439L5.04594 3.76106C5.39576 3.58615 5.57067 3.49869 5.75414 3.46427C5.91663 3.43378 6.08337 3.43378 6.24586 3.46427C6.42933 3.49869 6.60424 3.58615 6.95406 3.76106Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/public/icons/overview/trace-view.svg b/frontend/webapp/public/icons/overview/trace-view.svg
new file mode 100644
index 000000000..5fd2f9a33
--- /dev/null
+++ b/frontend/webapp/public/icons/overview/trace-view.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2.66666 8.61719H6.66666M2.66666 12.6172H6.66666M2.66666 4.61719H13.3333M14 12.9505L13.0809 12.0315M13.0809 12.0315C13.4438 11.6686 13.6667 11.1686 13.6667 10.6172C13.6667 9.51147 12.7724 8.61719 11.6667 8.61719C10.5609 8.61719 9.66666 9.51147 9.66666 10.6172C9.66666 11.7229 10.5609 12.6172 11.6667 12.6172C12.2181 12.6172 12.7181 12.3943 13.0809 12.0315Z" stroke="#F9F9F9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index 25177ca7a..251e5721e 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -1,14 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Input } from '../input';
-import styled, { css } from 'styled-components';
-import { Tooltip } from '../tooltip';
 import Image from 'next/image';
 import { Text } from '../text';
+import ReactDOM from 'react-dom';
 import { Divider } from '../divider';
 import { DropdownOption } from '@/types';
+import { FieldLabel } from '../field-label';
 import { useOnClickOutside } from '@/hooks';
-import ReactDOM from 'react-dom';
 import { NoDataFound } from '../no-data-found';
+import styled, { css } from 'styled-components';
 
 interface DropdownProps {
   options: DropdownOption[];
@@ -18,6 +18,7 @@ interface DropdownProps {
   tooltip?: string;
   placeholder?: string;
   showSearch?: boolean;
+  required?: boolean;
 }
 
 const Container = styled.div`
@@ -27,8 +28,6 @@ const Container = styled.div`
   width: 100%;
 `;
 
-const Title = styled(Text)``;
-
 const DropdownHeader = styled.div<{ isOpen: boolean }>`
   display: flex;
   align-items: center;
@@ -93,27 +92,12 @@ const DropdownItem = styled.div<{ isSelected: boolean }>`
     `}
 `;
 
-const HeaderWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 4px;
-`;
-
 const OpenDropdownIcon = styled(Image)<{ isOpen: boolean }>`
   transition: transform 0.3s;
   transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
 `;
 
-const Dropdown: React.FC<DropdownProps> = ({
-  options,
-  value,
-  onSelect,
-  title,
-  tooltip,
-  placeholder,
-  showSearch = true,
-}) => {
+const Dropdown: React.FC<DropdownProps> = ({ options, value, onSelect, title, tooltip, placeholder, showSearch = true, required }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
   const [dropdownPosition, setDropdownPosition] = useState({
@@ -139,9 +123,7 @@ const Dropdown: React.FC<DropdownProps> = ({
     }
   }, [isOpen]);
 
-  const filteredOptions = options.filter((option) =>
-    option.value.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const filteredOptions = options.filter((option) => option.value.toLowerCase().includes(searchTerm.toLowerCase()));
 
   const handleSelect = (option: DropdownOption) => {
     onSelect(option);
@@ -178,33 +160,15 @@ const Dropdown: React.FC<DropdownProps> = ({
       <DropdownListContainer ref={dropdownRef}>
         {showSearch && (
           <SearchInputContainer>
-            <Input
-              placeholder="Search..."
-              icon={'/icons/common/search.svg'}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-            <Divider thickness={1} margin="8px 0 0 0" />
+            <Input placeholder='Search...' icon={'/icons/common/search.svg'} value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
+            <Divider thickness={1} margin='8px 0 0 0' />
           </SearchInputContainer>
         )}
-        {filteredOptions.length === 0 && (
-          <NoDataFound title="No data found" subTitle=" " />
-        )}
+        {filteredOptions.length === 0 && <NoDataFound title='No data found' subTitle=' ' />}
         {filteredOptions.map((option) => (
-          <DropdownItem
-            key={option.id}
-            isSelected={option.id === value?.id}
-            onClick={() => handleSelect(option)}
-          >
+          <DropdownItem key={option.id} isSelected={option.id === value?.id} onClick={() => handleSelect(option)}>
             <Text size={14}>{option.value}</Text>
-            {option.id === value?.id && (
-              <Image
-                src="/icons/common/check.svg"
-                alt=""
-                width={16}
-                height={16}
-              />
-            )}
+            {option.id === value?.id && <Image src='/icons/common/check.svg' alt='' width={16} height={16} />}
           </DropdownItem>
         ))}
       </DropdownListContainer>
@@ -213,31 +177,13 @@ const Dropdown: React.FC<DropdownProps> = ({
 
   return (
     <Container ref={containerRef}>
-      {title && (
-        <Tooltip text={tooltip || ''}>
-          <HeaderWrapper>
-            <Title>{title}</Title>
-            {tooltip && (
-              <Image
-                src="/icons/common/info.svg"
-                alt=""
-                width={16}
-                height={16}
-              />
-            )}
-          </HeaderWrapper>
-        </Tooltip>
-      )}
+      <FieldLabel title={title} required={required} tooltip={tooltip} />
+
       <DropdownHeader isOpen={isOpen} onClick={handleDropdownToggle}>
         <Text size={14}>{value?.value || placeholder}</Text>
-        <OpenDropdownIcon
-          src="/icons/common/extend-arrow.svg"
-          alt="open-dropdown"
-          width={12}
-          height={12}
-          isOpen={isOpen}
-        />
+        <OpenDropdownIcon src='/icons/common/extend-arrow.svg' alt='open-dropdown' width={12} height={12} isOpen={isOpen} />
       </DropdownHeader>
+
       {isOpen && ReactDOM.createPortal(dropdownContent, document.body)}
     </Container>
   );
diff --git a/frontend/webapp/reuseable-components/input/index.tsx b/frontend/webapp/reuseable-components/input/index.tsx
index 9f3f4ea74..53d846a8a 100644
--- a/frontend/webapp/reuseable-components/input/index.tsx
+++ b/frontend/webapp/reuseable-components/input/index.tsx
@@ -61,7 +61,7 @@ const InputWrapper = styled.div<{
   }
 `;
 
-const StyledInput = styled.input<{ hasIcon?: string }>`
+const StyledInput = styled.input<{ hasIcon: boolean }>`
   padding-left: ${({ hasIcon }) => (hasIcon ? '0' : '16px')};
   flex: 1;
   border: none;
@@ -96,6 +96,10 @@ const IconWrapper = styled.div`
   margin-left: 12px;
 `;
 
+const IconWrapperClickable = styled(IconWrapper)`
+  cursor: pointer;
+`;
+
 const Button = styled.button`
   background-color: ${({ theme }) => theme.colors.primary};
   border: none;
@@ -128,7 +132,9 @@ const ErrorMessage = styled(Text)`
 
 // Wrap Input with forwardRef to handle the ref prop
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ icon, buttonLabel, onButtonClick, errorMessage, title, tooltip, required, initialValue, onChange, ...props }, ref) => {
+  ({ icon, buttonLabel, onButtonClick, errorMessage, title, tooltip, required, initialValue, onChange, type = 'text', ...props }, ref) => {
+    const isSecret = type === 'password';
+    const [revealSecret, setRevealSecret] = useState(false);
     const [value, setValue] = useState<string>(initialValue || '');
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -143,18 +149,25 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         <FieldLabel title={title} required={required} tooltip={tooltip} />
 
         <InputWrapper isDisabled={props.disabled} hasError={!!errorMessage} isActive={!!props.autoFocus}>
-          {icon && (
+          {isSecret ? (
+            <IconWrapperClickable onClick={() => setRevealSecret((prev) => !prev)}>
+              <Image src={revealSecret ? '/icons/common/eye-closed.svg' : '/icons/common/eye-open.svg'} alt='' width={14} height={14} />
+            </IconWrapperClickable>
+          ) : icon ? (
             <IconWrapper>
               <Image src={icon} alt='' width={14} height={14} />
             </IconWrapper>
-          )}
+          ) : null}
+
           <StyledInput
             ref={ref} // Pass ref to the StyledInput
-            hasIcon={icon}
+            hasIcon={!!icon || isSecret}
             value={value}
             onChange={handleInputChange}
+            type={revealSecret ? 'text' : type}
             {...props}
           />
+
           {buttonLabel && onButtonClick && (
             <Button onClick={onButtonClick} disabled={props.disabled}>
               {buttonLabel}
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index c1c2d10a0..89a8cecde 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -1,10 +1,10 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import { Text } from '../text';
 import ReactDOM from 'react-dom';
+import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
 import { fade, Overlay } from '@/styles';
-import { useKeyDown, useOnClickOutside } from '@/hooks';
 
 interface ModalProps {
   isOpen: boolean;
@@ -84,8 +84,6 @@ const CancelText = styled(Text)`
 `;
 
 const Modal: React.FC<ModalProps> = ({ isOpen, noOverlay, header, onClose, children, actionComponent }) => {
-  const ref = useRef(null);
-  useOnClickOutside(ref, () => onClose());
   useKeyDown(
     {
       key: 'Escape',
@@ -98,9 +96,9 @@ const Modal: React.FC<ModalProps> = ({ isOpen, noOverlay, header, onClose, child
 
   return ReactDOM.createPortal(
     <>
-      <Overlay hideOverlay={noOverlay} />
+      <Overlay hideOverlay={noOverlay} onClick={onClose} />
 
-      <ModalWrapper ref={ref} isOpen={isOpen}>
+      <ModalWrapper isOpen={isOpen}>
         {header && (
           <ModalHeader>
             <ModalCloseButton onClick={onClose}>
diff --git a/frontend/webapp/reuseable-components/tab-list/index.tsx b/frontend/webapp/reuseable-components/tab-list/index.tsx
index 0b092c475..49b6ad0e7 100644
--- a/frontend/webapp/reuseable-components/tab-list/index.tsx
+++ b/frontend/webapp/reuseable-components/tab-list/index.tsx
@@ -1,13 +1,16 @@
 import Image from 'next/image';
 import React from 'react';
-import styled from 'styled-components';
 import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
 
 // Define types for the Tab component props
 interface TabProps {
   title: string;
+  tooltip?: string;
   icon: string;
   selected: boolean;
+  disabled?: boolean;
   onClick: () => void;
 }
 
@@ -17,20 +20,20 @@ interface TabListProps {
 }
 
 // Styled-components for Tab and TabList
-const TabContainer = styled.div<{ selected: boolean }>`
+const TabContainer = styled.div<{ selected: TabProps['selected']; disabled: TabProps['disabled'] }>`
   display: flex;
   align-items: center;
   gap: 8px;
   height: 36px;
   padding: 0px 12px;
   border-radius: 32px;
-  cursor: pointer;
-  background-color: ${({ selected, theme }) =>
-    selected ? theme.colors.selected_hover : theme.colors.card};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  background-color: ${({ selected, theme }) => (selected ? theme.colors.selected_hover : theme.colors.card)};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: background-color 0.3s, color 0.3s;
 
   &:hover {
-    background-color: ${({ theme }) => theme.colors.selected_hover};
+    background-color: ${({ disabled, theme }) => (disabled ? 'none' : theme.colors.selected_hover)};
   }
 
   svg {
@@ -44,12 +47,14 @@ const TabListContainer = styled.div`
 `;
 
 // Tab component
-const Tab: React.FC<TabProps> = ({ title, icon, selected, onClick }) => {
+const Tab: React.FC<TabProps> = ({ title, tooltip, icon, selected, disabled, onClick }) => {
   return (
-    <TabContainer selected={selected} onClick={onClick}>
-      <Image src={icon} width={14} height={14} alt={title} />
-      <Text size={14}>{title}</Text>
-    </TabContainer>
+    <Tooltip text={tooltip || ''}>
+      <TabContainer selected={selected} disabled={disabled} onClick={onClick}>
+        <Image src={icon} width={14} height={14} alt={title} />
+        <Text size={14}>{title}</Text>
+      </TabContainer>
+    </Tooltip>
   );
 };
 
@@ -60,20 +65,29 @@ const TABS = [
     selected: true,
     onClick: () => {},
   },
+  {
+    title: 'Service map',
+    icon: '/icons/overview/service-map.svg',
+    selected: false,
+    onClick: () => {},
+    disabled: true,
+    tooltip: 'Coming soon',
+  },
+  {
+    title: 'Trace view',
+    icon: '/icons/overview/trace-view.svg',
+    selected: false,
+    onClick: () => {},
+    disabled: true,
+    tooltip: 'Coming soon',
+  },
 ];
 
-// TabList component
 const TabList: React.FC<TabListProps> = ({ tabs = TABS }) => {
   return (
     <TabListContainer>
-      {tabs.map((tab, index) => (
-        <Tab
-          key={index}
-          title={tab.title}
-          icon={tab.icon}
-          selected={tab.selected}
-          onClick={tab.onClick}
-        />
+      {tabs.map((tab) => (
+        <Tab key={`tab-${tab.title}`} {...tab} />
       ))}
     </TabListContainer>
   );
diff --git a/frontend/webapp/styles/styled.tsx b/frontend/webapp/styles/styled.tsx
index 94f71a0e3..8488ee805 100644
--- a/frontend/webapp/styles/styled.tsx
+++ b/frontend/webapp/styles/styled.tsx
@@ -15,7 +15,7 @@ export const Overlay = styled.div<{ hideOverlay?: boolean }>`
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 999;
+  z-index: 1000;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(1px);
   opacity: ${({ hideOverlay }) => (hideOverlay ? 0 : 1)};
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 5ba050089..50924dcb6 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -111,8 +111,9 @@ const colors = {
 const text = {
   primary: '#111',
   secondary: '#F9F9F9',
-  grey: '#B8B8B8',
   white: '#fff',
+  grey: '#B8B8B8',
+  dark_grey: '#7A7A7A',
   light_grey: '#CCD0D2',
   dark_button: '#0A1824',
   success: '#81AF65',
diff --git a/frontend/webapp/utils/constants/monitors.tsx b/frontend/webapp/utils/constants/monitors.tsx
index df3983ae6..37d69c2e6 100644
--- a/frontend/webapp/utils/constants/monitors.tsx
+++ b/frontend/webapp/utils/constants/monitors.tsx
@@ -6,10 +6,13 @@ export type SignalLowercase = 'traces' | 'metrics' | 'logs';
 
 export type MonitoringOption = {
   id: number;
-  title: string;
-  icons: object;
   type: SignalLowercase;
+  title: string;
   tapped: boolean;
+  icons: {
+    notFocus: () => JSX.Element;
+    focus: () => JSX.Element;
+  };
 };
 
 export const MONITORING_OPTIONS: MonitoringOption[] = [

From 702e71ab9555666227b10754068f0c4a3da73310 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 5 Nov 2024 10:14:24 +0200
Subject: [PATCH 335/374] [GEN-1641]: added UI for metrics (#1688)

---
 .../nodes-data-flow/builder.ts                | 156 ++++++++++++------
 .../nodes-data-flow/edges/labeled-edge.tsx    |  60 +++++++
 .../nodes-data-flow/index.tsx                 |  20 ++-
 .../nodes-data-flow/nodes/base-node.tsx       |  54 +++---
 .../nodes-data-flow/nodes/group-node.tsx      |  13 ++
 .../reuseable-components/status/index.tsx     |   3 +-
 frontend/webapp/styles/theme.ts               |   4 +-
 7 files changed, 228 insertions(+), 82 deletions(-)
 create mode 100644 frontend/webapp/reuseable-components/nodes-data-flow/edges/labeled-edge.tsx
 create mode 100644 frontend/webapp/reuseable-components/nodes-data-flow/nodes/group-node.tsx

diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 38d24702b..b259d28f9 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,5 +1,5 @@
 import theme from '@/styles/theme';
-import { getActionIcon, INSTRUMENTATION_RULES } from '@/utils';
+import { getActionIcon } from '@/utils';
 import { Node, Edge } from 'react-flow-renderer';
 import { getRuleIcon } from '@/utils/functions';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
@@ -12,31 +12,45 @@ import {
   type ActionItem,
   type ActualDestination,
   type K8sActualSource,
-  InstrumentationRuleType,
 } from '@/types';
 
-// Constants
 const NODE_HEIGHT = 80;
-
-const STROKE_COLOR = theme.colors.border;
 const HEADER_ICON_PATH = '/icons/overview/';
 
-// Helper to create a node
-const createNode = (id: string, type: string, x: number, y: number, data: Record<string, any>): Node => ({
-  id,
-  type,
-  position: { x, y },
-  data,
-});
-
-// Helper to create an edge
-const createEdge = (id: string, source: string, target: string, animated = true): Edge => ({
-  id,
-  source,
-  target,
-  animated,
-  style: { stroke: STROKE_COLOR },
-});
+const createNode = (nodeId: string, nodeType: string, x: number, y: number, data: Record<string, any>, style?: React.CSSProperties): Node => {
+  // const [columnType] = id.split('-');
+
+  return {
+    id: nodeId,
+    type: nodeType,
+    data,
+    style,
+    position: { x, y },
+  };
+};
+
+const createEdge = (
+  edgeId: string,
+  params?: {
+    label?: string;
+    isMultiTarget?: boolean;
+    isError?: boolean;
+    animated?: boolean;
+  }
+): Edge => {
+  const { label, isMultiTarget, isError, animated } = params || {};
+  const [sourceNodeId, targetNodeId] = edgeId.split('-to-');
+
+  return {
+    id: edgeId,
+    type: !!label ? 'labeled' : 'default',
+    source: sourceNodeId,
+    target: targetNodeId,
+    animated,
+    data: { label, isMultiTarget, isError },
+    style: { stroke: isError ? theme.colors.dark_red : theme.colors.border },
+  };
+};
 
 // Extract the monitors from exported signals
 const extractMonitors = (exportedSignals: Record<string, boolean>) =>
@@ -60,25 +74,25 @@ export const buildNodesAndEdges = ({
   // Calculate x positions for each column
   const columnPostions = {
     rules: 0,
-    sources: (containerWidth - columnWidth) / 3,
-    actions: (containerWidth - columnWidth) / 1.5,
+    sources: (containerWidth - columnWidth) / 4,
+    actions: (containerWidth - columnWidth) / 1.6,
     destinations: containerWidth - columnWidth,
   };
 
   // Build Rules Nodes
   const ruleNodes: Node[] = [
-    createNode('header-rule', 'header', columnPostions['rules'], 0, {
+    createNode('rule-header', 'header', columnPostions['rules'], 0, {
       icon: `${HEADER_ICON_PATH}rules.svg`,
       title: 'Instrumentation Rules',
       tagValue: rules.length,
     }),
     ...(!rules.length
       ? [
-          createNode(`rule-0`, 'add', columnPostions['rules'], NODE_HEIGHT, {
+          createNode('rule-0', 'add', columnPostions['rules'], NODE_HEIGHT, {
             type: OVERVIEW_NODE_TYPES.ADD_RULE,
+            status: STATUSES.HEALTHY,
             title: 'ADD RULE',
             subTitle: 'Add first rule to modify the OpenTelemetry data',
-            status: STATUSES.HEALTHY,
           }),
         ]
       : rules.map((rule, index) =>
@@ -96,50 +110,46 @@ export const buildNodesAndEdges = ({
 
   // Build Source Nodes
   const sourceNodes: Node[] = [
-    createNode('header-source', 'header', columnPostions['sources'], 0, {
+    createNode('source-header', 'header', columnPostions['sources'], 0, {
       icon: `${HEADER_ICON_PATH}sources.svg`,
       title: 'Sources',
       tagValue: sources.length,
     }),
     ...(!sources.length
       ? [
-          createNode(`source-0`, 'add', columnPostions['sources'], NODE_HEIGHT, {
+          createNode('source-0', 'add', columnPostions['sources'], NODE_HEIGHT, {
             type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
+            status: STATUSES.HEALTHY,
             title: 'ADD SOURCE',
             subTitle: 'Add first source to collect OpenTelemetry data',
-            status: STATUSES.HEALTHY,
           }),
         ]
       : sources.map((source, index) =>
           createNode(`source-${index}`, 'base', columnPostions['sources'], NODE_HEIGHT * (index + 1), {
+            id: { kind: source.kind, name: source.name, namespace: source.namespace },
             type: OVERVIEW_ENTITY_TYPES.SOURCE,
+            status: index === 0 ? STATUSES.UNHEALTHY : STATUSES.HEALTHY,
             title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
             subTitle: source.kind,
             imageUri: getMainContainerLanguageLogo(source),
-            status: STATUSES.HEALTHY,
-            id: {
-              kind: source.kind,
-              name: source.name,
-              namespace: source.namespace,
-            },
           })
         )),
   ];
 
   // Build Action Nodes
   const actionNodes: Node[] = [
-    createNode('header-action', 'header', columnPostions['actions'], 0, {
+    createNode('action-header', 'header', columnPostions['actions'], 0, {
       icon: `${HEADER_ICON_PATH}actions.svg`,
       title: 'Actions',
       tagValue: actions.length,
     }),
     ...(!actions.length
       ? [
-          createNode(`action-0`, 'add', columnPostions['actions'], NODE_HEIGHT, {
+          createNode('action-0', 'add', columnPostions['actions'], NODE_HEIGHT, {
             type: OVERVIEW_NODE_TYPES.ADD_ACTION,
+            status: STATUSES.HEALTHY,
             title: 'ADD ACTION',
             subTitle: 'Add first action to modify the OpenTelemetry data',
-            status: STATUSES.HEALTHY,
           }),
         ]
       : actions.map((action, index) => {
@@ -158,31 +168,59 @@ export const buildNodesAndEdges = ({
         })),
   ];
 
+  // Create group for actions
+  if (actions.length) {
+    const padding = 15;
+    const getDifference = (x: number) => {
+      const a = 23.24; // coefficient
+      const b = -0.589; // exponent
+      return a * Math.pow(x, b);
+    };
+
+    actionNodes.push(
+      createNode(
+        'action-group',
+        'group',
+        columnPostions['actions'] - padding,
+        NODE_HEIGHT - padding,
+        {},
+        {
+          width: columnWidth + padding * getDifference(padding),
+          height: NODE_HEIGHT * actions.length + padding,
+          background: 'transparent',
+          border: `1px dashed ${theme.colors.border}`,
+          borderRadius: 24,
+          zIndex: -1,
+        }
+      )
+    );
+  }
+
   // Build Destination Nodes
   const destinationNodes: Node[] = [
-    createNode('header-destination', 'header', columnPostions['destinations'], 0, {
+    createNode('destination-header', 'header', columnPostions['destinations'], 0, {
       icon: `${HEADER_ICON_PATH}destinations.svg`,
       title: 'Destinations',
       tagValue: destinations.length,
     }),
     ...(!destinations.length
       ? [
-          createNode(`destination-0`, 'add', columnPostions['destinations'], NODE_HEIGHT, {
+          createNode('destination-0', 'add', columnPostions['destinations'], NODE_HEIGHT, {
             type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
+            status: STATUSES.HEALTHY,
             title: 'ADD DESTIONATION',
             subTitle: 'Add first destination to monitor OpenTelemetry data',
-            status: STATUSES.HEALTHY,
           }),
         ]
       : destinations.map((destination, index) =>
           createNode(`destination-${index}`, 'base', columnPostions['destinations'], NODE_HEIGHT * (index + 1), {
+            id: destination.id,
             type: OVERVIEW_ENTITY_TYPES.DESTINATION,
+            status: index === 0 ? STATUSES.UNHEALTHY : STATUSES.HEALTHY,
             title: destination.name,
             subTitle: destination.destinationType.displayName,
             imageUri: destination.destinationType.imageUrl,
-            status: STATUSES.HEALTHY,
             monitors: extractMonitors(destination.exportedSignals),
-            id: destination.id,
           })
         )),
   ];
@@ -195,21 +233,41 @@ export const buildNodesAndEdges = ({
 
   // Connect sources to actions
   if (!sources.length) {
-    edges.push(createEdge('source-0-to-action-0', 'source-0', 'action-0', false));
+    edges.push(createEdge('source-0-to-action-0'));
   } else {
     sources.forEach((_, sourceIndex) => {
-      const actionIndex = 0;
-      edges.push(createEdge(`source-${sourceIndex}-to-action-${actionIndex}`, `source-${sourceIndex}`, `action-${actionIndex}`, false));
+      const actionIndex = actions.length ? 'group' : 0;
+      edges.push(
+        createEdge(`source-${sourceIndex}-to-action-${actionIndex}`, {
+          label: `${sourceIndex === 0 ? 0 : (Math.random() * 50).toFixed(1)} kb/s`,
+          isMultiTarget: false,
+          isError: sourceIndex === 0,
+        })
+      );
+    });
+  }
+
+  // Connect actions to actions
+  if (!!actions.length) {
+    actions.forEach((_, sourceActionIndex) => {
+      const targetActionIndex = sourceActionIndex + 1;
+      edges.push(createEdge(`action-${sourceActionIndex}-to-action-${targetActionIndex}`));
     });
   }
 
   // Connect actions to destinations
   if (!destinations.length) {
-    edges.push(createEdge('action-0-to-destination-0', 'action-0', 'destination-0'));
+    edges.push(createEdge('action-0-to-destination-0'));
   } else {
     destinations.forEach((_, destinationIndex) => {
-      const actionIndex = !actions.length ? 0 : actions.length - 1;
-      edges.push(createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, `action-${actionIndex}`, `destination-${destinationIndex}`));
+      const actionIndex = actions.length ? 'group' : 0;
+      edges.push(
+        createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, {
+          label: `${destinationIndex === 0 ? 0 : (Math.random() * 10).toFixed(1)} kb/s`,
+          isMultiTarget: true,
+          isError: destinationIndex === 0,
+        })
+      );
     });
   }
 
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/edges/labeled-edge.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/edges/labeled-edge.tsx
new file mode 100644
index 000000000..e86982753
--- /dev/null
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/edges/labeled-edge.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { EdgeLabelRenderer, BaseEdge, type EdgeProps, type Edge, getSmoothStepPath } from '@xyflow/react';
+
+const Label = styled.div<{ labelX: number; labelY: number; isError?: boolean }>`
+  position: absolute;
+  transform: ${({ labelX, labelY }) => `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`};
+  width: 60px;
+  padding: 2px 6px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  border-radius: 360px;
+  border: 1px solid ${({ isError, theme }) => (isError ? theme.colors.dark_red : theme.colors.border)};
+  color: ${({ isError, theme }) => (isError ? theme.text.error : theme.text.light_grey)};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-size: 10px;
+  font-weight: 400;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const LabeledEdge: React.FC<EdgeProps<Edge<{ label: string; isMultiTarget?: boolean; isError?: boolean }>>> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  style,
+}) => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} style={style} />
+      <EdgeLabelRenderer>
+        <Label
+          labelX={data?.isMultiTarget ? targetX - 50 : sourceX + 50}
+          labelY={data?.isMultiTarget ? targetY : sourceY}
+          isError={data?.isError}
+          className='nodrag nopan'
+        >
+          {data?.label}
+        </Label>
+      </EdgeLabelRenderer>
+    </>
+  );
+};
+
+export default LabeledEdge;
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
index 33a0039f2..d48c2eedf 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -4,7 +4,9 @@ import '@xyflow/react/dist/style.css';
 import AddNode from './nodes/add-node';
 import BaseNode from './nodes/base-node';
 import { ReactFlow } from '@xyflow/react';
+import GroupNode from './nodes/group-node';
 import HeaderNode from './nodes/header-node';
+import LabeledEdge from './edges/labeled-edge';
 
 interface NodeBaseDataFlowProps {
   nodes: any[];
@@ -19,13 +21,29 @@ export function NodeBaseDataFlow({ nodes, edges, onNodeClick, columnWidth }: Nod
       header: (props) => <HeaderNode {...props} columnWidth={columnWidth} />,
       add: (props) => <AddNode {...props} columnWidth={columnWidth} />,
       base: (props) => <BaseNode {...props} columnWidth={columnWidth} />,
+      group: GroupNode,
     }),
     [columnWidth]
   );
 
+  const edgeTypes = useMemo(
+    () => ({
+      labeled: LabeledEdge,
+    }),
+    []
+  );
+
   return (
     <div style={{ height: 'calc(100vh - 100px)' }}>
-      <ReactFlow nodeTypes={nodeTypes} nodes={nodes} edges={edges} zoomOnScroll={false} onNodeClick={onNodeClick} />
+      <ReactFlow
+        nodes={nodes}
+        nodeTypes={nodeTypes}
+        edges={edges}
+        edgeTypes={edgeTypes}
+        onNodeClick={onNodeClick}
+        zoomOnScroll={false}
+        fitView={false}
+      />
     </div>
   );
 }
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
index 8b32f881a..60fd58832 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
-import type { STATUSES } from '@/types';
+import { STATUSES } from '@/types';
 import { Handle, Position } from '@xyflow/react';
 import { Status, Text } from '@/reuseable-components';
+import { getStatusIcon } from '@/utils';
 
-const BaseNodeContainer = styled.div<{ columnWidth: number }>`
+const BaseNodeContainer = styled.div<{ columnWidth: number; isError?: boolean }>`
   width: ${({ columnWidth }) => `${columnWidth}px`};
   padding: 16px 24px 16px 16px;
   gap: 8px;
@@ -14,14 +15,14 @@ const BaseNodeContainer = styled.div<{ columnWidth: number }>`
   align-self: stretch;
   border-radius: 16px;
   cursor: pointer;
-  background-color: ${({ theme }) => theme.colors.white_opacity['004']};
+  background-color: ${({ isError, theme }) => (isError ? '#281515' : theme.colors.white_opacity['004'])};
 
   &:hover {
-    background-color: ${({ theme }) => theme.colors.white_opacity['008']};
+    background-color: ${({ isError, theme }) => (isError ? '#351515' : theme.colors.white_opacity['008'])};
   }
 `;
 
-const SourceIconWrapper = styled.div`
+const SourceIconWrapper = styled.div<{ isError?: boolean }>`
   display: flex;
   width: 36px;
   height: 36px;
@@ -29,7 +30,10 @@ const SourceIconWrapper = styled.div`
   align-items: center;
   gap: 8px;
   border-radius: 8px;
-  background: linear-gradient(180deg, rgba(249, 249, 249, 0.06) 0%, rgba(249, 249, 249, 0.02) 100%);
+  background: ${({ isError }) =>
+    `linear-gradient(180deg, ${isError ? 'rgba(237, 124, 124, 0.08)' : 'rgba(249, 249, 249, 0.06)'} 0%, ${
+      isError ? 'rgba(237, 124, 124, 0.02)' : 'rgba(249, 249, 249, 0.02)'
+    } 100%)`};
 `;
 
 const BodyWrapper = styled.div`
@@ -46,7 +50,7 @@ const FooterWrapper = styled.div`
 `;
 
 const Title = styled(Text)<{ columnWidth: number }>`
-  width: ${({ columnWidth }) => `${columnWidth - 42}px`};
+  width: ${({ columnWidth }) => `${columnWidth - 75}px`};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -70,37 +74,28 @@ export interface NodeDataProps {
 
 interface BaseNodeProps {
   id: string;
+  columnWidth: number;
   isConnectable: boolean;
   data: NodeDataProps;
-  columnWidth: number;
 }
 
-const BaseNode = ({ isConnectable, data, columnWidth }: BaseNodeProps) => {
-  const { title, subTitle, imageUri, type, monitors, isActive } = data;
+const BaseNode = ({ columnWidth, isConnectable, data }: BaseNodeProps) => {
+  const { type, status, title, subTitle, imageUri, monitors, isActive } = data;
 
   function renderHandles() {
     switch (type) {
       case 'source':
-        return (
-          <>
-            {/* Source nodes have an output handle */}
-            <Handle type='source' position={Position.Right} id='source-output' style={{ visibility: 'hidden' }} isConnectable={isConnectable} />
-          </>
-        );
+        return <Handle type='source' position={Position.Right} id='source-output' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />;
       case 'action':
         return (
           <>
-            {/* Action nodes have both input and output handles */}
-            <Handle type='target' position={Position.Left} id='action-input' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
-            <Handle type='source' position={Position.Right} id='action-output' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
+            <Handle type='target' position={Position.Top} id='action-input' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
+            <Handle type='source' position={Position.Bottom} id='action-output' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
           </>
         );
       case 'destination':
         return (
-          <>
-            {/* Destination nodes only have an input handle */}
-            <Handle type='target' position={Position.Left} id='destination-input' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
-          </>
+          <Handle type='target' position={Position.Left} id='destination-input' isConnectable={isConnectable} style={{ visibility: 'hidden' }} />
         );
       default:
         return null;
@@ -108,9 +103,7 @@ const BaseNode = ({ isConnectable, data, columnWidth }: BaseNodeProps) => {
   }
 
   function renderMonitors() {
-    if (!monitors) {
-      return null;
-    }
+    if (!monitors) return null;
 
     return (
       <FooterWrapper>
@@ -123,9 +116,7 @@ const BaseNode = ({ isConnectable, data, columnWidth }: BaseNodeProps) => {
   }
 
   function renderStatus() {
-    if (typeof isActive !== 'boolean') {
-      return null;
-    }
+    if (typeof isActive !== 'boolean') return null;
 
     return (
       <FooterWrapper>
@@ -135,8 +126,10 @@ const BaseNode = ({ isConnectable, data, columnWidth }: BaseNodeProps) => {
     );
   }
 
+  const isError = status === STATUSES.UNHEALTHY;
+
   return (
-    <BaseNodeContainer columnWidth={columnWidth}>
+    <BaseNodeContainer columnWidth={columnWidth} isError={isError}>
       <SourceIconWrapper>
         <Image src={imageUri || '/icons/common/folder.svg'} width={20} height={20} alt='source' />
       </SourceIconWrapper>
@@ -148,6 +141,7 @@ const BaseNode = ({ isConnectable, data, columnWidth }: BaseNodeProps) => {
           {renderStatus()}
         </FooterWrapper>
       </BodyWrapper>
+      {isError ? <Image src={getStatusIcon(false)} alt='' width={20} height={20} /> : null}
       {renderHandles()}
     </BaseNodeContainer>
   );
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/group-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/group-node.tsx
new file mode 100644
index 000000000..f2203074f
--- /dev/null
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/group-node.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+const GroupNode = () => {
+  return (
+    <>
+      <Handle type='source' position={Position.Right} id='group-output' isConnectable style={{ visibility: 'hidden' }} />
+      <Handle type='target' position={Position.Left} id='group-input' isConnectable style={{ visibility: 'hidden' }} />
+    </>
+  );
+};
+
+export default GroupNode;
diff --git a/frontend/webapp/reuseable-components/status/index.tsx b/frontend/webapp/reuseable-components/status/index.tsx
index 9d60a81ba..59038ae18 100644
--- a/frontend/webapp/reuseable-components/status/index.tsx
+++ b/frontend/webapp/reuseable-components/status/index.tsx
@@ -21,7 +21,8 @@ const StatusWrapper = styled.div<Props>`
   width: fit-content;
   padding: ${({ withIcon, withBorder, withSmaller }) => (withIcon || withBorder ? (withSmaller ? '4px 8px' : '8px 24px') : '0')};
   border-radius: 32px;
-  border: 1px solid ${({ withBorder, isActive, theme }) => (withBorder ? (isActive ? '#2d4323' : '#802828') : 'transparent')};
+  border: 1px solid
+    ${({ withBorder, isActive, theme }) => (withBorder ? (isActive ? theme.colors.dark_green : theme.colors.dark_red) : 'transparent')};
   background: ${({ withBackground, isActive }) =>
     withBackground
       ? isActive
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 50924dcb6..d67fab542 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -13,8 +13,10 @@ const colors = {
   card: '#F9F9F90A',
   dropdown_bg: '#242424',
   blank_background: '#11111100',
-  danger: '#EF7676',
   warning: '#E9CF35',
+  danger: '#EF7676',
+  dark_red: '#802828',
+  dark_green: '#2d4323',
   white_opacity: {
     '004': 'rgba(249, 249, 249, 0.04)',
     '008': 'rgba(249, 249, 249, 0.08)',

From 577ef582e4219c8818b74e71ef5f10adbab87c8a Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:43:39 +0200
Subject: [PATCH 336/374] [GEN-1646] Add destination condition and type (#1692)

This pull request includes several updates to the
`frontend/graph/schema.resolvers.go` file, focusing on adding
functionality and improving existing resolver methods.

### Functional Improvements:

* Added the `time` package to handle time formatting and conversions.
* Implemented the `Type` resolver method for the `Destination` model to
return the type as a string instead of panicking with an error.
* Implemented the `Conditions` resolver method for the `Destination`
model, converting `LastTransitionTime` to a string pointer and
populating the conditions list with the converted data.
---
 frontend/graph/schema.resolvers.go | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index e5de29dfe..dbc465749 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -8,6 +8,7 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"time"
 
 	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common"
@@ -275,12 +276,31 @@ func (r *computePlatformResolver) InstrumentationRules(ctx context.Context, obj
 
 // Type is the resolver for the type field.
 func (r *destinationResolver) Type(ctx context.Context, obj *model.Destination) (string, error) {
-	panic(fmt.Errorf("not implemented: Type - type"))
+	return string(obj.Type), nil
 }
 
 // Conditions is the resolver for the conditions field.
 func (r *destinationResolver) Conditions(ctx context.Context, obj *model.Destination) ([]*model.Condition, error) {
-	panic(fmt.Errorf("not implemented: Conditions - conditions"))
+
+	conditions := make([]*model.Condition, 0, len(obj.Conditions))
+	for _, c := range obj.Conditions {
+		// Convert LastTransitionTime to a string pointer if it's not nil
+		var lastTransitionTime *string
+		if !c.LastTransitionTime.IsZero() {
+			t := c.LastTransitionTime.Format(time.RFC3339)
+			lastTransitionTime = &t
+		}
+
+		// Add the converted Condition to the list
+		conditions = append(conditions, &model.Condition{
+			Type:               c.Type,
+			Status:             model.ConditionStatus(c.Status),
+			LastTransitionTime: lastTransitionTime,
+			Reason:             &c.Reason,
+			Message:            &c.Message,
+		})
+	}
+	return conditions, nil
 }
 
 // K8sActualSources is the resolver for the k8sActualSources field.

From 0c39a2997443e267b1e60271cef2264ac704d522 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Tue, 5 Nov 2024 15:01:54 +0200
Subject: [PATCH 337/374] [GEN-1642]: get metrics from API (with mockup for dev
 mode) (#1693)

---
 .../add-rule-modal/rule-options.ts            |   2 +-
 .../overview/overview-data-flow/index.tsx     |  25 +-
 frontend/webapp/graphql/mutations/metrics.ts  |  20 +
 .../graphql/queries/compute-platform.ts       |   5 +
 .../useGetInstrumentationRules.ts             |   2 +-
 frontend/webapp/hooks/overview/index.tsx      |   1 +
 frontend/webapp/hooks/overview/useMetrics.ts  |  44 ++
 .../nodes-data-flow/builder.ts                | 386 ++++++++++--------
 .../nodes-data-flow/edges/labeled-edge.tsx    |   2 +-
 .../nodes-data-flow/index.tsx                 |  12 +-
 .../nodes-data-flow/nodes/add-node.tsx        |  10 +-
 .../nodes-data-flow/nodes/base-node.tsx       |  16 +-
 .../nodes-data-flow/nodes/header-node.tsx     |  10 +-
 frontend/webapp/types/common.ts               |   6 +
 frontend/webapp/types/destinations.ts         |  11 +-
 frontend/webapp/types/index.ts                |   1 +
 frontend/webapp/types/metrics.ts              |  18 +
 ...rive-type-from-rule.ts => derive-types.ts} |   4 +-
 .../utils/functions/extract-monitors.ts       |   7 +
 frontend/webapp/utils/functions/formatters.ts |   9 +
 .../webapp/utils/functions/get-action-icon.ts |  12 -
 .../webapp/utils/functions/get-rule-icon.ts   |  11 -
 .../webapp/utils/functions/get-status-icon.ts |   5 -
 .../utils/functions/get-value-for-range.ts    |  14 +
 frontend/webapp/utils/functions/icons.ts      |  28 ++
 frontend/webapp/utils/functions/index.ts      |   8 +-
 26 files changed, 434 insertions(+), 235 deletions(-)
 create mode 100644 frontend/webapp/graphql/mutations/metrics.ts
 create mode 100644 frontend/webapp/hooks/overview/useMetrics.ts
 create mode 100644 frontend/webapp/types/metrics.ts
 rename frontend/webapp/utils/functions/{derive-type-from-rule.ts => derive-types.ts} (57%)
 create mode 100644 frontend/webapp/utils/functions/extract-monitors.ts
 create mode 100644 frontend/webapp/utils/functions/formatters.ts
 delete mode 100644 frontend/webapp/utils/functions/get-action-icon.ts
 delete mode 100644 frontend/webapp/utils/functions/get-rule-icon.ts
 delete mode 100644 frontend/webapp/utils/functions/get-status-icon.ts
 create mode 100644 frontend/webapp/utils/functions/get-value-for-range.ts
 create mode 100644 frontend/webapp/utils/functions/icons.ts

diff --git a/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/rule-options.ts b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/rule-options.ts
index bea858d5c..73de93420 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/rule-options.ts
+++ b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/rule-options.ts
@@ -1,5 +1,5 @@
 import { InstrumentationRuleType } from '@/types';
-import { getRuleIcon } from '@/utils/functions';
+import { getRuleIcon } from '@/utils';
 
 export type RuleOption = {
   id: string;
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index bd233065c..b838d900f 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -4,8 +4,15 @@ import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
-import { useGetActions, useActualSources, useContainerWidth, useActualDestination, useNodeDataFlowHandlers } from '@/hooks';
-import { useGetInstrumentationRules } from '@/hooks/instrumentation-rules/useGetInstrumentationRules';
+import {
+  useMetrics,
+  useGetActions,
+  useActualSources,
+  useContainerWidth,
+  useActualDestination,
+  useNodeDataFlowHandlers,
+  useGetInstrumentationRules,
+} from '@/hooks';
 
 const AllDrawers = dynamic(() => import('../all-drawers'), {
   ssr: false,
@@ -21,6 +28,9 @@ export const OverviewDataFlowWrapper = styled.div`
   position: relative;
 `;
 
+const NODE_WIDTH = 255;
+const NODE_HEIGHT = 80;
+
 export function OverviewDataFlowContainer() {
   const { actions } = useGetActions();
   const { sources } = useActualSources();
@@ -34,7 +44,8 @@ export function OverviewDataFlowContainer() {
     destinations,
   });
 
-  const columnWidth = 255;
+  // TODO: remove mockup data from "useMetrics"
+  const { metrics } = useMetrics({ sources, destinations });
 
   // Memoized node and edge builder to improve performance
   const { nodes, edges } = useMemo(() => {
@@ -43,15 +54,17 @@ export function OverviewDataFlowContainer() {
       sources,
       actions,
       destinations,
-      columnWidth,
+      metrics,
       containerWidth,
+      nodeWidth: NODE_WIDTH,
+      nodeHeight: NODE_HEIGHT,
     });
-  }, [instrumentationRules, sources, actions, destinations, columnWidth, containerWidth]);
+  }, [instrumentationRules, sources, actions, destinations, metrics, containerWidth]);
 
   return (
     <OverviewDataFlowWrapper ref={containerRef}>
       <OverviewActionMenuContainer />
-      <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={handleNodeClick} columnWidth={columnWidth} />
+      <NodeBaseDataFlow nodes={nodes} edges={edges} onNodeClick={handleNodeClick} nodeWidth={NODE_WIDTH} />
 
       <AllDrawers />
       <AllModals />
diff --git a/frontend/webapp/graphql/mutations/metrics.ts b/frontend/webapp/graphql/mutations/metrics.ts
new file mode 100644
index 000000000..219a3235a
--- /dev/null
+++ b/frontend/webapp/graphql/mutations/metrics.ts
@@ -0,0 +1,20 @@
+import { gql } from '@apollo/client';
+
+export const GET_METRICS = gql`
+  query GetOverviewMetrics {
+    getOverviewMetrics {
+      sources {
+        namespace
+        kind
+        name
+        totalDataSent
+        throughput
+      }
+      destinations {
+        id
+        totalDataSent
+        throughput
+      }
+    }
+  }
+`;
diff --git a/frontend/webapp/graphql/queries/compute-platform.ts b/frontend/webapp/graphql/queries/compute-platform.ts
index 7c622f7d7..2e61d9a72 100644
--- a/frontend/webapp/graphql/queries/compute-platform.ts
+++ b/frontend/webapp/graphql/queries/compute-platform.ts
@@ -46,6 +46,11 @@ export const GET_COMPUTE_PLATFORM = gql`
             }
           }
         }
+        conditions {
+          type
+          status
+          message
+        }
       }
       actions {
         id
diff --git a/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts b/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
index a09937cd3..fa9cb1444 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
@@ -1,4 +1,4 @@
-import { deriveTypeFromRule } from '@/utils/functions/derive-type-from-rule';
+import { deriveTypeFromRule } from '@/utils';
 import { useComputePlatform } from '../compute-platform';
 
 export const useGetInstrumentationRules = () => {
diff --git a/frontend/webapp/hooks/overview/index.tsx b/frontend/webapp/hooks/overview/index.tsx
index 45e0d2258..be92cf9ef 100644
--- a/frontend/webapp/hooks/overview/index.tsx
+++ b/frontend/webapp/hooks/overview/index.tsx
@@ -1 +1,2 @@
+export * from './useMetrics';
 export * from './useNodeDataFlowHandlers';
diff --git a/frontend/webapp/hooks/overview/useMetrics.ts b/frontend/webapp/hooks/overview/useMetrics.ts
new file mode 100644
index 000000000..a021d5ec2
--- /dev/null
+++ b/frontend/webapp/hooks/overview/useMetrics.ts
@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useQuery } from '@apollo/client';
+import { GET_METRICS } from '@/graphql/mutations/metrics';
+import type { ActualDestination, K8sActualSource, OverviewMetricsResponse } from '@/types';
+
+export function useMetrics({ sources, destinations }: { sources: K8sActualSource[]; destinations: ActualDestination[] }) {
+  const { data, refetch } = useQuery<OverviewMetricsResponse>(GET_METRICS);
+
+  // this is just to re-render the mockup data
+  const [_, setCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      await refetch();
+      setCount((n) => n + 1);
+    }, 3000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [refetch]);
+
+  // this will 1st try to use real data, if non-exitant it will generate mockup data
+  const metricsMockup: OverviewMetricsResponse = {
+    sources: data?.sources?.length
+      ? data.sources
+      : sources.map(({ name, kind, namespace }) => ({
+          namespace,
+          kind,
+          name,
+          totalDataSent: 0,
+          throughput: Math.random() * 50000,
+        })),
+    destinations: data?.destinations?.length
+      ? data.destinations
+      : destinations.map(({ id }) => ({
+          id,
+          totalDataSent: 0,
+          throughput: Math.random() * 50000,
+        })),
+  };
+
+  return { metrics: metricsMockup };
+}
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index b259d28f9..ce3a79c7f 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,7 +1,6 @@
 import theme from '@/styles/theme';
-import { getActionIcon } from '@/utils';
 import { Node, Edge } from 'react-flow-renderer';
-import { getRuleIcon } from '@/utils/functions';
+import { extractMonitors, formatBytes, getActionIcon, getRuleIcon, getValueForRange } from '@/utils';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 import {
   OVERVIEW_ENTITY_TYPES,
@@ -12,13 +11,20 @@ import {
   type ActionItem,
   type ActualDestination,
   type K8sActualSource,
+  type OverviewMetricsResponse,
 } from '@/types';
 
-const NODE_HEIGHT = 80;
 const HEADER_ICON_PATH = '/icons/overview/';
 
+const getHealthStatus = (item: K8sActualSource | ActualDestination) => {
+  const conditions = (item as K8sActualSource)?.instrumentedApplicationDetails?.conditions || (item as ActualDestination)?.conditions;
+  const isUnhealthy = !conditions?.length || !!conditions.find(({ status }) => status === 'False');
+
+  return isUnhealthy ? STATUSES.UNHEALTHY : STATUSES.HEALTHY;
+};
+
 const createNode = (nodeId: string, nodeType: string, x: number, y: number, data: Record<string, any>, style?: React.CSSProperties): Node => {
-  // const [columnType] = id.split('-');
+  // const [columnType] = nodeId.split('-');
 
   return {
     id: nodeId,
@@ -52,141 +58,195 @@ const createEdge = (
   };
 };
 
-// Extract the monitors from exported signals
-const extractMonitors = (exportedSignals: Record<string, boolean>) =>
-  Object.keys(exportedSignals).filter((signal) => exportedSignals[signal] === true);
-
 export const buildNodesAndEdges = ({
   rules,
   sources,
   actions,
   destinations,
-  columnWidth,
+  metrics,
   containerWidth,
+  nodeWidth,
+  nodeHeight,
 }: {
   rules: InstrumentationRuleSpec[];
   sources: K8sActualSource[];
   actions: ActionData[];
   destinations: ActualDestination[];
-  columnWidth: number;
+  metrics?: OverviewMetricsResponse;
   containerWidth: number;
+  nodeWidth: number;
+  nodeHeight: number;
 }) => {
-  // Calculate x positions for each column
-  const columnPostions = {
-    rules: 0,
-    sources: (containerWidth - columnWidth) / 4,
-    actions: (containerWidth - columnWidth) / 1.6,
-    destinations: containerWidth - columnWidth,
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  if (!containerWidth) {
+    return {
+      nodes: [],
+      edges: [],
+    };
+  }
+
+  // Calculate positions for each node
+  const startX = 0;
+  const endX = (containerWidth <= 1500 ? 1500 : containerWidth) - nodeWidth;
+  const postions = {
+    rules: {
+      x: startX,
+      y: (idx?: number) => nodeHeight * ((idx || 0) + 1),
+    },
+    sources: {
+      x: getValueForRange(containerWidth, [
+        [0, 1500, endX / 3.5],
+        [1500, 1600, endX / 4],
+        [1600, null, endX / 4.5],
+      ]),
+      y: (idx?: number) => nodeHeight * ((idx || 0) + 1),
+    },
+    actions: {
+      x: getValueForRange(containerWidth, [
+        [0, 1500, endX / 1.55],
+        [1500, 1600, endX / 1.6],
+        [1600, null, endX / 1.65],
+      ]),
+      y: (idx?: number) => nodeHeight * ((idx || 0) + 1),
+    },
+    destinations: {
+      x: endX,
+      y: (idx?: number) => nodeHeight * ((idx || 0) + 1),
+    },
+  };
+
+  const tempNodes = {
+    rules: [
+      createNode('rule-header', 'header', postions['rules']['x'], 0, {
+        icon: `${HEADER_ICON_PATH}rules.svg`,
+        title: 'Instrumentation Rules',
+        tagValue: rules.length,
+      }),
+    ],
+    sources: [
+      createNode('source-header', 'header', postions['sources']['x'], 0, {
+        icon: `${HEADER_ICON_PATH}sources.svg`,
+        title: 'Sources',
+        tagValue: sources.length,
+      }),
+    ],
+    actions: [
+      createNode('action-header', 'header', postions['actions']['x'], 0, {
+        icon: `${HEADER_ICON_PATH}actions.svg`,
+        title: 'Actions',
+        tagValue: actions.length,
+      }),
+    ],
+    destinations: [
+      createNode('destination-header', 'header', postions['destinations']['x'], 0, {
+        icon: `${HEADER_ICON_PATH}destinations.svg`,
+        title: 'Destinations',
+        tagValue: destinations.length,
+      }),
+    ],
   };
 
   // Build Rules Nodes
-  const ruleNodes: Node[] = [
-    createNode('rule-header', 'header', columnPostions['rules'], 0, {
-      icon: `${HEADER_ICON_PATH}rules.svg`,
-      title: 'Instrumentation Rules',
-      tagValue: rules.length,
-    }),
-    ...(!rules.length
-      ? [
-          createNode('rule-0', 'add', columnPostions['rules'], NODE_HEIGHT, {
-            type: OVERVIEW_NODE_TYPES.ADD_RULE,
-            status: STATUSES.HEALTHY,
-            title: 'ADD RULE',
-            subTitle: 'Add first rule to modify the OpenTelemetry data',
-          }),
-        ]
-      : rules.map((rule, index) =>
-          createNode(`rule-${index}`, 'base', columnPostions['rules'], NODE_HEIGHT * (index + 1), {
-            id: rule.ruleId,
-            type: OVERVIEW_ENTITY_TYPES.RULE,
-            status: STATUSES.HEALTHY,
-            title: rule.ruleName || rule.type,
-            subTitle: rule.type,
-            imageUri: getRuleIcon(rule.type),
-            isActive: !rule.disabled,
-          })
-        )),
-  ];
+  if (!rules.length) {
+    tempNodes['rules'].push(
+      createNode('rule-0', 'add', postions['rules']['x'], postions['rules']['y'](), {
+        type: OVERVIEW_NODE_TYPES.ADD_RULE,
+        status: STATUSES.HEALTHY,
+        title: 'ADD RULE',
+        subTitle: 'Add first rule to modify the OpenTelemetry data',
+      })
+    );
+  } else {
+    rules.forEach((rule, idx) => {
+      tempNodes['rules'].push(
+        createNode(`rule-${idx}`, 'base', postions['rules']['x'], postions['rules']['y'](idx), {
+          id: rule.ruleId,
+          type: OVERVIEW_ENTITY_TYPES.RULE,
+          status: STATUSES.HEALTHY,
+          title: rule.ruleName || rule.type,
+          subTitle: rule.type,
+          imageUri: getRuleIcon(rule.type),
+          isActive: !rule.disabled,
+        })
+      );
+    });
+  }
 
   // Build Source Nodes
-  const sourceNodes: Node[] = [
-    createNode('source-header', 'header', columnPostions['sources'], 0, {
-      icon: `${HEADER_ICON_PATH}sources.svg`,
-      title: 'Sources',
-      tagValue: sources.length,
-    }),
-    ...(!sources.length
-      ? [
-          createNode('source-0', 'add', columnPostions['sources'], NODE_HEIGHT, {
-            type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
-            status: STATUSES.HEALTHY,
-            title: 'ADD SOURCE',
-            subTitle: 'Add first source to collect OpenTelemetry data',
-          }),
-        ]
-      : sources.map((source, index) =>
-          createNode(`source-${index}`, 'base', columnPostions['sources'], NODE_HEIGHT * (index + 1), {
-            id: { kind: source.kind, name: source.name, namespace: source.namespace },
-            type: OVERVIEW_ENTITY_TYPES.SOURCE,
-            status: index === 0 ? STATUSES.UNHEALTHY : STATUSES.HEALTHY,
-            title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
-            subTitle: source.kind,
-            imageUri: getMainContainerLanguageLogo(source),
-          })
-        )),
-  ];
+  if (!sources.length) {
+    tempNodes['sources'].push(
+      createNode('source-0', 'add', postions['sources']['x'], postions['rules']['y'](), {
+        type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
+        status: STATUSES.HEALTHY,
+        title: 'ADD SOURCE',
+        subTitle: 'Add first source to collect OpenTelemetry data',
+      })
+    );
+  } else {
+    sources.forEach((source, idx) => {
+      const metric = metrics?.sources.find(
+        ({ kind, name, namespace }) => kind === source.kind && name === source.name && namespace === source.namespace
+      );
+
+      tempNodes['sources'].push(
+        createNode(`source-${idx}`, 'base', postions['sources']['x'], postions['rules']['y'](idx), {
+          id: { kind: source.kind, name: source.name, namespace: source.namespace },
+          type: OVERVIEW_ENTITY_TYPES.SOURCE,
+          status: getHealthStatus(source),
+          title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
+          subTitle: source.kind,
+          imageUri: getMainContainerLanguageLogo(source),
+          metric,
+        })
+      );
+    });
+  }
 
   // Build Action Nodes
-  const actionNodes: Node[] = [
-    createNode('action-header', 'header', columnPostions['actions'], 0, {
-      icon: `${HEADER_ICON_PATH}actions.svg`,
-      title: 'Actions',
-      tagValue: actions.length,
-    }),
-    ...(!actions.length
-      ? [
-          createNode('action-0', 'add', columnPostions['actions'], NODE_HEIGHT, {
-            type: OVERVIEW_NODE_TYPES.ADD_ACTION,
-            status: STATUSES.HEALTHY,
-            title: 'ADD ACTION',
-            subTitle: 'Add first action to modify the OpenTelemetry data',
-          }),
-        ]
-      : actions.map((action, index) => {
-          const actionSpec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
+  if (!actions.length) {
+    tempNodes['actions'].push(
+      createNode('action-0', 'add', postions['actions']['x'], postions['rules']['y'](), {
+        type: OVERVIEW_NODE_TYPES.ADD_ACTION,
+        status: STATUSES.HEALTHY,
+        title: 'ADD ACTION',
+        subTitle: 'Add first action to modify the OpenTelemetry data',
+      })
+    );
+  } else {
+    actions.forEach((action, idx) => {
+      const spec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
 
-          return createNode(`action-${index}`, 'base', columnPostions['actions'], NODE_HEIGHT * (index + 1), {
-            id: action.id,
-            type: OVERVIEW_ENTITY_TYPES.ACTION,
-            status: STATUSES.HEALTHY,
-            title: actionSpec.actionName || action.type,
-            subTitle: action.type,
-            imageUri: getActionIcon(action.type),
-            monitors: actionSpec.signals,
-            isActive: !actionSpec.disabled,
-          });
-        })),
-  ];
+      tempNodes['actions'].push(
+        createNode(`action-${idx}`, 'base', postions['actions']['x'], postions['rules']['y'](idx), {
+          id: action.id,
+          type: OVERVIEW_ENTITY_TYPES.ACTION,
+          status: STATUSES.HEALTHY,
+          title: spec.actionName || action.type,
+          subTitle: action.type,
+          imageUri: getActionIcon(action.type),
+          monitors: spec.signals,
+          isActive: !spec.disabled,
+        })
+      );
+    });
 
-  // Create group for actions
-  if (actions.length) {
+    // Create group
     const padding = 15;
-    const getDifference = (x: number) => {
-      const a = 23.24; // coefficient
-      const b = -0.589; // exponent
-      return a * Math.pow(x, b);
-    };
+    const widthMultiplier = 4.5;
+    const heightMultiplier = 1.5;
 
-    actionNodes.push(
+    tempNodes['actions'].push(
       createNode(
         'action-group',
         'group',
-        columnPostions['actions'] - padding,
-        NODE_HEIGHT - padding,
+        postions['actions']['x'] - padding,
+        postions['rules']['y']() - padding,
         {},
         {
-          width: columnWidth + padding * getDifference(padding),
-          height: NODE_HEIGHT * actions.length + padding,
+          width: nodeWidth + padding * widthMultiplier,
+          height: nodeHeight * actions.length + padding * heightMultiplier,
           background: 'transparent',
           border: `1px dashed ${theme.colors.border}`,
           borderRadius: 24,
@@ -197,53 +257,52 @@ export const buildNodesAndEdges = ({
   }
 
   // Build Destination Nodes
-  const destinationNodes: Node[] = [
-    createNode('destination-header', 'header', columnPostions['destinations'], 0, {
-      icon: `${HEADER_ICON_PATH}destinations.svg`,
-      title: 'Destinations',
-      tagValue: destinations.length,
-    }),
-    ...(!destinations.length
-      ? [
-          createNode('destination-0', 'add', columnPostions['destinations'], NODE_HEIGHT, {
-            type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
-            status: STATUSES.HEALTHY,
-            title: 'ADD DESTIONATION',
-            subTitle: 'Add first destination to monitor OpenTelemetry data',
-          }),
-        ]
-      : destinations.map((destination, index) =>
-          createNode(`destination-${index}`, 'base', columnPostions['destinations'], NODE_HEIGHT * (index + 1), {
-            id: destination.id,
-            type: OVERVIEW_ENTITY_TYPES.DESTINATION,
-            status: index === 0 ? STATUSES.UNHEALTHY : STATUSES.HEALTHY,
-            title: destination.name,
-            subTitle: destination.destinationType.displayName,
-            imageUri: destination.destinationType.imageUrl,
-            monitors: extractMonitors(destination.exportedSignals),
-          })
-        )),
-  ];
-
-  // Combine all nodes
-  const nodes = [...ruleNodes, ...sourceNodes, ...actionNodes, ...destinationNodes];
+  if (!destinations.length) {
+    tempNodes['destinations'].push(
+      createNode('destination-0', 'add', postions['destinations']['x'], postions['rules']['y'](), {
+        type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
+        status: STATUSES.HEALTHY,
+        title: 'ADD DESTIONATION',
+        subTitle: 'Add first destination to monitor OpenTelemetry data',
+      })
+    );
+  } else {
+    destinations.forEach((destination, idx) => {
+      const metric = metrics?.destinations.find(({ id }) => id === destination.id);
 
-  // Build edges - connecting sources to actions, and actions to destinations
-  const edges: Edge[] = [];
+      tempNodes['destinations'].push(
+        createNode(`destination-${idx}`, 'base', postions['destinations']['x'], postions['rules']['y'](idx), {
+          id: destination.id,
+          type: OVERVIEW_ENTITY_TYPES.DESTINATION,
+          status: getHealthStatus(destination),
+          title: destination.name || destination.destinationType.displayName,
+          subTitle: destination.destinationType.displayName,
+          imageUri: destination.destinationType.imageUrl,
+          monitors: extractMonitors(destination.exportedSignals),
+          metric,
+        })
+      );
+    });
+  }
 
   // Connect sources to actions
   if (!sources.length) {
     edges.push(createEdge('source-0-to-action-0'));
   } else {
-    sources.forEach((_, sourceIndex) => {
-      const actionIndex = actions.length ? 'group' : 0;
-      edges.push(
-        createEdge(`source-${sourceIndex}-to-action-${actionIndex}`, {
-          label: `${sourceIndex === 0 ? 0 : (Math.random() * 50).toFixed(1)} kb/s`,
-          isMultiTarget: false,
-          isError: sourceIndex === 0,
-        })
-      );
+    tempNodes['sources'].forEach((node, idx) => {
+      if (idx > 0) {
+        const sourceIndex = idx - 1;
+        const actionIndex = actions.length ? 'group' : 0;
+
+        edges.push(
+          createEdge(`source-${sourceIndex}-to-action-${actionIndex}`, {
+            animated: false,
+            isMultiTarget: false,
+            label: formatBytes(node.data.metric?.throughput),
+            isError: node.data.status === STATUSES.UNHEALTHY,
+          })
+        );
+      }
     });
   }
 
@@ -259,17 +318,24 @@ export const buildNodesAndEdges = ({
   if (!destinations.length) {
     edges.push(createEdge('action-0-to-destination-0'));
   } else {
-    destinations.forEach((_, destinationIndex) => {
-      const actionIndex = actions.length ? 'group' : 0;
-      edges.push(
-        createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, {
-          label: `${destinationIndex === 0 ? 0 : (Math.random() * 10).toFixed(1)} kb/s`,
-          isMultiTarget: true,
-          isError: destinationIndex === 0,
-        })
-      );
+    tempNodes['destinations'].forEach((node, idx) => {
+      if (idx > 0) {
+        const destinationIndex = idx - 1;
+        const actionIndex = actions.length ? 'group' : 0;
+
+        edges.push(
+          createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, {
+            animated: true,
+            isMultiTarget: true,
+            label: formatBytes(node.data.metric?.throughput),
+            isError: node.data.status === STATUSES.UNHEALTHY,
+          })
+        );
+      }
     });
   }
 
+  Object.values(tempNodes).forEach((arr) => nodes.push(...arr));
+
   return { nodes, edges };
 };
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/edges/labeled-edge.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/edges/labeled-edge.tsx
index e86982753..267ba70be 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/edges/labeled-edge.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/edges/labeled-edge.tsx
@@ -5,7 +5,7 @@ import { EdgeLabelRenderer, BaseEdge, type EdgeProps, type Edge, getSmoothStepPa
 const Label = styled.div<{ labelX: number; labelY: number; isError?: boolean }>`
   position: absolute;
   transform: ${({ labelX, labelY }) => `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`};
-  width: 60px;
+  width: 75px;
   padding: 2px 6px;
   background-color: ${({ theme }) => theme.colors.primary};
   border-radius: 360px;
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
index d48c2eedf..19379f623 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -12,18 +12,18 @@ interface NodeBaseDataFlowProps {
   nodes: any[];
   edges: any[];
   onNodeClick?: (event: React.MouseEvent, object: any) => void;
-  columnWidth: number;
+  nodeWidth: number;
 }
 
-export function NodeBaseDataFlow({ nodes, edges, onNodeClick, columnWidth }: NodeBaseDataFlowProps) {
+export function NodeBaseDataFlow({ nodes, edges, onNodeClick, nodeWidth }: NodeBaseDataFlowProps) {
   const nodeTypes = useMemo(
     () => ({
-      header: (props) => <HeaderNode {...props} columnWidth={columnWidth} />,
-      add: (props) => <AddNode {...props} columnWidth={columnWidth} />,
-      base: (props) => <BaseNode {...props} columnWidth={columnWidth} />,
+      header: (props) => <HeaderNode {...props} nodeWidth={nodeWidth} />,
+      add: (props) => <AddNode {...props} nodeWidth={nodeWidth} />,
+      base: (props) => <BaseNode {...props} nodeWidth={nodeWidth} />,
       group: GroupNode,
     }),
-    [columnWidth]
+    [nodeWidth]
   );
 
   const edgeTypes = useMemo(
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
index 2e02a89a9..c5b8ea3ba 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-node.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import { Text } from '@/reuseable-components';
 import { Handle, Position } from '@xyflow/react';
 
-const BaseNodeContainer = styled.div<{ columnWidth: number }>`
-  width: ${({ columnWidth }) => `${columnWidth}px`};
+const BaseNodeContainer = styled.div<{ nodeWidth: number }>`
+  width: ${({ nodeWidth }) => `${nodeWidth}px`};
   padding: 16px 24px 16px 16px;
   display: flex;
   flex-direction: column;
@@ -65,12 +65,12 @@ interface BaseNodeProps {
   sourcePosition?: any;
   targetPosition?: any;
 
-  columnWidth: number;
+  nodeWidth: number;
 }
 
-const AddNode = ({ id, isConnectable, data, columnWidth }: BaseNodeProps) => {
+const AddNode = ({ id, isConnectable, data, nodeWidth }: BaseNodeProps) => {
   return (
-    <BaseNodeContainer columnWidth={columnWidth}>
+    <BaseNodeContainer nodeWidth={nodeWidth}>
       <TitleWrapper>
         <Image src='/icons/common/plus.svg' width={16} height={16} alt='plus' />
         <Title>{data.title}</Title>
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
index 60fd58832..ff66266f5 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
@@ -6,8 +6,8 @@ import { Handle, Position } from '@xyflow/react';
 import { Status, Text } from '@/reuseable-components';
 import { getStatusIcon } from '@/utils';
 
-const BaseNodeContainer = styled.div<{ columnWidth: number; isError?: boolean }>`
-  width: ${({ columnWidth }) => `${columnWidth}px`};
+const BaseNodeContainer = styled.div<{ nodeWidth: number; isError?: boolean }>`
+  width: ${({ nodeWidth }) => `${nodeWidth}px`};
   padding: 16px 24px 16px 16px;
   gap: 8px;
   display: flex;
@@ -49,8 +49,8 @@ const FooterWrapper = styled.div`
   align-items: center;
 `;
 
-const Title = styled(Text)<{ columnWidth: number }>`
-  width: ${({ columnWidth }) => `${columnWidth - 75}px`};
+const Title = styled(Text)<{ nodeWidth: number }>`
+  width: ${({ nodeWidth }) => `${nodeWidth - 75}px`};
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -74,12 +74,12 @@ export interface NodeDataProps {
 
 interface BaseNodeProps {
   id: string;
-  columnWidth: number;
+  nodeWidth: number;
   isConnectable: boolean;
   data: NodeDataProps;
 }
 
-const BaseNode = ({ columnWidth, isConnectable, data }: BaseNodeProps) => {
+const BaseNode = ({ nodeWidth, isConnectable, data }: BaseNodeProps) => {
   const { type, status, title, subTitle, imageUri, monitors, isActive } = data;
 
   function renderHandles() {
@@ -129,12 +129,12 @@ const BaseNode = ({ columnWidth, isConnectable, data }: BaseNodeProps) => {
   const isError = status === STATUSES.UNHEALTHY;
 
   return (
-    <BaseNodeContainer columnWidth={columnWidth} isError={isError}>
+    <BaseNodeContainer nodeWidth={nodeWidth} isError={isError}>
       <SourceIconWrapper>
         <Image src={imageUri || '/icons/common/folder.svg'} width={20} height={20} alt='source' />
       </SourceIconWrapper>
       <BodyWrapper>
-        <Title columnWidth={columnWidth}>{title}</Title>
+        <Title nodeWidth={nodeWidth}>{title}</Title>
         <FooterWrapper>
           <FooterText>{subTitle}</FooterText>
           {renderMonitors()}
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
index 0a48fcd53..7cae41c02 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
@@ -4,8 +4,8 @@ import Image from 'next/image';
 import styled from 'styled-components';
 import { Text } from '@/reuseable-components';
 
-const ColumnContainer = styled.div<{ columnWidth: number }>`
-  width: ${({ columnWidth }) => `${columnWidth + 40}px`};
+const ColumnContainer = styled.div<{ nodeWidth: number }>`
+  width: ${({ nodeWidth }) => `${nodeWidth + 40}px`};
   padding: 12px 0px 16px 0px;
   gap: 8px;
   display: flex;
@@ -39,12 +39,12 @@ interface Column {
 
 interface HeaderNodeProps {
   data: Column;
-  columnWidth: number;
+  nodeWidth: number;
 }
 
-const HeaderNode = ({ data, columnWidth }: HeaderNodeProps) => {
+const HeaderNode = ({ data, nodeWidth }: HeaderNodeProps) => {
   return (
-    <ColumnContainer columnWidth={columnWidth}>
+    <ColumnContainer nodeWidth={nodeWidth}>
       <Image src={data.icon} width={16} height={16} alt={data.title} />
       <Title size={14}>{data.title}</Title>
       <TagValueContainer>
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index 8fe055b18..3fbceedb2 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -1,3 +1,9 @@
+export interface ExportedSignals {
+  logs: boolean;
+  metrics: boolean;
+  traces: boolean;
+}
+
 export interface Condition {
   type: string;
   status: string;
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 0d1f3dd97..72ac143ac 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -1,4 +1,4 @@
-import { Condition } from './common';
+import type { Condition, ExportedSignals } from './common';
 
 export enum DestinationsSortType {
   NAME = 'name',
@@ -61,12 +61,6 @@ export interface DestinationDetailsResponse {
   };
 }
 
-export interface ExportedSignals {
-  logs: boolean;
-  metrics: boolean;
-  traces: boolean;
-}
-
 interface FieldInput {
   key: string;
   value: string;
@@ -174,5 +168,4 @@ export interface ActualDestination {
   };
 }
 
-export const isActualDestination = (item: any): item is ActualDestination =>
-  item && 'destinationType' in item;
+export const isActualDestination = (item: any): item is ActualDestination => item && 'destinationType' in item;
diff --git a/frontend/webapp/types/index.ts b/frontend/webapp/types/index.ts
index 48e2eb83c..514841421 100644
--- a/frontend/webapp/types/index.ts
+++ b/frontend/webapp/types/index.ts
@@ -6,3 +6,4 @@ export * from './common';
 export * from './compute-platform';
 export * from './namespace';
 export * from './instrumentation-rules';
+export * from './metrics';
diff --git a/frontend/webapp/types/metrics.ts b/frontend/webapp/types/metrics.ts
new file mode 100644
index 000000000..db8b9d0fb
--- /dev/null
+++ b/frontend/webapp/types/metrics.ts
@@ -0,0 +1,18 @@
+export interface SingleSourceMetricsResponse {
+  namespace: string;
+  kind: string;
+  name: string;
+  totalDataSent: number;
+  throughput: number;
+}
+
+export interface SingleDestinationMetricsResponse {
+  id: string;
+  totalDataSent: number;
+  throughput: number;
+}
+
+export interface OverviewMetricsResponse {
+  sources: SingleSourceMetricsResponse[];
+  destinations: SingleDestinationMetricsResponse[];
+}
diff --git a/frontend/webapp/utils/functions/derive-type-from-rule.ts b/frontend/webapp/utils/functions/derive-types.ts
similarity index 57%
rename from frontend/webapp/utils/functions/derive-type-from-rule.ts
rename to frontend/webapp/utils/functions/derive-types.ts
index 643ec601f..b0eaf0bc5 100644
--- a/frontend/webapp/utils/functions/derive-type-from-rule.ts
+++ b/frontend/webapp/utils/functions/derive-types.ts
@@ -1,6 +1,6 @@
 import { InstrumentationRuleType, type InstrumentationRuleSpec } from '@/types';
 
-const deriveTypeFromRule = (rule: InstrumentationRuleSpec): InstrumentationRuleType | undefined => {
+export const deriveTypeFromRule = (rule: InstrumentationRuleSpec): InstrumentationRuleType | undefined => {
   if (rule.payloadCollection) {
     return InstrumentationRuleType.PAYLOAD_COLLECTION;
   }
@@ -8,4 +8,4 @@ const deriveTypeFromRule = (rule: InstrumentationRuleSpec): InstrumentationRuleT
   return undefined;
 };
 
-export { deriveTypeFromRule };
+// TODO: add "deriveTypeFromAction"
diff --git a/frontend/webapp/utils/functions/extract-monitors.ts b/frontend/webapp/utils/functions/extract-monitors.ts
new file mode 100644
index 000000000..e552ecfc3
--- /dev/null
+++ b/frontend/webapp/utils/functions/extract-monitors.ts
@@ -0,0 +1,7 @@
+import type { ExportedSignals } from '@/types';
+
+export const extractMonitors = (exportedSignals: ExportedSignals) => {
+  const filtered = Object.keys(exportedSignals).filter((signal) => exportedSignals[signal] === true);
+
+  return filtered;
+};
diff --git a/frontend/webapp/utils/functions/formatters.ts b/frontend/webapp/utils/functions/formatters.ts
new file mode 100644
index 000000000..11e0f4452
--- /dev/null
+++ b/frontend/webapp/utils/functions/formatters.ts
@@ -0,0 +1,9 @@
+export const formatBytes = (bytes?: number) => {
+  if (!bytes) return '0 KB/s';
+
+  const sizes = ['Bytes', 'KB/s', 'MB/s', 'GB/s', 'TB/s'];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const value = bytes / Math.pow(1024, i);
+
+  return `${value.toFixed(1)} ${sizes[i]}`;
+};
diff --git a/frontend/webapp/utils/functions/get-action-icon.ts b/frontend/webapp/utils/functions/get-action-icon.ts
deleted file mode 100644
index c7f4efa76..000000000
--- a/frontend/webapp/utils/functions/get-action-icon.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { ActionsType } from '@/types';
-
-const ICON_PATH = '/icons/actions/';
-
-export const getActionIcon = (type?: ActionsType | 'sampler') => {
-  if (!type) return '/brand/odigos-icon.svg';
-
-  const typeLowerCased = type.toLowerCase();
-  const isSampler = typeLowerCased.includes('sampler');
-
-  return `${ICON_PATH}${isSampler ? 'sampler' : typeLowerCased}.svg`;
-};
diff --git a/frontend/webapp/utils/functions/get-rule-icon.ts b/frontend/webapp/utils/functions/get-rule-icon.ts
deleted file mode 100644
index 893fc395b..000000000
--- a/frontend/webapp/utils/functions/get-rule-icon.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { InstrumentationRuleType } from '@/types';
-
-const ICON_PATH = '/icons/rules/';
-
-export const getRuleIcon = (type?: InstrumentationRuleType) => {
-  if (!type) return '/brand/odigos-icon.svg';
-
-  const typeLowerCased = type.replaceAll('-', '').toLowerCase();
-
-  return `${ICON_PATH}${typeLowerCased}.svg`;
-};
diff --git a/frontend/webapp/utils/functions/get-status-icon.ts b/frontend/webapp/utils/functions/get-status-icon.ts
deleted file mode 100644
index eeca573a4..000000000
--- a/frontend/webapp/utils/functions/get-status-icon.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const ICON_PATH = '/icons/notification/';
-
-export const getStatusIcon = (active?: boolean) => {
-  return `${ICON_PATH}${active ? 'success-icon' : 'error-icon2'}.svg`;
-};
diff --git a/frontend/webapp/utils/functions/get-value-for-range.ts b/frontend/webapp/utils/functions/get-value-for-range.ts
new file mode 100644
index 000000000..04a385c77
--- /dev/null
+++ b/frontend/webapp/utils/functions/get-value-for-range.ts
@@ -0,0 +1,14 @@
+export const getValueForRange = (current: number, matrix: [number, number | null, any][]) => {
+  // CURRENT: represents the current value (such as window width)
+  // MATRIX: represents the ranges (index[0] == min, index[1] == max, index[2] == value to get)
+
+  // EXAMPLE:
+  // getValueForRange(width, [
+  //   [0, 1000, 'small'], // ---> from 0 to 1000, return "small"
+  //   [1000, null, 'big'], // ---> from 1000 to infinite, return "big"
+  // ])
+
+  const found = matrix.find(([min, max]) => current >= min && (max === null || current <= max));
+
+  return found?.[2] || null;
+};
diff --git a/frontend/webapp/utils/functions/icons.ts b/frontend/webapp/utils/functions/icons.ts
new file mode 100644
index 000000000..2be9175f4
--- /dev/null
+++ b/frontend/webapp/utils/functions/icons.ts
@@ -0,0 +1,28 @@
+import type { ActionsType, InstrumentationRuleType } from '@/types';
+
+const BRAND_ICON = '/brand/odigos-icon.svg';
+
+export const getStatusIcon = (active?: boolean) => {
+  const path = '/icons/notification/';
+
+  return `${path}${active ? 'success-icon' : 'error-icon2'}.svg`;
+};
+
+export const getRuleIcon = (type?: InstrumentationRuleType) => {
+  if (!type) return BRAND_ICON;
+
+  const path = '/icons/rules/';
+  const typeLowerCased = type.replaceAll('-', '').toLowerCase();
+
+  return `${path}${typeLowerCased}.svg`;
+};
+
+export const getActionIcon = (type?: ActionsType | 'sampler') => {
+  if (!type) return BRAND_ICON;
+
+  const path = '/icons/actions/';
+  const typeLowerCased = type.toLowerCase();
+  const isSampler = typeLowerCased.includes('sampler');
+
+  return `${path}${isSampler ? 'sampler' : typeLowerCased}.svg`;
+};
diff --git a/frontend/webapp/utils/functions/index.ts b/frontend/webapp/utils/functions/index.ts
index 58f9f1740..dd67708ea 100644
--- a/frontend/webapp/utils/functions/index.ts
+++ b/frontend/webapp/utils/functions/index.ts
@@ -1,4 +1,6 @@
+export * from './derive-types';
+export * from './extract-monitors';
+export * from './formatters';
+export * from './get-value-for-range';
+export * from './icons';
 export * from './strings';
-export * from './get-action-icon';
-export * from './get-status-icon';
-export * from './get-rule-icon';

From a816fdae11a4836f37ee2512a9ece0beb30586ec Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 6 Nov 2024 09:42:49 +0200
Subject: [PATCH 338/374] [GEN-1624]: refactor existing components in
 preparation for notifications (#1697)

---
 frontend/webapp/app/page.tsx                  |  41 +++--
 .../connection-notification.tsx               |  15 +-
 .../destinations/add-destination/index.tsx    |   2 +-
 .../add-rule-modal/index.tsx                  |   2 +-
 frontend/webapp/hooks/useSSE.ts               |  54 +++----
 .../reuseable-components/divider/index.tsx    |  24 +--
 .../nodes-data-flow/nodes/base-node.tsx       |   2 +-
 .../notification-note/index.tsx               | 142 +++++++++---------
 .../reuseable-components/status/index.tsx     |   2 +-
 frontend/webapp/utils/functions/icons.ts      |  24 ++-
 10 files changed, 139 insertions(+), 169 deletions(-)

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index ec28d1ded..ea08044df 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -1,46 +1,39 @@
 'use client';
 import { useEffect } from 'react';
-import { useConfig } from '@/hooks';
 import { ROUTES, CONFIG } from '@/utils';
 import { useRouter } from 'next/navigation';
-import { addNotification, store } from '@/store';
+import { useConfig, useNotify } from '@/hooks';
 import { Loader } from '@keyval-dev/design-system';
 
 export default function App() {
   const router = useRouter();
+  const notify = useNotify();
   const { data, error } = useConfig();
 
   useEffect(() => {
-    data && renderCurrentPage();
-  }, [data, error]);
-
-  useEffect(() => {
-    if (!error) return;
-    store.dispatch(
-      addNotification({
-        id: '1',
+    if (error) {
+      notify({
         message: 'An error occurred',
         title: 'Error',
         type: 'error',
         target: 'notification',
         crdType: 'notification',
-      })
-    );
-    router.push(ROUTES.OVERVIEW);
-  }, [error]);
+      });
 
-  function renderCurrentPage() {
-    const { installation } = data;
+      router.push(ROUTES.OVERVIEW);
+    } else if (data) {
+      const { installation } = data;
 
-    switch (installation) {
-      case CONFIG.NEW:
-      case CONFIG.APPS_SELECTED:
-        router.push(ROUTES.CHOOSE_SOURCES);
-        break;
-      case CONFIG.FINISHED:
-        router.push(ROUTES.OVERVIEW);
+      switch (installation) {
+        case CONFIG.NEW:
+        case CONFIG.APPS_SELECTED:
+          router.push(ROUTES.CHOOSE_SOURCES);
+          break;
+        case CONFIG.FINISHED:
+          router.push(ROUTES.OVERVIEW);
+      }
     }
-  }
+  }, [data, error]);
 
   return <Loader />;
 }
diff --git a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
index 960bc3630..c94d7ef21 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx
@@ -1,25 +1,16 @@
 import { NotificationNote } from '@/reuseable-components';
 import styled from 'styled-components';
 
-export const ConnectionNotification = ({
-  showConnectionError,
-  destination,
-}) => (
+export const ConnectionNotification = ({ showConnectionError, destination }) => (
   <>
     {showConnectionError && (
       <NotificationNoteWrapper>
-        <NotificationNote
-          type="error"
-          text="Connection failed. Please check your input and try again."
-        />
+        <NotificationNote type='error' message='Connection failed. Please check your input and try again.' />
       </NotificationNoteWrapper>
     )}
     {destination?.fields && !showConnectionError && (
       <NotificationNoteWrapper>
-        <NotificationNote
-          type="default"
-          text={`Odigos autocompleted ${destination.displayName} connection details.`}
-        />
+        <NotificationNote type='default' message={`Odigos autocompleted ${destination.displayName} connection details.`} />
       </NotificationNoteWrapper>
     )}
   </>
diff --git a/frontend/webapp/containers/main/destinations/add-destination/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
index 0f63dc7a9..b3356b2b3 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/index.tsx
@@ -80,7 +80,7 @@ export function ChooseDestinationContainer() {
           <NotificationNoteWrapper>
             <NotificationNote
               type={'warning'}
-              text={'No sources selected.'}
+              message={'No sources selected.'}
               action={{
                 label: 'Select sources',
                 onClick: () => router.push('/choose-sources'),
diff --git a/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
index 5c96ad3a8..6af49d440 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
@@ -70,7 +70,7 @@ export const AddRuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
         />
         <NotificationNote
           type='info'
-          text='We currently support one rule. We’ll be adding new rule types in the near future.'
+          message='We currently support one rule. We’ll be adding new rule types in the near future.'
           style={{ marginTop: '24px' }}
         />
         <AutocompleteInput
diff --git a/frontend/webapp/hooks/useSSE.ts b/frontend/webapp/hooks/useSSE.ts
index 37d50ec71..b6773f407 100644
--- a/frontend/webapp/hooks/useSSE.ts
+++ b/frontend/webapp/hooks/useSSE.ts
@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { API } from '@/utils';
-import { addNotification, store } from '@/store';
+import { useNotify } from './useNotify';
 
 export function useSSE() {
+  const notify = useNotify();
   const eventBuffer = useRef({});
   const [retryCount, setRetryCount] = useState(0);
   const maxRetries = 10;
@@ -25,10 +26,7 @@ export function useSSE() {
         };
 
         // Check if the event is already in the buffer
-        if (
-          eventBuffer.current[key] &&
-          eventBuffer.current[key].id > Date.now() - 2000
-        ) {
+        if (eventBuffer.current[key] && eventBuffer.current[key].id > Date.now() - 2000) {
           eventBuffer.current[key] = notification;
           return;
         } else {
@@ -37,16 +35,13 @@ export function useSSE() {
         }
 
         // Dispatch the notification to the store
-        store.dispatch(
-          addNotification({
-            id: eventBuffer.current[key].id,
-            message: eventBuffer.current[key].message,
-            title: eventBuffer.current[key].title,
-            type: eventBuffer.current[key].type,
-            target: eventBuffer.current[key].target,
-            crdType: eventBuffer.current[key].crdType,
-          })
-        );
+        notify({
+          message: eventBuffer.current[key].message,
+          title: eventBuffer.current[key].title,
+          type: eventBuffer.current[key].type,
+          target: eventBuffer.current[key].target,
+          crdType: eventBuffer.current[key].crdType,
+        });
 
         // Reset retry count on successful connection
         setRetryCount(0);
@@ -60,10 +55,7 @@ export function useSSE() {
         setRetryCount((prevRetryCount) => {
           if (prevRetryCount < maxRetries) {
             const newRetryCount = prevRetryCount + 1;
-            const retryTimeout = Math.min(
-              10000,
-              1000 * Math.pow(2, newRetryCount)
-            );
+            const retryTimeout = Math.min(10000, 1000 * Math.pow(2, newRetryCount));
 
             setTimeout(() => {
               connect();
@@ -71,20 +63,16 @@ export function useSSE() {
 
             return newRetryCount;
           } else {
-            console.error(
-              'Max retries reached. Could not reconnect to EventSource.'
-            );
-            store.dispatch(
-              addNotification({
-                id: Date.now().toString(),
-                message:
-                  'Connection to the server failed. Please reboot the application.',
-                title: 'Connection Error',
-                type: 'error',
-                target: 'system',
-                crdType: 'connection',
-              })
-            );
+            console.error('Max retries reached. Could not reconnect to EventSource.');
+
+            notify({
+              message: 'Connection to the server failed. Please reboot the application.',
+              title: 'Connection Error',
+              type: 'error',
+              target: 'system',
+              crdType: 'connection',
+            });
+
             return prevRetryCount;
           }
         });
diff --git a/frontend/webapp/reuseable-components/divider/index.tsx b/frontend/webapp/reuseable-components/divider/index.tsx
index 5ba268e48..26c80541b 100644
--- a/frontend/webapp/reuseable-components/divider/index.tsx
+++ b/frontend/webapp/reuseable-components/divider/index.tsx
@@ -9,28 +9,14 @@ interface DividerProps {
 }
 
 const StyledDivider = styled.div<DividerProps>`
-  width: ${({ orientation, thickness }) =>
-    orientation === 'vertical' ? `${thickness}px` : '100%'};
-  height: ${({ orientation, thickness }) =>
-    orientation === 'horizontal' ? `${thickness}px` : '100%'};
+  width: ${({ orientation, thickness }) => (orientation === 'vertical' ? `${thickness}px` : '100%')};
+  height: ${({ orientation, thickness }) => (orientation === 'horizontal' ? `${thickness}px` : '100%')};
   background-color: ${({ color, theme }) => color || theme.colors.border};
-  margin: ${({ margin }) => margin || '8px 0'};
+  margin: ${({ orientation, margin }) => margin || (orientation === 'horizontal' ? '8px 0' : '0 8px')};
 `;
 
-const Divider: React.FC<DividerProps> = ({
-  thickness = 1,
-  color,
-  margin,
-  orientation = 'horizontal',
-}) => {
-  return (
-    <StyledDivider
-      thickness={thickness}
-      color={color}
-      margin={margin}
-      orientation={orientation}
-    />
-  );
+const Divider: React.FC<DividerProps> = ({ thickness = 1, color, margin, orientation = 'horizontal' }) => {
+  return <StyledDivider thickness={thickness} color={color} margin={margin} orientation={orientation} />;
 };
 
 export { Divider };
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
index ff66266f5..39844275c 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx
@@ -141,7 +141,7 @@ const BaseNode = ({ nodeWidth, isConnectable, data }: BaseNodeProps) => {
           {renderStatus()}
         </FooterWrapper>
       </BodyWrapper>
-      {isError ? <Image src={getStatusIcon(false)} alt='' width={20} height={20} /> : null}
+      {isError ? <Image src={getStatusIcon('error')} alt='' width={20} height={20} /> : null}
       {renderHandles()}
     </BaseNodeContainer>
   );
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
index d61749943..0978a9cbe 100644
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
 import Image from 'next/image';
 import { Text } from '../text';
+import { Divider } from '../divider';
+import styled from 'styled-components';
 
-// Define the notification types
 type NotificationType = 'warning' | 'error' | 'success' | 'info' | 'default';
 
 interface NotificationProps {
   type: NotificationType;
-  text: string;
+  title?: string;
+  message?: string;
   action?: {
     label: string;
     onClick: () => void;
@@ -16,103 +17,104 @@ interface NotificationProps {
   style?: React.CSSProperties;
 }
 
+const getTextColor = ({ type }: { type: NotificationType }) => {
+  switch (type) {
+    case 'warning':
+      return '#E9CF35';
+    case 'error':
+      return '#E25A5A';
+    case 'success':
+      return '#81AF65';
+    case 'info':
+      return '#B8B8B8';
+    case 'default':
+    default:
+      return '#AABEF7';
+  }
+};
+
+const getBackgroundColor = ({ type }: { type: NotificationType }) => {
+  switch (type) {
+    case 'warning':
+      return '#472300';
+    case 'error':
+      return '#431919';
+    case 'success':
+      return '#172013';
+    case 'info':
+      return '#242424';
+    case 'default':
+    default:
+      return '#181944';
+  }
+};
+
+const getIconSource = ({ type }: { type: NotificationType }) => {
+  switch (type) {
+    case 'warning':
+      return '/icons/notification/warning-icon.svg';
+    case 'error':
+      return '/icons/notification/error-icon.svg';
+    case 'success':
+      return '/icons/notification/success-icon.svg';
+    case 'info':
+      return '/icons/common/info.svg';
+    default:
+      return '/brand/odigos-icon.svg';
+  }
+};
+
 const NotificationContainer = styled.div<{ type: NotificationType }>`
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 12px 16px;
   border-radius: 32px;
-
-  background-color: ${({ type }) => {
-    switch (type) {
-      case 'warning':
-        return '#472300'; // Orange
-      case 'error':
-        return 'rgba(226, 90, 90, 0.12);';
-      case 'success':
-        return '#28A745'; // Green
-      case 'info':
-        return '#F9F9F90A'; // Default to info color
-      case 'default':
-      default:
-        return '#181944'; // Blue
-    }
-  }};
+  background-color: ${getBackgroundColor};
 `;
 
-const IconWrapper = styled.div`
-  margin-right: 12px;
+const TextWrapper = styled.div`
   display: flex;
-  justify-content: center;
   align-items: center;
+  margin: 0 12px;
+  height: 12px;
 `;
 
 const Title = styled(Text)<{ type: NotificationType }>`
   font-size: 14px;
-  color: ${({ type }) => {
-    switch (type) {
-      case 'warning':
-        return '#E9CF35';
-      case 'error':
-        return '#E25A5A';
-      case 'success':
-        return '#28A745';
-      case 'info':
-        return '#B8B8B8';
-      case 'default':
-      default:
-        return '#AABEF7';
-    }
-  }};
+  color: ${getTextColor};
 `;
 
-const TitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
+const Message = styled(Text)<{ type: NotificationType }>`
+  font-size: 12px;
+  color: ${getTextColor};
 `;
 
 const ActionButtonWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+  margin-left: 40px;
 `;
 
 const ActionButton = styled(Text)`
-  text-decoration: underline;
   text-transform: uppercase;
+  text-decoration: underline;
   font-size: 14px;
-  font-weight: 400;
   font-family: ${({ theme }) => theme.font_family.secondary};
+  cursor: pointer;
 `;
 
-const NotificationIcon = ({ type }: { type: NotificationType }) => {
-  switch (type) {
-    case 'warning':
-      return <Image src='/icons/notification/warning-icon.svg' alt='warning' width={16} height={16} />;
-    case 'error':
-      return <Image src='/icons/notification/error-icon.svg' alt='error' width={16} height={16} />;
-    case 'success':
-      return <Image src='/icons/notification/success-icon.svg' alt='success' width={16} height={16} />;
-    case 'info':
-      return <Image src='/icons/common/info.svg' alt='info' width={16} height={16} />;
-    default:
-      return <Image src='/brand/odigos-icon.svg' alt='info' width={16} height={16} />;
-  }
-};
-
-const NotificationNote: React.FC<NotificationProps> = ({ type, text, action, style }) => {
+const NotificationNote: React.FC<NotificationProps> = ({ type, title, message, action, style }) => {
   return (
     <NotificationContainer type={type} style={style}>
-      <TitleWrapper>
-        <IconWrapper>
-          <NotificationIcon type={type} />
-        </IconWrapper>
-        <Title type={type}>{text}</Title>
-      </TitleWrapper>
+      <Image src={getIconSource({ type })} alt={type} width={16} height={16} />
+
+      <TextWrapper>
+        {title && <Title type={type}>{title}</Title>}
+        {title && message && <Divider orientation='vertical' color={getTextColor({ type }) + '4D'} thickness={1} />}
+        {message && <Message type={type}>{message}</Message>}
+      </TextWrapper>
+
       {action && (
         <ActionButtonWrapper onClick={action.onClick}>
-          <ActionButton decoration='under'>{action.label}</ActionButton>
+          <ActionButton>{action.label}</ActionButton>
         </ActionButtonWrapper>
       )}
     </NotificationContainer>
diff --git a/frontend/webapp/reuseable-components/status/index.tsx b/frontend/webapp/reuseable-components/status/index.tsx
index 59038ae18..967d90df1 100644
--- a/frontend/webapp/reuseable-components/status/index.tsx
+++ b/frontend/webapp/reuseable-components/status/index.tsx
@@ -72,7 +72,7 @@ const Status: React.FC<Props> = (props) => {
     <StatusWrapper {...props}>
       {withIcon && (
         <IconWrapper {...props}>
-          <Image src={getStatusIcon(isActive)} alt='status' width={withSmaller ? 14 : 16} height={withSmaller ? 14 : 16} />
+          <Image src={getStatusIcon(isActive ? 'success' : 'error')} alt='status' width={withSmaller ? 14 : 16} height={withSmaller ? 14 : 16} />
         </IconWrapper>
       )}
 
diff --git a/frontend/webapp/utils/functions/icons.ts b/frontend/webapp/utils/functions/icons.ts
index 2be9175f4..5cb4ca5ac 100644
--- a/frontend/webapp/utils/functions/icons.ts
+++ b/frontend/webapp/utils/functions/icons.ts
@@ -2,27 +2,37 @@ import type { ActionsType, InstrumentationRuleType } from '@/types';
 
 const BRAND_ICON = '/brand/odigos-icon.svg';
 
-export const getStatusIcon = (active?: boolean) => {
-  const path = '/icons/notification/';
+export const getStatusIcon = (status?: 'success' | 'error' | 'info') => {
+  if (!status) return BRAND_ICON;
 
-  return `${path}${active ? 'success-icon' : 'error-icon2'}.svg`;
+  switch (status) {
+    case 'success':
+      return '/icons/notification/success-icon.svg';
+
+    case 'error':
+      return '/icons/notification/error-icon2.svg';
+
+    case 'info':
+      return '/icons/common/info.svg';
+
+    default:
+      return BRAND_ICON;
+  }
 };
 
 export const getRuleIcon = (type?: InstrumentationRuleType) => {
   if (!type) return BRAND_ICON;
 
-  const path = '/icons/rules/';
   const typeLowerCased = type.replaceAll('-', '').toLowerCase();
 
-  return `${path}${typeLowerCased}.svg`;
+  return `/icons/rules/${typeLowerCased}.svg`;
 };
 
 export const getActionIcon = (type?: ActionsType | 'sampler') => {
   if (!type) return BRAND_ICON;
 
-  const path = '/icons/actions/';
   const typeLowerCased = type.toLowerCase();
   const isSampler = typeLowerCased.includes('sampler');
 
-  return `${path}${isSampler ? 'sampler' : typeLowerCased}.svg`;
+  return `/icons/actions/${isSampler ? 'sampler' : typeLowerCased}.svg`;
 };

From c7901560700a85c276c32736692d4f94f77490d4 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 6 Nov 2024 11:16:02 +0200
Subject: [PATCH 339/374] [GEN-1670]: kill redux, use new toasts (#1699)

---
 frontend/webapp/app/layout.tsx                | 44 ++++------
 frontend/webapp/components/index.ts           |  4 +-
 .../notification/notification-list-item.tsx   | 35 ++------
 .../notification/notification-list.tsx        | 22 ++---
 .../notification/notification-manager.tsx     | 34 --------
 .../components/notification/notification.tsx  | 86 -------------------
 .../components/notification/toast-list.tsx    | 29 +++++++
 .../webapp/components/notification/toast.tsx  | 60 +++++++++++++
 frontend/webapp/hooks/useNotify.ts            | 36 +++++---
 .../notification-note/index.tsx               |  8 +-
 frontend/webapp/store/index.ts                | 17 +---
 frontend/webapp/store/redux-provider.tsx      | 10 ---
 frontend/webapp/store/slices/index.ts         |  1 -
 .../webapp/store/slices/notification-slice.ts | 54 ------------
 frontend/webapp/store/useNotificationStore.ts | 61 +++++++++++++
 frontend/webapp/types/common.ts               | 15 ++--
 16 files changed, 218 insertions(+), 298 deletions(-)
 delete mode 100644 frontend/webapp/components/notification/notification-manager.tsx
 delete mode 100644 frontend/webapp/components/notification/notification.tsx
 create mode 100644 frontend/webapp/components/notification/toast-list.tsx
 create mode 100644 frontend/webapp/components/notification/toast.tsx
 delete mode 100644 frontend/webapp/store/redux-provider.tsx
 delete mode 100644 frontend/webapp/store/slices/index.ts
 delete mode 100644 frontend/webapp/store/slices/notification-slice.ts
 create mode 100644 frontend/webapp/store/useNotificationStore.ts

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index bb8b58cab..448606300 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -4,11 +4,9 @@ import React from 'react';
 import { useSSE } from '@/hooks';
 import theme from '@/styles/theme';
 import { ApolloWrapper } from '@/lib';
+import { ToastList } from '@/components';
 import { ThemeProvider } from 'styled-components';
-import { NotificationManager } from '@/components';
-import ReduxProvider from '@/store/redux-provider';
 import { QueryClient, QueryClientProvider } from 'react-query';
-// import { ThemeProviderWrapper } from '@keyval-dev/design-system';
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -18,34 +16,30 @@ const LAYOUT_STYLE: React.CSSProperties = {
   height: '100vh',
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 10000,
-        refetchOnWindowFocus: false,
-      },
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 10000,
+      refetchOnWindowFocus: false,
     },
-  });
+  },
+});
 
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   useSSE();
 
   return (
     <html lang='en'>
-      <ReduxProvider>
-        <ApolloWrapper>
-          <QueryClientProvider client={queryClient}>
-            <ThemeProvider theme={theme}>
-              {/* <ThemeProviderWrapper> */}
-              <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
-                {children}
-                <NotificationManager />
-              </body>
-              {/* </ThemeProviderWrapper> */}
-            </ThemeProvider>
-          </QueryClientProvider>
-        </ApolloWrapper>
-      </ReduxProvider>
+      <ApolloWrapper>
+        <QueryClientProvider client={queryClient}>
+          <ThemeProvider theme={theme}>
+            <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
+              {children}
+              <ToastList />
+            </body>
+          </ThemeProvider>
+        </QueryClientProvider>
+      </ApolloWrapper>
     </html>
   );
 }
diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
index f047da4e2..506fca846 100644
--- a/frontend/webapp/components/index.ts
+++ b/frontend/webapp/components/index.ts
@@ -2,8 +2,8 @@ export * from './setup';
 export * from './lists';
 export * from './overview';
 export * from './common';
-export * from './notification/notification-manager';
-export * from './notification/notification-list';
 export * from './destinations';
 export * from './main';
 export * from './modals';
+export * from './notification/notification-list'; // old
+export * from './notification/toast-list'; // new
diff --git a/frontend/webapp/components/notification/notification-list-item.tsx b/frontend/webapp/components/notification/notification-list-item.tsx
index 894657220..4ca0cb922 100644
--- a/frontend/webapp/components/notification/notification-list-item.tsx
+++ b/frontend/webapp/components/notification/notification-list-item.tsx
@@ -5,20 +5,8 @@ import { ROUTES, timeAgo } from '@/utils';
 import { useRouter } from 'next/navigation';
 import { getIcon } from './notification-icon';
 import { KeyvalLink, KeyvalText } from '@/design.system';
-import {
-  NotificationButtonContainer,
-  NotificationDetailsWrapper,
-} from './notification-container';
-interface NotificationListItemProps {
-  id: string;
-  message: string;
-  type: 'success' | 'error' | 'info';
-  seen: boolean;
-  title?: string;
-  crdType?: string;
-  time?: string;
-  target?: string;
-}
+import { NotificationButtonContainer, NotificationDetailsWrapper } from './notification-container';
+import { Notification } from '@/types';
 
 const NotificationItemContainer = styled.div<{ seen: boolean }>`
   border-bottom: 1px solid ${theme.colors.blue_grey};
@@ -27,8 +15,7 @@ const NotificationItemContainer = styled.div<{ seen: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: ${({ seen }) =>
-    seen ? theme.colors.light_dark : theme.colors.dark};
+  background-color: ${({ seen }) => (seen ? theme.colors.light_dark : theme.colors.dark)};
 
   &:hover {
     background-color: ${theme.colors.dark};
@@ -41,15 +28,7 @@ const NotificationContent = styled.div`
   gap: 8px;
 `;
 
-const NotificationListItem: React.FC<NotificationListItemProps> = ({
-  message,
-  type,
-  seen,
-  title,
-  crdType,
-  target,
-  time,
-}) => {
+const NotificationListItem: React.FC<Notification> = ({ message, type, seen, title, crdType, target, time }) => {
   const router = useRouter();
 
   function onDetailsClick() {
@@ -83,11 +62,7 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
           )}
         </NotificationDetailsWrapper>
       </NotificationContent>
-      <NotificationButtonContainer>
-        {!!target && (
-          <KeyvalLink fontSize={12} value="Details" onClick={onDetailsClick} />
-        )}
-      </NotificationButtonContainer>
+      <NotificationButtonContainer>{!!target && <KeyvalLink fontSize={12} value='Details' onClick={onDetailsClick} />}</NotificationButtonContainer>
     </NotificationItemContainer>
   );
 };
diff --git a/frontend/webapp/components/notification/notification-list.tsx b/frontend/webapp/components/notification/notification-list.tsx
index 4d8d4d5cd..40f5d2880 100644
--- a/frontend/webapp/components/notification/notification-list.tsx
+++ b/frontend/webapp/components/notification/notification-list.tsx
@@ -1,13 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState, markAsSeen } from '@/store';
-
 import styled from 'styled-components';
 import theme from '@/styles/palette';
 import { BellIcon } from '@keyval-dev/design-system';
 import { KeyvalText } from '@/design.system';
 import { useOnClickOutside } from '@/hooks';
 import NotificationListItem from './notification-list-item';
+import { useNotificationStore } from '@/store';
 
 const NotificationListContainer = styled.div`
   position: absolute;
@@ -58,18 +56,12 @@ const NotificationHeader = styled.div`
 
 export const NotificationList: React.FC = () => {
   const [showNotifications, setShowNotifications] = useState(false);
+  const { notifications, markAsSeen } = useNotificationStore();
 
-  const notifications = useSelector(
-    (state: RootState) => state.notification.notifications
-  );
-
-  const dispatch = useDispatch();
   const containerRef = useRef(null);
   const isInitialRender = useRef(true);
   useOnClickOutside(containerRef, () => setShowNotifications(false));
-  const unseenCount = notifications.filter(
-    (notification) => !notification.seen
-  ).length;
+  const unseenCount = notifications.filter((notification) => !notification.seen).length;
 
   useEffect(() => {
     if (isInitialRender.current) {
@@ -85,7 +77,7 @@ export const NotificationList: React.FC = () => {
   function markAllAsSeen() {
     notifications.forEach((notification) => {
       if (!notification.seen) {
-        dispatch(markAsSeen(notification.id));
+        markAsSeen(notification.id);
       }
     });
   }
@@ -93,11 +85,7 @@ export const NotificationList: React.FC = () => {
   return notifications.length > 0 ? (
     <div ref={containerRef}>
       <BellIconWrapper>
-        <BellIcon
-          style={{ cursor: 'pointer' }}
-          size={20}
-          onClick={() => setShowNotifications(!showNotifications)}
-        />
+        <BellIcon style={{ cursor: 'pointer' }} size={20} onClick={() => setShowNotifications(!showNotifications)} />
         {unseenCount > 0 && (
           <NotificationBadge>
             <KeyvalText size={10}>{unseenCount}</KeyvalText>
diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx
deleted file mode 100644
index b091ea56f..000000000
--- a/frontend/webapp/components/notification/notification-manager.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-// import Notification from './notification';
-import styled from 'styled-components';
-import { RootState } from '@/store';
-
-const NotificationsWrapper = styled.div`
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  z-index: 1000;
-`;
-
-export const NotificationManager: React.FC = () => {
-  const notifications = useSelector((state: RootState) => state.notification.notifications);
-
-  // temporary - until we fix the "theme" error on import from "design.system"
-  useEffect(() => {
-    if (notifications.length) alert(notifications[notifications.length - 1].message);
-  }, [notifications.length]);
-
-  return (
-    <NotificationsWrapper>
-      {/* {notifications
-        .filter((notification) => notification.isNew)
-        .map((notification) => (
-          <Notification key={notification.id} {...notification} />
-        ))} */}
-    </NotificationsWrapper>
-  );
-};
diff --git a/frontend/webapp/components/notification/notification.tsx b/frontend/webapp/components/notification/notification.tsx
deleted file mode 100644
index 978e4733a..000000000
--- a/frontend/webapp/components/notification/notification.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { ROUTES } from '@/utils';
-import { useDispatch } from 'react-redux';
-import { useRouter } from 'next/navigation';
-import { getIcon } from './notification-icon';
-import { markAsOld, markAsSeen } from '@/store';
-import { KeyvalLink, KeyvalText } from '@/design.system';
-import {
-  NotificationContainer,
-  NotificationContentWrapper,
-  NotificationDetailsWrapper,
-  NotificationButtonContainer,
-} from './notification-container';
-
-interface NotificationProps {
-  id: string;
-  message: string;
-  title?: string;
-  type: 'success' | 'error' | 'info';
-  time?: string;
-  onClick?: () => void;
-  crdType?: string;
-  target?: string;
-}
-
-const Notification: React.FC<NotificationProps> = ({
-  id,
-  message,
-  type,
-  title,
-  crdType,
-  target,
-}) => {
-  const dispatch = useDispatch();
-  const router = useRouter();
-  const [isLeaving, setIsLeaving] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsLeaving(true);
-      setTimeout(() => dispatch(markAsOld(id)), 500);
-    }, 5000);
-
-    return () => clearTimeout(timer);
-  }, [id, dispatch]);
-
-  function onDetailsClick() {
-    dispatch(markAsSeen(id));
-    dispatch(markAsOld(id));
-
-    if (target) {
-      switch (crdType) {
-        case 'Destination':
-          router.push(`${ROUTES.UPDATE_DESTINATION}${target}`);
-          break;
-        case 'InstrumentedApplication':
-        case 'InstrumentationInstance':
-          router.push(`${ROUTES.MANAGE_SOURCE}?${target}`);
-          break;
-        default:
-          break;
-      }
-    }
-  }
-
-  return (
-    <NotificationContainer type={type} isLeaving={isLeaving}>
-      <NotificationContentWrapper>
-        <div>{getIcon(type)}</div>
-        <NotificationDetailsWrapper>
-          <KeyvalText size={16} weight={600}>
-            {title}
-          </KeyvalText>
-          <KeyvalText size={14}>{message}</KeyvalText>
-        </NotificationDetailsWrapper>
-      </NotificationContentWrapper>
-      <NotificationButtonContainer>
-        {!!target && (
-          <KeyvalLink fontSize={12} value="Details" onClick={onDetailsClick} />
-        )}
-      </NotificationButtonContainer>
-    </NotificationContainer>
-  );
-};
-
-export default Notification;
diff --git a/frontend/webapp/components/notification/toast-list.tsx b/frontend/webapp/components/notification/toast-list.tsx
new file mode 100644
index 000000000..0a4f3cca8
--- /dev/null
+++ b/frontend/webapp/components/notification/toast-list.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Toast from './toast';
+import styled from 'styled-components';
+import { useNotificationStore } from '@/store';
+
+const Container = styled.div`
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export const ToastList: React.FC = () => {
+  const { notifications } = useNotificationStore();
+
+  return (
+    <Container>
+      {notifications
+        .filter(({ dismissed }) => !dismissed)
+        .map((notif) => (
+          <Toast key={`toast-${notif.id}`} {...notif} />
+        ))}
+    </Container>
+  );
+};
diff --git a/frontend/webapp/components/notification/toast.tsx b/frontend/webapp/components/notification/toast.tsx
new file mode 100644
index 000000000..faaca2ad2
--- /dev/null
+++ b/frontend/webapp/components/notification/toast.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import type { Notification } from '@/types';
+import { useNotificationStore } from '@/store';
+import { NotificationNote } from '@/reuseable-components';
+
+interface Props extends Notification {}
+
+const Toast: React.FC<Props> = ({ id, message, type, title, crdType, target }) => {
+  // const router = useRouter();
+  const { markAsDismissed, markAsSeen } = useNotificationStore();
+  const [isLeaving, setIsLeaving] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLeaving(true);
+      setTimeout(() => markAsDismissed(id), 500);
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [id, markAsDismissed]);
+
+  const onClick = () => {
+    markAsDismissed(id);
+    markAsSeen(id);
+
+    alert('TODO');
+
+    // switch (crdType) {
+    //   case 'Destination':
+    //     // TODO: open drawer
+    //     // router.push(`${ROUTES.UPDATE_DESTINATION}${target}`);
+    //     break;
+    //   case 'InstrumentedApplication':
+    //   case 'InstrumentationInstance':
+    //     // TODO: open drawer
+    //     // router.push(`${ROUTES.MANAGE_SOURCE}?${target}`);
+    //     break;
+    //   default:
+    //     break;
+    // }
+  };
+
+  return (
+    <NotificationNote
+      type={type}
+      title={title}
+      message={message}
+      action={
+        crdType && target
+          ? {
+              label: 'go to details',
+              onClick,
+            }
+          : undefined
+      }
+    />
+  );
+};
+
+export default Toast;
diff --git a/frontend/webapp/hooks/useNotify.ts b/frontend/webapp/hooks/useNotify.ts
index c36eae1a9..63969d4d1 100644
--- a/frontend/webapp/hooks/useNotify.ts
+++ b/frontend/webapp/hooks/useNotify.ts
@@ -1,23 +1,35 @@
-import { addNotification, store } from '@/store';
+import { useNotificationStore } from '@/store';
+import { Notification } from '@/types';
 
 export const useNotify = () => {
-  const dispatch = store.dispatch;
+  const { addNotification } = useNotificationStore();
 
   const notify = ({
-    message,
-    title,
     type,
-    target,
+    title,
+    message,
     crdType,
+    target,
   }: {
-    message: string;
-    title: string;
-    type: 'success' | 'error' | 'info';
-    target: string;
-    crdType: string;
+    type: Notification['type'];
+    title: Notification['title'];
+    message: Notification['message'];
+    crdType: Notification['crdType'];
+    target: Notification['target'];
   }) => {
-    const id = new Date().getTime().toString();
-    dispatch(addNotification({ id, message, title, type, target, crdType }));
+    const date = new Date();
+
+    addNotification({
+      id: date.getTime().toString(),
+      type,
+      title,
+      message,
+      crdType,
+      target,
+      dismissed: false,
+      seen: false,
+      time: date.toISOString(),
+    });
   };
 
   return notify;
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
index 0978a9cbe..641289f23 100644
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -3,13 +3,12 @@ import Image from 'next/image';
 import { Text } from '../text';
 import { Divider } from '../divider';
 import styled from 'styled-components';
-
-type NotificationType = 'warning' | 'error' | 'success' | 'info' | 'default';
+import type { Notification, NotificationType } from '@/types';
 
 interface NotificationProps {
   type: NotificationType;
-  title?: string;
-  message?: string;
+  title: Notification['title'];
+  message: Notification['message'];
   action?: {
     label: string;
     onClick: () => void;
@@ -122,3 +121,4 @@ const NotificationNote: React.FC<NotificationProps> = ({ type, title, message, a
 };
 
 export { NotificationNote };
+
diff --git a/frontend/webapp/store/index.ts b/frontend/webapp/store/index.ts
index f116f1d8a..d9e795740 100644
--- a/frontend/webapp/store/index.ts
+++ b/frontend/webapp/store/index.ts
@@ -1,19 +1,4 @@
-import { notificationReducer } from './slices';
-import { combineReducers, configureStore } from '@reduxjs/toolkit';
-
-const rootReducer = combineReducers({
-  notification: notificationReducer,
-});
-
-export const store = configureStore({
-  reducer: rootReducer,
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
-});
-
-export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
-
-export * from './slices';
 export * from './useAppStore';
 export * from './useDrawerStore';
 export * from './useModalStore';
+export * from './useNotificationStore';
diff --git a/frontend/webapp/store/redux-provider.tsx b/frontend/webapp/store/redux-provider.tsx
deleted file mode 100644
index 0f86f47c1..000000000
--- a/frontend/webapp/store/redux-provider.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { store } from '.';
-import { Provider } from 'react-redux';
-
-export default function ReduxProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <Provider store={store}>{children}</Provider>;
-}
diff --git a/frontend/webapp/store/slices/index.ts b/frontend/webapp/store/slices/index.ts
deleted file mode 100644
index 981b2f31a..000000000
--- a/frontend/webapp/store/slices/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './notification-slice';
diff --git a/frontend/webapp/store/slices/notification-slice.ts b/frontend/webapp/store/slices/notification-slice.ts
deleted file mode 100644
index 397c8cf1d..000000000
--- a/frontend/webapp/store/slices/notification-slice.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { Notification } from '@/types';
-
-interface NotificationState {
-  notifications: Notification[];
-}
-
-const initialState: NotificationState = {
-  notifications: [],
-};
-
-export const notificationSlice = createSlice({
-  name: 'notification',
-  initialState,
-  reducers: {
-    addNotification: (
-      state,
-      action: PayloadAction<Omit<Notification, 'seen'>>
-    ) => {
-      state.notifications.push({
-        ...action.payload,
-        seen: false,
-        isNew: true,
-        time: new Date().toISOString(),
-      });
-    },
-    markAsSeen: (state, action: PayloadAction<string>) => {
-      const notification = state.notifications.find(
-        (n) => n.id === action.payload
-      );
-      if (notification) {
-        notification.seen = true;
-      }
-    },
-    markAsOld: (state, action: PayloadAction<string>) => {
-      const notification = state.notifications.find(
-        (n) => n.id === action.payload
-      );
-      if (notification) {
-        notification.isNew = false;
-      }
-    },
-    removeNotification: (state, action: PayloadAction<string>) => {
-      state.notifications = state.notifications.filter(
-        (notification) => notification.id !== action.payload
-      );
-    },
-  },
-});
-
-export const { addNotification, removeNotification, markAsSeen, markAsOld } =
-  notificationSlice.actions;
-
-export const notificationReducer = notificationSlice.reducer;
diff --git a/frontend/webapp/store/useNotificationStore.ts b/frontend/webapp/store/useNotificationStore.ts
new file mode 100644
index 000000000..f30af71f3
--- /dev/null
+++ b/frontend/webapp/store/useNotificationStore.ts
@@ -0,0 +1,61 @@
+import { create } from 'zustand';
+import type { Notification } from '@/types';
+
+interface StoreState {
+  notifications: Notification[];
+  addNotification: (notif: Notification) => void;
+  markAsDismissed: (id: string) => void;
+  markAsSeen: (id: string) => void;
+  removeNotification: (id: string) => void;
+}
+
+export const useNotificationStore = create<StoreState>((set) => ({
+  notifications: [],
+
+  addNotification: (notif) =>
+    set((state) => ({
+      notifications: [...state.notifications, notif],
+    })),
+
+  markAsDismissed: (id) => {
+    set((state) => {
+      const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
+
+      if (foundIdx !== -1) {
+        state.notifications[foundIdx].dismissed = true;
+      }
+
+      return {
+        notifications: state.notifications,
+      };
+    });
+  },
+
+  markAsSeen: (id) => {
+    set((state) => {
+      const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
+
+      if (foundIdx !== -1) {
+        state.notifications[foundIdx].seen = true;
+      }
+
+      return {
+        notifications: state.notifications,
+      };
+    });
+  },
+
+  removeNotification: (id) => {
+    set((state) => {
+      const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
+
+      if (foundIdx !== -1) {
+        state.notifications.splice(foundIdx, 1);
+      }
+
+      return {
+        notifications: state.notifications,
+      };
+    });
+  },
+}));
diff --git a/frontend/webapp/types/common.ts b/frontend/webapp/types/common.ts
index 3fbceedb2..78bdec9a5 100644
--- a/frontend/webapp/types/common.ts
+++ b/frontend/webapp/types/common.ts
@@ -11,17 +11,18 @@ export interface Condition {
   lastTransitionTime: string;
 }
 
+export type NotificationType = 'warning' | 'error' | 'success' | 'info' | 'default';
+
 export interface Notification {
   id: string;
-  message: string;
+  type: NotificationType;
   title?: string;
-  seen: boolean;
-  isNew?: boolean;
-  time?: string;
-  target?: string;
-  event?: string;
+  message?: string;
   crdType?: string;
-  type: 'success' | 'error' | 'info';
+  target?: string;
+  dismissed: boolean;
+  seen: boolean;
+  time: string;
 }
 
 export type Config = {

From d9292ffe7810cb3d125c050ba82601794f80e9d6 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Wed, 6 Nov 2024 15:35:46 +0200
Subject: [PATCH 340/374] [GEN-1671]: toast animations + enriched messages
 (#1701)

---
 frontend/webapp/app/layout.tsx                |   2 -
 frontend/webapp/app/main/layout.tsx           |   6 +-
 frontend/webapp/app/page.tsx                  |   6 +-
 frontend/webapp/components/index.ts           |   1 -
 .../components/notification/toast-list.tsx    |  29 ---
 .../webapp/components/notification/toast.tsx  |  60 ------
 .../actions/action-drawer-container/index.tsx |   6 +-
 .../rule-drawer-container/index.tsx           |   6 +-
 .../overview/overview-data-flow/index.tsx     |   7 +-
 .../webapp/hooks/actions/useActionCRUD.ts     |  31 ++-
 .../hooks/destinations/useDestinationCRUD.ts  |  31 ++-
 .../useInstrumentationRuleCRUD.ts             |  32 ++-
 frontend/webapp/hooks/overview/useMetrics.ts  |  41 +---
 frontend/webapp/hooks/useNotify.ts            |  22 +-
 frontend/webapp/hooks/useSSE.ts               |  12 +-
 .../reuseable-components/button/index.tsx     |  16 +-
 .../reuseable-components/drawer/index.tsx     |   4 +-
 frontend/webapp/reuseable-components/index.ts |   1 +
 .../reuseable-components/modal/index.tsx      |   4 +-
 .../nodes-data-flow/builder.ts                |   4 +-
 .../notification-note/index.tsx               | 201 ++++++++++++------
 .../reuseable-components/toast-list/index.tsx | 101 +++++++++
 frontend/webapp/store/useNotificationStore.ts |  39 +++-
 frontend/webapp/styles/animations.ts          |  13 +-
 frontend/webapp/styles/theme.ts               |  16 +-
 frontend/webapp/types/metrics.ts              |   6 +-
 frontend/webapp/utils/functions/icons.ts      |   9 +-
 27 files changed, 399 insertions(+), 307 deletions(-)
 delete mode 100644 frontend/webapp/components/notification/toast-list.tsx
 delete mode 100644 frontend/webapp/components/notification/toast.tsx
 create mode 100644 frontend/webapp/reuseable-components/toast-list/index.tsx

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 448606300..281c14a07 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { useSSE } from '@/hooks';
 import theme from '@/styles/theme';
 import { ApolloWrapper } from '@/lib';
-import { ToastList } from '@/components';
 import { ThemeProvider } from 'styled-components';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
@@ -35,7 +34,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ThemeProvider theme={theme}>
             <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
               {children}
-              <ToastList />
             </body>
           </ThemeProvider>
         </QueryClientProvider>
diff --git a/frontend/webapp/app/main/layout.tsx b/frontend/webapp/app/main/layout.tsx
index f6eecf660..c2e7214df 100644
--- a/frontend/webapp/app/main/layout.tsx
+++ b/frontend/webapp/app/main/layout.tsx
@@ -20,11 +20,7 @@ const MainContent = styled.div`
   align-items: center;
 `;
 
-export default function MainLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function MainLayout({ children }: { children: React.ReactNode }) {
   return (
     <LayoutContainer>
       <MainContent>
diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index ea08044df..ceeeaeaaf 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -13,11 +13,9 @@ export default function App() {
   useEffect(() => {
     if (error) {
       notify({
-        message: 'An error occurred',
-        title: 'Error',
         type: 'error',
-        target: 'notification',
-        crdType: 'notification',
+        title: error.name,
+        message: error.message,
       });
 
       router.push(ROUTES.OVERVIEW);
diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
index 506fca846..dc76a8271 100644
--- a/frontend/webapp/components/index.ts
+++ b/frontend/webapp/components/index.ts
@@ -6,4 +6,3 @@ export * from './destinations';
 export * from './main';
 export * from './modals';
 export * from './notification/notification-list'; // old
-export * from './notification/toast-list'; // new
diff --git a/frontend/webapp/components/notification/toast-list.tsx b/frontend/webapp/components/notification/toast-list.tsx
deleted file mode 100644
index 0a4f3cca8..000000000
--- a/frontend/webapp/components/notification/toast-list.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import Toast from './toast';
-import styled from 'styled-components';
-import { useNotificationStore } from '@/store';
-
-const Container = styled.div`
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10000;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-`;
-
-export const ToastList: React.FC = () => {
-  const { notifications } = useNotificationStore();
-
-  return (
-    <Container>
-      {notifications
-        .filter(({ dismissed }) => !dismissed)
-        .map((notif) => (
-          <Toast key={`toast-${notif.id}`} {...notif} />
-        ))}
-    </Container>
-  );
-};
diff --git a/frontend/webapp/components/notification/toast.tsx b/frontend/webapp/components/notification/toast.tsx
deleted file mode 100644
index faaca2ad2..000000000
--- a/frontend/webapp/components/notification/toast.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import type { Notification } from '@/types';
-import { useNotificationStore } from '@/store';
-import { NotificationNote } from '@/reuseable-components';
-
-interface Props extends Notification {}
-
-const Toast: React.FC<Props> = ({ id, message, type, title, crdType, target }) => {
-  // const router = useRouter();
-  const { markAsDismissed, markAsSeen } = useNotificationStore();
-  const [isLeaving, setIsLeaving] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsLeaving(true);
-      setTimeout(() => markAsDismissed(id), 500);
-    }, 5000);
-
-    return () => clearTimeout(timer);
-  }, [id, markAsDismissed]);
-
-  const onClick = () => {
-    markAsDismissed(id);
-    markAsSeen(id);
-
-    alert('TODO');
-
-    // switch (crdType) {
-    //   case 'Destination':
-    //     // TODO: open drawer
-    //     // router.push(`${ROUTES.UPDATE_DESTINATION}${target}`);
-    //     break;
-    //   case 'InstrumentedApplication':
-    //   case 'InstrumentationInstance':
-    //     // TODO: open drawer
-    //     // router.push(`${ROUTES.MANAGE_SOURCE}?${target}`);
-    //     break;
-    //   default:
-    //     break;
-    // }
-  };
-
-  return (
-    <NotificationNote
-      type={type}
-      title={title}
-      message={message}
-      action={
-        crdType && target
-          ? {
-              label: 'go to details',
-              onClick,
-            }
-          : undefined
-      }
-    />
-  );
-};
-
-export default Toast;
diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
index dae5a8626..744e4257e 100644
--- a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
@@ -70,11 +70,9 @@ const ActionDrawer: React.FC<Props> = () => {
   const handleSave = async (newTitle: string) => {
     if (!validateForm()) {
       notify({
-        message: 'Required fields are missing!',
-        title: 'Update Action Error',
         type: 'error',
-        target: 'notification',
-        crdType: 'notification',
+        title: 'Update',
+        message: 'Required fields are missing!',
       });
     } else {
       const payload = {
diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
index ab8231201..55af46efb 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
@@ -68,11 +68,9 @@ const RuleDrawer: React.FC<Props> = () => {
   const handleSave = async (newTitle: string) => {
     if (!validateForm()) {
       notify({
-        message: 'Required fields are missing!',
-        title: 'Update Rule Error',
         type: 'error',
-        target: 'notification',
-        crdType: 'notification',
+        title: 'Update',
+        message: 'Required fields are missing!',
       });
     } else {
       const payload = {
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index b838d900f..acdd98109 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
-import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
+import { buildNodesAndEdges, NodeBaseDataFlow, ToastList } from '@/reuseable-components';
 import {
   useMetrics,
   useGetActions,
@@ -32,6 +32,7 @@ const NODE_WIDTH = 255;
 const NODE_HEIGHT = 80;
 
 export function OverviewDataFlowContainer() {
+  const { metrics } = useMetrics();
   const { actions } = useGetActions();
   const { sources } = useActualSources();
   const { destinations } = useActualDestination();
@@ -44,9 +45,6 @@ export function OverviewDataFlowContainer() {
     destinations,
   });
 
-  // TODO: remove mockup data from "useMetrics"
-  const { metrics } = useMetrics({ sources, destinations });
-
   // Memoized node and edge builder to improve performance
   const { nodes, edges } = useMemo(() => {
     return buildNodesAndEdges({
@@ -68,6 +66,7 @@ export function OverviewDataFlowContainer() {
 
       <AllDrawers />
       <AllModals />
+      <ToastList />
     </OverviewDataFlowWrapper>
   );
 }
diff --git a/frontend/webapp/hooks/actions/useActionCRUD.ts b/frontend/webapp/hooks/actions/useActionCRUD.ts
index 420e5bc7d..1150d43d4 100644
--- a/frontend/webapp/hooks/actions/useActionCRUD.ts
+++ b/frontend/webapp/hooks/actions/useActionCRUD.ts
@@ -1,7 +1,7 @@
 import { useDrawerStore } from '@/store';
 import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
-import type { ActionInput, ActionsType } from '@/types';
+import type { ActionInput, ActionsType, NotificationType } from '@/types';
 import { useComputePlatform } from '../compute-platform';
 import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations';
 
@@ -15,33 +15,42 @@ export const useActionCRUD = (params?: UseActionCrudParams) => {
   const { refetch } = useComputePlatform();
   const notify = useNotify();
 
-  const notifyUser = (title: string, message: string, type: 'error' | 'success') => {
-    notify({ title, message, type, target: 'notification', crdType: 'notification' });
+  const notifyUser = (type: NotificationType, title: string, message: string) => {
+    notify({ type, title, message });
   };
 
   const handleError = (title: string, message: string) => {
-    notifyUser(title, message, 'error');
+    notifyUser('error', title, message);
     params?.onError?.();
   };
 
   const handleComplete = (title: string, message: string) => {
-    notifyUser(title, message, 'success');
+    notifyUser('success', title, message);
     setDrawerItem(null);
     refetch();
     params?.onSuccess?.();
   };
 
   const [createAction, cState] = useMutation<{ createAction: { id: string } }>(CREATE_ACTION, {
-    onError: (error) => handleError('Create Action', error.message),
-    onCompleted: () => handleComplete('Create Action', 'successfully created'),
+    onError: (error) => handleError('Create', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.action.name || req?.variables?.action.type;
+      handleComplete('Create', `action "${name}" was created`);
+    },
   });
   const [updateAction, uState] = useMutation<{ updateAction: { id: string } }>(UPDATE_ACTION, {
-    onError: (error) => handleError('Update Action', error.message),
-    onCompleted: () => handleComplete('Update Action', 'successfully updated'),
+    onError: (error) => handleError('Update', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.action.name || req?.variables?.action.type;
+      handleComplete('Update', `action "${name}" was updated`);
+    },
   });
   const [deleteAction, dState] = useMutation<{ deleteAction: boolean }>(DELETE_ACTION, {
-    onError: (error) => handleError('Delete Action', error.message),
-    onCompleted: () => handleComplete('Delete Action', 'successfully deleted'),
+    onError: (error) => handleError('Delete', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.id;
+      handleComplete('Delete', `action "${name}" was deleted`);
+    },
   });
 
   return {
diff --git a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
index cfc85146d..a66d99205 100644
--- a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
@@ -1,8 +1,8 @@
 import { useDrawerStore } from '@/store';
 import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
-import type { DestinationInput } from '@/types';
 import { useComputePlatform } from '../compute-platform';
+import type { DestinationInput, NotificationType } from '@/types';
 import { CREATE_DESTINATION, DELETE_DESTINATION, UPDATE_DESTINATION } from '@/graphql/mutations';
 
 interface Params {
@@ -15,33 +15,42 @@ export const useDestinationCRUD = (params?: Params) => {
   const { refetch } = useComputePlatform();
   const notify = useNotify();
 
-  const notifyUser = (title: string, message: string, type: 'error' | 'success') => {
-    notify({ title, message, type, target: 'notification', crdType: 'notification' });
+  const notifyUser = (type: NotificationType, title: string, message: string) => {
+    notify({ type, title, message });
   };
 
   const handleError = (title: string, message: string) => {
-    notifyUser(title, message, 'error');
+    notifyUser('error', title, message);
     params?.onError?.();
   };
 
   const handleComplete = (title: string, message: string) => {
-    notifyUser(title, message, 'success');
+    notifyUser('success', title, message);
     setDrawerItem(null);
     refetch();
     params?.onSuccess?.();
   };
 
   const [createDestination, cState] = useMutation<{ createNewDestination: { id: string } }>(CREATE_DESTINATION, {
-    onError: (error) => handleError('Create Destination', error.message),
-    onCompleted: () => handleComplete('Create Destination', 'successfully created'),
+    onError: (error) => handleError('Create', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.destination.name || req?.variables?.destination.type;
+      handleComplete('Create', `destination "${name}" was created`);
+    },
   });
   const [updateDestination, uState] = useMutation<{ updateDestination: { id: string } }>(UPDATE_DESTINATION, {
-    onError: (error) => handleError('Update Destination', error.message),
-    onCompleted: () => handleComplete('Update Destination', 'successfully updated'),
+    onError: (error) => handleError('Update', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.destination.name || req?.variables?.destination.type;
+      handleComplete('Update', `destination "${name}" was updated`);
+    },
   });
   const [deleteDestination, dState] = useMutation<{ deleteDestination: boolean }>(DELETE_DESTINATION, {
-    onError: (error) => handleError('Delete Destination', error.message),
-    onCompleted: () => handleComplete('Delete Destination', 'successfully deleted'),
+    onError: (error) => handleError('Delete', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.id;
+      handleComplete('Delete', `destination "${name}" was deleted`);
+    },
   });
 
   return {
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
index c47c8cfa2..819f2006b 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
@@ -1,8 +1,9 @@
 import { useDrawerStore } from '@/store';
 import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
-import type { InstrumentationRuleInput } from '@/types';
+import { deriveTypeFromRule } from '@/utils';
 import { useComputePlatform } from '../compute-platform';
+import type { InstrumentationRuleInput, NotificationType } from '@/types';
 import { CREATE_INSTRUMENTATION_RULE, UPDATE_INSTRUMENTATION_RULE, DELETE_INSTRUMENTATION_RULE } from '@/graphql/mutations';
 
 interface Params {
@@ -15,33 +16,42 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
   const { refetch } = useComputePlatform();
   const notify = useNotify();
 
-  const notifyUser = (title: string, message: string, type: 'error' | 'success') => {
-    notify({ title, message, type, target: 'notification', crdType: 'notification' });
+  const notifyUser = (type: NotificationType, title: string, message: string) => {
+    notify({ type, title, message });
   };
 
   const handleError = (title: string, message: string) => {
-    notifyUser(title, message, 'error');
+    notifyUser('error', title, message);
     params?.onError?.();
   };
 
   const handleComplete = (title: string, message: string) => {
-    notifyUser(title, message, 'success');
+    notifyUser('success', title, message);
     setDrawerItem(null);
     refetch();
     params?.onSuccess?.();
   };
 
   const [createInstrumentationRule, cState] = useMutation<{ createInstrumentationRule: { ruleId: string } }>(CREATE_INSTRUMENTATION_RULE, {
-    onError: (error) => handleError('Create Rule', error.message),
-    onCompleted: () => handleComplete('Create Rule', 'successfully created'),
+    onError: (error) => handleError('Create', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.instrumentationRule.ruleName || deriveTypeFromRule(req?.variables?.instrumentationRule);
+      handleComplete('Create', `instrumentation rule "${name}" was created`);
+    },
   });
   const [updateInstrumentationRule, uState] = useMutation<{ updateInstrumentationRule: { ruleId: string } }>(UPDATE_INSTRUMENTATION_RULE, {
-    onError: (error) => handleError('Update Rule', error.message),
-    onCompleted: () => handleComplete('Update Rule', 'successfully updated'),
+    onError: (error) => handleError('Update', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.instrumentationRule.ruleName || deriveTypeFromRule(req?.variables?.instrumentationRule);
+      handleComplete('Update', `instrumentation rule "${name}" was updated`);
+    },
   });
   const [deleteInstrumentationRule, dState] = useMutation<{ deleteInstrumentationRule: boolean }>(DELETE_INSTRUMENTATION_RULE, {
-    onError: (error) => handleError('Delete Rule', error.message),
-    onCompleted: () => handleComplete('Delete Rule', 'successfully deleted'),
+    onError: (error) => handleError('Delete', error.message),
+    onCompleted: (_, req) => {
+      const name = req?.variables?.ruleId;
+      handleComplete('Delete', `instrumentation rule "${name}" was deleted`);
+    },
   });
 
   return {
diff --git a/frontend/webapp/hooks/overview/useMetrics.ts b/frontend/webapp/hooks/overview/useMetrics.ts
index a021d5ec2..5fcc8f868 100644
--- a/frontend/webapp/hooks/overview/useMetrics.ts
+++ b/frontend/webapp/hooks/overview/useMetrics.ts
@@ -1,44 +1,15 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 import { GET_METRICS } from '@/graphql/mutations/metrics';
-import type { ActualDestination, K8sActualSource, OverviewMetricsResponse } from '@/types';
+import type { OverviewMetricsResponse } from '@/types';
 
-export function useMetrics({ sources, destinations }: { sources: K8sActualSource[]; destinations: ActualDestination[] }) {
+export function useMetrics() {
   const { data, refetch } = useQuery<OverviewMetricsResponse>(GET_METRICS);
 
-  // this is just to re-render the mockup data
-  const [_, setCount] = useState(0);
-
   useEffect(() => {
-    const interval = setInterval(async () => {
-      await refetch();
-      setCount((n) => n + 1);
-    }, 3000);
-
-    return () => {
-      clearInterval(interval);
-    };
+    const interval = setInterval(async () => await refetch(), 3000);
+    return () => clearInterval(interval);
   }, [refetch]);
 
-  // this will 1st try to use real data, if non-exitant it will generate mockup data
-  const metricsMockup: OverviewMetricsResponse = {
-    sources: data?.sources?.length
-      ? data.sources
-      : sources.map(({ name, kind, namespace }) => ({
-          namespace,
-          kind,
-          name,
-          totalDataSent: 0,
-          throughput: Math.random() * 50000,
-        })),
-    destinations: data?.destinations?.length
-      ? data.destinations
-      : destinations.map(({ id }) => ({
-          id,
-          totalDataSent: 0,
-          throughput: Math.random() * 50000,
-        })),
-  };
-
-  return { metrics: metricsMockup };
+  return { metrics: data };
 }
diff --git a/frontend/webapp/hooks/useNotify.ts b/frontend/webapp/hooks/useNotify.ts
index 63969d4d1..910ffe07a 100644
--- a/frontend/webapp/hooks/useNotify.ts
+++ b/frontend/webapp/hooks/useNotify.ts
@@ -12,24 +12,12 @@ export const useNotify = () => {
     target,
   }: {
     type: Notification['type'];
-    title: Notification['title'];
-    message: Notification['message'];
-    crdType: Notification['crdType'];
-    target: Notification['target'];
+    title?: Notification['title'];
+    message?: Notification['message'];
+    crdType?: Notification['crdType'];
+    target?: Notification['target'];
   }) => {
-    const date = new Date();
-
-    addNotification({
-      id: date.getTime().toString(),
-      type,
-      title,
-      message,
-      crdType,
-      target,
-      dismissed: false,
-      seen: false,
-      time: date.toISOString(),
-    });
+    addNotification({ type, title, message, crdType, target });
   };
 
   return notify;
diff --git a/frontend/webapp/hooks/useSSE.ts b/frontend/webapp/hooks/useSSE.ts
index b6773f407..bd52d8daf 100644
--- a/frontend/webapp/hooks/useSSE.ts
+++ b/frontend/webapp/hooks/useSSE.ts
@@ -36,11 +36,11 @@ export function useSSE() {
 
         // Dispatch the notification to the store
         notify({
-          message: eventBuffer.current[key].message,
-          title: eventBuffer.current[key].title,
           type: eventBuffer.current[key].type,
-          target: eventBuffer.current[key].target,
+          title: eventBuffer.current[key].title,
+          message: eventBuffer.current[key].message,
           crdType: eventBuffer.current[key].crdType,
+          target: eventBuffer.current[key].target,
         });
 
         // Reset retry count on successful connection
@@ -66,11 +66,9 @@ export function useSSE() {
             console.error('Max retries reached. Could not reconnect to EventSource.');
 
             notify({
-              message: 'Connection to the server failed. Please reboot the application.',
-              title: 'Connection Error',
               type: 'error',
-              target: 'system',
-              crdType: 'connection',
+              title: 'Connection Error',
+              message: 'Connection to the server failed. Please reboot the application.',
             });
 
             return prevRetryCount;
diff --git a/frontend/webapp/reuseable-components/button/index.tsx b/frontend/webapp/reuseable-components/button/index.tsx
index b86c66b74..3d8178eeb 100644
--- a/frontend/webapp/reuseable-components/button/index.tsx
+++ b/frontend/webapp/reuseable-components/button/index.tsx
@@ -51,30 +51,30 @@ const variantStyles = {
   `,
   danger: css`
     border-color: transparent;
-    background: ${({ theme }) => theme.colors.danger};
+    background: ${({ theme }) => theme.text.error};
     &:hover {
-      background: ${({ theme }) => theme.colors.danger};
+      background: ${({ theme }) => theme.text.error};
       opacity: 0.9;
     }
     &:active {
-      background: ${({ theme }) => theme.colors.danger};
+      background: ${({ theme }) => theme.text.error};
     }
     &:focus {
-      background: ${({ theme }) => theme.colors.danger};
+      background: ${({ theme }) => theme.text.error};
     }
   `,
   warning: css`
     border-color: transparent;
-    background: ${({ theme }) => theme.colors.warning};
+    background: ${({ theme }) => theme.text.warning};
     &:hover {
-      background: ${({ theme }) => theme.colors.warning};
+      background: ${({ theme }) => theme.text.warning};
       opacity: 0.9;
     }
     &:active {
-      background: ${({ theme }) => theme.colors.warning};
+      background: ${({ theme }) => theme.text.warning};
     }
     &:focus {
-      background: ${({ theme }) => theme.colors.warning};
+      background: ${({ theme }) => theme.text.warning};
     }
   `,
 };
diff --git a/frontend/webapp/reuseable-components/drawer/index.tsx b/frontend/webapp/reuseable-components/drawer/index.tsx
index b0c3a84ad..ef92fa35b 100644
--- a/frontend/webapp/reuseable-components/drawer/index.tsx
+++ b/frontend/webapp/reuseable-components/drawer/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
-import { fade, Overlay } from '@/styles';
+import { slide, Overlay } from '@/styles';
 
 interface DrawerProps {
   isOpen: boolean;
@@ -28,7 +28,7 @@ const DrawerContainer = styled.div<{
   background: ${({ theme }) => theme.colors.translucent_bg};
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   overflow-y: auto;
-  animation: ${({ isOpen, position = 'right' }) => (isOpen ? fade.in[position] : fade.out[position])} 0.3s ease;
+  animation: ${({ isOpen, position = 'right' }) => (isOpen ? slide.in[position] : slide.out[position])} 0.3s ease;
 `;
 
 export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, position = 'right', width = '300px', children, closeOnEscape = true }) => {
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index d20bac721..b5b0498d9 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -30,3 +30,4 @@ export * from './drawer';
 export * from './input-table';
 export * from './status';
 export * from './field-label';
+export * from './toast-list';
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index 89a8cecde..f27f30b03 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -4,7 +4,7 @@ import { Text } from '../text';
 import ReactDOM from 'react-dom';
 import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
-import { fade, Overlay } from '@/styles';
+import { slide, Overlay } from '@/styles';
 
 interface ModalProps {
   isOpen: boolean;
@@ -30,7 +30,7 @@ const ModalWrapper = styled.div<{ isOpen: ModalProps['isOpen'] }>`
   border-radius: 40px;
   box-shadow: 0px 1px 1px 0px rgba(17, 17, 17, 0.8), 0px 2px 2px 0px rgba(17, 17, 17, 0.8), 0px 5px 5px 0px rgba(17, 17, 17, 0.8),
     0px 10px 10px 0px rgba(17, 17, 17, 0.8), 0px 0px 8px 0px rgba(17, 17, 17, 0.8);
-  animation: ${({ isOpen }) => (isOpen ? fade.in['center'] : fade.out['center'])} 0.3s ease;
+  animation: ${({ isOpen }) => (isOpen ? slide.in['center'] : slide.out['center'])} 0.3s ease;
 `;
 
 const ModalHeader = styled.div`
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index ce3a79c7f..1b5776f5a 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -186,7 +186,7 @@ export const buildNodesAndEdges = ({
     );
   } else {
     sources.forEach((source, idx) => {
-      const metric = metrics?.sources.find(
+      const metric = metrics?.getOverviewMetrics.sources.find(
         ({ kind, name, namespace }) => kind === source.kind && name === source.name && namespace === source.namespace
       );
 
@@ -268,7 +268,7 @@ export const buildNodesAndEdges = ({
     );
   } else {
     destinations.forEach((destination, idx) => {
-      const metric = metrics?.destinations.find(({ id }) => id === destination.id);
+      const metric = metrics?.getOverviewMetrics.destinations.find(({ id }) => id === destination.id);
 
       tempNodes['destinations'].push(
         createNode(`destination-${idx}`, 'base', postions['destinations']['x'], postions['rules']['y'](idx), {
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
index 641289f23..41ec2c9a9 100644
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
 import { Text } from '../text';
+import theme from '@/styles/theme';
 import { Divider } from '../divider';
 import styled from 'styled-components';
+import { getStatusIcon } from '@/utils';
+import { progress, slide } from '@/styles';
+import { useNotificationStore } from '@/store';
 import type { Notification, NotificationType } from '@/types';
 
 interface NotificationProps {
+  id?: string;
   type: NotificationType;
-  title: Notification['title'];
-  message: Notification['message'];
+  title?: Notification['title'];
+  message?: Notification['message'];
   action?: {
     label: string;
     onClick: () => void;
@@ -16,80 +21,62 @@ interface NotificationProps {
   style?: React.CSSProperties;
 }
 
-const getTextColor = ({ type }: { type: NotificationType }) => {
-  switch (type) {
-    case 'warning':
-      return '#E9CF35';
-    case 'error':
-      return '#E25A5A';
-    case 'success':
-      return '#81AF65';
-    case 'info':
-      return '#B8B8B8';
-    case 'default':
-    default:
-      return '#AABEF7';
-  }
-};
+const TOAST_DURATION = 5000;
+const TRANSITION_DURATION = 500;
 
-const getBackgroundColor = ({ type }: { type: NotificationType }) => {
-  switch (type) {
-    case 'warning':
-      return '#472300';
-    case 'error':
-      return '#431919';
-    case 'success':
-      return '#172013';
-    case 'info':
-      return '#242424';
-    case 'default':
-    default:
-      return '#181944';
+const Container = styled.div<{ isLeaving?: boolean }>`
+  position: relative;
+  &.animated {
+    overflow: hidden;
+    padding-bottom: 1px;
+    border-radius: 32px;
+    animation: ${({ isLeaving }) => (isLeaving ? slide.out['bottom'] : slide.in['bottom'])} ${TRANSITION_DURATION}ms forwards;
   }
-};
+`;
 
-const getIconSource = ({ type }: { type: NotificationType }) => {
-  switch (type) {
-    case 'warning':
-      return '/icons/notification/warning-icon.svg';
-    case 'error':
-      return '/icons/notification/error-icon.svg';
-    case 'success':
-      return '/icons/notification/success-icon.svg';
-    case 'info':
-      return '/icons/common/info.svg';
-    default:
-      return '/brand/odigos-icon.svg';
-  }
-};
+const DurationAnimation = styled.div<{ type: NotificationType }>`
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border-radius: 32px;
+  background-color: ${({ type, theme }) => theme.text[type]};
+  animation: ${progress.out} ${TOAST_DURATION - TRANSITION_DURATION}ms forwards;
+`;
 
-const NotificationContainer = styled.div<{ type: NotificationType }>`
+const Content = styled.div<{ type: NotificationType }>`
   display: flex;
   align-items: center;
+  flex: 1;
   padding: 12px 16px;
   border-radius: 32px;
-  background-color: ${getBackgroundColor};
+  background-color: ${({ type, theme }) => theme.colors[type]};
 `;
 
 const TextWrapper = styled.div`
   display: flex;
   align-items: center;
-  margin: 0 12px;
+  margin: 0 auto 0 12px;
   height: 12px;
 `;
 
 const Title = styled(Text)<{ type: NotificationType }>`
   font-size: 14px;
-  color: ${getTextColor};
+  color: ${({ type, theme }) => theme.text[type]};
 `;
 
 const Message = styled(Text)<{ type: NotificationType }>`
   font-size: 12px;
-  color: ${getTextColor};
+  color: ${({ type, theme }) => theme.text[type]};
 `;
 
-const ActionButtonWrapper = styled.div`
-  margin-left: 40px;
+const ButtonsWrapper = styled.div`
+  margin-left: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const ActionButton = styled(Text)`
@@ -100,25 +87,99 @@ const ActionButton = styled(Text)`
   cursor: pointer;
 `;
 
-const NotificationNote: React.FC<NotificationProps> = ({ type, title, message, action, style }) => {
+const CloseButton = styled(Image)`
+  margin-left: 12px;
+  width: 18px;
+  height: 18px;
+  padding: 4px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.white_opacity['10']};
+  }
+`;
+
+const NotificationNote: React.FC<NotificationProps> = ({ id, type, title, message, action, style }) => {
+  const { markAsDismissed, markAsSeen } = useNotificationStore();
+
+  // These are for handling transitions:
+  // isEntering - to stop the progress bar from rendering before the toast is fully slide-in
+  // isLeaving - to trigger the slide-out animation
+  const [isEntering, setIsEntering] = useState(true);
+  const [isLeaving, setIsLeaving] = useState(false);
+
+  // These are for handling on-hover events (pause/resume the progress bar animation & timeout for auto-close/dismiss)
+  const timerForClosure = useRef<NodeJS.Timeout | null>(null);
+  const progress = useRef<HTMLDivElement | null>(null);
+
+  const closeToast = useCallback(
+    (params?: { asSeen: boolean }) => {
+      if (!!id) {
+        setIsLeaving(true);
+        setTimeout(() => {
+          markAsDismissed(id);
+          if (params?.asSeen) markAsSeen(id);
+        }, TRANSITION_DURATION);
+      }
+    },
+    [id]
+  );
+
+  useEffect(() => {
+    const t = setTimeout(() => setIsEntering(false), TRANSITION_DURATION);
+
+    return () => {
+      clearTimeout(t);
+    };
+  }, []);
+
+  useEffect(() => {
+    timerForClosure.current = setTimeout(closeToast, TOAST_DURATION);
+
+    return () => {
+      if (timerForClosure.current) clearTimeout(timerForClosure.current);
+    };
+  }, []);
+
+  const handleMouseEnter = () => {
+    if (timerForClosure.current) clearTimeout(timerForClosure.current);
+    if (progress.current) progress.current.style.animationPlayState = 'paused';
+  };
+
+  const handleMouseLeave = () => {
+    if (progress.current) {
+      const remainingTime = (progress.current.offsetWidth / (progress.current.parentElement as HTMLDivElement).offsetWidth) * 4000;
+
+      timerForClosure.current = setTimeout(closeToast, remainingTime);
+      progress.current.style.animationPlayState = 'running';
+    }
+  };
+
   return (
-    <NotificationContainer type={type} style={style}>
-      <Image src={getIconSource({ type })} alt={type} width={16} height={16} />
-
-      <TextWrapper>
-        {title && <Title type={type}>{title}</Title>}
-        {title && message && <Divider orientation='vertical' color={getTextColor({ type }) + '4D'} thickness={1} />}
-        {message && <Message type={type}>{message}</Message>}
-      </TextWrapper>
-
-      {action && (
-        <ActionButtonWrapper onClick={action.onClick}>
-          <ActionButton>{action.label}</ActionButton>
-        </ActionButtonWrapper>
-      )}
-    </NotificationContainer>
+    <Container className={id ? 'animated' : ''} isLeaving={isLeaving} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      <Content type={type} style={style}>
+        <Image src={getStatusIcon(type)} alt={type} width={16} height={16} />
+
+        <TextWrapper>
+          {title && <Title type={type}>{title}</Title>}
+          {title && message && <Divider orientation='vertical' color={theme.text[type] + '4D'} thickness={1} />}
+          {message && <Message type={type}>{message}</Message>}
+        </TextWrapper>
+
+        {(action || id) && (
+          <ButtonsWrapper>
+            {action && <ActionButton onClick={action.onClick}>{action.label}</ActionButton>}
+            {id && <CloseButton src='/icons/common/x.svg' alt='x' width={12} height={12} onClick={() => closeToast({ asSeen: true })} />}
+          </ButtonsWrapper>
+        )}
+      </Content>
+
+      {!!id && !isEntering && !isLeaving && <DurationAnimation ref={progress} type={type} />}
+    </Container>
   );
 };
 
 export { NotificationNote };
-
diff --git a/frontend/webapp/reuseable-components/toast-list/index.tsx b/frontend/webapp/reuseable-components/toast-list/index.tsx
new file mode 100644
index 000000000..f4b9855ed
--- /dev/null
+++ b/frontend/webapp/reuseable-components/toast-list/index.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import styled from 'styled-components';
+import { NotificationNote } from '@/reuseable-components';
+import { Notification, OVERVIEW_ENTITY_TYPES } from '@/types';
+import { DrawerBaseItem, useDrawerStore, useNotificationStore } from '@/store';
+import { useActualDestination, useActualSources, useGetActions, useGetInstrumentationRules } from '@/hooks';
+
+const Container = styled.div`
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 600px;
+`;
+
+export const ToastList: React.FC = () => {
+  const { notifications } = useNotificationStore();
+
+  return (
+    <Container>
+      {notifications
+        .filter(({ dismissed }) => !dismissed)
+        .map((notif) => (
+          <Toast key={`toast-${notif.id}`} {...notif} />
+        ))}
+    </Container>
+  );
+};
+
+const Toast: React.FC<Notification> = ({ id, type, title, message, crdType, target }) => {
+  const { markAsDismissed, markAsSeen } = useNotificationStore();
+
+  const { actions } = useGetActions();
+  const { sources } = useActualSources();
+  const { destinations } = useActualDestination();
+  const { instrumentationRules } = useGetInstrumentationRules();
+  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
+
+  const onClick = () => {
+    const drawerItem: Partial<DrawerBaseItem> = {};
+
+    console.log('crdType', crdType);
+    console.log('target', target);
+
+    switch (crdType) {
+      case 'Rule':
+        drawerItem['type'] = OVERVIEW_ENTITY_TYPES.RULE;
+        // drawerItem['id'] = '';
+        // drawerItem['item'] = instrumentationRules.find((item) => item.ruleId === drawerItem['id']);
+        break;
+      case 'InstrumentedApplication':
+      case 'InstrumentationInstance':
+        drawerItem['type'] = OVERVIEW_ENTITY_TYPES.SOURCE;
+        // drawerItem['id'] = {};
+        // drawerItem['item'] = sources.find((item) => item.kind === drawerItem['id']?.['kind'] && item.name === drawerItem['id']?.['name'] && item.namespace === drawerItem['id']?.['namespace']);
+        break;
+      case 'Action':
+        drawerItem['type'] = OVERVIEW_ENTITY_TYPES.ACTION;
+        // drawerItem['id'] = '';
+        // drawerItem['item'] = actions.find((item) => item.id === drawerItem['id']);
+        break;
+      case 'Destination':
+        drawerItem['type'] = OVERVIEW_ENTITY_TYPES.DESTINATION;
+        // drawerItem['id'] = '';
+        // drawerItem['item'] = destinations.find((item) => item.id === drawerItem['id']);
+        break;
+
+      default:
+        break;
+    }
+
+    console.log('drawerItem', drawerItem);
+
+    if (!!drawerItem.item) {
+      setSelectedItem(drawerItem as DrawerBaseItem);
+      markAsSeen(id);
+      markAsDismissed(id);
+    }
+  };
+
+  return (
+    <NotificationNote
+      id={id}
+      type={type}
+      title={title}
+      message={message}
+      action={
+        crdType && target
+          ? {
+              label: 'go to details',
+              onClick,
+            }
+          : undefined
+      }
+    />
+  );
+};
diff --git a/frontend/webapp/store/useNotificationStore.ts b/frontend/webapp/store/useNotificationStore.ts
index f30af71f3..9f38037ac 100644
--- a/frontend/webapp/store/useNotificationStore.ts
+++ b/frontend/webapp/store/useNotificationStore.ts
@@ -3,21 +3,42 @@ import type { Notification } from '@/types';
 
 interface StoreState {
   notifications: Notification[];
-  addNotification: (notif: Notification) => void;
-  markAsDismissed: (id: string) => void;
-  markAsSeen: (id: string) => void;
-  removeNotification: (id: string) => void;
+  addNotification: (notif: {
+    type: Notification['type'];
+    title: Notification['title'];
+    message: Notification['message'];
+    crdType: Notification['crdType'];
+    target: Notification['target'];
+  }) => void;
+  markAsDismissed: (id?: string) => void;
+  markAsSeen: (id?: string) => void;
+  removeNotification: (id?: string) => void;
 }
 
 export const useNotificationStore = create<StoreState>((set) => ({
   notifications: [],
 
   addNotification: (notif) =>
-    set((state) => ({
-      notifications: [...state.notifications, notif],
-    })),
+    set((state) => {
+      const date = new Date();
+
+      return {
+        notifications: [
+          ...state.notifications,
+          {
+            ...notif,
+            id: date.getTime().toString(),
+            time: date.toISOString(),
+            dismissed: false,
+            seen: false,
+          },
+        ],
+      };
+    }),
 
   markAsDismissed: (id) => {
+    if (!id) return;
+
     set((state) => {
       const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
 
@@ -32,6 +53,8 @@ export const useNotificationStore = create<StoreState>((set) => ({
   },
 
   markAsSeen: (id) => {
+    if (!id) return;
+
     set((state) => {
       const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
 
@@ -46,6 +69,8 @@ export const useNotificationStore = create<StoreState>((set) => ({
   },
 
   removeNotification: (id) => {
+    if (!id) return;
+
     set((state) => {
       const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
 
diff --git a/frontend/webapp/styles/animations.ts b/frontend/webapp/styles/animations.ts
index f2e4928b5..5d7e0292c 100644
--- a/frontend/webapp/styles/animations.ts
+++ b/frontend/webapp/styles/animations.ts
@@ -2,7 +2,7 @@ import { keyframes } from 'styled-components';
 
 type Position = 'left' | 'right' | 'top' | 'bottom' | 'center';
 
-export const fade = {
+export const slide = {
   in: {
     left: keyframes<{ position: Position }>`
       from { transform: translateX(-100%); }
@@ -48,3 +48,14 @@ export const fade = {
     `,
   },
 };
+
+export const progress = {
+  in: keyframes`
+    from { width: 0%; }
+    to { width: 100%; }
+  `,
+  out: keyframes`
+    from { width: 100%; }
+    to { width: 0%; }
+  `,
+};
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index d67fab542..cdd988e2a 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -13,10 +13,16 @@ const colors = {
   card: '#F9F9F90A',
   dropdown_bg: '#242424',
   blank_background: '#11111100',
-  warning: '#E9CF35',
-  danger: '#EF7676',
+
   dark_red: '#802828',
   dark_green: '#2d4323',
+
+  warning: '#472300',
+  error: '#431919',
+  success: '#172013',
+  info: '#242424',
+  default: '#181944',
+
   white_opacity: {
     '004': 'rgba(249, 249, 249, 0.04)',
     '008': 'rgba(249, 249, 249, 0.08)',
@@ -118,8 +124,12 @@ const text = {
   dark_grey: '#7A7A7A',
   light_grey: '#CCD0D2',
   dark_button: '#0A1824',
-  success: '#81AF65',
+
+  warning: '#E9CF35',
   error: '#EF7676',
+  success: '#81AF65',
+  info: '#B8B8B8',
+  default: '#AABEF7',
 };
 
 const font_family = {
diff --git a/frontend/webapp/types/metrics.ts b/frontend/webapp/types/metrics.ts
index db8b9d0fb..61a1cded5 100644
--- a/frontend/webapp/types/metrics.ts
+++ b/frontend/webapp/types/metrics.ts
@@ -13,6 +13,8 @@ export interface SingleDestinationMetricsResponse {
 }
 
 export interface OverviewMetricsResponse {
-  sources: SingleSourceMetricsResponse[];
-  destinations: SingleDestinationMetricsResponse[];
+  getOverviewMetrics: {
+    sources: SingleSourceMetricsResponse[];
+    destinations: SingleDestinationMetricsResponse[];
+  };
 }
diff --git a/frontend/webapp/utils/functions/icons.ts b/frontend/webapp/utils/functions/icons.ts
index 5cb4ca5ac..ed9f628ba 100644
--- a/frontend/webapp/utils/functions/icons.ts
+++ b/frontend/webapp/utils/functions/icons.ts
@@ -1,20 +1,19 @@
-import type { ActionsType, InstrumentationRuleType } from '@/types';
+import type { ActionsType, InstrumentationRuleType, NotificationType } from '@/types';
 
 const BRAND_ICON = '/brand/odigos-icon.svg';
 
-export const getStatusIcon = (status?: 'success' | 'error' | 'info') => {
+export const getStatusIcon = (status?: NotificationType) => {
   if (!status) return BRAND_ICON;
 
   switch (status) {
     case 'success':
       return '/icons/notification/success-icon.svg';
-
     case 'error':
       return '/icons/notification/error-icon2.svg';
-
+    case 'warning':
+      return '/icons/notification/warning-icon.svg';
     case 'info':
       return '/icons/common/info.svg';
-
     default:
       return BRAND_ICON;
   }

From e15ea9a1fc7c7212f8ab9e41eae7b36237ef156a Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Thu, 7 Nov 2024 11:38:06 +0200
Subject: [PATCH 341/374] [GEN-1672]: add logic for "go to details" button of
 toast notifications (#1702)

---
 frontend/webapp/app/page.tsx                  |   4 +-
 frontend/webapp/components/index.ts           |   1 +
 .../components/notification/toast-list.tsx    | 116 ++++++++++++++++++
 .../actions/action-drawer-container/index.tsx |  11 +-
 .../actions/choose-action-modal/index.tsx     |  11 +-
 .../add-rule-modal/index.tsx                  |  29 ++---
 .../rule-drawer-container/index.tsx           |  11 +-
 .../overview/overview-data-flow/index.tsx     |   4 +-
 .../choose-source-modal/index.tsx             |  14 +--
 .../choose-sources-body/index.tsx             |  77 +++---------
 .../webapp/hooks/actions/useActionCRUD.ts     |  43 ++++---
 .../webapp/hooks/actions/useActionFormData.ts |  15 ++-
 .../hooks/destinations/useDestinationCRUD.ts  |  43 ++++---
 .../useInstrumentationRuleCRUD.ts             |  44 ++++---
 .../useInstrumentationRuleFormData.ts         |  13 +-
 frontend/webapp/hooks/useSSE.ts               |   4 +-
 frontend/webapp/reuseable-components/index.ts |   2 -
 .../reuseable-components/modal/index.tsx      |   9 +-
 .../reuseable-components/modal/styled.ts      |  21 ----
 .../notification-note/index.tsx               |  31 ++---
 .../reuseable-components/toast-list/index.tsx | 101 ---------------
 frontend/webapp/styles/styled.tsx             |  21 +++-
 frontend/webapp/utils/constants/string.tsx    |  24 ++--
 .../utils/functions/extract-monitors.ts       |   7 --
 frontend/webapp/utils/functions/formatters.ts |  49 ++++++++
 frontend/webapp/utils/functions/index.ts      |   1 -
 26 files changed, 370 insertions(+), 336 deletions(-)
 create mode 100644 frontend/webapp/components/notification/toast-list.tsx
 delete mode 100644 frontend/webapp/reuseable-components/modal/styled.ts
 delete mode 100644 frontend/webapp/reuseable-components/toast-list/index.tsx
 delete mode 100644 frontend/webapp/utils/functions/extract-monitors.ts

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index ceeeaeaaf..48151e064 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -1,9 +1,9 @@
 'use client';
 import { useEffect } from 'react';
-import { ROUTES, CONFIG } from '@/utils';
 import { useRouter } from 'next/navigation';
 import { useConfig, useNotify } from '@/hooks';
 import { Loader } from '@keyval-dev/design-system';
+import { ROUTES, CONFIG, NOTIFICATION } from '@/utils';
 
 export default function App() {
   const router = useRouter();
@@ -13,7 +13,7 @@ export default function App() {
   useEffect(() => {
     if (error) {
       notify({
-        type: 'error',
+        type: NOTIFICATION.ERROR,
         title: error.name,
         message: error.message,
       });
diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
index dc76a8271..14f31b9fd 100644
--- a/frontend/webapp/components/index.ts
+++ b/frontend/webapp/components/index.ts
@@ -6,3 +6,4 @@ export * from './destinations';
 export * from './main';
 export * from './modals';
 export * from './notification/notification-list'; // old
+export * from './notification/toast-list'; // new
\ No newline at end of file
diff --git a/frontend/webapp/components/notification/toast-list.tsx b/frontend/webapp/components/notification/toast-list.tsx
new file mode 100644
index 000000000..8a6a3dc54
--- /dev/null
+++ b/frontend/webapp/components/notification/toast-list.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import styled from 'styled-components';
+import { NotificationNote } from '@/reuseable-components';
+import { Notification, OVERVIEW_ENTITY_TYPES } from '@/types';
+import { DrawerBaseItem, useDrawerStore, useNotificationStore } from '@/store';
+import { useActualDestination, useActualSources, useGetActions, useGetInstrumentationRules } from '@/hooks';
+import { getIdFromSseTarget } from '@/utils';
+
+const Container = styled.div`
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 600px;
+`;
+
+export const ToastList: React.FC = () => {
+  const { notifications } = useNotificationStore();
+
+  return (
+    <Container>
+      {notifications
+        .filter(({ dismissed }) => !dismissed)
+        .map((notif) => (
+          <Toast key={`toast-${notif.id}`} {...notif} />
+        ))}
+    </Container>
+  );
+};
+
+const Toast: React.FC<Notification> = ({ id, type, title, message, crdType, target }) => {
+  const { markAsDismissed, markAsSeen } = useNotificationStore();
+
+  const { actions } = useGetActions();
+  const { sources } = useActualSources();
+  const { destinations } = useActualDestination();
+  const { instrumentationRules } = useGetInstrumentationRules();
+  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
+
+  const onClick = () => {
+    if (crdType && target) {
+      const drawerItem: Partial<DrawerBaseItem> = {};
+
+      switch (crdType) {
+        case OVERVIEW_ENTITY_TYPES.RULE:
+          drawerItem['type'] = OVERVIEW_ENTITY_TYPES.RULE;
+          drawerItem['id'] = getIdFromSseTarget(target, OVERVIEW_ENTITY_TYPES.RULE);
+          drawerItem['item'] = instrumentationRules.find((item) => item.ruleId === drawerItem['id']);
+          break;
+
+        case OVERVIEW_ENTITY_TYPES.SOURCE:
+        case 'InstrumentedApplication':
+        case 'InstrumentationInstance':
+          drawerItem['type'] = OVERVIEW_ENTITY_TYPES.SOURCE;
+          drawerItem['id'] = getIdFromSseTarget(target, OVERVIEW_ENTITY_TYPES.SOURCE);
+          drawerItem['item'] = sources.find(
+            (item) =>
+              item.kind === drawerItem['id']?.['kind'] &&
+              item.name === drawerItem['id']?.['name'] &&
+              item.namespace === drawerItem['id']?.['namespace']
+          );
+          break;
+
+        case OVERVIEW_ENTITY_TYPES.ACTION:
+          drawerItem['type'] = OVERVIEW_ENTITY_TYPES.ACTION;
+          drawerItem['id'] = getIdFromSseTarget(target, OVERVIEW_ENTITY_TYPES.ACTION);
+          drawerItem['item'] = actions.find((item) => item.id === drawerItem['id']);
+          break;
+
+        case OVERVIEW_ENTITY_TYPES.DESTINATION:
+        case 'Destination':
+          drawerItem['type'] = OVERVIEW_ENTITY_TYPES.DESTINATION;
+          drawerItem['id'] = getIdFromSseTarget(target, OVERVIEW_ENTITY_TYPES.DESTINATION);
+          drawerItem['item'] = destinations.find((item) => item.id === drawerItem['id']);
+          break;
+
+        default:
+          break;
+      }
+
+      if (!!drawerItem.item) {
+        setSelectedItem(drawerItem as DrawerBaseItem);
+      }
+    }
+
+    markAsSeen(id);
+    markAsDismissed(id);
+  };
+
+  const onClose = ({ asSeen }) => {
+    markAsDismissed(id);
+    if (asSeen) markAsSeen(id);
+  };
+
+  return (
+    <NotificationNote
+      id={id}
+      type={type}
+      title={title}
+      message={message}
+      action={
+        crdType && target
+          ? {
+              label: 'go to details',
+              onClick,
+            }
+          : undefined
+      }
+      onClose={onClose}
+    />
+  );
+};
diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
index 744e4257e..ff4f9068e 100644
--- a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
@@ -5,15 +5,14 @@ import { useDrawerStore } from '@/store';
 import { CardDetails } from '@/components';
 import type { ActionDataParsed } from '@/types';
 import { ChooseActionBody } from '../choose-action-body';
+import { useActionCRUD, useActionFormData } from '@/hooks';
 import OverviewDrawer from '../../overview/overview-drawer';
 import buildCardFromActionSpec from './build-card-from-action-spec';
-import { useActionCRUD, useActionFormData, useNotify } from '@/hooks';
 import { ACTION_OPTIONS } from '../choose-action-modal/action-options';
 
 interface Props {}
 
 const ActionDrawer: React.FC<Props> = () => {
-  const notify = useNotify();
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const [isEditing, setIsEditing] = useState(false);
 
@@ -68,13 +67,7 @@ const ActionDrawer: React.FC<Props> = () => {
   };
 
   const handleSave = async (newTitle: string) => {
-    if (!validateForm()) {
-      notify({
-        type: 'error',
-        title: 'Update',
-        message: 'Required fields are missing!',
-      });
-    } else {
+    if (validateForm({ withAlert: true })) {
       const payload = {
         ...formData,
         name: newTitle,
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index ed8fdad7a..37c4b9bd8 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,8 +1,9 @@
 import { ChooseActionBody } from '../';
 import React, { useMemo, useState } from 'react';
+import { CenterThis, ModalBody } from '@/styles';
 import { useActionCRUD, useActionFormData } from '@/hooks/actions';
 import { ACTION_OPTIONS, type ActionOption } from './action-options';
-import { AutocompleteInput, Modal, NavigationButtons, Divider, FadeLoader, SectionTitle, ModalContent, Center } from '@/reuseable-components';
+import { AutocompleteInput, Modal, NavigationButtons, Divider, FadeLoader, SectionTitle } from '@/reuseable-components';
 
 interface AddActionModalProps {
   isOpen: boolean;
@@ -50,7 +51,7 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isOpen, onClose
         />
       }
     >
-      <ModalContent>
+      <ModalBody>
         <SectionTitle
           title='Define Action'
           description='Actions are a way to modify the OpenTelemetry data recorded by Odigos sources before it is exported to your Odigos destinations. Choose an action type and provide necessary information.'
@@ -62,15 +63,15 @@ export const AddActionModal: React.FC<AddActionModalProps> = ({ isOpen, onClose
             <Divider margin='16px 0' />
 
             {loading ? (
-              <Center>
+              <CenterThis>
                 <FadeLoader cssOverride={{ scale: 2 }} />
-              </Center>
+              </CenterThis>
             ) : (
               <ChooseActionBody action={selectedItem} formData={formData} handleFormChange={handleFormChange} />
             )}
           </div>
         ) : null}
-      </ModalContent>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
index 6af49d440..af6787590 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx
@@ -1,18 +1,9 @@
+import { CenterThis, ModalBody } from '@/styles';
 import { ChooseRuleBody } from '../choose-rule-body';
 import { RULE_OPTIONS, RuleOption } from './rule-options';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData } from '@/hooks';
-import {
-  AutocompleteInput,
-  Center,
-  Divider,
-  FadeLoader,
-  Modal,
-  ModalContent,
-  NavigationButtons,
-  NotificationNote,
-  SectionTitle,
-} from '@/reuseable-components';
+import { AutocompleteInput, Divider, FadeLoader, Modal, NavigationButtons, NotificationNote, SectionTitle } from '@/reuseable-components';
 
 interface Props {
   isOpen: boolean;
@@ -22,11 +13,7 @@ interface Props {
 export const AddRuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
   const { formData, handleFormChange, resetFormData, validateForm } = useInstrumentationRuleFormData();
   const { createInstrumentationRule, loading } = useInstrumentationRuleCRUD({ onSuccess: handleClose });
-  const [selectedItem, setSelectedItem] = useState<RuleOption | undefined>(undefined);
-
-  useEffect(() => {
-    if (!selectedItem) handleSelect(RULE_OPTIONS[0]);
-  }, [selectedItem]);
+  const [selectedItem, setSelectedItem] = useState<RuleOption | undefined>(RULE_OPTIONS[0]);
 
   const isFormOk = useMemo(() => !!selectedItem && validateForm(), [selectedItem, formData]);
 
@@ -63,7 +50,7 @@ export const AddRuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
         />
       }
     >
-      <ModalContent>
+      <ModalBody>
         <SectionTitle
           title='Define Instrumentation Rule'
           description='Instrumentation rules control how telemetry is recorded from your application. Choose a rule type and provide necessary information.'
@@ -86,15 +73,15 @@ export const AddRuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
             <Divider margin='16px 0' />
 
             {loading ? (
-              <Center>
+              <CenterThis>
                 <FadeLoader cssOverride={{ scale: 2 }} />
-              </Center>
+              </CenterThis>
             ) : (
               <ChooseRuleBody rule={selectedItem} formData={formData} handleFormChange={handleFormChange} />
             )}
           </div>
         ) : null}
-      </ModalContent>
+      </ModalBody>
     </Modal>
   );
 };
diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
index 55af46efb..02a7d4454 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
@@ -8,12 +8,11 @@ import type { InstrumentationRuleSpec } from '@/types';
 import OverviewDrawer from '../../overview/overview-drawer';
 import { RULE_OPTIONS } from '../add-rule-modal/rule-options';
 import buildCardFromRuleSpec from './build-card-from-rule-spec';
-import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData, useNotify } from '@/hooks';
+import { useInstrumentationRuleCRUD, useInstrumentationRuleFormData } from '@/hooks';
 
 interface Props {}
 
 const RuleDrawer: React.FC<Props> = () => {
-  const notify = useNotify();
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const [isEditing, setIsEditing] = useState(false);
 
@@ -66,13 +65,7 @@ const RuleDrawer: React.FC<Props> = () => {
   };
 
   const handleSave = async (newTitle: string) => {
-    if (!validateForm()) {
-      notify({
-        type: 'error',
-        title: 'Update',
-        message: 'Required fields are missing!',
-      });
-    } else {
+    if (validateForm({ withAlert: true })) {
       const payload = {
         ...formData,
         ruleName: newTitle,
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index acdd98109..b5f7285e3 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -2,8 +2,9 @@
 import React, { useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import styled from 'styled-components';
+import { ToastList } from '@/components';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
-import { buildNodesAndEdges, NodeBaseDataFlow, ToastList } from '@/reuseable-components';
+import { buildNodesAndEdges, NodeBaseDataFlow, } from '@/reuseable-components';
 import {
   useMetrics,
   useGetActions,
@@ -14,6 +15,7 @@ import {
   useGetInstrumentationRules,
 } from '@/hooks';
 
+
 const AllDrawers = dynamic(() => import('../all-drawers'), {
   ssr: false,
 });
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
index 1a9dcdecf..4e96a1097 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
@@ -1,16 +1,8 @@
-import styled from 'styled-components';
 import React, { useState, useCallback } from 'react';
-import { useActualSources, useConnectSourcesMenuState } from '@/hooks';
 import { ChooseSourcesBody } from '../choose-sources-body';
 import { Modal, NavigationButtons } from '@/reuseable-components';
 import { K8sActualSource, PersistNamespaceItemInput } from '@/types';
-
-const ChooseSourcesBodyWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-`;
+import { useActualSources, useConnectSourcesMenuState } from '@/hooks';
 
 interface AddSourceModalProps {
   isOpen: boolean;
@@ -65,9 +57,7 @@ export const AddSourceModal: React.FC<AddSourceModalProps> = ({ isOpen, onClose
         />
       }
     >
-      <ChooseSourcesBodyWrapper>
-        <ChooseSourcesBody isModal stateMenu={stateMenu} sourcesList={sourcesList} stateHandlers={stateHandlers} setSourcesList={setSourcesList} />
-      </ChooseSourcesBodyWrapper>
+      <ChooseSourcesBody isModal stateMenu={stateMenu} sourcesList={sourcesList} stateHandlers={stateHandlers} setSourcesList={setSourcesList} />
     </Modal>
   );
 };
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
index 58f401b90..db94d8c6a 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-sources-body/index.tsx
@@ -1,38 +1,22 @@
 import React from 'react';
+import { ModalBody } from '@/styles';
 import styled from 'styled-components';
 import { K8sActualSource } from '@/types';
 import { useConnectSourcesList } from '@/hooks';
 import { SourcesList } from '../choose-sources-list';
 import { SectionTitle, Divider } from '@/reuseable-components';
-import {
-  SearchAndDropdown,
-  TogglesAndCheckboxes,
-} from '../choose-sources-menu';
-import {
-  SearchDropdownState,
-  ToggleCheckboxState,
-  SearchDropdownHandlers,
-  ToggleCheckboxHandlers,
-} from '../choose-sources-menu/type';
-
-const ContentWrapper = styled.div`
-  width: 100%;
-  max-width: 640px;
-  height: 640px;
-  margin: 0 15vw;
-  padding-top: 64px;
-`;
+import { SearchAndDropdown, TogglesAndCheckboxes } from '../choose-sources-menu';
+import { SearchDropdownState, ToggleCheckboxState, SearchDropdownHandlers, ToggleCheckboxHandlers } from '../choose-sources-menu/type';
 
 const SourcesListWrapper = styled.div<{ isModal: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
+  max-height: ${({ isModal }) => (isModal ? 'calc(100vh - 548px)' : 'calc(100vh - 360px)')};
   height: 100%;
   padding-bottom: ${({ isModal }) => (isModal ? '48px' : '0')};
-  max-height: ${({ isModal }) =>
-    isModal ? 'calc(100vh - 548px)' : 'calc(100vh - 360px)'};
-  overflow-y: auto;
+  overflow-y: scroll;
 `;
 
 interface ChooseSourcesContentProps {
@@ -43,13 +27,7 @@ interface ChooseSourcesContentProps {
   setSourcesList: React.Dispatch<React.SetStateAction<K8sActualSource[]>>;
 }
 
-const ChooseSourcesBody: React.FC<ChooseSourcesContentProps> = ({
-  stateMenu,
-  isModal = false,
-  sourcesList,
-  stateHandlers,
-  setSourcesList,
-}) => {
+const ChooseSourcesBody: React.FC<ChooseSourcesContentProps> = ({ stateMenu, isModal = false, sourcesList, stateHandlers, setSourcesList }) => {
   const { namespacesList } = useConnectSourcesList({
     stateMenu,
     setSourcesList,
@@ -57,30 +35,22 @@ const ChooseSourcesBody: React.FC<ChooseSourcesContentProps> = ({
 
   function getVisibleSources() {
     const allSources = sourcesList || [];
-    const filteredSources = stateMenu.searchFilter
-      ? stateHandlers.filterSources(allSources)
-      : allSources;
+    const filteredSources = stateMenu.searchFilter ? stateHandlers.filterSources(allSources) : allSources;
 
     return stateMenu.showSelectedOnly
       ? filteredSources.filter((source) =>
           stateMenu.selectedOption
-            ? (
-                stateMenu.selectedItems[stateMenu.selectedOption.value] || []
-              ).find((selectedItem) => selectedItem.name === source.name)
+            ? (stateMenu.selectedItems[stateMenu.selectedOption.value] || []).find((selectedItem) => selectedItem.name === source.name)
             : false
         )
       : filteredSources;
   }
 
   const toggleCheckboxState: ToggleCheckboxState = {
-    selectedAppsCount: stateMenu.selectedOption
-      ? (stateMenu.selectedItems[stateMenu.selectedOption.value] || []).length
-      : 0,
+    selectedAppsCount: stateMenu.selectedOption ? (stateMenu.selectedItems[stateMenu.selectedOption.value] || []).length : 0,
     selectAllCheckbox: stateMenu.selectAllCheckbox,
     showSelectedOnly: stateMenu.showSelectedOnly,
-    futureAppsCheckbox:
-      stateMenu.futureAppsCheckbox[stateMenu.selectedOption?.value || ''] ||
-      false,
+    futureAppsCheckbox: stateMenu.futureAppsCheckbox[stateMenu.selectedOption?.value || ''] || false,
   };
 
   const toggleCheckboxHandlers: ToggleCheckboxHandlers = {
@@ -105,34 +75,23 @@ const ChooseSourcesBody: React.FC<ChooseSourcesContentProps> = ({
   };
 
   return (
-    <ContentWrapper>
+    <ModalBody style={isModal ? undefined : { height: '100%' }}>
       <SectionTitle
-        title="Choose sources"
+        title='Choose sources'
         description="Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations."
       />
-      <SearchAndDropdown
-        state={searchDropdownState}
-        handlers={searchDropdownHandlers}
-        dropdownOptions={namespacesList}
-      />
-      <Divider margin="16px 0" />
-      <TogglesAndCheckboxes
-        state={toggleCheckboxState}
-        handlers={toggleCheckboxHandlers}
-      />
-      <Divider margin="16px 0 24px" />
+      <SearchAndDropdown state={searchDropdownState} handlers={searchDropdownHandlers} dropdownOptions={namespacesList} />
+      <Divider margin='16px 0' />
+      <TogglesAndCheckboxes state={toggleCheckboxState} handlers={toggleCheckboxHandlers} />
+      <Divider margin='16px 0 24px' />
       <SourcesListWrapper isModal={isModal}>
         <SourcesList
-          selectedItems={
-            stateMenu.selectedOption
-              ? stateMenu.selectedItems[stateMenu.selectedOption.value] || []
-              : []
-          }
+          selectedItems={stateMenu.selectedOption ? stateMenu.selectedItems[stateMenu.selectedOption.value] || [] : []}
           setSelectedItems={stateHandlers.handleSelectItem}
           items={getVisibleSources()}
         />
       </SourcesListWrapper>
-    </ContentWrapper>
+    </ModalBody>
   );
 };
 
diff --git a/frontend/webapp/hooks/actions/useActionCRUD.ts b/frontend/webapp/hooks/actions/useActionCRUD.ts
index 1150d43d4..0b95f506f 100644
--- a/frontend/webapp/hooks/actions/useActionCRUD.ts
+++ b/frontend/webapp/hooks/actions/useActionCRUD.ts
@@ -1,9 +1,10 @@
 import { useDrawerStore } from '@/store';
 import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
-import type { ActionInput, ActionsType, NotificationType } from '@/types';
 import { useComputePlatform } from '../compute-platform';
+import { ACTION, getSseTargetFromId, NOTIFICATION } from '@/utils';
 import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations';
+import { OVERVIEW_ENTITY_TYPES, type ActionInput, type ActionsType, type NotificationType } from '@/types';
 
 interface UseActionCrudParams {
   onSuccess?: () => void;
@@ -15,41 +16,49 @@ export const useActionCRUD = (params?: UseActionCrudParams) => {
   const { refetch } = useComputePlatform();
   const notify = useNotify();
 
-  const notifyUser = (type: NotificationType, title: string, message: string) => {
-    notify({ type, title, message });
+  const notifyUser = (type: NotificationType, title: string, message: string, id?: string) => {
+    notify({
+      type,
+      title,
+      message,
+      crdType: OVERVIEW_ENTITY_TYPES.ACTION,
+      target: id ? getSseTargetFromId(id, OVERVIEW_ENTITY_TYPES.ACTION) : undefined,
+    });
   };
 
-  const handleError = (title: string, message: string) => {
-    notifyUser('error', title, message);
+  const handleError = (title: string, message: string, id?: string) => {
+    notifyUser(NOTIFICATION.ERROR, title, message, id);
     params?.onError?.();
   };
 
-  const handleComplete = (title: string, message: string) => {
-    notifyUser('success', title, message);
+  const handleComplete = (title: string, message: string, id?: string) => {
+    notifyUser(NOTIFICATION.SUCCESS, title, message, id);
     setDrawerItem(null);
     refetch();
     params?.onSuccess?.();
   };
 
   const [createAction, cState] = useMutation<{ createAction: { id: string } }>(CREATE_ACTION, {
-    onError: (error) => handleError('Create', error.message),
-    onCompleted: (_, req) => {
+    onError: (error) => handleError(ACTION.CREATE, error.message),
+    onCompleted: (res, req) => {
+      const id = res.createAction.id;
       const name = req?.variables?.action.name || req?.variables?.action.type;
-      handleComplete('Create', `action "${name}" was created`);
+      handleComplete(ACTION.CREATE, `action "${name}" was created`, id);
     },
   });
   const [updateAction, uState] = useMutation<{ updateAction: { id: string } }>(UPDATE_ACTION, {
-    onError: (error) => handleError('Update', error.message),
-    onCompleted: (_, req) => {
+    onError: (error) => handleError(ACTION.UPDATE, error.message),
+    onCompleted: (res, req) => {
+      const id = res.updateAction.id;
       const name = req?.variables?.action.name || req?.variables?.action.type;
-      handleComplete('Update', `action "${name}" was updated`);
+      handleComplete(ACTION.UPDATE, `action "${name}" was updated`, id);
     },
   });
   const [deleteAction, dState] = useMutation<{ deleteAction: boolean }>(DELETE_ACTION, {
-    onError: (error) => handleError('Delete', error.message),
-    onCompleted: (_, req) => {
-      const name = req?.variables?.id;
-      handleComplete('Delete', `action "${name}" was deleted`);
+    onError: (error) => handleError(ACTION.DELETE, error.message),
+    onCompleted: (res, req) => {
+      const id = req?.variables?.id;
+      handleComplete(ACTION.DELETE, `action "${id}" was deleted`);
     },
   });
 
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index 7ddd74e55..9c2b069fa 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,6 +1,8 @@
 import { useState } from 'react';
-import type { ActionDataParsed, ActionInput } from '@/types';
+import { useNotify } from '../useNotify';
 import { DrawerBaseItem } from '@/store';
+import { ACTION, FORM_ALERTS, NOTIFICATION } from '@/utils';
+import type { ActionDataParsed, ActionInput } from '@/types';
 
 const INITIAL: ActionInput = {
   type: '',
@@ -12,6 +14,7 @@ const INITIAL: ActionInput = {
 };
 
 export function useActionFormData() {
+  const notify = useNotify();
   const [formData, setFormData] = useState({ ...INITIAL });
 
   const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
@@ -25,7 +28,7 @@ export function useActionFormData() {
     setFormData({ ...INITIAL });
   };
 
-  const validateForm = () => {
+  const validateForm = (params?: { withAlert?: boolean }) => {
     let ok = true;
 
     Object.entries(formData).forEach(([k, v]) => {
@@ -41,6 +44,14 @@ export function useActionFormData() {
       }
     });
 
+    if (!ok && params?.withAlert) {
+      notify({
+        type: NOTIFICATION.ERROR,
+        title: ACTION.UPDATE,
+        message: FORM_ALERTS.REQUIRED_FIELDS,
+      });
+    }
+
     return ok;
   };
 
diff --git a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
index a66d99205..3668cfbe6 100644
--- a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
@@ -2,7 +2,8 @@ import { useDrawerStore } from '@/store';
 import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
 import { useComputePlatform } from '../compute-platform';
-import type { DestinationInput, NotificationType } from '@/types';
+import { ACTION, getSseTargetFromId, NOTIFICATION } from '@/utils';
+import { OVERVIEW_ENTITY_TYPES, type DestinationInput, type NotificationType } from '@/types';
 import { CREATE_DESTINATION, DELETE_DESTINATION, UPDATE_DESTINATION } from '@/graphql/mutations';
 
 interface Params {
@@ -15,41 +16,49 @@ export const useDestinationCRUD = (params?: Params) => {
   const { refetch } = useComputePlatform();
   const notify = useNotify();
 
-  const notifyUser = (type: NotificationType, title: string, message: string) => {
-    notify({ type, title, message });
+  const notifyUser = (type: NotificationType, title: string, message: string, id?: string) => {
+    notify({
+      type,
+      title,
+      message,
+      crdType: OVERVIEW_ENTITY_TYPES.DESTINATION,
+      target: id ? getSseTargetFromId(id, OVERVIEW_ENTITY_TYPES.DESTINATION) : undefined,
+    });
   };
 
-  const handleError = (title: string, message: string) => {
-    notifyUser('error', title, message);
+  const handleError = (title: string, message: string, id?: string) => {
+    notifyUser(NOTIFICATION.ERROR, title, message, id);
     params?.onError?.();
   };
 
-  const handleComplete = (title: string, message: string) => {
-    notifyUser('success', title, message);
+  const handleComplete = (title: string, message: string, id?: string) => {
+    notifyUser(NOTIFICATION.SUCCESS, title, message, id);
     setDrawerItem(null);
     refetch();
     params?.onSuccess?.();
   };
 
   const [createDestination, cState] = useMutation<{ createNewDestination: { id: string } }>(CREATE_DESTINATION, {
-    onError: (error) => handleError('Create', error.message),
-    onCompleted: (_, req) => {
+    onError: (error) => handleError(ACTION.CREATE, error.message),
+    onCompleted: (res, req) => {
+      const id = res.createNewDestination.id;
       const name = req?.variables?.destination.name || req?.variables?.destination.type;
-      handleComplete('Create', `destination "${name}" was created`);
+      handleComplete(ACTION.CREATE, `destination "${name}" was created`, id);
     },
   });
   const [updateDestination, uState] = useMutation<{ updateDestination: { id: string } }>(UPDATE_DESTINATION, {
-    onError: (error) => handleError('Update', error.message),
-    onCompleted: (_, req) => {
+    onError: (error) => handleError(ACTION.UPDATE, error.message),
+    onCompleted: (res, req) => {
+      const id = res.updateDestination.id;
       const name = req?.variables?.destination.name || req?.variables?.destination.type;
-      handleComplete('Update', `destination "${name}" was updated`);
+      handleComplete(ACTION.UPDATE, `destination "${name}" was updated`, id);
     },
   });
   const [deleteDestination, dState] = useMutation<{ deleteDestination: boolean }>(DELETE_DESTINATION, {
-    onError: (error) => handleError('Delete', error.message),
-    onCompleted: (_, req) => {
-      const name = req?.variables?.id;
-      handleComplete('Delete', `destination "${name}" was deleted`);
+    onError: (error) => handleError(ACTION.DELETE, error.message),
+    onCompleted: (res, req) => {
+      const id = req?.variables?.id;
+      handleComplete(ACTION.DELETE, `destination "${id}" was deleted`);
     },
   });
 
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
index 819f2006b..debdbccf7 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
@@ -1,9 +1,9 @@
 import { useDrawerStore } from '@/store';
 import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
-import { deriveTypeFromRule } from '@/utils';
 import { useComputePlatform } from '../compute-platform';
-import type { InstrumentationRuleInput, NotificationType } from '@/types';
+import { ACTION, deriveTypeFromRule, getSseTargetFromId, NOTIFICATION } from '@/utils';
+import { OVERVIEW_ENTITY_TYPES, type InstrumentationRuleInput, type NotificationType } from '@/types';
 import { CREATE_INSTRUMENTATION_RULE, UPDATE_INSTRUMENTATION_RULE, DELETE_INSTRUMENTATION_RULE } from '@/graphql/mutations';
 
 interface Params {
@@ -16,41 +16,49 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
   const { refetch } = useComputePlatform();
   const notify = useNotify();
 
-  const notifyUser = (type: NotificationType, title: string, message: string) => {
-    notify({ type, title, message });
+  const notifyUser = (type: NotificationType, title: string, message: string, id?: string) => {
+    notify({
+      type,
+      title,
+      message,
+      crdType: OVERVIEW_ENTITY_TYPES.RULE,
+      target: id ? getSseTargetFromId(id, OVERVIEW_ENTITY_TYPES.RULE) : undefined,
+    });
   };
 
-  const handleError = (title: string, message: string) => {
-    notifyUser('error', title, message);
+  const handleError = (title: string, message: string, id?: string) => {
+    notifyUser(NOTIFICATION.ERROR, title, message, id);
     params?.onError?.();
   };
 
-  const handleComplete = (title: string, message: string) => {
-    notifyUser('success', title, message);
+  const handleComplete = (title: string, message: string, id?: string) => {
+    notifyUser(NOTIFICATION.SUCCESS, title, message, id);
     setDrawerItem(null);
     refetch();
     params?.onSuccess?.();
   };
 
   const [createInstrumentationRule, cState] = useMutation<{ createInstrumentationRule: { ruleId: string } }>(CREATE_INSTRUMENTATION_RULE, {
-    onError: (error) => handleError('Create', error.message),
-    onCompleted: (_, req) => {
+    onError: (error) => handleError(ACTION.CREATE, error.message),
+    onCompleted: (res, req) => {
+      const id = res.createInstrumentationRule.ruleId;
       const name = req?.variables?.instrumentationRule.ruleName || deriveTypeFromRule(req?.variables?.instrumentationRule);
-      handleComplete('Create', `instrumentation rule "${name}" was created`);
+      handleComplete(ACTION.CREATE, `instrumentation rule "${name}" was created`, id);
     },
   });
   const [updateInstrumentationRule, uState] = useMutation<{ updateInstrumentationRule: { ruleId: string } }>(UPDATE_INSTRUMENTATION_RULE, {
-    onError: (error) => handleError('Update', error.message),
-    onCompleted: (_, req) => {
+    onError: (error) => handleError(ACTION.UPDATE, error.message),
+    onCompleted: (res, req) => {
+      const id = res.updateInstrumentationRule.ruleId;
       const name = req?.variables?.instrumentationRule.ruleName || deriveTypeFromRule(req?.variables?.instrumentationRule);
-      handleComplete('Update', `instrumentation rule "${name}" was updated`);
+      handleComplete(ACTION.UPDATE, `instrumentation rule "${name}" was updated`, id);
     },
   });
   const [deleteInstrumentationRule, dState] = useMutation<{ deleteInstrumentationRule: boolean }>(DELETE_INSTRUMENTATION_RULE, {
-    onError: (error) => handleError('Delete', error.message),
-    onCompleted: (_, req) => {
-      const name = req?.variables?.ruleId;
-      handleComplete('Delete', `instrumentation rule "${name}" was deleted`);
+    onError: (error) => handleError(ACTION.DELETE, error.message),
+    onCompleted: (res, req) => {
+      const id = req?.variables?.ruleId;
+      handleComplete(ACTION.DELETE, `instrumentation rule "${id}" was deleted`);
     },
   });
 
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
index 7dfa31b5c..b99b2b66e 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
@@ -1,5 +1,7 @@
 import { useState } from 'react';
+import { useNotify } from '../useNotify';
 import type { DrawerBaseItem } from '@/store';
+import { ACTION, FORM_ALERTS, NOTIFICATION } from '@/utils';
 import { PayloadCollectionType, type InstrumentationRuleInput, type InstrumentationRuleSpec } from '@/types';
 
 const INITIAL: InstrumentationRuleInput = {
@@ -17,6 +19,7 @@ const INITIAL: InstrumentationRuleInput = {
 };
 
 export function useInstrumentationRuleFormData() {
+  const notify = useNotify();
   const [formData, setFormData] = useState({ ...INITIAL });
 
   const handleFormChange = (key: keyof typeof INITIAL, val: any) => {
@@ -30,7 +33,7 @@ export function useInstrumentationRuleFormData() {
     setFormData({ ...INITIAL });
   };
 
-  const validateForm = () => {
+  const validateForm = (params?: { withAlert?: boolean }) => {
     let ok = true;
 
     Object.entries(formData).forEach(([k, v]) => {
@@ -45,6 +48,14 @@ export function useInstrumentationRuleFormData() {
       }
     });
 
+    if (!ok && params?.withAlert) {
+      notify({
+        type: NOTIFICATION.ERROR,
+        title: ACTION.UPDATE,
+        message: FORM_ALERTS.REQUIRED_FIELDS,
+      });
+    }
+
     return ok;
   };
 
diff --git a/frontend/webapp/hooks/useSSE.ts b/frontend/webapp/hooks/useSSE.ts
index bd52d8daf..26a47a45e 100644
--- a/frontend/webapp/hooks/useSSE.ts
+++ b/frontend/webapp/hooks/useSSE.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { API } from '@/utils';
+import { API, NOTIFICATION } from '@/utils';
 import { useNotify } from './useNotify';
 
 export function useSSE() {
@@ -66,7 +66,7 @@ export function useSSE() {
             console.error('Max retries reached. Could not reconnect to EventSource.');
 
             notify({
-              type: 'error',
+              type: NOTIFICATION.ERROR,
               title: 'Connection Error',
               message: 'Connection to the server failed. Please reboot the application.',
             });
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index b5b0498d9..b8e7357ee 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -11,7 +11,6 @@ export * from './toggle';
 export * from './checkbox';
 export * from './modal';
 export * from './modal/warning-modal';
-export * from './modal/styled';
 export * from './navigation-buttons';
 export * from './tag';
 export * from './checkbox-list';
@@ -30,4 +29,3 @@ export * from './drawer';
 export * from './input-table';
 export * from './status';
 export * from './field-label';
-export * from './toast-list';
diff --git a/frontend/webapp/reuseable-components/modal/index.tsx b/frontend/webapp/reuseable-components/modal/index.tsx
index f27f30b03..8fb0b3a1b 100644
--- a/frontend/webapp/reuseable-components/modal/index.tsx
+++ b/frontend/webapp/reuseable-components/modal/index.tsx
@@ -4,7 +4,7 @@ import { Text } from '../text';
 import ReactDOM from 'react-dom';
 import { useKeyDown } from '@/hooks';
 import styled from 'styled-components';
-import { slide, Overlay } from '@/styles';
+import { slide, Overlay, CenterThis } from '@/styles';
 
 interface ModalProps {
   isOpen: boolean;
@@ -55,7 +55,7 @@ const HeaderActionsWrapper = styled.div`
   gap: 8px;
 `;
 
-const ModalContent = styled.div``;
+const ModalContent = styled(CenterThis)``;
 
 const ModalTitleContainer = styled.div`
   position: absolute;
@@ -83,7 +83,7 @@ const CancelText = styled(Text)`
   cursor: pointer;
 `;
 
-const Modal: React.FC<ModalProps> = ({ isOpen, noOverlay, header, onClose, children, actionComponent }) => {
+const Modal: React.FC<ModalProps> = ({ isOpen, noOverlay, header, actionComponent, onClose, children }) => {
   useKeyDown(
     {
       key: 'Escape',
@@ -96,7 +96,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, noOverlay, header, onClose, child
 
   return ReactDOM.createPortal(
     <>
-      <Overlay hideOverlay={noOverlay} onClick={onClose} />
+      <Overlay onClick={onClose} style={{ opacity: noOverlay ? 0 : 1 }} />
 
       <ModalWrapper isOpen={isOpen}>
         {header && (
@@ -111,6 +111,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, noOverlay, header, onClose, child
             <HeaderActionsWrapper>{actionComponent}</HeaderActionsWrapper>
           </ModalHeader>
         )}
+
         <ModalContent>{children}</ModalContent>
       </ModalWrapper>
     </>,
diff --git a/frontend/webapp/reuseable-components/modal/styled.ts b/frontend/webapp/reuseable-components/modal/styled.ts
deleted file mode 100644
index eb962dc3c..000000000
--- a/frontend/webapp/reuseable-components/modal/styled.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-export const ModalContent = styled.section`
-  width: 100%;
-  max-width: 640px;
-  height: 640px;
-  margin: 0 15vw;
-  padding: 64px 12px 0 12px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-`;
-
-export const Center = styled.div`
-  width: 100%;
-  margin-top: 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
diff --git a/frontend/webapp/reuseable-components/notification-note/index.tsx b/frontend/webapp/reuseable-components/notification-note/index.tsx
index 41ec2c9a9..57f9d91a1 100644
--- a/frontend/webapp/reuseable-components/notification-note/index.tsx
+++ b/frontend/webapp/reuseable-components/notification-note/index.tsx
@@ -6,9 +6,12 @@ import { Divider } from '../divider';
 import styled from 'styled-components';
 import { getStatusIcon } from '@/utils';
 import { progress, slide } from '@/styles';
-import { useNotificationStore } from '@/store';
 import type { Notification, NotificationType } from '@/types';
 
+interface OnCloseParams {
+  asSeen: boolean;
+}
+
 interface NotificationProps {
   id?: string;
   type: NotificationType;
@@ -18,6 +21,7 @@ interface NotificationProps {
     label: string;
     onClick: () => void;
   };
+  onClose?: (params: OnCloseParams) => void;
   style?: React.CSSProperties;
 }
 
@@ -102,9 +106,7 @@ const CloseButton = styled(Image)`
   }
 `;
 
-const NotificationNote: React.FC<NotificationProps> = ({ id, type, title, message, action, style }) => {
-  const { markAsDismissed, markAsSeen } = useNotificationStore();
-
+const NotificationNote: React.FC<NotificationProps> = ({ type, title, message, action, onClose, style }) => {
   // These are for handling transitions:
   // isEntering - to stop the progress bar from rendering before the toast is fully slide-in
   // isLeaving - to trigger the slide-out animation
@@ -116,16 +118,15 @@ const NotificationNote: React.FC<NotificationProps> = ({ id, type, title, messag
   const progress = useRef<HTMLDivElement | null>(null);
 
   const closeToast = useCallback(
-    (params?: { asSeen: boolean }) => {
-      if (!!id) {
+    (params: OnCloseParams) => {
+      if (onClose) {
         setIsLeaving(true);
         setTimeout(() => {
-          markAsDismissed(id);
-          if (params?.asSeen) markAsSeen(id);
+          onClose({ asSeen: params?.asSeen });
         }, TRANSITION_DURATION);
       }
     },
-    [id]
+    [onClose]
   );
 
   useEffect(() => {
@@ -137,7 +138,7 @@ const NotificationNote: React.FC<NotificationProps> = ({ id, type, title, messag
   }, []);
 
   useEffect(() => {
-    timerForClosure.current = setTimeout(closeToast, TOAST_DURATION);
+    timerForClosure.current = setTimeout(() => closeToast({ asSeen: false }), TOAST_DURATION);
 
     return () => {
       if (timerForClosure.current) clearTimeout(timerForClosure.current);
@@ -153,13 +154,13 @@ const NotificationNote: React.FC<NotificationProps> = ({ id, type, title, messag
     if (progress.current) {
       const remainingTime = (progress.current.offsetWidth / (progress.current.parentElement as HTMLDivElement).offsetWidth) * 4000;
 
-      timerForClosure.current = setTimeout(closeToast, remainingTime);
+      timerForClosure.current = setTimeout(() => closeToast({ asSeen: false }), remainingTime);
       progress.current.style.animationPlayState = 'running';
     }
   };
 
   return (
-    <Container className={id ? 'animated' : ''} isLeaving={isLeaving} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+    <Container className={onClose ? 'animated' : ''} isLeaving={isLeaving} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       <Content type={type} style={style}>
         <Image src={getStatusIcon(type)} alt={type} width={16} height={16} />
 
@@ -169,15 +170,15 @@ const NotificationNote: React.FC<NotificationProps> = ({ id, type, title, messag
           {message && <Message type={type}>{message}</Message>}
         </TextWrapper>
 
-        {(action || id) && (
+        {(action || onClose) && (
           <ButtonsWrapper>
             {action && <ActionButton onClick={action.onClick}>{action.label}</ActionButton>}
-            {id && <CloseButton src='/icons/common/x.svg' alt='x' width={12} height={12} onClick={() => closeToast({ asSeen: true })} />}
+            {onClose && <CloseButton src='/icons/common/x.svg' alt='x' width={12} height={12} onClick={() => closeToast({ asSeen: true })} />}
           </ButtonsWrapper>
         )}
       </Content>
 
-      {!!id && !isEntering && !isLeaving && <DurationAnimation ref={progress} type={type} />}
+      {onClose && !isEntering && !isLeaving && <DurationAnimation ref={progress} type={type} />}
     </Container>
   );
 };
diff --git a/frontend/webapp/reuseable-components/toast-list/index.tsx b/frontend/webapp/reuseable-components/toast-list/index.tsx
deleted file mode 100644
index f4b9855ed..000000000
--- a/frontend/webapp/reuseable-components/toast-list/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { NotificationNote } from '@/reuseable-components';
-import { Notification, OVERVIEW_ENTITY_TYPES } from '@/types';
-import { DrawerBaseItem, useDrawerStore, useNotificationStore } from '@/store';
-import { useActualDestination, useActualSources, useGetActions, useGetInstrumentationRules } from '@/hooks';
-
-const Container = styled.div`
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10000;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 600px;
-`;
-
-export const ToastList: React.FC = () => {
-  const { notifications } = useNotificationStore();
-
-  return (
-    <Container>
-      {notifications
-        .filter(({ dismissed }) => !dismissed)
-        .map((notif) => (
-          <Toast key={`toast-${notif.id}`} {...notif} />
-        ))}
-    </Container>
-  );
-};
-
-const Toast: React.FC<Notification> = ({ id, type, title, message, crdType, target }) => {
-  const { markAsDismissed, markAsSeen } = useNotificationStore();
-
-  const { actions } = useGetActions();
-  const { sources } = useActualSources();
-  const { destinations } = useActualDestination();
-  const { instrumentationRules } = useGetInstrumentationRules();
-  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
-
-  const onClick = () => {
-    const drawerItem: Partial<DrawerBaseItem> = {};
-
-    console.log('crdType', crdType);
-    console.log('target', target);
-
-    switch (crdType) {
-      case 'Rule':
-        drawerItem['type'] = OVERVIEW_ENTITY_TYPES.RULE;
-        // drawerItem['id'] = '';
-        // drawerItem['item'] = instrumentationRules.find((item) => item.ruleId === drawerItem['id']);
-        break;
-      case 'InstrumentedApplication':
-      case 'InstrumentationInstance':
-        drawerItem['type'] = OVERVIEW_ENTITY_TYPES.SOURCE;
-        // drawerItem['id'] = {};
-        // drawerItem['item'] = sources.find((item) => item.kind === drawerItem['id']?.['kind'] && item.name === drawerItem['id']?.['name'] && item.namespace === drawerItem['id']?.['namespace']);
-        break;
-      case 'Action':
-        drawerItem['type'] = OVERVIEW_ENTITY_TYPES.ACTION;
-        // drawerItem['id'] = '';
-        // drawerItem['item'] = actions.find((item) => item.id === drawerItem['id']);
-        break;
-      case 'Destination':
-        drawerItem['type'] = OVERVIEW_ENTITY_TYPES.DESTINATION;
-        // drawerItem['id'] = '';
-        // drawerItem['item'] = destinations.find((item) => item.id === drawerItem['id']);
-        break;
-
-      default:
-        break;
-    }
-
-    console.log('drawerItem', drawerItem);
-
-    if (!!drawerItem.item) {
-      setSelectedItem(drawerItem as DrawerBaseItem);
-      markAsSeen(id);
-      markAsDismissed(id);
-    }
-  };
-
-  return (
-    <NotificationNote
-      id={id}
-      type={type}
-      title={title}
-      message={message}
-      action={
-        crdType && target
-          ? {
-              label: 'go to details',
-              onClick,
-            }
-          : undefined
-      }
-    />
-  );
-};
diff --git a/frontend/webapp/styles/styled.tsx b/frontend/webapp/styles/styled.tsx
index 8488ee805..22963b028 100644
--- a/frontend/webapp/styles/styled.tsx
+++ b/frontend/webapp/styles/styled.tsx
@@ -9,7 +9,15 @@ export const HideScroll = styled.div`
   scrollbar-width: none;
 `;
 
-export const Overlay = styled.div<{ hideOverlay?: boolean }>`
+export const CenterThis = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Overlay = styled.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -18,5 +26,14 @@ export const Overlay = styled.div<{ hideOverlay?: boolean }>`
   z-index: 1000;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(1px);
-  opacity: ${({ hideOverlay }) => (hideOverlay ? 0 : 1)};
+`;
+
+// this is to control modal size + scroll
+// note: add-destinations does not use this (yet), because it has a custom sidebar
+export const ModalBody = styled.div`
+  min-width: 640px;
+  height: calc(100vh - 300px);
+  margin: 0 15vw;
+  padding-top: 64px;
+  overflow-y: scroll;
 `;
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index 87481b578..de673f550 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -1,3 +1,5 @@
+import type { NotificationType } from '@/types';
+
 export const SETUP = {
   STEPS: {
     CHOOSE_SOURCE: 'Choose Source',
@@ -94,11 +96,9 @@ export const OVERVIEW = {
   ACTION_DANGER_ZONE_TITLE: 'Delete this action',
   SOURCE_DANGER_ZONE_SUBTITLE:
     'Uninstrument this source, and delete all odigos associated data. You can always re-instrument this source later with odigos.',
-  ACTION_DANGER_ZONE_SUBTITLE:
-    'This action cannot be undone. This will permanently delete the action and all associated data.',
+  ACTION_DANGER_ZONE_SUBTITLE: 'This action cannot be undone. This will permanently delete the action and all associated data.',
   DELETE_MODAL_TITLE: 'Delete this destination',
-  DELETE_MODAL_SUBTITLE:
-    'This action cannot be undone. This will permanently delete the destination and all associated data.',
+  DELETE_MODAL_SUBTITLE: 'This action cannot be undone. This will permanently delete the destination and all associated data.',
   DELETE_BUTTON: 'I want to delete this destination',
   CONFIRM_SOURCE_DELETE: 'I want to delete this source',
   CONFIRM_DELETE_ACTION: 'I want to delete this action',
@@ -110,8 +110,7 @@ export const OVERVIEW = {
     'Actions are a way to modify the OpenTelemetry data recorded by Odigos Sources, before it is exported to your Odigos Destinations.',
   CREATE_INSTRUMENTATION_RULE: 'Create Instrumentation Rule',
   EDIT_INSTRUMENTATION_RULE: 'Edit Instrumentation Rule',
-  INSTRUMENTATION_RULE_DESCRIPTION:
-    'Instrumentation Rules control how telemetry is recorded from your application.',
+  INSTRUMENTATION_RULE_DESCRIPTION: 'Instrumentation Rules control how telemetry is recorded from your application.',
 };
 
 export const ACTION = {
@@ -119,14 +118,23 @@ export const ACTION = {
   CONTACT_US: 'Contact Us',
   LEARN_MORE: 'Learn more',
   LINK_TO_DOCS: 'Link to docs',
+  ENABLE: 'Enable',
   DISABLE: 'Disable',
   RUNNING: 'Running',
   APPLIED: 'Applied',
-  ENABLE: 'Enable',
   DELETE_ALL: 'Delete All',
+  CREATE: 'Create',
+  UPDATE: 'Update',
+  DELETE: 'Delete',
+};
+
+export const FORM_ALERTS = {
+  REQUIRED_FIELDS: 'Required fields are missing!',
 };
 
-export const NOTIFICATION = {
+export const NOTIFICATION: {
+  [key: string]: NotificationType;
+} = {
   ERROR: 'error',
   SUCCESS: 'success',
 };
diff --git a/frontend/webapp/utils/functions/extract-monitors.ts b/frontend/webapp/utils/functions/extract-monitors.ts
deleted file mode 100644
index e552ecfc3..000000000
--- a/frontend/webapp/utils/functions/extract-monitors.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ExportedSignals } from '@/types';
-
-export const extractMonitors = (exportedSignals: ExportedSignals) => {
-  const filtered = Object.keys(exportedSignals).filter((signal) => exportedSignals[signal] === true);
-
-  return filtered;
-};
diff --git a/frontend/webapp/utils/functions/formatters.ts b/frontend/webapp/utils/functions/formatters.ts
index 11e0f4452..ed7c86f81 100644
--- a/frontend/webapp/utils/functions/formatters.ts
+++ b/frontend/webapp/utils/functions/formatters.ts
@@ -1,3 +1,5 @@
+import { ExportedSignals, OVERVIEW_ENTITY_TYPES, WorkloadId } from '@/types';
+
 export const formatBytes = (bytes?: number) => {
   if (!bytes) return '0 KB/s';
 
@@ -7,3 +9,50 @@ export const formatBytes = (bytes?: number) => {
 
   return `${value.toFixed(1)} ${sizes[i]}`;
 };
+
+export const extractMonitors = (exportedSignals: ExportedSignals) => {
+  const filtered = Object.keys(exportedSignals).filter((signal) => exportedSignals[signal] === true);
+
+  return filtered;
+};
+
+export const getIdFromSseTarget = (target: string, type: OVERVIEW_ENTITY_TYPES) => {
+  switch (type) {
+    case OVERVIEW_ENTITY_TYPES.SOURCE: {
+      const id: WorkloadId = {
+        namespace: '',
+        name: '',
+        kind: '',
+      };
+
+      target.split('&').forEach((str) => {
+        const [key, value] = str.split('=');
+        id[key] = value;
+      });
+
+      return id;
+    }
+
+    default:
+      return target as string;
+  }
+};
+
+export const getSseTargetFromId = (id: string | WorkloadId, type: OVERVIEW_ENTITY_TYPES) => {
+  switch (type) {
+    case OVERVIEW_ENTITY_TYPES.SOURCE: {
+      let target = '';
+
+      Object.entries(id as WorkloadId).forEach(([key, value]) => {
+        target += `${key}=${value}&`;
+      });
+
+      target.slice(0, -1);
+
+      return target;
+    }
+
+    default:
+      return id as string;
+  }
+};
diff --git a/frontend/webapp/utils/functions/index.ts b/frontend/webapp/utils/functions/index.ts
index dd67708ea..b8aac660b 100644
--- a/frontend/webapp/utils/functions/index.ts
+++ b/frontend/webapp/utils/functions/index.ts
@@ -1,5 +1,4 @@
 export * from './derive-types';
-export * from './extract-monitors';
 export * from './formatters';
 export * from './get-value-for-range';
 export * from './icons';

From 9f25eb48cb16de565f51da89db8a5dd21fccbfab Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Thu, 7 Nov 2024 15:23:02 +0200
Subject: [PATCH 342/374] [GEN-1668]: add handling for "dirty forms" (#1704)

---
 .../actions/action-drawer-container/index.tsx | 20 +++--
 .../destination-drawer-container/index.tsx    | 20 +++--
 .../rule-drawer-container/index.tsx           | 20 +++--
 .../main/overview/overview-drawer/index.tsx   | 73 +++++++++++--------
 .../sources/source-drawer-container/index.tsx | 13 ++--
 .../reuseable-components/input-list/index.tsx | 36 ++++-----
 .../input-table/index.tsx                     | 20 ++---
 .../key-value-input-list/index.tsx            | 36 ++++-----
 .../monitoring-checkboxes/index.tsx           | 14 +++-
 frontend/webapp/styles/styled.tsx             |  2 +-
 10 files changed, 152 insertions(+), 102 deletions(-)

diff --git a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
index ff4f9068e..ee77d1948 100644
--- a/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/actions/action-drawer-container/index.tsx
@@ -15,6 +15,7 @@ interface Props {}
 const ActionDrawer: React.FC<Props> = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const [isEditing, setIsEditing] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
 
   const { formData, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useActionFormData();
   const { updateAction, deleteAction } = useActionCRUD();
@@ -82,14 +83,23 @@ const ActionDrawer: React.FC<Props> = () => {
       title={(item as ActionDataParsed).spec.actionName}
       imageUri={getActionIcon((item as ActionDataParsed).type)}
       isEdit={isEditing}
-      clickEdit={handleEdit}
-      clickSave={handleSave}
-      clickDelete={handleDelete}
-      clickCancel={handleCancel}
+      isFormDirty={isFormDirty}
+      onEdit={handleEdit}
+      onSave={handleSave}
+      onDelete={handleDelete}
+      onCancel={handleCancel}
     >
       {isEditing && thisAction ? (
         <FormContainer>
-          <ChooseActionBody isUpdate action={thisAction} formData={formData} handleFormChange={handleFormChange} />
+          <ChooseActionBody
+            isUpdate
+            action={thisAction}
+            formData={formData}
+            handleFormChange={(...params) => {
+              setIsFormDirty(true);
+              handleFormChange(...params);
+            }}
+          />
         </FormContainer>
       ) : (
         <CardDetails data={cardData} />
diff --git a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
index c7ef22ef4..a7c27bc38 100644
--- a/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/destinations/destination-drawer-container/index.tsx
@@ -11,6 +11,7 @@ interface Props {}
 const DestinationDrawer: React.FC<Props> = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const [isEditing, setIsEditing] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
 
   const { cardData, dynamicFields, exportedSignals, supportedSignals, destinationType, resetFormData, setDynamicFields, setExportedSignals } =
     useDestinationFormData();
@@ -53,10 +54,11 @@ const DestinationDrawer: React.FC<Props> = () => {
       title={(item as ActualDestination).name}
       imageUri={(item as ActualDestination).destinationType.imageUrl}
       isEdit={isEditing}
-      clickEdit={handleEdit}
-      clickSave={handleSave}
-      clickDelete={handleDelete}
-      clickCancel={handleCancel}
+      isFormDirty={isFormDirty}
+      onEdit={handleEdit}
+      onSave={handleSave}
+      onDelete={handleDelete}
+      onCancel={handleCancel}
     >
       {isEditing ? (
         <FormContainer>
@@ -64,8 +66,14 @@ const DestinationDrawer: React.FC<Props> = () => {
             dynamicFields={dynamicFields}
             exportedSignals={exportedSignals}
             supportedSignals={supportedSignals}
-            handleSignalChange={handleSignalChange}
-            handleDynamicFieldChange={handleDynamicFieldChange}
+            handleSignalChange={(...params) => {
+              setIsFormDirty(true);
+              handleSignalChange(...params);
+            }}
+            handleDynamicFieldChange={(...params) => {
+              setIsFormDirty(true);
+              handleDynamicFieldChange(...params);
+            }}
           />
         </FormContainer>
       ) : (
diff --git a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
index 02a7d4454..6723b8b4a 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/rule-drawer-container/index.tsx
@@ -15,6 +15,7 @@ interface Props {}
 const RuleDrawer: React.FC<Props> = () => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const [isEditing, setIsEditing] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
 
   const { formData, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem } = useInstrumentationRuleFormData();
   const { updateInstrumentationRule, deleteInstrumentationRule } = useInstrumentationRuleCRUD();
@@ -80,14 +81,23 @@ const RuleDrawer: React.FC<Props> = () => {
       title={(item as InstrumentationRuleSpec).ruleName}
       imageUri={getRuleIcon((item as InstrumentationRuleSpec).type)}
       isEdit={isEditing}
-      clickEdit={handleEdit}
-      clickSave={handleSave}
-      clickDelete={handleDelete}
-      clickCancel={handleCancel}
+      isFormDirty={isFormDirty}
+      onEdit={handleEdit}
+      onSave={handleSave}
+      onDelete={handleDelete}
+      onCancel={handleCancel}
     >
       {isEditing && thisRule ? (
         <FormContainer>
-          <ChooseRuleBody isUpdate rule={thisRule} formData={formData} handleFormChange={handleFormChange} />
+          <ChooseRuleBody
+            isUpdate
+            rule={thisRule}
+            formData={formData}
+            handleFormChange={(...params) => {
+              setIsFormDirty(true);
+              handleFormChange(...params);
+            }}
+          />
         </FormContainer>
       ) : (
         <CardDetails data={cardData} />
diff --git a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
index 6e7bc319a..43ddd85ee 100644
--- a/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-drawer/index.tsx
@@ -12,10 +12,11 @@ interface Props {
   title: string;
   imageUri: string;
   isEdit: boolean;
-  clickEdit: (bool?: boolean) => void;
-  clickSave: (newTitle: string) => void;
-  clickDelete: () => void;
-  clickCancel: () => void;
+  isFormDirty: boolean;
+  onEdit: (bool?: boolean) => void;
+  onSave: (newTitle: string) => void;
+  onDelete: () => void;
+  onCancel: () => void;
 }
 
 const DrawerContent = styled.div`
@@ -35,10 +36,11 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({
   title,
   imageUri,
   isEdit,
-  clickEdit,
-  clickSave,
-  clickDelete,
-  clickCancel,
+  isFormDirty,
+  onEdit,
+  onSave,
+  onDelete,
+  onCancel,
 }) => {
   const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
@@ -50,7 +52,7 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({
 
   const closeDrawer = () => {
     setSelectedItem(null);
-    clickEdit(false);
+    onEdit(false);
     setIsDeleteModalOpen(false);
     setIsCancelModalOpen(false);
   };
@@ -60,48 +62,61 @@ const OverviewDrawer: React.FC<Props & PropsWithChildren> = ({
     setIsCancelModalOpen(false);
   };
 
-  const handleCancel = () => setIsCancelModalOpen(true);
-  const handleDelete = () => setIsDeleteModalOpen(true);
+  const handleCancel = () => {
+    titleRef.current?.clearTitle();
+    onCancel();
+    closeWarningModals();
+  };
+
+  const clickCancel = () => {
+    const isTitleDirty = titleRef.current?.getTitle() !== title;
+    if (isFormDirty || isTitleDirty) {
+      setIsCancelModalOpen(true);
+    } else {
+      handleCancel();
+    }
+  };
+
+  const handleDelete = () => {
+    onDelete();
+    closeWarningModals();
+  };
+
+  const clickDelete = () => {
+    setIsDeleteModalOpen(true);
+  };
+
+  const clickSave = () => {
+    onSave(titleRef.current?.getTitle() || '');
+  };
 
   return (
     <>
-      <Drawer isOpen onClose={closeDrawer} width={DRAWER_WIDTH} closeOnEscape={!isDeleteModalOpen && !isCancelModalOpen}>
+      <Drawer isOpen onClose={isEdit ? clickCancel : closeDrawer} width={DRAWER_WIDTH} closeOnEscape={!isDeleteModalOpen && !isCancelModalOpen}>
         <DrawerContent>
           <DrawerHeader
             ref={titleRef}
             title={title}
             imageUri={imageUri}
             isEdit={isEdit}
-            onEdit={() => clickEdit(true)}
-            onClose={isEdit ? handleCancel : closeDrawer}
+            onEdit={() => onEdit(true)}
+            onClose={isEdit ? clickCancel : closeDrawer}
           />
 
           <ContentArea>{children}</ContentArea>
 
-          {isEdit && <DrawerFooter onSave={() => clickSave(titleRef.current?.getTitle() || '')} onCancel={handleCancel} onDelete={handleDelete} />}
+          {isEdit && <DrawerFooter onSave={clickSave} onCancel={clickCancel} onDelete={clickDelete} />}
         </DrawerContent>
       </Drawer>
 
       <DeleteWarning
         isOpen={isDeleteModalOpen}
         name={`${selectedItem?.type}${title ? ` (${title})` : ''}`}
-        onApprove={() => {
-          clickDelete();
-          closeWarningModals();
-        }}
+        onApprove={handleDelete}
         onDeny={closeWarningModals}
       />
 
-      <CancelWarning
-        isOpen={isCancelModalOpen}
-        name='edit mode'
-        onApprove={() => {
-          titleRef.current?.clearTitle();
-          clickCancel();
-          closeWarningModals();
-        }}
-        onDeny={closeWarningModals}
-      />
+      <CancelWarning isOpen={isCancelModalOpen} name='edit mode' onApprove={handleCancel} onDeny={closeWarningModals} />
     </>
   );
 };
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
index f19c48258..c166c45d2 100644
--- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
@@ -7,9 +7,9 @@ import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 
 const SourceDrawer: React.FC = () => {
-  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
-  const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
+  const { selectedItem, setSelectedItem } = useDrawerStore((store) => store);
   const [isEditing, setIsEditing] = useState(false);
+  const [isFormDirty, setIsFormDirty] = useState(false);
 
   const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
 
@@ -89,10 +89,11 @@ const SourceDrawer: React.FC = () => {
       title={(item as K8sActualSource).reportedName}
       imageUri={getMainContainerLanguageLogo(item as K8sActualSource)}
       isEdit={isEditing}
-      clickEdit={handleEdit}
-      clickSave={handleSave}
-      clickDelete={handleDelete}
-      clickCancel={handleCancel}
+      isFormDirty={isFormDirty}
+      onEdit={handleEdit}
+      onSave={handleSave}
+      onDelete={handleDelete}
+      onCancel={handleCancel}
     >
       <CardDetails data={cardData} />
     </OverviewDrawer>
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
index 0032e67a3..df96af71f 100644
--- a/frontend/webapp/reuseable-components/input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -4,7 +4,7 @@ import { Input } from '../input';
 import { Button } from '../button';
 import styled from 'styled-components';
 import { FieldLabel } from '../field-label';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 interface InputListProps {
   initialValues?: string[];
@@ -57,37 +57,37 @@ const ButtonText = styled(Text)`
 const INITIAL = [''];
 
 const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value = INITIAL, onChange, title, tooltip, required }) => {
-  const [inputs, setInputs] = useState<string[]>(value || initialValues);
+  const [rows, setRows] = useState<string[]>(value || initialValues);
 
   useEffect(() => {
-    if (!inputs.length) setInputs(INITIAL);
+    if (!rows.length) setRows(INITIAL);
   }, []);
 
-  const recordedValues = useRef('');
+  // Filter out rows where either key or value is empty
+  const validRows = useMemo(() => rows.filter((str) => !!str.trim()), [rows]);
+  const recordedRows = useRef(JSON.stringify(validRows));
 
   useEffect(() => {
-    // Filter out rows where either key or value is empty
-    const validValues = inputs.filter((val) => val.trim() !== '');
-    const stringified = JSON.stringify(validValues);
+    const stringified = JSON.stringify(validRows);
 
     // Only trigger onChange if valid key-value pairs have changed
-    if (recordedValues.current !== stringified) {
-      recordedValues.current = stringified;
+    if (recordedRows.current !== stringified) {
+      recordedRows.current = stringified;
 
-      if (onChange) onChange(validValues);
+      if (onChange) onChange(validRows);
     }
-  }, [inputs, onChange]);
+  }, [validRows, onChange]);
 
   const handleAddInput = () => {
-    setInputs((prev) => [...prev, '']);
+    setRows((prev) => [...prev, '']);
   };
 
   const handleDeleteInput = (idx: number) => {
-    setInputs((prev) => prev.filter((_, i) => i !== idx));
+    setRows((prev) => prev.filter((_, i) => i !== idx));
   };
 
   const handleInputChange = (val: string, idx: number) => {
-    setInputs((prev) => {
+    setRows((prev) => {
       const payload = [...prev];
       payload[idx] = val;
       return payload;
@@ -95,16 +95,16 @@ const InputList: React.FC<InputListProps> = ({ initialValues = INITIAL, value =
   };
 
   // Check if any input field is empty
-  const isAddButtonDisabled = inputs.some((input) => input.trim() === '');
-  const isDelButtonDisabled = inputs.length <= 1;
+  const isAddButtonDisabled = rows.some((input) => input.trim() === '');
+  const isDelButtonDisabled = rows.length <= 1;
 
   return (
     <Container>
       <FieldLabel title={title} required={required} tooltip={tooltip} />
 
-      {inputs.map((val, idx) => (
+      {rows.map((val, idx) => (
         <InputRow key={`input-list-${idx}`}>
-          <Input value={val} onChange={(e) => handleInputChange(e.target.value, idx)} autoFocus={inputs.length > 1 && idx === inputs.length - 1} />
+          <Input value={val} onChange={(e) => handleInputChange(e.target.value, idx)} autoFocus={rows.length > 1 && idx === rows.length - 1} />
           <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteInput(idx)}>
             <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>
diff --git a/frontend/webapp/reuseable-components/input-table/index.tsx b/frontend/webapp/reuseable-components/input-table/index.tsx
index e71ebea6a..7c178f0ce 100644
--- a/frontend/webapp/reuseable-components/input-table/index.tsx
+++ b/frontend/webapp/reuseable-components/input-table/index.tsx
@@ -4,7 +4,7 @@ import { Input } from '../input';
 import { Button } from '../button';
 import styled from 'styled-components';
 import { FieldLabel } from '../field-label';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 
 interface Props {
   columns: {
@@ -65,20 +65,20 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
     if (!rows.length) setRows([{ ...init }]);
   }, []);
 
-  const recordedPairs = useRef('');
+  // Filter out rows where either key or value is empty
+  const validRows = useMemo(() => rows.filter((row) => !Object.values(row).filter((val) => !val).length), [rows]);
+  const recordedRows = useRef(JSON.stringify(validRows));
 
   useEffect(() => {
-    // Filter out rows where any values are empty
-    const validKeyValuePairs = rows.filter((row) => !Object.values(row).filter((val) => !val).length);
-    const stringified = JSON.stringify(validKeyValuePairs);
+    const stringified = JSON.stringify(validRows);
 
-    // Only trigger onChange if valid pairs have changed
-    if (recordedPairs.current !== stringified) {
-      recordedPairs.current = stringified;
+    // Only trigger onChange if valid key-value pairs have changed
+    if (recordedRows.current !== stringified) {
+      recordedRows.current = stringified;
 
-      if (onChange) onChange(validKeyValuePairs);
+      if (onChange) onChange(validRows);
     }
-  }, [rows, onChange]);
+  }, [validRows, onChange]);
 
   const handleAddRow = () => {
     setRows((prev) => {
diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
index 2ed812ce7..c0689f9d3 100644
--- a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
+++ b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -4,7 +4,7 @@ import { Input } from '../input';
 import { Button } from '../button';
 import styled from 'styled-components';
 import { FieldLabel } from '../field-label';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 
 interface KeyValueInputsListProps {
   initialKeyValuePairs?: { key: string; value: string }[];
@@ -65,29 +65,29 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   tooltip,
   required,
 }) => {
-  const [keyValuePairs, setKeyValuePairs] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs);
+  const [rows, setRows] = useState<{ key: string; value: string }[]>(value || initialKeyValuePairs);
 
   useEffect(() => {
-    if (!keyValuePairs.length) setKeyValuePairs(INITIAL);
+    if (!rows.length) setRows(INITIAL);
   }, []);
 
-  const recordedPairs = useRef('');
+  // Filter out rows where either key or value is empty
+  const validRows = useMemo(() => rows.filter(({ key, value }) => !!key.trim() && !!value.trim()), [rows]);
+  const recordedRows = useRef(JSON.stringify(validRows));
 
   useEffect(() => {
-    // Filter out rows where either key or value is empty
-    const validKeyValuePairs = keyValuePairs.filter((pair) => pair.key.trim() !== '' && pair.value.trim() !== '');
-    const stringified = JSON.stringify(validKeyValuePairs);
+    const stringified = JSON.stringify(validRows);
 
     // Only trigger onChange if valid key-value pairs have changed
-    if (recordedPairs.current !== stringified) {
-      recordedPairs.current = stringified;
+    if (recordedRows.current !== stringified) {
+      recordedRows.current = stringified;
 
-      if (onChange) onChange(validKeyValuePairs);
+      if (onChange) onChange(validRows);
     }
-  }, [keyValuePairs, onChange]);
+  }, [validRows, onChange]);
 
   const handleAddRow = () => {
-    setKeyValuePairs((prev) => {
+    setRows((prev) => {
       const payload = [...prev];
       payload.push({ key: '', value: '' });
       return payload;
@@ -95,11 +95,11 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   };
 
   const handleDeleteRow = (idx: number) => {
-    setKeyValuePairs((prev) => prev.filter((_, i) => i !== idx));
+    setRows((prev) => prev.filter((_, i) => i !== idx));
   };
 
   const handleChange = (key: 'key' | 'value', val: string, idx: number) => {
-    setKeyValuePairs((prev) => {
+    setRows((prev) => {
       const payload = [...prev];
       payload[idx][key] = val;
       return payload;
@@ -107,20 +107,20 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({
   };
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = keyValuePairs.some((pair) => pair.key.trim() === '' || pair.value.trim() === '');
-  const isDelButtonDisabled = keyValuePairs.length <= 1;
+  const isAddButtonDisabled = rows.some((pair) => pair.key.trim() === '' || pair.value.trim() === '');
+  const isDelButtonDisabled = rows.length <= 1;
 
   return (
     <Container>
       <FieldLabel title={title} required={required} tooltip={tooltip} />
 
-      {keyValuePairs.map((pair, idx) => (
+      {rows.map((pair, idx) => (
         <Row key={`key-value-input-list-${idx}`}>
           <Input
             placeholder='Define attribute'
             value={pair.key}
             onChange={(e) => handleChange('key', e.target.value, idx)}
-            autoFocus={keyValuePairs.length > 1 && idx === keyValuePairs.length - 1}
+            autoFocus={rows.length > 1 && idx === rows.length - 1}
           />
           <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
           <Input placeholder='Define value' value={pair.value} onChange={(e) => handleChange('value', e.target.value, idx)} />
diff --git a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
index 0bb8c52f6..644b347d4 100644
--- a/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
+++ b/frontend/webapp/reuseable-components/monitoring-checkboxes/index.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Checkbox } from '../checkbox';
 import { FieldLabel } from '../field-label';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { MONITORING_OPTIONS, SignalLowercase, SignalUppercase } from '@/utils';
 
 interface MonitoringCheckboxesProps {
@@ -28,7 +28,8 @@ const isSelected = (type: SignalLowercase, selectedSignals: MonitoringCheckboxes
 };
 
 const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical, allowedSignals, selectedSignals, setSelectedSignals }) => {
-  const [isLastSelection, setIsLastSelection] = useState(false);
+  const [isLastSelection, setIsLastSelection] = useState(selectedSignals.length === 1);
+  const recordedRows = useRef(JSON.stringify(selectedSignals));
 
   useEffect(() => {
     const payload: SignalUppercase[] = [];
@@ -39,8 +40,13 @@ const MonitoringCheckboxes: React.FC<MonitoringCheckboxesProps> = ({ isVertical,
       }
     });
 
-    setSelectedSignals(payload);
-    setIsLastSelection(payload.length === 1);
+    const stringified = JSON.stringify(payload);
+
+    if (recordedRows.current !== stringified) {
+      recordedRows.current = stringified;
+      setSelectedSignals(payload);
+      setIsLastSelection(payload.length === 1);
+    }
     // eslint-disable-next-line
   }, [allowedSignals]);
 
diff --git a/frontend/webapp/styles/styled.tsx b/frontend/webapp/styles/styled.tsx
index 22963b028..1e6f1246d 100644
--- a/frontend/webapp/styles/styled.tsx
+++ b/frontend/webapp/styles/styled.tsx
@@ -31,7 +31,7 @@ export const Overlay = styled.div`
 // this is to control modal size + scroll
 // note: add-destinations does not use this (yet), because it has a custom sidebar
 export const ModalBody = styled.div`
-  min-width: 640px;
+  width: 640px;
   height: calc(100vh - 300px);
   margin: 0 15vw;
   padding-top: 64px;

From f596073b98d05f3410c97058290c889ac6634f63 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 10 Nov 2024 09:26:30 +0200
Subject: [PATCH 343/374] [GEN-1665]: formatting with prettier instead of
 eslint (#1705)

---
 frontend/webapp/.eslintrc.json | 13 +------------
 frontend/webapp/.prettierrc    | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 frontend/webapp/.prettierrc

diff --git a/frontend/webapp/.eslintrc.json b/frontend/webapp/.eslintrc.json
index 437e574eb..bffb357a7 100644
--- a/frontend/webapp/.eslintrc.json
+++ b/frontend/webapp/.eslintrc.json
@@ -1,14 +1,3 @@
 {
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "semi": ["error", "always"],
-    "quotes": [
-      "error",
-      "single",
-      {
-        "avoidEscape": true,
-        "allowTemplateLiterals": true
-      }
-    ]
-  }
+  "extends": "next/core-web-vitals"
 }
diff --git a/frontend/webapp/.prettierrc b/frontend/webapp/.prettierrc
new file mode 100644
index 000000000..4ee1eed50
--- /dev/null
+++ b/frontend/webapp/.prettierrc
@@ -0,0 +1,14 @@
+{
+  "tabWidth": 2,
+  "printWidth": 200,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "parser": "typescript"
+}
+

From b3b5007c20efc052003f8f3482c66f49fd9067ad Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 10 Nov 2024 09:26:38 +0200
Subject: [PATCH 344/374] [GEN-1629]: boolean store (isPolling) (#1706)

---
 .../components/overview/add-entity/index.tsx  |  7 ++--
 .../useInstrumentationRuleCRUD.ts             |  3 +-
 .../webapp/hooks/sources/useActualSources.ts  | 32 ++++++-------------
 frontend/webapp/store/useBooleanStore.ts      | 11 +++++++
 4 files changed, 26 insertions(+), 27 deletions(-)
 create mode 100644 frontend/webapp/store/useBooleanStore.ts

diff --git a/frontend/webapp/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx
index 1e175e778..7f85ff260 100644
--- a/frontend/webapp/components/overview/add-entity/index.tsx
+++ b/frontend/webapp/components/overview/add-entity/index.tsx
@@ -1,9 +1,10 @@
 import Image from 'next/image';
 import theme from '@/styles/theme';
 import { useModalStore } from '@/store';
+import { useOnClickOutside } from '@/hooks';
 import React, { useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useActualSources, useOnClickOutside } from '@/hooks';
+import { useBooleanStore } from '@/store/useBooleanStore';
 import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
 
@@ -71,12 +72,12 @@ interface AddEntityButtonDropdownProps {
 }
 
 const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
+  const { isPolling } = useBooleanStore();
   const { setCurrentModal } = useModalStore();
+
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const { isPolling } = useActualSources();
-
   useOnClickOutside(dropdownRef, () => setIsDropdownOpen(false));
 
   const handleToggle = () => {
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
index debdbccf7..aac125189 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
@@ -65,8 +65,7 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
   return {
     loading: cState.loading || uState.loading || dState.loading,
     createInstrumentationRule: (instrumentationRule: InstrumentationRuleInput) => createInstrumentationRule({ variables: { instrumentationRule } }),
-    updateInstrumentationRule: (ruleId: string, instrumentationRule: InstrumentationRuleInput) =>
-      updateInstrumentationRule({ variables: { ruleId, instrumentationRule } }),
+    updateInstrumentationRule: (ruleId: string, instrumentationRule: InstrumentationRuleInput) => updateInstrumentationRule({ variables: { ruleId, instrumentationRule } }),
     deleteInstrumentationRule: (ruleId: string) => deleteInstrumentationRule({ variables: { ruleId } }),
   };
 };
diff --git a/frontend/webapp/hooks/sources/useActualSources.ts b/frontend/webapp/hooks/sources/useActualSources.ts
index 1913fafee..ed3b59c09 100644
--- a/frontend/webapp/hooks/sources/useActualSources.ts
+++ b/frontend/webapp/hooks/sources/useActualSources.ts
@@ -1,24 +1,21 @@
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 import { usePersistSource } from '../sources';
 import { useNamespace } from '../compute-platform';
 import { useUpdateSource } from './useUpdateSource';
 import { useComputePlatform } from '../compute-platform';
-import {
-  PatchSourceRequestInput,
-  PersistSourcesArray,
-  WorkloadId,
-} from '@/types';
+import { useBooleanStore } from '@/store/useBooleanStore';
+import { PatchSourceRequestInput, PersistSourcesArray, WorkloadId } from '@/types';
 
 export function useActualSources() {
   const { data, refetch } = useComputePlatform();
+  const { isPolling, togglePolling } = useBooleanStore();
   const { persistSource, error: sourceError } = usePersistSource();
   const { updateSource, error: updateError } = useUpdateSource();
 
   const { persistNamespace } = useNamespace(undefined);
-  const [isPolling, setIsPolling] = useState(false);
 
   const startPolling = useCallback(async () => {
-    setIsPolling(true);
+    togglePolling(true);
     const maxRetries = 5;
     const retryInterval = 1000; // Poll every second
     let retries = 0;
@@ -29,13 +26,10 @@ export function useActualSources() {
       retries++;
     }
 
-    setIsPolling(false);
-  }, [refetch]);
+    togglePolling(false);
+  }, [refetch, togglePolling]);
 
-  const createSourcesForNamespace = async (
-    namespaceName: string,
-    sources: PersistSourcesArray[]
-  ) => {
+  const createSourcesForNamespace = async (namespaceName: string, sources: PersistSourcesArray[]) => {
     await persistSource(namespaceName, sources);
 
     startPolling();
@@ -44,10 +38,7 @@ export function useActualSources() {
     }
   };
 
-  const deleteSourcesForNamespace = async (
-    namespaceName: string,
-    sources: PersistSourcesArray[]
-  ) => {
+  const deleteSourcesForNamespace = async (namespaceName: string, sources: PersistSourcesArray[]) => {
     await persistSource(namespaceName, sources);
 
     startPolling();
@@ -56,10 +47,7 @@ export function useActualSources() {
     }
   };
 
-  const updateActualSource = async (
-    sourceId: WorkloadId,
-    patchRequest: PatchSourceRequestInput
-  ) => {
+  const updateActualSource = async (sourceId: WorkloadId, patchRequest: PatchSourceRequestInput) => {
     try {
       await updateSource(sourceId, patchRequest);
       refetch();
diff --git a/frontend/webapp/store/useBooleanStore.ts b/frontend/webapp/store/useBooleanStore.ts
new file mode 100644
index 000000000..0a83796f9
--- /dev/null
+++ b/frontend/webapp/store/useBooleanStore.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface StoreState {
+  isPolling: boolean;
+  togglePolling: (bool?: boolean) => void;
+}
+
+export const useBooleanStore = create<StoreState>((set) => ({
+  isPolling: false,
+  togglePolling: (bool) => set(({ isPolling }) => ({ isPolling: bool ?? !isPolling })),
+}));

From 0bbd34b1d8d75c47fdc9df037845c69b5b114153 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 10 Nov 2024 12:09:18 +0200
Subject: [PATCH 345/374] [GEN-1679]: added useSourceCRUD hook (#1720)

---
 .../components/notification/toast-list.tsx    |  19 ++--
 .../components/overview/add-entity/index.tsx  |   3 +-
 .../overview/overview-data-flow/index.tsx     |  21 +---
 .../choose-source-modal/index.tsx             |  36 ++----
 .../sources/source-drawer-container/index.tsx |  38 +------
 frontend/webapp/graphql/mutations/source.ts   |  15 +--
 frontend/webapp/hooks/actions/index.ts        |   1 -
 .../webapp/hooks/actions/useActionCRUD.ts     |  13 ++-
 .../webapp/hooks/actions/useGetActions.ts     |  20 ----
 .../compute-platform/useComputePlatform.ts    |  27 ++++-
 .../hooks/compute-platform/useNamespace.ts    |  47 ++++----
 frontend/webapp/hooks/destinations/index.ts   |   1 -
 .../destinations/useActualDestinations.ts     |  32 ------
 .../hooks/destinations/useDestinationCRUD.ts  |   4 +-
 .../hooks/instrumentation-rules/index.ts      |   1 -
 .../useGetInstrumentationRules.ts             |  18 ---
 .../useInstrumentationRuleCRUD.ts             |   9 +-
 frontend/webapp/hooks/setup/useConnectEnv.ts  |  38 +------
 frontend/webapp/hooks/sources/index.ts        |   3 +-
 .../webapp/hooks/sources/useActualSources.ts  |  74 ------------
 .../webapp/hooks/sources/usePersistSource.ts  |  46 --------
 .../webapp/hooks/sources/useSourceCRUD.ts     | 107 ++++++++++++++++++
 .../webapp/hooks/sources/useUpdateSource.ts   |  35 ------
 frontend/webapp/store/index.ts                |   1 +
 24 files changed, 208 insertions(+), 401 deletions(-)
 delete mode 100644 frontend/webapp/hooks/actions/useGetActions.ts
 delete mode 100644 frontend/webapp/hooks/destinations/useActualDestinations.ts
 delete mode 100644 frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
 delete mode 100644 frontend/webapp/hooks/sources/useActualSources.ts
 delete mode 100644 frontend/webapp/hooks/sources/usePersistSource.ts
 create mode 100644 frontend/webapp/hooks/sources/useSourceCRUD.ts
 delete mode 100644 frontend/webapp/hooks/sources/useUpdateSource.ts

diff --git a/frontend/webapp/components/notification/toast-list.tsx b/frontend/webapp/components/notification/toast-list.tsx
index 8a6a3dc54..1c71d4864 100644
--- a/frontend/webapp/components/notification/toast-list.tsx
+++ b/frontend/webapp/components/notification/toast-list.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
+import { getIdFromSseTarget } from '@/utils';
 import { NotificationNote } from '@/reuseable-components';
 import { Notification, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { DrawerBaseItem, useDrawerStore, useNotificationStore } from '@/store';
-import { useActualDestination, useActualSources, useGetActions, useGetInstrumentationRules } from '@/hooks';
-import { getIdFromSseTarget } from '@/utils';
+import { useActionCRUD, useDestinationCRUD, useInstrumentationRuleCRUD, useSourceCRUD } from '@/hooks';
 
 const Container = styled.div`
   position: fixed;
@@ -35,10 +35,10 @@ export const ToastList: React.FC = () => {
 const Toast: React.FC<Notification> = ({ id, type, title, message, crdType, target }) => {
   const { markAsDismissed, markAsSeen } = useNotificationStore();
 
-  const { actions } = useGetActions();
-  const { sources } = useActualSources();
-  const { destinations } = useActualDestination();
-  const { instrumentationRules } = useGetInstrumentationRules();
+  const { sources } = useSourceCRUD();
+  const { actions } = useActionCRUD();
+  const { destinations } = useDestinationCRUD();
+  const { instrumentationRules } = useInstrumentationRuleCRUD();
   const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
   const onClick = () => {
@@ -57,12 +57,7 @@ const Toast: React.FC<Notification> = ({ id, type, title, message, crdType, targ
         case 'InstrumentationInstance':
           drawerItem['type'] = OVERVIEW_ENTITY_TYPES.SOURCE;
           drawerItem['id'] = getIdFromSseTarget(target, OVERVIEW_ENTITY_TYPES.SOURCE);
-          drawerItem['item'] = sources.find(
-            (item) =>
-              item.kind === drawerItem['id']?.['kind'] &&
-              item.name === drawerItem['id']?.['name'] &&
-              item.namespace === drawerItem['id']?.['namespace']
-          );
+          drawerItem['item'] = sources.find((item) => item.kind === drawerItem['id']?.['kind'] && item.name === drawerItem['id']?.['name'] && item.namespace === drawerItem['id']?.['namespace']);
           break;
 
         case OVERVIEW_ENTITY_TYPES.ACTION:
diff --git a/frontend/webapp/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx
index 7f85ff260..0a0f71f2e 100644
--- a/frontend/webapp/components/overview/add-entity/index.tsx
+++ b/frontend/webapp/components/overview/add-entity/index.tsx
@@ -1,10 +1,9 @@
 import Image from 'next/image';
 import theme from '@/styles/theme';
-import { useModalStore } from '@/store';
 import { useOnClickOutside } from '@/hooks';
 import React, { useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useBooleanStore } from '@/store/useBooleanStore';
+import { useBooleanStore, useModalStore } from '@/store';
 import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
 
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index b5f7285e3..ef747659a 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -4,17 +4,8 @@ import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 import { ToastList } from '@/components';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
-import { buildNodesAndEdges, NodeBaseDataFlow, } from '@/reuseable-components';
-import {
-  useMetrics,
-  useGetActions,
-  useActualSources,
-  useContainerWidth,
-  useActualDestination,
-  useNodeDataFlowHandlers,
-  useGetInstrumentationRules,
-} from '@/hooks';
-
+import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
+import { useMetrics, useContainerWidth, useNodeDataFlowHandlers, useSourceCRUD, useDestinationCRUD, useInstrumentationRuleCRUD, useActionCRUD } from '@/hooks';
 
 const AllDrawers = dynamic(() => import('../all-drawers'), {
   ssr: false,
@@ -35,10 +26,10 @@ const NODE_HEIGHT = 80;
 
 export function OverviewDataFlowContainer() {
   const { metrics } = useMetrics();
-  const { actions } = useGetActions();
-  const { sources } = useActualSources();
-  const { destinations } = useActualDestination();
-  const { instrumentationRules } = useGetInstrumentationRules();
+  const { sources } = useSourceCRUD();
+  const { actions } = useActionCRUD();
+  const { destinations } = useDestinationCRUD();
+  const { instrumentationRules } = useInstrumentationRuleCRUD();
   const { containerRef, containerWidth } = useContainerWidth();
   const { handleNodeClick } = useNodeDataFlowHandlers({
     rules: instrumentationRules,
diff --git a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
index 4e96a1097..b55e15bd5 100644
--- a/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
+++ b/frontend/webapp/containers/main/sources/choose-sources/choose-source-modal/index.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState } from 'react';
+import type { K8sActualSource } from '@/types';
 import { ChooseSourcesBody } from '../choose-sources-body';
 import { Modal, NavigationButtons } from '@/reuseable-components';
-import { K8sActualSource, PersistNamespaceItemInput } from '@/types';
-import { useActualSources, useConnectSourcesMenuState } from '@/hooks';
+import { useConnectSourcesMenuState, useSourceCRUD } from '@/hooks';
 
 interface AddSourceModalProps {
   isOpen: boolean;
@@ -12,33 +12,11 @@ interface AddSourceModalProps {
 export const AddSourceModal: React.FC<AddSourceModalProps> = ({ isOpen, onClose }) => {
   const [sourcesList, setSourcesList] = useState<K8sActualSource[]>([]);
   const { stateMenu, stateHandlers } = useConnectSourcesMenuState({ sourcesList });
-  const { createSourcesForNamespace, persistNamespaceItems } = useActualSources();
+  const { createSources } = useSourceCRUD({ onSuccess: onClose });
 
-  const handleNextClick = useCallback(async () => {
-    try {
-      const namespaceItems: PersistNamespaceItemInput[] = Object.entries(stateMenu.futureAppsCheckbox).map(([namespaceName, futureSelected]) => ({
-        name: namespaceName,
-        futureSelected,
-      }));
-
-      await persistNamespaceItems(namespaceItems);
-
-      await Promise.all(
-        Object.entries(stateMenu.selectedItems).map(async ([namespaceName, sources]) => {
-          const formattedSources = sources.map((source) => ({
-            kind: source.kind,
-            name: source.name,
-            selected: true,
-          }));
-          await createSourcesForNamespace(namespaceName, formattedSources);
-        })
-      );
-
-      onClose();
-    } catch (error) {
-      console.error('Error during handleNextClick:', error);
-    }
-  }, [stateMenu, onClose, createSourcesForNamespace, persistNamespaceItems]);
+  const handleNextClick = async () => {
+    await createSources(stateMenu.selectedItems, stateMenu.futureAppsCheckbox);
+  };
 
   return (
     <Modal
diff --git a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
index c166c45d2..e108998b4 100644
--- a/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
+++ b/frontend/webapp/containers/main/sources/source-drawer-container/index.tsx
@@ -1,17 +1,17 @@
 import React, { useMemo, useState } from 'react';
 import { useDrawerStore } from '@/store';
-import { useActualSources } from '@/hooks';
+import { useSourceCRUD } from '@/hooks';
 import { CardDetails } from '@/components';
 import OverviewDrawer from '../../overview/overview-drawer';
 import { K8sActualSource, PatchSourceRequestInput, WorkloadId } from '@/types';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 
 const SourceDrawer: React.FC = () => {
-  const { selectedItem, setSelectedItem } = useDrawerStore((store) => store);
+  const selectedItem = useDrawerStore(({ selectedItem }) => selectedItem);
   const [isEditing, setIsEditing] = useState(false);
   const [isFormDirty, setIsFormDirty] = useState(false);
 
-  const { updateActualSource, deleteSourcesForNamespace } = useActualSources();
+  const { deleteSources, updateSource } = useSourceCRUD();
 
   const cardData = useMemo(() => {
     if (!selectedItem) return [];
@@ -47,41 +47,15 @@ const SourceDrawer: React.FC = () => {
   };
 
   const handleDelete = async () => {
-    const { namespace, name, kind } = item as K8sActualSource;
+    const { namespace } = item as K8sActualSource;
 
-    try {
-      await deleteSourcesForNamespace(namespace, [
-        {
-          kind,
-          name,
-          selected: false,
-        },
-      ]);
-      setSelectedItem(null);
-    } catch (error) {
-      console.error('Error deleting source:', error);
-    }
+    await deleteSources({ [namespace]: [item as K8sActualSource] });
   };
 
   const handleSave = async (newTitle: string) => {
     const { namespace, name, kind } = item as K8sActualSource;
 
-    const sourceId: WorkloadId = {
-      namespace,
-      kind,
-      name,
-    };
-
-    const patchRequest: PatchSourceRequestInput = {
-      reportedName: newTitle,
-    };
-
-    try {
-      await updateActualSource(sourceId, patchRequest);
-      setSelectedItem(null);
-    } catch (error) {
-      console.error('Error updating source:', error);
-    }
+    await updateSource({ namespace, kind, name }, { reportedName: newTitle });
   };
 
   return (
diff --git a/frontend/webapp/graphql/mutations/source.ts b/frontend/webapp/graphql/mutations/source.ts
index 647258dd6..b2e199517 100644
--- a/frontend/webapp/graphql/mutations/source.ts
+++ b/frontend/webapp/graphql/mutations/source.ts
@@ -1,22 +1,13 @@
 import { gql } from '@apollo/client';
 
 export const PERSIST_SOURCE = gql`
-  mutation PersistSources(
-    $namespace: String!
-    $sources: [PersistNamespaceSourceInput!]!
-  ) {
+  mutation PersistSources($namespace: String!, $sources: [PersistNamespaceSourceInput!]!) {
     persistK8sSources(namespace: $namespace, sources: $sources)
   }
 `;
 
 export const UPDATE_K8S_ACTUAL_SOURCE = gql`
-  mutation UpdateK8sActualSource(
-    $sourceId: K8sSourceId!
-    $patchSourceRequest: PatchSourceRequestInput!
-  ) {
-    updateK8sActualSource(
-      sourceId: $sourceId
-      patchSourceRequest: $patchSourceRequest
-    )
+  mutation UpdateK8sActualSource($sourceId: K8sSourceId!, $patchSourceRequest: PatchSourceRequestInput!) {
+    updateK8sActualSource(sourceId: $sourceId, patchSourceRequest: $patchSourceRequest)
   }
 `;
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 8d94dd9e0..691b55c67 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,5 +1,4 @@
 export * from './useActionFormData';
 export * from './useActions';
 export * from './useActionState';
-export * from './useGetActions';
 export * from './useActionCRUD';
diff --git a/frontend/webapp/hooks/actions/useActionCRUD.ts b/frontend/webapp/hooks/actions/useActionCRUD.ts
index 0b95f506f..d28dd7d75 100644
--- a/frontend/webapp/hooks/actions/useActionCRUD.ts
+++ b/frontend/webapp/hooks/actions/useActionCRUD.ts
@@ -2,9 +2,9 @@ import { useDrawerStore } from '@/store';
 import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
 import { useComputePlatform } from '../compute-platform';
-import { ACTION, getSseTargetFromId, NOTIFICATION } from '@/utils';
+import { ACTION, getSseTargetFromId, NOTIFICATION, safeJsonParse } from '@/utils';
 import { CREATE_ACTION, DELETE_ACTION, UPDATE_ACTION } from '@/graphql/mutations';
-import { OVERVIEW_ENTITY_TYPES, type ActionInput, type ActionsType, type NotificationType } from '@/types';
+import { type ActionItem, OVERVIEW_ENTITY_TYPES, type ActionInput, type ActionsType, type NotificationType } from '@/types';
 
 interface UseActionCrudParams {
   onSuccess?: () => void;
@@ -13,7 +13,7 @@ interface UseActionCrudParams {
 
 export const useActionCRUD = (params?: UseActionCrudParams) => {
   const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
-  const { refetch } = useComputePlatform();
+  const { data, refetch } = useComputePlatform();
   const notify = useNotify();
 
   const notifyUser = (type: NotificationType, title: string, message: string, id?: string) => {
@@ -64,6 +64,13 @@ export const useActionCRUD = (params?: UseActionCrudParams) => {
 
   return {
     loading: cState.loading || uState.loading || dState.loading,
+    actions:
+      data?.computePlatform?.actions?.map((item) => {
+        const parsedSpec = typeof item.spec === 'string' ? safeJsonParse(item.spec, {} as ActionItem) : item.spec;
+
+        return { ...item, spec: parsedSpec };
+      }) || [],
+
     createAction: (action: ActionInput) => createAction({ variables: { action } }),
     updateAction: (id: string, action: ActionInput) => updateAction({ variables: { id, action } }),
     deleteAction: (id: string, actionType: ActionsType) => deleteAction({ variables: { id, actionType } }),
diff --git a/frontend/webapp/hooks/actions/useGetActions.ts b/frontend/webapp/hooks/actions/useGetActions.ts
deleted file mode 100644
index 302e483de..000000000
--- a/frontend/webapp/hooks/actions/useGetActions.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { safeJsonParse } from '@/utils';
-import type { ActionItem } from '@/types';
-import { useComputePlatform } from '../compute-platform';
-
-// Define the hook
-export const useGetActions = () => {
-  const { data } = useComputePlatform();
-
-  return {
-    actions:
-      data?.computePlatform?.actions?.map((item) => {
-        const parsedSpec = typeof item.spec === 'string' ? safeJsonParse(item.spec, {} as ActionItem) : item.spec;
-
-        return {
-          ...item,
-          spec: parsedSpec,
-        };
-      }) || [],
-  };
-};
diff --git a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
index 1ebcc42b0..7d2e2a26a 100644
--- a/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
+++ b/frontend/webapp/hooks/compute-platform/useComputePlatform.ts
@@ -1,5 +1,7 @@
-import { ComputePlatform } from '@/types';
+import { useCallback } from 'react';
 import { useQuery } from '@apollo/client';
+import { useBooleanStore } from '@/store';
+import type { ComputePlatform } from '@/types';
 import { GET_COMPUTE_PLATFORM } from '@/graphql';
 
 type UseComputePlatformHook = {
@@ -7,11 +9,28 @@ type UseComputePlatformHook = {
   loading: boolean;
   error?: Error;
   refetch: () => void;
+  startPolling: () => Promise<void>;
 };
 
 export const useComputePlatform = (): UseComputePlatformHook => {
-  const { data, loading, error, refetch } =
-    useQuery<ComputePlatform>(GET_COMPUTE_PLATFORM);
+  const { data, loading, error, refetch } = useQuery<ComputePlatform>(GET_COMPUTE_PLATFORM);
+  const { togglePolling } = useBooleanStore();
 
-  return { data, loading, error, refetch };
+  const startPolling = useCallback(async () => {
+    togglePolling(true);
+
+    const maxRetries = 5;
+    const retryInterval = 1000; // Poll every second
+    let retries = 0;
+
+    while (retries < maxRetries) {
+      await new Promise((resolve) => setTimeout(resolve, retryInterval));
+      refetch();
+      retries++;
+    }
+
+    togglePolling(false);
+  }, [refetch, togglePolling]);
+
+  return { data, loading, error, refetch, startPolling };
 };
diff --git a/frontend/webapp/hooks/compute-platform/useNamespace.ts b/frontend/webapp/hooks/compute-platform/useNamespace.ts
index ef83e1b97..784af8c5d 100644
--- a/frontend/webapp/hooks/compute-platform/useNamespace.ts
+++ b/frontend/webapp/hooks/compute-platform/useNamespace.ts
@@ -1,42 +1,33 @@
 import { useMutation, useQuery } from '@apollo/client';
 import { GET_NAMESPACES, PERSIST_NAMESPACE } from '@/graphql';
-import {
-  ComputePlatform,
-  K8sActualNamespace,
-  PersistNamespaceItemInput,
-} from '@/types';
+import { ComputePlatform, PersistNamespaceItemInput } from '@/types';
+import { useNotify } from '../useNotify';
+import { NOTIFICATION } from '@/utils';
 
-type UseNamespaceHook = {
-  data?: K8sActualNamespace;
-  loading: boolean;
-  error?: Error;
-  persistNamespace: (namespace: PersistNamespaceItemInput) => Promise<void>;
-};
+export const useNamespace = (namespaceName?: string, instrumentationLabeled = null as boolean | null) => {
+  const notify = useNotify();
+
+  const handleError = (title: string, message: string) => {
+    notify({ type: NOTIFICATION.ERROR, title, message });
+  };
+
+  const handleComplete = (title: string, message: string) => {
+    notify({ type: NOTIFICATION.SUCCESS, title, message });
+  };
 
-export const useNamespace = (
-  namespaceName: string | undefined,
-  instrumentationLabeled = null as boolean | null
-): UseNamespaceHook => {
   const { data, loading, error } = useQuery<ComputePlatform>(GET_NAMESPACES, {
     skip: !namespaceName,
-    variables: { namespaceName, instrumentationLabeled },
     fetchPolicy: 'cache-first',
+    variables: { namespaceName, instrumentationLabeled },
   });
 
-  const [persistNamespaceMutation] = useMutation(PERSIST_NAMESPACE);
-
-  const persistNamespace = async (namespace: PersistNamespaceItemInput) => {
-    try {
-      await persistNamespaceMutation({
-        variables: { namespace },
-      });
-    } catch (e) {
-      console.error('Error persisting namespace:', e);
-    }
-  };
+  const [persistNamespaceMutation] = useMutation(PERSIST_NAMESPACE, {
+    onError: (error) => handleError('', error.message),
+    onCompleted: (res, req) => {},
+  });
 
   return {
-    persistNamespace,
+    persistNamespace: async (namespace: PersistNamespaceItemInput) => await persistNamespaceMutation({ variables: { namespace } }),
     data: data?.computePlatform.k8sActualNamespace,
     loading,
     error,
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index 4677f854d..97df326cb 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -2,7 +2,6 @@ export * from './useDestinations';
 export * from './useTestConnection';
 export * from './useConnectDestinationForm';
 export * from './usePotentialDestinations';
-export * from './useActualDestinations';
 export * from './useDestinationCRUD';
 export * from './useDestinationFormData';
 export * from './useEditDestinationFormHandlers';
diff --git a/frontend/webapp/hooks/destinations/useActualDestinations.ts b/frontend/webapp/hooks/destinations/useActualDestinations.ts
deleted file mode 100644
index 0cdf41d05..000000000
--- a/frontend/webapp/hooks/destinations/useActualDestinations.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useComputePlatform } from '../compute-platform';
-import { ActualDestination } from '@/types';
-
-// Function to map raw data to the ActualDestination interface
-const mapToActualDestination = (data: any): ActualDestination => ({
-  id: data.id,
-  name: data.name,
-  type: data.type,
-  exportedSignals: data.exportedSignals,
-  fields: data.fields,
-  conditions: data.conditions,
-  destinationType: {
-    type: data.destinationType.type,
-    displayName: data.destinationType.displayName,
-    imageUrl: data.destinationType.imageUrl,
-    supportedSignals: data.destinationType.supportedSignals,
-  },
-});
-
-export const useActualDestination = () => {
-  const { data } = useComputePlatform();
-
-  // Use the mapToActualDestination function to transform raw data
-  const destinations =
-    data?.computePlatform.destinations.map((destination: any) =>
-      mapToActualDestination(destination)
-    ) || [];
-
-  return {
-    destinations,
-  };
-};
diff --git a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
index 3668cfbe6..e902fdeeb 100644
--- a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
@@ -13,7 +13,7 @@ interface Params {
 
 export const useDestinationCRUD = (params?: Params) => {
   const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
-  const { refetch } = useComputePlatform();
+  const { data, refetch } = useComputePlatform();
   const notify = useNotify();
 
   const notifyUser = (type: NotificationType, title: string, message: string, id?: string) => {
@@ -64,6 +64,8 @@ export const useDestinationCRUD = (params?: Params) => {
 
   return {
     loading: cState.loading || uState.loading || dState.loading,
+    destinations: data?.computePlatform.destinations || [],
+
     createDestination: (destination: DestinationInput) => createDestination({ variables: { destination } }),
     updateDestination: (id: string, destination: DestinationInput) => updateDestination({ variables: { id, destination } }),
     deleteDestination: (id: string) => deleteDestination({ variables: { id } }),
diff --git a/frontend/webapp/hooks/instrumentation-rules/index.ts b/frontend/webapp/hooks/instrumentation-rules/index.ts
index 7cbf34e7b..e71cd62cd 100644
--- a/frontend/webapp/hooks/instrumentation-rules/index.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/index.ts
@@ -1,4 +1,3 @@
 export * from './useInstrumentationRule';
-export * from './useGetInstrumentationRules';
 export * from './useInstrumentationRuleCRUD';
 export * from './useInstrumentationRuleFormData';
diff --git a/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts b/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
deleted file mode 100644
index fa9cb1444..000000000
--- a/frontend/webapp/hooks/instrumentation-rules/useGetInstrumentationRules.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { deriveTypeFromRule } from '@/utils';
-import { useComputePlatform } from '../compute-platform';
-
-export const useGetInstrumentationRules = () => {
-  const { data } = useComputePlatform();
-
-  return {
-    instrumentationRules:
-      data?.computePlatform?.instrumentationRules?.map((item) => {
-        const type = deriveTypeFromRule(item);
-
-        return {
-          ...item,
-          type,
-        };
-      }) || [],
-  };
-};
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
index aac125189..082be89fc 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
@@ -13,7 +13,7 @@ interface Params {
 
 export const useInstrumentationRuleCRUD = (params?: Params) => {
   const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
-  const { refetch } = useComputePlatform();
+  const { data, refetch } = useComputePlatform();
   const notify = useNotify();
 
   const notifyUser = (type: NotificationType, title: string, message: string, id?: string) => {
@@ -64,6 +64,13 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
 
   return {
     loading: cState.loading || uState.loading || dState.loading,
+    instrumentationRules:
+      data?.computePlatform?.instrumentationRules?.map((item) => {
+        const type = deriveTypeFromRule(item);
+
+        return { ...item, type };
+      }) || [],
+
     createInstrumentationRule: (instrumentationRule: InstrumentationRuleInput) => createInstrumentationRule({ variables: { instrumentationRule } }),
     updateInstrumentationRule: (ruleId: string, instrumentationRule: InstrumentationRuleInput) => updateInstrumentationRule({ variables: { ruleId, instrumentationRule } }),
     deleteInstrumentationRule: (ruleId: string) => deleteInstrumentationRule({ variables: { ruleId } }),
diff --git a/frontend/webapp/hooks/setup/useConnectEnv.ts b/frontend/webapp/hooks/setup/useConnectEnv.ts
index 807895eb1..c8024c238 100644
--- a/frontend/webapp/hooks/setup/useConnectEnv.ts
+++ b/frontend/webapp/hooks/setup/useConnectEnv.ts
@@ -1,6 +1,6 @@
 import { useAppStore } from '@/store';
 import { DestinationInput } from '@/types';
-import { useActualSources } from '../sources';
+import { useSourceCRUD } from '../sources';
 import { useState, useCallback } from 'react';
 import { useDestinationCRUD } from '../destinations';
 
@@ -10,8 +10,8 @@ type ConnectEnvResult = {
 };
 
 export const useConnectEnv = () => {
+  const { createSources } = useSourceCRUD();
   const { createDestination } = useDestinationCRUD();
-  const { createSourcesForNamespace, persistNamespaceItems } = useActualSources();
 
   const [result, setResult] = useState<ConnectEnvResult | null>(null);
   const [loading, setLoading] = useState(false);
@@ -28,48 +28,22 @@ export const useConnectEnv = () => {
       setResult(null);
 
       try {
-        // Persist namespaces based on namespaceFutureSelectAppsList
-        const namespaceItems = Object.entries(namespaceFutureSelectAppsList).map(([namespaceName, futureSelected]) => ({
-          name: namespaceName,
-          futureSelected,
-        }));
-
-        await persistNamespaceItems(namespaceItems);
-
-        // Create sources for each namespace in sourcesList
-        for (const namespaceName in sourcesList) {
-          const sources = sourcesList[namespaceName].map((source) => ({
-            kind: source.kind,
-            name: source.name,
-            selected: true,
-          }));
-          await createSourcesForNamespace(namespaceName, sources);
-        }
-
+        await createSources(sourcesList, namespaceFutureSelectAppsList);
         resetSources();
 
-        // Create destination
         const { data } = await createDestination(destination);
         const destinationId = data?.createNewDestination.id;
 
-        if (!destinationId) {
-          throw new Error('Error creating destination.');
-        }
         callback && callback();
-        setResult({
-          success: true,
-          destinationId,
-        });
+        setResult({ success: true, destinationId });
       } catch (err) {
         setError((err as Error).message);
-        setResult({
-          success: false,
-        });
+        setResult({ success: false });
       } finally {
         setLoading(false);
       }
     },
-    [sourcesList, createDestination, persistNamespaceItems, createSourcesForNamespace, namespaceFutureSelectAppsList]
+    [sourcesList, namespaceFutureSelectAppsList, createSources, resetSources, createDestination],
   );
 
   return {
diff --git a/frontend/webapp/hooks/sources/index.ts b/frontend/webapp/hooks/sources/index.ts
index 909719e76..c98e0a1d7 100644
--- a/frontend/webapp/hooks/sources/index.ts
+++ b/frontend/webapp/hooks/sources/index.ts
@@ -1,5 +1,4 @@
 export * from './useSources';
 export * from './useConnectSourcesMenuState';
 export * from './useConnectSourcesList';
-export * from './usePersistSource';
-export * from './useActualSources';
+export * from './useSourceCRUD';
diff --git a/frontend/webapp/hooks/sources/useActualSources.ts b/frontend/webapp/hooks/sources/useActualSources.ts
deleted file mode 100644
index ed3b59c09..000000000
--- a/frontend/webapp/hooks/sources/useActualSources.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useCallback } from 'react';
-import { usePersistSource } from '../sources';
-import { useNamespace } from '../compute-platform';
-import { useUpdateSource } from './useUpdateSource';
-import { useComputePlatform } from '../compute-platform';
-import { useBooleanStore } from '@/store/useBooleanStore';
-import { PatchSourceRequestInput, PersistSourcesArray, WorkloadId } from '@/types';
-
-export function useActualSources() {
-  const { data, refetch } = useComputePlatform();
-  const { isPolling, togglePolling } = useBooleanStore();
-  const { persistSource, error: sourceError } = usePersistSource();
-  const { updateSource, error: updateError } = useUpdateSource();
-
-  const { persistNamespace } = useNamespace(undefined);
-
-  const startPolling = useCallback(async () => {
-    togglePolling(true);
-    const maxRetries = 5;
-    const retryInterval = 1000; // Poll every second
-    let retries = 0;
-
-    while (retries < maxRetries) {
-      await new Promise((resolve) => setTimeout(resolve, retryInterval));
-      refetch();
-      retries++;
-    }
-
-    togglePolling(false);
-  }, [refetch, togglePolling]);
-
-  const createSourcesForNamespace = async (namespaceName: string, sources: PersistSourcesArray[]) => {
-    await persistSource(namespaceName, sources);
-
-    startPolling();
-    if (sourceError) {
-      throw new Error(`Error creating sources for namespace: ${namespaceName}`);
-    }
-  };
-
-  const deleteSourcesForNamespace = async (namespaceName: string, sources: PersistSourcesArray[]) => {
-    await persistSource(namespaceName, sources);
-
-    startPolling();
-    if (sourceError) {
-      throw new Error(`Error creating sources for namespace: ${namespaceName}`);
-    }
-  };
-
-  const updateActualSource = async (sourceId: WorkloadId, patchRequest: PatchSourceRequestInput) => {
-    try {
-      await updateSource(sourceId, patchRequest);
-      refetch();
-    } catch (error) {
-      console.error('Error updating source:', error);
-      throw error;
-    }
-  };
-
-  const persistNamespaceItems = async (namespaceItems) => {
-    for (const namespace of namespaceItems) {
-      await persistNamespace(namespace);
-    }
-  };
-
-  return {
-    sources: data?.computePlatform.k8sActualSources || [],
-    deleteSourcesForNamespace,
-    createSourcesForNamespace,
-    persistNamespaceItems,
-    updateActualSource,
-    isPolling,
-  };
-}
diff --git a/frontend/webapp/hooks/sources/usePersistSource.ts b/frontend/webapp/hooks/sources/usePersistSource.ts
deleted file mode 100644
index 85c4c6820..000000000
--- a/frontend/webapp/hooks/sources/usePersistSource.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import { PERSIST_SOURCE } from '@/graphql';
-import { useMutation } from '@apollo/client';
-import { PersistSourcesArray } from '@/types';
-
-type PersistSourceResponse = {
-  persistK8sSources: boolean;
-};
-
-type PersistSourceVariables = {
-  namespace: string;
-  sources: PersistSourcesArray[];
-};
-
-export const usePersistSource = () => {
-  const [persistSourceMutation, { data, loading, error }] = useMutation<
-    PersistSourceResponse,
-    PersistSourceVariables
-  >(PERSIST_SOURCE);
-
-  const [success, setSuccess] = useState<boolean | null>(null);
-
-  const persistSource = async (
-    namespace: string,
-    sources: PersistSourcesArray[]
-  ) => {
-    try {
-      const result = await persistSourceMutation({
-        variables: {
-          namespace,
-          sources,
-        },
-      });
-      setSuccess(result.data?.persistK8sSources ?? false);
-    } catch (err) {
-      setSuccess(false);
-    }
-  };
-
-  return {
-    persistSource,
-    success,
-    loading,
-    error,
-  };
-};
diff --git a/frontend/webapp/hooks/sources/useSourceCRUD.ts b/frontend/webapp/hooks/sources/useSourceCRUD.ts
new file mode 100644
index 000000000..67b7543de
--- /dev/null
+++ b/frontend/webapp/hooks/sources/useSourceCRUD.ts
@@ -0,0 +1,107 @@
+import { useDrawerStore } from '@/store';
+import { useNotify } from '../useNotify';
+import { useMutation } from '@apollo/client';
+import { ACTION, getSseTargetFromId, NOTIFICATION } from '@/utils';
+import { PERSIST_SOURCE, UPDATE_K8S_ACTUAL_SOURCE } from '@/graphql';
+import { useComputePlatform, useNamespace } from '../compute-platform';
+import { OVERVIEW_ENTITY_TYPES, type WorkloadId, type NotificationType, type PatchSourceRequestInput, type K8sActualSource } from '@/types';
+
+interface Params {
+  onSuccess?: () => void;
+  onError?: () => void;
+}
+
+export const useSourceCRUD = (params?: Params) => {
+  const { setSelectedItem: setDrawerItem } = useDrawerStore((store) => store);
+  const { data, startPolling } = useComputePlatform();
+  const { persistNamespace } = useNamespace();
+  const notify = useNotify();
+
+  const notifyUser = (type: NotificationType, title: string, message: string, id?: WorkloadId) => {
+    notify({
+      type,
+      title,
+      message,
+      crdType: OVERVIEW_ENTITY_TYPES.SOURCE,
+      target: id ? getSseTargetFromId(id, OVERVIEW_ENTITY_TYPES.SOURCE) : undefined,
+    });
+  };
+
+  const handleError = (title: string, message: string, id?: WorkloadId) => {
+    notifyUser(NOTIFICATION.ERROR, title, message, id);
+    params?.onError?.();
+  };
+
+  const handleComplete = (title: string, message: string, id?: WorkloadId) => {
+    notifyUser(NOTIFICATION.SUCCESS, title, message, id);
+    setDrawerItem(null);
+    startPolling();
+    params?.onSuccess?.();
+  };
+
+  const [createOrDeleteSources, cdState] = useMutation<{ persistK8sSources: boolean }>(PERSIST_SOURCE, {
+    onError: (error, req) => {
+      const { selected } = req?.variables?.sources[0];
+      const action = selected ? ACTION.CREATE : ACTION.DELETE;
+
+      handleError(action, error.message);
+    },
+    onCompleted: (res, req) => {
+      const namespace = req?.variables?.namespace;
+      const { name, kind, selected } = req?.variables?.sources[0];
+
+      const count = req?.variables?.sources.length;
+      const action = selected ? ACTION.CREATE : ACTION.DELETE;
+      const fromOrIn = selected ? 'in' : 'from';
+
+      if (count > 1) {
+        handleComplete(action, `${count} sources were ${action.toLowerCase()}d ${fromOrIn} "${namespace}"`);
+      } else {
+        const id = { kind, name, namespace };
+        handleComplete(action, `source "${name}" was ${action.toLowerCase()}d ${fromOrIn} "${namespace}"`, id);
+      }
+    },
+  });
+
+  const [updateSource, uState] = useMutation<{ updateK8sActualSource: boolean }>(UPDATE_K8S_ACTUAL_SOURCE, {
+    onError: (error) => handleError(ACTION.UPDATE, error.message),
+    onCompleted: (res, req) => {
+      const id = req?.variables?.sourceId;
+      const name = id?.name;
+      handleComplete(ACTION.UPDATE, `source "${name}" was updated`, id);
+    },
+  });
+
+  const persistNamespaces = async (items: { [key: string]: boolean }) => {
+    for (const [namespace, futureSelected] of Object.entries(items)) {
+      await persistNamespace({ name: namespace, futureSelected });
+    }
+  };
+
+  const persistSources = async (items: { [key: string]: K8sActualSource[] }, selected: boolean) => {
+    for (const [namespace, sources] of Object.entries(items)) {
+      await createOrDeleteSources({
+        variables: {
+          namespace,
+          sources: sources.map((source) => ({
+            kind: source.kind,
+            name: source.name,
+            selected,
+          })),
+        },
+      });
+    }
+  };
+
+  return {
+    loading: cdState.loading || uState.loading,
+    sources: data?.computePlatform.k8sActualSources || [],
+
+    createSources: async (selectAppsList: { [key: string]: K8sActualSource[] }, futureSelectAppsList: { [key: string]: boolean }) => {
+      await persistNamespaces(futureSelectAppsList);
+      await persistSources(selectAppsList, true);
+    },
+    updateSource: async (sourceId: WorkloadId, patchSourceRequest: PatchSourceRequestInput) => await updateSource({ variables: { sourceId, patchSourceRequest } }),
+    deleteSources: async (selectAppsList: { [key: string]: K8sActualSource[] }) => await persistSources(selectAppsList, false),
+  };
+};
diff --git a/frontend/webapp/hooks/sources/useUpdateSource.ts b/frontend/webapp/hooks/sources/useUpdateSource.ts
deleted file mode 100644
index 48c60c030..000000000
--- a/frontend/webapp/hooks/sources/useUpdateSource.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// sources.ts
-import { useMutation } from '@apollo/client';
-import { UPDATE_K8S_ACTUAL_SOURCE } from '@/graphql';
-import { WorkloadId, PatchSourceRequestInput } from '@/types';
-
-export function useUpdateSource() {
-  const [updateSourceMutation, { data, loading, error }] = useMutation(
-    UPDATE_K8S_ACTUAL_SOURCE
-  );
-
-  const updateSource = async (
-    sourceId: WorkloadId,
-    patchSourceRequest: PatchSourceRequestInput
-  ) => {
-    try {
-      const response = await updateSourceMutation({
-        variables: {
-          sourceId,
-          patchSourceRequest,
-        },
-      });
-      return response;
-    } catch (err) {
-      console.error('Error updating source:', err);
-      throw err;
-    }
-  };
-
-  return {
-    updateSource,
-    data,
-    loading,
-    error,
-  };
-}
diff --git a/frontend/webapp/store/index.ts b/frontend/webapp/store/index.ts
index d9e795740..6c820834c 100644
--- a/frontend/webapp/store/index.ts
+++ b/frontend/webapp/store/index.ts
@@ -1,4 +1,5 @@
 export * from './useAppStore';
+export * from './useBooleanStore';
 export * from './useDrawerStore';
 export * from './useModalStore';
 export * from './useNotificationStore';

From d9e8582ce1a92dc9399a94c4427ebd06b72eafb5 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 10 Nov 2024 13:50:06 +0200
Subject: [PATCH 346/374] [GEN-1669]  delete unused files (#1721)

---
 .../app/(overview)/(actions)/actions/page.tsx |  14 -
 .../(actions)/choose-action/page.tsx          |  24 -
 .../(actions)/create-action/page.tsx          |  24 -
 .../(overview)/(actions)/edit-action/page.tsx |  24 -
 .../create-destination/page.tsx               |   6 -
 .../(destinations)/destinations/page.tsx      |  13 -
 .../(destinations)/edit-destination/page.tsx  |   6 -
 .../select-destination/page.tsx               |  10 -
 .../choose-rule/page.tsx                      |  24 -
 .../create-rule/page.tsx                      |  24 -
 .../edit-rule/page.tsx                        |  23 -
 .../instrumentation-rules/page.tsx            |  14 -
 .../(overview)/(sources)/edit-source/page.tsx |   7 -
 .../(sources)/edit-source/styled.tsx          |  27 --
 .../(sources)/select-sources/page.tsx         |   6 -
 .../app/(overview)/(sources)/sources/page.tsx |  14 -
 frontend/webapp/app/(overview)/layout.tsx     |  46 +-
 .../webapp/app/(overview)/overview/page.tsx   |   9 +-
 frontend/webapp/app/layout.tsx                |  30 +-
 frontend/webapp/app/main/layout.tsx           |  32 --
 frontend/webapp/app/main/page.tsx             |  11 -
 frontend/webapp/app/page.tsx                  |   4 +-
 .../components/common/conditions.check.tsx    |  71 ---
 frontend/webapp/components/common/index.ts    |   2 -
 .../components/common/multi.checkbox.tsx      |  83 ----
 frontend/webapp/components/index.ts           |   4 +-
 .../lists/empty.list/empty.list.tsx           |  43 --
 frontend/webapp/components/lists/index.tsx    |   3 -
 .../instrumentation-config-list/index.tsx     |  59 ---
 .../instrumentation-config-list-item.tsx      | 132 ------
 .../library-option.tsx                        |  46 --
 .../style.styled.ts                           |  84 ----
 .../components/lists/step-list/index.tsx      |  60 ---
 .../webapp/components/notification/index.tsx  |   1 +
 .../notification/notification-container.tsx   |  76 ----
 .../notification/notification-icon.tsx        |  64 ---
 .../notification/notification-list-item.tsx   |  70 ---
 .../notification/notification-list.tsx        | 110 -----
 .../overview/actions/action.icon/index.tsx    |  32 --
 .../action.yaml/add.cluster.info.yaml.tsx     |  79 ----
 .../action.yaml/delete.attribute.yaml.tsx     |  84 ----
 .../overview/actions/action.yaml/index.tsx    | 100 -----
 .../actions.forms/add.cluster.info/index.tsx  | 103 -----
 .../actions.forms/delete.attribute/index.tsx  |  58 ---
 .../dynamic.action.form/index.tsx             |  53 ---
 .../overview/actions/actions.forms/index.tsx  |   2 -
 .../actions.forms/pii-masking/index.tsx       |  67 ---
 .../actions.forms/rename.attributes/index.tsx |  95 ----
 .../samplers/error-sampler/index.tsx          |  65 ---
 .../actions/actions.forms/samplers/index.ts   |   3 -
 .../samplers/latency-action/index.tsx         | 289 ------------
 .../samplers/probabilistic-sampler/index.tsx  |  62 ---
 .../action.row.dynamic.content/index.tsx      |  67 ---
 .../actions.table/actions.table.header.tsx    | 185 --------
 .../actions.table/actions.table.row.tsx       | 148 ------
 .../overview/actions/actions.table/index.tsx  |  96 ----
 .../overview/actions/delete.action/index.tsx  |  68 ---
 .../components/overview/actions/index.ts      |   6 -
 .../actions/new.action.card/index.tsx         |  41 --
 .../overview/add.item.menu/index.tsx          |  40 --
 .../components/overview/destination/index.ts  |   1 -
 .../manage.destination.header.tsx             |  44 --
 .../manage.destination/form.danger.zone.tsx   |  66 ---
 .../manage.destination/manage.destination.tsx |  69 ---
 .../destinations.table.header.tsx             | 139 ------
 .../destinations.table.row.tsx                | 137 ------
 .../managed.destination.table/index.tsx       |  65 ---
 frontend/webapp/components/overview/index.tsx |  10 +-
 .../rules-table/index.tsx                     |  57 ---
 .../instrumentation.rules.table.header.tsx    |  44 --
 .../instrumentation.rules.table.row.tsx       |  88 ----
 .../rules-table/rule.row.dynamic.content.tsx  |  28 --
 .../overview/monitors-legend/index.tsx        |   2 +-
 .../overview.header/overview.header.tsx       |  58 ---
 .../sources/delete.source/delete.source.tsx   |  68 ---
 .../sources/detected-containers/index.tsx     |  78 ----
 .../components/overview/sources/index.ts      |   2 -
 .../manage.source.header.tsx                  |  46 --
 .../sources/managed.sources.table/index.tsx   | 154 -------
 .../sources.table.header.tsx                  | 421 ------------------
 .../sources.table.row.tsx                     | 212 ---------
 .../connections_icons/connections_icons.tsx   |  46 --
 .../create.connection.form.styled.tsx         |  26 --
 .../create.connection.form.tsx                | 289 ------------
 .../create.connection.form/dynamic.fields.tsx | 134 ------
 .../quick.help/quick.help.styled.tsx          |  11 -
 .../connection/quick.help/quick.help.tsx      |  30 --
 .../destination.card.styled.tsx               |  39 --
 .../destination.card/destination.card.tsx     |  76 ----
 .../destination.list.styled.tsx               |  39 --
 .../destination.list/destination.list.tsx     |  36 --
 .../destination.option.menu.styled.tsx        |  20 -
 .../destination.option.menu.tsx               | 101 -----
 .../setup/destination/tap.list/tap.list.tsx   |  27 --
 .../setup/headers/back-button/index.tsx       |  34 --
 .../choose-destination-header/index.tsx       |  43 --
 .../choose-destination-header/styled.tsx      |  28 --
 .../headers/choose-sources-header/index.tsx   |  46 --
 .../headers/choose-sources-header/styled.tsx  |  27 --
 .../connect-destination-header/index.tsx      |  18 -
 .../connect-destination-header/styled.tsx     |  15 -
 .../components/setup/headers/header/index.tsx |  59 ---
 .../webapp/components/setup/headers/index.tsx |   5 -
 frontend/webapp/components/setup/index.tsx    |   8 -
 .../source.card/source.card.styled.tsx        |  45 --
 .../setup/sources/source.card/source.card.tsx |  49 --
 .../sources.list/sources.list.styled.tsx      |  30 --
 .../sources/sources.list/sources.list.tsx     |  54 ---
 .../action.sources.options.tsx                |  47 --
 .../filter.sources.options.tsx                |  33 --
 .../sources.option.menu.styled.tsx            |  30 --
 .../sources.option.menu.tsx                   |  41 --
 .../side.menu/contact.us/contact.us.tsx       |  48 --
 .../webapp/components/side.menu/index.tsx     |   1 -
 .../side.menu/menu.item/menu.item.tsx         |  99 ----
 .../components/side.menu/menu/items.tsx       |  61 ---
 .../components/side.menu/menu/menu.styled.tsx |  33 --
 .../webapp/components/side.menu/menu/menu.tsx |  93 ----
 frontend/webapp/containers/index.ts           |   1 -
 .../main/actions/choose-action/index.tsx      |  93 ----
 .../main/actions/choose-action/styled.ts      |  30 --
 .../main/actions/create-action/index.tsx      | 127 ------
 .../main/actions/create-action/styled.ts      |  85 ----
 .../main/actions/edit-action/index.tsx        | 151 -------
 .../main/actions/edit-action/styled.ts        |  80 ----
 .../webapp/containers/main/actions/index.ts   |   4 -
 .../containers/main/actions/managed/index.tsx | 115 -----
 .../containers/main/actions/managed/styled.ts |  32 --
 .../destinations-list/index.tsx               |   2 +-
 .../main/destinations/destinations.styled.tsx |  31 --
 .../containers/main/destinations/index.tsx    |   1 -
 .../main/destinations/managed/index.tsx       |  97 ----
 .../main/destinations/managed/styled.ts       |  32 --
 .../destinations/new.destination.form.tsx     | 108 -----
 .../destinations/new.destination.list.tsx     |  28 --
 .../destinations/update.destination.flow.tsx  |  96 ----
 frontend/webapp/containers/main/index.ts      |   5 +
 frontend/webapp/containers/main/index.tsx     |   9 -
 .../choose-rule/index.tsx                     |  47 --
 .../choose-rule/styled.ts                     |  30 --
 .../create-rule/index.tsx                     | 178 --------
 .../create-rule/styled.ts                     |  85 ----
 .../instrumentation-rules/edit-rule/index.tsx | 184 --------
 .../instrumentation-rules/edit-rule/styled.ts |  80 ----
 .../main/instrumentation-rules/index.ts       |   4 -
 .../instrumentation-rules/managed/index.tsx   |  73 ---
 .../instrumentation-rules/managed/styled.ts   |  32 --
 .../main/overview/data.flow/index.tsx         | 191 --------
 .../main/overview/data.flow/styled.ts         |   6 -
 .../main/overview/data.flow/utils.tsx         | 100 -----
 .../webapp/containers/main/overview/index.ts  |   1 -
 .../main/sources/choose.sources/index.tsx     |  24 -
 .../choose.sources/new.source.list.tsx        |  37 --
 .../main/sources/choose.sources/styled.tsx    |  27 --
 .../main/sources/edit.source/index.tsx        | 148 ------
 .../main/sources/edit.source/styled.tsx       |  36 --
 .../webapp/containers/main/sources/index.ts   |   5 +-
 .../containers/main/sources/managed/index.tsx | 139 ------
 .../main/sources/managed/styled.tsx           |  32 --
 .../connection/connection.section.styled.tsx  |  12 -
 .../setup/connection/connection.section.tsx   |  57 ---
 .../containers/setup/connection/index.tsx     |  54 ---
 .../destination.section.styled.tsx            |  24 -
 .../setup/destination/destination.section.tsx | 105 -----
 .../containers/setup/destination/index.tsx    |  48 --
 .../containers/setup/destination/utils.tsx    |  85 ----
 frontend/webapp/containers/setup/index.tsx    |   3 -
 .../setup/sources/fast-sources-selection.tsx  | 216 ---------
 .../webapp/containers/setup/sources/index.tsx |  44 --
 .../setup/sources/namespace-accordion.tsx     | 125 ------
 .../setup/sources/sources.section.styled.tsx  |  12 -
 .../setup/sources/sources.section.tsx         | 207 ---------
 .../design.system/action.group/index.tsx      |  30 --
 .../design.system/action.item/index.tsx       |  20 -
 .../webapp/design.system/button/button.tsx    |  13 -
 frontend/webapp/design.system/card/card.tsx   |  16 -
 .../design.system/checkbox/checkbox.tsx       |  13 -
 .../webapp/design.system/code-block/index.tsx |  22 -
 .../design.system/condition.alert/index.tsx   | 119 -----
 .../design.system/danger.zone/danger.zone.tsx |   6 -
 .../webapp/design.system/data.flow/index.tsx  |   7 -
 .../webapp/design.system/drawer/index.tsx     |  76 ----
 .../design.system/drop.down/drop.down.tsx     |  20 -
 .../design.system/float.box/float.box.tsx     |  11 -
 frontend/webapp/design.system/image/image.tsx |  32 --
 frontend/webapp/design.system/index.tsx       |  37 --
 .../design.system/input/action.input.tsx      |  14 -
 frontend/webapp/design.system/input/input.tsx |  20 -
 .../design.system/key-value-input/index.tsx   |   9 -
 frontend/webapp/design.system/link/link.tsx   |  12 -
 .../webapp/design.system/loader/loader.tsx    |   6 -
 frontend/webapp/design.system/modal/modal.tsx |   7 -
 frontend/webapp/design.system/modal/types.tsx |  33 --
 .../design.system/multi-input-table/index.tsx |  11 -
 .../design.system/multi-input/index.tsx       |  15 -
 .../notification/notification.tsx             |  12 -
 .../webapp/design.system/pagination/index.tsx |  13 -
 frontend/webapp/design.system/radio/radio.tsx |  12 -
 .../search.input/search.input.tsx             |  15 -
 .../selected.counter/selected.counter.tsx     |  11 -
 frontend/webapp/design.system/steps/steps.tsx |  17 -
 .../webapp/design.system/switch/switch.tsx    |  13 -
 frontend/webapp/design.system/table/index.tsx |  19 -
 frontend/webapp/design.system/tag/tag.tsx     |  11 -
 frontend/webapp/design.system/tap/tap.tsx     |  15 -
 .../webapp/design.system/text.area/index.tsx  |   6 -
 frontend/webapp/design.system/text/text.tsx   |  16 -
 .../webapp/design.system/textarea/index.tsx   |   6 -
 .../webapp/design.system/tooltip/tooltip.tsx  |   6 -
 frontend/webapp/design.system/video/video.tsx |  12 -
 .../webapp/design.system/yml.editor/index.tsx |  97 ----
 frontend/webapp/hooks/actions/index.ts        |   4 +-
 .../webapp/hooks/actions/useActionCRUD.ts     |   2 +-
 .../webapp/hooks/actions/useActionFormData.ts |   2 +-
 .../webapp/hooks/actions/useActionState.ts    | 211 ---------
 frontend/webapp/hooks/actions/useActions.ts   | 109 -----
 frontend/webapp/hooks/common/index.ts         |   2 +
 .../webapp/hooks/{ => common}/useKeyDown.ts   |   0
 .../useOnClickOutside.ts}                     |   0
 .../hooks/compute-platform/useNamespace.ts    |   2 +-
 .../hooks/{new-config => config}/index.ts     |   0
 .../hooks/{new-config => config}/useConfig.ts |   0
 frontend/webapp/hooks/destinations/index.ts   |   1 -
 .../hooks/destinations/useDestinationCRUD.ts  |  14 +-
 .../hooks/destinations/useDestinations.ts     |  74 ---
 frontend/webapp/hooks/index.tsx               |  17 +-
 .../hooks/instrumentation-rules/index.ts      |   1 -
 .../useInstrumentationRule.ts                 | 143 ------
 .../useInstrumentationRuleCRUD.ts             |  14 +-
 .../useInstrumentationRuleFormData.ts         |  39 +-
 frontend/webapp/hooks/notification/index.ts   |   2 +
 .../hooks/{ => notification}/useNotify.ts     |   0
 .../webapp/hooks/{ => notification}/useSSE.ts |  17 +-
 frontend/webapp/hooks/setup/index.ts          |   1 -
 frontend/webapp/hooks/setup/useConnect.ts     |  31 --
 frontend/webapp/hooks/sources/index.ts        |   1 -
 .../webapp/hooks/sources/useSourceCRUD.ts     |   2 +-
 frontend/webapp/hooks/sources/useSources.ts   | 239 ----------
 frontend/webapp/hooks/useNotification.tsx     |  13 -
 frontend/webapp/hooks/useOverviewMetrics.ts   |  10 -
 frontend/webapp/hooks/useSectionData.tsx      |  20 -
 .../nodes-data-flow/builder.ts                | 252 +++++++----
 frontend/webapp/utils/constants/routes.tsx    |   1 +
 243 files changed, 303 insertions(+), 11982 deletions(-)
 delete mode 100644 frontend/webapp/app/(overview)/(actions)/actions/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(actions)/choose-action/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(actions)/create-action/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(actions)/edit-action/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(destinations)/create-destination/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(destinations)/destinations/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(destinations)/edit-destination/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(destinations)/select-destination/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(instrumentation-rules)/choose-rule/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(instrumentation-rules)/create-rule/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(instrumentation-rules)/edit-rule/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(instrumentation-rules)/instrumentation-rules/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(sources)/edit-source/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(sources)/edit-source/styled.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(sources)/select-sources/page.tsx
 delete mode 100644 frontend/webapp/app/(overview)/(sources)/sources/page.tsx
 delete mode 100644 frontend/webapp/app/main/layout.tsx
 delete mode 100644 frontend/webapp/app/main/page.tsx
 delete mode 100644 frontend/webapp/components/common/conditions.check.tsx
 delete mode 100644 frontend/webapp/components/common/multi.checkbox.tsx
 delete mode 100644 frontend/webapp/components/lists/empty.list/empty.list.tsx
 delete mode 100644 frontend/webapp/components/lists/index.tsx
 delete mode 100644 frontend/webapp/components/lists/instrumentation-config-list/index.tsx
 delete mode 100644 frontend/webapp/components/lists/instrumentation-config-list/instrumentation-config-list-item.tsx
 delete mode 100644 frontend/webapp/components/lists/instrumentation-config-list/library-option.tsx
 delete mode 100644 frontend/webapp/components/lists/instrumentation-config-list/style.styled.ts
 delete mode 100644 frontend/webapp/components/lists/step-list/index.tsx
 create mode 100644 frontend/webapp/components/notification/index.tsx
 delete mode 100644 frontend/webapp/components/notification/notification-container.tsx
 delete mode 100644 frontend/webapp/components/notification/notification-icon.tsx
 delete mode 100644 frontend/webapp/components/notification/notification-list-item.tsx
 delete mode 100644 frontend/webapp/components/notification/notification-list.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/action.icon/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/action.yaml/add.cluster.info.yaml.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/action.yaml/delete.attribute.yaml.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/action.yaml/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/add.cluster.info/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/delete.attribute/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/dynamic.action.form/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/pii-masking/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/rename.attributes/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/samplers/error-sampler/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/samplers/index.ts
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/samplers/latency-action/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.forms/samplers/probabilistic-sampler/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.table/action.row.dynamic.content/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.table/actions.table.header.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/actions.table/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/delete.action/index.tsx
 delete mode 100644 frontend/webapp/components/overview/actions/index.ts
 delete mode 100644 frontend/webapp/components/overview/actions/new.action.card/index.tsx
 delete mode 100644 frontend/webapp/components/overview/add.item.menu/index.tsx
 delete mode 100644 frontend/webapp/components/overview/destination/index.ts
 delete mode 100644 frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
 delete mode 100644 frontend/webapp/components/overview/destination/manage.destination/form.danger.zone.tsx
 delete mode 100644 frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
 delete mode 100644 frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.header.tsx
 delete mode 100644 frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
 delete mode 100644 frontend/webapp/components/overview/destination/managed.destination.table/index.tsx
 delete mode 100644 frontend/webapp/components/overview/instrumentation-rules/rules-table/index.tsx
 delete mode 100644 frontend/webapp/components/overview/instrumentation-rules/rules-table/instrumentation.rules.table.header.tsx
 delete mode 100644 frontend/webapp/components/overview/instrumentation-rules/rules-table/instrumentation.rules.table.row.tsx
 delete mode 100644 frontend/webapp/components/overview/instrumentation-rules/rules-table/rule.row.dynamic.content.tsx
 delete mode 100644 frontend/webapp/components/overview/overview.header/overview.header.tsx
 delete mode 100644 frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
 delete mode 100644 frontend/webapp/components/overview/sources/detected-containers/index.tsx
 delete mode 100644 frontend/webapp/components/overview/sources/index.ts
 delete mode 100644 frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
 delete mode 100644 frontend/webapp/components/overview/sources/managed.sources.table/index.tsx
 delete mode 100644 frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx
 delete mode 100644 frontend/webapp/components/overview/sources/managed.sources.table/sources.table.row.tsx
 delete mode 100644 frontend/webapp/components/setup/connection/connections_icons/connections_icons.tsx
 delete mode 100644 frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.styled.tsx
 delete mode 100644 frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
 delete mode 100644 frontend/webapp/components/setup/connection/create.connection.form/dynamic.fields.tsx
 delete mode 100644 frontend/webapp/components/setup/connection/quick.help/quick.help.styled.tsx
 delete mode 100644 frontend/webapp/components/setup/connection/quick.help/quick.help.tsx
 delete mode 100644 frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
 delete mode 100644 frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
 delete mode 100644 frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
 delete mode 100644 frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
 delete mode 100644 frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.styled.tsx
 delete mode 100644 frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.tsx
 delete mode 100644 frontend/webapp/components/setup/destination/tap.list/tap.list.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/back-button/index.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/choose-destination-header/index.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/choose-destination-header/styled.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/choose-sources-header/index.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/choose-sources-header/styled.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/connect-destination-header/index.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/connect-destination-header/styled.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/header/index.tsx
 delete mode 100644 frontend/webapp/components/setup/headers/index.tsx
 delete mode 100644 frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
 delete mode 100644 frontend/webapp/components/setup/sources/source.card/source.card.tsx
 delete mode 100644 frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
 delete mode 100644 frontend/webapp/components/setup/sources/sources.list/sources.list.tsx
 delete mode 100644 frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx
 delete mode 100644 frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
 delete mode 100644 frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
 delete mode 100644 frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx
 delete mode 100644 frontend/webapp/components/side.menu/contact.us/contact.us.tsx
 delete mode 100644 frontend/webapp/components/side.menu/index.tsx
 delete mode 100644 frontend/webapp/components/side.menu/menu.item/menu.item.tsx
 delete mode 100644 frontend/webapp/components/side.menu/menu/items.tsx
 delete mode 100644 frontend/webapp/components/side.menu/menu/menu.styled.tsx
 delete mode 100644 frontend/webapp/components/side.menu/menu/menu.tsx
 delete mode 100644 frontend/webapp/containers/main/actions/choose-action/index.tsx
 delete mode 100644 frontend/webapp/containers/main/actions/choose-action/styled.ts
 delete mode 100644 frontend/webapp/containers/main/actions/create-action/index.tsx
 delete mode 100644 frontend/webapp/containers/main/actions/create-action/styled.ts
 delete mode 100644 frontend/webapp/containers/main/actions/edit-action/index.tsx
 delete mode 100644 frontend/webapp/containers/main/actions/edit-action/styled.ts
 delete mode 100644 frontend/webapp/containers/main/actions/managed/index.tsx
 delete mode 100644 frontend/webapp/containers/main/actions/managed/styled.ts
 delete mode 100644 frontend/webapp/containers/main/destinations/destinations.styled.tsx
 delete mode 100644 frontend/webapp/containers/main/destinations/managed/index.tsx
 delete mode 100644 frontend/webapp/containers/main/destinations/managed/styled.ts
 delete mode 100644 frontend/webapp/containers/main/destinations/new.destination.form.tsx
 delete mode 100644 frontend/webapp/containers/main/destinations/new.destination.list.tsx
 delete mode 100644 frontend/webapp/containers/main/destinations/update.destination.flow.tsx
 create mode 100644 frontend/webapp/containers/main/index.ts
 delete mode 100644 frontend/webapp/containers/main/index.tsx
 delete mode 100644 frontend/webapp/containers/main/instrumentation-rules/choose-rule/index.tsx
 delete mode 100644 frontend/webapp/containers/main/instrumentation-rules/choose-rule/styled.ts
 delete mode 100644 frontend/webapp/containers/main/instrumentation-rules/create-rule/index.tsx
 delete mode 100644 frontend/webapp/containers/main/instrumentation-rules/create-rule/styled.ts
 delete mode 100644 frontend/webapp/containers/main/instrumentation-rules/edit-rule/index.tsx
 delete mode 100644 frontend/webapp/containers/main/instrumentation-rules/edit-rule/styled.ts
 delete mode 100644 frontend/webapp/containers/main/instrumentation-rules/managed/index.tsx
 delete mode 100644 frontend/webapp/containers/main/instrumentation-rules/managed/styled.ts
 delete mode 100644 frontend/webapp/containers/main/overview/data.flow/index.tsx
 delete mode 100644 frontend/webapp/containers/main/overview/data.flow/styled.ts
 delete mode 100644 frontend/webapp/containers/main/overview/data.flow/utils.tsx
 delete mode 100644 frontend/webapp/containers/main/sources/choose.sources/index.tsx
 delete mode 100644 frontend/webapp/containers/main/sources/choose.sources/new.source.list.tsx
 delete mode 100644 frontend/webapp/containers/main/sources/choose.sources/styled.tsx
 delete mode 100644 frontend/webapp/containers/main/sources/edit.source/index.tsx
 delete mode 100644 frontend/webapp/containers/main/sources/edit.source/styled.tsx
 delete mode 100644 frontend/webapp/containers/main/sources/managed/index.tsx
 delete mode 100644 frontend/webapp/containers/main/sources/managed/styled.tsx
 delete mode 100644 frontend/webapp/containers/setup/connection/connection.section.styled.tsx
 delete mode 100644 frontend/webapp/containers/setup/connection/connection.section.tsx
 delete mode 100644 frontend/webapp/containers/setup/connection/index.tsx
 delete mode 100644 frontend/webapp/containers/setup/destination/destination.section.styled.tsx
 delete mode 100644 frontend/webapp/containers/setup/destination/destination.section.tsx
 delete mode 100644 frontend/webapp/containers/setup/destination/index.tsx
 delete mode 100644 frontend/webapp/containers/setup/destination/utils.tsx
 delete mode 100644 frontend/webapp/containers/setup/index.tsx
 delete mode 100644 frontend/webapp/containers/setup/sources/fast-sources-selection.tsx
 delete mode 100644 frontend/webapp/containers/setup/sources/index.tsx
 delete mode 100644 frontend/webapp/containers/setup/sources/namespace-accordion.tsx
 delete mode 100644 frontend/webapp/containers/setup/sources/sources.section.styled.tsx
 delete mode 100644 frontend/webapp/containers/setup/sources/sources.section.tsx
 delete mode 100644 frontend/webapp/design.system/action.group/index.tsx
 delete mode 100644 frontend/webapp/design.system/action.item/index.tsx
 delete mode 100644 frontend/webapp/design.system/button/button.tsx
 delete mode 100644 frontend/webapp/design.system/card/card.tsx
 delete mode 100644 frontend/webapp/design.system/checkbox/checkbox.tsx
 delete mode 100644 frontend/webapp/design.system/code-block/index.tsx
 delete mode 100644 frontend/webapp/design.system/condition.alert/index.tsx
 delete mode 100644 frontend/webapp/design.system/danger.zone/danger.zone.tsx
 delete mode 100644 frontend/webapp/design.system/data.flow/index.tsx
 delete mode 100644 frontend/webapp/design.system/drawer/index.tsx
 delete mode 100644 frontend/webapp/design.system/drop.down/drop.down.tsx
 delete mode 100644 frontend/webapp/design.system/float.box/float.box.tsx
 delete mode 100644 frontend/webapp/design.system/image/image.tsx
 delete mode 100644 frontend/webapp/design.system/index.tsx
 delete mode 100644 frontend/webapp/design.system/input/action.input.tsx
 delete mode 100644 frontend/webapp/design.system/input/input.tsx
 delete mode 100644 frontend/webapp/design.system/key-value-input/index.tsx
 delete mode 100644 frontend/webapp/design.system/link/link.tsx
 delete mode 100644 frontend/webapp/design.system/loader/loader.tsx
 delete mode 100644 frontend/webapp/design.system/modal/modal.tsx
 delete mode 100644 frontend/webapp/design.system/modal/types.tsx
 delete mode 100644 frontend/webapp/design.system/multi-input-table/index.tsx
 delete mode 100644 frontend/webapp/design.system/multi-input/index.tsx
 delete mode 100644 frontend/webapp/design.system/notification/notification.tsx
 delete mode 100644 frontend/webapp/design.system/pagination/index.tsx
 delete mode 100644 frontend/webapp/design.system/radio/radio.tsx
 delete mode 100644 frontend/webapp/design.system/search.input/search.input.tsx
 delete mode 100644 frontend/webapp/design.system/selected.counter/selected.counter.tsx
 delete mode 100644 frontend/webapp/design.system/steps/steps.tsx
 delete mode 100644 frontend/webapp/design.system/switch/switch.tsx
 delete mode 100644 frontend/webapp/design.system/table/index.tsx
 delete mode 100644 frontend/webapp/design.system/tag/tag.tsx
 delete mode 100644 frontend/webapp/design.system/tap/tap.tsx
 delete mode 100644 frontend/webapp/design.system/text.area/index.tsx
 delete mode 100644 frontend/webapp/design.system/text/text.tsx
 delete mode 100644 frontend/webapp/design.system/textarea/index.tsx
 delete mode 100644 frontend/webapp/design.system/tooltip/tooltip.tsx
 delete mode 100644 frontend/webapp/design.system/video/video.tsx
 delete mode 100644 frontend/webapp/design.system/yml.editor/index.tsx
 delete mode 100644 frontend/webapp/hooks/actions/useActionState.ts
 delete mode 100644 frontend/webapp/hooks/actions/useActions.ts
 rename frontend/webapp/hooks/{ => common}/useKeyDown.ts (100%)
 rename frontend/webapp/hooks/{useOnClickOutside.tsx => common/useOnClickOutside.ts} (100%)
 rename frontend/webapp/hooks/{new-config => config}/index.ts (100%)
 rename frontend/webapp/hooks/{new-config => config}/useConfig.ts (100%)
 delete mode 100644 frontend/webapp/hooks/destinations/useDestinations.ts
 delete mode 100644 frontend/webapp/hooks/instrumentation-rules/useInstrumentationRule.ts
 create mode 100644 frontend/webapp/hooks/notification/index.ts
 rename frontend/webapp/hooks/{ => notification}/useNotify.ts (100%)
 rename frontend/webapp/hooks/{ => notification}/useSSE.ts (82%)
 delete mode 100644 frontend/webapp/hooks/setup/useConnect.ts
 delete mode 100644 frontend/webapp/hooks/sources/useSources.ts
 delete mode 100644 frontend/webapp/hooks/useNotification.tsx
 delete mode 100644 frontend/webapp/hooks/useOverviewMetrics.ts
 delete mode 100644 frontend/webapp/hooks/useSectionData.tsx

diff --git a/frontend/webapp/app/(overview)/(actions)/actions/page.tsx b/frontend/webapp/app/(overview)/(actions)/actions/page.tsx
deleted file mode 100644
index 1cbb523f3..000000000
--- a/frontend/webapp/app/(overview)/(actions)/actions/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { OverviewHeader } from '@/components';
-import { ManagedActionsContainer } from '@/containers';
-
-export default function ActionsPage() {
-  return (
-    <>
-      <OverviewHeader title={OVERVIEW.MENU.ACTIONS} />
-      <ManagedActionsContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(actions)/choose-action/page.tsx b/frontend/webapp/app/(overview)/(actions)/choose-action/page.tsx
deleted file mode 100644
index c193b1d6e..000000000
--- a/frontend/webapp/app/(overview)/(actions)/choose-action/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { useRouter } from 'next/navigation';
-import { OverviewHeader } from '@/components';
-import { ChooseActionContainer } from '@/containers';
-
-export default function ChooseActionPage() {
-  const router = useRouter();
-
-  function onButtonClick() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        onBackClick={onButtonClick}
-        title={OVERVIEW.MENU.ACTIONS}
-      />
-      <ChooseActionContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(actions)/create-action/page.tsx b/frontend/webapp/app/(overview)/(actions)/create-action/page.tsx
deleted file mode 100644
index 98dc681bb..000000000
--- a/frontend/webapp/app/(overview)/(actions)/create-action/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { useRouter } from 'next/navigation';
-import { OverviewHeader } from '@/components';
-import { CreateActionContainer } from '@/containers';
-
-export default function CreateActionPage() {
-  const router = useRouter();
-
-  function onButtonClick() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        onBackClick={onButtonClick}
-        title={OVERVIEW.CREATE_ACTION}
-      />
-      <CreateActionContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(actions)/edit-action/page.tsx b/frontend/webapp/app/(overview)/(actions)/edit-action/page.tsx
deleted file mode 100644
index d1f30be50..000000000
--- a/frontend/webapp/app/(overview)/(actions)/edit-action/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { useRouter } from 'next/navigation';
-import { OverviewHeader } from '@/components';
-import { EditActionContainer } from '@/containers';
-
-export default function EditActionPage() {
-  const router = useRouter();
-
-  function onButtonClick() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        onBackClick={onButtonClick}
-        title={OVERVIEW.EDIT_ACTION}
-      />
-      <EditActionContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(destinations)/create-destination/page.tsx b/frontend/webapp/app/(overview)/(destinations)/create-destination/page.tsx
deleted file mode 100644
index 8d060907b..000000000
--- a/frontend/webapp/app/(overview)/(destinations)/create-destination/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-'use client';
-import { NewDestinationForm } from '@/containers/main';
-
-export default function CreateNewDestinationPage() {
-  return <NewDestinationForm />;
-}
diff --git a/frontend/webapp/app/(overview)/(destinations)/destinations/page.tsx b/frontend/webapp/app/(overview)/(destinations)/destinations/page.tsx
deleted file mode 100644
index 87ea0e365..000000000
--- a/frontend/webapp/app/(overview)/(destinations)/destinations/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-import { OVERVIEW } from '@/utils';
-import { OverviewHeader } from '@/components';
-import { DestinationContainer } from '@/containers';
-
-export default function DestinationDashboardPage() {
-  return (
-    <>
-      <OverviewHeader title={OVERVIEW.MENU.DESTINATIONS} />
-      <DestinationContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(destinations)/edit-destination/page.tsx b/frontend/webapp/app/(overview)/(destinations)/edit-destination/page.tsx
deleted file mode 100644
index e44b6e4f5..000000000
--- a/frontend/webapp/app/(overview)/(destinations)/edit-destination/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-'use client';
-import { UpdateDestinationFlow } from '@/containers/main';
-
-export default function ManageDestinationPage() {
-  return <UpdateDestinationFlow />;
-}
diff --git a/frontend/webapp/app/(overview)/(destinations)/select-destination/page.tsx b/frontend/webapp/app/(overview)/(destinations)/select-destination/page.tsx
deleted file mode 100644
index 8c566c757..000000000
--- a/frontend/webapp/app/(overview)/(destinations)/select-destination/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client';
-import { NewDestinationList } from '@/containers/main';
-
-export default function CreateDestinationPage() {
-  return (
-    <div style={{ height: '100vh' }}>
-      <NewDestinationList />
-    </div>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(instrumentation-rules)/choose-rule/page.tsx b/frontend/webapp/app/(overview)/(instrumentation-rules)/choose-rule/page.tsx
deleted file mode 100644
index 767de940b..000000000
--- a/frontend/webapp/app/(overview)/(instrumentation-rules)/choose-rule/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { useRouter } from 'next/navigation';
-import { OverviewHeader } from '@/components';
-import { ChooseInstrumentationRuleContainer } from '@/containers';
-
-export default function ChooseInstrumentationRulesPage() {
-  const router = useRouter();
-
-  function onButtonClick() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        onBackClick={onButtonClick}
-        title={OVERVIEW.MENU.INSTRUMENTATION_RULES}
-      />
-      <ChooseInstrumentationRuleContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(instrumentation-rules)/create-rule/page.tsx b/frontend/webapp/app/(overview)/(instrumentation-rules)/create-rule/page.tsx
deleted file mode 100644
index 15fa9ae08..000000000
--- a/frontend/webapp/app/(overview)/(instrumentation-rules)/create-rule/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { useRouter } from 'next/navigation';
-import { OverviewHeader } from '@/components';
-import { CreateInstrumentationRulesContainer } from '@/containers';
-
-export default function CreateActionPage() {
-  const router = useRouter();
-
-  function onButtonClick() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        onBackClick={onButtonClick}
-        title={OVERVIEW.CREATE_INSTRUMENTATION_RULE}
-      />
-      <CreateInstrumentationRulesContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(instrumentation-rules)/edit-rule/page.tsx b/frontend/webapp/app/(overview)/(instrumentation-rules)/edit-rule/page.tsx
deleted file mode 100644
index 8d6c3a792..000000000
--- a/frontend/webapp/app/(overview)/(instrumentation-rules)/edit-rule/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client';
-import React from 'react';
-import { useRouter } from 'next/navigation';
-import { OverviewHeader } from '@/components';
-import { EditInstrumentationRuleContainer } from '@/containers';
-
-export default function EditInstrumentationRulePage() {
-  const router = useRouter();
-
-  function onButtonClick() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        onBackClick={onButtonClick}
-        title={'Edit Instrumentation Rule'}
-      />
-      <EditInstrumentationRuleContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(instrumentation-rules)/instrumentation-rules/page.tsx b/frontend/webapp/app/(overview)/(instrumentation-rules)/instrumentation-rules/page.tsx
deleted file mode 100644
index 30b8d9d5b..000000000
--- a/frontend/webapp/app/(overview)/(instrumentation-rules)/instrumentation-rules/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { OverviewHeader } from '@/components';
-import { ManagedInstrumentationRulesContainer } from '@/containers/main/instrumentation-rules';
-
-export default function InstrumentationRulesPage() {
-  return (
-    <>
-      <OverviewHeader title={OVERVIEW.MENU.INSTRUMENTATION_RULES} />
-      <ManagedInstrumentationRulesContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/(sources)/edit-source/page.tsx b/frontend/webapp/app/(overview)/(sources)/edit-source/page.tsx
deleted file mode 100644
index 7d50d4c33..000000000
--- a/frontend/webapp/app/(overview)/(sources)/edit-source/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-import React from 'react';
-import { EditSourceForm } from '@/containers';
-
-export default function EditSourcePage() {
-  return <EditSourceForm />;
-}
diff --git a/frontend/webapp/app/(overview)/(sources)/edit-source/styled.tsx b/frontend/webapp/app/(overview)/(sources)/edit-source/styled.tsx
deleted file mode 100644
index 8b3c1ae14..000000000
--- a/frontend/webapp/app/(overview)/(sources)/edit-source/styled.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-export const ManageSourcePageContainer = styled.div`
-  padding: 32px;
-`;
-
-export const BackButtonWrapper = styled.div`
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  cursor: pointer;
-  p {
-    cursor: pointer !important;
-  }
-`;
-
-export const FieldWrapper = styled.div`
-  height: 36px;
-  width: 348px;
-  margin-bottom: 64px;
-`;
-
-export const ButtonWrapper = styled.div`
-  margin-top: 48px;
-  height: 36px;
-  width: 362px;
-`;
diff --git a/frontend/webapp/app/(overview)/(sources)/select-sources/page.tsx b/frontend/webapp/app/(overview)/(sources)/select-sources/page.tsx
deleted file mode 100644
index fb8c08c86..000000000
--- a/frontend/webapp/app/(overview)/(sources)/select-sources/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-'use client';
-import { SelectSourcesContainer } from '@/containers';
-
-export default function CreateNewSourcesPage() {
-  return <SelectSourcesContainer />;
-}
diff --git a/frontend/webapp/app/(overview)/(sources)/sources/page.tsx b/frontend/webapp/app/(overview)/(sources)/sources/page.tsx
deleted file mode 100644
index 8c1cb92bb..000000000
--- a/frontend/webapp/app/(overview)/(sources)/sources/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { OverviewHeader } from '@/components';
-import { ManagedSourcesContainer } from '@/containers';
-
-export default function SourcesPage() {
-  return (
-    <>
-      <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
-      <ManagedSourcesContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/(overview)/layout.tsx b/frontend/webapp/app/(overview)/layout.tsx
index f88ddb65a..c2e7214df 100644
--- a/frontend/webapp/app/(overview)/layout.tsx
+++ b/frontend/webapp/app/(overview)/layout.tsx
@@ -1,28 +1,32 @@
-import { Menu } from '@/components/side.menu';
-import theme from '@/styles/palette';
-import { METADATA } from '@/utils/constants';
-import { Metadata } from 'next';
+'use client';
 import React from 'react';
+import styled from 'styled-components';
+import { MainHeader } from '@/components';
 
-const LAYOUT_STYLE = {
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  backgroundColor: theme.colors.light_dark,
-};
+const LayoutContainer = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
 
-const CHILDREN_STYLE = {
-  width: '100%',
-  height: '93%',
-};
+const MainContent = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 76px;
+  flex-direction: column;
+  align-items: center;
+`;
 
-export const metadata: Metadata = METADATA;
-
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function MainLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div style={LAYOUT_STYLE}>
-      <Menu />
-      <div style={CHILDREN_STYLE}>{children}</div>
-    </div>
+    <LayoutContainer>
+      <MainContent>
+        <MainHeader />
+        {children}
+      </MainContent>
+    </LayoutContainer>
   );
 }
diff --git a/frontend/webapp/app/(overview)/overview/page.tsx b/frontend/webapp/app/(overview)/overview/page.tsx
index 06ba59a7a..a2227ccd0 100644
--- a/frontend/webapp/app/(overview)/overview/page.tsx
+++ b/frontend/webapp/app/(overview)/overview/page.tsx
@@ -1,14 +1,11 @@
 'use client';
 import React from 'react';
-import { OVERVIEW } from '@/utils';
-import { OverviewHeader } from '@/components';
-import { DataFlowContainer } from '@/containers';
+import { OverviewDataFlowContainer } from '@/containers';
 
-export default function OverviewPage() {
+export default function MainPage() {
   return (
     <>
-      <OverviewHeader title={OVERVIEW.MENU.OVERVIEW} />
-      <DataFlowContainer />
+      <OverviewDataFlowContainer />
     </>
   );
 }
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 281c14a07..4d586388f 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -5,7 +5,6 @@ import { useSSE } from '@/hooks';
 import theme from '@/styles/theme';
 import { ApolloWrapper } from '@/lib';
 import { ThemeProvider } from 'styled-components';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -15,28 +14,21 @@ const LAYOUT_STYLE: React.CSSProperties = {
   height: '100vh',
 };
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 10000,
-      refetchOnWindowFocus: false,
-    },
-  },
-});
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   useSSE();
 
   return (
-    <html lang='en'>
+    <html lang="en">
       <ApolloWrapper>
-        <QueryClientProvider client={queryClient}>
-          <ThemeProvider theme={theme}>
-            <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
-              {children}
-            </body>
-          </ThemeProvider>
-        </QueryClientProvider>
+        <ThemeProvider theme={theme}>
+          <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
+            {children}
+          </body>
+        </ThemeProvider>
       </ApolloWrapper>
     </html>
   );
diff --git a/frontend/webapp/app/main/layout.tsx b/frontend/webapp/app/main/layout.tsx
deleted file mode 100644
index c2e7214df..000000000
--- a/frontend/webapp/app/main/layout.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { MainHeader } from '@/components';
-
-const LayoutContainer = styled.div`
-  width: 100%;
-  height: 100vh;
-  background-color: ${({ theme }) => theme.colors.primary};
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-`;
-
-const MainContent = styled.div`
-  display: flex;
-  width: 100vw;
-  height: 76px;
-  flex-direction: column;
-  align-items: center;
-`;
-
-export default function MainLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <LayoutContainer>
-      <MainContent>
-        <MainHeader />
-        {children}
-      </MainContent>
-    </LayoutContainer>
-  );
-}
diff --git a/frontend/webapp/app/main/page.tsx b/frontend/webapp/app/main/page.tsx
deleted file mode 100644
index a2227ccd0..000000000
--- a/frontend/webapp/app/main/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client';
-import React from 'react';
-import { OverviewDataFlowContainer } from '@/containers';
-
-export default function MainPage() {
-  return (
-    <>
-      <OverviewDataFlowContainer />
-    </>
-  );
-}
diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index 48151e064..3ca9149f7 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -2,8 +2,8 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useConfig, useNotify } from '@/hooks';
-import { Loader } from '@keyval-dev/design-system';
 import { ROUTES, CONFIG, NOTIFICATION } from '@/utils';
+import { FadeLoader } from '@/reuseable-components';
 
 export default function App() {
   const router = useRouter();
@@ -33,5 +33,5 @@ export default function App() {
     }
   }, [data, error]);
 
-  return <Loader />;
+  return <FadeLoader />;
 }
diff --git a/frontend/webapp/components/common/conditions.check.tsx b/frontend/webapp/components/common/conditions.check.tsx
deleted file mode 100644
index 4a660423a..000000000
--- a/frontend/webapp/components/common/conditions.check.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { GreenCheckIcon, RedErrorIcon } from '@keyval-dev/design-system';
-import styled from 'styled-components';
-import { KeyvalText } from '@/design.system';
-import theme from '@/styles/palette';
-
-const Container = styled.div`
-  display: inline-block;
-  position: relative;
-`;
-
-const StatusIcon = styled.div`
-  font-size: 24px;
-  cursor: pointer;
-`;
-const ProgressStatus = styled.div`
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: ${theme.colors.orange_brown};
-`;
-
-const Tooltip = styled.div`
-  visibility: hidden;
-  width: max-content;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border-radius: 5px;
-  padding: 8px;
-  position: absolute;
-  z-index: 1;
-  bottom: 100%; /* Position above the icon */
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0;
-  transition: opacity 0.3s;
-
-  ${Container}:hover & {
-    visibility: visible;
-    opacity: 1;
-  }
-`;
-
-export const ConditionCheck = ({ conditions }) => {
-  const healthyCount = conditions?.filter(
-    (condition) => condition.status === 'True'
-  ).length;
-  const totalCount = conditions?.length;
-  const allHealthy = healthyCount === totalCount;
-
-  return conditions ? (
-    <Container>
-      <StatusIcon>
-        {allHealthy ? <GreenCheckIcon /> : <RedErrorIcon />}
-      </StatusIcon>
-      <Tooltip>
-        <KeyvalText
-          size={12}
-        >{`${healthyCount}/${totalCount} checks OK`}</KeyvalText>
-      </Tooltip>
-    </Container>
-  ) : (
-    <Container>
-      <ProgressStatus />
-      <Tooltip>
-        <KeyvalText size={12}>{'validating checks...'}</KeyvalText>
-      </Tooltip>
-    </Container>
-  );
-};
diff --git a/frontend/webapp/components/common/index.ts b/frontend/webapp/components/common/index.ts
index bc8f954d1..96e8b9098 100644
--- a/frontend/webapp/components/common/index.ts
+++ b/frontend/webapp/components/common/index.ts
@@ -1,4 +1,2 @@
-export * from './multi.checkbox';
-export * from './conditions.check';
 export * from './card-details';
 export * from './configured-fields';
diff --git a/frontend/webapp/components/common/multi.checkbox.tsx b/frontend/webapp/components/common/multi.checkbox.tsx
deleted file mode 100644
index d341734c7..000000000
--- a/frontend/webapp/components/common/multi.checkbox.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { KeyvalCheckbox, KeyvalText } from '@/design.system';
-import React, { use, useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-interface CheckboxItem {
-  id: string;
-  label: string;
-  checked: boolean;
-}
-
-interface MultiCheckboxProps {
-  title?: string;
-  checkboxes: CheckboxItem[];
-  onSelectionChange: (selectedCheckboxes: CheckboxItem[]) => void;
-}
-
-const CheckboxWrapper = styled.div`
-  display: flex;
-  gap: 14px;
-`;
-
-export const MultiCheckboxComponent: React.FC<MultiCheckboxProps> = ({
-  title,
-  checkboxes,
-  onSelectionChange,
-}) => {
-  const [isCheckboxDisabled, setIsCheckboxDisabled] = useState<boolean>(false);
-  const [selectedMonitors, setSelectedMonitors] =
-    useState<CheckboxItem[]>(checkboxes);
-
-  useEffect(() => {
-    checkboxes.length === 1 && setIsCheckboxDisabled(true);
-  }, [checkboxes]);
-
-  const handleCheckboxChange = (id: string) => {
-    // Calculate the number of currently checked checkboxes
-    const currentlyCheckedCount = selectedMonitors.filter(
-      (checkbox) => checkbox.checked
-    ).length;
-
-    // Update logic to ensure at least one checkbox remains checked
-    const updatedSelection = selectedMonitors.map((checkbox) => {
-      if (checkbox.id === id) {
-        // Prevent unchecking if this is the last checked checkbox
-        if (checkbox.checked && currentlyCheckedCount === 1) {
-          return checkbox; // Do not change the state if attempting to uncheck the last checked checkbox
-        }
-
-        return { ...checkbox, checked: !checkbox.checked };
-      }
-      return checkbox;
-    });
-
-    setSelectedMonitors(updatedSelection);
-    onSelectionChange(updatedSelection);
-
-    const newCheckedCount = updatedSelection.filter(
-      (checkbox) => checkbox.checked
-    ).length;
-    setIsCheckboxDisabled(newCheckedCount <= 1);
-  };
-
-  return (
-    <>
-      {title && (
-        <KeyvalText size={14} weight={600}>
-          {title}
-        </KeyvalText>
-      )}
-      <CheckboxWrapper>
-        {selectedMonitors.map((checkbox) => (
-          <KeyvalCheckbox
-            disabled={isCheckboxDisabled && checkbox.checked}
-            key={checkbox?.id}
-            value={checkbox?.checked}
-            onChange={() => handleCheckboxChange(checkbox?.id)}
-            label={checkbox?.label}
-          />
-        ))}
-      </CheckboxWrapper>
-    </>
-  );
-};
diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
index 14f31b9fd..aa76f1ec5 100644
--- a/frontend/webapp/components/index.ts
+++ b/frontend/webapp/components/index.ts
@@ -1,9 +1,7 @@
 export * from './setup';
-export * from './lists';
 export * from './overview';
 export * from './common';
 export * from './destinations';
 export * from './main';
 export * from './modals';
-export * from './notification/notification-list'; // old
-export * from './notification/toast-list'; // new
\ No newline at end of file
+export * from './notification';
diff --git a/frontend/webapp/components/lists/empty.list/empty.list.tsx b/frontend/webapp/components/lists/empty.list/empty.list.tsx
deleted file mode 100644
index 27af29d83..000000000
--- a/frontend/webapp/components/lists/empty.list/empty.list.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import { Empty } from '@/assets/images';
-import { PlusIcon } from '@keyval-dev/design-system';
-import { KeyvalButton, KeyvalText } from '@/design.system';
-
-interface EmptyListProps {
-  title?: string;
-  btnTitle?: string;
-  btnAction?: () => void;
-}
-
-const EmptyListWrapper = styled.div`
-  width: 100%;
-  margin-top: 130px;
-  display: flex;
-  gap: 6px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`;
-const BUTTON_STYLES = { gap: 10, height: 40 };
-export function EmptyList({ title, btnTitle, btnAction }: EmptyListProps) {
-  return (
-    <EmptyListWrapper>
-      <Empty />
-      {title && (
-        <>
-          <KeyvalText size={14}>{title}</KeyvalText>
-        </>
-      )}
-      {btnAction && (
-        <KeyvalButton data-cy={'add-action-button'} onClick={btnAction} style={BUTTON_STYLES}>
-          <PlusIcon />
-          <KeyvalText size={16} weight={700} color={theme.text.dark_button}>
-            {btnTitle}
-          </KeyvalText>
-        </KeyvalButton>
-      )}
-    </EmptyListWrapper>
-  );
-}
diff --git a/frontend/webapp/components/lists/index.tsx b/frontend/webapp/components/lists/index.tsx
deleted file mode 100644
index 59201b3e7..000000000
--- a/frontend/webapp/components/lists/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { EmptyList } from './empty.list/empty.list';
-export * from './step-list';
-export * from './instrumentation-config-list';
diff --git a/frontend/webapp/components/lists/instrumentation-config-list/index.tsx b/frontend/webapp/components/lists/instrumentation-config-list/index.tsx
deleted file mode 100644
index 6e248c86f..000000000
--- a/frontend/webapp/components/lists/instrumentation-config-list/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-
-import { KeyvalText } from '@/design.system';
-import { InstrumentationConfig } from '@/types';
-import { TextInformationWrapper } from './style.styled';
-import InstrumentationConfigListItem from './instrumentation-config-list-item';
-
-const SOURCES = {
-  INSTRUMENTATION_CONFIG_LIBRARIES: 'Data Collection Settings',
-  INSTRUMENTATION_CONFIG_INFO:
-    'Boost your trace data with precision. Every selection from these libraries contributes essential details to the data sent to the chosen destinations, empowering you with richer insights.',
-};
-
-interface InstrumentationConfigListProps {
-  list: InstrumentationConfig[] | undefined;
-  onChange: (list: InstrumentationConfig[]) => void;
-}
-
-export function InstrumentationConfigList({
-  list,
-  onChange,
-}: InstrumentationConfigListProps) {
-  function onOptionChange(option: InstrumentationConfig) {
-    const newConfig = list?.map((item: InstrumentationConfig) => {
-      if (
-        item.optionKey === option.optionKey &&
-        item.spanKind === option.spanKind
-      ) {
-        return {
-          ...option,
-        };
-      }
-      return item;
-    });
-
-    onChange(newConfig || []);
-  }
-
-  return (
-    <div style={{ maxWidth: 500 }}>
-      <TextInformationWrapper>
-        <KeyvalText weight={600} size={18}>
-          {SOURCES.INSTRUMENTATION_CONFIG_LIBRARIES}
-        </KeyvalText>
-        <KeyvalText style={{ lineHeight: '1.3' }} size={14}>
-          {SOURCES.INSTRUMENTATION_CONFIG_INFO}
-        </KeyvalText>
-      </TextInformationWrapper>
-      {list?.map((item: InstrumentationConfig, index: number) => (
-        <div key={index}>
-          <InstrumentationConfigListItem
-            item={item}
-            onOptionChange={onOptionChange}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/frontend/webapp/components/lists/instrumentation-config-list/instrumentation-config-list-item.tsx b/frontend/webapp/components/lists/instrumentation-config-list/instrumentation-config-list-item.tsx
deleted file mode 100644
index fc1377509..000000000
--- a/frontend/webapp/components/lists/instrumentation-config-list/instrumentation-config-list-item.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  HeaderItemWrapper,
-  InstrumentationConfigHeaderContent,
-  InstrumentationConfigItemContainer,
-  InstrumentationConfigItemContent,
-  InstrumentationConfigItemHeader,
-  StyledItemCountContainer,
-} from './style.styled';
-import { KeyvalCheckbox, KeyvalTag, KeyvalText } from '@/design.system';
-import InstrumentedLibraryOption from './library-option';
-import { InstrumentationConfig, InstrumentationConfigLibrary } from '@/types';
-import theme from '@/styles/palette';
-import { ExpandIcon } from '@keyval-dev/design-system';
-const InstrumentationConfigListItem = ({
-  item,
-  onOptionChange,
-}: {
-  children?: JSX.Element;
-  item: InstrumentationConfig;
-  onOptionChange: (item: any) => void;
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleLibOptions = () => {
-    setIsOpen(!isOpen);
-  };
-
-  function renderOptions() {
-    return item.instrumentationLibraries.map(
-      (lib: InstrumentationConfigLibrary) => (
-        <InstrumentedLibraryOption
-          key={lib.instrumentationLibraryName}
-          name={lib.instrumentationLibraryName}
-          selected={!!lib.selected}
-          onChange={() => onLibChange(lib.instrumentationLibraryName)}
-          disabled={false}
-        />
-      )
-    );
-  }
-
-  function onOptionKeyChange() {
-    const newLibraries = item.instrumentationLibraries.map((lib) => ({
-      ...lib,
-      selected: !item.optionValueBoolean,
-    }));
-    onOptionChange({
-      ...item,
-      optionValueBoolean: !item.optionValueBoolean,
-      instrumentationLibraries: newLibraries,
-    });
-  }
-
-  function onLibChange(name: string) {
-    const instrumentationLibraries = item.instrumentationLibraries.map((lib) =>
-      lib.instrumentationLibraryName === name
-        ? { ...lib, selected: !lib.selected }
-        : lib
-    );
-
-    const optionValueBoolean = instrumentationLibraries.some(
-      (lib) => lib.selected
-    );
-
-    onOptionChange({
-      ...item,
-      optionValueBoolean,
-      instrumentationLibraries,
-    });
-  }
-
-  function getSelectedLibrariesCount() {
-    return item.instrumentationLibraries?.filter(
-      (lib: InstrumentationConfigLibrary) => lib.selected
-    ).length;
-  }
-
-  function renderHeader() {
-    return (
-      <InstrumentationConfigItemHeader>
-        <KeyvalCheckbox
-          value={!!item.optionValueBoolean}
-          onChange={onOptionKeyChange}
-        />
-
-        <InstrumentationConfigHeaderContent onClick={toggleLibOptions}>
-          <div>
-            <HeaderItemWrapper>
-              <KeyvalText size={14} weight={600}>
-                {item.optionKey}
-              </KeyvalText>
-
-              <KeyvalTag
-                title={item.spanKind}
-                color={
-                  item.spanKind === 'Server'
-                    ? theme.colors.dark_blue
-                    : theme.colors.blue_grey
-                }
-              />
-            </HeaderItemWrapper>
-          </div>
-          <HeaderItemWrapper>
-            <StyledItemCountContainer>
-              <KeyvalText
-                color={theme.text.secondary}
-                size={12}
-              >{`${getSelectedLibrariesCount()}/${
-                item.instrumentationLibraries?.length
-              } libraries`}</KeyvalText>
-            </StyledItemCountContainer>
-
-            <ExpandIcon className={`dropdown-arrow ${isOpen && 'open'}`} />
-          </HeaderItemWrapper>
-        </InstrumentationConfigHeaderContent>
-      </InstrumentationConfigItemHeader>
-    );
-  }
-
-  return (
-    <InstrumentationConfigItemContainer>
-      {renderHeader()}
-      <InstrumentationConfigItemContent open={isOpen}>
-        {renderOptions()}
-      </InstrumentationConfigItemContent>
-    </InstrumentationConfigItemContainer>
-  );
-};
-
-export default InstrumentationConfigListItem;
diff --git a/frontend/webapp/components/lists/instrumentation-config-list/library-option.tsx b/frontend/webapp/components/lists/instrumentation-config-list/library-option.tsx
deleted file mode 100644
index 40a158d61..000000000
--- a/frontend/webapp/components/lists/instrumentation-config-list/library-option.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import {
-  LibCheckboxWrapper,
-  LibNameWrapper,
-  StyledLibraryOptionContainer,
-} from './style.styled';
-
-import { KeyvalCheckbox, KeyvalText } from '@/design.system';
-import theme from '@/styles/palette';
-
-const SOURCES = {
-  LANGUAGE: 'Language',
-  LIBRARY: 'Library',
-};
-
-export default function InstrumentedLibraryOption({
-  name,
-  selected,
-  onChange,
-  disabled = false,
-}: {
-  name: string;
-  selected: boolean;
-  onChange: (name: string) => void;
-  disabled: boolean;
-}) {
-  return (
-    <StyledLibraryOptionContainer style={{ opacity: disabled ? 0.5 : 1 }}>
-      <LibCheckboxWrapper disabled={disabled}>
-        <KeyvalCheckbox
-          value={selected}
-          onChange={() => onChange(name)}
-          disabled={disabled}
-        />
-      </LibCheckboxWrapper>
-      <LibNameWrapper>
-        <KeyvalText size={12} color={theme.text.light_grey}>
-          {SOURCES.LIBRARY}
-        </KeyvalText>
-        <KeyvalText size={14} weight={600}>
-          {name}
-        </KeyvalText>
-      </LibNameWrapper>
-    </StyledLibraryOptionContainer>
-  );
-}
diff --git a/frontend/webapp/components/lists/instrumentation-config-list/style.styled.ts b/frontend/webapp/components/lists/instrumentation-config-list/style.styled.ts
deleted file mode 100644
index bbd579be7..000000000
--- a/frontend/webapp/components/lists/instrumentation-config-list/style.styled.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import styled from 'styled-components';
-
-export const InstrumentationConfigItemContainer = styled.div`
-  border-radius: 8px;
-`;
-
-export const InstrumentationConfigItemHeader = styled.div`
-  display: flex;
-  margin: 12px 0;
-  cursor: pointer;
-  span {
-    width: 18px !important;
-    height: 18px !important;
-  }
-  .dropdown-arrow {
-    transform: rotate(0deg);
-    transition: all 0.2s ease-in-out;
-  }
-
-  .dropdown-arrow.open {
-    transform: rotate(180deg);
-  }
-`;
-
-export const InstrumentationConfigItemContent = styled.div<{ open: boolean }>`
-  display: ${({ open }) => (open ? 'flex' : 'none')};
-  flex-direction: column;
-  gap: 12px;
-  padding: 0px 12px 12px 34px;
-  border-bottom: 1px solid #e5e7eb1a;
-`;
-
-export const StyledItemCountContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 8px;
-  border-radius: 16px;
-  height: 32px;
-`;
-
-export const StyledLibraryOptionContainer = styled.div`
-  width: fit-content;
-  display: flex;
-  gap: 8px;
-
-  span {
-    width: 18px !important;
-    height: 18px !important;
-  }
-`;
-
-export const InstrumentationConfigHeaderContent = styled.div`
-  display: flex;
-  margin-left: 8px;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const HeaderItemWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-export const TextInformationWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-
-export const LibCheckboxWrapper = styled.div<{ disabled: boolean }>`
-  display: flex;
-  align-items: center;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-`;
-
-export const LibNameWrapper = styled.div`
-  width: 200px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
diff --git a/frontend/webapp/components/lists/step-list/index.tsx b/frontend/webapp/components/lists/step-list/index.tsx
deleted file mode 100644
index 4decf75ff..000000000
--- a/frontend/webapp/components/lists/step-list/index.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-import React from 'react';
-import { Steps } from '@/design.system';
-
-const STEP_STATUS = {
-  ACTIVE: 'active',
-  DISABLED: 'disabled',
-  DONE: 'done',
-};
-
-const SETUP_STEPS = [
-  {
-    title: 'Choose Source',
-    index: 0,
-    status: 'disabled',
-    id: 'choose-source',
-  },
-  {
-    title: 'Choose Destination',
-    index: 1,
-    status: 'disabled',
-    id: 'choose-destination',
-  },
-  {
-    title: 'Create Connection',
-    index: 2,
-    status: 'disabled',
-    id: 'create-connection',
-  },
-];
-
-type Step = {
-  index: number;
-  title: string;
-  status: string;
-  id: string;
-  subtitle?: string;
-};
-
-interface SetupStepsProps {
-  currentStepIndex: number;
-}
-
-export function StepsList({ currentStepIndex }: SetupStepsProps) {
-  function buildSteps() {
-    return SETUP_STEPS.map((step: Step) => {
-      return {
-        ...step,
-        status:
-          step.index === currentStepIndex
-            ? STEP_STATUS.ACTIVE
-            : step.index < currentStepIndex
-            ? STEP_STATUS.DONE
-            : STEP_STATUS.DISABLED,
-      };
-    });
-  }
-
-  return <Steps data={buildSteps()} />;
-}
diff --git a/frontend/webapp/components/notification/index.tsx b/frontend/webapp/components/notification/index.tsx
new file mode 100644
index 000000000..d4a074bf8
--- /dev/null
+++ b/frontend/webapp/components/notification/index.tsx
@@ -0,0 +1 @@
+export * from './toast-list';
diff --git a/frontend/webapp/components/notification/notification-container.tsx b/frontend/webapp/components/notification/notification-container.tsx
deleted file mode 100644
index 5b6ed9024..000000000
--- a/frontend/webapp/components/notification/notification-container.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import styled, { keyframes } from 'styled-components';
-import theme from '@/styles/palette';
-
-interface NotificationContainerProps {
-  children: React.ReactNode;
-  type?: string;
-  isLeaving?: boolean;
-  seen?: boolean;
-}
-
-const slideIn = keyframes`
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-`;
-
-const slideOut = keyframes`
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-`;
-
-const StyledNotificationContainer = styled.div<NotificationContainerProps>`
-  border: 1px solid ${theme.colors.blue_grey};
-  background-color: ${theme.colors.dark};
-  border-radius: 8px;
-  padding: 10px;
-  gap: 12px;
-  margin-top: 8px;
-  width: 400px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  animation: ${(props) => (props.isLeaving ? slideOut : slideIn)} 0.5s forwards;
-  &:hover {
-    animation-play-state: paused;
-  }
-`;
-
-const NotificationContent = styled.div`
-  display: flex;
-  gap: 8px;
-`;
-
-const NotificationDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  gap: 8px;
-`;
-
-export const NotificationContainer: React.FC<NotificationContainerProps> = ({
-  children,
-  type,
-  isLeaving,
-  seen,
-}) => (
-  <StyledNotificationContainer type={type} isLeaving={isLeaving} seen={seen}>
-    {children}
-  </StyledNotificationContainer>
-);
-
-export const NotificationContentWrapper = NotificationContent;
-export const NotificationDetailsWrapper = NotificationDetails;
-export const NotificationButtonContainer = ButtonContainer;
diff --git a/frontend/webapp/components/notification/notification-icon.tsx b/frontend/webapp/components/notification/notification-icon.tsx
deleted file mode 100644
index a22e0b402..000000000
--- a/frontend/webapp/components/notification/notification-icon.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import {
-  BlueInfoIcon,
-  GreenCheckIcon,
-  RedErrorIcon,
-} from '@keyval-dev/design-system';
-
-const IconWrapper = styled.div<{ bgColor: string }>`
-  width: 32px;
-  height: 32px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${({ bgColor }) => bgColor};
-`;
-
-const InnerIconWrapper = styled.div<{ borderColor: string }>`
-  width: 16px;
-  height: 16px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid ${({ borderColor }) => borderColor};
-`;
-
-export const SuccessIcon = () => (
-  <IconWrapper bgColor="#3fb94f40">
-    <InnerIconWrapper borderColor="#3fb950">
-      <GreenCheckIcon size={10} />
-    </InnerIconWrapper>
-  </IconWrapper>
-);
-
-export const ErrorIcon = () => (
-  <IconWrapper bgColor="#f8524952">
-    <InnerIconWrapper borderColor="#f85249">
-      <RedErrorIcon size={10} style={{ marginLeft: 2, marginBottom: 2 }} />
-    </InnerIconWrapper>
-  </IconWrapper>
-);
-
-export const InfoIcon = () => (
-  <IconWrapper bgColor="#2196F340">
-    <InnerIconWrapper borderColor="#2196F3">
-      <BlueInfoIcon size={10} />
-    </InnerIconWrapper>
-  </IconWrapper>
-);
-
-export const getIcon = (type) => {
-  switch (type) {
-    case 'success':
-      return <SuccessIcon />;
-    case 'error':
-      return <ErrorIcon />;
-    case 'info':
-      return <InfoIcon />;
-    default:
-      return null;
-  }
-};
diff --git a/frontend/webapp/components/notification/notification-list-item.tsx b/frontend/webapp/components/notification/notification-list-item.tsx
deleted file mode 100644
index 4ca0cb922..000000000
--- a/frontend/webapp/components/notification/notification-list-item.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import { ROUTES, timeAgo } from '@/utils';
-import { useRouter } from 'next/navigation';
-import { getIcon } from './notification-icon';
-import { KeyvalLink, KeyvalText } from '@/design.system';
-import { NotificationButtonContainer, NotificationDetailsWrapper } from './notification-container';
-import { Notification } from '@/types';
-
-const NotificationItemContainer = styled.div<{ seen: boolean }>`
-  border-bottom: 1px solid ${theme.colors.blue_grey};
-  padding: 10px;
-  gap: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: ${({ seen }) => (seen ? theme.colors.light_dark : theme.colors.dark)};
-
-  &:hover {
-    background-color: ${theme.colors.dark};
-  }
-`;
-
-const NotificationContent = styled.div`
-  display: flex;
-  width: 300px;
-  gap: 8px;
-`;
-
-const NotificationListItem: React.FC<Notification> = ({ message, type, seen, title, crdType, target, time }) => {
-  const router = useRouter();
-
-  function onDetailsClick() {
-    if (target) {
-      switch (crdType) {
-        case 'Destination':
-          router.push(`${ROUTES.UPDATE_DESTINATION}${target}`);
-          break;
-        case 'InstrumentedApplication':
-        case 'InstrumentationInstance':
-          router.push(`${ROUTES.MANAGE_SOURCE}?${target}`);
-          break;
-        default:
-          break;
-      }
-    }
-  }
-  return (
-    <NotificationItemContainer seen={seen}>
-      <NotificationContent>
-        <div>{getIcon(type)}</div>
-        <NotificationDetailsWrapper>
-          <KeyvalText size={16} weight={600}>
-            {title}
-          </KeyvalText>
-          <KeyvalText size={14}>{message}</KeyvalText>
-          {time && (
-            <KeyvalText color={theme.text.light_grey} size={12}>
-              {timeAgo(time)}
-            </KeyvalText>
-          )}
-        </NotificationDetailsWrapper>
-      </NotificationContent>
-      <NotificationButtonContainer>{!!target && <KeyvalLink fontSize={12} value='Details' onClick={onDetailsClick} />}</NotificationButtonContainer>
-    </NotificationItemContainer>
-  );
-};
-
-export default NotificationListItem;
diff --git a/frontend/webapp/components/notification/notification-list.tsx b/frontend/webapp/components/notification/notification-list.tsx
deleted file mode 100644
index 40f5d2880..000000000
--- a/frontend/webapp/components/notification/notification-list.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import theme from '@/styles/palette';
-import { BellIcon } from '@keyval-dev/design-system';
-import { KeyvalText } from '@/design.system';
-import { useOnClickOutside } from '@/hooks';
-import NotificationListItem from './notification-list-item';
-import { useNotificationStore } from '@/store';
-
-const NotificationListContainer = styled.div`
-  position: absolute;
-  top: 50px;
-  right: 60px;
-  background-color: ${theme.colors.light_dark};
-  border: 1px solid ${theme.colors.blue_grey};
-  border-radius: 8px;
-  max-height: 400px;
-  overflow-y: auto;
-  z-index: 1000;
-`;
-
-const BellIconWrapper = styled.div`
-  position: relative;
-  padding: 6px;
-  border-radius: 8px;
-  border: 1px solid ${theme.colors.blue_grey};
-  display: flex;
-  align-items: center;
-  &:hover {
-    background-color: ${theme.colors.dark};
-  }
-`;
-
-const NotificationBadge = styled.div`
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background-color: red;
-  color: white;
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-`;
-
-const NotificationHeader = styled.div`
-  padding: 14px;
-  border-bottom: 1px solid ${theme.colors.blue_grey};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const NotificationList: React.FC = () => {
-  const [showNotifications, setShowNotifications] = useState(false);
-  const { notifications, markAsSeen } = useNotificationStore();
-
-  const containerRef = useRef(null);
-  const isInitialRender = useRef(true);
-  useOnClickOutside(containerRef, () => setShowNotifications(false));
-  const unseenCount = notifications.filter((notification) => !notification.seen).length;
-
-  useEffect(() => {
-    if (isInitialRender.current) {
-      isInitialRender.current = false;
-      return;
-    }
-
-    if (!showNotifications) {
-      markAllAsSeen();
-    }
-  }, [showNotifications]);
-
-  function markAllAsSeen() {
-    notifications.forEach((notification) => {
-      if (!notification.seen) {
-        markAsSeen(notification.id);
-      }
-    });
-  }
-
-  return notifications.length > 0 ? (
-    <div ref={containerRef}>
-      <BellIconWrapper>
-        <BellIcon style={{ cursor: 'pointer' }} size={20} onClick={() => setShowNotifications(!showNotifications)} />
-        {unseenCount > 0 && (
-          <NotificationBadge>
-            <KeyvalText size={10}>{unseenCount}</KeyvalText>
-          </NotificationBadge>
-        )}
-      </BellIconWrapper>
-      {showNotifications && (
-        <NotificationListContainer>
-          <NotificationHeader>
-            <KeyvalText size={18} weight={600}>
-              Notifications
-            </KeyvalText>
-          </NotificationHeader>
-
-          {[...notifications].reverse().map((notification) => (
-            <NotificationListItem key={notification.id} {...notification} />
-          ))}
-        </NotificationListContainer>
-      )}
-    </div>
-  ) : null;
-};
diff --git a/frontend/webapp/components/overview/actions/action.icon/index.tsx b/frontend/webapp/components/overview/actions/action.icon/index.tsx
deleted file mode 100644
index 877be406f..000000000
--- a/frontend/webapp/components/overview/actions/action.icon/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { ActionsType } from '@/types';
-import {
-  AddClusterInfoIcon,
-  DeleteAttributeIcon,
-  ErrorSamplerIcon,
-  RenameAttributeIcon,
-  ProbabilisticSamplerIcon,
-  LatencySamplerIcon,
-  PiiMaskingIcon,
-} from '@keyval-dev/design-system';
-
-export function ActionIcon({ type, ...props }) {
-  switch (type) {
-    case ActionsType.ADD_CLUSTER_INFO:
-      return <AddClusterInfoIcon {...props} />;
-    case ActionsType.RENAME_ATTRIBUTES:
-      return <RenameAttributeIcon {...props} />;
-    case ActionsType.DELETE_ATTRIBUTES:
-      return <DeleteAttributeIcon {...props} />;
-    case ActionsType.ERROR_SAMPLER:
-      return <ErrorSamplerIcon {...props} />;
-    case ActionsType.PROBABILISTIC_SAMPLER:
-      return <ProbabilisticSamplerIcon {...props} />;
-    case ActionsType.LATENCY_SAMPLER:
-      return <LatencySamplerIcon {...props} />;
-    case ActionsType.PII_MASKING:
-      return <PiiMaskingIcon {...props} />;
-    default:
-      return null;
-  }
-}
diff --git a/frontend/webapp/components/overview/actions/action.yaml/add.cluster.info.yaml.tsx b/frontend/webapp/components/overview/actions/action.yaml/add.cluster.info.yaml.tsx
deleted file mode 100644
index 8824adfc4..000000000
--- a/frontend/webapp/components/overview/actions/action.yaml/add.cluster.info.yaml.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { ActionState } from '@/types';
-import { YMLEditor } from '@/design.system';
-
-export default function AddClusterInfoYaml({
-  data,
-  setEchoCommand,
-}: {
-  data: ActionState;
-  setEchoCommand: (value: string) => void;
-}) {
-  const [yaml, setYaml] = useState({});
-  useEffect(() => {
-    if (data.actionName && data.actionName.endsWith(' ')) {
-      return;
-    }
-
-    if (data.actionNote && data.actionNote.endsWith(' ')) {
-      return;
-    }
-
-    const clusterAttributes = data.actionData?.clusterAttributes.map(
-      (attr) => ({
-        [attr.attributeName]: attr.attributeStringValue,
-      })
-    );
-
-    const newYaml = {
-      apiVersion: 'actions.odigos.io/v1alpha1',
-      kind: 'AddClusterInfo',
-      metadata: {
-        generateName: 'da-',
-        namespace: 'odigos-system',
-      },
-      spec: {
-        actionName: data.actionName || undefined,
-        clusterAttributes,
-        signals: data.selectedMonitors
-          .filter((m) => m.checked)
-          .map((m) => m.label.toUpperCase()),
-        actionNote: data.actionNote || undefined,
-      },
-    };
-
-    const echoCommand = `echo "
-  apiVersion: actions.odigos.io/v1alpha1
-  kind: AddClusterInfo
-  metadata:
-    generateName: da-
-    namespace: odigos-system
-  spec:
-    ${data.actionName ? `actionName: ${data.actionName}` : ''}
-    ${
-      data.actionData?.clusterAttributes
-        ? `clusterAttributes: 
-      ${data.actionData.clusterAttributes
-        .map((attr) => `  ${attr.attributeName}: ${attr.attributeStringValue}`)
-        .join('\n      ')}`
-        : ''
-    }
-    signals:
-      - ${data.selectedMonitors
-        .filter((m) => m.checked)
-        .map((m) => m.label.toUpperCase())
-        .join('\n      - ')}
-    ${data.actionNote ? `actionNote: ${data.actionNote}` : ''}
-  " | kubectl create -f -
-                  
-    `;
-    setEchoCommand(echoCommand);
-    setYaml(newYaml);
-  }, [data]);
-
-  if (Object.keys(yaml).length === 0) {
-    return null;
-  }
-
-  return <YMLEditor data={yaml} />;
-}
diff --git a/frontend/webapp/components/overview/actions/action.yaml/delete.attribute.yaml.tsx b/frontend/webapp/components/overview/actions/action.yaml/delete.attribute.yaml.tsx
deleted file mode 100644
index 83363934d..000000000
--- a/frontend/webapp/components/overview/actions/action.yaml/delete.attribute.yaml.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { ActionState } from '@/types';
-import { YMLEditor } from '@/design.system';
-
-export default function DeleteAttributeYaml({
-  data,
-  setEchoCommand,
-}: {
-  data: ActionState;
-  setEchoCommand: (value: string) => void;
-}) {
-  const [yaml, setYaml] = useState({});
-
-  useEffect(() => {
-    if (data.actionName && data.actionName.endsWith(' ')) {
-      return;
-    }
-
-    if (data.actionNote && data.actionNote.endsWith(' ')) {
-      return;
-    }
-
-    if (data.actionData?.attributeNamesToDelete) {
-      if (
-        data.actionData.attributeNamesToDelete.some((attr) =>
-          attr.endsWith(' ')
-        )
-      ) {
-        return;
-      }
-    }
-
-    const newYaml = {
-      apiVersion: 'actions.odigos.io/v1alpha1',
-      kind: 'DeleteAttribute',
-      metadata: {
-        generateName: 'da-',
-        namespace: 'odigos-system',
-      },
-      spec: {
-        actionName: data.actionName || undefined,
-        attributeNamesToDelete: data.actionData?.attributeNamesToDelete,
-        signals: data.selectedMonitors
-          .filter((m) => m.checked)
-          .map((m) => m.label.toUpperCase()),
-        actionNote: data.actionNote || undefined,
-      },
-    };
-    setYaml(newYaml);
-
-    const echoCommand = `echo "
-  apiVersion: actions.odigos.io/v1alpha1
-  kind: DeleteAttribute
-  metadata:
-    generateName: da-
-    namespace: odigos-system
-  spec:
-    ${data.actionName ? `actionName: ${data.actionName}` : ''}
-    ${
-      data.actionData?.attributeNamesToDelete
-        ? `attributeNamesToDelete:
-      - ${data.actionData?.attributeNamesToDelete
-        .filter((attr) => attr !== '')
-        .join('\n      - ')}`
-        : ''
-    }
-    signals:
-      - ${data.selectedMonitors
-        .filter((m) => m.checked)
-        .map((m) => m.label.toUpperCase())
-        .join('\n      - ')}
-    ${data.actionNote ? `actionNote: ${data.actionNote}` : ''}
-  " | kubectl create -f -
-                  
-    `;
-    setEchoCommand(echoCommand);
-  }, [data]);
-
-  if (Object.keys(yaml).length === 0) {
-    return null;
-  }
-
-  return <YMLEditor data={yaml} />;
-}
diff --git a/frontend/webapp/components/overview/actions/action.yaml/index.tsx b/frontend/webapp/components/overview/actions/action.yaml/index.tsx
deleted file mode 100644
index f74aa76b4..000000000
--- a/frontend/webapp/components/overview/actions/action.yaml/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { useState } from 'react';
-import { ActionState, ActionsType } from '@/types';
-import DeleteAttributeYaml from './delete.attribute.yaml';
-import { KeyvalText } from '@/design.system';
-import styled from 'styled-components';
-import AddClusterInfoYaml from './add.cluster.info.yaml';
-
-import theme from '@/styles/palette';
-import { CheckIcon, CopyIcon, YamlIconIcon } from '@keyval-dev/design-system';
-
-const CodeBlockWrapper = styled.p`
-  display: flex;
-  align-items: center;
-  font-family: ${theme.font_family.primary};
-  color: ${theme.text.light_grey};
-  a {
-    color: ${theme.text.secondary};
-    text-decoration: none;
-    cursor: pointer;
-  }
-`;
-const TitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 8px;
-  max-width: 600px;
-`;
-
-const DescriptionWrapper = styled(TitleWrapper)`
-  line-height: 1.3;
-  margin: 10px 0 8px 0;
-`;
-
-interface ActionsYamlProps {
-  data: ActionState;
-  onChange: (key: string, value: any) => void;
-}
-
-export function ActionsYaml({ data, onChange }: ActionsYamlProps) {
-  const [copied, setCopied] = useState(false);
-  const [echoCommand, setEchoCommand] = useState('');
-
-  function renderYamlEditor() {
-    switch (data.type) {
-      case ActionsType.DELETE_ATTRIBUTES:
-        return (
-          <DeleteAttributeYaml data={data} setEchoCommand={setEchoCommand} />
-        );
-      case ActionsType.ADD_CLUSTER_INFO:
-        return (
-          <AddClusterInfoYaml data={data} setEchoCommand={setEchoCommand} />
-        );
-      default:
-        return <></>;
-    }
-  }
-
-  function handleCopy() {
-    navigator.clipboard.writeText(echoCommand);
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 3000);
-  }
-
-  return (
-    <div>
-      <TitleWrapper>
-        <YamlIconIcon style={{ width: 20, height: 20 }} />
-        <KeyvalText
-          weight={600}
-        >{`YAML Preview - ${data.type.toLowerCase()}.actions.odigos.io`}</KeyvalText>
-      </TitleWrapper>
-
-      <DescriptionWrapper>
-        <KeyvalText size={14}>
-          This is the YAML representation of the action you are creating. You
-          can use this YAML to create the action using kubectl as well as the
-          UI.
-        </KeyvalText>
-        <KeyvalText size={14}></KeyvalText>
-      </DescriptionWrapper>
-      <div style={{ width: 400 }}>{renderYamlEditor()}</div>
-      <div style={{ overflowX: 'hidden' }}>
-        <CodeBlockWrapper>
-          {copied ? (
-            <CheckIcon style={{ width: 18, height: 12 }} />
-          ) : (
-            <CopyIcon style={{ width: 18, height: 16 }} />
-          )}
-          <a style={{ margin: '0 4px' }} onClick={handleCopy}>
-            Click here
-          </a>
-          to copy as kubectl command.
-        </CodeBlockWrapper>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.forms/add.cluster.info/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/add.cluster.info/index.tsx
deleted file mode 100644
index ac594622b..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/add.cluster.info/index.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import { KeyValuePair } from '@/design.system';
-import { KeyValue } from '@keyval-dev/design-system';
-
-const DEFAULT_KEY_VALUE_PAIR = [
-  {
-    id: 0,
-    key: '',
-    value: '',
-  },
-];
-
-const FormWrapper = styled.div`
-  width: 375px;
-`;
-
-interface ClusterAttributes {
-  clusterAttributes: {
-    attributeName: string;
-    attributeStringValue: string;
-  }[];
-}
-
-interface AddClusterInfoFormProps {
-  data: ClusterAttributes | null;
-  onChange: (key: string, keyValues: ClusterAttributes | null) => void;
-  setIsFormValid?: (value: boolean) => void;
-}
-
-const ACTION_DATA_KEY = 'actionData';
-
-export function AddClusterInfoForm({
-  data,
-  onChange,
-  setIsFormValid = () => {},
-}: AddClusterInfoFormProps): React.JSX.Element {
-  const [keyValuePairs, setKeyValuePairs] = React.useState<KeyValue[]>([]);
-
-  useEffect(() => {
-    buildKeyValuePairs();
-  }, [data]);
-
-  useEffect(() => {
-    validateForm();
-  }, [keyValuePairs]);
-
-  function handleKeyValuesChange(keyValues: KeyValue[]): void {
-    const actionData = {
-      clusterAttributes: keyValues.map((keyValue) => ({
-        attributeName: keyValue.key,
-        attributeStringValue: keyValue.value,
-      })),
-    };
-
-    if (
-      actionData.clusterAttributes.length === 1 &&
-      actionData.clusterAttributes[0].attributeName === '' &&
-      actionData.clusterAttributes[0].attributeStringValue === ''
-    ) {
-      onChange(ACTION_DATA_KEY, null);
-    } else {
-      onChange(ACTION_DATA_KEY, actionData);
-    }
-
-    setKeyValuePairs(keyValues); // Update state with new key-value pairs
-  }
-
-  function buildKeyValuePairs() {
-    if (data?.clusterAttributes.length === 0) {
-      setKeyValuePairs(DEFAULT_KEY_VALUE_PAIR);
-    }
-
-    const values = data?.clusterAttributes.map((keyValue, index) => ({
-      id: index,
-      key: keyValue.attributeName,
-      value: keyValue.attributeStringValue,
-    }));
-
-    setKeyValuePairs(values || DEFAULT_KEY_VALUE_PAIR);
-  }
-
-  function validateForm() {
-    const isValid = keyValuePairs.every(
-      (pair) => pair.key.trim() !== '' && pair.value.trim() !== ''
-    );
-    setIsFormValid(isValid);
-  }
-
-  return (
-    <>
-      <FormWrapper>
-        <KeyValuePair
-          title="Cluster Attributes *"
-          titleKey="Attribute"
-          titleButton="Add Attribute"
-          keyValues={keyValuePairs}
-          setKeyValues={handleKeyValuesChange}
-        />
-      </FormWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.forms/delete.attribute/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/delete.attribute/index.tsx
deleted file mode 100644
index f05e81c47..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/delete.attribute/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import { MultiInputTable } from '@/design.system';
-
-const FormWrapper = styled.div`
-  width: 375px;
-`;
-
-interface DeleteAttributes {
-  attributeNamesToDelete: string[];
-}
-
-interface DeleteAttributesProps {
-  data: DeleteAttributes;
-  onChange: (key: string, value: DeleteAttributes | null) => void;
-  setIsFormValid?: (value: boolean) => void;
-}
-const ACTION_DATA_KEY = 'actionData';
-
-export function DeleteAttributesForm({
-  data,
-  onChange,
-  setIsFormValid = () => {},
-}: DeleteAttributesProps): React.JSX.Element {
-  const [attributeNames, setAttributeNames] = React.useState<string[]>(
-    data?.attributeNamesToDelete || ['']
-  );
-
-  useEffect(() => {
-    validateForm();
-  }, [attributeNames]);
-
-  function handleOnChange(attributeNamesToDelete: string[]): void {
-    onChange(ACTION_DATA_KEY, {
-      attributeNamesToDelete,
-    });
-    setAttributeNames(attributeNamesToDelete);
-  }
-
-  function validateForm() {
-    const isValid = attributeNames.every((name) => name.trim() !== '');
-    setIsFormValid(isValid);
-  }
-
-  return (
-    <>
-      <FormWrapper>
-        <MultiInputTable
-          placeholder="Add attribute names to delete"
-          required
-          title="Attribute Names to Delete"
-          values={attributeNames.length > 0 ? attributeNames : ['']}
-          onValuesChange={handleOnChange}
-        />
-      </FormWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.forms/dynamic.action.form/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/dynamic.action.form/index.tsx
deleted file mode 100644
index 60b77d20b..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/dynamic.action.form/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-import React from 'react';
-import { ActionsType } from '@/types';
-import { AddClusterInfoForm } from '../add.cluster.info';
-import { DeleteAttributesForm } from '../delete.attribute';
-import { RenameAttributesForm } from '../rename.attributes';
-import {
-  ErrorSamplerForm,
-  LatencySamplerForm,
-  ProbabilisticSamplerForm,
-} from '../samplers';
-import { PiiMaskingForm } from '../pii-masking';
-
-interface DynamicActionFormProps<T = any> {
-  type?: string;
-  data: T;
-  onChange: (key: string, value: T | null) => void;
-  setIsFormValid?: (isValid: boolean) => void;
-}
-
-export function DynamicActionForm({
-  type,
-  data,
-  onChange,
-  setIsFormValid = () => {},
-}: DynamicActionFormProps): React.JSX.Element {
-  const formComponents = {
-    [ActionsType.ADD_CLUSTER_INFO]: AddClusterInfoForm,
-    [ActionsType.DELETE_ATTRIBUTES]: DeleteAttributesForm,
-    [ActionsType.RENAME_ATTRIBUTES]: RenameAttributesForm,
-    [ActionsType.ERROR_SAMPLER]: ErrorSamplerForm,
-    [ActionsType.PROBABILISTIC_SAMPLER]: ProbabilisticSamplerForm,
-    [ActionsType.LATENCY_SAMPLER]: LatencySamplerForm,
-    [ActionsType.PII_MASKING]: PiiMaskingForm,
-  };
-
-  const FormComponent = type ? formComponents[type] : null;
-
-  return (
-    <>
-      {FormComponent ? (
-        <FormComponent
-
-          data={data}
-          onChange={onChange}
-          setIsFormValid={setIsFormValid}
-        />
-      ) : (
-        <div>No action form available</div>
-      )}
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.forms/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/index.tsx
deleted file mode 100644
index 95f16f856..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './add.cluster.info';
-export * from './dynamic.action.form';
diff --git a/frontend/webapp/components/overview/actions/actions.forms/pii-masking/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/pii-masking/index.tsx
deleted file mode 100644
index 88ebb3899..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/pii-masking/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { KeyvalCheckbox } from '@/design.system';
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-
-const piiCategoriesCheckbox = [
-  {
-    id: 'CREDIT_CARD',
-    label: 'Credit Card',
-  },
-];
-
-const FormWrapper = styled.div`
-  width: 375px;
-`;
-
-interface PiiMasking {
-  piiCategories: string[];
-}
-
-interface PiiMaskingProps {
-  data: PiiMasking;
-  onChange: (key: string, value: PiiMasking | null) => void;
-  setIsFormValid?: (isValid: boolean) => void;
-}
-const ACTION_DATA_KEY = 'actionData';
-export function PiiMaskingForm({
-  data,
-  onChange,
-  setIsFormValid,
-}: PiiMaskingProps): React.JSX.Element {
-  useEffect(() => {
-    onChange(ACTION_DATA_KEY, {
-      piiCategories: ['CREDIT_CARD'],
-    });
-    setIsFormValid && setIsFormValid(true);
-  }, []);
-
-  function handleOnChange(value: string): void {
-    let piiCategories: string[] = [];
-
-    if (piiCategories.includes(value)) {
-      piiCategories = piiCategories.filter((category) => category !== value);
-    } else {
-      piiCategories.push(value);
-    }
-
-    onChange(ACTION_DATA_KEY, {
-      piiCategories,
-    });
-  }
-
-  return (
-    <>
-      <FormWrapper>
-        {piiCategoriesCheckbox.map((checkbox) => (
-          <KeyvalCheckbox
-            disabled
-            key={checkbox?.id}
-            value={data?.piiCategories?.includes(checkbox?.id)}
-            onChange={() => handleOnChange(checkbox?.id)}
-            label={checkbox?.label}
-          />
-        ))}
-      </FormWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.forms/rename.attributes/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/rename.attributes/index.tsx
deleted file mode 100644
index b9b62c122..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/rename.attributes/index.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import { KeyValuePair } from '@/design.system';
-import { KeyValue } from '@keyval-dev/design-system';
-
-const FormWrapper = styled.div`
-  width: 375px;
-`;
-
-interface RenameAttributes {
-  renames: {
-    [key: string]: string;
-  };
-}
-
-interface RenameAttributesProps {
-  data: RenameAttributes;
-  onChange: (key: string, value: RenameAttributes) => void;
-  setIsFormValid?: (value: boolean) => void;
-}
-
-const DEFAULT_KEY_VALUE_PAIR = [
-  {
-    id: 0,
-    key: '',
-    value: '',
-  },
-];
-
-const ACTION_DATA_KEY = 'actionData';
-
-export function RenameAttributesForm({
-  data,
-  onChange,
-  setIsFormValid = () => {},
-}: RenameAttributesProps): React.JSX.Element {
-  const [keyValuePairs, setKeyValuePairs] = React.useState<KeyValue[]>([]);
-
-  useEffect(() => {
-    buildKeyValuePairs();
-  }, [data]);
-
-  useEffect(() => {
-    validateForm();
-  }, [keyValuePairs]);
-
-  function handleKeyValuesChange(keyValues: KeyValue[]): void {
-    const renames: {
-      [key: string]: string;
-    } = {};
-    keyValues.forEach((keyValue) => {
-      renames[keyValue.key] = keyValue.value;
-    });
-
-    onChange(ACTION_DATA_KEY, { renames });
-    setKeyValuePairs(keyValues); // Update state with new key-value pairs
-  }
-
-  function buildKeyValuePairs() {
-    if (!data?.renames) {
-      setKeyValuePairs(DEFAULT_KEY_VALUE_PAIR);
-      return;
-    }
-
-    const values = Object.entries(data.renames).map(([key, value], index) => ({
-      id: index,
-      key,
-      value,
-    }));
-
-    setKeyValuePairs(values || DEFAULT_KEY_VALUE_PAIR);
-  }
-
-  function validateForm() {
-    const isValid = keyValuePairs.every(
-      (pair) => pair.key.trim() !== '' && pair.value.trim() !== ''
-    );
-    setIsFormValid(isValid);
-  }
-
-  return (
-    <>
-      <FormWrapper>
-        <KeyValuePair
-          title="Attributes To Rename  *"
-          titleKey="Original Attribute"
-          titleValue="New Attribute"
-          titleButton="Add Attribute"
-          keyValues={keyValuePairs}
-          setKeyValues={handleKeyValuesChange}
-        />
-      </FormWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.forms/samplers/error-sampler/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/samplers/error-sampler/index.tsx
deleted file mode 100644
index acd15e8cf..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/samplers/error-sampler/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import { KeyvalInput } from '@/design.system';
-
-const FormWrapper = styled.div`
-  width: 375px;
-`;
-
-interface ErrorSampler {
-  fallback_sampling_ratio: number;
-}
-
-interface ErrorSamplerFormProps {
-  data: ErrorSampler;
-  onChange: (key: string, value: ErrorSampler | null) => void;
-  setIsFormValid?: (value: boolean) => void;
-}
-
-const ACTION_DATA_KEY = 'actionData';
-
-export function ErrorSamplerForm({
-  data,
-  onChange,
-  setIsFormValid = () => {},
-}: ErrorSamplerFormProps): React.JSX.Element {
-  useEffect(() => {
-    validateForm();
-  }, [data?.fallback_sampling_ratio]);
-
-  function handleOnChange(fallback_sampling_ratio: number): void {
-    onChange(ACTION_DATA_KEY, {
-      fallback_sampling_ratio,
-    });
-  }
-
-  function validateForm() {
-    const isValid =
-      !isNaN(data?.fallback_sampling_ratio) &&
-      data?.fallback_sampling_ratio >= 0 &&
-      data?.fallback_sampling_ratio <= 100;
-
-    setIsFormValid(isValid);
-  }
-
-  return (
-    <>
-      <FormWrapper>
-        <KeyvalInput
-          label="Fallback Sampling Ratio"
-          value={data?.fallback_sampling_ratio?.toString()}
-          onChange={(value) => handleOnChange(+value)}
-          type="number"
-          tooltip="Specifies the ratio of non-error traces you still want to retain"
-          min={0}
-          max={100}
-          error={
-            data?.fallback_sampling_ratio > 100
-              ? 'Value must be less than 100'
-              : ''
-          }
-        />
-      </FormWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.forms/samplers/index.ts b/frontend/webapp/components/overview/actions/actions.forms/samplers/index.ts
deleted file mode 100644
index 0760d0fa9..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/samplers/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './error-sampler';
-export * from './probabilistic-sampler';
-export * from './latency-action';
diff --git a/frontend/webapp/components/overview/actions/actions.forms/samplers/latency-action/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/samplers/latency-action/index.tsx
deleted file mode 100644
index 740605a1e..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/samplers/latency-action/index.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useSources } from '@/hooks';
-import styled from 'styled-components';
-import {
-  KeyvalButton,
-  KeyvalDropDown,
-  KeyvalInput,
-  KeyvalLink,
-  KeyvalText,
-} from '@/design.system';
-import theme from '@/styles/palette';
-import { Tooltip } from '@keyval-dev/design-system';
-
-const FormWrapper = styled.div`
-  width: fit-content;
-`;
-
-const Table = styled.table`
-  margin-top: 8px;
-  width: 100%;
-  border-collapse: collapse;
-`;
-
-const TableHeader = styled.th`
-  text-align: left;
-  padding-bottom: 4px;
-`;
-
-const TableCell = styled.td`
-  width: 220px;
-  padding-bottom: 24px;
-`;
-
-interface HttpRouteFilter {
-  fallback_sampling_ratio?: number;
-  minimum_latency_threshold?: number;
-  http_route?: string;
-  service_name?: string;
-  errors?: {
-    fallback_sampling_ratio?: string;
-    minimum_latency_threshold?: string;
-    http_route?: string;
-    service_name?: string;
-  };
-}
-
-interface LatencySampler {
-  endpoints_filters: HttpRouteFilter[];
-}
-
-interface LatencySamplerFormProps {
-  data: LatencySampler;
-  onChange: (key: string, value: LatencySampler | null) => void;
-  setIsFormValid?: (value: boolean) => void;
-}
-
-const ACTION_DATA_KEY = 'actionData';
-
-export function LatencySamplerForm({
-  data,
-  onChange,
-  setIsFormValid = () => {},
-}: LatencySamplerFormProps): React.JSX.Element {
-  const { sources } = useSources();
-  const [filters, setFilters] = useState<HttpRouteFilter[]>(
-    data?.endpoints_filters.length ? data.endpoints_filters : [{}]
-  );
-
-  useEffect(() => {
-    if (filters.length === 0) {
-      setFilters([{}]);
-    }
-    checkFormValidity(filters);
-  }, [filters]);
-
-  const memoizedSources = React.useMemo(() => {
-    return sources?.map((source, index) => ({
-      id: index,
-      label: source.name,
-    }));
-  }, [sources]);
-
-  function handleOnChange(index: number, key: string, value: any): void {
-    const updatedFilters = filters.map((filter, i) =>
-      i === index ? { ...filter, [key]: value } : filter
-    );
-    setFilters(updatedFilters);
-    onChange(ACTION_DATA_KEY, { endpoints_filters: updatedFilters });
-    checkFormValidity(updatedFilters);
-  }
-
-  function handleOnBlur(index: number, key: string, value: any): void {
-    const updatedFilters = filters.map((filter, i) => {
-      if (i === index) {
-        const errors = { ...filter.errors };
-        switch (key) {
-          case 'http_route':
-            if (!value) {
-              errors[key] = 'Route is required';
-            } else if (!value.startsWith('/')) {
-              errors[key] = 'Route must start with /';
-            } else {
-              delete errors[key];
-            }
-            break;
-          case 'minimum_latency_threshold':
-            if (isNaN(value)) {
-              errors[key] = 'Minimum latency threshold must be a number';
-            } else if (value < 0) {
-              errors[key] = 'Minimum latency threshold must be greater than 0';
-            } else {
-              delete errors[key];
-            }
-            break;
-          case 'fallback_sampling_ratio':
-            if (value < 0 || value > 100) {
-              errors[key] = 'Fallback sampling ratio must be between 0 and 100';
-            } else {
-              delete errors[key];
-            }
-            break;
-          default:
-            break;
-        }
-        return { ...filter, errors };
-      }
-      return filter;
-    });
-    setFilters(updatedFilters);
-    onChange(ACTION_DATA_KEY, { endpoints_filters: updatedFilters });
-    checkFormValidity(updatedFilters);
-  }
-
-  function handleAddFilter(): void {
-    setFilters([...filters, {}]);
-  }
-
-  function handleRemoveFilter(index: number): void {
-    const updatedFilters = filters.filter((_, i) => i !== index);
-    setFilters(updatedFilters);
-    onChange(ACTION_DATA_KEY, { endpoints_filters: updatedFilters });
-    checkFormValidity(updatedFilters);
-  }
-
-  function checkFormValidity(filters: HttpRouteFilter[]) {
-    const isValid = filters.every((filter) => {
-      return (
-        filter.service_name &&
-        filter.http_route &&
-        !filter.errors?.http_route &&
-        filter.minimum_latency_threshold !== undefined &&
-        !filter.errors?.minimum_latency_threshold &&
-        filter.fallback_sampling_ratio !== undefined &&
-        !filter.errors?.fallback_sampling_ratio
-      );
-    });
-    setIsFormValid(isValid);
-  }
-
-  function getDropdownValue(serviceName: string): {
-    id: number;
-    label: string;
-  } {
-    const source = sources.find((source) => source.name === serviceName);
-    return {
-      id: 0,
-      label: source?.name || '',
-    };
-  }
-
-  return (
-    <FormWrapper>
-      <KeyvalText size={14} weight={600}>
-        {'Endpoints Filters'}
-      </KeyvalText>
-      <Table>
-        <thead>
-          <tr>
-            <TableHeader>
-              <KeyvalText size={12}>Service Name</KeyvalText>
-            </TableHeader>
-            <TableHeader>
-              <KeyvalText size={12}>Http Route</KeyvalText>
-            </TableHeader>
-            <TableHeader>
-              <KeyvalText size={12}>Minimum Latency Threshold (ms)</KeyvalText>
-            </TableHeader>
-            <TableHeader>
-              <Tooltip text="allows you to retain a specified percentage of traces that fall below the threshold">
-                <KeyvalText size={12}>Fallback Sampling Ratio </KeyvalText>
-              </Tooltip>
-            </TableHeader>
-            <TableHeader></TableHeader>
-          </tr>
-        </thead>
-        <tbody>
-          {filters.map((filter, index) => (
-            <tr key={index}>
-              <TableCell>
-                <KeyvalDropDown
-                  width={198}
-                  data={memoizedSources}
-                  value={getDropdownValue(filter.service_name || '')}
-                  onChange={(value) =>
-                    handleOnChange(index, 'service_name', value.label)
-                  }
-                />
-              </TableCell>
-              <TableCell>
-                <KeyvalInput
-                  style={{ width: 192, height: 39 }}
-                  value={filter.http_route || ''}
-                  onChange={(value) =>
-                    handleOnChange(index, 'http_route', value)
-                  }
-                  onBlur={() =>
-                    handleOnBlur(index, 'http_route', filter.http_route)
-                  }
-                  error={filter.errors?.http_route}
-                  placeholder="e.g. /api/v1/users"
-                  type="text"
-                />
-              </TableCell>
-              <TableCell>
-                <KeyvalInput
-                  style={{ width: 192, height: 39 }}
-                  value={filter.minimum_latency_threshold?.toString() || ''}
-                  onChange={(value) =>
-                    handleOnChange(index, 'minimum_latency_threshold', +value)
-                  }
-                  onBlur={() =>
-                    handleOnBlur(
-                      index,
-                      'minimum_latency_threshold',
-                      filter.minimum_latency_threshold
-                    )
-                  }
-                  placeholder="e.g. 1000"
-                  type="number"
-                  min={0}
-                  error={filter.errors?.minimum_latency_threshold}
-                />
-              </TableCell>
-              <TableCell>
-                <KeyvalInput
-                  style={{ width: 192, height: 39 }}
-                  value={filter.fallback_sampling_ratio?.toString() || ''}
-                  onChange={(value) =>
-                    handleOnChange(index, 'fallback_sampling_ratio', +value)
-                  }
-                  onBlur={() =>
-                    handleOnBlur(
-                      index,
-                      'fallback_sampling_ratio',
-                      filter.fallback_sampling_ratio
-                    )
-                  }
-                  placeholder="e.g. 20"
-                  type="number"
-                  min={0}
-                  max={100}
-                  error={filter.errors?.fallback_sampling_ratio}
-                />
-              </TableCell>
-              <TableCell>
-                {filters.length > 1 && (
-                  <KeyvalLink
-                    value="remove"
-                    fontSize={12}
-                    onClick={() => handleRemoveFilter(index)}
-                  />
-                )}
-              </TableCell>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-      <KeyvalButton
-        onClick={handleAddFilter}
-        style={{ height: 32, width: 140, marginTop: 8 }}
-        disabled={filters.length >= sources.length}
-      >
-        <KeyvalText size={14} weight={600} color={theme.text.dark_button}>
-          {'+ Add Filter'}
-        </KeyvalText>
-      </KeyvalButton>
-    </FormWrapper>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.forms/samplers/probabilistic-sampler/index.tsx b/frontend/webapp/components/overview/actions/actions.forms/samplers/probabilistic-sampler/index.tsx
deleted file mode 100644
index c8153f08f..000000000
--- a/frontend/webapp/components/overview/actions/actions.forms/samplers/probabilistic-sampler/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import { KeyvalInput } from '@/design.system';
-
-const FormWrapper = styled.div`
-  width: 375px;
-`;
-
-interface ProbabilisticSampler {
-  sampling_percentage: string;
-}
-
-interface ProbabilisticSamplerProps {
-  data: ProbabilisticSampler;
-  onChange: (key: string, value: ProbabilisticSampler | null) => void;
-  setIsFormValid?: (value: boolean) => void;
-}
-const ACTION_DATA_KEY = 'actionData';
-
-export function ProbabilisticSamplerForm({
-  data,
-  onChange,
-  setIsFormValid = () => {},
-}: ProbabilisticSamplerProps): React.JSX.Element {
-  useEffect(() => {
-    validateForm();
-  }, [data?.sampling_percentage]);
-
-  function handleOnChange(sampling_percentage: string): void {
-    onChange(ACTION_DATA_KEY, {
-      sampling_percentage,
-    });
-  }
-
-  function validateForm() {
-    const percentage = parseFloat(data?.sampling_percentage);
-    const isValid = !isNaN(percentage) && percentage >= 0 && percentage <= 100;
-    setIsFormValid(isValid);
-  }
-
-  return (
-    <>
-      <FormWrapper>
-        <KeyvalInput
-          data-cy={'create-action-sampling-percentage'}
-          label="Fallback Sampling Ratio"
-          value={data?.sampling_percentage}
-          onChange={(value) => handleOnChange(value)}
-          type="number"
-          tooltip="Percentage at which items are sampled; = 100 samples all items, 0 rejects all items"
-          min={0}
-          max={100}
-          error={
-            parseFloat(data?.sampling_percentage) > 100
-              ? 'Value must be less than 100'
-              : ''
-          }
-        />
-      </FormWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.table/action.row.dynamic.content/index.tsx b/frontend/webapp/components/overview/actions/actions.table/action.row.dynamic.content/index.tsx
deleted file mode 100644
index 18fbd9dfd..000000000
--- a/frontend/webapp/components/overview/actions/actions.table/action.row.dynamic.content/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { KeyvalText } from '@/design.system';
-import theme from '@/styles/palette';
-import { ActionData, ActionsType } from '@/types';
-import React from 'react';
-
-interface ActionRowDynamicContentProps {
-  item: ActionData;
-}
-
-export default function ActionRowDynamicContent({
-  item,
-}: ActionRowDynamicContentProps) {
-  function renderContentByType() {
-    switch (item.type) {
-      case ActionsType.ADD_CLUSTER_INFO:
-        return (
-          <KeyvalText color={theme.text.grey} size={14} weight={400}>
-            {`${item?.spec.clusterAttributes.length} cluster attributes`}
-          </KeyvalText>
-        );
-      case ActionsType.DELETE_ATTRIBUTES:
-        return (
-          <KeyvalText color={theme.text.grey} size={14} weight={400}>
-            {`${item?.spec.attributeNamesToDelete.length} deleted attributes`}
-          </KeyvalText>
-        );
-      case ActionsType.RENAME_ATTRIBUTES:
-        return (
-          <KeyvalText color={theme.text.grey} size={14} weight={400}>
-            {`${Object.keys(item?.spec?.renames).length} renamed attributes`}
-          </KeyvalText>
-        );
-      case ActionsType.ERROR_SAMPLER:
-        return (
-          <KeyvalText color={theme.text.grey} size={14} weight={400}>
-            {`${item?.spec?.fallback_sampling_ratio}% sampling ratio`}s
-          </KeyvalText>
-        );
-      case ActionsType.PROBABILISTIC_SAMPLER:
-        return (
-          <KeyvalText color={theme.text.grey} size={14} weight={400}>
-            {`${item?.spec?.sampling_percentage}% sampling ratio`}
-          </KeyvalText>
-        );
-      case ActionsType.LATENCY_SAMPLER:
-        return (
-          <KeyvalText color={theme.text.grey} size={14} weight={400}>
-            {`${item?.spec?.endpoints_filters.length} endpoints`}
-          </KeyvalText>
-        );
-      case ActionsType.PII_MASKING:
-        return (
-          <KeyvalText color={theme.text.grey} size={14} weight={400}>
-            {`${
-              item?.spec?.piiCategories.length === 1
-                ? '1 category'
-                : `${item?.spec?.piiCategories.length} categories`
-            }`}
-          </KeyvalText>
-        );
-      default:
-        return <div>{item.type}</div>;
-    }
-  }
-
-  return <>{renderContentByType()}</>;
-}
diff --git a/frontend/webapp/components/overview/actions/actions.table/actions.table.header.tsx b/frontend/webapp/components/overview/actions/actions.table/actions.table.header.tsx
deleted file mode 100644
index 2afccb88b..000000000
--- a/frontend/webapp/components/overview/actions/actions.table/actions.table.header.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useState } from 'react';
-import { ACTION, MONITORS, OVERVIEW } from '@/utils';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import { ActionsSortType } from '@/types';
-import { ActionsGroup, KeyvalCheckbox, KeyvalText } from '@/design.system';
-import { UnFocusActionIcon } from '@keyval-dev/design-system';
-
-const StyledThead = styled.div`
-  background-color: ${theme.colors.light_dark};
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
-`;
-
-const StyledTh = styled.th`
-  padding: 10px 20px;
-  text-align: left;
-  border-bottom: 1px solid ${theme.colors.blue_grey};
-`;
-
-const StyledMainTh = styled(StyledTh)`
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const ActionGroupContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 20px;
-  gap: 24px;
-  flex: 1;
-`;
-
-const SELECT_ALL_CHECKBOX = 'select_all';
-
-interface ActionsTableHeaderProps {
-  data: any[];
-  selectedCheckbox: string[];
-  onSelectedCheckboxChange: (id: string) => void;
-  sortActions?: (condition: string) => void;
-  filterActionsBySignal?: (signals: string[]) => void;
-  toggleActionStatus?: (ids: string[], disabled: boolean) => void;
-}
-
-export function ActionsTableHeader({
-  data,
-  selectedCheckbox,
-  onSelectedCheckboxChange,
-  sortActions,
-  filterActionsBySignal,
-  toggleActionStatus,
-}: ActionsTableHeaderProps) {
-  const [currentSortId, setCurrentSortId] = useState('');
-  const [groupActions, setGroupActions] = useState([
-    'traces',
-    'logs',
-    'metrics',
-  ]);
-  function onSortClick(id: string) {
-    setCurrentSortId(id);
-    sortActions && sortActions(id);
-  }
-
-  function onGroupClick(id: string) {
-    let newGroup: string[] = [];
-    if (groupActions.includes(id)) {
-      setGroupActions(groupActions.filter((item) => item !== id));
-      newGroup = groupActions.filter((item) => item !== id);
-    } else {
-      setGroupActions([...groupActions, id]);
-      newGroup = [...groupActions, id];
-    }
-
-    filterActionsBySignal && filterActionsBySignal(newGroup);
-  }
-
-  function onToggleActionStatus(disabled: boolean) {
-    toggleActionStatus && toggleActionStatus(selectedCheckbox, disabled);
-  }
-
-  const actionGroups = [
-    {
-      label: 'Active Status',
-      subTitle: 'Toggle active status',
-      disabled: false,
-      items: [
-        {
-          label: ACTION.ENABLE,
-          onClick: () => onToggleActionStatus(false),
-          id: 'enabled',
-        },
-        {
-          label: ACTION.DISABLE,
-          onClick: () => onToggleActionStatus(true),
-          id: 'disabled',
-        },
-      ],
-      condition: !!selectedCheckbox.length,
-    },
-
-    {
-      label: 'Metrics',
-      subTitle: 'Display',
-      items: [
-        {
-          label: MONITORS.TRACES,
-          onClick: () => onGroupClick(MONITORS.TRACES.toLowerCase()),
-          id: MONITORS.TRACES.toLowerCase(),
-          selected: groupActions.includes(MONITORS.TRACES.toLowerCase()),
-          disabled:
-            groupActions.length === 1 &&
-            groupActions.includes(MONITORS.TRACES.toLowerCase()),
-        },
-        {
-          label: MONITORS.LOGS,
-          onClick: () => onGroupClick(MONITORS.LOGS.toLowerCase()),
-          id: MONITORS.LOGS.toLowerCase(),
-          selected: groupActions.includes(MONITORS.LOGS.toLowerCase()),
-          disabled:
-            groupActions.length === 1 &&
-            groupActions.includes(MONITORS.LOGS.toLowerCase()),
-        },
-        {
-          label: MONITORS.METRICS,
-          onClick: () => onGroupClick(MONITORS.METRICS.toLowerCase()),
-          id: MONITORS.METRICS.toLowerCase(),
-          selected: groupActions.includes(MONITORS.METRICS.toLowerCase()),
-          disabled:
-            groupActions.length === 1 &&
-            groupActions.includes(MONITORS.METRICS.toLowerCase()),
-        },
-      ],
-      condition: true,
-    },
-    {
-      label: 'Sort by',
-      subTitle: 'Sort by',
-      items: [
-        {
-          label: 'Type',
-          onClick: () => onSortClick(ActionsSortType.TYPE),
-          id: ActionsSortType.TYPE,
-          selected: currentSortId === ActionsSortType.TYPE,
-        },
-        {
-          label: 'Action Name',
-          onClick: () => onSortClick(ActionsSortType.ACTION_NAME),
-          id: ActionsSortType.ACTION_NAME,
-          selected: currentSortId === ActionsSortType.ACTION_NAME,
-        },
-        {
-          label: 'Status',
-          onClick: () => onSortClick(ActionsSortType.STATUS),
-          id: ActionsSortType.STATUS,
-          selected: currentSortId === ActionsSortType.STATUS,
-        },
-      ],
-      condition: true,
-    },
-  ];
-
-  return (
-    <StyledThead>
-      {/* <StyledTh>
-      </StyledTh> */}
-      <StyledMainTh>
-        <KeyvalCheckbox
-          value={selectedCheckbox.length === data.length && data.length > 0}
-          onChange={() => onSelectedCheckboxChange(SELECT_ALL_CHECKBOX)}
-        />
-        <UnFocusActionIcon size={18} />
-        <KeyvalText size={14} weight={600} color={theme.text.white}>
-          {selectedCheckbox.length > 0
-            ? `${selectedCheckbox.length} selected`
-            : `${data.length} ${OVERVIEW.MENU.ACTIONS}`}
-        </KeyvalText>
-        <ActionGroupContainer>
-          <ActionsGroup actionGroups={actionGroups} />
-        </ActionGroupContainer>
-      </StyledMainTh>
-    </StyledThead>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx b/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
deleted file mode 100644
index 383712998..000000000
--- a/frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useMemo } from 'react';
-import { ACTIONS } from '@/utils';
-import theme from '@/styles/palette';
-import { ActionData } from '@/types';
-import styled, { css } from 'styled-components';
-import { KeyvalCheckbox, KeyvalText } from '@/design.system';
-import ActionRowDynamicContent from './action.row.dynamic.content';
-import { TapList } from '@/components/setup/destination/tap.list/tap.list';
-import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
-import { ActionIcon } from '../action.icon';
-
-const StyledTr = styled.tr`
-  &:hover {
-    background-color: ${theme.colors.light_dark};
-  }
-`;
-
-const StyledTd = styled.td<{ isFirstRow?: boolean }>`
-  padding: 10px 20px;
-  border-top: 1px solid ${theme.colors.blue_grey};
-  display: flex;
-  ${({ isFirstRow }) =>
-    isFirstRow &&
-    css`
-      border-top: none;
-    `}
-`;
-
-const StyledMainTd = styled(StyledTd)`
-  cursor: pointer;
-  padding: 10px 20px;
-`;
-
-const ActionIconContainer = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-left: 10px;
-  width: 100%;
-`;
-
-const ActionDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const ClusterAttributesContainer = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
-const StatusIndicator = styled.div<{ disabled: boolean }>`
-  width: 6px;
-  height: 6px;
-  border-radius: 4px;
-  background-color: ${({ disabled }) =>
-    disabled ? theme.colors.orange_brown : theme.colors.success};
-`;
-
-const TapListContainer = styled.div`
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-`;
-
-const TAP_STYLE: React.CSSProperties = { padding: '4px 8px', gap: 4 };
-
-const supported_signals = {
-  traces: {
-    supported: true,
-  },
-  metrics: {
-    supported: true,
-  },
-  logs: {
-    supported: true,
-  },
-};
-
-export function ActionsTableRow({
-  item,
-  index,
-  data,
-  selectedCheckbox,
-  onSelectedCheckboxChange,
-  onRowClick,
-}: {
-  item: ActionData;
-  index: number;
-  data: ActionData[];
-  selectedCheckbox: string[];
-  onSelectedCheckboxChange: (id: string) => void;
-  onRowClick: (id: string) => void;
-}) {
-  const monitors = useMemo(() => {
-    return Object?.entries(supported_signals).reduce((acc, [key, _]) => {
-      const monitor = MONITORING_OPTIONS.find(
-        (option) => option.title.toLowerCase() === key
-      );
-      if (monitor && supported_signals[key].supported) {
-        return [
-          ...acc,
-          {
-            ...monitor,
-            tapped: item.spec.signals.includes(key.toUpperCase()),
-          },
-        ];
-      }
-
-      return acc;
-    }, []);
-  }, [data]);
-
-  return (
-    <StyledTr key={item.id}>
-      <StyledMainTd isFirstRow={index === 0}>
-        <KeyvalCheckbox
-          value={selectedCheckbox.includes(item.id)}
-          onChange={() => onSelectedCheckboxChange(item.id)}
-        />
-        <ActionIconContainer onClick={() => onRowClick(item.id)}>
-          <div style={{ height: 16 }}>
-            <ActionIcon type={item.type} style={{ width: 16, height: 16 }} />
-          </div>
-          <ActionDetails>
-            <KeyvalText color={theme.colors.light_grey} size={12}>
-              {ACTIONS[item?.type || ''].TITLE}
-            </KeyvalText>
-            <ClusterAttributesContainer>
-              <KeyvalText data-cy={'actions-action-name'} weight={600}>
-                {`${item.spec.actionName || 'Action'} `}
-              </KeyvalText>
-              <StatusIndicator disabled={!!item.spec.disabled} />
-              <ActionRowDynamicContent item={item} />
-            </ClusterAttributesContainer>
-            <KeyvalText color={theme.text.light_grey} size={14}>
-              {item.spec.notes}
-            </KeyvalText>
-          </ActionDetails>
-          <TapListContainer>
-            <TapList gap={4} list={monitors} tapStyle={TAP_STYLE} />
-          </TapListContainer>
-        </ActionIconContainer>
-      </StyledMainTd>
-    </StyledTr>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/actions.table/index.tsx b/frontend/webapp/components/overview/actions/actions.table/index.tsx
deleted file mode 100644
index 516e7e2ae..000000000
--- a/frontend/webapp/components/overview/actions/actions.table/index.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ActionData } from '@/types';
-import React, { useState } from 'react';
-import { Table } from '@/design.system';
-import { ActionsTableRow } from './actions.table.row';
-import { ActionsTableHeader } from './actions.table.header';
-import { EmptyList } from '@/components/lists';
-import { OVERVIEW } from '@/utils';
-
-type TableProps = {
-  data: ActionData[];
-  onRowClick: (id: string) => void;
-  sortActions?: (condition: string) => void;
-  filterActionsBySignal?: (signals: string[]) => void;
-  toggleActionStatus?: (ids: string[], disabled: boolean) => void;
-};
-
-const SELECT_ALL_CHECKBOX = 'select_all';
-
-export const ActionsTable: React.FC<TableProps> = ({
-  data,
-  onRowClick,
-  sortActions,
-  filterActionsBySignal,
-  toggleActionStatus,
-}) => {
-  const [selectedCheckbox, setSelectedCheckbox] = useState<string[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
-
-  const currentPageRef = React.useRef(1);
-  function onSelectedCheckboxChange(id: string) {
-    if (id === SELECT_ALL_CHECKBOX) {
-      if (selectedCheckbox.length > 0) {
-        setSelectedCheckbox([]);
-      } else {
-        const start = (currentPageRef.current - 1) * 10;
-        const end = currentPageRef.current * 10;
-        setSelectedCheckbox(data.slice(start, end).map((item) => item.id));
-      }
-      return;
-    }
-
-    if (selectedCheckbox.includes(id)) {
-      setSelectedCheckbox(selectedCheckbox.filter((item) => item !== id));
-    } else {
-      setSelectedCheckbox([...selectedCheckbox, id]);
-    }
-  }
-
-  function onPaginate(pageNumber: number) {
-    currentPageRef.current = pageNumber;
-    selectedCheckbox.length > 0 && setSelectedCheckbox([]);
-  }
-
-  function renderTableHeader() {
-    return (
-      <ActionsTableHeader
-        data={data}
-        selectedCheckbox={selectedCheckbox}
-        onSelectedCheckboxChange={onSelectedCheckboxChange}
-        sortActions={sortActions}
-        filterActionsBySignal={filterActionsBySignal}
-        toggleActionStatus={toggleActionStatus}
-      />
-    );
-  }
-
-  function renderEmptyResult() {
-    return <EmptyList title={OVERVIEW.EMPTY_ACTION} />;
-  }
-
-  return (
-    <>
-      <Table<ActionData>
-        data={data}
-        renderTableHeader={renderTableHeader}
-        onPaginate={onPaginate}
-        renderEmptyResult={renderEmptyResult}
-        currentPage={currentPage}
-        itemsPerPage={itemsPerPage}
-        setCurrentPage={setCurrentPage}
-        setItemsPerPage={setItemsPerPage}
-        renderTableRows={(item, index) => (
-          <ActionsTableRow
-            onRowClick={onRowClick}
-            selectedCheckbox={selectedCheckbox}
-            onSelectedCheckboxChange={onSelectedCheckboxChange}
-            data={data}
-            item={item}
-            index={index}
-          />
-        )}
-      />
-    </>
-  );
-};
diff --git a/frontend/webapp/components/overview/actions/delete.action/index.tsx b/frontend/webapp/components/overview/actions/delete.action/index.tsx
deleted file mode 100644
index f9de26562..000000000
--- a/frontend/webapp/components/overview/actions/delete.action/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import { OVERVIEW } from '@/utils';
-import { ActionIcon } from '@/components';
-import { styled } from 'styled-components';
-import { DangerZone, KeyvalModal, KeyvalText } from '@/design.system';
-import { ModalPositionX, ModalPositionY } from '@/design.system/modal/types';
-
-const FieldWrapper = styled.div`
-  div {
-    width: 354px;
-  }
-`;
-
-export function DeleteAction({
-  onDelete,
-  name,
-  type,
-}: {
-  onDelete: () => void;
-  name: string | undefined;
-  type?: string;
-}) {
-  const [showModal, setShowModal] = useState(false);
-
-  const modalConfig = {
-    title: OVERVIEW.DELETE_ACTION,
-    showHeader: true,
-    showOverlay: true,
-    positionX: ModalPositionX.center,
-    positionY: ModalPositionY.center,
-    padding: '20px',
-    footer: {
-      primaryBtnText: OVERVIEW.CONFIRM_DELETE_ACTION,
-      primaryBtnAction: () => {
-        setShowModal(false);
-        onDelete();
-      },
-    },
-  };
-
-  return (
-    <>
-      <FieldWrapper>
-        <DangerZone
-          title={OVERVIEW.ACTION_DANGER_ZONE_TITLE}
-          subTitle={OVERVIEW.ACTION_DANGER_ZONE_SUBTITLE}
-          btnText={OVERVIEW.DELETE}
-          onClick={() => setShowModal(true)}
-        />
-      </FieldWrapper>
-      {showModal && (
-        <KeyvalModal
-          show={showModal}
-          closeModal={() => setShowModal(false)}
-          config={modalConfig}
-        >
-          <br />
-          <ActionIcon style={{ width: 52, height: 52 }} type={type || ''} />
-          <br />
-          <KeyvalText size={20} weight={600}>
-            {`${OVERVIEW.DELETE} ${name} Action`}
-          </KeyvalText>
-        </KeyvalModal>
-      )}
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/actions/index.ts b/frontend/webapp/components/overview/actions/index.ts
deleted file mode 100644
index 933f7470f..000000000
--- a/frontend/webapp/components/overview/actions/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './new.action.card';
-export * from './actions.forms';
-export * from './delete.action';
-export * from './actions.table';
-export * from './action.yaml';
-export * from './action.icon';
diff --git a/frontend/webapp/components/overview/actions/new.action.card/index.tsx b/frontend/webapp/components/overview/actions/new.action.card/index.tsx
deleted file mode 100644
index 8a64c670d..000000000
--- a/frontend/webapp/components/overview/actions/new.action.card/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import { ActionItemCard } from '@/types';
-import { ActionIcon } from '../action.icon';
-import { KeyvalCard, KeyvalText } from '@/design.system';
-
-interface NewActionCardProps {
-  item: ActionItemCard;
-  onClick: ({ item }: { item: ActionItemCard }) => void;
-}
-
-const CardContentWrapper = styled.div`
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  gap: 8px;
-  border: 1px solid transparent;
-  cursor: pointer;
-  &:hover {
-    border-radius: 24px;
-    border: 1px solid ${theme.colors.secondary};
-  }
-`;
-
-export function NewActionCard({ item, onClick }: NewActionCardProps) {
-  return (
-    <KeyvalCard>
-      <CardContentWrapper onClick={() => onClick({ item })}>
-        <ActionIcon type={item.type} style={{ width: 32, height: 32 }} />
-        <KeyvalText size={18} weight={700}>
-          {item.title}
-        </KeyvalText>
-        <KeyvalText color={theme.text.light_grey} size={14} weight={400}>
-          {item.description}
-        </KeyvalText>
-      </CardContentWrapper>
-    </KeyvalCard>
-  );
-}
diff --git a/frontend/webapp/components/overview/add.item.menu/index.tsx b/frontend/webapp/components/overview/add.item.menu/index.tsx
deleted file mode 100644
index 95c80acd2..000000000
--- a/frontend/webapp/components/overview/add.item.menu/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import { PlusIcon } from '@keyval-dev/design-system';
-import { KeyvalText, KeyvalButton } from '@/design.system';
-
-const MenuWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 36px;
-`;
-
-const BUTTON_STYLES = { gap: 10, height: 40 };
-
-interface AddItemMenuProps {
-  length: number;
-  onClick: () => void;
-  btnLabel: string;
-  lengthLabel: string;
-}
-
-export function AddItemMenu({
-  length = 0,
-  onClick,
-  btnLabel,
-  lengthLabel,
-}: AddItemMenuProps) {
-  return (
-    <MenuWrapper>
-      <KeyvalText>{`${length} ${lengthLabel}`}</KeyvalText>
-      <KeyvalButton onClick={onClick} style={BUTTON_STYLES}>
-        <PlusIcon />
-        <KeyvalText size={16} weight={700} color={theme.text.dark_button}>
-          {btnLabel}
-        </KeyvalText>
-      </KeyvalButton>
-    </MenuWrapper>
-  );
-}
diff --git a/frontend/webapp/components/overview/destination/index.ts b/frontend/webapp/components/overview/destination/index.ts
deleted file mode 100644
index 304f27783..000000000
--- a/frontend/webapp/components/overview/destination/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './managed.destination.table';
diff --git a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx b/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
deleted file mode 100644
index 90bcb5abd..000000000
--- a/frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { KeyvalImage, KeyvalText } from '@/design.system';
-import theme from '@/styles/palette';
-import { LinkIcon } from '@keyval-dev/design-system';
-import { DOCS_LINK } from '@/utils';
-
-const ManageDestinationHeaderWrapper = styled.div`
-  display: flex;
-  height: 104px;
-  align-items: center;
-  border-radius: 25px;
-  margin: 24px 0;
-  background: radial-gradient(78.09% 72.18% at 100% -0%, rgba(150, 242, 255, 0.4) 0%, rgba(150, 242, 255, 0) 61.91%),
-    linear-gradient(180deg, #2e4c55 0%, #303355 100%);
-`;
-
-const TextWrapper = styled.div``;
-
-const IMAGE_STYLE: React.CSSProperties = {
-  backgroundColor: '#fff',
-  padding: 4,
-  marginRight: 16,
-  marginLeft: 16,
-};
-
-export function ManageDestinationHeader({ data: { image_url, display_name, type } }) {
-  return (
-    <ManageDestinationHeaderWrapper>
-      <KeyvalImage src={image_url} style={IMAGE_STYLE} />
-      <TextWrapper>
-        <KeyvalText size={24} weight={700}>
-          {display_name}
-        </KeyvalText>
-        <div style={{ cursor: 'pointer' }} onClick={() => window.open(`${DOCS_LINK}/backends/${type}`, '_blank')}>
-          <KeyvalText style={{ display: 'flex', gap: 3 }}>
-            find out more about {display_name} in <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
-            <LinkIcon style={{ marginTop: 2 }} />
-          </KeyvalText>
-        </div>
-      </TextWrapper>
-    </ManageDestinationHeaderWrapper>
-  );
-}
diff --git a/frontend/webapp/components/overview/destination/manage.destination/form.danger.zone.tsx b/frontend/webapp/components/overview/destination/manage.destination/form.danger.zone.tsx
deleted file mode 100644
index a0a10ec96..000000000
--- a/frontend/webapp/components/overview/destination/manage.destination/form.danger.zone.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import { styled } from 'styled-components';
-import { ConnectionsIcons } from '@/components/setup';
-import { DangerZone, KeyvalModal, KeyvalText } from '@/design.system';
-import { ModalPositionX, ModalPositionY } from '@/design.system/modal/types';
-import { OVERVIEW } from '@/utils/constants';
-
-const FieldWrapper = styled.div`
-  margin-top: 32px;
-  width: 348px;
-`;
-
-const IMAGE_STYLE = { border: 'solid 1px #ededed' };
-export default function FormDangerZone({
-  onDelete,
-  data,
-}: {
-  onDelete: () => void;
-  data: any;
-}) {
-  const [showModal, setShowModal] = useState(false);
-
-  const modalConfig = {
-    title: OVERVIEW.DELETE_DESTINATION,
-    showHeader: true,
-    showOverlay: true,
-    positionX: ModalPositionX.center,
-    positionY: ModalPositionY.center,
-    padding: '20px',
-    footer: {
-      primaryBtnText: OVERVIEW.DELETE_BUTTON,
-      primaryBtnAction: () => {
-        onDelete();
-        setShowModal(false);
-      },
-    },
-  };
-
-  return (
-    <>
-      <FieldWrapper>
-        <DangerZone
-          title={OVERVIEW.DELETE_MODAL_TITLE}
-          subTitle={OVERVIEW.DELETE_MODAL_SUBTITLE}
-          btnText={OVERVIEW.DELETE}
-          onClick={() => setShowModal(true)}
-        />
-      </FieldWrapper>
-      {showModal && (
-        <KeyvalModal
-          show={showModal}
-          closeModal={() => setShowModal(false)}
-          config={modalConfig}
-        >
-          <br />
-          <ConnectionsIcons icon={data?.image_url} imageStyle={IMAGE_STYLE} />
-          <br />
-          <KeyvalText size={20} weight={600}>
-            {`${OVERVIEW.DELETE} ${data?.name}`}
-          </KeyvalText>
-        </KeyvalModal>
-      )}
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx b/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
deleted file mode 100644
index 71df6cc86..000000000
--- a/frontend/webapp/components/overview/destination/manage.destination/manage.destination.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { SETUP } from '@/utils';
-import { DestinationType } from '@/types';
-import { styled } from 'styled-components';
-import FormDangerZone from './form.danger.zone';
-import { BackIcon } from '@keyval-dev/design-system';
-import { Conditions, KeyvalText } from '@/design.system';
-import { CreateConnectionForm } from '@/components/setup';
-import { ManageDestinationHeader } from '../manage.destination.header/manage.destination.header';
-
-interface ManageDestinationProps {
-  destinationType: DestinationType;
-  selectedDestination: any;
-  onBackClick?: () => void;
-  onSubmit: (data: any) => void;
-  onDelete?: () => void;
-}
-
-const BackButtonWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  p {
-    cursor: pointer !important;
-  }
-`;
-
-const CreateConnectionWrapper = styled.div`
-  display: flex;
-  gap: 10vw;
-`;
-
-export function ManageDestination({
-  destinationType,
-  selectedDestination,
-  onBackClick,
-  onSubmit,
-  onDelete,
-}: ManageDestinationProps) {
-  return (
-    <>
-      {onBackClick && (
-        <BackButtonWrapper onClick={onBackClick}>
-          <BackIcon size={14} />
-          <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
-        </BackButtonWrapper>
-      )}
-      <ManageDestinationHeader data={selectedDestination} />
-      <CreateConnectionWrapper>
-        <div>
-          <CreateConnectionForm
-            fields={destinationType?.fields}
-            destinationNameValue={selectedDestination?.name}
-            dynamicFieldsValues={selectedDestination?.fields}
-            checkboxValues={selectedDestination?.signals}
-            destination={selectedDestination}
-            onSubmit={(data) => onSubmit(data)}
-          />
-          {onDelete && (
-            <FormDangerZone onDelete={onDelete} data={selectedDestination} />
-          )}
-        </div>
-        <>
-          <Conditions conditions={selectedDestination?.conditions} />
-        </>
-      </CreateConnectionWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.header.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.header.tsx
deleted file mode 100644
index d14e04cce..000000000
--- a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.header.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { useState } from 'react';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import { MONITORS, OVERVIEW } from '@/utils';
-import { ActionsGroup, KeyvalText } from '@/design.system';
-import { Destination, DestinationsSortType } from '@/types';
-import { UnFocusDestinationsIcon } from '@keyval-dev/design-system';
-
-const StyledThead = styled.div`
-  background-color: ${theme.colors.light_dark};
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
-`;
-
-const StyledTh = styled.th`
-  padding: 10px 20px;
-  text-align: left;
-  border-bottom: 1px solid ${theme.colors.blue_grey};
-`;
-
-const StyledMainTh = styled(StyledTh)`
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const ActionGroupContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 20px;
-  gap: 24px;
-  flex: 1;
-`;
-
-interface DestinationsTableHeaderProps {
-  data: Destination[];
-  sortDestinations?: (condition: string) => void;
-  filterDestinationsBySignal?: (signals: string[]) => void;
-}
-
-export function DestinationsTableHeader({
-  data,
-  sortDestinations,
-  filterDestinationsBySignal,
-}: DestinationsTableHeaderProps) {
-  const [currentSortId, setCurrentSortId] = useState('');
-  const [groupDestinations, setGroupDestinations] = useState([
-    'traces',
-    'logs',
-    'metrics',
-  ]);
-  function onSortClick(id: string) {
-    setCurrentSortId(id);
-    sortDestinations && sortDestinations(id);
-  }
-
-  function onGroupClick(id: string) {
-    let newGroup: string[] = [];
-    if (groupDestinations.includes(id)) {
-      setGroupDestinations(groupDestinations.filter((item) => item !== id));
-      newGroup = groupDestinations.filter((item) => item !== id);
-    } else {
-      setGroupDestinations([...groupDestinations, id]);
-      newGroup = [...groupDestinations, id];
-    }
-
-    filterDestinationsBySignal && filterDestinationsBySignal(newGroup);
-  }
-  const destinationsGroups = [
-    {
-      label: 'Metrics',
-      subTitle: 'Display',
-      items: [
-        {
-          label: MONITORS.TRACES,
-          onClick: () => onGroupClick(MONITORS.TRACES.toLowerCase()),
-          id: MONITORS.TRACES.toLowerCase(),
-          selected: groupDestinations.includes(MONITORS.TRACES.toLowerCase()),
-          disabled:
-            groupDestinations.length === 1 &&
-            groupDestinations.includes(MONITORS.TRACES.toLowerCase()),
-        },
-        {
-          label: MONITORS.LOGS,
-          onClick: () => onGroupClick(MONITORS.LOGS.toLowerCase()),
-          id: MONITORS.LOGS.toLowerCase(),
-          selected: groupDestinations.includes(MONITORS.LOGS.toLowerCase()),
-          disabled:
-            groupDestinations.length === 1 &&
-            groupDestinations.includes(MONITORS.LOGS.toLowerCase()),
-        },
-        {
-          label: MONITORS.METRICS,
-          onClick: () => onGroupClick(MONITORS.METRICS.toLowerCase()),
-          id: MONITORS.METRICS.toLowerCase(),
-          selected: groupDestinations.includes(MONITORS.METRICS.toLowerCase()),
-          disabled:
-            groupDestinations.length === 1 &&
-            groupDestinations.includes(MONITORS.METRICS.toLowerCase()),
-        },
-      ],
-      condition: true,
-    },
-    {
-      label: 'Sort by',
-      subTitle: 'Sort by',
-      items: [
-        {
-          label: 'Type',
-          onClick: () => onSortClick(DestinationsSortType.TYPE),
-          id: DestinationsSortType.TYPE,
-          selected: currentSortId === DestinationsSortType.TYPE,
-        },
-        {
-          label: 'Name',
-          onClick: () => onSortClick(DestinationsSortType.NAME),
-          id: DestinationsSortType.NAME,
-          selected: currentSortId === DestinationsSortType.NAME,
-        },
-      ],
-      condition: true,
-    },
-  ];
-
-  return (
-    <StyledThead>
-      <StyledMainTh>
-        <UnFocusDestinationsIcon size={18} />
-        <KeyvalText size={14} weight={600} color={theme.text.white}>
-          {`${data.length} ${OVERVIEW.MENU.DESTINATIONS}`}
-        </KeyvalText>
-        <ActionGroupContainer>
-          <ActionsGroup actionGroups={destinationsGroups} />
-        </ActionGroupContainer>
-      </StyledMainTh>
-    </StyledThead>
-  );
-}
diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
deleted file mode 100644
index 7963c7861..000000000
--- a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { useMemo } from 'react';
-import theme from '@/styles/palette';
-import { Destination } from '@/types';
-import styled, { css } from 'styled-components';
-import { KeyvalImage, KeyvalText } from '@/design.system';
-import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
-import { TapList } from '@/components/setup/destination/tap.list/tap.list';
-import { ConditionCheck } from '@/components/common';
-
-const StyledTr = styled.tr`
-  &:hover {
-    background-color: ${theme.colors.light_dark};
-  }
-`;
-
-const StyledTd = styled.td<{ isFirstRow?: boolean }>`
-  padding: 10px 20px;
-  border-top: 1px solid ${theme.colors.blue_grey};
-
-  ${({ isFirstRow }) =>
-    isFirstRow &&
-    css`
-      border-top: none;
-    `}
-`;
-
-const StyledMainTd = styled(StyledTd)`
-  cursor: pointer;
-  padding: 10px 20px;
-`;
-
-const SourceIconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const SourceDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const NameContainer = styled.div`
-  display: flex;
-  gap: 10px;
-  align-items: center;
-`;
-
-const FooterContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const FooterItemWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-
-const StatusIndicator = styled.div<{ color: string }>`
-  width: 6px;
-  height: 6px;
-  border-radius: 4px;
-  background-color: ${({ color }) => color};
-`;
-
-const TagWrapper = styled.div`
-  padding: 0 20px;
-  width: 300px;
-  display: flex;
-  align-items: center;
-`;
-
-const LOGO_STYLE: React.CSSProperties = {
-  padding: 4,
-  backgroundColor: theme.colors.white,
-};
-const TAP_STYLE: React.CSSProperties = { padding: '4px 8px', gap: 4 };
-export function DestinationsTableRow({
-  item,
-  index,
-  onRowClick,
-}: {
-  item: Destination;
-  index: number;
-  onRowClick: (source: Destination) => void;
-}) {
-  const monitors = useMemo(() => {
-    const supported_signals = item.destination_type.supported_signals;
-    const signals = item.signals;
-    return Object?.entries(supported_signals).reduce((acc, [key, _]) => {
-      const monitor = MONITORING_OPTIONS.find(
-        (option) => option.title.toLowerCase() === key
-      );
-      if (monitor && supported_signals[key].supported) {
-        return [...acc, { ...monitor, tapped: signals[key] }];
-      }
-
-      return acc;
-    }, []);
-  }, [JSON.stringify(item.signals)]);
-
-  return (
-    <StyledTr key={item.id}>
-      <StyledMainTd onClick={() => onRowClick(item)} isFirstRow={index === 0}>
-        <SourceIconContainer>
-          <div>
-            <KeyvalImage
-              src={item.destination_type.image_url || ''}
-              width={32}
-              height={32}
-              style={LOGO_STYLE}
-              alt="source-logo"
-            />
-          </div>
-          <SourceDetails>
-            <NameContainer>
-              <KeyvalText color={theme.text.light_grey} size={14}>
-                {item.destination_type.display_name}
-              </KeyvalText>
-              <ConditionCheck conditions={item.conditions} />
-            </NameContainer>
-            <FooterContainer>
-              <KeyvalText size={20} weight={600}>
-                {`${item.name || 'Destination'} `}
-              </KeyvalText>
-            </FooterContainer>
-          </SourceDetails>
-
-          <TagWrapper>
-            <TapList gap={4} list={monitors} tapStyle={TAP_STYLE} />
-          </TagWrapper>
-        </SourceIconContainer>
-      </StyledMainTd>
-    </StyledTr>
-  );
-}
diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/index.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/index.tsx
deleted file mode 100644
index f987c0db2..000000000
--- a/frontend/webapp/components/overview/destination/managed.destination.table/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { useState } from 'react';
-import { Table } from '@/design.system';
-import { Destination } from '@/types';
-import { EmptyList } from '@/components/lists';
-import { OVERVIEW } from '@/utils';
-import { DestinationsTableHeader } from './destinations.table.header';
-import { DestinationsTableRow } from './destinations.table.row';
-
-type TableProps = {
-  data: Destination[];
-  onRowClick: (source: Destination) => void;
-  sortDestinations?: (condition: string) => void;
-  filterDestinationsBySignal?: (signals: string[]) => void;
-};
-
-export const ManagedDestinationsTable: React.FC<TableProps> = ({
-  data,
-  onRowClick,
-  sortDestinations,
-  filterDestinationsBySignal,
-}) => {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
-  const currentPageRef = React.useRef(1);
-
-  function onPaginate(pageNumber: number) {
-    currentPageRef.current = pageNumber;
-  }
-
-  function renderEmptyResult() {
-    return <EmptyList title={OVERVIEW.EMPTY_SOURCE} />;
-  }
-
-  function renderTableHeader() {
-    return (
-      <DestinationsTableHeader
-        data={data}
-        sortDestinations={sortDestinations}
-        filterDestinationsBySignal={filterDestinationsBySignal}
-      />
-    );
-  }
-
-  return (
-    <>
-      <Table<Destination>
-        data={data}
-        renderTableHeader={renderTableHeader}
-        onPaginate={onPaginate}
-        renderEmptyResult={renderEmptyResult}
-        currentPage={currentPage}
-        itemsPerPage={itemsPerPage}
-        setCurrentPage={setCurrentPage}
-        setItemsPerPage={setItemsPerPage}
-        renderTableRows={(item, index) => (
-          <DestinationsTableRow
-            onRowClick={onRowClick}
-            item={item}
-            index={index}
-          />
-        )}
-      />
-    </>
-  );
-};
diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index 260290801..cf8dcea9b 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -1,11 +1,3 @@
-export { OverviewHeader } from './overview.header/overview.header';
-export { ManageDestination } from './destination/manage.destination/manage.destination';
-export { DeleteSource } from './sources/delete.source/delete.source';
-
-export * from './add.item.menu';
-export * from './actions';
-export * from './sources';
-export * from './destination';
-export * from './add-entity';
 export * from './filters';
+export * from './add-entity';
 export * from './monitors-legend';
diff --git a/frontend/webapp/components/overview/instrumentation-rules/rules-table/index.tsx b/frontend/webapp/components/overview/instrumentation-rules/rules-table/index.tsx
deleted file mode 100644
index cffef68b7..000000000
--- a/frontend/webapp/components/overview/instrumentation-rules/rules-table/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useState } from 'react';
-import { Table } from '@/design.system';
-import { EmptyList } from '@/components/lists';
-import { InstrumentationRuleSpec } from '@/types';
-import { InstrumentationRulesTableRow } from './instrumentation.rules.table.row';
-import { InstrumentationRulesTableHeader } from './instrumentation.rules.table.header';
-
-type TableProps = {
-  data: InstrumentationRuleSpec[];
-  onRowClick: (id: string) => void;
-};
-
-export const InstrumentationRulesTable: React.FC<TableProps> = ({
-  data,
-  onRowClick,
-}) => {
-  const [selectedCheckbox, setSelectedCheckbox] = useState<string[]>([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
-
-  const currentPageRef = React.useRef(1);
-
-  function onPaginate(pageNumber: number) {
-    currentPageRef.current = pageNumber;
-    selectedCheckbox.length > 0 && setSelectedCheckbox([]);
-  }
-
-  function renderTableHeader() {
-    return <InstrumentationRulesTableHeader data={data} />;
-  }
-
-  function renderEmptyResult() {
-    return <EmptyList title={'No rules found'} />;
-  }
-
-  return (
-    <>
-      <Table<InstrumentationRuleSpec>
-        data={data}
-        renderTableHeader={renderTableHeader}
-        onPaginate={onPaginate}
-        renderEmptyResult={renderEmptyResult}
-        currentPage={currentPage}
-        itemsPerPage={itemsPerPage}
-        setCurrentPage={setCurrentPage}
-        setItemsPerPage={setItemsPerPage}
-        renderTableRows={(item, index) => (
-          <InstrumentationRulesTableRow
-            item={item}
-            index={index}
-            onRowClick={onRowClick}
-          />
-        )}
-      />
-    </>
-  );
-};
diff --git a/frontend/webapp/components/overview/instrumentation-rules/rules-table/instrumentation.rules.table.header.tsx b/frontend/webapp/components/overview/instrumentation-rules/rules-table/instrumentation.rules.table.header.tsx
deleted file mode 100644
index 06024a700..000000000
--- a/frontend/webapp/components/overview/instrumentation-rules/rules-table/instrumentation.rules.table.header.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { Funnel } from '@/assets';
-import { OVERVIEW } from '@/utils';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import { KeyvalText } from '@/design.system';
-
-const StyledThead = styled.div`
-  background-color: ${theme.colors.light_dark};
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
-`;
-
-const StyledTh = styled.th`
-  padding: 10px 20px;
-  text-align: left;
-  border-bottom: 1px solid ${theme.colors.blue_grey};
-`;
-
-const StyledMainTh = styled(StyledTh)`
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-interface InstrumentationRulesTableHeaderProps {
-  data: any[];
-}
-
-export function InstrumentationRulesTableHeader({
-  data,
-}: InstrumentationRulesTableHeaderProps) {
-  return (
-    <StyledThead>
-      <StyledMainTh>
-        <Funnel style={{ width: 18 }} />
-        <KeyvalText size={14} weight={600} color={theme.text.white}>
-          {`${data.length} ${OVERVIEW.MENU.INSTRUMENTATION_RULES}`}
-        </KeyvalText>
-      </StyledMainTh>
-    </StyledThead>
-  );
-}
diff --git a/frontend/webapp/components/overview/instrumentation-rules/rules-table/instrumentation.rules.table.row.tsx b/frontend/webapp/components/overview/instrumentation-rules/rules-table/instrumentation.rules.table.row.tsx
deleted file mode 100644
index 25c675edc..000000000
--- a/frontend/webapp/components/overview/instrumentation-rules/rules-table/instrumentation.rules.table.row.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-import theme from '@/styles/palette';
-import { KeyvalText } from '@/design.system';
-import styled, { css } from 'styled-components';
-import { INSTRUMENTATION_RULES } from '@/utils';
-import { PayloadCollectionIcon } from '@/assets';
-import { InstrumentationRuleSpec } from '@/types';
-import RuleRowDynamicContent from './rule.row.dynamic.content';
-
-const StyledTr = styled.tr`
-  &:hover {
-    background-color: ${theme.colors.light_dark};
-  }
-`;
-
-const StyledTd = styled.td<{ isFirstRow?: boolean }>`
-  padding: 10px 20px;
-  border-top: 1px solid ${theme.colors.blue_grey};
-  display: flex;
-  ${({ isFirstRow }) =>
-    isFirstRow &&
-    css`
-      border-top: none;
-    `}
-`;
-
-const StyledMainTd = styled(StyledTd)`
-  cursor: pointer;
-  padding: 10px 20px;
-`;
-
-const RuleIconContainer = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-left: 10px;
-  width: 100%;
-`;
-
-const RuleDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const ClusterAttributesContainer = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
-export function InstrumentationRulesTableRow({
-  item,
-  index,
-  onRowClick,
-}: {
-  item: InstrumentationRuleSpec;
-  index: number;
-  onRowClick: (id: string) => void;
-}) {
-  return (
-    <StyledTr key={item?.ruleId}>
-      <StyledMainTd
-        isFirstRow={index === 0}
-        onClick={() => onRowClick(item?.ruleId || '')}
-      >
-        <RuleIconContainer>
-          <div style={{ height: 16 }}>
-            <PayloadCollectionIcon style={{ width: 16, height: 16 }} />
-          </div>
-          <RuleDetails>
-            <KeyvalText color={theme.colors.light_grey} size={12}>
-              {INSTRUMENTATION_RULES['payload-collection'].TITLE}
-            </KeyvalText>
-            <ClusterAttributesContainer>
-              <KeyvalText data-cy={'rules-rule-name'} weight={600}>
-                {`${item?.ruleName || 'Rule'}`}
-              </KeyvalText>
-              <RuleRowDynamicContent item={item} />
-            </ClusterAttributesContainer>
-            <KeyvalText color={theme.text.light_grey} size={14}>
-              {item?.notes}
-            </KeyvalText>
-          </RuleDetails>
-        </RuleIconContainer>
-      </StyledMainTd>
-    </StyledTr>
-  );
-}
diff --git a/frontend/webapp/components/overview/instrumentation-rules/rules-table/rule.row.dynamic.content.tsx b/frontend/webapp/components/overview/instrumentation-rules/rules-table/rule.row.dynamic.content.tsx
deleted file mode 100644
index c0543ba41..000000000
--- a/frontend/webapp/components/overview/instrumentation-rules/rules-table/rule.row.dynamic.content.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { KeyvalText } from '@/design.system';
-import theme from '@/styles/palette';
-import { InstrumentationRuleSpec, RulesType } from '@/types';
-import React from 'react';
-
-interface RuleRowDynamicContentProps {
-  item: InstrumentationRuleSpec;
-}
-
-export default function RuleRowDynamicContent({
-  item,
-}: RuleRowDynamicContentProps) {
-  function renderContentByType() {
-    switch ('payload-collection') {
-      case RulesType.PAYLOAD_COLLECTION:
-        return (
-          <KeyvalText color={theme.text.grey} size={14} weight={400}>
-            {' '}
-          </KeyvalText>
-        );
-
-      default:
-        return <div></div>;
-    }
-  }
-
-  return <>{renderContentByType()}</>;
-}
diff --git a/frontend/webapp/components/overview/monitors-legend/index.tsx b/frontend/webapp/components/overview/monitors-legend/index.tsx
index 45fb6ed17..e129dafe6 100644
--- a/frontend/webapp/components/overview/monitors-legend/index.tsx
+++ b/frontend/webapp/components/overview/monitors-legend/index.tsx
@@ -13,7 +13,7 @@ const List = styled.div`
 
 const ListItem = styled.div`
   display: flex;
-  align-listitems: center;
+  align-items: center;
   gap: 4px;
 `;
 
diff --git a/frontend/webapp/components/overview/overview.header/overview.header.tsx b/frontend/webapp/components/overview/overview.header/overview.header.tsx
deleted file mode 100644
index 5f845ef5d..000000000
--- a/frontend/webapp/components/overview/overview.header/overview.header.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { SETUP } from '@/utils';
-import styled from 'styled-components';
-import { KeyvalText } from '@/design.system';
-import { NotificationList } from '@/components';
-import { BackIcon } from '@keyval-dev/design-system';
-
-export interface OverviewHeaderProps {
-  title?: string;
-  onBackClick?: any;
-  isDisabled?: boolean;
-}
-
-const OverviewHeaderContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-right: 24px;
-  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
-  background: ${({ theme }) => theme.colors.light_dark};
-`;
-
-const HeaderTop = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 2vh;
-  margin-left: 24px;
-  margin-bottom: 2vh;
-  gap: 8px;
-`;
-
-const BackButtonWrapper = styled.div`
-  display: flex;
-  cursor: pointer;
-  p {
-    cursor: pointer !important;
-  }
-`;
-
-export function OverviewHeader({ title, onBackClick }: OverviewHeaderProps) {
-  return (
-    <OverviewHeaderContainer>
-      <HeaderTop>
-        {onBackClick && (
-          <BackButtonWrapper onClick={onBackClick}>
-            <BackIcon size={14} />
-            <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
-          </BackButtonWrapper>
-        )}
-        <KeyvalText size={32} weight={700}>
-          {title}
-        </KeyvalText>
-      </HeaderTop>
-
-      {!onBackClick && <NotificationList />}
-    </OverviewHeaderContainer>
-  );
-}
diff --git a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx b/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
deleted file mode 100644
index d4c73cac0..000000000
--- a/frontend/webapp/components/overview/sources/delete.source/delete.source.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import { styled } from 'styled-components';
-import { ConnectionsIcons } from '@/components/setup';
-import { DangerZone, KeyvalModal, KeyvalText } from '@/design.system';
-import { ModalPositionX, ModalPositionY } from '@/design.system/modal/types';
-import { OVERVIEW } from '@/utils/constants';
-
-const FieldWrapper = styled.div`
-  margin-top: 32px;
-  width: 348px;
-`;
-
-const IMAGE_STYLE = { border: 'solid 1px #ededed' };
-export function DeleteSource({
-  onDelete,
-  name,
-  image_url,
-}: {
-  onDelete: () => void;
-  name: string | undefined;
-  image_url: string;
-}) {
-  const [showModal, setShowModal] = useState(false);
-
-  const modalConfig = {
-    title: OVERVIEW.DELETE_SOURCE,
-    showHeader: true,
-    showOverlay: true,
-    positionX: ModalPositionX.center,
-    positionY: ModalPositionY.center,
-    padding: '20px',
-    footer: {
-      primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE,
-      primaryBtnAction: () => {
-        setShowModal(false);
-        onDelete();
-      },
-    },
-  };
-
-  return (
-    <>
-      <FieldWrapper>
-        <DangerZone
-          title={OVERVIEW.SOURCE_DANGER_ZONE_TITLE}
-          subTitle={OVERVIEW.SOURCE_DANGER_ZONE_SUBTITLE}
-          btnText={OVERVIEW.DELETE}
-          onClick={() => setShowModal(true)}
-        />
-      </FieldWrapper>
-      {showModal && (
-        <KeyvalModal
-          show={showModal}
-          closeModal={() => setShowModal(false)}
-          config={modalConfig}
-        >
-          <br />
-          <ConnectionsIcons icon={image_url} imageStyle={IMAGE_STYLE} />
-          <br />
-          <KeyvalText size={20} weight={600}>
-            {`${OVERVIEW.DELETE} ${name}`}
-          </KeyvalText>
-        </KeyvalModal>
-      )}
-    </>
-  );
-}
diff --git a/frontend/webapp/components/overview/sources/detected-containers/index.tsx b/frontend/webapp/components/overview/sources/detected-containers/index.tsx
deleted file mode 100644
index afc4a17df..000000000
--- a/frontend/webapp/components/overview/sources/detected-containers/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// DetectedContainers.tsx
-import { KeyvalText } from '@/design.system';
-import theme from '@/styles/palette';
-import { Condition } from '@/types';
-import React from 'react';
-import styled from 'styled-components';
-
-// Define the types for the language object
-interface Language {
-  container_name: string;
-  language: string;
-  runtime_version?: string;
-}
-
-interface DetectedContainersProps {
-  languages: Language[];
-  conditions: Condition[];
-}
-
-const Container = styled.div`
-  margin-top: 16px;
-  max-width: 36vw;
-  margin-bottom: 24px;
-`;
-
-const List = styled.ul`
-  list-style: disc;
-`;
-
-const ListItem = styled.li`
-  padding: 2px 0;
-  &::marker {
-    color: ${theme.colors.white};
-  }
-`;
-
-const DetectedContainers: React.FC<DetectedContainersProps> = ({
-  languages,
-  conditions,
-}) => {
-  const hasError = conditions.some((condition) => condition.status === 'False');
-  return (
-    <Container>
-      <KeyvalText size={18} weight={600}>
-        Detected Containers:
-      </KeyvalText>
-      <List>
-        {languages.map((lang) => (
-          <ListItem key={lang.container_name}>
-            <KeyvalText
-              color={
-                lang.language !== 'ignore' && lang.language !== 'unknown'
-                  ? '#4caf50'
-                  : theme.text.light_grey
-              }
-            >
-              {lang.container_name} (Language: {lang.language}
-              {lang?.runtime_version
-                ? `, Runtime: ${lang.runtime_version}`
-                : ''}
-              )
-              {lang.language !== 'ignore' &&
-                lang.language !== 'unknown' &&
-                !hasError &&
-                ' - Instrumented'}
-            </KeyvalText>
-          </ListItem>
-        ))}
-      </List>
-      <KeyvalText size={14} color={theme.text.light_grey}>
-        Note: The system automatically instruments the containers it detects
-        with a supported programming language.
-      </KeyvalText>
-    </Container>
-  );
-};
-
-export { DetectedContainers };
diff --git a/frontend/webapp/components/overview/sources/index.ts b/frontend/webapp/components/overview/sources/index.ts
deleted file mode 100644
index e4590729e..000000000
--- a/frontend/webapp/components/overview/sources/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './managed.sources.table';
-export * from './detected-containers';
diff --git a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx b/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
deleted file mode 100644
index 0c4a0d5c6..000000000
--- a/frontend/webapp/components/overview/sources/manage.source.header/manage.source.header.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { KeyvalImage, KeyvalText } from '@/design.system';
-import { ManagedSource } from '@/types/sources';
-import { LANGUAGES_LOGOS, getMainContainerLanguage } from '@/utils';
-
-const ManageSourceHeaderWrapper = styled.div`
-  display: flex;
-  width: 100%;
-  min-width: 686px;
-  height: 104px;
-  align-items: center;
-  border-radius: 25px;
-  margin: 24px 0;
-  background: radial-gradient(
-      78.09% 72.18% at 100% -0%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
-    linear-gradient(180deg, #2e4c55 0%, #303355 100%);
-`;
-
-const IMAGE_STYLE: React.CSSProperties = {
-  backgroundColor: '#fff',
-  padding: 4,
-  marginRight: 16,
-  marginLeft: 16,
-};
-
-export function ManageSourceHeader({ source }: { source: ManagedSource }) {
-  const mainLanguage = getMainContainerLanguage(source);
-  const imageUrl = LANGUAGES_LOGOS[mainLanguage];
-  return (
-    <ManageSourceHeaderWrapper>
-      <KeyvalImage src={imageUrl} style={IMAGE_STYLE} />
-      <div style={{ flex: 1 }}>
-        <KeyvalText size={24} weight={600} color="#fff">
-          {source.name}
-        </KeyvalText>
-        <KeyvalText size={16} weight={400} color="#fff">
-          {source.kind} in namespace &quot;{source.namespace}&quot;
-        </KeyvalText>
-      </div>
-    </ManageSourceHeaderWrapper>
-  );
-}
diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx
deleted file mode 100644
index 0738ed4f0..000000000
--- a/frontend/webapp/components/overview/sources/managed.sources.table/index.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { useState } from 'react';
-import { KeyvalModal, KeyvalText, Table } from '@/design.system';
-import { ManagedSource, Namespace } from '@/types';
-import { SourcesTableRow } from './sources.table.row';
-import { SourcesTableHeader } from './sources.table.header';
-import { EmptyList } from '@/components/lists';
-import { OVERVIEW } from '@/utils';
-
-import { ModalPositionX, ModalPositionY } from '@/design.system/modal/types';
-
-type TableProps = {
-  data: ManagedSource[];
-  namespaces?: Namespace[];
-  onRowClick: (source: ManagedSource) => void;
-  sortSources?: (condition: string) => void;
-  filterSourcesByKind?: (kinds: string[]) => void;
-  filterSourcesByNamespace?: (namespaces: string[]) => void;
-  filterSourcesByLanguage?: (languages: string[]) => void;
-  deleteSourcesHandler?: (sources: ManagedSource[]) => void;
-  filterByConditionStatus?: (status: 'All' | 'True' | 'False') => void;
-  filterByConditionMessage: (message: string[]) => void;
-};
-
-const SELECT_ALL_CHECKBOX = 'select_all';
-
-export const ManagedSourcesTable: React.FC<TableProps> = ({
-  data,
-  namespaces,
-  onRowClick,
-  sortSources,
-  filterSourcesByKind,
-  deleteSourcesHandler,
-  filterSourcesByNamespace,
-  filterSourcesByLanguage,
-  filterByConditionStatus,
-  filterByConditionMessage,
-}) => {
-  const [selectedCheckbox, setSelectedCheckbox] = useState<string[]>([]);
-  const [showModal, setShowModal] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage, setItemsPerPage] = useState(10);
-
-  const modalConfig = {
-    title: OVERVIEW.DELETE_SOURCE,
-    showHeader: true,
-    showOverlay: true,
-    positionX: ModalPositionX.center,
-    positionY: ModalPositionY.center,
-    padding: '20px',
-    footer: {
-      primaryBtnText: OVERVIEW.CONFIRM_SOURCE_DELETE,
-      primaryBtnAction: () => {
-        setShowModal(false);
-        parseSelectedSources();
-      },
-    },
-  };
-  const currentPageRef = React.useRef(1);
-
-  function onPaginate(pageNumber: number) {
-    currentPageRef.current = pageNumber;
-  }
-
-  function renderEmptyResult() {
-    return <EmptyList title={OVERVIEW.EMPTY_SOURCE} />;
-  }
-
-  function onSelectedCheckboxChange(id: string) {
-    const start = (currentPage - 1) * itemsPerPage;
-    const end = currentPage * itemsPerPage;
-    const slicedData = data.slice(start, end);
-    if (id === SELECT_ALL_CHECKBOX) {
-      if (selectedCheckbox.length === slicedData.length) {
-        setSelectedCheckbox([]);
-      } else {
-        setSelectedCheckbox(slicedData.map((item) => JSON.stringify(item)));
-      }
-      return;
-    }
-
-    if (selectedCheckbox.includes(id)) {
-      setSelectedCheckbox(selectedCheckbox.filter((item) => item !== id));
-    } else {
-      setSelectedCheckbox([...selectedCheckbox, id]);
-    }
-  }
-
-  function parseSelectedSources() {
-    const selectedSources = selectedCheckbox.map((item) => JSON.parse(item));
-    deleteSourcesHandler && deleteSourcesHandler(selectedSources);
-    setSelectedCheckbox([]);
-  }
-
-  const indexOfLastItem = currentPage * itemsPerPage;
-  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
-
-  function renderTableHeader() {
-    return (
-      <>
-        <SourcesTableHeader
-          data={data}
-          namespaces={namespaces}
-          sortSources={sortSources}
-          filterSourcesByKind={filterSourcesByKind}
-          filterSourcesByNamespace={filterSourcesByNamespace}
-          filterSourcesByLanguage={filterSourcesByLanguage}
-          selectedCheckbox={selectedCheckbox}
-          onSelectedCheckboxChange={onSelectedCheckboxChange}
-          deleteSourcesHandler={() => setShowModal(true)}
-          filterByConditionStatus={filterByConditionStatus}
-          filterByConditionMessage={filterByConditionMessage}
-          currentItems={currentItems}
-        />
-        {showModal && (
-          <KeyvalModal
-            show={showModal}
-            closeModal={() => setShowModal(false)}
-            config={modalConfig}
-          >
-            <KeyvalText size={20} weight={600}>
-              {`${OVERVIEW.DELETE} ${selectedCheckbox.length} sources`}
-            </KeyvalText>
-          </KeyvalModal>
-        )}
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Table<ManagedSource>
-        data={data}
-        renderTableHeader={renderTableHeader}
-        onPaginate={onPaginate}
-        renderEmptyResult={renderEmptyResult}
-        renderTableRows={(item, index) => (
-          <SourcesTableRow
-            data={data}
-            item={item}
-            index={index}
-            onRowClick={onRowClick}
-            selectedCheckbox={selectedCheckbox}
-            onSelectedCheckboxChange={onSelectedCheckboxChange}
-          />
-        )}
-        currentPage={currentPage}
-        itemsPerPage={itemsPerPage}
-        setCurrentPage={setCurrentPage}
-        setItemsPerPage={setItemsPerPage}
-      />
-    </>
-  );
-};
diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx
deleted file mode 100644
index 38b916316..000000000
--- a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.header.tsx
+++ /dev/null
@@ -1,421 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { OVERVIEW } from '@/utils';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import {
-  ActionsGroup,
-  KeyvalCheckbox,
-  KeyvalLink,
-  KeyvalSwitch,
-  KeyvalText,
-} from '@/design.system';
-import { ManagedSource, Namespace } from '@/types';
-import { UnFocusSourcesIcon } from '@keyval-dev/design-system';
-import { useSources } from '@/hooks';
-
-enum K8SSourceTypes {
-  DEPLOYMENT = 'deployment',
-  STATEFUL_SET = 'statefulset',
-  DAEMON_SET = 'daemonset',
-}
-enum SourceSortOptions {
-  NAME = 'name',
-  KIND = 'kind',
-  NAMESPACE = 'namespace',
-  LANGUAGE = 'language',
-}
-const StyledThead = styled.div`
-  background-color: ${theme.colors.light_dark};
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
-`;
-
-const StyledTh = styled.th`
-  padding: 10px 20px;
-  text-align: left;
-  border-bottom: 1px solid ${theme.colors.blue_grey};
-`;
-
-const StyledMainTh = styled(StyledTh)`
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const ActionGroupContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 20px;
-  gap: 24px;
-  flex: 1;
-`;
-const SELECT_ALL_CHECKBOX = 'select_all';
-interface ActionsTableHeaderProps {
-  data: ManagedSource[];
-  namespaces?: Namespace[];
-  sortSources?: (condition: string) => void;
-  filterSourcesByKind?: (kinds: string[]) => void;
-  filterSourcesByNamespace?: (namespaces: string[]) => void;
-  selectedCheckbox: string[];
-  onSelectedCheckboxChange: (id: string) => void;
-  deleteSourcesHandler: () => void;
-  filterSourcesByLanguage?: (languages: string[]) => void;
-  filterByConditionStatus?: (status: 'All' | 'True' | 'False') => void;
-  filterByConditionMessage: (message: string[]) => void;
-  currentItems: ManagedSource[];
-}
-
-export function SourcesTableHeader({
-  data,
-  namespaces,
-  sortSources,
-  filterSourcesByKind,
-  filterSourcesByNamespace,
-  filterSourcesByLanguage,
-  deleteSourcesHandler,
-  selectedCheckbox,
-  onSelectedCheckboxChange,
-  filterByConditionStatus,
-  filterByConditionMessage,
-  currentItems,
-}: ActionsTableHeaderProps) {
-  const [currentSortId, setCurrentSortId] = useState('');
-  const [groupNamespaces, setGroupNamespaces] = useState<string[]>([]);
-  const [showSourcesWithIssues, setShowSourcesWithIssues] = useState(false);
-  const [groupErrorMessage, setGroupErrorMessage] = useState<string[]>([]);
-  const [groupLanguages, setGroupLanguages] = useState<string[]>([
-    'javascript',
-    'python',
-    'java',
-    'go',
-    'dotnet',
-  ]);
-  const [groupKinds, setGroupKinds] = useState<string[]>([
-    K8SSourceTypes.DEPLOYMENT,
-    K8SSourceTypes.STATEFUL_SET,
-    K8SSourceTypes.DAEMON_SET,
-  ]);
-
-  const { groupErrorMessages } = useSources();
-
-  useEffect(() => {
-    if (!filterByConditionStatus) {
-      return;
-    }
-
-    setGroupErrorMessage(groupErrorMessages());
-
-    showSourcesWithIssues
-      ? filterByConditionStatus('False')
-      : filterByConditionStatus('All');
-  }, [showSourcesWithIssues]);
-
-  useEffect(() => {
-    if (namespaces) {
-      setGroupNamespaces(
-        namespaces.filter((item) => item.totalApps > 0).map((item) => item.name)
-      );
-    }
-  }, [namespaces]);
-
-  function onSortClick(id: string) {
-    setCurrentSortId(id);
-    sortSources && sortSources(id);
-  }
-
-  function onNamespaceClick(id: string) {
-    let newGroup: string[] = [];
-    if (groupNamespaces.includes(id)) {
-      setGroupNamespaces(groupNamespaces.filter((item) => item !== id));
-      newGroup = groupNamespaces.filter((item) => item !== id);
-    } else {
-      setGroupNamespaces([...groupNamespaces, id]);
-      newGroup = [...groupNamespaces, id];
-    }
-
-    filterSourcesByNamespace && filterSourcesByNamespace(newGroup);
-  }
-
-  function onKindClick(id: string) {
-    let newGroup: string[] = [];
-    if (groupKinds.includes(id)) {
-      setGroupKinds(groupKinds.filter((item) => item !== id));
-      newGroup = groupKinds.filter((item) => item !== id);
-    } else {
-      setGroupKinds([...groupKinds, id]);
-      newGroup = [...groupKinds, id];
-    }
-
-    filterSourcesByKind && filterSourcesByKind(newGroup);
-  }
-
-  function onLanguageClick(id: string) {
-    let newGroup: string[] = [];
-    if (groupLanguages.includes(id)) {
-      setGroupLanguages(groupLanguages.filter((item) => item !== id));
-      newGroup = groupLanguages.filter((item) => item !== id);
-    } else {
-      setGroupLanguages([...groupLanguages, id]);
-      newGroup = [...groupLanguages, id];
-    }
-
-    filterSourcesByLanguage && filterSourcesByLanguage(newGroup);
-  }
-
-  function onErrorClick(message: string) {
-    let newGroup: string[] = [];
-    if (groupErrorMessage.includes(message)) {
-      setGroupErrorMessage(
-        groupErrorMessage.filter((item) => item !== message)
-      );
-      newGroup = groupErrorMessage.filter((item) => item !== message);
-    } else {
-      setGroupErrorMessage([...groupErrorMessage, message]);
-      newGroup = [...groupErrorMessage, message];
-    }
-
-    filterByConditionMessage(newGroup);
-  }
-
-  const sourcesGroups = useMemo(() => {
-    if (!namespaces) return [];
-
-    const totalNamespacesWithApps = namespaces.filter(
-      (item) => item.totalApps > 0
-    ).length;
-
-    const namespacesItems = namespaces
-      .sort((a, b) => b.totalApps - a.totalApps)
-      ?.map((item: Namespace, index: number) => ({
-        label: `${item.name} (${item.totalApps} apps) `,
-        onClick: () => onNamespaceClick(item.name),
-        id: item.name,
-        selected: groupNamespaces.includes(item.name) && item.totalApps > 0,
-        disabled:
-          (groupNamespaces.length === 1 &&
-            groupNamespaces.includes(item.name)) ||
-          item.totalApps === 0 ||
-          totalNamespacesWithApps === 1,
-      }));
-
-    const actionsGroup = [
-      {
-        label: 'Language',
-        subTitle: 'Filter',
-        condition: true,
-        items: [
-          {
-            label: 'Javascript',
-            onClick: () => onLanguageClick('javascript'),
-            id: 'javascript',
-            selected: groupLanguages.includes('javascript'),
-            disabled:
-              (groupLanguages.length === 1 &&
-                groupLanguages.includes('javascript')) ||
-              (data.length === 1 &&
-                data?.[0]?.instrumented_application_details?.languages?.[0]
-                  .language === 'javascript'),
-          },
-          {
-            label: 'Python',
-            onClick: () => onLanguageClick('python'),
-            id: 'python',
-            selected: groupLanguages.includes('python'),
-            disabled:
-              (groupLanguages.length === 1 &&
-                groupLanguages.includes('python')) ||
-              (data.length === 1 &&
-                data?.[0]?.instrumented_application_details?.languages?.[0]
-                  .language === 'python'),
-          },
-          {
-            label: 'Java',
-            onClick: () => onLanguageClick('java'),
-            id: 'java',
-            selected: groupLanguages.includes('java'),
-            disabled:
-              (groupLanguages.length === 1 &&
-                groupLanguages.includes('java')) ||
-              (data.length === 1 &&
-                data?.[0]?.instrumented_application_details?.languages?.[0]
-                  .language === 'java'),
-          },
-          {
-            label: 'Go',
-            onClick: () => onLanguageClick('go'),
-            id: 'go',
-            selected: groupLanguages.includes('go'),
-            disabled:
-              (groupLanguages.length === 1 && groupLanguages.includes('go')) ||
-              (data.length === 1 &&
-                data?.[0]?.instrumented_application_details?.languages?.[0]
-                  .language === 'go'),
-          },
-          {
-            label: '.NET',
-            onClick: () => onLanguageClick('dotnet'),
-            id: 'dotnet',
-            selected: groupLanguages.includes('dotnet'),
-            disabled:
-              (groupLanguages.length === 1 &&
-                groupLanguages.includes('dotnet')) ||
-              (data.length === 1 &&
-                data?.[0]?.instrumented_application_details?.languages?.[0]
-                  .language === 'dotnet'),
-          },
-        ],
-      },
-      {
-        label: 'Kind',
-        subTitle: 'Filter',
-        condition: true,
-        items: [
-          {
-            label: 'Deployment',
-            onClick: () => onKindClick(K8SSourceTypes.DEPLOYMENT),
-            id: K8SSourceTypes.DEPLOYMENT,
-            selected:
-              groupKinds.includes(K8SSourceTypes.DEPLOYMENT) &&
-              data.some(
-                (item) => item.kind.toLowerCase() === K8SSourceTypes.DEPLOYMENT
-              ),
-            disabled:
-              groupKinds.length === 1 &&
-              groupKinds.includes(K8SSourceTypes.DEPLOYMENT) &&
-              data.some(
-                (item) => item.kind.toLowerCase() === K8SSourceTypes.DEPLOYMENT
-              ),
-          },
-          {
-            label: 'StatefulSet',
-            onClick: () => onKindClick(K8SSourceTypes.STATEFUL_SET),
-            id: K8SSourceTypes.STATEFUL_SET,
-            selected:
-              groupKinds.includes(K8SSourceTypes.STATEFUL_SET) &&
-              data.some(
-                (item) =>
-                  item.kind.toLowerCase() === K8SSourceTypes.STATEFUL_SET
-              ),
-            disabled:
-              (groupKinds.length === 1 &&
-                groupKinds.includes(K8SSourceTypes.STATEFUL_SET)) ||
-              data.every(
-                (item) =>
-                  item.kind.toLowerCase() !== K8SSourceTypes.STATEFUL_SET
-              ),
-          },
-          {
-            label: 'DemonSet',
-            onClick: () => onKindClick(K8SSourceTypes.DAEMON_SET),
-            id: K8SSourceTypes.DAEMON_SET,
-            selected:
-              groupKinds.includes(K8SSourceTypes.DAEMON_SET) &&
-              data.some(
-                (item) => item.kind.toLowerCase() === K8SSourceTypes.DAEMON_SET
-              ),
-            disabled:
-              (groupKinds.length === 1 &&
-                groupKinds.includes(K8SSourceTypes.DAEMON_SET)) ||
-              data.every(
-                (item) => item.kind.toLowerCase() !== K8SSourceTypes.DAEMON_SET
-              ),
-          },
-        ],
-      },
-      {
-        label: 'Namespaces',
-        subTitle: 'Display',
-        items: namespacesItems,
-        condition: true,
-      },
-      {
-        label: 'Sort by',
-        subTitle: 'Sort by',
-        items: [
-          {
-            label: 'Kind',
-            onClick: () => onSortClick(SourceSortOptions.KIND),
-            id: SourceSortOptions.KIND,
-            selected: currentSortId === SourceSortOptions.KIND,
-          },
-          {
-            label: 'Language',
-            onClick: () => onSortClick(SourceSortOptions.LANGUAGE),
-            id: SourceSortOptions.LANGUAGE,
-            selected: currentSortId === SourceSortOptions.LANGUAGE,
-          },
-          {
-            label: 'Name',
-            onClick: () => onSortClick(SourceSortOptions.NAME),
-            id: SourceSortOptions.NAME,
-            selected: currentSortId === SourceSortOptions.NAME,
-          },
-          {
-            label: 'Namespace',
-            onClick: () => onSortClick(SourceSortOptions.NAMESPACE),
-            id: SourceSortOptions.NAMESPACE,
-            selected: currentSortId === SourceSortOptions.NAMESPACE,
-          },
-        ],
-        condition: true,
-      },
-    ];
-
-    if (showSourcesWithIssues) {
-      actionsGroup.unshift({
-        label: 'Error',
-        subTitle: 'Filter by error message',
-        condition: true,
-        items: groupErrorMessages().map((item) => ({
-          label: item,
-          onClick: () => onErrorClick(item),
-          id: item,
-          selected: groupErrorMessage.includes(item),
-          disabled:
-            groupErrorMessage.length === 1 && groupErrorMessage.includes(item),
-        })),
-      });
-    }
-
-    return actionsGroup;
-  }, [namespaces, groupNamespaces, data]);
-
-  return (
-    <StyledThead>
-      <StyledMainTh>
-        <KeyvalCheckbox
-          value={
-            selectedCheckbox.length === currentItems.length &&
-            currentItems.length > 0
-          }
-          onChange={() => onSelectedCheckboxChange(SELECT_ALL_CHECKBOX)}
-        />
-        <UnFocusSourcesIcon size={18} />
-        <KeyvalText size={14} weight={600} color={theme.text.white}>
-          {`${data.length} ${OVERVIEW.MENU.SOURCES}`}
-        </KeyvalText>
-
-        {groupErrorMessage.length > 0 && (
-          <KeyvalSwitch
-            toggle={showSourcesWithIssues}
-            handleToggleChange={() =>
-              setShowSourcesWithIssues(!showSourcesWithIssues)
-            }
-            label={'Show Sources with Errors'}
-          />
-        )}
-        {selectedCheckbox.length > 0 && (
-          <KeyvalLink
-            onClick={deleteSourcesHandler}
-            value={OVERVIEW.DELETE}
-            fontSize={12}
-          />
-        )}
-        <ActionGroupContainer>
-          <ActionsGroup actionGroups={sourcesGroups} />
-        </ActionGroupContainer>
-      </StyledMainTh>
-    </StyledThead>
-  );
-}
diff --git a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.row.tsx b/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.row.tsx
deleted file mode 100644
index 9f4d60637..000000000
--- a/frontend/webapp/components/overview/sources/managed.sources.table/sources.table.row.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import React from 'react';
-import theme from '@/styles/palette';
-import { ManagedSource } from '@/types';
-import { Container, Namespace } from '@/assets';
-import styled, { css } from 'styled-components';
-import {
-  KeyvalCheckbox,
-  KeyvalImage,
-  KeyvalLoader,
-  KeyvalTag,
-  KeyvalText,
-} from '@/design.system';
-import { KIND_COLORS } from '@/styles/global';
-import {
-  LANGUAGES_COLORS,
-  LANGUAGES_LOGOS,
-  getMainContainerLanguage,
-} from '@/utils';
-import { ConditionCheck } from '@/components/common';
-
-const StyledTr = styled.tr`
-  &:hover {
-    background-color: ${theme.colors.light_dark};
-  }
-`;
-
-const StyledTd = styled.td<{ isFirstRow?: boolean }>`
-  padding: 10px 20px;
-  border-top: 1px solid ${theme.colors.blue_grey};
-
-  ${({ isFirstRow }) =>
-    isFirstRow &&
-    css`
-      border-top: none;
-    `}
-`;
-
-const StyledMainTd = styled(StyledTd)`
-  cursor: pointer;
-  padding: 10px 20px;
-  display: flex;
-  gap: 20px;
-`;
-
-const SourceIconContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const SourceDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const NameContainer = styled.div`
-  display: flex;
-  gap: 10px;
-  align-items: center;
-`;
-
-const FooterContainer = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-`;
-
-const FooterItemWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-
-const StatusIndicator = styled.div<{ color: string }>`
-  width: 6px;
-  height: 6px;
-  border-radius: 4px;
-  background-color: ${({ color }) => color};
-`;
-
-const TagWrapper = styled.div`
-  padding: 0 20px;
-  width: 300px;
-  display: flex;
-  align-items: center;
-`;
-
-const LOGO_STYLE: React.CSSProperties = {
-  padding: 4,
-  backgroundColor: theme.colors.white,
-};
-
-function getFirstNonIgnoredContainerName(
-  managedSource: ManagedSource
-): string | null {
-  if (!managedSource?.instrumented_application_details?.languages) {
-    return null;
-  }
-
-  const nonIgnoredLanguage =
-    managedSource?.instrumented_application_details?.languages.find(
-      (language) => language.language !== 'ignore'
-    );
-
-  return nonIgnoredLanguage ? nonIgnoredLanguage.container_name : null;
-}
-
-const DEPLOYMENT = 'deployment';
-export function SourcesTableRow({
-  item,
-  index,
-  selectedCheckbox,
-  onSelectedCheckboxChange,
-  onRowClick,
-}: {
-  item: ManagedSource;
-  index: number;
-  data: ManagedSource[];
-  selectedCheckbox: string[];
-  onSelectedCheckboxChange: (id: string) => void;
-  onRowClick: (source: ManagedSource) => void;
-}) {
-  const workloadProgrammingLanguage = getMainContainerLanguage(item);
-
-  const containerName = getFirstNonIgnoredContainerName(item) || '';
-
-  function getLanguageStatus() {
-    if (workloadProgrammingLanguage === 'processing') {
-      return (
-        <>
-          <KeyvalLoader width={6} height={6} />
-          <KeyvalText color={theme.text.light_grey} size={14}>
-            {'detecting language'}
-          </KeyvalText>
-        </>
-      );
-    }
-
-    return (
-      <>
-        <StatusIndicator
-          color={
-            LANGUAGES_COLORS[workloadProgrammingLanguage] ||
-            theme.text.light_grey
-          }
-        />
-        <KeyvalText color={theme.text.light_grey} size={14}>
-          {workloadProgrammingLanguage}
-        </KeyvalText>
-      </>
-    );
-  }
-
-  return (
-    <StyledTr key={item.kind}>
-      <StyledMainTd isFirstRow={index === 0}>
-        <KeyvalCheckbox
-          value={selectedCheckbox.includes(JSON.stringify(item))}
-          onChange={() => onSelectedCheckboxChange(JSON.stringify(item))}
-        />
-        <SourceIconContainer onClick={() => onRowClick(item)}>
-          <div>
-            <KeyvalImage
-              src={LANGUAGES_LOGOS[workloadProgrammingLanguage]}
-              width={32}
-              height={32}
-              style={LOGO_STYLE}
-              alt="source-logo"
-            />
-          </div>
-          <SourceDetails onClick={() => onRowClick(item)}>
-            <NameContainer>
-              <KeyvalText weight={600}>
-                {`${item.name || 'Source'} `}
-              </KeyvalText>
-              <KeyvalText color={theme.text.light_grey} size={14}>
-                <ConditionCheck
-                  conditions={
-                    item?.instrumented_application_details?.conditions || []
-                  }
-                />
-              </KeyvalText>
-            </NameContainer>
-            <FooterContainer>
-              <FooterItemWrapper>{getLanguageStatus()}</FooterItemWrapper>
-              <FooterItemWrapper>
-                <Namespace style={{ width: 16, height: 16 }} />
-                <KeyvalText color={theme.text.light_grey} size={14}>
-                  {item.namespace}
-                </KeyvalText>
-              </FooterItemWrapper>
-              <FooterItemWrapper>
-                <Container style={{ width: 16, height: 16 }} />
-                <KeyvalText color={theme.text.light_grey} size={14}>
-                  {containerName}
-                </KeyvalText>
-              </FooterItemWrapper>
-            </FooterContainer>
-          </SourceDetails>
-
-          <TagWrapper>
-            <KeyvalTag
-              title={item?.kind || ''}
-              color={KIND_COLORS[item?.kind?.toLowerCase() || DEPLOYMENT]}
-            />
-          </TagWrapper>
-        </SourceIconContainer>
-      </StyledMainTd>
-    </StyledTr>
-  );
-}
diff --git a/frontend/webapp/components/setup/connection/connections_icons/connections_icons.tsx b/frontend/webapp/components/setup/connection/connections_icons/connections_icons.tsx
deleted file mode 100644
index 9b0f262b3..000000000
--- a/frontend/webapp/components/setup/connection/connections_icons/connections_icons.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { KeyvalImage } from '@/design.system';
-import { ConnectIcon } from '@keyval-dev/design-system';
-
-const ConnectionsIconsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Divider = styled.div`
-  width: 16px;
-  height: 8.396px;
-  background: radial-gradient(
-      78.09% 72.18% at 100% -0%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
-    linear-gradient(180deg, #2e4c55 0%, #303355 100%);
-`;
-
-const IMAGE_STYLE: React.CSSProperties = {
-  backgroundColor: '#fff',
-  padding: 4,
-};
-
-export function ConnectionsIcons({
-  icon,
-  imageStyle,
-}: {
-  icon: string;
-  imageStyle?: React.CSSProperties;
-}) {
-  return icon ? (
-    <ConnectionsIconsWrapper>
-      <ConnectIcon size={48} />
-      <Divider />
-      <KeyvalImage
-        src={icon}
-        width={40}
-        height={40}
-        style={{ ...IMAGE_STYLE, ...imageStyle }}
-      />
-    </ConnectionsIconsWrapper>
-  ) : null;
-}
diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.styled.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.styled.tsx
deleted file mode 100644
index a939437a8..000000000
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.styled.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-
-export const CheckboxWrapper = styled.div`
-  gap: 14px;
-  display: flex;
-`;
-
-export const ConnectionMonitorsWrapper = styled.div`
-  gap: 16px;
-  display: flex;
-  margin-top: 32px;
-  flex-direction: column;
-`;
-
-export const FieldWrapper = styled.div`
-  margin-top: 22px;
-  width: 348px;
-`;
-
-export const CreateDestinationButtonWrapper = styled.div`
-  margin-top: 48px;
-  gap: 16px;
-  width: 362px;
-  display: flex;
-  flex-direction: column;
-`;
diff --git a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx b/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
deleted file mode 100644
index b39030702..000000000
--- a/frontend/webapp/components/setup/connection/create.connection.form/create.connection.form.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-'use client';
-import React, { useState, useEffect } from 'react';
-import theme from '@/styles/palette';
-import { useTestConnection, useKeyDown } from '@/hooks';
-import { Field, SelectedDestination } from '@/types';
-import { renderFields } from './dynamic.fields';
-import {
-  cleanObjectEmptyStringsValues,
-  SETUP,
-  stringifyNonStringValues,
-} from '@/utils';
-import { DestinationBody } from '@/containers/setup/connection/connection.section';
-import {
-  KeyvalButton,
-  KeyvalCheckbox,
-  KeyvalInput,
-  KeyvalLoader,
-  KeyvalText,
-} from '@/design.system';
-import {
-  CheckboxWrapper,
-  ConnectionMonitorsWrapper,
-  FieldWrapper,
-  CreateDestinationButtonWrapper,
-} from './create.connection.form.styled';
-
-interface CreateConnectionFormProps {
-  fields: Field[];
-  destination: SelectedDestination;
-  onSubmit: (formData: DestinationBody) => void;
-  dynamicFieldsValues?: {
-    [key: string]: any;
-  };
-  destinationNameValue?: string | null;
-  checkboxValues?: {
-    [key: string]: boolean;
-  };
-}
-
-const MONITORS = [
-  { id: 'logs', label: SETUP.MONITORS.LOGS, checked: true },
-  { id: 'metrics', label: SETUP.MONITORS.METRICS, checked: true },
-  { id: 'traces', label: SETUP.MONITORS.TRACES, checked: true },
-];
-
-// fields are the current destination supported fields which we want to have.
-// fieldValues read the actual values that are received from the cluster.
-// if there are field values which are not part of the current schema, we want to remove them.
-const sanitizeDynamicFields = (
-  fields: Field[],
-  fieldValues: Record<string, any> | undefined
-): Record<string, any> => {
-  if (!fieldValues) {
-    return {};
-  }
-  return Object.fromEntries(
-    Object.entries(fieldValues).filter(([key, value]) =>
-      fields.find((field) => field.name === key)
-    )
-  );
-};
-
-export function CreateConnectionForm({
-  fields,
-  onSubmit,
-  destination,
-  dynamicFieldsValues,
-  destinationNameValue,
-  checkboxValues,
-}: CreateConnectionFormProps) {
-  const [selectedMonitors, setSelectedMonitors] = useState(MONITORS);
-  const [isCreateButtonDisabled, setIsCreateButtonDisabled] = useState(true);
-  const [isConnectionTested, setIsConnectionTested] = useState({
-    enabled: null,
-    message: '',
-  });
-  const [dynamicFields, setDynamicFields] = useState(
-    sanitizeDynamicFields(fields, dynamicFieldsValues)
-  );
-  const [destinationName, setDestinationName] = useState<string>(
-    destinationNameValue || ''
-  );
-
-  const { testConnection } = useTestConnection();
-
-  useEffect(() => {
-    setInitialDynamicFields();
-  }, [fields]);
-
-  useEffect(() => {
-    isFormValid();
-  }, [destinationName, dynamicFields]);
-
-  useEffect(() => {
-    filterSupportedMonitors();
-  }, [destination]);
-
-  useKeyDown({ key: 'Enter', active: true }, handleKeyPress);
-
-  function handleKeyPress(e: any) {
-    if (!isCreateButtonDisabled) {
-      onCreateClick();
-    }
-  }
-
-  function setInitialDynamicFields() {
-    if (fields) {
-      const defaultValues = fields.reduce(
-        (acc: { [key: string]: string }, field: Field) => {
-          const value = dynamicFields[field.name] || field.initial_value || '';
-          acc[field.name] = value;
-          return acc;
-        },
-        {} as { [key: string]: string }
-      );
-      setDynamicFields(defaultValues);
-    }
-  }
-
-  function filterSupportedMonitors() {
-    const data: any = !checkboxValues
-      ? MONITORS
-      : MONITORS.map((monitor) => ({
-          ...monitor,
-          checked: checkboxValues[monitor.id],
-        }));
-
-    setSelectedMonitors(
-      data.filter(({ id }) => destination?.supported_signals?.[id]?.supported)
-    );
-  }
-
-  const handleCheckboxChange = (id: string) => {
-    setSelectedMonitors((prevSelectedMonitors) => {
-      const totalSelected = prevSelectedMonitors.filter(
-        ({ checked }) => checked
-      ).length;
-
-      if (
-        totalSelected === 1 &&
-        prevSelectedMonitors.find((item) => item.id === id)?.checked
-      ) {
-        return prevSelectedMonitors; // Prevent unchecking the last selected checkbox
-      }
-
-      const updatedMonitors = prevSelectedMonitors.map((checkbox) =>
-        checkbox.id === id
-          ? { ...checkbox, checked: !checkbox.checked }
-          : checkbox
-      );
-
-      return updatedMonitors;
-    });
-  };
-
-  function handleDynamicFieldChange(name: string, value: string) {
-    if (isConnectionTested.enabled !== null) {
-      setIsConnectionTested({ enabled: null, message: '' });
-    }
-
-    setDynamicFields((prevFields) => ({ ...prevFields, [name]: value }));
-  }
-
-  function isFormValid() {
-    let isValid = true;
-    for (let field of fields) {
-      if (field.component_properties.required) {
-        const value = dynamicFields[field.name];
-        if (value === undefined || value.trim() === '' || !destinationName) {
-          isValid = false;
-          break;
-        }
-      }
-    }
-    setIsCreateButtonDisabled(!isValid);
-  }
-
-  function onCreateClick() {
-    const signals = selectedMonitors.reduce(
-      (acc, { id, checked }) => ({ ...acc, [id]: checked }),
-      {}
-    );
-
-    const stringifyFields = stringifyNonStringValues(dynamicFields);
-    const fields = cleanObjectEmptyStringsValues(stringifyFields);
-
-    const body = {
-      name: destinationName,
-      signals,
-      fields,
-      type: destination.type,
-    };
-    onSubmit(body);
-  }
-
-  async function handleCheckDestinationConnection() {
-    const signals = selectedMonitors.reduce(
-      (acc, { id, checked }) => ({ ...acc, [id]: checked }),
-      {}
-    );
-
-    const stringifyFields = stringifyNonStringValues(dynamicFields);
-    const fields = cleanObjectEmptyStringsValues(stringifyFields);
-
-    const body = {
-      name: destinationName,
-      signals,
-      fields,
-      type: destination.type,
-    };
-    try {
-      // testConnection(body);
-    } catch (error) {}
-  }
-
-  return (
-    <>
-      <KeyvalText size={18} weight={600}>
-        {dynamicFieldsValues
-          ? SETUP.UPDATE_CONNECTION
-          : SETUP.CREATE_CONNECTION}
-      </KeyvalText>
-      {selectedMonitors?.length >= 1 && (
-        <ConnectionMonitorsWrapper>
-          <KeyvalText size={14}>{SETUP.CONNECTION_MONITORS}</KeyvalText>
-          <CheckboxWrapper>
-            {selectedMonitors.map((checkbox) => (
-              <KeyvalCheckbox
-                key={checkbox?.id}
-                value={checkbox?.checked}
-                onChange={() => handleCheckboxChange(checkbox?.id)}
-                label={checkbox?.label}
-              />
-            ))}
-          </CheckboxWrapper>
-        </ConnectionMonitorsWrapper>
-      )}
-      <FieldWrapper>
-        <KeyvalInput
-          data-cy={'create-destination-input-name'}
-          label={SETUP.DESTINATION_NAME}
-          value={destinationName}
-          onChange={setDestinationName}
-          required
-        />
-      </FieldWrapper>
-      {renderFields(fields, dynamicFields, handleDynamicFieldChange)}
-      <CreateDestinationButtonWrapper>
-        {destination?.test_connection_supported && (
-          <KeyvalButton
-            variant="secondary"
-            disabled={isCreateButtonDisabled}
-            onClick={handleCheckDestinationConnection}
-          >
-            <div></div>
-            {/* {isLoading ? (
-              <KeyvalLoader width={9} height={9} />
-            ) : isConnectionTested.enabled === null ? (
-              <KeyvalText color={theme.text.secondary} size={14} weight={600}>
-                {'Test Connection'}
-              </KeyvalText>
-            ) : isConnectionTested.enabled ? (
-              <KeyvalText color={theme.colors.success} size={14} weight={600}>
-                {'Connection Successful'}
-              </KeyvalText>
-            ) : (
-              <KeyvalText color={theme.colors.error} size={14} weight={600}>
-                {isConnectionTested.message}
-              </KeyvalText>
-            )} */}
-          </KeyvalButton>
-        )}
-        <KeyvalButton
-            data-cy={'create-destination-create-click'}
-          disabled={
-            isCreateButtonDisabled || isConnectionTested.enabled === false
-          }
-          onClick={onCreateClick}
-        >
-          <KeyvalText color={theme.colors.dark_blue} size={14} weight={600}>
-            {dynamicFieldsValues
-              ? SETUP.UPDATE_DESTINATION
-              : SETUP.CREATE_DESTINATION}
-          </KeyvalText>
-        </KeyvalButton>
-      </CreateDestinationButtonWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/setup/connection/create.connection.form/dynamic.fields.tsx b/frontend/webapp/components/setup/connection/create.connection.form/dynamic.fields.tsx
deleted file mode 100644
index 1104dec5e..000000000
--- a/frontend/webapp/components/setup/connection/create.connection.form/dynamic.fields.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import React from 'react';
-import { Field } from '@/types/destinations';
-import { KeyValue } from '@keyval-dev/design-system';
-import { INPUT_TYPES } from '@/utils/constants/string';
-import { safeJsonParse } from '@/utils/functions/strings';
-import { FieldWrapper } from './create.connection.form.styled';
-import {
-  KeyvalDropDown,
-  KeyvalInput,
-  KeyValuePair,
-  MultiInputTable,
-  TextArea,
-} from '@/design.system';
-
-const DEFAULT_KEY_VALUE_PAIR = {};
-export function renderFields(
-  fields: Field[],
-  dynamicFields: object,
-  onChange: (name: string, value: any) => void
-) {
-  return fields?.map((field) => {
-    const { name, component_type, display_name, component_properties } = field;
-
-    switch (component_type) {
-      case INPUT_TYPES.INPUT:
-        return (
-          <FieldWrapper key={name}>
-            <KeyvalInput
-                data-cy={'create-destination-input-'+ name}
-              label={display_name}
-              value={dynamicFields[name]}
-              onChange={(value) => onChange(name, value)}
-              {...component_properties}
-            />
-          </FieldWrapper>
-        );
-      case INPUT_TYPES.DROPDOWN:
-        const dropdownData = component_properties?.values.map(
-          (value: string) => ({
-            label: value,
-            id: value,
-          })
-        );
-
-        const dropDownValue = dynamicFields[name]
-          ? { id: dynamicFields[name], label: dynamicFields[name] }
-          : null;
-
-        return (
-          <FieldWrapper key={name}>
-            <KeyvalDropDown
-              label={display_name}
-              width={354}
-              data={dropdownData}
-              onChange={({ label }) => onChange(name, label)}
-              value={dropDownValue}
-              {...component_properties}
-            />
-          </FieldWrapper>
-        );
-      case INPUT_TYPES.MULTI_INPUT:
-        let values = dynamicFields[name] || field.initial_value;
-        if (typeof values === 'string') {
-          values = safeJsonParse<string[]>(values, []);
-        }
-        return (
-          <div key={name} style={{ marginTop: 22 }}>
-            <MultiInputTable
-              title={display_name}
-              values={values}
-              placeholder="Add value"
-              onValuesChange={(value: string[]) =>
-                onChange(name, value.length === 0 ? [] : value)
-              }
-              {...component_properties}
-            />
-          </div>
-        );
-
-      case INPUT_TYPES.KEY_VALUE_PAIR:
-        let keyValues = dynamicFields[name] || DEFAULT_KEY_VALUE_PAIR;
-        if (typeof keyValues === 'string') {
-          keyValues = safeJsonParse<{ [key: string]: string }>(keyValues, {});
-        }
-
-        keyValues = Object.keys(keyValues).map((key) => ({
-          key,
-          value: keyValues[key],
-        }));
-
-        const array: KeyValue[] = [];
-        let id = 0;
-        for (const item of keyValues) {
-          const { key, value } = item;
-          array.push({ id: id++, key: key, value: value as string });
-        }
-        keyValues = array;
-
-        return (
-          <div key={name} style={{ marginTop: 22 }}>
-            <KeyValuePair
-              title={display_name}
-              setKeyValues={(value) => {
-                const data = value
-                  .map((item) => {
-                    return { key: item.key, value: item.value };
-                  })
-                  .reduce((obj, item) => {
-                    obj[item.key] = item.value;
-                    return obj;
-                  }, {});
-                onChange(name, data);
-              }}
-              keyValues={keyValues}
-              {...component_properties}
-            />
-          </div>
-        );
-      case INPUT_TYPES.TEXTAREA:
-        return (
-          <FieldWrapper key={name} style={{ width: 362 }}>
-            <TextArea
-              label={display_name}
-              value={dynamicFields[name]}
-              onChange={(value) => onChange(name, value.target.value)}
-              {...component_properties}
-            />
-          </FieldWrapper>
-        );
-      default:
-        return null;
-    }
-  });
-}
diff --git a/frontend/webapp/components/setup/connection/quick.help/quick.help.styled.tsx b/frontend/webapp/components/setup/connection/quick.help/quick.help.styled.tsx
deleted file mode 100644
index 597962a6e..000000000
--- a/frontend/webapp/components/setup/connection/quick.help/quick.help.styled.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const QuickHelpHeader = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-bottom: 20px;
-`;
-
-export const QuickHelpVideoWrapper = styled.div`
-  margin-bottom: 32px;
-`;
diff --git a/frontend/webapp/components/setup/connection/quick.help/quick.help.tsx b/frontend/webapp/components/setup/connection/quick.help/quick.help.tsx
deleted file mode 100644
index 9aba9dc21..000000000
--- a/frontend/webapp/components/setup/connection/quick.help/quick.help.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { SETUP } from '@/utils';
-import { NoteIcon } from '@keyval-dev/design-system';
-import { KeyvalText, KeyvalVideo } from '@/design.system';
-import { QuickHelpHeader, QuickHelpVideoWrapper } from './quick.help.styled';
-export function QuickHelp({ data }) {
-  function renderVideoList() {
-    return data?.map((video) => (
-      <QuickHelpVideoWrapper key={video?.name}>
-        <KeyvalVideo
-          videoSrc={video?.src}
-          title={video?.name}
-          thumbnail={video?.thumbnail_url}
-        />
-      </QuickHelpVideoWrapper>
-    ));
-  }
-
-  return (
-    <div>
-      <QuickHelpHeader>
-        <NoteIcon />
-        <KeyvalText size={18} weight={600}>
-          {SETUP.QUICK_HELP}
-        </KeyvalText>
-      </QuickHelpHeader>
-      {renderVideoList()}
-    </div>
-  );
-}
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
deleted file mode 100644
index 3d03aa1c4..000000000
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.styled.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from 'styled-components';
-
-export const DestinationCardWrapper = styled.div`
-  padding: 1vw 1vh;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: 1vh;
-  cursor: pointer;
-  border: 1px solid transparent;
-  &:hover {
-    border-radius: 24px;
-    border: ${({ theme }) => `1px solid  ${theme.colors.secondary}`};
-  }
-  @media screen and (max-width: 1300px) {
-    flex-direction: row;
-    padding-left: 2vw;
-  }
-`;
-
-export const DestinationCardContentWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  @media screen and (max-width: 1300px) {
-    align-items: flex-start;
-    padding-left: 1vw;
-  }
-`;
-
-export const ApplicationNameWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  text-overflow: ellipsis;
-  height: 50px;
-  @media screen and (max-width: 1300px) {
-    height: 30px;
-  }
-`;
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
deleted file mode 100644
index a8586dac7..000000000
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useMemo } from 'react';
-import { KeyvalCard, KeyvalImage, KeyvalText } from '@/design.system';
-import { TapList } from '../tap.list/tap.list';
-import { MONITORING_OPTIONS } from '../../../../utils/constants/monitors';
-import {
-  ApplicationNameWrapper,
-  DestinationCardContentWrapper,
-  DestinationCardWrapper,
-} from './destination.card.styled';
-
-const TEXT_STYLE: React.CSSProperties = {
-  overflowWrap: 'break-word',
-  textAlign: 'center',
-};
-const LOGO_STYLE: React.CSSProperties = {
-  padding: 4,
-  backgroundColor: '#fff',
-  width: '6vh',
-  height: '6vh',
-};
-const TAP_STYLE: React.CSSProperties = { padding: '4px 8px', gap: 4 };
-
-type Destination = {
-  supported_signals: {
-    [key: string]: {
-      supported: boolean;
-    };
-  };
-  image_url: string;
-  display_name: string;
-};
-
-type DestinationCardProps = {
-  item: Destination;
-  onClick: () => void;
-};
-
-export function DestinationCard({
-  item: { supported_signals, image_url, display_name },
-  onClick,
-}: DestinationCardProps) {
-  const monitors = useMemo(() => {
-    return Object.entries(supported_signals).reduce((acc, [key, value]) => {
-      if (value.supported) {
-        const monitor = MONITORING_OPTIONS.find(
-          (option) => option.title.toLowerCase() === key
-        );
-        if (monitor) {
-          return [...acc, { ...monitor, tapped: true }];
-        }
-      }
-      return acc;
-    }, []);
-  }, [JSON.stringify(supported_signals)]);
-
-  return (
-    <KeyvalCard>
-      <DestinationCardWrapper data-cy={'choose-destination-'+ display_name} onClick={onClick}>
-        <KeyvalImage
-          src={image_url}
-          width={56}
-          height={56}
-          style={LOGO_STYLE}
-        />
-        <DestinationCardContentWrapper>
-          <ApplicationNameWrapper>
-            <KeyvalText size={20} weight={700} style={TEXT_STYLE}>
-              {display_name}
-            </KeyvalText>
-          </ApplicationNameWrapper>
-          <TapList gap={4} list={monitors} tapStyle={TAP_STYLE} />
-        </DestinationCardContentWrapper>
-      </DestinationCardWrapper>
-    </KeyvalCard>
-  );
-}
diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
deleted file mode 100644
index f1ae931eb..000000000
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from 'styled-components';
-
-export const DestinationTypeTitleWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 24px 0;
-`;
-
-export const DestinationListWrapper = styled.div<{ repeat: number }>`
-  width: 100%;
-  display: grid;
-  grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`};
-  gap: 1vh;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  @media screen and (max-width: 1700px) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  @media screen and (max-width: 1500px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  @media screen and (max-width: 1300px) {
-    grid-template-columns: repeat(2, 1fr);
-    padding-bottom: 5vh;
-  }
-`;
-
-export const EmptyListWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
deleted file mode 100644
index d25f17bd3..000000000
--- a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { KeyvalText } from '@/design.system';
-import { DestinationCard } from '../destination.card/destination.card';
-import {
-  DestinationListWrapper,
-  DestinationTypeTitleWrapper,
-} from './destination.list.styled';
-import { capitalizeFirstLetter } from '@/utils/functions';
-import { ROUTES } from '@/utils/constants';
-
-export function DestinationList({ data: { items, name }, onItemClick }: any) {
-  function renderList() {
-    return items?.map((item: any, index: number) => (
-      <DestinationCard
-        key={index}
-        item={item}
-        onClick={() => onItemClick(item)}
-      />
-    ));
-  }
-  const getNumberOfItemsRepeated = () =>
-    window.location.pathname.includes(ROUTES.CREATE_DESTINATION) ? 5 : 4;
-
-  return items?.length ? (
-    <>
-      <DestinationTypeTitleWrapper>
-        <KeyvalText>{`${items?.length} ${capitalizeFirstLetter(
-          name
-        )}`}</KeyvalText>
-      </DestinationTypeTitleWrapper>
-      <DestinationListWrapper repeat={getNumberOfItemsRepeated()}>
-        {renderList()}
-      </DestinationListWrapper>
-    </>
-  ) : null;
-}
diff --git a/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.styled.tsx b/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.styled.tsx
deleted file mode 100644
index 1fceb5d14..000000000
--- a/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.styled.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-export const SourcesOptionMenuWrapper = styled.section`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 24px;
-  padding: 3% 0 0 0;
-`;
-
-export const DropdownWrapper = styled.div`
-  display: flex;
-  position: inherit;
-  align-items: center;
-  gap: 12px;
-`;
-
-export const TapsWrapper = styled(DropdownWrapper)`
-  margin-left: 8px;
-`;
diff --git a/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.tsx b/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.tsx
deleted file mode 100644
index 9fbef8ba0..000000000
--- a/frontend/webapp/components/setup/destination/destination.option.menu/destination.option.menu.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client';
-import React, { useEffect, useMemo } from 'react';
-import { SETUP } from '@/utils/constants';
-import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from '@/design.system';
-import { TapList } from '../tap.list/tap.list';
-import {
-  DropdownWrapper,
-  SourcesOptionMenuWrapper,
-  TapsWrapper,
-} from './destination.option.menu.styled';
-
-type DestinationOptionMenuProps = {
-  setDropdownData: (data: any) => void;
-  data: any;
-  searchFilter: string;
-  setSearchFilter: (filter: string) => void;
-  monitoringOption: any;
-  setMonitoringOption: (option: any) => void;
-};
-
-type DropdownItem = {
-  id: number;
-  label: string;
-};
-
-type MonitoringOption = {
-  id: string;
-  tapped: boolean;
-};
-
-export function DestinationOptionMenu({
-  setDropdownData,
-  data = [],
-  searchFilter,
-  setSearchFilter,
-  monitoringOption,
-  setMonitoringOption,
-}: DestinationOptionMenuProps) {
-  const dropdownData = useMemo(() => {
-    const options = [
-      { id: 'all', label: SETUP.ALL },
-      ...data?.map(({ name }) => ({ id: name, label: name })),
-    ];
-
-    return options;
-  }, [data]);
-
-  useEffect(() => {
-    setDropdownData(dropdownData[0]);
-  }, [dropdownData]);
-
-  function handleDropDownChange(item: DropdownItem) {
-    setDropdownData({ id: item?.id, label: item.label });
-  }
-
-  function handleTapClick(id: MonitoringOption) {
-    const tappedMonitors = monitoringOption.filter(
-      (monitor: any) => monitor.tapped
-    );
-
-    const currentMonitorIndex = monitoringOption.findIndex(
-      (monitor) => monitor.id === id
-    );
-    // if only one monitor is tapped and the tapped monitor is clicked, do nothing
-    const isOnlyOneMonitorTapped = tappedMonitors.length === 1;
-    const isTappedMonitor = monitoringOption[currentMonitorIndex].tapped;
-    if (isOnlyOneMonitorTapped && isTappedMonitor) return;
-
-    const newMonitoringOption = monitoringOption.map((monitor) => {
-      if (monitor.id === id) {
-        return { ...monitor, tapped: !monitor.tapped };
-      }
-      return monitor;
-    });
-
-    setMonitoringOption(newMonitoringOption);
-  }
-
-  return (
-    <SourcesOptionMenuWrapper>
-      <KeyvalSearchInput
-        value={searchFilter}
-        onChange={(e) => setSearchFilter(e.target.value)}
-      />
-
-      <DropdownWrapper>
-        <KeyvalText size={14}>{SETUP.MENU.TYPE}</KeyvalText>
-        <KeyvalDropDown
-          width={180}
-          data={dropdownData}
-          value={dropdownData[0]}
-          onChange={handleDropDownChange}
-        />
-      </DropdownWrapper>
-      <TapsWrapper>
-        <KeyvalText size={14}>{SETUP.MENU.MONITORING}</KeyvalText>
-        <TapList list={monitoringOption} onClick={handleTapClick} />
-      </TapsWrapper>
-    </SourcesOptionMenuWrapper>
-  );
-}
diff --git a/frontend/webapp/components/setup/destination/tap.list/tap.list.tsx b/frontend/webapp/components/setup/destination/tap.list/tap.list.tsx
deleted file mode 100644
index 36713f5b8..000000000
--- a/frontend/webapp/components/setup/destination/tap.list/tap.list.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { KeyvalTap } from '@/design.system';
-import React from 'react';
-import styled from 'styled-components';
-
-const TapListWrapper = styled.div`
-  display: flex;
-`;
-
-export function TapList({ list, gap = 8, tapStyle, onClick = null }: any) {
-  function renderMonitoringOptions() {
-    return list.map(({ icons, title, tapped, id }: any) => (
-      <KeyvalTap
-        key={id}
-        onClick={onClick ? () => onClick(id) : null}
-        tapped={tapped || false}
-        icons={icons}
-        title={title}
-        style={{ ...tapStyle, alignItems: 'center' }}
-      >
-        {tapped ? icons.focus() : icons.notFocus()}
-      </KeyvalTap>
-    ));
-  }
-  return (
-    <TapListWrapper style={{ gap }}>{renderMonitoringOptions()}</TapListWrapper>
-  );
-}
diff --git a/frontend/webapp/components/setup/headers/back-button/index.tsx b/frontend/webapp/components/setup/headers/back-button/index.tsx
deleted file mode 100644
index fcb88b8ff..000000000
--- a/frontend/webapp/components/setup/headers/back-button/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-import React from 'react';
-import { SETUP } from '@/utils';
-import styled from 'styled-components';
-import { KeyvalText } from '@/design.system';
-import { WhiteArrowIcon } from '@keyval-dev/design-system';
-
-const BackButtonWrapper = styled.div`
-  position: absolute;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  top: -34px;
-  cursor: pointer;
-  p {
-    cursor: pointer !important;
-  }
-`;
-
-interface SetupBackButtonProps {
-  onBackClick: () => void;
-}
-
-export function SetupBackButton({ onBackClick }: SetupBackButtonProps) {
-  return (
-    <BackButtonWrapper onClick={onBackClick}>
-      <WhiteArrowIcon />
-      <KeyvalText size={14} weight={600}>
-        {SETUP.BACK}
-      </KeyvalText>
-    </BackButtonWrapper>
-  );
-}
diff --git a/frontend/webapp/components/setup/headers/choose-destination-header/index.tsx b/frontend/webapp/components/setup/headers/choose-destination-header/index.tsx
deleted file mode 100644
index e26ada406..000000000
--- a/frontend/webapp/components/setup/headers/choose-destination-header/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { SETUP } from '@/utils';
-import theme from '@/styles/palette';
-import { KeyvalText } from '@/design.system';
-import { ConnectIcon } from '@keyval-dev/design-system';
-import {
-  HeaderTitleWrapper,
-  SetupHeaderWrapper,
-  TotalSelectedWrapper,
-} from './styled';
-
-interface ChooseDestinationHeaderProps {
-  totalSelectedApps: number;
-}
-
-export function ChooseDestinationHeader({
-  totalSelectedApps,
-}: ChooseDestinationHeaderProps) {
-  const { HEADER } = SETUP;
-
-  return (
-    <SetupHeaderWrapper>
-      <HeaderTitleWrapper>
-        <ConnectIcon />
-        <KeyvalText>{HEADER.CHOOSE_DESTINATION_TITLE}</KeyvalText>
-      </HeaderTitleWrapper>
-      <TotalSelectedWrapper>
-        {totalSelectedApps ? (
-          <>
-            <KeyvalText>{totalSelectedApps}</KeyvalText>
-            <KeyvalText>{SETUP.SOURCE_SELECTED}</KeyvalText>
-          </>
-        ) : (
-          <>
-            <KeyvalText color={theme.colors.orange_brown}>
-              {SETUP.NONE_SOURCE_SELECTED}
-            </KeyvalText>
-          </>
-        )}
-      </TotalSelectedWrapper>
-    </SetupHeaderWrapper>
-  );
-}
diff --git a/frontend/webapp/components/setup/headers/choose-destination-header/styled.tsx b/frontend/webapp/components/setup/headers/choose-destination-header/styled.tsx
deleted file mode 100644
index d7c1e1e96..000000000
--- a/frontend/webapp/components/setup/headers/choose-destination-header/styled.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-export const SetupHeaderWrapper = styled.header`
-  display: inline-flex;
-  justify-content: space-between;
-  width: 100%;
-  align-items: center;
-`;
-
-export const HeaderTitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  margin-left: 40px;
-`;
-
-export const HeaderButtonWrapper = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  margin-right: 40px;
-`;
-
-export const TotalSelectedWrapper = styled.div`
-  display: flex;
-  gap: 6px;
-  margin-right: 40px;
-`;
diff --git a/frontend/webapp/components/setup/headers/choose-sources-header/index.tsx b/frontend/webapp/components/setup/headers/choose-sources-header/index.tsx
deleted file mode 100644
index 50e928a92..000000000
--- a/frontend/webapp/components/setup/headers/choose-sources-header/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import { SETUP } from '@/utils';
-import theme from '@/styles/palette';
-import { KeyvalButton, KeyvalText } from '@/design.system';
-import { ChargeIcon, RightArrowIcon } from '@keyval-dev/design-system';
-import {
-  HeaderButtonWrapper,
-  HeaderTitleWrapper,
-  SetupHeaderWrapper,
-  TotalSelectedWrapper,
-} from './styled';
-
-type SetupHeaderProps = {
-  onNextClick: () => void;
-  totalSelected: number;
-};
-
-export function ChooseSourcesHeader({
-  onNextClick,
-  totalSelected,
-}: SetupHeaderProps) {
-  const { HEADER } = SETUP;
-  return (
-    <SetupHeaderWrapper>
-      <HeaderTitleWrapper>
-        <ChargeIcon />
-        <KeyvalText>{HEADER.CHOOSE_SOURCE_TITLE}</KeyvalText>
-      </HeaderTitleWrapper>
-      <HeaderButtonWrapper>
-        {!isNaN(totalSelected) && (
-          <TotalSelectedWrapper>
-            <KeyvalText>{totalSelected}</KeyvalText>
-            <KeyvalText>{SETUP.SELECTED}</KeyvalText>
-          </TotalSelectedWrapper>
-        )}
-
-        <KeyvalButton data-cy={'choose-source-next-click'} onClick={onNextClick} style={{ gap: 10, width: 120 }}>
-          <KeyvalText size={20} weight={600} color={theme.text.dark_button}>
-            {SETUP.NEXT}
-          </KeyvalText>
-          <RightArrowIcon />
-        </KeyvalButton>
-      </HeaderButtonWrapper>
-    </SetupHeaderWrapper>
-  );
-}
diff --git a/frontend/webapp/components/setup/headers/choose-sources-header/styled.tsx b/frontend/webapp/components/setup/headers/choose-sources-header/styled.tsx
deleted file mode 100644
index b85598a8f..000000000
--- a/frontend/webapp/components/setup/headers/choose-sources-header/styled.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-export const SetupHeaderWrapper = styled.header`
-  display: inline-flex;
-  justify-content: space-between;
-  width: 100%;
-  align-items: center;
-`;
-
-export const HeaderTitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  margin-left: 40px;
-`;
-
-export const HeaderButtonWrapper = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  margin-right: 40px;
-`;
-
-export const TotalSelectedWrapper = styled.div`
-  display: flex;
-  gap: 6px;
-`;
diff --git a/frontend/webapp/components/setup/headers/connect-destination-header/index.tsx b/frontend/webapp/components/setup/headers/connect-destination-header/index.tsx
deleted file mode 100644
index db9f9b79a..000000000
--- a/frontend/webapp/components/setup/headers/connect-destination-header/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { KeyvalText } from '@/design.system';
-import { HeaderTitleWrapper, SetupHeaderWrapper } from './styled';
-import { ConnectionsIcons } from '../../connection/connections_icons/connections_icons';
-
-export function ConnectDestinationHeader({ icon, name }) {
-  return (
-    <SetupHeaderWrapper>
-      <HeaderTitleWrapper>
-        <ConnectionsIcons icon={icon} />
-        <KeyvalText
-          size={20}
-          weight={600}
-        >{`Add ${name} Destination`}</KeyvalText>
-      </HeaderTitleWrapper>
-    </SetupHeaderWrapper>
-  );
-}
diff --git a/frontend/webapp/components/setup/headers/connect-destination-header/styled.tsx b/frontend/webapp/components/setup/headers/connect-destination-header/styled.tsx
deleted file mode 100644
index ce2e8d32a..000000000
--- a/frontend/webapp/components/setup/headers/connect-destination-header/styled.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-export const SetupHeaderWrapper = styled.header`
-  display: inline-flex;
-  justify-content: space-between;
-  width: 100%;
-  align-items: center;
-`;
-
-export const HeaderTitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  margin-left: 40px;
-`;
diff --git a/frontend/webapp/components/setup/headers/header/index.tsx b/frontend/webapp/components/setup/headers/header/index.tsx
deleted file mode 100644
index b2a763af6..000000000
--- a/frontend/webapp/components/setup/headers/header/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Image from 'next/image';
-import React from 'react';
-import styled from 'styled-components';
-import { NavigationButtons, Text } from '@/reuseable-components';
-
-interface SetupHeaderProps {
-  navigationButtons: {
-    label: string;
-    iconSrc?: string;
-    onClick: () => void;
-    variant?: 'primary' | 'secondary';
-    disabled?: boolean;
-  }[];
-}
-
-const HeaderContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0 24px 0 32px;
-  align-items: center;
-  background-color: ${({ theme }) => theme.colors.dark_grey};
-  border-bottom: 1px solid rgba(249, 249, 249, 0.16);
-  height: 80px;
-`;
-
-const Title = styled(Text)``;
-
-const Logo = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 1.2em;
-`;
-
-const NavigationButtonsWrapper = styled.div`
-  position: absolute;
-  right: 24px;
-`;
-
-export const SetupHeader: React.FC<SetupHeaderProps> = ({
-  navigationButtons,
-}) => {
-  return (
-    <HeaderContainer>
-      <Logo>
-        <Image
-          src="/brand/transparent-logo-white.svg"
-          alt="logo"
-          width={84}
-          height={20}
-        />
-      </Logo>
-      <Title family={'secondary'}>START WITH ODIGOS</Title>
-      <div style={{ width: 84 }} />
-      <NavigationButtonsWrapper>
-        <NavigationButtons buttons={navigationButtons} />
-      </NavigationButtonsWrapper>
-    </HeaderContainer>
-  );
-};
diff --git a/frontend/webapp/components/setup/headers/index.tsx b/frontend/webapp/components/setup/headers/index.tsx
deleted file mode 100644
index ce9c51325..000000000
--- a/frontend/webapp/components/setup/headers/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './choose-destination-header';
-export * from './choose-sources-header';
-export * from './connect-destination-header';
-export * from './back-button';
-export * from './header';
diff --git a/frontend/webapp/components/setup/index.tsx b/frontend/webapp/components/setup/index.tsx
index b45b6ee9c..8267df70b 100644
--- a/frontend/webapp/components/setup/index.tsx
+++ b/frontend/webapp/components/setup/index.tsx
@@ -1,9 +1 @@
-export { SourcesList } from './sources/sources.list/sources.list';
-export { DestinationList } from './destination/destination.list/destination.list';
-export { SourcesOptionMenu } from './sources/sources.option.menu/sources.option.menu';
-export { DestinationOptionMenu } from './destination/destination.option.menu/destination.option.menu';
-export { ConnectionsIcons } from './connection/connections_icons/connections_icons';
-export { CreateConnectionForm } from './connection/create.connection.form/create.connection.form';
-export { QuickHelp } from './connection/quick.help/quick.help';
-export * from './headers';
 export * from './menu';
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
deleted file mode 100644
index 1eabb6e0d..000000000
--- a/frontend/webapp/components/setup/sources/source.card/source.card.styled.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import styled from 'styled-components';
-
-export const RadioButtonWrapper = styled.div`
-  position: absolute;
-  right: 16px;
-  top: 16px;
-`;
-
-export const SourceCardWrapper = styled.div`
-  padding: 1vw;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-
-  cursor: pointer;
-  .p {
-    cursor: pointer !important;
-  }
-  @media screen and (max-width: 1200px) {
-    flex-direction: row;
-  }
-`;
-
-export const SourceTextWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: 1vh;
-  @media screen and (max-width: 1200px) {
-    align-items: flex-start;
-    margin-left: 1vw;
-  }
-`;
-
-export const ApplicationNameWrapper = styled.div`
-  display: inline-block;
-  text-overflow: ellipsis;
-  max-width: 224px;
-  @media screen and (max-width: 1250px) {
-    max-width: 154px;
-  }
-  @media screen and (max-width: 1150px) {
-    max-width: 224px;
-  }
-`;
diff --git a/frontend/webapp/components/setup/sources/source.card/source.card.tsx b/frontend/webapp/components/setup/sources/source.card/source.card.tsx
deleted file mode 100644
index be08f93aa..000000000
--- a/frontend/webapp/components/setup/sources/source.card/source.card.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import {
-  KeyvalCard,
-  KeyvalRadioButton,
-  KeyvalTag,
-  KeyvalText,
-} from '@/design.system';
-import React from 'react';
-import {
-  ApplicationNameWrapper,
-  RadioButtonWrapper,
-  SourceCardWrapper,
-  SourceTextWrapper,
-} from './source.card.styled';
-import Logo from 'assets/logos/code-sandbox-logo.svg';
-import { SETUP } from '@/utils/constants';
-import { KIND_COLORS } from '@/styles/global';
-
-const TEXT_STYLE = {
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-};
-
-export function SourceCard({ item, onClick, focus }: any) {
-  return (
-    <KeyvalCard focus={focus}>
-      <RadioButtonWrapper>
-        <KeyvalRadioButton onChange={onClick} value={focus} />
-      </RadioButtonWrapper>
-      <SourceCardWrapper onClick={onClick} data-cy={'choose-source-' + item.name}>
-        <Logo width={'6vh'} height={'6vh'} />
-        <SourceTextWrapper>
-          <ApplicationNameWrapper>
-            <KeyvalText size={18} weight={700} style={TEXT_STYLE}>
-              {item.name}
-            </KeyvalText>
-          </ApplicationNameWrapper>
-          <KeyvalTag
-            title={item.kind}
-            color={KIND_COLORS[item.kind.toLowerCase()]}
-          />
-          <KeyvalText size={14} weight={400}>
-            {`${item?.instances} ${SETUP.RUNNING_INSTANCES}`}
-          </KeyvalText>
-        </SourceTextWrapper>
-      </SourceCardWrapper>
-    </KeyvalCard>
-  );
-}
diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
deleted file mode 100644
index 3025337bd..000000000
--- a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-export const SourcesListContainer = styled.div`
-  width: 100%;
-  max-height: 100%;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-`;
-
-export const SourcesTitleWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 2% 0;
-`;
-
-export const SourcesListWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(242px, 1fr));
-  gap: 24px;
-  padding-bottom: 10%;
-
-  @media screen and (max-width: 1200px) {
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  }
-`;
diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx
deleted file mode 100644
index 7b615d866..000000000
--- a/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import {
-  SourcesListContainer,
-  SourcesListWrapper,
-  SourcesTitleWrapper,
-} from './sources.list.styled';
-import { SourceCard } from '../source.card/source.card';
-import { KeyvalLink, KeyvalText } from '@/design.system';
-import { OVERVIEW, SETUP } from '@/utils/constants';
-import { EmptyList } from '@/components/lists';
-
-export function SourcesList({
-  data,
-  onItemClick,
-  selectedData,
-  onClearClick,
-}: any) {
-  function isFocus(currentCard: any) {
-    const currentItem = selectedData?.objects?.filter(
-      (item) => item.name === currentCard.name
-    );
-
-    return currentItem?.[0]?.selected || false;
-  }
-
-  function renderList() {
-    return data?.map((item: any, index: number) => (
-      <SourceCard
-        key={index}
-        item={item}
-        onClick={() => onItemClick({ item, index })}
-        focus={isFocus(item)}
-      />
-    ));
-  }
-
-  const isListEmpty = () => data?.length === 0;
-
-  return !data ? null : (
-    <SourcesListContainer>
-      {isListEmpty() ? (
-        <EmptyList title={OVERVIEW.EMPTY_SOURCE} />
-      ) : (
-        <>
-          <SourcesTitleWrapper>
-            <KeyvalText>{`${data?.length} ${SETUP.APPLICATIONS}`}</KeyvalText>
-            <KeyvalLink onClick={onClearClick} value={SETUP.CLEAR_SELECTION} />
-          </SourcesTitleWrapper>
-          <SourcesListWrapper>{renderList()}</SourcesListWrapper>
-        </>
-      )}
-    </SourcesListContainer>
-  );
-}
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx
deleted file mode 100644
index 0fe4f9824..000000000
--- a/frontend/webapp/components/setup/sources/sources.option.menu/action.sources.options.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import { CheckboxWrapper, SwitcherWrapper } from './sources.option.menu.styled';
-import { KeyvalCheckbox, KeyvalSwitch, KeyvalTooltip } from '@/design.system';
-import { SETUP } from '@/utils/constants';
-
-export function ActionSourcesOptions({
-  onSelectAllChange,
-  selectedApplications,
-  currentNamespace,
-  onFutureApplyChange,
-}: any) {
-  const [checked, setChecked] = useState(false);
-  const [toggle, setToggle] = useState(false);
-
-  useEffect(() => {
-    setToggle(selectedApplications[currentNamespace?.name]?.selected_all);
-    setChecked(selectedApplications[currentNamespace?.name]?.future_selected);
-  }, [currentNamespace, selectedApplications]);
-
-  const handleToggleChange = () => {
-    onSelectAllChange(!toggle);
-    setToggle(!toggle);
-  };
-
-  return (
-    <>
-      <SwitcherWrapper>
-        <KeyvalSwitch
-          label={SETUP.MENU.SELECT_ALL}
-          toggle={toggle}
-          handleToggleChange={handleToggleChange}
-        />
-      </SwitcherWrapper>
-      <CheckboxWrapper>
-        <KeyvalTooltip text={SETUP.MENU.TOOLTIP}>
-          <KeyvalCheckbox
-            label={SETUP.MENU.FUTURE_APPLY}
-            value={checked}
-            onChange={() => onFutureApplyChange(!checked)}
-            disabled={!toggle}
-          />
-        </KeyvalTooltip>
-      </CheckboxWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
deleted file mode 100644
index 7d34b8dee..000000000
--- a/frontend/webapp/components/setup/sources/sources.option.menu/filter.sources.options.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { DropdownWrapper } from './sources.option.menu.styled';
-import { KeyvalDropDown, KeyvalSearchInput, KeyvalText } from '@/design.system';
-import { SETUP } from '@/utils/constants';
-
-export function FilterSourcesOptions({
-  setCurrentItem,
-  data,
-  searchFilter,
-  setSearchFilter,
-  currentNamespace,
-}: any) {
-  function handleDropDownChange(item: any) {
-    setCurrentItem({ id: item?.id, name: item.label });
-  }
-
-  return (
-    <>
-      <KeyvalSearchInput
-        value={searchFilter}
-        onChange={(e) => setSearchFilter(e.target.value)}
-      />
-      <DropdownWrapper>
-        <KeyvalText size={14}>{SETUP.MENU.NAMESPACES}</KeyvalText>
-        <KeyvalDropDown
-          value={{ id: 0, label: currentNamespace.name }}
-          data={data}
-          onChange={handleDropDownChange}
-        />
-      </DropdownWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
deleted file mode 100644
index fceff77ab..000000000
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.styled.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-export const SourcesOptionMenuWrapper = styled.section`
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  padding: 3% 0 0 0;
-  flex-wrap: wrap;
-  @media screen and (max-width: 1650px) {
-    width: 85%;
-  }
-`;
-
-export const DropdownWrapper = styled.div`
-  display: flex;
-  position: inherit;
-  align-items: center;
-  gap: 12px;
-`;
-
-export const CheckboxWrapper = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  min-width: 180px;
-`;
-
-export const SwitcherWrapper = styled.div`
-  min-width: 90px;
-`;
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx
deleted file mode 100644
index e26065162..000000000
--- a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { SourcesOptionMenuWrapper } from './sources.option.menu.styled';
-import { FilterSourcesOptions } from './filter.sources.options';
-import { ActionSourcesOptions } from './action.sources.options';
-import { KeyvalButton, KeyvalText } from '@/design.system';
-import theme from '@/styles/palette';
-
-export function SourcesOptionMenu({
-  setCurrentItem,
-  data,
-  searchFilter,
-  setSearchFilter,
-  onSelectAllChange,
-  selectedApplications,
-  currentNamespace,
-  onFutureApplyChange,
-  toggleFastSourcesSelection,
-}: any) {
-  return (
-    <SourcesOptionMenuWrapper>
-      <FilterSourcesOptions
-        currentNamespace={currentNamespace}
-        setCurrentItem={setCurrentItem}
-        data={data}
-        searchFilter={searchFilter}
-        setSearchFilter={setSearchFilter}
-      />
-      <ActionSourcesOptions
-        currentNamespace={currentNamespace}
-        onSelectAllChange={onSelectAllChange}
-        selectedApplications={selectedApplications}
-        onFutureApplyChange={onFutureApplyChange}
-      />
-      <KeyvalButton style={{ height: 36 }} onClick={toggleFastSourcesSelection}>
-        <KeyvalText color={theme.text.dark_button}>
-          Fast Sources Selection
-        </KeyvalText>
-      </KeyvalButton>
-    </SourcesOptionMenuWrapper>
-  );
-}
diff --git a/frontend/webapp/components/side.menu/contact.us/contact.us.tsx b/frontend/webapp/components/side.menu/contact.us/contact.us.tsx
deleted file mode 100644
index d7a5f88ed..000000000
--- a/frontend/webapp/components/side.menu/contact.us/contact.us.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { Slack, SlackGrey } from '@/assets/icons/social';
-import { KeyvalText } from '@/design.system';
-import { SLACK_INVITE_LINK } from '@/utils/constants/urls';
-import { styled } from 'styled-components';
-import { ACTION } from '@/utils/constants';
-
-const ContactUsContainer = styled.div`
-  display: flex;
-  padding: 0px 16px;
-  height: 48px;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-  border-radius: 10px;
-  p {
-    color: #8b92a6;
-  }
-  .icon-lock {
-    display: none;
-  }
-  &:hover {
-    p {
-      color: ${({ theme }) => theme.colors.white};
-    }
-    .icon-unlock {
-      display: none;
-    }
-
-    .icon-lock {
-      display: block;
-    }
-  }
-`;
-
-export default function ContactUsButton({ expand }) {
-  function handleContactUsClick() {
-    window.open(SLACK_INVITE_LINK, '_blank');
-  }
-
-  return (
-    <ContactUsContainer onClick={handleContactUsClick}>
-      <Slack width={24} height={24} className="icon-lock" />
-      <SlackGrey width={24} height={24} className="icon-unlock" />
-      {expand && <KeyvalText size={14}>{ACTION.CONTACT_US}</KeyvalText>}
-    </ContactUsContainer>
-  );
-}
diff --git a/frontend/webapp/components/side.menu/index.tsx b/frontend/webapp/components/side.menu/index.tsx
deleted file mode 100644
index 7395c801b..000000000
--- a/frontend/webapp/components/side.menu/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Menu } from './menu/menu';
diff --git a/frontend/webapp/components/side.menu/menu.item/menu.item.tsx b/frontend/webapp/components/side.menu/menu.item/menu.item.tsx
deleted file mode 100644
index f6215cd45..000000000
--- a/frontend/webapp/components/side.menu/menu.item/menu.item.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { KeyvalText } from '@/design.system';
-import React, { useEffect, useState } from 'react';
-import { styled } from 'styled-components';
-interface MenuItemContainerProps {
-  focused?: boolean;
-  expand?: boolean;
-}
-
-interface MenuItem {
-  name: string;
-  icons: {
-    focus: () => JSX.Element;
-    notFocus: () => JSX.Element;
-  };
-}
-
-interface MenuItemProps {
-  item: MenuItem;
-  focused: boolean;
-  onClick?: () => void;
-  expand?: boolean;
-}
-
-const MenuItemContainer = styled.div<MenuItemContainerProps>`
-  display: flex;
-  cursor: pointer;
-  width: ${({ expand }) => (expand ? '100%' : '48px')};
-  border-radius: 10px;
-  background: ${({ focused, theme }) =>
-    focused ? theme.colors.blue_grey : 'transparent'};
-  margin-bottom: 4px;
-  &:hover {
-    background: ${({ theme }) => theme.colors.blue_grey};
-  }
-`;
-
-const TextWrapper = styled.div<MenuItemContainerProps>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  left: -5%;
-  opacity: 0;
-  animation: slideInFromLeft 0.5s forwards;
-  @keyframes slideInFromLeft {
-    to {
-      left: ${({ expand }) => (expand ? '0' : '-10%')};
-      opacity: ${({ expand }) => (expand ? '1' : '0')};
-    }
-  }
-`;
-
-const IconWrapper = styled.div<MenuItemContainerProps>`
-  height: 48px;
-  width: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export default function MenuItem({
-  item,
-  focused,
-  onClick,
-  expand = false,
-}: MenuItemProps) {
-  const { name, icons } = item;
-
-  const [showText, setShowText] = useState(false);
-  let timeout: NodeJS.Timeout;
-  useEffect(() => {
-    onExpandChange();
-    return () => clearTimeout(timeout);
-  }, [expand]);
-
-  function onExpandChange() {
-    if (expand) {
-      timeout = setTimeout(() => {
-        setShowText(true);
-      }, 20);
-    } else {
-      setShowText(false);
-    }
-  }
-
-  const iconToRender = focused ? icons.focus() : icons.notFocus();
-  return (
-    <MenuItemContainer data-cy={'menu-'+ name} onClick={onClick} focused={focused} expand={expand}>
-      <IconWrapper>{iconToRender}</IconWrapper>
-      {showText && (
-        <TextWrapper expand={showText}>
-          <KeyvalText size={14} weight={600}>
-            {name}
-          </KeyvalText>
-        </TextWrapper>
-      )}
-    </MenuItemContainer>
-  );
-}
diff --git a/frontend/webapp/components/side.menu/menu/items.tsx b/frontend/webapp/components/side.menu/menu/items.tsx
deleted file mode 100644
index c3ae3a2d4..000000000
--- a/frontend/webapp/components/side.menu/menu/items.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { OVERVIEW, ROUTES } from '@/utils/constants';
-import { MenuItem } from './menu';
-import {
-  FocusActionIcon,
-  FocusDestinationsIcon,
-  FocusOverviewIcon,
-  FocusSourcesIcon,
-  UnFocusActionIcon,
-  UnFocusDestinationsIcon,
-  UnFocusOverviewIcon,
-  UnFocusSourcesIcon,
-} from '@keyval-dev/design-system';
-import { Funnel, FunnelFocus } from '@/assets';
-
-export const MENU_ITEMS: MenuItem[] = [
-  {
-    id: 1,
-    name: OVERVIEW.MENU.OVERVIEW,
-    icons: {
-      focus: () => <FocusOverviewIcon />,
-      notFocus: () => <UnFocusOverviewIcon />,
-    },
-    navigate: ROUTES.OVERVIEW,
-  },
-  {
-    id: 2,
-    name: OVERVIEW.MENU.SOURCES,
-    icons: {
-      focus: () => <FocusSourcesIcon />,
-      notFocus: () => <UnFocusSourcesIcon />,
-    },
-    navigate: ROUTES.SOURCES,
-  },
-  {
-    id: 3,
-    name: OVERVIEW.MENU.INSTRUMENTATION_RULES,
-    icons: {
-      focus: () => <FunnelFocus style={{ width: 24 }} />,
-      notFocus: () => <Funnel style={{ width: 24 }} />,
-    },
-    navigate: ROUTES.INSTRUMENTATION_RULES,
-  },
-  {
-    id: 4,
-    name: OVERVIEW.MENU.ACTIONS,
-    icons: {
-      focus: () => <FocusActionIcon />,
-      notFocus: () => <UnFocusActionIcon />,
-    },
-    navigate: ROUTES.ACTIONS,
-  },
-  {
-    id: 5,
-    name: OVERVIEW.MENU.DESTINATIONS,
-    icons: {
-      focus: () => <FocusDestinationsIcon />,
-      notFocus: () => <UnFocusDestinationsIcon />,
-    },
-    navigate: ROUTES.DESTINATIONS,
-  },
-];
diff --git a/frontend/webapp/components/side.menu/menu/menu.styled.tsx b/frontend/webapp/components/side.menu/menu/menu.styled.tsx
deleted file mode 100644
index aa6f2734f..000000000
--- a/frontend/webapp/components/side.menu/menu/menu.styled.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-export const MenuContainer = styled.div<{ $isExpanded?: boolean }>`
-  transition: width 0.1s;
-  height: 100%;
-  border-right: 1px solid rgba(255, 255, 255, 0.04);
-  background: ${({ theme }) => theme.colors.dark_blue};
-  width: ${({ $isExpanded }) => ($isExpanded ? 234 : 70)}px;
-`;
-
-export const LogoWrapper = styled.div`
-  cursor: pointer;
-  padding: 24px 16px;
-  height: 48px;
-  position: relative;
-  opacity: 0;
-  animation: slideInFromLeft 2s forwards;
-  @keyframes slideInFromLeft {
-    to {
-      left: 0; /* Slide in to the final position */
-      opacity: 1;
-    }
-  }
-`;
-
-export const MenuItemsWrapper = styled.div`
-  padding: 16px 9px;
-`;
-
-export const ContactUsWrapper = styled(MenuItemsWrapper)`
-  position: absolute;
-  bottom: 0%;
-`;
diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx
deleted file mode 100644
index 5566789a7..000000000
--- a/frontend/webapp/components/side.menu/menu/menu.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import {
-  MenuContainer,
-  LogoWrapper,
-  MenuItemsWrapper,
-  ContactUsWrapper,
-} from './menu.styled';
-import { KeyvalImage, KeyvalText } from '@/design.system';
-import MenuItem from '../menu.item/menu.item';
-import { useRouter } from 'next/navigation';
-import { METADATA, OVERVIEW, ROUTES } from '@/utils/constants';
-import { MENU_ITEMS } from './items';
-import ContactUsButton from '../contact.us/contact.us';
-
-export interface MenuItem {
-  id: number;
-  name: string;
-  icons: {
-    focus: () => JSX.Element;
-    notFocus: () => JSX.Element;
-  };
-  navigate: string;
-}
-
-export function Menu() {
-  const [currentMenuItem, setCurrentMenuItem] = useState<MenuItem>(
-    MENU_ITEMS[0]
-  );
-  const [isExpanded, setIsExpanded] = useState(false);
-  const router = useRouter();
-
-  useEffect(onLoad, []);
-
-  function onLoad() {
-    const currentItem = MENU_ITEMS.find(
-      ({ navigate }) =>
-        navigate !== ROUTES.OVERVIEW &&
-        window.location.pathname.includes(navigate)
-    );
-
-    currentItem && setCurrentMenuItem(currentItem);
-  }
-
-  function handleMenuItemClick(item) {
-    setCurrentMenuItem(item);
-    router.push(item?.navigate);
-  }
-
-  function renderMenuItemsList() {
-    return MENU_ITEMS.map((item) => (
-      <MenuItem
-        key={`${item.id}_${item.name}`}
-        onClick={() => handleMenuItemClick(item)}
-        focused={currentMenuItem?.id === item.id}
-        item={item}
-        expand={isExpanded}
-      />
-    ));
-  }
-
-  function renderMenuLogo() {
-    return (
-      <LogoWrapper 
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        {isExpanded ? (
-          <KeyvalText size={32} weight={700}>
-            {OVERVIEW.ODIGOS}
-          </KeyvalText>
-        ) : (
-          <KeyvalImage src={METADATA.icons} width={40} height={40} />
-        )}
-      </LogoWrapper>
-    );
-  }
-
-  function renderContactUsButton() {
-    return (
-      <ContactUsWrapper>
-        <ContactUsButton expand={isExpanded} />
-      </ContactUsWrapper>
-    );
-  }
-
-  return (
-    <MenuContainer $isExpanded={isExpanded} >
-      {renderMenuLogo()}
-      <MenuItemsWrapper>{renderMenuItemsList()}</MenuItemsWrapper>
-      {renderContactUsButton()}
-    </MenuContainer>
-  );
-}
diff --git a/frontend/webapp/containers/index.ts b/frontend/webapp/containers/index.ts
index 5d60cbf88..aad1ca831 100644
--- a/frontend/webapp/containers/index.ts
+++ b/frontend/webapp/containers/index.ts
@@ -1,2 +1 @@
-export * from './setup';
 export * from './main';
diff --git a/frontend/webapp/containers/main/actions/choose-action/index.tsx b/frontend/webapp/containers/main/actions/choose-action/index.tsx
deleted file mode 100644
index 6d61d18be..000000000
--- a/frontend/webapp/containers/main/actions/choose-action/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import {useRouter} from 'next/navigation';
-import {NewActionCard} from '@/components';
-import {ActionItemCard, ActionsType} from '@/types';
-import {KeyvalLink, KeyvalText} from '@/design.system';
-import {ACTION, ACTION_DOCS_LINK, OVERVIEW} from '@/utils';
-import {ActionCardWrapper, ActionsListWrapper, DescriptionWrapper, LinkWrapper,} from './styled';
-
-const ITEMS = [
-    {
-        id: 'add_cluster_info',
-        title: 'Add Cluster Info',
-        description: 'Add static cluster-scoped attributes to your data.',
-        type: ActionsType.ADD_CLUSTER_INFO,
-        icon: ActionsType.ADD_CLUSTER_INFO,
-    },
-    {
-        id: 'delete_attribute',
-        title: 'Delete Attribute',
-        description: 'Delete attributes from logs, metrics, and traces.',
-        type: ActionsType.DELETE_ATTRIBUTES,
-        icon: ActionsType.DELETE_ATTRIBUTES,
-    },
-    {
-        id: 'rename_attribute',
-        title: 'Rename Attribute',
-        description: 'Rename attributes in logs, metrics, and traces.',
-        type: ActionsType.RENAME_ATTRIBUTES,
-        icon: ActionsType.RENAME_ATTRIBUTES,
-    },
-    {
-        id: 'error-sampler',
-        title: 'Error Sampler',
-        description: 'Sample errors based on percentage.',
-        type: ActionsType.ERROR_SAMPLER,
-        icon: ActionsType.ERROR_SAMPLER,
-    },
-    {
-        id: 'probabilistic-sampler',
-        title: 'Probabilistic Sampler',
-        description: 'Sample traces based on percentage.',
-        type: ActionsType.PROBABILISTIC_SAMPLER,
-        icon: ActionsType.PROBABILISTIC_SAMPLER,
-    },
-    {
-        id: 'latency-action',
-        title: 'Latency Action',
-        description: 'Add latency to your traces.',
-        type: ActionsType.LATENCY_SAMPLER,
-        icon: ActionsType.LATENCY_SAMPLER,
-    },
-    {
-        id: 'pii-masking',
-        title: 'PII Masking',
-        description: 'Mask PII data in your traces.',
-        type: ActionsType.PII_MASKING,
-        icon: ActionsType.PII_MASKING,
-    },
-];
-
-export function ChooseActionContainer(): React.JSX.Element {
-    const router = useRouter();
-
-    function onItemClick({item}: { item: ActionItemCard }) {
-        router.push(`/create-action?type=${item.type}`);
-    }
-
-    function renderActionsList() {
-        return ITEMS.map((item) => {
-            return (
-                <ActionCardWrapper data-cy={'choose-action-' + item.type} key={item.id}>
-                    <NewActionCard item={item} onClick={onItemClick}/>
-                </ActionCardWrapper>
-            );
-        });
-    }
-
-    return (
-        <>
-            <DescriptionWrapper>
-                <KeyvalText size={14}>{OVERVIEW.ACTION_DESCRIPTION}</KeyvalText>
-                <LinkWrapper>
-                    <KeyvalLink
-                        fontSize={14}
-                        value={ACTION.LINK_TO_DOCS}
-                        onClick={() => window.open(ACTION_DOCS_LINK, '_blank')}
-                    />
-                </LinkWrapper>
-            </DescriptionWrapper>
-            <ActionsListWrapper>{renderActionsList()}</ActionsListWrapper>
-        </>
-    );
-}
diff --git a/frontend/webapp/containers/main/actions/choose-action/styled.ts b/frontend/webapp/containers/main/actions/choose-action/styled.ts
deleted file mode 100644
index 2c04da8bb..000000000
--- a/frontend/webapp/containers/main/actions/choose-action/styled.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-export const ActionsListWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 16px;
-  padding: 0 24px 24px 24px;
-  overflow-y: auto;
-  align-items: start;
-  max-height: 100%;
-  padding-bottom: 220px;
-  box-sizing: border-box;
-`;
-
-export const DescriptionWrapper = styled.div`
-  padding: 24px;
-  gap: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-`;
-
-export const LinkWrapper = styled.div`
-  width: 100px;
-`;
-
-export const ActionCardWrapper = styled.div`
-  height: 100%;
-  max-height: 220px;
-`;
diff --git a/frontend/webapp/containers/main/actions/create-action/index.tsx b/frontend/webapp/containers/main/actions/create-action/index.tsx
deleted file mode 100644
index 02b55e8fe..000000000
--- a/frontend/webapp/containers/main/actions/create-action/index.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import theme from '@/styles/palette';
-import { useActionState } from '@/hooks';
-import { useSearchParams } from 'next/navigation';
-import { ACTION, ACTIONS, ACTION_ITEM_DOCS_LINK } from '@/utils';
-import {
-  MultiCheckboxComponent,
-  DynamicActionForm,
-  ActionIcon,
-} from '@/components';
-import {
-  KeyvalButton,
-  KeyvalInput,
-  KeyvalLink,
-  KeyvalLoader,
-  KeyvalText,
-  KeyvalTextArea,
-} from '@/design.system';
-import {
-  Container,
-  CreateActionWrapper,
-  CreateButtonWrapper,
-  DescriptionWrapper,
-  HeaderText,
-  KeyvalInputWrapper,
-  LoaderWrapper,
-  TextareaWrapper,
-} from './styled';
-
-const ACTION_TYPE = 'type';
-
-export function CreateActionContainer(): React.JSX.Element {
-  const [isFormValid, setIsFormValid] = useState(false);
-
-  const {
-    actionState,
-    onChangeActionState,
-    upsertAction,
-    getSupportedSignals,
-  } = useActionState();
-  const { actionName, actionNote, actionData, selectedMonitors, type } =
-    actionState;
-
-  const search = useSearchParams();
-
-  useEffect(() => {
-    const action = search.get(ACTION_TYPE);
-    action && onChangeActionState('type', action);
-  }, [search]);
-
-  if (!type)
-    return (
-      <LoaderWrapper>
-        <KeyvalLoader />
-      </LoaderWrapper>
-    );
-
-  return (
-    <Container>
-      <CreateActionWrapper>
-        <HeaderText>
-          <ActionIcon type={type} style={{ width: 34, height: 34 }} />
-          <KeyvalText size={18} weight={700}>
-            {ACTIONS[type].TITLE}
-          </KeyvalText>
-        </HeaderText>
-        <DescriptionWrapper>
-          <KeyvalText size={14}>{ACTIONS[type].DESCRIPTION}</KeyvalText>
-          <KeyvalLink
-            value={ACTION.LINK_TO_DOCS}
-            fontSize={14}
-            onClick={() =>
-              window.open(
-                `${ACTION_ITEM_DOCS_LINK}/${type.toLowerCase()}`,
-                '_blank'
-              )
-            }
-          />
-        </DescriptionWrapper>
-        <div
-          style={{
-            width: '100%',
-            height: 1,
-            backgroundColor: theme.colors.blue_grey,
-          }}
-        />
-        <MultiCheckboxComponent
-          title={ACTIONS.MONITORS_TITLE}
-          checkboxes={getSupportedSignals(type, selectedMonitors)}
-          onSelectionChange={(newMonitors) =>
-            onChangeActionState('selectedMonitors', newMonitors)
-          }
-        />
-        <KeyvalInputWrapper>
-          <KeyvalInput
-            data-cy={'create-action-input-name'}
-            label={ACTIONS.ACTION_NAME}
-            value={actionName}
-            onChange={(name) => onChangeActionState('actionName', name)}
-          />
-        </KeyvalInputWrapper>
-        <DynamicActionForm
-          type={type}
-          data={actionData}
-          onChange={onChangeActionState}
-          setIsFormValid={setIsFormValid}
-        />
-        <TextareaWrapper>
-          <KeyvalTextArea
-            label={ACTIONS.ACTION_NOTE}
-            value={actionNote}
-            placeholder={ACTIONS.NOTE_PLACEHOLDER}
-            onChange={(e) => onChangeActionState('actionNote', e.target.value)}
-          />
-        </TextareaWrapper>
-        <CreateButtonWrapper>
-          <KeyvalButton data-cy={'create-action-onclick'} onClick={upsertAction} disabled={!isFormValid}>
-            <KeyvalText weight={600} color={theme.text.dark_button} size={14}>
-              {ACTIONS.CREATE_ACTION}
-            </KeyvalText>
-          </KeyvalButton>
-        </CreateButtonWrapper>
-      </CreateActionWrapper>
-    </Container>
-  );
-}
diff --git a/frontend/webapp/containers/main/actions/create-action/styled.ts b/frontend/webapp/containers/main/actions/create-action/styled.ts
deleted file mode 100644
index b181b2569..000000000
--- a/frontend/webapp/containers/main/actions/create-action/styled.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  height: 100%;
-  padding: 24px;
-  .action-yaml-column {
-    display: none;
-  }
-  @media screen and (max-height: 700px) {
-    height: 90%;
-  }
-
-  @media screen and (max-width: 1200px) {
-    .action-yaml-row {
-      display: none;
-    }
-    .action-yaml-column {
-      display: block;
-    }
-    width: 100%;
-  }
-`;
-
-export const HeaderText = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-export const CreateActionWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 24px;
-  padding-top: 0;
-  box-sizing: border-box;
-  max-height: 90%;
-  overflow-y: auto;
-
-  @media screen and (max-height: 450px) {
-    max-height: 85%;
-  }
-
-  @media screen and (max-width: 1200px) {
-    width: 100%;
-  }
-`;
-
-export const ActionYamlWrapper = styled(CreateActionWrapper)``;
-
-export const KeyvalInputWrapper = styled.div`
-  width: 362px;
-`;
-
-export const TextareaWrapper = styled.div`
-  width: 375px;
-`;
-
-export const CreateButtonWrapper = styled.div`
-  margin-top: 32px;
-  width: 375px;
-`;
-
-export const DescriptionWrapper = styled.div`
-  width: 100%;
-  max-width: 40vw;
-  min-width: 370px;
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-`;
-
-export const LinkWrapper = styled.div`
-  margin-left: 8px;
-  width: 100px;
-`;
-
-export const LoaderWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
diff --git a/frontend/webapp/containers/main/actions/edit-action/index.tsx b/frontend/webapp/containers/main/actions/edit-action/index.tsx
deleted file mode 100644
index f6aaa0722..000000000
--- a/frontend/webapp/containers/main/actions/edit-action/index.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import theme from '@/styles/palette';
-import { Monitor, useActionState } from '@/hooks';
-import { useSearchParams } from 'next/navigation';
-import { ACTION, ACTIONS, ACTION_ITEM_DOCS_LINK } from '@/utils';
-import {
-  ActionIcon,
-  DeleteAction,
-  DynamicActionForm,
-  MultiCheckboxComponent,
-} from '@/components';
-import {
-  KeyvalButton,
-  KeyvalInput,
-  KeyvalLink,
-  KeyvalLoader,
-  KeyvalSwitch,
-  KeyvalText,
-  KeyvalTextArea,
-} from '@/design.system';
-import {
-  HeaderText,
-  LoaderWrapper,
-  DescriptionWrapper,
-  CreateButtonWrapper,
-  CreateActionWrapper,
-  KeyvalInputWrapper,
-  TextareaWrapper,
-  SwitchWrapper,
-  FormFieldsWrapper,
-} from './styled';
-
-const ACTION_ID = 'id';
-
-export function EditActionContainer(): React.JSX.Element {
-  const [isFormValid, setIsFormValid] = useState(false);
-
-  const {
-    actionState,
-    onChangeActionState,
-    upsertAction,
-    buildActionData,
-    onDeleteAction,
-    getSupportedSignals,
-  } = useActionState();
-
-  const {
-    actionName,
-    actionNote,
-    actionData,
-    selectedMonitors,
-    disabled,
-    type,
-  } = actionState;
-
-  const search = useSearchParams();
-
-  useEffect(() => {
-    const actionId = search.get(ACTION_ID);
-    if (!actionId) return;
-    buildActionData(actionId);
-  }, [search]);
-
-  if (!actionState || !type)
-    return (
-      <LoaderWrapper>
-        <KeyvalLoader />
-      </LoaderWrapper>
-    );
-
-  return (
-    <CreateActionWrapper>
-      <HeaderText>
-        <ActionIcon style={{ width: 34, height: 34 }} type={type} />
-
-        <KeyvalText size={18} weight={700}>
-          {ACTIONS[type].TITLE}
-        </KeyvalText>
-        <SwitchWrapper disabled={disabled} isValid={isFormValid}>
-          <KeyvalSwitch
-            toggle={!disabled}
-            handleToggleChange={() =>
-              onChangeActionState('disabled', !disabled)
-            }
-            label={disabled ? ACTION.DISABLE : ACTION.APPLIED}
-          />
-        </SwitchWrapper>
-      </HeaderText>
-      <DescriptionWrapper>
-        <KeyvalText size={14}>{ACTIONS[type].DESCRIPTION}</KeyvalText>
-        <KeyvalLink
-          value={ACTION.LINK_TO_DOCS}
-          fontSize={14}
-          onClick={() =>
-            window.open(
-              `${ACTION_ITEM_DOCS_LINK}/${type.toLowerCase()}`,
-              '_blank'
-            )
-          }
-        />
-        <div
-          style={{
-            width: '100%',
-            height: 1,
-            marginTop: 16,
-            backgroundColor: theme.colors.blue_grey,
-          }}
-        />
-      </DescriptionWrapper>
-      <FormFieldsWrapper disabled={disabled}>
-        <MultiCheckboxComponent
-          title={ACTIONS.MONITORS_TITLE}
-          checkboxes={getSupportedSignals(type, selectedMonitors)}
-          onSelectionChange={(newMonitors) =>
-            onChangeActionState('selectedMonitors', newMonitors)
-          }
-        />
-        <KeyvalInputWrapper>
-          <KeyvalInput
-            label={ACTIONS.ACTION_NAME}
-            value={actionName}
-            onChange={(name) => onChangeActionState('actionName', name)}
-          />
-        </KeyvalInputWrapper>
-        <DynamicActionForm
-          type={type}
-          data={actionData}
-          onChange={onChangeActionState}
-          setIsFormValid={setIsFormValid}
-        />
-        <TextareaWrapper>
-          <KeyvalTextArea
-            label={ACTIONS.ACTION_NOTE}
-            value={actionNote}
-            placeholder={ACTIONS.NOTE_PLACEHOLDER}
-            onChange={(e) => onChangeActionState('actionNote', e.target.value)}
-          />
-        </TextareaWrapper>
-        <CreateButtonWrapper>
-          <KeyvalButton onClick={upsertAction} disabled={!isFormValid}>
-            <KeyvalText weight={600} color={theme.text.dark_button} size={14}>
-              {ACTIONS.UPDATE_ACTION}
-            </KeyvalText>
-          </KeyvalButton>
-        </CreateButtonWrapper>
-        <DeleteAction onDelete={onDeleteAction} name={actionName} type={type} />
-      </FormFieldsWrapper>
-    </CreateActionWrapper>
-  );
-}
diff --git a/frontend/webapp/containers/main/actions/edit-action/styled.ts b/frontend/webapp/containers/main/actions/edit-action/styled.ts
deleted file mode 100644
index eca9d876c..000000000
--- a/frontend/webapp/containers/main/actions/edit-action/styled.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-
-export const CreateActionWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 24px;
-  box-sizing: border-box;
-  max-height: 93%;
-  width: 100%;
-  overflow-y: auto;
-
-  @media screen and (max-height: 450px) {
-    max-height: 85%;
-  }
-`;
-
-export const FormFieldsWrapper = styled.div<{ disabled: boolean }>`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  opacity: ${({ disabled }) => (disabled ? 0.3 : 1)};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-`;
-
-export const SwitchWrapper = styled.div<{
-  disabled: boolean;
-  isValid: boolean;
-}>`
-  p {
-    color: ${({ disabled }) =>
-      disabled ? theme.colors.orange_brown : theme.colors.success};
-    font-weight: 600;
-  }
-
-  opacity: ${({ isValid }) => (!isValid ? 0.3 : 1)};
-  pointer-events: ${({ isValid }) => (!isValid ? 'none' : 'auto')};
-`;
-
-export const KeyvalInputWrapper = styled.div`
-  width: 362px;
-`;
-
-export const TextareaWrapper = styled.div`
-  width: 375px;
-`;
-
-export const CreateButtonWrapper = styled.div`
-  margin-top: 32px;
-  width: 375px;
-`;
-
-export const DescriptionWrapper = styled.div`
-  width: 80vw;
-  max-width: 1050px;
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-`;
-
-export const LinkWrapper = styled.div`
-  margin-left: 8px;
-  width: 100px;
-`;
-
-export const LoaderWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
-
-export const HeaderText = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
diff --git a/frontend/webapp/containers/main/actions/index.ts b/frontend/webapp/containers/main/actions/index.ts
index ceaa14b9c..f3e35db2c 100644
--- a/frontend/webapp/containers/main/actions/index.ts
+++ b/frontend/webapp/containers/main/actions/index.ts
@@ -1,7 +1,3 @@
-export * from './managed';
-export * from './choose-action';
-export * from './edit-action';
-export * from './create-action';
 export * from './choose-action-modal';
 export * from './choose-action-body';
 export * from './action-drawer-container';
diff --git a/frontend/webapp/containers/main/actions/managed/index.tsx b/frontend/webapp/containers/main/actions/managed/index.tsx
deleted file mode 100644
index 72017ed23..000000000
--- a/frontend/webapp/containers/main/actions/managed/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useActions, useNotify } from '@/hooks';
-import theme from '@/styles/palette';
-import { useRouter } from 'next/navigation';
-import { ACTIONS, OVERVIEW, ROUTES } from '@/utils';
-import { EmptyList, ActionsTable } from '@/components';
-import {
-  KeyvalText,
-  KeyvalButton,
-  KeyvalLoader,
-  KeyvalSearchInput,
-} from '@/design.system';
-import {
-  ActionsContainer,
-  Container,
-  Content,
-  Header,
-  HeaderRight,
-} from './styled';
-
-export function ManagedActionsContainer() {
-  const [searchInput, setSearchInput] = useState('');
-
-  const router = useRouter();
-  const notify = useNotify();
-  const {
-    isLoading,
-    actions,
-    sortActions,
-    filterActionsBySignal,
-    toggleActionStatus,
-    refetch,
-  } = useActions();
-
-  useEffect(() => {
-    refetch();
-  }, []);
-
-  function handleAddAction() {
-    router.push(ROUTES.CHOOSE_ACTIONS);
-  }
-
-  function handleEditAction(id: string) {
-    router.push(`${ROUTES.EDIT_ACTION}?id=${id}`);
-  }
-
-  function filterActions() {
-    return actions.filter(
-      ({ spec: { actionName } }) =>
-        actionName &&
-        actionName.toLowerCase().includes(searchInput.toLowerCase())
-    );
-  }
-
-  async function onSelectStatus(ids: string[], disabled: boolean) {
-    const res = await toggleActionStatus(ids, disabled);
-
-    notify({
-      type: res ? 'success' : 'error',
-      message: res
-        ? OVERVIEW.ACTION_UPDATE_SUCCESS
-        : OVERVIEW.ACTION_UPDATE_ERROR,
-      title: res ? 'Success' : 'Error',
-      crdType: 'action',
-      target: '',
-    });
-  }
-
-  if (isLoading) return <KeyvalLoader />;
-
-  return (
-    <>
-      <Container>
-        {!actions?.length ? (
-          <EmptyList
-            title={OVERVIEW.EMPTY_ACTION}
-            btnTitle={OVERVIEW.ADD_NEW_ACTION}
-            btnAction={handleAddAction}
-          />
-        ) : (
-          <ActionsContainer>
-            <Header>
-              <KeyvalSearchInput
-                containerStyle={{ padding: '6px 8px' }}
-                placeholder={ACTIONS.SEARCH_ACTION}
-                value={searchInput}
-                onChange={(e) => setSearchInput(e.target.value)}
-              />
-              <HeaderRight>
-                <KeyvalButton onClick={handleAddAction} style={{ height: 32 }}>
-                  <KeyvalText
-                    size={14}
-                    weight={600}
-                    color={theme.text.dark_button}
-                  >
-                    {OVERVIEW.ADD_NEW_ACTION}
-                  </KeyvalText>
-                </KeyvalButton>
-              </HeaderRight>
-            </Header>
-            <Content>
-              <ActionsTable
-                data={searchInput ? filterActions() : actions}
-                onRowClick={handleEditAction}
-                sortActions={sortActions}
-                filterActionsBySignal={filterActionsBySignal}
-                toggleActionStatus={onSelectStatus}
-              />
-            </Content>
-          </ActionsContainer>
-        )}
-      </Container>
-    </>
-  );
-}
diff --git a/frontend/webapp/containers/main/actions/managed/styled.ts b/frontend/webapp/containers/main/actions/managed/styled.ts
deleted file mode 100644
index aec66c3f7..000000000
--- a/frontend/webapp/containers/main/actions/managed/styled.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  max-height: 100%;
-  overflow-y: auto;
-`;
-
-export const ActionsContainer = styled.div`
-  margin-top: 24px;
-  width: 100%;
-  max-width: 1216px;
-`;
-
-export const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0 24px;
-  align-items: center;
-`;
-
-export const HeaderRight = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
-export const Content = styled.div`
-  padding: 20px;
-  min-height: 200px;
-`;
diff --git a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
index 88b78bc83..58fa0ef70 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
+import { IDestinationListItem } from '@/hooks';
 import { capitalizeFirstLetter } from '@/utils';
 import { DestinationListItem } from './destination-list-item';
 import { NoDataFound, SectionTitle } from '@/reuseable-components';
-import { IDestinationListItem } from '../choose-destination-modal-body';
 import { PotentialDestinationsList } from './potential-destinations-list';
 
 const Container = styled.div`
diff --git a/frontend/webapp/containers/main/destinations/destinations.styled.tsx b/frontend/webapp/containers/main/destinations/destinations.styled.tsx
deleted file mode 100644
index 2cbcf2f51..000000000
--- a/frontend/webapp/containers/main/destinations/destinations.styled.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-export const NewDestinationContainer = styled.div`
-  height: 81%;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  @media screen and (max-height: 650px) {
-    height: 72%;
-  }
-  @media screen and (max-height: 550px) {
-    height: 65%;
-  }
-`;
-
-export const ManageDestinationWrapper = styled.div`
-  padding: 32px;
-  overflow-y: scroll;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  height: 80vh;
-  @media screen and (max-height: 750px) {
-    height: 85vh;
-  }
-`;
diff --git a/frontend/webapp/containers/main/destinations/index.tsx b/frontend/webapp/containers/main/destinations/index.tsx
index 4decd49fc..6872095ac 100644
--- a/frontend/webapp/containers/main/destinations/index.tsx
+++ b/frontend/webapp/containers/main/destinations/index.tsx
@@ -1,3 +1,2 @@
-export * from './managed';
 export * from './add-destination';
 export * from './destination-drawer-container';
diff --git a/frontend/webapp/containers/main/destinations/managed/index.tsx b/frontend/webapp/containers/main/destinations/managed/index.tsx
deleted file mode 100644
index 0139e0272..000000000
--- a/frontend/webapp/containers/main/destinations/managed/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import {
-  KeyvalButton,
-  KeyvalLoader,
-  KeyvalSearchInput,
-  KeyvalText,
-} from '@/design.system';
-import theme from '@/styles/palette';
-import { useDestinations } from '@/hooks';
-import { OVERVIEW, ROUTES } from '@/utils';
-import { useRouter } from 'next/navigation';
-import { EmptyList, ManagedDestinationsTable } from '@/components';
-import {
-  Header,
-  Content,
-  Container,
-  HeaderRight,
-  DestinationsContainer,
-} from './styled';
-
-export function DestinationContainer() {
-  const [searchInput, setSearchInput] = useState('');
-  const {
-    destinationList,
-    destinationLoading,
-    sortDestinations,
-    refetchDestinations,
-    filterDestinationsBySignal,
-  } = useDestinations();
-
-  const router = useRouter();
-
-  useEffect(() => {
-    refetchDestinations();
-  }, []);
-
-  function handleAddDestination() {
-    router.push(ROUTES.CREATE_DESTINATION);
-  }
-
-  function filterDestinations() {
-    return destinationList.filter((destination) =>
-      destination.name.toLowerCase().includes(searchInput.toLowerCase())
-    );
-  }
-
-  if (destinationLoading) {
-    return <KeyvalLoader />;
-  }
-
-  return (
-    <Container>
-      {!destinationList?.length ? (
-        <EmptyList
-          title={OVERVIEW.EMPTY_DESTINATION}
-          btnTitle={OVERVIEW.ADD_NEW_DESTINATION}
-          btnAction={handleAddDestination}
-        />
-      ) : (
-        <DestinationsContainer>
-          <Header>
-            <KeyvalSearchInput
-              containerStyle={{ padding: '6px 8px' }}
-              value={searchInput}
-              onChange={(e) => setSearchInput(e.target.value)}
-            />
-            <HeaderRight>
-              <KeyvalButton
-                onClick={handleAddDestination}
-                style={{ height: 32 }}
-              >
-                <KeyvalText
-                  size={14}
-                  weight={600}
-                  color={theme.text.dark_button}
-                >
-                  {OVERVIEW.ADD_NEW_DESTINATION}
-                </KeyvalText>
-              </KeyvalButton>
-            </HeaderRight>
-          </Header>
-          <Content>
-            <ManagedDestinationsTable
-              sortDestinations={sortDestinations}
-              filterDestinationsBySignal={filterDestinationsBySignal}
-              data={searchInput ? filterDestinations() : destinationList}
-              onRowClick={({ id }) =>
-                router.push(`${ROUTES.UPDATE_DESTINATION}${id}`)
-              }
-            />
-          </Content>
-        </DestinationsContainer>
-      )}
-    </Container>
-  );
-}
diff --git a/frontend/webapp/containers/main/destinations/managed/styled.ts b/frontend/webapp/containers/main/destinations/managed/styled.ts
deleted file mode 100644
index c341ac6f1..000000000
--- a/frontend/webapp/containers/main/destinations/managed/styled.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  max-height: 100%;
-  overflow-y: auto;
-`;
-
-export const DestinationsContainer = styled.div`
-  margin-top: 24px;
-  width: 100%;
-  max-width: 1216px;
-`;
-
-export const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0 24px;
-  align-items: center;
-`;
-
-export const HeaderRight = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
-export const Content = styled.div`
-  padding: 20px;
-  min-height: 200px;
-`;
diff --git a/frontend/webapp/containers/main/destinations/new.destination.form.tsx b/frontend/webapp/containers/main/destinations/new.destination.form.tsx
deleted file mode 100644
index d1f2e6cd8..000000000
--- a/frontend/webapp/containers/main/destinations/new.destination.form.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-'use client';
-import React, { useEffect } from 'react';
-import { useSectionData } from '@/hooks';
-import { styled } from 'styled-components';
-import { HideScroll } from '@/styles/styled';
-import { useMutation, useQuery } from 'react-query';
-import { OVERVIEW, QUERIES, ROUTES } from '@/utils';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { ManageDestination, OverviewHeader } from '@/components';
-import {
-  getDestination,
-  getDestinationsTypes,
-  setDestination,
-} from '@/services';
-
-const DEST = 'dest';
-
-const NewDestinationContainer = styled.div`
-  padding: 20px 36px;
-
-  overflow: scroll;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  height: 80vh;
-  @media screen and (max-height: 750px) {
-    height: 85vh;
-  }
-`;
-
-export function NewDestinationForm() {
-  const { sectionData, setSectionData } = useSectionData(null);
-
-  const { mutate } = useMutation((body) => setDestination(body));
-  const searchParams = useSearchParams();
-  const router = useRouter();
-
-  const { data: destinationType } = useQuery(
-    [QUERIES.API_DESTINATION_TYPE, sectionData?.type],
-    () => getDestination(sectionData?.type),
-    {
-      enabled: !!sectionData,
-    }
-  );
-
-  const { data: destinationsList } = useQuery(
-    [QUERIES.API_DESTINATION_TYPES],
-    getDestinationsTypes
-  );
-
-  useEffect(onPageLoad, [destinationsList]);
-
-  function onPageLoad() {
-    const search = searchParams.get(DEST);
-    if (!destinationsList || !search) return;
-
-    let currentData = null;
-
-    for (const category of destinationsList.categories) {
-      if (currentData) {
-        break;
-      }
-      const filterItem = category.items.filter(({ type }) => type === search);
-      if (filterItem.length) {
-        currentData = filterItem[0];
-      }
-    }
-
-    setSectionData(currentData);
-  }
-
-  function onSubmit(newDestination) {
-    const destination = {
-      ...newDestination,
-      type: sectionData.type,
-    };
-
-    mutate(destination, {
-      onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=created`),
-    });
-  }
-
-  function handleBackPress() {
-    router.back();
-  }
-
-  return (
-    <>
-      <OverviewHeader
-        title={OVERVIEW.MENU.DESTINATIONS}
-        onBackClick={handleBackPress}
-      />
-      <HideScroll>
-        {destinationType && sectionData && (
-          <NewDestinationContainer>
-            <ManageDestination
-              destinationType={destinationType}
-              selectedDestination={sectionData}
-              onSubmit={onSubmit}
-            />
-          </NewDestinationContainer>
-        )}
-      </HideScroll>
-    </>
-  );
-}
diff --git a/frontend/webapp/containers/main/destinations/new.destination.list.tsx b/frontend/webapp/containers/main/destinations/new.destination.list.tsx
deleted file mode 100644
index ea3d38bc8..000000000
--- a/frontend/webapp/containers/main/destinations/new.destination.list.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW, ROUTES } from '@/utils/constants';
-import { OverviewHeader } from '@/components/overview';
-import { DestinationSection } from '@/containers/setup/destination/destination.section';
-import { NewDestinationContainer } from './destinations.styled';
-import { useRouter } from 'next/navigation';
-
-export function NewDestinationList() {
-  const router = useRouter();
-
-  return (
-    <>
-      <OverviewHeader
-        title={OVERVIEW.MENU.DESTINATIONS}
-        onBackClick={() => router.back()}
-      />
-
-      <NewDestinationContainer>
-        <DestinationSection
-          onSelectItem={(type) => {
-            router.push(`${ROUTES.MANAGE_DESTINATION}${type}`);
-          }}
-        />
-      </NewDestinationContainer>
-    </>
-  );
-}
diff --git a/frontend/webapp/containers/main/destinations/update.destination.flow.tsx b/frontend/webapp/containers/main/destinations/update.destination.flow.tsx
deleted file mode 100644
index 1d4900f7e..000000000
--- a/frontend/webapp/containers/main/destinations/update.destination.flow.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-'use client';
-import React, { useEffect, useMemo, useState } from 'react';
-import { QUERIES, ROUTES } from '@/utils';
-import { HideScroll } from '@/styles/styled';
-import { KeyvalLoader } from '@/design.system';
-import { ManageDestination } from '@/components';
-import { useMutation, useQuery } from 'react-query';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { getDestination, updateDestination } from '@/services';
-import { ManageDestinationWrapper } from './destinations.styled';
-import { deleteDestination, getDestinations } from '@/services/destinations';
-const DEST = 'dest';
-
-export function UpdateDestinationFlow() {
-  const [selectedDestination, setSelectedDestination] = useState<any>(null);
-
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const manageData = useMemo(() => {
-    return {
-      ...selectedDestination,
-      ...selectedDestination?.destination_type,
-    };
-  }, [selectedDestination]);
-
-  const { isLoading: destinationTypeLoading, data: destinationType } = useQuery(
-    [QUERIES.API_DESTINATION_TYPE, selectedDestination?.type],
-    () => getDestination(selectedDestination?.type),
-    {
-      enabled: !!selectedDestination,
-    }
-  );
-
-  const { isLoading: destinationLoading, data: destinationList } = useQuery(
-    [QUERIES.API_DESTINATIONS],
-    getDestinations
-  );
-
-  const { mutate: handleUpdateDestination } = useMutation((body) =>
-    updateDestination(body, selectedDestination?.id)
-  );
-
-  const { mutate: handleDeleteDestination } = useMutation((body) =>
-    deleteDestination(selectedDestination?.id)
-  );
-
-  useEffect(onPageLoad, [searchParams, destinationList]);
-
-  function onDelete() {
-    handleDeleteDestination(selectedDestination.id, {
-      onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=deleted`),
-    });
-  }
-
-  function onSubmit(updatedDestination) {
-    const newDestinations = {
-      ...updatedDestination,
-      type: selectedDestination.type,
-    };
-
-    handleUpdateDestination(newDestinations, {
-      onSuccess: () => router.push(`${ROUTES.DESTINATIONS}?status=updated`),
-    });
-  }
-
-  function onPageLoad() {
-    const search = searchParams.get(DEST);
-    const currentDestination = destinationList?.filter(
-      ({ id }) => id === search
-    );
-    if (currentDestination?.length) {
-      setSelectedDestination(currentDestination[0]);
-    }
-  }
-
-  if (destinationLoading || !selectedDestination) {
-    return <KeyvalLoader />;
-  }
-
-  return destinationTypeLoading ? (
-    <KeyvalLoader />
-  ) : (
-    <HideScroll>
-      <ManageDestinationWrapper>
-        <ManageDestination
-          onBackClick={() => router.back()}
-          destinationType={destinationType}
-          selectedDestination={manageData}
-          onSubmit={onSubmit}
-          onDelete={onDelete}
-        />
-      </ManageDestinationWrapper>
-    </HideScroll>
-  );
-}
diff --git a/frontend/webapp/containers/main/index.ts b/frontend/webapp/containers/main/index.ts
new file mode 100644
index 000000000..b28731bb4
--- /dev/null
+++ b/frontend/webapp/containers/main/index.ts
@@ -0,0 +1,5 @@
+export * from './actions';
+export * from './sources';
+export * from './destinations';
+export * from './overview';
+export * from './instrumentation-rules';
diff --git a/frontend/webapp/containers/main/index.tsx b/frontend/webapp/containers/main/index.tsx
deleted file mode 100644
index e539e2052..000000000
--- a/frontend/webapp/containers/main/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export { NewDestinationList } from './destinations/new.destination.list';
-export { NewDestinationForm } from './destinations/new.destination.form';
-export { UpdateDestinationFlow } from './destinations/update.destination.flow';
-
-export * from './actions';
-export * from './sources';
-export * from './destinations';
-export * from './overview';
-export * from './instrumentation-rules';
diff --git a/frontend/webapp/containers/main/instrumentation-rules/choose-rule/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/choose-rule/index.tsx
deleted file mode 100644
index 0bd04be25..000000000
--- a/frontend/webapp/containers/main/instrumentation-rules/choose-rule/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { useRouter } from 'next/navigation';
-import { NewActionCard } from '@/components';
-import { KeyvalLink, KeyvalText } from '@/design.system';
-import { ActionItemCard, RulesType } from '@/types';
-import { ACTION, INSTRUMENTATION_RULES_DOCS_LINK, OVERVIEW } from '@/utils';
-import { ActionCardWrapper, ActionsListWrapper, DescriptionWrapper, LinkWrapper } from './styled';
-
-const ITEMS = [
-  {
-    id: 'payload-collection',
-    title: 'Payload Collection',
-    description: 'Record operation payloads as span attributes where supported.',
-    type: RulesType.PAYLOAD_COLLECTION,
-    icon: RulesType.PAYLOAD_COLLECTION,
-  },
-];
-
-export function ChooseInstrumentationRuleContainer(): React.JSX.Element {
-  const router = useRouter();
-
-  function onItemClick({ item }: { item: ActionItemCard }) {
-    router.push(`/create-rule?type=${item.type}`);
-  }
-
-  function renderActionsList() {
-    return ITEMS.map((item) => {
-      return (
-        <ActionCardWrapper data-cy={'choose-instrumentation-rule-' + item.type} key={item.id}>
-          <NewActionCard item={item} onClick={onItemClick} />
-        </ActionCardWrapper>
-      );
-    });
-  }
-
-  return (
-    <>
-      <DescriptionWrapper>
-        <KeyvalText size={14}>{OVERVIEW.INSTRUMENTATION_RULE_DESCRIPTION}</KeyvalText>
-        <LinkWrapper>
-          <KeyvalLink fontSize={14} value={ACTION.LINK_TO_DOCS} onClick={() => window.open(INSTRUMENTATION_RULES_DOCS_LINK, '_blank')} />
-        </LinkWrapper>
-      </DescriptionWrapper>
-      <ActionsListWrapper>{renderActionsList()}</ActionsListWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/containers/main/instrumentation-rules/choose-rule/styled.ts b/frontend/webapp/containers/main/instrumentation-rules/choose-rule/styled.ts
deleted file mode 100644
index 2c04da8bb..000000000
--- a/frontend/webapp/containers/main/instrumentation-rules/choose-rule/styled.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-export const ActionsListWrapper = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 16px;
-  padding: 0 24px 24px 24px;
-  overflow-y: auto;
-  align-items: start;
-  max-height: 100%;
-  padding-bottom: 220px;
-  box-sizing: border-box;
-`;
-
-export const DescriptionWrapper = styled.div`
-  padding: 24px;
-  gap: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-`;
-
-export const LinkWrapper = styled.div`
-  width: 100px;
-`;
-
-export const ActionCardWrapper = styled.div`
-  height: 100%;
-  max-height: 220px;
-`;
diff --git a/frontend/webapp/containers/main/instrumentation-rules/create-rule/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/create-rule/index.tsx
deleted file mode 100644
index 0a00b9db6..000000000
--- a/frontend/webapp/containers/main/instrumentation-rules/create-rule/index.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import { ActionIcon } from '@/components';
-import { useRouter, useSearchParams } from 'next/navigation';
-import {
-  KeyvalButton,
-  KeyvalCheckbox,
-  KeyvalInput,
-  KeyvalLink,
-  KeyvalLoader,
-  KeyvalText,
-  KeyvalTextArea,
-} from '@/design.system';
-import { ACTION, ACTION_ITEM_DOCS_LINK, INSTRUMENTATION_RULES } from '@/utils';
-import {
-  Container,
-  HeaderText,
-  LoaderWrapper,
-  DescriptionWrapper,
-  CreateActionWrapper,
-  KeyvalInputWrapper,
-  TextareaWrapper,
-  CreateButtonWrapper,
-} from './styled';
-import theme from '@/styles/palette';
-import { useInstrumentationRules } from '@/hooks'; // Custom hook for instrumentation rules
-import { InstrumentationRuleSpec } from '@/types';
-
-const TYPE = 'type';
-
-export function CreateInstrumentationRulesContainer(): React.JSX.Element {
-  const [ruleType, setRuleType] = useState<string | null>(null);
-  const [ruleName, setRuleName] = useState<string>('');
-  const [ruleNote, setRuleNote] = useState<string>('');
-  const [isFormValid, setIsFormValid] = useState<boolean>(false);
-  const [payloadCollection, setPayloadCollection] = useState({
-    httpRequest: false,
-    httpResponse: false,
-    dbQuery: false,
-    messaging: false,
-  });
-  const search = useSearchParams();
-  const router = useRouter();
-  // Using the custom hook for CRUD operations
-  const { addRule } = useInstrumentationRules();
-
-  useEffect(() => {
-    const type = search.get(TYPE);
-    setRuleType(type);
-  }, [search]);
-
-  useEffect(() => {
-    Object.values(payloadCollection).some((value) => value)
-      ? setIsFormValid(true)
-      : setIsFormValid(false);
-  }, [payloadCollection]);
-
-  // Function to handle checkbox change
-  const handleCheckboxChange = (key: string) => {
-    setPayloadCollection((prev) => ({ ...prev, [key]: !prev[key] }));
-  };
-
-  // Function to create the rule using the custom hook
-  const createRule = async () => {
-    // Dynamically construct the payloadCollection based on the selected checkboxes
-    const constructedPayloadCollection = {
-      ...(payloadCollection.httpRequest && { httpRequest: {} }),
-      ...(payloadCollection.httpResponse && { httpResponse: {} }),
-      ...(payloadCollection.dbQuery && { dbQuery: {} }),
-      ...(payloadCollection.messaging && { messaging: {} }),
-    };
-
-    // Constructing the payload with the correct types
-    const payload: InstrumentationRuleSpec = {
-      ruleName,
-      notes: ruleNote,
-      disabled: false,
-      payloadCollection: constructedPayloadCollection,
-    };
-
-    try {
-      await addRule(payload); // Using the addRule function from the custom hook
-      router.push('/instrumentation-rules');
-    } catch (error) {
-      console.error('Error creating rule:', error);
-    }
-  };
-  if (!ruleType)
-    return (
-      <LoaderWrapper>
-        <KeyvalLoader />
-      </LoaderWrapper>
-    );
-
-  return (
-    <Container>
-      <CreateActionWrapper>
-        <HeaderText>
-          <ActionIcon type={ruleType} style={{ width: 34, height: 34 }} />
-          <KeyvalText size={18} weight={700}>
-            {INSTRUMENTATION_RULES[ruleType].TITLE}
-          </KeyvalText>
-        </HeaderText>
-        <DescriptionWrapper>
-          <KeyvalText size={14}>
-            {INSTRUMENTATION_RULES[ruleType].DESCRIPTION}
-          </KeyvalText>
-          <KeyvalLink
-            value={ACTION.LINK_TO_DOCS}
-            fontSize={14}
-            onClick={() =>
-              window.open(
-                `${ACTION_ITEM_DOCS_LINK}/${ruleType.toLowerCase()}`,
-                '_blank'
-              )
-            }
-          />
-        </DescriptionWrapper>
-        <KeyvalInputWrapper>
-          <KeyvalInput
-            value={ruleName}
-            label="Rule Name"
-            onChange={(value) => setRuleName(value)}
-          />
-        </KeyvalInputWrapper>
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <KeyvalText size={14}>
-            {'Select the type of data you want to collect'}
-          </KeyvalText>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '16px',
-              marginLeft: '16px',
-            }}
-          >
-            <KeyvalCheckbox
-              label="Collect HTTP Request"
-              value={payloadCollection.httpRequest}
-              onChange={() => handleCheckboxChange('httpRequest')}
-            />
-            <KeyvalCheckbox
-              label="Collect HTTP Response"
-              value={payloadCollection.httpResponse}
-              onChange={() => handleCheckboxChange('httpResponse')}
-            />
-            <KeyvalCheckbox
-              label="Collect DB Query"
-              value={payloadCollection.dbQuery}
-              onChange={() => handleCheckboxChange('dbQuery')}
-            />
-            <KeyvalCheckbox
-              label="Collect Messaging"
-              value={payloadCollection.messaging}
-              onChange={() => handleCheckboxChange('messaging')}
-            />
-          </div>
-        </div>
-        <TextareaWrapper>
-          <KeyvalTextArea
-            value={ruleNote}
-            label="Note"
-            onChange={(e) => setRuleNote(e.target.value)}
-          />
-        </TextareaWrapper>
-        <CreateButtonWrapper>
-          <KeyvalButton onClick={createRule} disabled={!isFormValid}>
-            <KeyvalText size={14} weight={700} color={theme.text.dark_button}>
-              Create Rule
-            </KeyvalText>
-          </KeyvalButton>
-        </CreateButtonWrapper>
-      </CreateActionWrapper>
-    </Container>
-  );
-}
diff --git a/frontend/webapp/containers/main/instrumentation-rules/create-rule/styled.ts b/frontend/webapp/containers/main/instrumentation-rules/create-rule/styled.ts
deleted file mode 100644
index b181b2569..000000000
--- a/frontend/webapp/containers/main/instrumentation-rules/create-rule/styled.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  height: 100%;
-  padding: 24px;
-  .action-yaml-column {
-    display: none;
-  }
-  @media screen and (max-height: 700px) {
-    height: 90%;
-  }
-
-  @media screen and (max-width: 1200px) {
-    .action-yaml-row {
-      display: none;
-    }
-    .action-yaml-column {
-      display: block;
-    }
-    width: 100%;
-  }
-`;
-
-export const HeaderText = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-export const CreateActionWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 24px;
-  padding-top: 0;
-  box-sizing: border-box;
-  max-height: 90%;
-  overflow-y: auto;
-
-  @media screen and (max-height: 450px) {
-    max-height: 85%;
-  }
-
-  @media screen and (max-width: 1200px) {
-    width: 100%;
-  }
-`;
-
-export const ActionYamlWrapper = styled(CreateActionWrapper)``;
-
-export const KeyvalInputWrapper = styled.div`
-  width: 362px;
-`;
-
-export const TextareaWrapper = styled.div`
-  width: 375px;
-`;
-
-export const CreateButtonWrapper = styled.div`
-  margin-top: 32px;
-  width: 375px;
-`;
-
-export const DescriptionWrapper = styled.div`
-  width: 100%;
-  max-width: 40vw;
-  min-width: 370px;
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-`;
-
-export const LinkWrapper = styled.div`
-  margin-left: 8px;
-  width: 100px;
-`;
-
-export const LoaderWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
diff --git a/frontend/webapp/containers/main/instrumentation-rules/edit-rule/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/edit-rule/index.tsx
deleted file mode 100644
index 72c5997cf..000000000
--- a/frontend/webapp/containers/main/instrumentation-rules/edit-rule/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import theme from '@/styles/palette';
-import { useSearchParams } from 'next/navigation';
-import {
-  INSTRUMENTATION_RULES,
-  INSTRUMENTATION_RULES_DOCS_LINK,
-} from '@/utils';
-
-import {
-  KeyvalButton,
-  KeyvalCheckbox,
-  KeyvalInput,
-  KeyvalLink,
-  KeyvalLoader,
-  KeyvalSwitch,
-  KeyvalText,
-  KeyvalTextArea,
-} from '@/design.system';
-import {
-  HeaderText,
-  LoaderWrapper,
-  DescriptionWrapper,
-  CreateButtonWrapper,
-  CreateRuleWrapper,
-  KeyvalInputWrapper,
-  TextareaWrapper,
-  SwitchWrapper,
-  FormFieldsWrapper,
-} from './styled';
-import { useInstrumentationRules } from '@/hooks'; // Custom hook for handling rules
-import { InstrumentationRuleSpec, PayloadCollection } from '@/types';
-
-const RULE_ID = 'id';
-
-export function EditInstrumentationRuleContainer(): React.JSX.Element {
-  const [currentRule, setCurrentRule] = useState<
-    InstrumentationRuleSpec | undefined
-  >();
-
-  const search = useSearchParams();
-  const { getRuleById, updateRule, toggleRuleStatus } =
-    useInstrumentationRules();
-
-  useEffect(() => {
-    const ruleId = search.get(RULE_ID);
-    if (!ruleId) return;
-
-    getRule(ruleId);
-  }, [search]);
-
-  async function getRule(ruleId: string) {
-    const rule = await getRuleById(ruleId);
-    if (!rule) return;
-
-    setCurrentRule(rule);
-  }
-
-  // Correctly handle state updates ensuring required fields remain intact
-  function onChangeRuleState(key: keyof InstrumentationRuleSpec, value: any) {
-    setCurrentRule((prev) => {
-      if (!prev) return undefined;
-      return { ...prev, [key]: value };
-    });
-  }
-
-  // Properly handle payloadCollection updates considering it may be undefined
-  function handleCheckboxChange(key: keyof PayloadCollection) {
-    setCurrentRule((prev) => {
-      if (!prev) return undefined;
-      const payloadCollection = prev.payloadCollection || {};
-      return {
-        ...prev,
-        payloadCollection: {
-          ...payloadCollection,
-          [key]: !payloadCollection[key],
-        },
-      };
-    });
-  }
-
-  function upsertRule() {
-    if (!currentRule) return;
-
-    // Create a deep clone of the currentRule and modify the payloadCollection generically
-    const modifiedRule = {
-      ...currentRule,
-      payloadCollection: Object.entries(
-        currentRule.payloadCollection || {}
-      ).reduce((acc, [key, value]) => {
-        // Remove properties where the value is false; otherwise, keep the original value
-        if (value !== false) {
-          acc[key] = {};
-        }
-        return acc;
-      }, {} as PayloadCollection),
-    };
-
-    updateRule({ data: modifiedRule });
-  }
-
-  if (!currentRule) return <LoaderWrapper>{<KeyvalLoader />}</LoaderWrapper>;
-
-  return (
-    <CreateRuleWrapper>
-      <HeaderText>
-        <KeyvalText size={18} weight={700}>
-          {INSTRUMENTATION_RULES['payload-collection'].TITLE}
-        </KeyvalText>
-      </HeaderText>
-      <DescriptionWrapper>
-        <KeyvalText size={14}>
-          {INSTRUMENTATION_RULES['payload-collection'].DESCRIPTION}
-        </KeyvalText>
-        <KeyvalLink
-          value={'Documentation Link'}
-          fontSize={14}
-          onClick={() =>
-            window.open(`${INSTRUMENTATION_RULES_DOCS_LINK}`, '_blank')
-          }
-        />
-      </DescriptionWrapper>
-      <FormFieldsWrapper disabled={false}>
-        <KeyvalInputWrapper>
-          <KeyvalInput
-            label={'Rule Name'}
-            value={currentRule?.ruleName || ''}
-            onChange={(name) => onChangeRuleState('ruleName', name)}
-          />
-        </KeyvalInputWrapper>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <KeyvalText size={14}>
-            {'Select the type of data you want to collect'}
-          </KeyvalText>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '16px',
-              marginLeft: '16px',
-            }}
-          >
-            <KeyvalCheckbox
-              label="Collect HTTP Request"
-              value={!!currentRule?.payloadCollection?.httpRequest}
-              onChange={() => handleCheckboxChange('httpRequest')}
-            />
-            <KeyvalCheckbox
-              label="Collect HTTP Response"
-              value={!!currentRule?.payloadCollection?.httpResponse}
-              onChange={() => handleCheckboxChange('httpResponse')}
-            />
-            <KeyvalCheckbox
-              label="Collect DB Query"
-              value={!!currentRule?.payloadCollection?.dbQuery}
-              onChange={() => handleCheckboxChange('dbQuery')}
-            />
-            <KeyvalCheckbox
-              label="Collect Messaging"
-              value={!!currentRule?.payloadCollection?.messaging}
-              onChange={() => handleCheckboxChange('messaging')}
-            />
-          </div>
-        </div>
-
-        <TextareaWrapper>
-          <KeyvalTextArea
-            label={'Note'}
-            value={currentRule?.notes || ''}
-            placeholder={'Add notes here...'}
-            onChange={(e) => onChangeRuleState('notes', e.target.value)}
-          />
-        </TextareaWrapper>
-        <CreateButtonWrapper>
-          <KeyvalButton onClick={upsertRule}>
-            <KeyvalText weight={600} color={theme.text.dark_button} size={14}>
-              {'Update Rule'}
-            </KeyvalText>
-          </KeyvalButton>
-        </CreateButtonWrapper>
-      </FormFieldsWrapper>
-    </CreateRuleWrapper>
-  );
-}
diff --git a/frontend/webapp/containers/main/instrumentation-rules/edit-rule/styled.ts b/frontend/webapp/containers/main/instrumentation-rules/edit-rule/styled.ts
deleted file mode 100644
index 2829bb395..000000000
--- a/frontend/webapp/containers/main/instrumentation-rules/edit-rule/styled.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-
-export const CreateRuleWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 24px;
-  box-sizing: border-box;
-  max-height: 93%;
-  width: 100%;
-  overflow-y: auto;
-
-  @media screen and (max-height: 450px) {
-    max-height: 85%;
-  }
-`;
-
-export const FormFieldsWrapper = styled.div<{ disabled: boolean }>`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  opacity: ${({ disabled }) => (disabled ? 0.3 : 1)};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-`;
-
-export const SwitchWrapper = styled.div<{
-  disabled: boolean;
-  isValid: boolean;
-}>`
-  p {
-    color: ${({ disabled }) =>
-      disabled ? theme.colors.orange_brown : theme.colors.success};
-    font-weight: 600;
-  }
-
-  opacity: ${({ isValid }) => (!isValid ? 0.3 : 1)};
-  pointer-events: ${({ isValid }) => (!isValid ? 'none' : 'auto')};
-`;
-
-export const KeyvalInputWrapper = styled.div`
-  width: 362px;
-`;
-
-export const TextareaWrapper = styled.div`
-  width: 375px;
-`;
-
-export const CreateButtonWrapper = styled.div`
-  margin-top: 32px;
-  width: 375px;
-`;
-
-export const DescriptionWrapper = styled.div`
-  width: 80vw;
-  max-width: 1050px;
-  margin-bottom: 16px;
-  display: flex;
-
-  gap: 6px;
-`;
-
-export const LinkWrapper = styled.div`
-  margin-left: 8px;
-  width: 100px;
-`;
-
-export const LoaderWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`;
-
-export const HeaderText = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
diff --git a/frontend/webapp/containers/main/instrumentation-rules/index.ts b/frontend/webapp/containers/main/instrumentation-rules/index.ts
index ed68a7de5..c5c586edb 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/index.ts
+++ b/frontend/webapp/containers/main/instrumentation-rules/index.ts
@@ -1,5 +1 @@
-export * from './managed';
-export * from './choose-rule';
-export * from './create-rule';
-export * from './edit-rule';
 export * from './add-rule-modal';
diff --git a/frontend/webapp/containers/main/instrumentation-rules/managed/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/managed/index.tsx
deleted file mode 100644
index 4338c4fe1..000000000
--- a/frontend/webapp/containers/main/instrumentation-rules/managed/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useEffect } from 'react';
-import theme from '@/styles/palette';
-import { EmptyList } from '@/components';
-import { useRouter } from 'next/navigation';
-import { useInstrumentationRules } from '@/hooks';
-import { KeyvalText, KeyvalButton, KeyvalLoader } from '@/design.system';
-import {
-  Header,
-  Content,
-  Container,
-  HeaderRight,
-  InstrumentationRulesContainer,
-} from './styled';
-import { InstrumentationRulesTable } from '@/components/overview/instrumentation-rules/rules-table';
-
-export function ManagedInstrumentationRulesContainer() {
-  const router = useRouter();
-
-  const { isLoading, rules, refetch, removeRule } = useInstrumentationRules();
-
-  useEffect(() => {
-    refetch();
-  }, []);
-
-  function handleAddRule() {
-    router.push('/choose-rule');
-  }
-
-  function handleEditRule(id: string) {
-    router.push(`edit-rule?id=${id}`);
-  }
-
-  if (isLoading) return <KeyvalLoader />;
-
-  return (
-    <>
-      <Container>
-        {!rules?.length ? (
-          <EmptyList
-            title={'No rules found'}
-            btnTitle={'Add Rule'}
-            btnAction={handleAddRule}
-          />
-        ) : (
-          <InstrumentationRulesContainer>
-            {!(isLoading || rules.length === 1) && (
-              <Header>
-                <div />
-                <HeaderRight>
-                  <KeyvalButton onClick={handleAddRule} style={{ height: 32 }}>
-                    <KeyvalText
-                      size={14}
-                      weight={600}
-                      color={theme.text.dark_button}
-                    >
-                      {'Add Rule'}
-                    </KeyvalText>
-                  </KeyvalButton>
-                </HeaderRight>
-              </Header>
-            )}
-            <Content>
-              <InstrumentationRulesTable
-                data={rules}
-                onRowClick={handleEditRule}
-              />
-            </Content>
-          </InstrumentationRulesContainer>
-        )}
-      </Container>
-    </>
-  );
-}
diff --git a/frontend/webapp/containers/main/instrumentation-rules/managed/styled.ts b/frontend/webapp/containers/main/instrumentation-rules/managed/styled.ts
deleted file mode 100644
index bf418e375..000000000
--- a/frontend/webapp/containers/main/instrumentation-rules/managed/styled.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  max-height: 100%;
-  overflow-y: auto;
-`;
-
-export const InstrumentationRulesContainer = styled.div`
-  margin-top: 24px;
-  width: 100%;
-  max-width: 1216px;
-`;
-
-export const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0 24px;
-  align-items: center;
-`;
-
-export const HeaderRight = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
-export const Content = styled.div`
-  padding: 20px;
-  min-height: 200px;
-`;
diff --git a/frontend/webapp/containers/main/overview/data.flow/index.tsx b/frontend/webapp/containers/main/overview/data.flow/index.tsx
deleted file mode 100644
index 730fefe32..000000000
--- a/frontend/webapp/containers/main/overview/data.flow/index.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-'use client';
-import React, { useEffect, useRef, useState } from 'react';
-import { OverviewDataFlowWrapper } from './styled';
-import { ROUTES, getMainContainerLanguage } from '@/utils';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { KeyvalDataFlow, KeyvalLoader } from '@/design.system';
-import {
-  useActions,
-  useDestinations,
-  useOverviewMetrics,
-  useSources,
-} from '@/hooks';
-import { buildFlowNodesAndEdges } from '@keyval-dev/design-system';
-
-interface FlowNode {
-  id: string;
-  type: string;
-  position: {
-    x: number;
-    y: number;
-  };
-  data: any;
-}
-interface FlowEdge {
-  id: string;
-  source: string;
-  target: string;
-  animated: boolean;
-  label?: string;
-  style?: Record<string, any>;
-  data?: any;
-}
-
-const POLL_DATA = 'poll';
-const POLL_INTERVAL = 2000; // Interval in milliseconds between polls
-const MAX_ATTEMPTS = 5; // Maximum number of polling attempts
-
-export function DataFlowContainer() {
-  const [nodes, setNodes] = useState<FlowNode[]>();
-  const [edges, setEdges] = useState<FlowEdge[]>();
-  const [pollingAttempts, setPollingAttempts] = useState(0);
-
-  const router = useRouter();
-  const { actions } = useActions();
-  const { sources, refetchSources } = useSources();
-  const { destinationList, refetchDestinations } = useDestinations();
-
-  const useSearch = useSearchParams();
-  const intervalId = useRef<NodeJS.Timer>();
-
-  const { metrics } = useOverviewMetrics();
-
-  useEffect(() => {
-    if (!sources || !destinationList || !actions) return;
-
-    const filteredActions = actions.filter((action) => !action.spec.disabled);
-    const mapSources = sources
-      .sort((a, b) => a.name.localeCompare(b.name))
-      .map((source) => {
-        let languages =
-          source?.instrumented_application_details?.languages || [];
-
-        languages.map((language) => {
-          if (language.language === 'ignored') {
-            language.language = getMainContainerLanguage(source);
-          }
-        });
-
-        const conditions =
-          source?.instrumented_application_details?.conditions || [];
-
-        const currentSourceMetrics = metrics?.sources?.find(
-          (metric) =>
-            metric.name === source.name &&
-            metric.namespace === source.namespace &&
-            metric.kind === source.kind
-        );
-
-        if (!currentSourceMetrics) {
-          return {
-            ...source,
-            conditions,
-            languages:
-              languages.length > 0
-                ? languages
-                : [{ language: 'default', container_name: '' }],
-          };
-        }
-
-        const data_transfer = formatBytes(currentSourceMetrics?.throughput);
-
-        return {
-          ...source,
-          conditions,
-          metrics: {
-            data_transfer,
-          },
-          languages:
-            languages.length > 0
-              ? languages
-              : [{ language: 'default', container_name: '' }],
-        };
-      });
-
-    const mapDestinations = destinationList.map((destination) => {
-      const currentDestinationMetrics = metrics?.destinations?.find(
-        (metric) => metric.id === destination.id
-      );
-
-      if (!currentDestinationMetrics) {
-        return destination;
-      }
-
-      const data_transfer = formatBytes(
-        currentDestinationMetrics?.throughput ||
-          currentDestinationMetrics?.throughput === 0
-          ? currentDestinationMetrics?.throughput
-          : 0
-      );
-
-      return {
-        ...destination,
-        metrics: {
-          data_transfer,
-        },
-      };
-    });
-
-    const { nodes, edges } = buildFlowNodesAndEdges(
-      mapSources,
-      mapDestinations,
-      filteredActions
-    );
-    setNodes(nodes);
-    setEdges(edges);
-  }, [actions, destinationList, sources, metrics]);
-
-  useEffect(() => {
-    const pullData = useSearch.get(POLL_DATA);
-    if (pullData) {
-      intervalId.current = setInterval(() => {
-        Promise.all([refetchSources(), refetchDestinations()])
-          .then(() => {})
-          .catch(console.error);
-
-        setPollingAttempts((prev) => prev + 1);
-      }, POLL_INTERVAL);
-
-      return () => clearInterval(intervalId.current);
-    }
-  }, [refetchDestinations, refetchSources, pollingAttempts, useSearch]);
-
-  useEffect(() => {
-    if (pollingAttempts >= MAX_ATTEMPTS) {
-      clearInterval(intervalId.current);
-      return;
-    }
-  }, [pollingAttempts]);
-
-  function onNodeClick(node: FlowNode, object: any) {
-    if (object?.type === 'destination') {
-      router.push(`${ROUTES.UPDATE_DESTINATION}${object.data.id}`);
-    }
-    if (object?.type === 'action') {
-      router.push(`${ROUTES.EDIT_ACTION}?id=${object.data.id}`);
-    }
-    if (object?.data?.kind) {
-      router.push(
-        `${ROUTES.MANAGE_SOURCE}?name=${object.data.name}&namespace=${object.data.namespace}&kind=${object.data.kind}`
-      );
-    }
-  }
-
-  if (!nodes || !edges) {
-    return <KeyvalLoader />;
-  }
-
-  return (
-    <OverviewDataFlowWrapper>
-      <KeyvalDataFlow nodes={nodes} edges={edges} onNodeClick={onNodeClick} />
-    </OverviewDataFlowWrapper>
-  );
-}
-
-function formatBytes(bytes: number): string {
-  const sizes = ['Bytes', 'KB/s', 'MB/s', 'GB/s', 'TB/s'];
-  if (bytes === 0) return '0 KB/s';
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  const value = bytes / Math.pow(1024, i);
-  return `${value.toFixed(2)} ${sizes[i]}`;
-}
diff --git a/frontend/webapp/containers/main/overview/data.flow/styled.ts b/frontend/webapp/containers/main/overview/data.flow/styled.ts
deleted file mode 100644
index c152e7642..000000000
--- a/frontend/webapp/containers/main/overview/data.flow/styled.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import styled from "styled-components";
-
-export const OverviewDataFlowWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-`;
diff --git a/frontend/webapp/containers/main/overview/data.flow/utils.tsx b/frontend/webapp/containers/main/overview/data.flow/utils.tsx
deleted file mode 100644
index abbaaf2ed..000000000
--- a/frontend/webapp/containers/main/overview/data.flow/utils.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-interface SourceData {
-  namespace: string;
-}
-
-interface DataFlowEdge {
-  id: string;
-}
-
-interface DataFlowNode {
-  id: string;
-  type: string;
-  data: SourceData | null;
-  position: { x: number; y: number };
-}
-
-interface GroupedSource {
-  name: string;
-  totalAppsInstrumented: number;
-}
-
-export function groupSourcesNamespace(
-  sources: SourceData[] | null
-): GroupedSource[] {
-  if (!sources) return [];
-  const groupedSources: { [key: string]: GroupedSource } = sources.reduce(
-    (result, item) => {
-      const propertyValue = item?.namespace;
-      if (!result[propertyValue]) {
-        result[propertyValue] = {
-          name: propertyValue,
-          totalAppsInstrumented: 0,
-        };
-      }
-      result[propertyValue].totalAppsInstrumented += 1;
-      return result;
-    },
-    {}
-  );
-
-  return Object.values(groupedSources);
-}
-
-export function getNodes(
-  height: number,
-  nodeData: any,
-  type: string,
-  listItemHeight: number,
-  xPosition: number,
-  addCenterNode: boolean = false
-): DataFlowNode[] {
-  if (!nodeData || isNaN(height)) return [];
-  const nodes: DataFlowNode[] = [];
-  const totalListItemsHeight = nodeData.length * listItemHeight;
-
-  let topPosition = (height - totalListItemsHeight) / 2;
-  const centerIndex = Math.floor(nodeData.length / 2);
-  nodeData.forEach((data, index) => {
-    const y = topPosition;
-    nodes.push({
-      id: `${type}-${index}`,
-      type,
-      data,
-      position: { x: xPosition, y },
-    });
-    if (index === centerIndex && addCenterNode) {
-      nodes.push({
-        id: 'centerNode',
-        type: 'custom',
-        data: null,
-        position: { x: 400, y },
-      });
-    }
-    topPosition += listItemHeight;
-  });
-  return nodes;
-}
-
-export function getEdges(
-  destinations: DataFlowEdge[],
-  sources: DataFlowEdge[]
-) {
-  return [
-    ...destinations.flatMap((node, index) => ({
-      id: `edges-${node.id}`,
-      source: 'centerNode',
-      target: `destination-${index}`,
-      animated: true,
-      style: { stroke: '#96f3ff8e' },
-      data: null,
-    })),
-    ...sources.flatMap((node, index) => ({
-      id: `edges-${node.id}`,
-      source: `namespace-${index}`,
-      target: 'centerNode',
-      animated: true,
-      style: { stroke: '#96f3ff8e' },
-      data: null,
-    })),
-  ];
-}
diff --git a/frontend/webapp/containers/main/overview/index.ts b/frontend/webapp/containers/main/overview/index.ts
index 69be1eacf..40fa0770f 100644
--- a/frontend/webapp/containers/main/overview/index.ts
+++ b/frontend/webapp/containers/main/overview/index.ts
@@ -1,2 +1 @@
-export * from './data.flow';
 export * from './overview-data-flow';
diff --git a/frontend/webapp/containers/main/sources/choose.sources/index.tsx b/frontend/webapp/containers/main/sources/choose.sources/index.tsx
deleted file mode 100644
index 095117d16..000000000
--- a/frontend/webapp/containers/main/sources/choose.sources/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-import React from 'react';
-import { OVERVIEW, ROUTES } from '@/utils';
-import { useRouter } from 'next/navigation';
-import { NewSourcesList } from './new.source.list';
-import { OverviewHeader } from '@/components/overview';
-
-export function SelectSourcesContainer() {
-  const router = useRouter();
-
-  function onNewSourceSuccess() {
-    router.push(`${ROUTES.SOURCES}?poll=true`);
-  }
-
-  return (
-    <div style={{ height: '100vh' }}>
-      <OverviewHeader
-        title={OVERVIEW.ADD_NEW_SOURCE}
-        onBackClick={() => router.back()}
-      />
-      <NewSourcesList onSuccess={onNewSourceSuccess} />
-    </div>
-  );
-}
diff --git a/frontend/webapp/containers/main/sources/choose.sources/new.source.list.tsx b/frontend/webapp/containers/main/sources/choose.sources/new.source.list.tsx
deleted file mode 100644
index e05d62713..000000000
--- a/frontend/webapp/containers/main/sources/choose.sources/new.source.list.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import theme from '@/styles/palette';
-import { OVERVIEW, SETUP } from '@/utils';
-import { useSectionData, useSources } from '@/hooks';
-import { KeyvalButton, KeyvalText } from '@/design.system';
-import { SourcesSectionWrapper, ButtonWrapper } from './styled';
-import { SourcesSection } from '@/containers/setup/sources/sources.section';
-
-export function NewSourcesList({ onSuccess }) {
-  const { sectionData, setSectionData, totalSelected } = useSectionData({});
-  const { upsertSources } = useSources();
-
-  return (
-    <>
-      <ButtonWrapper>
-        <KeyvalText>{`${totalSelected} ${SETUP.SELECTED}`}</KeyvalText>
-        <KeyvalButton
-          disabled={totalSelected === 0}
-          onClick={() =>
-            upsertSources({ sectionData, onSuccess, onError: null })
-          }
-          style={{ width: 110 }}
-        >
-          <KeyvalText weight={600} color={theme.text.dark_button}>
-            {OVERVIEW.CONNECT}
-          </KeyvalText>
-        </KeyvalButton>
-      </ButtonWrapper>
-      <SourcesSectionWrapper>
-        <SourcesSection
-          sectionData={sectionData}
-          setSectionData={setSectionData}
-        />
-      </SourcesSectionWrapper>
-    </>
-  );
-}
diff --git a/frontend/webapp/containers/main/sources/choose.sources/styled.tsx b/frontend/webapp/containers/main/sources/choose.sources/styled.tsx
deleted file mode 100644
index ec7d2643d..000000000
--- a/frontend/webapp/containers/main/sources/choose.sources/styled.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-export const SourcesSectionWrapper = styled.div`
-  position: relative;
-  height: 81%;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  @media screen and (max-height: 650px) {
-    height: 72%;
-  }
-  @media screen and (max-height: 550px) {
-    height: 65%;
-  }
-`;
-
-export const ButtonWrapper = styled.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  right: 32px;
-  top: 40px;
-`;
diff --git a/frontend/webapp/containers/main/sources/edit.source/index.tsx b/frontend/webapp/containers/main/sources/edit.source/index.tsx
deleted file mode 100644
index 034ad237f..000000000
--- a/frontend/webapp/containers/main/sources/edit.source/index.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import theme from '@/styles/palette';
-import { useKeyDown } from '@/hooks';
-import { ManagedSource } from '@/types';
-import { useMutation } from 'react-query';
-import { DeleteSource, DetectedContainers } from '@/components/overview';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { deleteSource, getSource, patchSources } from '@/services';
-import { ManageSourceHeader } from '@/components/overview/sources/manage.source.header/manage.source.header';
-import {
-  SETUP,
-  ACTION,
-  ROUTES,
-  OVERVIEW,
-  LANGUAGES_LOGOS,
-  getMainContainerLanguage,
-} from '@/utils';
-import {
-  FieldWrapper,
-  BackButtonWrapper,
-  ManageSourcePageContainer,
-  SaveSourceButtonWrapper,
-} from './styled';
-import {
-  KeyvalButton,
-  KeyvalInput,
-  KeyvalLoader,
-  KeyvalText,
-  Conditions,
-} from '@/design.system';
-import { BackIcon } from '@keyval-dev/design-system';
-
-const NAME = 'name';
-const KIND = 'kind';
-const NAMESPACE = 'namespace';
-
-export function EditSourceForm() {
-  const [inputValue, setInputValue] = useState('');
-  const [currentSource, setCurrentSource] = useState<ManagedSource>();
-
-  const searchParams = useSearchParams();
-  const router = useRouter();
-
-  const { mutate: handleDeleteSource } = useMutation(() =>
-    deleteSource(
-      currentSource?.namespace || '',
-      currentSource?.kind || '',
-      currentSource?.name || ''
-    )
-  );
-
-  const { mutate: editSource } = useMutation(() =>
-    patchSources(
-      currentSource?.namespace || '',
-      currentSource?.kind || '',
-      currentSource?.name || '',
-      {
-        reported_name: inputValue,
-      }
-    )
-  );
-
-  useEffect(() => {
-    onPageLoad();
-  }, [searchParams]);
-
-  useEffect(() => {
-    setInputValue(currentSource?.reported_name || '');
-  }, [currentSource]);
-
-  useKeyDown({ key: 'Enter', active: true }, handleKeyPress);
-
-  function handleKeyPress(e: any) {
-    onSaveClick();
-  }
-
-  async function onPageLoad() {
-    const name = searchParams.get(NAME) || '';
-    const kind = searchParams.get(KIND) || '';
-    const namespace = searchParams.get(NAMESPACE) || '';
-
-    const currentSource = await getSource(namespace, kind, name);
-    setCurrentSource(currentSource);
-  }
-
-  function onSaveClick() {
-    editSource(undefined, {
-      onSuccess: () => router.push(`${ROUTES.SOURCES}??poll=true`),
-    });
-  }
-
-  function onSourceDelete() {
-    handleDeleteSource(undefined, {
-      onSuccess: () => router.push(`${ROUTES.SOURCES}??poll=true`),
-    });
-  }
-
-  if (!currentSource) {
-    return <KeyvalLoader />;
-  }
-
-  return (
-    <ManageSourcePageContainer>
-      <BackButtonWrapper onClick={() => router.back()}>
-        <BackIcon size={14} />
-        <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
-      </BackButtonWrapper>
-      {currentSource && <ManageSourceHeader source={currentSource} />}
-      <div style={{ display: 'flex', gap: 60 }}>
-        <div>
-          <DetectedContainers
-            languages={
-              currentSource.instrumented_application_details.languages || []
-            }
-            conditions={
-              currentSource.instrumented_application_details.conditions
-            }
-          />
-          <FieldWrapper>
-            <KeyvalInput
-              label={OVERVIEW.REPORTED_NAME}
-              value={inputValue}
-              onChange={(e) => setInputValue(e)}
-            />
-          </FieldWrapper>
-          <SaveSourceButtonWrapper>
-            <KeyvalButton disabled={!inputValue} onClick={onSaveClick}>
-              <KeyvalText color={theme.colors.dark_blue} size={14} weight={600}>
-                {ACTION.SAVE}
-              </KeyvalText>
-            </KeyvalButton>
-          </SaveSourceButtonWrapper>
-          <DeleteSource
-            onDelete={onSourceDelete}
-            name={currentSource?.name}
-            image_url={LANGUAGES_LOGOS[getMainContainerLanguage(currentSource)]}
-          />
-        </div>
-        <Conditions
-          conditions={
-            currentSource.instrumented_application_details?.conditions
-          }
-        />
-      </div>
-    </ManageSourcePageContainer>
-  );
-}
diff --git a/frontend/webapp/containers/main/sources/edit.source/styled.tsx b/frontend/webapp/containers/main/sources/edit.source/styled.tsx
deleted file mode 100644
index 14639f44b..000000000
--- a/frontend/webapp/containers/main/sources/edit.source/styled.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-
-export const ButtonWrapper = styled.div`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  right: 32px;
-  top: 40px;
-`;
-
-export const ManageSourcePageContainer = styled.div`
-  padding: 32px;
-`;
-
-export const BackButtonWrapper = styled.div`
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  cursor: pointer;
-  p {
-    cursor: pointer !important;
-  }
-`;
-
-export const FieldWrapper = styled.div`
-  height: 36px;
-  width: 348px;
-  margin-bottom: 64px;
-`;
-
-export const SaveSourceButtonWrapper = styled.div`
-  margin-top: 48px;
-  height: 36px;
-  width: 362px;
-`;
diff --git a/frontend/webapp/containers/main/sources/index.ts b/frontend/webapp/containers/main/sources/index.ts
index 9194ff6c7..0d48bbc6b 100644
--- a/frontend/webapp/containers/main/sources/index.ts
+++ b/frontend/webapp/containers/main/sources/index.ts
@@ -1,6 +1,3 @@
-export * from './managed';
-export * from './choose.sources';
 export * from './choose-sources';
-export * from './edit.source';
-export * from './choose-sources/choose-sources-body';
 export * from './source-drawer-container';
+export * from './choose-sources/choose-sources-body';
diff --git a/frontend/webapp/containers/main/sources/managed/index.tsx b/frontend/webapp/containers/main/sources/managed/index.tsx
deleted file mode 100644
index d8746b1a8..000000000
--- a/frontend/webapp/containers/main/sources/managed/index.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import theme from '@/styles/palette';
-import { useSources } from '@/hooks';
-import { ManagedSource } from '@/types';
-import { OVERVIEW, ROUTES } from '@/utils';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { EmptyList, ManagedSourcesTable } from '@/components';
-import {
-  KeyvalText,
-  KeyvalLoader,
-  KeyvalButton,
-  KeyvalSearchInput,
-} from '@/design.system';
-import {
-  Header,
-  Content,
-  Container,
-  HeaderRight,
-  SourcesContainer,
-} from './styled';
-
-const POLL_DATA = 'poll';
-const POLL_INTERVAL = 2000; // Interval in milliseconds between polls
-const MAX_ATTEMPTS = 5; // Maximum number of polling attempts
-
-export function ManagedSourcesContainer() {
-  const [searchInput, setSearchInput] = useState('');
-  const [pollingAttempts, setPollingAttempts] = useState(0);
-
-  const router = useRouter();
-  const useSearch = useSearchParams();
-  const intervalId = useRef<NodeJS.Timer>();
-
-  const {
-    sources,
-    isLoading,
-    sortSources,
-    refetchSources,
-    filterSourcesByKind,
-    deleteSourcesHandler,
-    filterSourcesByLanguage,
-    instrumentedNamespaces,
-    filterSourcesByNamespace,
-    filterByConditionStatus,
-    filterByConditionMessage,
-  } = useSources();
-
-  useEffect(() => {
-    const pullData = useSearch.get(POLL_DATA);
-    if (pullData) {
-      intervalId.current = setInterval(() => {
-        Promise.all([refetchSources()])
-          .then(() => {})
-          .catch(console.error);
-
-        setPollingAttempts((prev) => prev + 1);
-      }, POLL_INTERVAL);
-
-      return () => clearInterval(intervalId.current);
-    }
-  }, [refetchSources, pollingAttempts, useSearch]);
-
-  useEffect(() => {
-    if (pollingAttempts >= MAX_ATTEMPTS) {
-      clearInterval(intervalId.current);
-      return;
-    }
-  }, [pollingAttempts]);
-
-  function handleAddSources() {
-    router.push(ROUTES.CREATE_SOURCE);
-  }
-
-  function handleEditSource(source: ManagedSource) {
-    router.push(
-      `${ROUTES.MANAGE_SOURCE}?name=${source?.name}&kind=${source?.kind}&namespace=${source?.namespace}`
-    );
-  }
-
-  function filterSources() {
-    return sources.filter(
-      (source) =>
-        source.name.toLowerCase().includes(searchInput.toLowerCase()) ||
-        source.namespace.toLowerCase().includes(searchInput.toLowerCase())
-    );
-  }
-
-  if (isLoading) return <KeyvalLoader />;
-
-  return (
-    <>
-      <Container>
-        {!sources?.length ? (
-          <EmptyList
-            title={OVERVIEW.EMPTY_SOURCE}
-            btnTitle={OVERVIEW.ADD_NEW_SOURCE}
-            btnAction={handleAddSources}
-          />
-        ) : (
-          <SourcesContainer>
-            <Header>
-              <KeyvalSearchInput
-                containerStyle={{ padding: '6px 8px' }}
-                placeholder={OVERVIEW.SEARCH_SOURCE}
-                value={searchInput}
-                onChange={(e) => setSearchInput(e.target.value)}
-              />
-              <HeaderRight>
-                <KeyvalButton onClick={handleAddSources} style={{ height: 32 }}>
-                  <KeyvalText
-                    size={14}
-                    weight={600}
-                    color={theme.text.dark_button}
-                  >
-                    {OVERVIEW.ADD_NEW_SOURCE}
-                  </KeyvalText>
-                </KeyvalButton>
-              </HeaderRight>
-            </Header>
-            <Content>
-              <ManagedSourcesTable
-                sortSources={sortSources}
-                onRowClick={handleEditSource}
-                namespaces={instrumentedNamespaces}
-                filterSourcesByKind={filterSourcesByKind}
-                filterByConditionStatus={filterByConditionStatus}
-                deleteSourcesHandler={deleteSourcesHandler}
-                data={searchInput ? filterSources() : sources}
-                filterSourcesByLanguage={filterSourcesByLanguage}
-                filterSourcesByNamespace={filterSourcesByNamespace}
-                filterByConditionMessage={filterByConditionMessage}
-              />
-            </Content>
-          </SourcesContainer>
-        )}
-      </Container>
-    </>
-  );
-}
diff --git a/frontend/webapp/containers/main/sources/managed/styled.tsx b/frontend/webapp/containers/main/sources/managed/styled.tsx
deleted file mode 100644
index 26b50831b..000000000
--- a/frontend/webapp/containers/main/sources/managed/styled.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  max-height: 100%;
-  overflow-y: auto;
-`;
-
-export const SourcesContainer = styled.div`
-  margin-top: 24px;
-  width: 100%;
-  max-width: 1216px;
-`;
-
-export const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0 24px;
-  align-items: center;
-`;
-
-export const HeaderRight = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`;
-
-export const Content = styled.div`
-  padding: 20px;
-  min-height: 200px;
-`;
diff --git a/frontend/webapp/containers/setup/connection/connection.section.styled.tsx b/frontend/webapp/containers/setup/connection/connection.section.styled.tsx
deleted file mode 100644
index ef63ba27f..000000000
--- a/frontend/webapp/containers/setup/connection/connection.section.styled.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const CreateConnectionContainer = styled.div`
-  min-width: 70vw;
-  max-height: 100%;
-  padding: 24px 32px;
-  overflow: scroll;
-`;
-
-export const LoaderWrapper = styled.div`
-  height: 500px;
-`;
diff --git a/frontend/webapp/containers/setup/connection/connection.section.tsx b/frontend/webapp/containers/setup/connection/connection.section.tsx
deleted file mode 100644
index fa4d014be..000000000
--- a/frontend/webapp/containers/setup/connection/connection.section.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { useConnect } from '@/hooks';
-import { useQuery } from 'react-query';
-import { QUERIES } from '@/utils/constants';
-import { getDestination } from '@/services';
-import { KeyvalLoader } from '@/design.system';
-import { CreateConnectionForm } from '@/components/setup';
-import {
-  LoaderWrapper,
-  CreateConnectionContainer,
-} from './connection.section.styled';
-
-export interface DestinationBody {
-  name: string;
-  type: string;
-  signals: {
-    [key: string]: boolean;
-  };
-  fields: {
-    [key: string]: string;
-  };
-}
-
-export function ConnectionSection({ destination, type }) {
-  const { connect } = useConnect();
-
-  const { isLoading, data } = useQuery(
-    [QUERIES.API_DESTINATION_TYPE],
-    () => getDestination(type),
-    {
-      enabled: !!type,
-    }
-  );
-
-  function createDestination(formData: DestinationBody) {
-    connect({ ...formData });
-  }
-
-  if (isLoading)
-    return (
-      <LoaderWrapper>
-        <KeyvalLoader />
-      </LoaderWrapper>
-    );
-
-  return (
-    <CreateConnectionContainer>
-      {data?.fields && (
-        <CreateConnectionForm
-          fields={data.fields}
-          onSubmit={createDestination}
-          destination={destination}
-        />
-      )}
-    </CreateConnectionContainer>
-  );
-}
diff --git a/frontend/webapp/containers/setup/connection/index.tsx b/frontend/webapp/containers/setup/connection/index.tsx
deleted file mode 100644
index bfb7c982d..000000000
--- a/frontend/webapp/containers/setup/connection/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { useDestinations } from '@/hooks';
-import { SelectedDestination } from '@/types';
-import { ConnectionSection } from './connection.section';
-import { KeyvalCard, KeyvalLoader } from '@/design.system';
-import { useRouter, useSearchParams } from 'next/navigation';
-import {
-  SetupBackButton,
-  ConnectDestinationHeader,
-} from '@/components/setup/headers';
-
-const SEARCH_PARAM_TYPE = 'type';
-
-export function ConnectDestinationContainer() {
-  const [type, setType] = useState<string>('');
-  const [selectedDestination, setSelectedDestination] =
-    useState<SelectedDestination>();
-
-  const { getCurrentDestinationByType, destinationsTypes, isLoading } =
-    useDestinations();
-
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  useEffect(getCurrentDestination, [destinationsTypes]);
-
-  function getCurrentDestination() {
-    const type = searchParams.get(SEARCH_PARAM_TYPE);
-    setType(type as string);
-    if (destinationsTypes) {
-      const data = getCurrentDestinationByType(type as string);
-      setSelectedDestination(data);
-    }
-  }
-
-  if (isLoading) {
-    return <KeyvalLoader />;
-  }
-
-  const cardHeaderBody = () => (
-    <ConnectDestinationHeader
-      icon={selectedDestination?.image_url}
-      name={selectedDestination?.display_name}
-    />
-  );
-
-  return (
-    <KeyvalCard type={'secondary'} header={{ body: cardHeaderBody }}>
-      <SetupBackButton onBackClick={() => router.back()} />
-      <ConnectionSection type={type} destination={selectedDestination} />
-    </KeyvalCard>
-  );
-}
diff --git a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx b/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
deleted file mode 100644
index ef086bac7..000000000
--- a/frontend/webapp/containers/setup/destination/destination.section.styled.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-export const DestinationContainerWrapper = styled.div`
-  max-height: 100%;
-  padding: 24px 32px;
-  overflow: scroll;
-`;
-
-export const DestinationListContainer = styled.div`
-  width: 100%;
-  max-height: 100%;
-`;
-
-export const EmptyListWrapper = styled.div`
-  width: 100%;
-  margin-top: 130px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const LoaderWrapper = styled.div`
-  height: 500px;
-`;
diff --git a/frontend/webapp/containers/setup/destination/destination.section.tsx b/frontend/webapp/containers/setup/destination/destination.section.tsx
deleted file mode 100644
index f996a43ae..000000000
--- a/frontend/webapp/containers/setup/destination/destination.section.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSectionData } from '@/hooks';
-import { KeyvalLoader } from '@/design.system';
-import { EmptyList } from '@/components/lists';
-import { OVERVIEW, QUERIES, SETUP } from '@/utils';
-import { getDestinationsTypes } from '@/services';
-import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
-import { DestinationList, DestinationOptionMenu } from '@/components/setup';
-import {
-  LoaderWrapper,
-  DestinationContainerWrapper,
-} from './destination.section.styled';
-import {
-  sortDestinationList,
-  filterDataByTextQuery,
-  isDestinationListEmpty,
-  filterDataByMonitorsOption,
-} from './utils';
-
-interface DestinationTypes {
-  image_url: string;
-  display_name: string;
-  supported_signals: {
-    [key: string]: {
-      supported: boolean;
-    };
-  };
-  type: string;
-}
-
-type DestinationSectionProps = {
-  onSelectItem?: (type: string) => void;
-};
-
-export function DestinationSection({ onSelectItem }: DestinationSectionProps) {
-  const [searchFilter, setSearchFilter] = useState<string>('');
-  const [dropdownData, setDropdownData] = useState<any>(null);
-
-  const { sectionData, setSectionData } = useSectionData({});
-
-  const [monitoringOption, setMonitoringOption] =
-    useState<any>(MONITORING_OPTIONS);
-
-  const { isLoading, data } = useQuery(
-    [QUERIES.API_DESTINATION_TYPES],
-    getDestinationsTypes
-  );
-
-  function handleSelectItem(item: DestinationTypes) {
-    setSectionData(item);
-    onSelectItem && onSelectItem(item.type);
-  }
-
-  function renderDestinationLists() {
-    sortDestinationList(data);
-    const list = filterDataByMonitorsOption(
-      filterDataByTextQuery(data, searchFilter),
-      monitoringOption
-    );
-
-    if (isDestinationListEmpty(list, dropdownData?.id)) {
-      return <EmptyList title={OVERVIEW.EMPTY_DESTINATION} />;
-    }
-
-    return list?.map((category: any) => {
-      const displayItem =
-        dropdownData?.label === category.name ||
-        dropdownData?.label === SETUP.ALL;
-
-      return (
-        displayItem && (
-          <DestinationList
-            sectionData={sectionData}
-            key={category.name}
-            data={category}
-            onItemClick={(item: DestinationTypes) => handleSelectItem(item)}
-          />
-        )
-      );
-    });
-  }
-
-  if (isLoading) {
-    return (
-      <LoaderWrapper>
-        <KeyvalLoader />
-      </LoaderWrapper>
-    );
-  }
-
-  return (
-    <DestinationContainerWrapper>
-      <DestinationOptionMenu
-        searchFilter={searchFilter}
-        setSearchFilter={setSearchFilter}
-        setDropdownData={setDropdownData}
-        monitoringOption={monitoringOption}
-        setMonitoringOption={setMonitoringOption}
-        data={data?.categories}
-      />
-      {data && renderDestinationLists()}
-    </DestinationContainerWrapper>
-  );
-}
diff --git a/frontend/webapp/containers/setup/destination/index.tsx b/frontend/webapp/containers/setup/destination/index.tsx
deleted file mode 100644
index 5c095d265..000000000
--- a/frontend/webapp/containers/setup/destination/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useRouter } from 'next/navigation';
-import { KeyvalCard } from '@/design.system';
-import { DestinationSection } from './destination.section';
-import {
-  SetupBackButton,
-  ChooseDestinationHeader,
-} from '@/components/setup/headers';
-
-export function ChooseDestinationContainer() {
-  const [totalSelectedApps, setTotalSelectedApps] = useState(0);
-  const router = useRouter();
-
-  const selectedSources = useSelector(({ app }) => app.sources);
-
-  useEffect(calculateTotalSelectedApps, [selectedSources]);
-
-  function calculateTotalSelectedApps() {
-    let total = 0;
-    for (const key in selectedSources) {
-      const apps = selectedSources[key]?.objects;
-      const counter = apps?.filter((item) => item.selected)?.length;
-      total += counter;
-    }
-    setTotalSelectedApps(total);
-  }
-
-  function onDestinationSelect(type: string) {
-    router.push(`/connect-destination?type=${type}`);
-  }
-
-  function onBackClick() {
-    router.back();
-  }
-
-  const cardHeaderBody = () => (
-    <ChooseDestinationHeader totalSelectedApps={totalSelectedApps} />
-  );
-
-  return (
-    <KeyvalCard type={'secondary'} header={{ body: cardHeaderBody }}>
-      <SetupBackButton onBackClick={onBackClick} />
-      <DestinationSection onSelectItem={onDestinationSelect} />
-    </KeyvalCard>
-  );
-}
diff --git a/frontend/webapp/containers/setup/destination/utils.tsx b/frontend/webapp/containers/setup/destination/utils.tsx
deleted file mode 100644
index 6315bcafb..000000000
--- a/frontend/webapp/containers/setup/destination/utils.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { SETUP } from '@/utils/constants';
-
-const MANAGED_DESTINATION = 'managed';
-
-export function filterDataByTextQuery(data: any, searchFilter: string) {
-  //filter each category items by search query
-  if (!searchFilter) return data?.categories;
-
-  const filteredData = data?.categories.map((category: any) => {
-    const items = category.items.filter((item: any) => {
-      const displayType = item.display_name?.toLowerCase();
-      return displayType?.includes(searchFilter.toLowerCase());
-    });
-
-    return {
-      ...category,
-      items,
-    };
-  });
-
-  return filteredData;
-}
-
-export function filterDataByMonitorsOption(data: any, monitoringOption: any) {
-  const selectedMonitors = monitoringOption
-    .filter((monitor: any) => monitor.tapped)
-    .map((monitor: any) => monitor.title.toLowerCase());
-
-  // if all monitors are selected, return all data
-  if (selectedMonitors.length === 3) return data;
-
-  const filteredData: any[] = [];
-
-  data?.forEach((category: any) => {
-    const supportedItems: any[] = [];
-
-    category.items.filter((item: any) => {
-      // get all supported signals for each item
-      const supportedSignals: any[] = [];
-
-      for (const monitor in item.supported_signals) {
-        if (item.supported_signals[monitor].supported) {
-          supportedSignals.push(monitor);
-        }
-      }
-
-      const isSelected = selectedMonitors.some((monitor) =>
-        supportedSignals.includes(monitor)
-      );
-      // if item is supported by any of the selected monitors, add it to the list
-      isSelected && supportedItems.push(item);
-    });
-
-    filteredData.push({
-      items: supportedItems,
-      name: category.name,
-    });
-  });
-  return filteredData;
-}
-
-export function isDestinationListEmpty(list, currentItemName: string) {
-  if (currentItemName !== SETUP.ALL.toLowerCase()) {
-    const currentItemIndex = list?.findIndex(
-      (category) => category.name === currentItemName
-    );
-    return list[currentItemIndex]?.items.length === 0;
-  }
-
-  return list?.every((category) => category.items.length === 0);
-}
-
-export function sortDestinationList(list: any) {
-  if (
-    Array.isArray(list.categories) &&
-    list?.categories[0]?.name?.toLo !== MANAGED_DESTINATION
-  ) {
-    const sortedList = list?.categories?.sort((a: any, b: any) => {
-      return a.name === MANAGED_DESTINATION ? -1 : 1;
-    });
-    return sortedList;
-  }
-
-  return list;
-}
diff --git a/frontend/webapp/containers/setup/index.tsx b/frontend/webapp/containers/setup/index.tsx
deleted file mode 100644
index bfeb612f4..000000000
--- a/frontend/webapp/containers/setup/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './sources';
-export * from './destination';
-export * from './connection';
diff --git a/frontend/webapp/containers/setup/sources/fast-sources-selection.tsx b/frontend/webapp/containers/setup/sources/fast-sources-selection.tsx
deleted file mode 100644
index 9f4edd3ac..000000000
--- a/frontend/webapp/containers/setup/sources/fast-sources-selection.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { KeyvalButton, KeyvalLoader, KeyvalText } from '@/design.system';
-import { OVERVIEW, QUERIES, ROUTES } from '@/utils';
-import { getApplication, getNamespaces } from '@/services';
-import {
-  LoaderWrapper,
-  SectionContainerWrapper,
-} from './sources.section.styled';
-import { NamespaceAccordion } from './namespace-accordion';
-import styled from 'styled-components';
-import theme from '@/styles/palette';
-import { useSources } from '@/hooks';
-import { useRouter } from 'next/navigation';
-import { setSources } from '@/store';
-import { useDispatch } from 'react-redux';
-
-const TitleWrapper = styled.div`
-  margin-bottom: 24px;
-`;
-
-const ButtonWrapper = styled.div`
-  position: absolute;
-  bottom: 24px;
-  width: 90%;
-`;
-
-interface AccordionItem {
-  name: string;
-  kind: string;
-  instances: number;
-  app_instrumentation_labeled: boolean;
-  ns_instrumentation_labeled: boolean;
-  instrumentation_effective: boolean;
-  selected: boolean;
-}
-
-interface AccordionData {
-  title: string;
-  items: AccordionItem[];
-}
-
-export function FastSourcesSelection({ sectionData, setSectionData }) {
-  const [accordionData, setAccordionData] = useState<AccordionData[]>([]);
-  const router = useRouter();
-  const dispatch = useDispatch();
-  const { isLoading, data: namespaces } = useQuery(
-    [QUERIES.API_NAMESPACES],
-    getNamespaces
-  );
-
-  const { upsertSources } = useSources();
-
-  useEffect(() => {
-    if (namespaces) {
-      const accordionData = namespaces.namespaces.map((item, index) => ({
-        title: item.name,
-        items:
-          sectionData?.[item.name]?.objects.map((app) => ({
-            ...app,
-            selected: app.selected,
-          })) || [],
-      }));
-      setAccordionData(accordionData);
-    }
-  }, [namespaces]);
-
-  const handleSetCurrentNamespace = async (selectedNs) => {
-    const currentNsApps = await getApplication(selectedNs.title);
-
-    const updatedSectionData = {
-      ...sectionData,
-      [selectedNs.title]: {
-        selected_all: sectionData[selectedNs.title]?.selected_all || false,
-        future_selected:
-          sectionData[selectedNs.title]?.future_selected || false,
-        objects: currentNsApps.applications.map((app) => ({
-          ...app,
-          selected: sectionData[selectedNs.title]?.objects?.find(
-            (a) => a.name === app.name
-          )?.selected,
-        })),
-      },
-    };
-
-    const accordionData = namespaces.namespaces.map((item) => ({
-      title: item.name,
-      items: updatedSectionData[item.name]?.objects
-        .map((app) => ({
-          ...app,
-          selected: app.selected,
-        }))
-        .filter((app) => !app.instrumentation_effective),
-    }));
-
-    // Update both sectionData and accordionData
-    setSectionData(updatedSectionData);
-    setAccordionData(accordionData);
-  };
-
-  const onSelectItemChange = (item: AccordionItem, ns: string) => {
-    const updatedAccordionData = accordionData.map((a_data: AccordionData) => {
-      if (a_data.title === ns) {
-        return {
-          ...a_data,
-          items: a_data.items.map((i: AccordionItem) => {
-            if (i.name === item.name) {
-              return { ...i, selected: !i.selected };
-            }
-            return i;
-          }),
-        };
-      }
-      return a_data;
-    });
-
-    const updatedSectionData = {
-      ...sectionData,
-      [ns]: {
-        ...sectionData[ns],
-        selected_all: accordionData[ns]
-          ?.find((a) => a.title === ns)
-          .items.every((i) => i.selected),
-        future_selected: accordionData[ns]
-          ?.find((a) => a.title === ns)
-          .items.some((i) => !i.selected),
-        objects: sectionData[ns].objects.map((a) => {
-          if (a.name === item.name) {
-            return { ...a, selected: !a.selected };
-          }
-          return a;
-        }),
-      },
-    };
-
-    setSectionData(updatedSectionData);
-
-    // Update the accordion data state with the modified data
-    setAccordionData(updatedAccordionData);
-  };
-
-  const onSelectAllChange = (ns, value) => {
-    const updatedAccordionData = accordionData.map((a_data: AccordionData) => {
-      if (a_data.title === ns) {
-        return {
-          ...a_data,
-          items: a_data.items.map((i: AccordionItem) => {
-            return { ...i, selected: value };
-          }),
-        };
-      }
-      return a_data;
-    });
-
-    const updatedSectionData = {
-      ...sectionData,
-      [ns]: {
-        ...sectionData[ns],
-        objects: sectionData[ns]?.objects?.map((a) => {
-          return { ...a, selected: value };
-        }),
-      },
-    };
-
-    // Update the accordion data state with the modified data
-    setSectionData(updatedSectionData);
-    setAccordionData(updatedAccordionData);
-  };
-
-  function onConnectClick() {
-    const isSetup = window.location.pathname.includes('choose-sources');
-
-    if (isSetup) {
-      dispatch(setSources(sectionData));
-      router.push(ROUTES.CHOOSE_DESTINATION);
-      return;
-    }
-
-    upsertSources({
-      sectionData,
-      onSuccess: () => router.push(`${ROUTES.SOURCES}?poll=true`),
-      onError: null,
-    });
-  }
-
-  if (isLoading) {
-    return (
-      <LoaderWrapper>
-        <KeyvalLoader />
-      </LoaderWrapper>
-    );
-  }
-  const isSetup = window.location.pathname.includes('choose-sources');
-  return (
-    <SectionContainerWrapper>
-      <TitleWrapper>
-        <KeyvalText>Fast Sources Selection</KeyvalText>
-      </TitleWrapper>
-      <div style={{ height: '75vh' }}>
-        <NamespaceAccordion
-          data={accordionData}
-          onSelectItem={onSelectItemChange}
-          setCurrentNamespace={(data) => handleSetCurrentNamespace(data)}
-          onSelectAllChange={onSelectAllChange}
-        />
-      </div>
-      <ButtonWrapper>
-        <KeyvalButton onClick={onConnectClick}>
-          <KeyvalText weight={600} color={theme.text.dark_button}>
-            {isSetup ? 'Next' : OVERVIEW.CONNECT}
-          </KeyvalText>
-        </KeyvalButton>
-      </ButtonWrapper>
-    </SectionContainerWrapper>
-  );
-}
diff --git a/frontend/webapp/containers/setup/sources/index.tsx b/frontend/webapp/containers/setup/sources/index.tsx
deleted file mode 100644
index 8acea23ae..000000000
--- a/frontend/webapp/containers/setup/sources/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-import React, { useEffect } from 'react';
-import { ROUTES } from '@/utils';
-import { useAppStore } from '@/store';
-import { useSectionData } from '@/hooks';
-import { useRouter } from 'next/navigation';
-import { KeyvalCard } from '@/design.system';
-import { SourcesSection } from './sources.section';
-import { ChooseSourcesHeader } from '@/components/setup/headers';
-export function ChooseSourcesContainer() {
-  const router = useRouter();
-
-  const selectedSources = useAppStore((state) => state.sources);
-  const setSources = useAppStore((state) => state.setSources);
-
-  const { sectionData, setSectionData, totalSelected } = useSectionData({});
-
-  useEffect(onload, []);
-
-  function onload() {
-    selectedSources && setSectionData({ ...selectedSources });
-  }
-
-  async function onNextClick() {
-    setSources(sectionData);
-    router.push(ROUTES.CHOOSE_DESTINATION);
-  }
-
-  const cardHeaderBody = () => (
-    <ChooseSourcesHeader
-      onNextClick={onNextClick}
-      totalSelected={totalSelected}
-    />
-  );
-
-  return (
-    <KeyvalCard type={'secondary'} header={{ body: cardHeaderBody }}>
-      <SourcesSection
-        sectionData={sectionData}
-        setSectionData={setSectionData}
-      />
-    </KeyvalCard>
-  );
-}
diff --git a/frontend/webapp/containers/setup/sources/namespace-accordion.tsx b/frontend/webapp/containers/setup/sources/namespace-accordion.tsx
deleted file mode 100644
index 989e0e30e..000000000
--- a/frontend/webapp/containers/setup/sources/namespace-accordion.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { KeyvalCheckbox, KeyvalText } from '@/design.system';
-import React, { useEffect, useState } from 'react';
-import { WhiteArrowIcon } from '@keyval-dev/design-system';
-import styled from 'styled-components';
-interface AccordionItemData {
-  title: string;
-  items: any[];
-}
-
-interface AccordionProps {
-  data: AccordionItemData[];
-  setCurrentNamespace: (data: AccordionItemData) => void;
-  onSelectItem: (item: any, ns: string) => void;
-  onSelectAllChange: (ns, value) => void;
-}
-
-const ArrowIconWrapper = styled.div<{ expanded: boolean }>`
-  margin-left: 24px;
-  transform: rotate(${({ expanded }) => (expanded ? '90deg' : '-90deg')});
-`;
-
-export function NamespaceAccordion({
-  data,
-  setCurrentNamespace,
-  onSelectItem,
-  onSelectAllChange,
-}: AccordionProps) {
-  return (
-    <div>
-      {data.map((itemData, index) => (
-        <AccordionItem
-          key={index}
-          data={itemData}
-          onSelectItem={onSelectItem}
-          setCurrentNamespace={setCurrentNamespace}
-          onSelectAllChange={onSelectAllChange}
-        />
-      ))}
-    </div>
-  );
-}
-
-interface AccordionItemProps {
-  data: any;
-  setCurrentNamespace: (data: AccordionItemData) => void;
-  onSelectItem: (item: any, ns: string) => void;
-  onSelectAllChange: (ns, value) => void;
-}
-
-function AccordionItem({
-  data,
-  setCurrentNamespace,
-  onSelectItem,
-  onSelectAllChange,
-}: AccordionItemProps) {
-  const [isAllSelected, setIsAllSelected] = useState(false);
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    const selectedItems = data.items?.filter((item) => item.selected);
-    setIsAllSelected(
-      selectedItems?.length === data?.items?.length && selectedItems?.length > 0
-    );
-  }, [data]);
-
-  const handleSelectAllChange = (ns, value) => {
-    onSelectAllChange(ns, value);
-    setIsAllSelected(value);
-  };
-
-  const handleItemChange = (item) => {
-    onSelectItem(item, data.title);
-  };
-
-  const handleExpand = () => {
-    setCurrentNamespace(data);
-    setExpanded(!expanded);
-  };
-
-  return (
-    <div>
-      <div
-        style={{
-          marginBottom: 8,
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <KeyvalCheckbox
-          value={isAllSelected}
-          onChange={() => handleSelectAllChange(data.title, !isAllSelected)}
-          label={''}
-        />
-        <div
-          style={{
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-          }}
-          onClick={handleExpand}
-        >
-          <KeyvalText style={{ marginLeft: 8, flex: 1, cursor: 'pointer' }}>
-            {data.title}
-          </KeyvalText>
-          <ArrowIconWrapper expanded={expanded}>
-            <WhiteArrowIcon size={10} />
-          </ArrowIconWrapper>
-        </div>
-      </div>
-      {expanded && (
-        <div style={{ paddingLeft: '20px' }}>
-          {data.items?.map((item, index) => (
-            <div key={index} style={{ cursor: 'pointer', marginBottom: 8 }}>
-              <KeyvalCheckbox
-                value={item.selected}
-                onChange={() => handleItemChange(item)}
-                label={`${item.name} / ${item.kind.toLowerCase()}`}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/frontend/webapp/containers/setup/sources/sources.section.styled.tsx b/frontend/webapp/containers/setup/sources/sources.section.styled.tsx
deleted file mode 100644
index 6dc5f5f6f..000000000
--- a/frontend/webapp/containers/setup/sources/sources.section.styled.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const LoaderWrapper = styled.div`
-  height: 500px;
-`;
-
-export const SectionContainerWrapper = styled.div`
-  max-height: 100%;
-  padding: 24px 32px;
-  overflow: scroll;
-  overflow-x: hidden;
-`;
diff --git a/frontend/webapp/containers/setup/sources/sources.section.tsx b/frontend/webapp/containers/setup/sources/sources.section.tsx
deleted file mode 100644
index 4df611d0f..000000000
--- a/frontend/webapp/containers/setup/sources/sources.section.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { Drawer, KeyvalLoader } from '@/design.system';
-import { NOTIFICATION, QUERIES } from '@/utils';
-import { getApplication, getNamespaces } from '@/services';
-import { SourcesList, SourcesOptionMenu } from '@/components/setup';
-import {
-  LoaderWrapper,
-  SectionContainerWrapper,
-} from './sources.section.styled';
-import {
-  Namespace,
-  SourceConfig,
-  NamespaceConfiguration,
-  SelectedSourcesConfiguration,
-} from '@/types';
-import { FastSourcesSelection } from './fast-sources-selection';
-
-const DEFAULT = 'default';
-
-export function SourcesSection({ sectionData, setSectionData }) {
-  const [currentNamespace, setCurrentNamespace] = useState<Namespace>();
-  const [searchFilter, setSearchFilter] = useState<string>('');
-  const [isDrawerOpen, setDrawerOpen] = useState(false);
-
-  const { isLoading, data, isError, error } = useQuery(
-    [QUERIES.API_NAMESPACES],
-    getNamespaces
-  );
-
-  useEffect(() => {
-    if (!currentNamespace && data) {
-      const currentNamespace =
-        data?.namespaces.find((item: Namespace) => item.name === DEFAULT) ??
-        data?.namespaces[0];
-      setCurrentNamespace(currentNamespace);
-    }
-  }, [data]);
-
-  useEffect(() => {
-    onNameSpaceChange();
-  }, [currentNamespace]);
-
-  const namespacesList = useMemo(
-    () =>
-      data?.namespaces?.map((item: Namespace, index: number) => ({
-        id: index,
-        label: item.name,
-      })),
-    [data]
-  );
-
-  const sourceData = useMemo(() => {
-    if (!currentNamespace) return;
-
-    let namespace = sectionData[currentNamespace?.name];
-
-    //filter by search query
-    namespace = searchFilter
-      ? namespace?.objects.filter((item: SourceConfig) =>
-          item.name.toLowerCase().includes(searchFilter.toLowerCase())
-        )
-      : namespace?.objects;
-    //remove instrumented applications
-    return namespace?.filter(
-      (item: SourceConfig) => !item.instrumentation_effective
-    );
-  }, [searchFilter, currentNamespace, sectionData]);
-
-  const toggleDrawer = () => setDrawerOpen(!isDrawerOpen);
-
-  async function onNameSpaceChange() {
-    if (!currentNamespace || sectionData[currentNamespace?.name]) return;
-    const namespace = await getApplication(currentNamespace?.name);
-
-    const { selected } = data.namespaces.find(
-      (item: Namespace) => item.name === currentNamespace?.name
-    );
-
-    const newSelectedNamespace = {
-      ...sectionData,
-      [currentNamespace?.name]: {
-        selected_all: selected,
-        future_selected: selected,
-        objects: [...namespace?.applications],
-      },
-    };
-    setSectionData(newSelectedNamespace);
-    if (selected) {
-      onSelectAllChange(true, newSelectedNamespace);
-    }
-  }
-
-  function handleSourceClick({ item }: { item: SourceConfig }) {
-    if (!currentNamespace) return;
-
-    const objIndex = sectionData[currentNamespace?.name].objects.findIndex(
-      (app: SourceConfig) => app.name === item.name
-    );
-
-    const namespace = sectionData[currentNamespace?.name];
-    let objects = [...namespace.objects];
-
-    // Make a shallow copy of the object to ensure it's extensible
-    let objectToUpdate = { ...objects[objIndex] };
-
-    objectToUpdate.selected = !objectToUpdate.selected;
-    objects[objIndex] = objectToUpdate;
-
-    let currentNamespaceConfig = {
-      ...namespace,
-      objects,
-    };
-
-    if (!objectToUpdate.selected && namespace.selected_all) {
-      currentNamespaceConfig = {
-        ...currentNamespaceConfig,
-        selected_all: false,
-        future_selected: false,
-      };
-    }
-    handleSetNewSelectedConfig(currentNamespaceConfig);
-  }
-
-  function onSelectAllChange(
-    value: boolean,
-    data?: SelectedSourcesConfiguration
-  ) {
-    if (!currentNamespace) return;
-
-    const currentData = data || sectionData;
-    const namespace = currentData[currentNamespace?.name];
-    let objects = namespace.objects.map((item: SourceConfig) => ({
-      ...item,
-      selected: value,
-    }));
-
-    const currentNamespaceConfig = {
-      ...namespace,
-      future_selected: value,
-      selected_all: value,
-      objects,
-    };
-    handleSetNewSelectedConfig(currentNamespaceConfig);
-  }
-
-  function onFutureApplyChange(value: boolean) {
-    if (!currentNamespace) return;
-
-    const currentNamespaceConfig = {
-      ...sectionData[currentNamespace?.name],
-      future_selected: value,
-    };
-    handleSetNewSelectedConfig(currentNamespaceConfig);
-  }
-
-  function handleSetNewSelectedConfig(config: NamespaceConfiguration) {
-    if (!currentNamespace) return;
-
-    const newSelectedNamespaceConfig: SelectedSourcesConfiguration = {
-      ...sectionData,
-      [currentNamespace?.name]: config,
-    };
-
-    setSectionData(newSelectedNamespaceConfig);
-  }
-
-  if (isLoading || currentNamespace === undefined) {
-    return (
-      <LoaderWrapper>
-        <KeyvalLoader />
-      </LoaderWrapper>
-    );
-  }
-
-  return (
-    <SectionContainerWrapper>
-      {isDrawerOpen && (
-        <Drawer
-          isOpen={isDrawerOpen}
-          onClose={toggleDrawer}
-          position="right"
-          width="500px"
-        >
-          <FastSourcesSelection {...{ sectionData, setSectionData }} />
-        </Drawer>
-      )}
-      <SourcesOptionMenu
-        currentNamespace={currentNamespace}
-        setCurrentItem={setCurrentNamespace}
-        data={namespacesList}
-        searchFilter={searchFilter}
-        setSearchFilter={setSearchFilter}
-        onSelectAllChange={onSelectAllChange}
-        selectedApplications={sectionData}
-        onFutureApplyChange={onFutureApplyChange}
-        toggleFastSourcesSelection={toggleDrawer}
-      />
-      <SourcesList
-        data={sourceData}
-        selectedData={sectionData[currentNamespace?.name]}
-        onItemClick={handleSourceClick}
-        onClearClick={() => onSelectAllChange(false)}
-      />
-    </SectionContainerWrapper>
-  );
-}
diff --git a/frontend/webapp/design.system/action.group/index.tsx b/frontend/webapp/design.system/action.group/index.tsx
deleted file mode 100644
index d5f78b9f1..000000000
--- a/frontend/webapp/design.system/action.group/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ActionsGroup } from '@keyval-dev/design-system';
-import React from 'react';
-
-// Define the type for individual action items
-interface ActionItem {
-  label: string;
-  onClick: () => void;
-  id: string;
-  selected?: boolean;
-  disabled?: boolean;
-}
-
-// Define the type for the groups of action items, including any conditional rendering logic
-interface ActionGroup {
-  label: string;
-  subTitle: string;
-  items: ActionItem[];
-  condition?: boolean; // Optional condition to determine if the group should be rendered
-}
-
-// Props for the container component that will render the list of action groups
-interface ActionsListProps {
-  actionGroups: ActionGroup[];
-}
-
-export const OdigosActionsGroup: React.FC<ActionsListProps> = ({
-  actionGroups,
-}) => {
-  return <ActionsGroup actionGroups={actionGroups} />;
-};
diff --git a/frontend/webapp/design.system/action.item/index.tsx b/frontend/webapp/design.system/action.item/index.tsx
deleted file mode 100644
index 94632d2bc..000000000
--- a/frontend/webapp/design.system/action.item/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { ActionItem } from '@keyval-dev/design-system';
-
-interface Item {
-  label: string;
-  onClick: () => void;
-  id: string;
-  selected?: boolean;
-  disabled?: boolean;
-}
-
-interface ActionItemProps {
-  label: string;
-  subTitle: string;
-  items: Item[];
-}
-
-export const OdigosActionItem: React.FC<ActionItemProps> = (props) => {
-  return <ActionItem {...props} />;
-};
diff --git a/frontend/webapp/design.system/button/button.tsx b/frontend/webapp/design.system/button/button.tsx
deleted file mode 100644
index 94cc188de..000000000
--- a/frontend/webapp/design.system/button/button.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { FC } from 'react';
-import { Button } from '@keyval-dev/design-system';
-interface ButtonProps {
-  variant?: string;
-  children: JSX.Element | JSX.Element[];
-  onClick?: () => void;
-  style?: object;
-  disabled?: boolean;
-  type?: 'button' | 'submit' | 'reset' | undefined;
-}
-export const KeyvalButton: FC<ButtonProps> = (props) => {
-  return <Button {...props}>{props.children}</Button>;
-};
diff --git a/frontend/webapp/design.system/card/card.tsx b/frontend/webapp/design.system/card/card.tsx
deleted file mode 100644
index b4ca87f71..000000000
--- a/frontend/webapp/design.system/card/card.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Card } from '@keyval-dev/design-system';
-
-interface CardProps {
-  children: JSX.Element | JSX.Element[];
-  focus?: any;
-  type?: string;
-  header?: {
-    title?: string;
-    subtitle?: string;
-    body?: () => JSX.Element | JSX.Element[];
-  };
-}
-export function KeyvalCard(props: CardProps) {
-  return <Card {...props}>{props.children}</Card>;
-}
diff --git a/frontend/webapp/design.system/checkbox/checkbox.tsx b/frontend/webapp/design.system/checkbox/checkbox.tsx
deleted file mode 100644
index 6f696b74b..000000000
--- a/frontend/webapp/design.system/checkbox/checkbox.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import { Checkbox } from "@keyval-dev/design-system";
-
-interface KeyvalCheckboxProps {
-  value: boolean;
-  onChange: () => void;
-  label?: string;
-  disabled?: boolean;
-}
-
-export function KeyvalCheckbox(props: KeyvalCheckboxProps) {
-  return <Checkbox {...props} />;
-}
diff --git a/frontend/webapp/design.system/code-block/index.tsx b/frontend/webapp/design.system/code-block/index.tsx
deleted file mode 100644
index 1b375525d..000000000
--- a/frontend/webapp/design.system/code-block/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { Code } from '@keyval-dev/design-system';
-
-interface CodeProps {
-  text: string;
-  title?: string;
-  highlightedWord?: {
-    primary: {
-      words: string[];
-      color: string;
-    };
-    secondary?: {
-      words: string[];
-      color: string;
-    };
-  };
-  onCopy?: () => void;
-}
-
-export function CodeBlock(props: CodeProps) {
-  return <Code {...props} />;
-}
diff --git a/frontend/webapp/design.system/condition.alert/index.tsx b/frontend/webapp/design.system/condition.alert/index.tsx
deleted file mode 100644
index bccf0d74a..000000000
--- a/frontend/webapp/design.system/condition.alert/index.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import theme from '@/styles/palette';
-import { Condition } from '@/types';
-import { KeyvalText } from '../text/text';
-import { formatDate } from '@/utils';
-import { GreenCheckIcon, RedErrorIcon } from '@keyval-dev/design-system';
-
-interface ConditionAlertProps {
-  conditions: Condition[] | undefined;
-  title?: string;
-}
-
-const ConditionAlertContainer = styled.div`
-  border: 1px solid ${theme.colors.blue_grey};
-  border-radius: 8px;
-  padding: 10px;
-  margin-top: 8px;
-`;
-
-const ConditionItem = styled.div`
-  padding: 10px;
-`;
-
-const ConditionIconContainer = styled.div``;
-
-const ConditionDetails = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 4px;
-`;
-
-const ConditionSeparator = styled.div`
-  width: 2px;
-  height: 30px;
-  border-radius: 20px;
-  background-color: ${theme.colors.blue_grey};
-  margin-left: 10px;
-`;
-
-const IconWrapper = styled.div<{ bgColor: string }>`
-  width: 32px;
-  height: 32px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${({ bgColor }) => bgColor};
-`;
-
-const InnerIconWrapper = styled.div<{ borderColor: string }>`
-  width: 16px;
-  height: 16px;
-  border-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid ${({ borderColor }) => borderColor};
-`;
-
-export const Conditions: React.FC<ConditionAlertProps> = ({
-  conditions,
-  title = 'Status',
-}) => {
-  const getSuccessIcon = () => (
-    <IconWrapper bgColor="#3fb94f40">
-      <InnerIconWrapper borderColor="#3fb950">
-        <GreenCheckIcon style={{ width: 10, height: 10 }} />
-      </InnerIconWrapper>
-    </IconWrapper>
-  );
-
-  const getErrorIcon = () => (
-    <IconWrapper bgColor="#f8524952">
-      <InnerIconWrapper borderColor="#f85249">
-        <RedErrorIcon
-          style={{ width: 10, height: 10, marginLeft: 2, marginBottom: 2 }}
-        />
-      </InnerIconWrapper>
-    </IconWrapper>
-  );
-
-  return conditions ? (
-    <div>
-      <KeyvalText size={14} weight={600}>
-        {title}
-      </KeyvalText>
-      <ConditionAlertContainer>
-        {conditions.map((condition, index) => (
-          <ConditionItem key={index}>
-            <div style={{ display: 'flex', gap: '8px' }}>
-              <ConditionIconContainer>
-                {condition.status === 'True'
-                  ? getSuccessIcon()
-                  : getErrorIcon()}
-              </ConditionIconContainer>
-              <div>
-                <KeyvalText size={14}>{condition.message}</KeyvalText>
-                <ConditionDetails>
-                  <KeyvalText
-                    style={{ marginRight: '8px' }}
-                    color={theme.text.grey}
-                    size={12}
-                  >
-                    {condition.type}
-                  </KeyvalText>
-                  <KeyvalText color={theme.text.grey} size={12}>
-                    {formatDate(condition.lastTransitionTime)}
-                  </KeyvalText>
-                </ConditionDetails>
-              </div>
-            </div>
-            {index !== conditions.length - 1 && <ConditionSeparator />}
-          </ConditionItem>
-        ))}
-      </ConditionAlertContainer>
-    </div>
-  ) : null;
-};
diff --git a/frontend/webapp/design.system/danger.zone/danger.zone.tsx b/frontend/webapp/design.system/danger.zone/danger.zone.tsx
deleted file mode 100644
index ce6903a96..000000000
--- a/frontend/webapp/design.system/danger.zone/danger.zone.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-import { DangerZone } from "@keyval-dev/design-system";
-
-export function DangerZoneArea(props) {
-  return <DangerZone {...props} />;
-}
diff --git a/frontend/webapp/design.system/data.flow/index.tsx b/frontend/webapp/design.system/data.flow/index.tsx
deleted file mode 100644
index 92de15067..000000000
--- a/frontend/webapp/design.system/data.flow/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-import React from "react";
-import { DataFlow } from "@keyval-dev/design-system";
-
-export function KeyvalDataFlow(props) {
-  return <DataFlow {...props} />;
-}
diff --git a/frontend/webapp/design.system/drawer/index.tsx b/frontend/webapp/design.system/drawer/index.tsx
deleted file mode 100644
index e562a52de..000000000
--- a/frontend/webapp/design.system/drawer/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-
-interface DrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  position?: 'left' | 'right'; // Optional prop to specify the drawer opening side
-  width?: string; // Optional width control, defaults to 300px
-  children: React.ReactNode;
-}
-
-// Styled-component for overlay
-const Overlay = styled.div<{ isOpen: boolean }>`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
-  transition: opacity 0.3s ease;
-  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
-  z-index: 999;
-`;
-
-// Styled-component for drawer container
-const DrawerContainer = styled.div<{
-  isOpen: boolean;
-  position: 'left' | 'right';
-  width: string;
-}>`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  ${({ position, width }) => position}: 0;
-  width: ${({ width }) => width};
-  background-color: ${({ theme }) => theme.colors.light_dark};
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  transform: translateX(
-    ${({ isOpen, position }) =>
-      isOpen ? '0' : position === 'left' ? '-100%' : '100%'}
-  );
-  transition: transform 0.3s ease;
-  z-index: 1000;
-  overflow-y: auto;
-`;
-
-export const Drawer: React.FC<DrawerProps> = ({
-  isOpen,
-  onClose,
-  position = 'right',
-  width = '300px',
-  children,
-}) => {
-  // Handle closing the drawer when escape key is pressed
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
-        onClose();
-      }
-    };
-    document.addEventListener('keydown', handleEscape);
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [isOpen, onClose]);
-
-  return (
-    <>
-      <Overlay isOpen={isOpen} onClick={onClose} />
-      <DrawerContainer isOpen={isOpen} position={position} width={width}>
-        {children}
-      </DrawerContainer>
-    </>
-  );
-};
diff --git a/frontend/webapp/design.system/drop.down/drop.down.tsx b/frontend/webapp/design.system/drop.down/drop.down.tsx
deleted file mode 100644
index 36998df80..000000000
--- a/frontend/webapp/design.system/drop.down/drop.down.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { DropDown } from '@keyval-dev/design-system';
-
-interface DropDownItem {
-  id: number;
-  label: string;
-}
-interface KeyvalDropDownProps {
-  data: DropDownItem[];
-  onChange: (item: DropDownItem) => void;
-  width?: number;
-  value?: DropDownItem | null;
-  label?: string;
-  tooltip?: string;
-  required?: boolean;
-}
-
-export function KeyvalDropDown(props: KeyvalDropDownProps) {
-  return <DropDown {...props} />;
-}
diff --git a/frontend/webapp/design.system/float.box/float.box.tsx b/frontend/webapp/design.system/float.box/float.box.tsx
deleted file mode 100644
index f1f7a0e45..000000000
--- a/frontend/webapp/design.system/float.box/float.box.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-import { FloatBox } from "@keyval-dev/design-system";
-
-type FloatBoxProps = {
-  style?: object;
-  children: JSX.Element;
-};
-
-export function FloatBoxComponent({ children, style = {} }: FloatBoxProps) {
-  return <FloatBox style={{ ...style }}>{children}</FloatBox>;
-}
diff --git a/frontend/webapp/design.system/image/image.tsx b/frontend/webapp/design.system/image/image.tsx
deleted file mode 100644
index 1a7b30cf7..000000000
--- a/frontend/webapp/design.system/image/image.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Image from "next/image";
-import React from "react";
-
-interface KeyvalImageProps {
-  src: string;
-  alt?: string;
-  width?: number;
-  height?: number;
-  style?: React.CSSProperties;
-}
-
-const IMAGE_STYLE: React.CSSProperties = {
-  borderRadius: 10,
-};
-
-export function KeyvalImage({
-  src,
-  alt,
-  width = 56,
-  height = 56,
-  style = {},
-}: KeyvalImageProps) {
-  return (
-    <Image
-      src={src}
-      alt={alt || ""}
-      width={width}
-      height={height}
-      style={{ ...IMAGE_STYLE, ...style }}
-    />
-  );
-}
diff --git a/frontend/webapp/design.system/index.tsx b/frontend/webapp/design.system/index.tsx
deleted file mode 100644
index 2a95ab080..000000000
--- a/frontend/webapp/design.system/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-export { KeyvalRadioButton } from './radio/radio';
-export { KeyvalButton } from './button/button';
-export { FloatBoxComponent as FloatBox } from './float.box/float.box';
-export { KeyvalText } from './text/text';
-export { KeyvalCard } from './card/card';
-export { KeyvalTag } from './tag/tag';
-export { KeyvalTap } from './tap/tap';
-export { KeyvalDropDown } from './drop.down/drop.down';
-export { KeyvalSearchInput } from './search.input/search.input';
-export { KeyvalSwitch } from './switch/switch';
-export { KeyvalCheckbox } from './checkbox/checkbox';
-export { KeyvalSelectedCounter } from './selected.counter/selected.counter';
-export { KeyvalLink } from './link/link';
-export { KeyvalTooltip } from './tooltip/tooltip';
-export { KeyvalImage } from './image/image';
-export { KeyvalInput } from './input/input';
-export { KeyvalActionInput } from './input/action.input';
-export { KeyvalVideo } from './video/video';
-export { KeyvalLoader } from './loader/loader';
-export { KeyvalNotification } from './notification/notification';
-export { KeyvalDataFlow } from './data.flow';
-export { DangerZoneArea as DangerZone } from './danger.zone/danger.zone';
-export { KeyvalModal } from './modal/modal';
-export { KeyvalSteps as Steps } from './steps/steps';
-export { KeyvalMultiInput as MultiInput } from './multi-input';
-export { KeyValuePair } from './key-value-input';
-export { KeyvalTextArea } from './text.area';
-export { KeyvalMultiInputTable as MultiInputTable } from './multi-input-table';
-export { KeyvalTextArea as TextArea } from './textarea';
-export { OdigosPagination as Pagination } from './pagination';
-export { OdigosActionItem as ActionItem } from './action.item';
-export { OdigosActionsGroup as ActionsGroup } from './action.group';
-export { OdigosTable as Table } from './table';
-export { YMLEditor } from './yml.editor';
-export { CodeBlock } from './code-block';
-export { Conditions } from './condition.alert';
-export { Drawer } from './drawer';
diff --git a/frontend/webapp/design.system/input/action.input.tsx b/frontend/webapp/design.system/input/action.input.tsx
deleted file mode 100644
index 35918e1fd..000000000
--- a/frontend/webapp/design.system/input/action.input.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import { ActionInput } from "@keyval-dev/design-system";
-
-interface InputProps {
-  value: string;
-  onAction: () => void;
-  onChange: (value: string) => void;
-  type?: string;
-  style?: React.CSSProperties;
-}
-
-export function KeyvalActionInput(props: InputProps): JSX.Element {
-  return <ActionInput {...props} />;
-}
diff --git a/frontend/webapp/design.system/input/input.tsx b/frontend/webapp/design.system/input/input.tsx
deleted file mode 100644
index 32376bd4a..000000000
--- a/frontend/webapp/design.system/input/input.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { Input } from '@keyval-dev/design-system';
-interface InputProps {
-  label?: string;
-  value: string;
-  onChange: (value: string) => void;
-  type?: string;
-  error?: string;
-  style?: React.CSSProperties;
-  required?: boolean;
-  placeholder?: string;
-  tooltip?: string;
-  min?: number;
-  max?: number;
-  onBlur?: () => void;
-}
-
-export function KeyvalInput(props: InputProps): JSX.Element {
-  return <Input {...props} />;
-}
diff --git a/frontend/webapp/design.system/key-value-input/index.tsx b/frontend/webapp/design.system/key-value-input/index.tsx
deleted file mode 100644
index eb1d49b5a..000000000
--- a/frontend/webapp/design.system/key-value-input/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-import { KeyValueTable, KeyValueTableProps } from '@keyval-dev/design-system';
-
-export const KeyValuePair: React.FC<KeyValueTableProps> = (
-  props: KeyValueTableProps
-) => {
-  return <KeyValueTable {...props} />;
-};
diff --git a/frontend/webapp/design.system/link/link.tsx b/frontend/webapp/design.system/link/link.tsx
deleted file mode 100644
index 8f6ea2c7b..000000000
--- a/frontend/webapp/design.system/link/link.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Link } from '@keyval-dev/design-system';
-
-interface KeyvalLinkProps {
-  value: string;
-  onClick?: () => void;
-  fontSize?: number;
-}
-
-export function KeyvalLink(props: KeyvalLinkProps) {
-  return <Link {...props} />;
-}
diff --git a/frontend/webapp/design.system/loader/loader.tsx b/frontend/webapp/design.system/loader/loader.tsx
deleted file mode 100644
index 412d3d0ef..000000000
--- a/frontend/webapp/design.system/loader/loader.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import { Loader } from '@keyval-dev/design-system';
-
-export function KeyvalLoader({ width = 24, height = 24 }) {
-  return <Loader width={width} height={height} />;
-}
diff --git a/frontend/webapp/design.system/modal/modal.tsx b/frontend/webapp/design.system/modal/modal.tsx
deleted file mode 100644
index 24c98ff3a..000000000
--- a/frontend/webapp/design.system/modal/modal.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-import { Props } from "./types";
-import { Modal } from "@keyval-dev/design-system";
-
-export function KeyvalModal(props: Props) {
-  return <Modal {...props} />;
-}
diff --git a/frontend/webapp/design.system/modal/types.tsx b/frontend/webapp/design.system/modal/types.tsx
deleted file mode 100644
index b86283839..000000000
--- a/frontend/webapp/design.system/modal/types.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-export enum ModalPositionX {
-  center = "center",
-  right = "right",
-  left = "left",
-}
-
-export enum ModalPositionY {
-  center = "center",
-  start = "start",
-  end = "end",
-}
-
-export interface ModalConfig {
-  title: string;
-  showHeader: boolean;
-  positionX: ModalPositionX;
-  positionY: ModalPositionY;
-  padding: string;
-  showOverlay: boolean;
-  footer?: {
-    primaryBtnText: string;
-    secondaryBtnText?: string;
-    primaryBtnAction: () => void;
-    secondaryBtnAction?: () => void;
-  };
-}
-
-export interface Props {
-  show: boolean;
-  config: ModalConfig;
-  closeModal: () => void;
-  children: JSX.Element | JSX.Element[];
-}
diff --git a/frontend/webapp/design.system/multi-input-table/index.tsx b/frontend/webapp/design.system/multi-input-table/index.tsx
deleted file mode 100644
index baea5e23d..000000000
--- a/frontend/webapp/design.system/multi-input-table/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import {
-  MultiInputTable,
-  MultiInputTableProps,
-} from '@keyval-dev/design-system';
-
-export function KeyvalMultiInputTable(
-  props: MultiInputTableProps
-): JSX.Element {
-  return <MultiInputTable {...props} />;
-}
diff --git a/frontend/webapp/design.system/multi-input/index.tsx b/frontend/webapp/design.system/multi-input/index.tsx
deleted file mode 100644
index b1eaea314..000000000
--- a/frontend/webapp/design.system/multi-input/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { MultiInput } from '@keyval-dev/design-system';
-
-interface MultiInputProps {
-  initialList?: string[];
-  onListChange?: (list: string[]) => void;
-  placeholder?: string;
-  limit?: number;
-  tooltip?: string;
-  title?: string;
-}
-
-export function KeyvalMultiInput(props: MultiInputProps): JSX.Element {
-  return <MultiInput {...props} />;
-}
diff --git a/frontend/webapp/design.system/notification/notification.tsx b/frontend/webapp/design.system/notification/notification.tsx
deleted file mode 100644
index b1178d76f..000000000
--- a/frontend/webapp/design.system/notification/notification.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import { Notification } from "@keyval-dev/design-system";
-
-interface KeyvalNotificationProps {
-  type: "success" | "error" | "warning" | "info";
-  message: string;
-  onClose?: () => void;
-}
-
-export function KeyvalNotification(props: KeyvalNotificationProps) {
-  return <Notification {...props} />;
-}
diff --git a/frontend/webapp/design.system/pagination/index.tsx b/frontend/webapp/design.system/pagination/index.tsx
deleted file mode 100644
index 70090ae2c..000000000
--- a/frontend/webapp/design.system/pagination/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Pagination } from '@keyval-dev/design-system';
-
-type PaginationProps = {
-  total: number;
-  itemsPerPage: number;
-  currentPage: number;
-  onPageChange: (page: number) => void;
-};
-
-export const OdigosPagination: React.FC<PaginationProps> = (props) => {
-  return <Pagination {...props} />;
-};
diff --git a/frontend/webapp/design.system/radio/radio.tsx b/frontend/webapp/design.system/radio/radio.tsx
deleted file mode 100644
index de7df6772..000000000
--- a/frontend/webapp/design.system/radio/radio.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { FC, ChangeEvent } from "react";
-
-import { RadioButton } from "@keyval-dev/design-system";
-interface RadioButtonProps {
-  label?: string;
-  value?: string;
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const KeyvalRadioButton: FC<RadioButtonProps> = (props) => {
-  return <RadioButton {...props} />;
-};
diff --git a/frontend/webapp/design.system/search.input/search.input.tsx b/frontend/webapp/design.system/search.input/search.input.tsx
deleted file mode 100644
index 83355e926..000000000
--- a/frontend/webapp/design.system/search.input/search.input.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { SearchInput } from "@keyval-dev/design-system";
-interface KeyvalSearchInputProps {
-  placeholder?: string;
-  value?: string;
-  onChange?: (e: any) => void;
-  loading?: boolean;
-  containerStyle?: any;
-  inputStyle?: any;
-  showClear?: boolean;
-}
-
-export function KeyvalSearchInput(props: KeyvalSearchInputProps) {
-  return <SearchInput {...props} />;
-}
diff --git a/frontend/webapp/design.system/selected.counter/selected.counter.tsx b/frontend/webapp/design.system/selected.counter/selected.counter.tsx
deleted file mode 100644
index 7bbe0a41a..000000000
--- a/frontend/webapp/design.system/selected.counter/selected.counter.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-import { SelectedCounter } from "@keyval-dev/design-system";
-
-interface SelectedCounterProps {
-  total: number;
-  selected: number;
-}
-
-export function KeyvalSelectedCounter(props: SelectedCounterProps) {
-  return <SelectedCounter {...props} />;
-}
diff --git a/frontend/webapp/design.system/steps/steps.tsx b/frontend/webapp/design.system/steps/steps.tsx
deleted file mode 100644
index c1bd9cfbf..000000000
--- a/frontend/webapp/design.system/steps/steps.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { Steps } from "@keyval-dev/design-system";
-
-type StepItemProps = {
-  title: string;
-  index: number;
-  status: string;
-  isLast?: boolean;
-};
-
-type StepListProps = {
-  data?: StepItemProps[] | null;
-};
-
-export function KeyvalSteps(props: StepListProps) {
-  return <Steps {...props} />;
-}
diff --git a/frontend/webapp/design.system/switch/switch.tsx b/frontend/webapp/design.system/switch/switch.tsx
deleted file mode 100644
index 541229740..000000000
--- a/frontend/webapp/design.system/switch/switch.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import { Switch } from "@keyval-dev/design-system";
-
-interface KeyvalSwitchProps {
-  toggle: boolean;
-  handleToggleChange: () => void;
-  style?: object;
-  label?: string;
-}
-
-export function KeyvalSwitch(props: KeyvalSwitchProps) {
-  return <Switch {...props} />;
-}
diff --git a/frontend/webapp/design.system/table/index.tsx b/frontend/webapp/design.system/table/index.tsx
deleted file mode 100644
index b2d697a62..000000000
--- a/frontend/webapp/design.system/table/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Table } from '@keyval-dev/design-system';
-
-// Updated TableProps to be generic
-type TableProps<T> = {
-  data: T[];
-  renderTableHeader: () => JSX.Element;
-  renderTableRows: (item: T, index: number) => JSX.Element;
-  renderEmptyResult: () => JSX.Element;
-  onPaginate?: (pageNumber: number) => void;
-  currentPage: number;
-  itemsPerPage: number;
-  setCurrentPage: (page: number) => void;
-  setItemsPerPage: (itemsPerPage: number) => void;
-};
-
-export const OdigosTable = <T,>(props: TableProps<T>) => {
-  return <Table<T> {...props} />;
-};
diff --git a/frontend/webapp/design.system/tag/tag.tsx b/frontend/webapp/design.system/tag/tag.tsx
deleted file mode 100644
index 8f0f48cbb..000000000
--- a/frontend/webapp/design.system/tag/tag.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-import { Tag } from "@keyval-dev/design-system";
-
-interface TagProps {
-  title: string;
-  color?: string;
-}
-
-export function KeyvalTag({ title = "", color = "#033869" }: TagProps) {
-  return <Tag color={color} title={title} />;
-}
diff --git a/frontend/webapp/design.system/tap/tap.tsx b/frontend/webapp/design.system/tap/tap.tsx
deleted file mode 100644
index 66749a648..000000000
--- a/frontend/webapp/design.system/tap/tap.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { Tap } from "@keyval-dev/design-system";
-
-interface TapProps {
-  icons: object;
-  title?: string;
-  tapped?: any;
-  onClick?: any;
-  children?: JSX.Element;
-  style?: React.CSSProperties;
-}
-
-export function KeyvalTap(props: TapProps) {
-  return <Tap {...props} />;
-}
diff --git a/frontend/webapp/design.system/text.area/index.tsx b/frontend/webapp/design.system/text.area/index.tsx
deleted file mode 100644
index cddd38ec7..000000000
--- a/frontend/webapp/design.system/text.area/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import { TextArea, TextAreaProps } from '@keyval-dev/design-system';
-
-export const KeyvalTextArea: React.FC<TextAreaProps> = (props) => {
-  return <TextArea {...props} />;
-};
diff --git a/frontend/webapp/design.system/text/text.tsx b/frontend/webapp/design.system/text/text.tsx
deleted file mode 100644
index edbaf71fc..000000000
--- a/frontend/webapp/design.system/text/text.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { Text } from "@keyval-dev/design-system";
-
-type TextProps = {
-  type?: string | any;
-  value?: string;
-  style?: object;
-  children?: string | any;
-  weight?: string | number;
-  color?: string;
-  size?: number;
-};
-
-export function KeyvalText(props: TextProps) {
-  return <Text {...props} />;
-}
diff --git a/frontend/webapp/design.system/textarea/index.tsx b/frontend/webapp/design.system/textarea/index.tsx
deleted file mode 100644
index d83f72597..000000000
--- a/frontend/webapp/design.system/textarea/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { TextArea, TextAreaProps } from '@keyval-dev/design-system';
-import React from 'react';
-
-export function KeyvalTextArea(props: TextAreaProps) {
-  return <TextArea {...props} />;
-}
diff --git a/frontend/webapp/design.system/tooltip/tooltip.tsx b/frontend/webapp/design.system/tooltip/tooltip.tsx
deleted file mode 100644
index 81acc1dc4..000000000
--- a/frontend/webapp/design.system/tooltip/tooltip.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react";
-import { Tooltip } from "@keyval-dev/design-system";
-
-export function KeyvalTooltip(props: any) {
-  return <Tooltip {...props} />;
-}
diff --git a/frontend/webapp/design.system/video/video.tsx b/frontend/webapp/design.system/video/video.tsx
deleted file mode 100644
index e625a040b..000000000
--- a/frontend/webapp/design.system/video/video.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import { Video } from "@keyval-dev/design-system";
-
-type VideoComponentProps = {
-  videoSrc: string;
-  title?: string;
-  thumbnail?: string | undefined;
-};
-
-export function KeyvalVideo(props: VideoComponentProps) {
-  return <Video {...props} />;
-}
diff --git a/frontend/webapp/design.system/yml.editor/index.tsx b/frontend/webapp/design.system/yml.editor/index.tsx
deleted file mode 100644
index c51718927..000000000
--- a/frontend/webapp/design.system/yml.editor/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-import theme from '@/styles/palette';
-import styled from 'styled-components';
-import { CopiedIcon, CopyIcon } from '@keyval-dev/design-system';
-import YamlEditor from '@focus-reactive/react-yaml';
-
-const Container = styled.div`
-  position: relative;
-  background-color: ${theme.colors.blue_grey};
-  border-radius: 8px;
-  padding: 4px;
-
-  div {
-    color: #f5b175;
-  }
-  .ͼb {
-    color: #64a8fd;
-  }
-  .ͼm {
-    color: ${theme.colors.white};
-  }
-  .ͼd {
-    color: #f5b175;
-  }
-  .ͼc {
-    color: #f5b175;
-  }
-  .cm-gutters {
-    display: none;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-  }
-`;
-
-const EditorOverlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10; // Ensure this is higher than the editor's z-index
-`;
-
-const CopyIconWrapper = styled.div`
-  background-color: ${theme.colors.dark};
-  z-index: 999;
-  border-radius: 4px;
-  padding: 4px;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: all;
-`;
-
-export const YMLEditor = ({ data }) => {
-  const [isCopied, setIsCopied] = useState(false);
-
-  const handleChange = (value) => {};
-
-  const handleCopy = () => {
-    navigator.clipboard
-      .writeText(JSON.stringify(data, null, 2))
-      .then(() => {
-        setIsCopied(true);
-        setTimeout(() => {
-          setIsCopied(false);
-        }, 3000);
-      })
-      .catch((err) => console.error('Error copying YAML to clipboard: ', err));
-  };
-  return (
-    <>
-      <Container>
-        <CopyIconWrapper onClick={handleCopy}>
-          {isCopied ? (
-            <CopiedIcon style={{ width: 18, height: 18 }} />
-          ) : (
-            <CopyIcon style={{ width: 18, height: 18 }} />
-          )}
-        </CopyIconWrapper>
-
-        <div style={{ position: 'relative' }}>
-          <YamlEditor
-            key={JSON.stringify(data)}
-            json={data}
-            onChange={handleChange}
-          />
-          <EditorOverlay />
-        </div>
-      </Container>
-    </>
-  );
-};
diff --git a/frontend/webapp/hooks/actions/index.ts b/frontend/webapp/hooks/actions/index.ts
index 691b55c67..032cc591d 100644
--- a/frontend/webapp/hooks/actions/index.ts
+++ b/frontend/webapp/hooks/actions/index.ts
@@ -1,4 +1,2 @@
-export * from './useActionFormData';
-export * from './useActions';
-export * from './useActionState';
 export * from './useActionCRUD';
+export * from './useActionFormData';
diff --git a/frontend/webapp/hooks/actions/useActionCRUD.ts b/frontend/webapp/hooks/actions/useActionCRUD.ts
index d28dd7d75..442f32f58 100644
--- a/frontend/webapp/hooks/actions/useActionCRUD.ts
+++ b/frontend/webapp/hooks/actions/useActionCRUD.ts
@@ -1,5 +1,5 @@
 import { useDrawerStore } from '@/store';
-import { useNotify } from '../useNotify';
+import { useNotify } from '../notification/useNotify';
 import { useMutation } from '@apollo/client';
 import { useComputePlatform } from '../compute-platform';
 import { ACTION, getSseTargetFromId, NOTIFICATION, safeJsonParse } from '@/utils';
diff --git a/frontend/webapp/hooks/actions/useActionFormData.ts b/frontend/webapp/hooks/actions/useActionFormData.ts
index 9c2b069fa..d3bf47014 100644
--- a/frontend/webapp/hooks/actions/useActionFormData.ts
+++ b/frontend/webapp/hooks/actions/useActionFormData.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNotify } from '../useNotify';
+import { useNotify } from '../notification/useNotify';
 import { DrawerBaseItem } from '@/store';
 import { ACTION, FORM_ALERTS, NOTIFICATION } from '@/utils';
 import type { ActionDataParsed, ActionInput } from '@/types';
diff --git a/frontend/webapp/hooks/actions/useActionState.ts b/frontend/webapp/hooks/actions/useActionState.ts
deleted file mode 100644
index 9d6c10ca1..000000000
--- a/frontend/webapp/hooks/actions/useActionState.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import { ROUTES } from '@/utils';
-import { useState } from 'react';
-import { useMutation } from 'react-query';
-import { useActions } from './useActions';
-import { useRouter } from 'next/navigation';
-import { putAction, setAction, deleteAction } from '@/services';
-import { ActionData, ActionItem, ActionState, ActionsType } from '@/types';
-
-export interface Monitor {
-  id: string;
-  label: string;
-  checked: boolean;
-}
-
-const DEFAULT_MONITORS: Monitor[] = [
-  { id: '1', label: 'Logs', checked: true },
-  { id: '2', label: 'Metrics', checked: true },
-  { id: '3', label: 'Traces', checked: true },
-];
-
-export function useActionState() {
-  const [actionState, setActionState] = useState<ActionState>({
-    actionName: '',
-    actionNote: '',
-    actionData: null,
-    selectedMonitors: DEFAULT_MONITORS,
-    disabled: false,
-    type: '',
-  });
-
-  const router = useRouter();
-  const { getActionById } = useActions();
-
-  const { mutateAsync: createAction } = useMutation((body: ActionItem) =>
-    setAction(body, actionState.type)
-  );
-  const { mutateAsync: updateAction } = useMutation((body: ActionItem) =>
-    putAction(actionState?.id, body, actionState.type)
-  );
-
-  const { mutateAsync: deleteActionMutation } = useMutation((id: string) =>
-    deleteAction(id, actionState.type)
-  );
-
-  async function onSuccess() {
-    router.push(ROUTES.ACTIONS);
-  }
-
-  function onChangeActionState(key: string, value: any) {
-    setActionState((prevState) => ({
-      ...prevState,
-      [key]: value,
-    }));
-    if (key === 'disabled') upsertAction(false);
-  }
-
-  async function buildActionData(actionId: string) {
-    const action = await getActionById(actionId);
-
-    const actionState = {
-      id: action?.id,
-      actionName: action?.spec?.actionName || '',
-      actionNote: action?.spec?.notes || '',
-      type: action?.type || '',
-      actionData: getActionDataByType(action),
-      selectedMonitors: DEFAULT_MONITORS.map((monitor) => ({
-        ...monitor,
-
-        checked: !!action?.spec?.signals.includes(monitor.label.toUpperCase()),
-      })),
-      disabled: action?.spec?.disabled || false,
-    };
-
-    setActionState(actionState);
-  }
-
-  async function upsertAction(callback: boolean = true) {
-    const {
-      actionName,
-      actionNote,
-      actionData,
-      selectedMonitors,
-      disabled,
-      type,
-    } = actionState;
-
-    const signals = getSupportedSignals(type, selectedMonitors)
-      .filter((monitor) => monitor.checked)
-      .map((monitor) => monitor.label.toUpperCase());
-
-    const filteredActionData = filterEmptyActionDataFieldsByType(
-      type,
-      actionData
-    );
-
-    const action = {
-      actionName,
-      notes: actionNote,
-      signals,
-      ...filteredActionData,
-      disabled: callback ? disabled : !disabled,
-    };
-
-    try {
-      if (actionState?.id) {
-        await updateAction(action);
-      } else {
-        delete action.disabled;
-        await createAction(action);
-      }
-      callback && onSuccess();
-    } catch (error) {
-      console.error({ error });
-    }
-  }
-
-  function onDeleteAction() {
-    try {
-      if (actionState?.id) {
-        deleteActionMutation(actionState.id);
-        onSuccess();
-      }
-    } catch (error) {}
-  }
-
-  function getSupportedSignals(type: string, signals: Monitor[]) {
-    if (
-      type === ActionsType.ERROR_SAMPLER ||
-      type === ActionsType.PROBABILISTIC_SAMPLER ||
-      type === ActionsType.LATENCY_SAMPLER ||
-      type === ActionsType.PII_MASKING
-    ) {
-      return signals.filter((signal) => signal.label === 'Traces');
-    }
-
-    return signals;
-  }
-
-  return {
-    actionState,
-    upsertAction,
-    onDeleteAction,
-    buildActionData,
-    getSupportedSignals,
-    onChangeActionState,
-  };
-}
-
-function filterEmptyActionDataFieldsByType(type: string, data: any) {
-  switch (type) {
-    case ActionsType.ADD_CLUSTER_INFO:
-      return {
-        clusterAttributes: data.clusterAttributes.filter(
-          (attr: any) =>
-            attr.attributeStringValue !== '' && attr.attributeName !== ''
-        ),
-      };
-    case ActionsType.DELETE_ATTRIBUTES:
-      return {
-        attributeNamesToDelete: data.attributeNamesToDelete.filter(
-          (attr: string) => attr !== ''
-        ),
-      };
-    case ActionsType.RENAME_ATTRIBUTES:
-      return {
-        renames: Object.fromEntries(
-          Object.entries(data.renames).filter(
-            ([key, value]: [string, string]) => key !== '' && value !== ''
-          )
-        ),
-      };
-    default:
-      return data;
-  }
-}
-
-function getActionDataByType(action: ActionData | undefined) {
-  if (!action) return {};
-  switch (action.type) {
-    case ActionsType.ADD_CLUSTER_INFO:
-      return {
-        clusterAttributes: action.spec.clusterAttributes.map((attr, index) => ({
-          attributeName: attr.attributeName,
-          attributeStringValue: attr.attributeStringValue,
-          id: index,
-        })),
-      };
-    case ActionsType.DELETE_ATTRIBUTES:
-      return {
-        attributeNamesToDelete: action.spec.attributeNamesToDelete,
-      };
-    case ActionsType.RENAME_ATTRIBUTES:
-      return {
-        renames: action.spec.renames,
-      };
-    case ActionsType.ERROR_SAMPLER:
-      return {
-        fallback_sampling_ratio: action.spec.fallback_sampling_ratio,
-      };
-    case ActionsType.PROBABILISTIC_SAMPLER:
-      return {
-        sampling_percentage: action.spec.sampling_percentage,
-      };
-    case ActionsType.LATENCY_SAMPLER:
-      return {
-        endpoints_filters: action.spec.endpoints_filters,
-      };
-    default:
-      return {};
-  }
-}
diff --git a/frontend/webapp/hooks/actions/useActions.ts b/frontend/webapp/hooks/actions/useActions.ts
deleted file mode 100644
index d6e7f7449..000000000
--- a/frontend/webapp/hooks/actions/useActions.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useEffect, useState } from 'react';
-import { QUERIES } from '@/utils';
-import { useMutation, useQuery } from 'react-query';
-import { getActions, putAction } from '@/services';
-import { ActionData, ActionItem, ActionsSortType } from '@/types';
-
-export function useActions() {
-  const { isLoading, data, refetch } = useQuery<ActionData[]>(
-    [QUERIES.API_ACTIONS],
-    getActions
-  );
-
-  const [sortedActions, setSortedActions] = useState<ActionData[] | undefined>(
-    undefined
-  );
-
-  const { mutateAsync: updateAction } = useMutation((body: ActionItem) =>
-    putAction(body?.id, body, body.type)
-  );
-
-  useEffect(() => {
-    setSortedActions(data || []);
-  }, [data]);
-
-  async function getActionById(id: string) {
-    let actions = data;
-    if (!data) {
-      const res = await refetch();
-      actions = res.data;
-    }
-    return actions?.find((action) => action.id === id);
-  }
-
-  function sortActions(condition: string) {
-    const sorted = [...(data || [])].sort((a, b) => {
-      switch (condition) {
-        case ActionsSortType.TYPE:
-          return a.type.localeCompare(b.type);
-        case ActionsSortType.ACTION_NAME:
-          // Assuming spec.actionName exists, otherwise sort them to the end.
-          const nameA = a.spec?.actionName || '';
-          const nameB = b.spec?.actionName || '';
-          return nameA.localeCompare(nameB);
-        case ActionsSortType.STATUS:
-          // Treat missing 'disabled' as 'enabled'
-          const statusA = a.spec?.disabled ? 1 : -1;
-          const statusB = b.spec?.disabled ? 1 : -1;
-          return statusA - statusB;
-        default:
-          return 0;
-      }
-    });
-
-    setSortedActions(sorted);
-  }
-
-  function filterActionsBySignal(signals: string[]) {
-    const filteredData = data?.filter((action) => {
-      return signals.some((signal) =>
-        action.spec.signals.includes(signal.toUpperCase())
-      );
-    });
-
-    setSortedActions(filteredData);
-  }
-
-  async function toggleActionStatus(
-    ids: string[],
-    disabled: boolean
-  ): Promise<boolean> {
-    for (const id of ids) {
-      const action = await getActionById(id);
-      if (action && action.spec.disabled !== disabled) {
-        const body = {
-          id: action.id,
-          ...action.spec,
-          disabled,
-          type: action.type,
-        };
-        try {
-          await updateAction(body);
-        } catch (error) {
-          return Promise.reject(false);
-        }
-      }
-    }
-    setTimeout(async () => {
-      const res = await refetch();
-      setSortedActions(res.data || []);
-    }, 1000);
-
-    return Promise.resolve(true);
-  }
-
-  async function handleActionsRefresh() {
-    const res = await refetch();
-    setSortedActions(res.data || []);
-  }
-
-  return {
-    isLoading,
-    actions: sortedActions || [],
-    sortActions,
-    getActionById,
-    filterActionsBySignal,
-    toggleActionStatus,
-    refetch: handleActionsRefresh,
-  };
-}
diff --git a/frontend/webapp/hooks/common/index.ts b/frontend/webapp/hooks/common/index.ts
index e536761bd..095f9e56b 100644
--- a/frontend/webapp/hooks/common/index.ts
+++ b/frontend/webapp/hooks/common/index.ts
@@ -1 +1,3 @@
 export * from './useContainerWidth';
+export * from './useOnClickOutside';
+export * from './useKeyDown';
diff --git a/frontend/webapp/hooks/useKeyDown.ts b/frontend/webapp/hooks/common/useKeyDown.ts
similarity index 100%
rename from frontend/webapp/hooks/useKeyDown.ts
rename to frontend/webapp/hooks/common/useKeyDown.ts
diff --git a/frontend/webapp/hooks/useOnClickOutside.tsx b/frontend/webapp/hooks/common/useOnClickOutside.ts
similarity index 100%
rename from frontend/webapp/hooks/useOnClickOutside.tsx
rename to frontend/webapp/hooks/common/useOnClickOutside.ts
diff --git a/frontend/webapp/hooks/compute-platform/useNamespace.ts b/frontend/webapp/hooks/compute-platform/useNamespace.ts
index 784af8c5d..ec78a6447 100644
--- a/frontend/webapp/hooks/compute-platform/useNamespace.ts
+++ b/frontend/webapp/hooks/compute-platform/useNamespace.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from '@apollo/client';
 import { GET_NAMESPACES, PERSIST_NAMESPACE } from '@/graphql';
 import { ComputePlatform, PersistNamespaceItemInput } from '@/types';
-import { useNotify } from '../useNotify';
 import { NOTIFICATION } from '@/utils';
+import { useNotify } from '../notification';
 
 export const useNamespace = (namespaceName?: string, instrumentationLabeled = null as boolean | null) => {
   const notify = useNotify();
diff --git a/frontend/webapp/hooks/new-config/index.ts b/frontend/webapp/hooks/config/index.ts
similarity index 100%
rename from frontend/webapp/hooks/new-config/index.ts
rename to frontend/webapp/hooks/config/index.ts
diff --git a/frontend/webapp/hooks/new-config/useConfig.ts b/frontend/webapp/hooks/config/useConfig.ts
similarity index 100%
rename from frontend/webapp/hooks/new-config/useConfig.ts
rename to frontend/webapp/hooks/config/useConfig.ts
diff --git a/frontend/webapp/hooks/destinations/index.ts b/frontend/webapp/hooks/destinations/index.ts
index 97df326cb..071f0c685 100644
--- a/frontend/webapp/hooks/destinations/index.ts
+++ b/frontend/webapp/hooks/destinations/index.ts
@@ -1,4 +1,3 @@
-export * from './useDestinations';
 export * from './useTestConnection';
 export * from './useConnectDestinationForm';
 export * from './usePotentialDestinations';
diff --git a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
index e902fdeeb..98c70a46c 100644
--- a/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
+++ b/frontend/webapp/hooks/destinations/useDestinationCRUD.ts
@@ -1,5 +1,5 @@
 import { useDrawerStore } from '@/store';
-import { useNotify } from '../useNotify';
+import { useNotify } from '../notification/useNotify';
 import { useMutation } from '@apollo/client';
 import { useComputePlatform } from '../compute-platform';
 import { ACTION, getSseTargetFromId, NOTIFICATION } from '@/utils';
@@ -38,7 +38,9 @@ export const useDestinationCRUD = (params?: Params) => {
     params?.onSuccess?.();
   };
 
-  const [createDestination, cState] = useMutation<{ createNewDestination: { id: string } }>(CREATE_DESTINATION, {
+  const [createDestination, cState] = useMutation<{
+    createNewDestination: { id: string };
+  }>(CREATE_DESTINATION, {
     onError: (error) => handleError(ACTION.CREATE, error.message),
     onCompleted: (res, req) => {
       const id = res.createNewDestination.id;
@@ -46,7 +48,9 @@ export const useDestinationCRUD = (params?: Params) => {
       handleComplete(ACTION.CREATE, `destination "${name}" was created`, id);
     },
   });
-  const [updateDestination, uState] = useMutation<{ updateDestination: { id: string } }>(UPDATE_DESTINATION, {
+  const [updateDestination, uState] = useMutation<{
+    updateDestination: { id: string };
+  }>(UPDATE_DESTINATION, {
     onError: (error) => handleError(ACTION.UPDATE, error.message),
     onCompleted: (res, req) => {
       const id = res.updateDestination.id;
@@ -54,7 +58,9 @@ export const useDestinationCRUD = (params?: Params) => {
       handleComplete(ACTION.UPDATE, `destination "${name}" was updated`, id);
     },
   });
-  const [deleteDestination, dState] = useMutation<{ deleteDestination: boolean }>(DELETE_DESTINATION, {
+  const [deleteDestination, dState] = useMutation<{
+    deleteDestination: boolean;
+  }>(DELETE_DESTINATION, {
     onError: (error) => handleError(ACTION.DELETE, error.message),
     onCompleted: (res, req) => {
       const id = req?.variables?.id;
diff --git a/frontend/webapp/hooks/destinations/useDestinations.ts b/frontend/webapp/hooks/destinations/useDestinations.ts
deleted file mode 100644
index 4cc4cfcb7..000000000
--- a/frontend/webapp/hooks/destinations/useDestinations.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { QUERIES } from '@/utils/constants';
-import { useQuery } from 'react-query';
-import { Destination, DestinationsSortType } from '@/types';
-import { useEffect, useState } from 'react';
-import { getDestinations, getDestinationsTypes } from '@/services';
-
-export function useDestinations() {
-  const { isLoading, data } = useQuery(
-    [QUERIES.API_DESTINATION_TYPES],
-    getDestinationsTypes
-  );
-
-  const [sortedDestinations, setSortedDestinations] = useState<
-    Destination[] | undefined
-  >(undefined);
-
-  const {
-    isLoading: destinationLoading,
-    data: destinationList,
-    refetch: refetchDestinations,
-  } = useQuery<Destination[]>([QUERIES.API_DESTINATIONS], getDestinations);
-
-  useEffect(() => {
-    setSortedDestinations(destinationList || []);
-  }, [destinationList]);
-
-  function getCurrentDestinationByType(type: string) {
-    for (let category of data.categories) {
-      for (let item of category.items) {
-        if (item.type === type) {
-          return item;
-        }
-      }
-    }
-    return null;
-  }
-
-  function sortDestinations(condition: string) {
-    const sorted = [...(destinationList || [])].sort((a, b) => {
-      switch (condition) {
-        case DestinationsSortType.TYPE:
-          return a.type.localeCompare(b.type);
-        case DestinationsSortType.NAME:
-          const nameA = a.name || '';
-          const nameB = b.name || '';
-          return nameA.localeCompare(nameB);
-
-        default:
-          return 0;
-      }
-    });
-
-    setSortedDestinations(sorted);
-  }
-
-  function filterDestinationsBySignal(signals: string[]) {
-    const filteredData = destinationList?.filter((action) => {
-      return signals.some((signal) => action.signals[signal]);
-    });
-
-    setSortedDestinations(filteredData);
-  }
-
-  return {
-    isLoading,
-    destinationLoading,
-    destinationsTypes: data,
-    destinationList: sortedDestinations || [],
-    sortDestinations,
-    refetchDestinations,
-    filterDestinationsBySignal,
-    getCurrentDestinationByType,
-  };
-}
diff --git a/frontend/webapp/hooks/index.tsx b/frontend/webapp/hooks/index.tsx
index 7a13a1c78..c06f1e88c 100644
--- a/frontend/webapp/hooks/index.tsx
+++ b/frontend/webapp/hooks/index.tsx
@@ -1,15 +1,10 @@
-export { useSectionData } from './useSectionData';
-export { useOnClickOutside } from './useOnClickOutside';
-export { useKeyDown } from './useKeyDown';
-export * from './sources';
 export * from './setup';
-export * from './destinations';
+export * from './common';
+export * from './config';
+export * from './sources';
 export * from './actions';
-export * from './useNotify';
-export * from './useSSE';
-export * from './new-config';
-export * from './compute-platform';
-export * from './useOverviewMetrics';
 export * from './overview';
-export * from './common';
+export * from './notification';
+export * from './destinations';
+export * from './compute-platform';
 export * from './instrumentation-rules';
diff --git a/frontend/webapp/hooks/instrumentation-rules/index.ts b/frontend/webapp/hooks/instrumentation-rules/index.ts
index e71cd62cd..784dc409f 100644
--- a/frontend/webapp/hooks/instrumentation-rules/index.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/index.ts
@@ -1,3 +1,2 @@
-export * from './useInstrumentationRule';
 export * from './useInstrumentationRuleCRUD';
 export * from './useInstrumentationRuleFormData';
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRule.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRule.ts
deleted file mode 100644
index 3c78c6aef..000000000
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRule.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
-import {
-  getInstrumentationRules,
-  getInstrumentationRule,
-  createInstrumentationRule,
-  updateInstrumentationRule,
-  deleteInstrumentationRule,
-} from '@/services';
-import { InstrumentationRuleSpec } from '@/types';
-import { useRouter } from 'next/navigation';
-
-export function useInstrumentationRules() {
-  // Fetch all instrumentation rules
-  const { isLoading, data, refetch } = useQuery<InstrumentationRuleSpec[]>(
-    [],
-    getInstrumentationRules
-  );
-  const router = useRouter();
-  // State to manage sorted rules
-  const [sortedRules, setSortedRules] = useState<
-    InstrumentationRuleSpec[] | undefined
-  >(undefined);
-
-  // Mutations for create, update, and delete operations
-  const { mutateAsync: createRule } = useMutation(
-    (body: InstrumentationRuleSpec) => createInstrumentationRule(body)
-  );
-
-  const { mutateAsync: updateRule } = useMutation(
-    (body: { data: InstrumentationRuleSpec }) =>
-      updateInstrumentationRule(body.data.ruleId as string, body.data),
-    {
-      onSuccess: () => router.push('/instrumentation-rules'),
-    }
-  );
-
-  const { mutateAsync: deleteRule } = useMutation((id: string) =>
-    deleteInstrumentationRule(id)
-  );
-
-  // Set sorted rules when data changes
-  useEffect(() => {
-    setSortedRules(data || []);
-  }, [data]);
-
-  // Fetch rule by ID, refetch data if not available
-  async function getRuleById(id: string) {
-    let rules = data;
-    if (!data) {
-      const res = await refetch();
-      rules = res.data;
-    }
-    return rules?.find((rule) => rule.ruleId === id);
-  }
-
-  // Function to sort rules by name or status
-  function sortRules(condition: string) {
-    const sorted = [...(data || [])].sort((a, b) => {
-      switch (condition) {
-        case 'NAME':
-          return a.ruleName.localeCompare(b.ruleName);
-        case 'STATUS':
-          // Assuming 'disabled' is boolean; false is active, true is disabled
-          const statusA = a.disabled ? 1 : -1;
-          const statusB = b.disabled ? 1 : -1;
-          return statusA - statusB;
-        default:
-          return 0;
-      }
-    });
-
-    setSortedRules(sorted);
-  }
-
-  // Function to toggle the disabled status of a rule
-  async function toggleRuleStatus(
-    ids: string[],
-    disabled: boolean
-  ): Promise<boolean> {
-    for (const id of ids) {
-      const rule = await getRuleById(id);
-      if (rule && rule.disabled !== disabled) {
-        const body = {
-          id,
-          data: {
-            ...rule,
-            disabled,
-          },
-        };
-        try {
-          await updateRule(body);
-        } catch (error) {
-          return Promise.reject(false);
-        }
-      }
-    }
-    setTimeout(async () => {
-      const res = await refetch();
-      setSortedRules(res.data || []);
-    }, 1000);
-
-    return Promise.resolve(true);
-  }
-
-  // Function to handle refreshing the list of rules
-  async function handleRulesRefresh() {
-    const res = await refetch();
-    setSortedRules(res.data || []);
-  }
-
-  // Create a new rule
-  async function addRule(rule: InstrumentationRuleSpec) {
-    try {
-      await createRule(rule);
-      await handleRulesRefresh();
-    } catch (error) {
-      console.error('Error creating rule:', error);
-    }
-  }
-
-  // Delete a rule by ID
-  async function removeRule(id: string) {
-    try {
-      await deleteRule(id);
-      await handleRulesRefresh();
-    } catch (error) {
-      console.error('Error deleting rule:', error);
-    }
-  }
-
-  return {
-    isLoading,
-    rules: sortedRules || [],
-    addRule,
-    updateRule,
-    removeRule,
-    sortRules,
-    getRuleById,
-    toggleRuleStatus,
-    refetch: handleRulesRefresh,
-  };
-}
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
index 082be89fc..4aef1127f 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts
@@ -1,5 +1,5 @@
 import { useDrawerStore } from '@/store';
-import { useNotify } from '../useNotify';
+import { useNotify } from '../notification/useNotify';
 import { useMutation } from '@apollo/client';
 import { useComputePlatform } from '../compute-platform';
 import { ACTION, deriveTypeFromRule, getSseTargetFromId, NOTIFICATION } from '@/utils';
@@ -38,7 +38,9 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
     params?.onSuccess?.();
   };
 
-  const [createInstrumentationRule, cState] = useMutation<{ createInstrumentationRule: { ruleId: string } }>(CREATE_INSTRUMENTATION_RULE, {
+  const [createInstrumentationRule, cState] = useMutation<{
+    createInstrumentationRule: { ruleId: string };
+  }>(CREATE_INSTRUMENTATION_RULE, {
     onError: (error) => handleError(ACTION.CREATE, error.message),
     onCompleted: (res, req) => {
       const id = res.createInstrumentationRule.ruleId;
@@ -46,7 +48,9 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
       handleComplete(ACTION.CREATE, `instrumentation rule "${name}" was created`, id);
     },
   });
-  const [updateInstrumentationRule, uState] = useMutation<{ updateInstrumentationRule: { ruleId: string } }>(UPDATE_INSTRUMENTATION_RULE, {
+  const [updateInstrumentationRule, uState] = useMutation<{
+    updateInstrumentationRule: { ruleId: string };
+  }>(UPDATE_INSTRUMENTATION_RULE, {
     onError: (error) => handleError(ACTION.UPDATE, error.message),
     onCompleted: (res, req) => {
       const id = res.updateInstrumentationRule.ruleId;
@@ -54,7 +58,9 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
       handleComplete(ACTION.UPDATE, `instrumentation rule "${name}" was updated`, id);
     },
   });
-  const [deleteInstrumentationRule, dState] = useMutation<{ deleteInstrumentationRule: boolean }>(DELETE_INSTRUMENTATION_RULE, {
+  const [deleteInstrumentationRule, dState] = useMutation<{
+    deleteInstrumentationRule: boolean;
+  }>(DELETE_INSTRUMENTATION_RULE, {
     onError: (error) => handleError(ACTION.DELETE, error.message),
     onCompleted: (res, req) => {
       const id = req?.variables?.ruleId;
diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
index b99b2b66e..0a4719485 100644
--- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
+++ b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleFormData.ts
@@ -1,8 +1,12 @@
 import { useState } from 'react';
-import { useNotify } from '../useNotify';
+import { useNotify } from '../notification/useNotify';
 import type { DrawerBaseItem } from '@/store';
 import { ACTION, FORM_ALERTS, NOTIFICATION } from '@/utils';
-import { PayloadCollectionType, type InstrumentationRuleInput, type InstrumentationRuleSpec } from '@/types';
+import {
+  PayloadCollectionType,
+  type InstrumentationRuleInput,
+  type InstrumentationRuleSpec,
+} from '@/types';
 
 const INITIAL: InstrumentationRuleInput = {
   ruleName: '',
@@ -39,7 +43,9 @@ export function useInstrumentationRuleFormData() {
     Object.entries(formData).forEach(([k, v]) => {
       switch (k) {
         case 'payloadCollection':
-          const hasNoneSelected = !Object.values(v as InstrumentationRuleInput['payloadCollection']).filter((val) => !!val).length;
+          const hasNoneSelected = !Object.values(
+            v as InstrumentationRuleInput['payloadCollection']
+          ).filter((val) => !!val).length;
           ok = !hasNoneSelected;
           break;
 
@@ -60,7 +66,8 @@ export function useInstrumentationRuleFormData() {
   };
 
   const loadFormWithDrawerItem = (drawerItem: DrawerBaseItem) => {
-    const { ruleName, notes, disabled, payloadCollection } = drawerItem.item as InstrumentationRuleSpec;
+    const { ruleName, notes, disabled, payloadCollection } =
+      drawerItem.item as InstrumentationRuleSpec;
 
     const updatedData: InstrumentationRuleInput = {
       ...INITIAL,
@@ -71,10 +78,26 @@ export function useInstrumentationRuleFormData() {
 
     if (payloadCollection) {
       updatedData['payloadCollection'] = {
-        [PayloadCollectionType.HTTP_REQUEST]: !!payloadCollection[PayloadCollectionType.HTTP_REQUEST] ? {} : null,
-        [PayloadCollectionType.HTTP_RESPONSE]: !!payloadCollection[PayloadCollectionType.HTTP_RESPONSE] ? {} : null,
-        [PayloadCollectionType.DB_QUERY]: !!payloadCollection[PayloadCollectionType.DB_QUERY] ? {} : null,
-        [PayloadCollectionType.MESSAGING]: !!payloadCollection[PayloadCollectionType.MESSAGING] ? {} : null,
+        [PayloadCollectionType.HTTP_REQUEST]: !!payloadCollection[
+          PayloadCollectionType.HTTP_REQUEST
+        ]
+          ? {}
+          : null,
+        [PayloadCollectionType.HTTP_RESPONSE]: !!payloadCollection[
+          PayloadCollectionType.HTTP_RESPONSE
+        ]
+          ? {}
+          : null,
+        [PayloadCollectionType.DB_QUERY]: !!payloadCollection[
+          PayloadCollectionType.DB_QUERY
+        ]
+          ? {}
+          : null,
+        [PayloadCollectionType.MESSAGING]: !!payloadCollection[
+          PayloadCollectionType.MESSAGING
+        ]
+          ? {}
+          : null,
       };
     }
 
diff --git a/frontend/webapp/hooks/notification/index.ts b/frontend/webapp/hooks/notification/index.ts
new file mode 100644
index 000000000..becc872a6
--- /dev/null
+++ b/frontend/webapp/hooks/notification/index.ts
@@ -0,0 +1,2 @@
+export * from './useNotify';
+export * from './useSSE';
diff --git a/frontend/webapp/hooks/useNotify.ts b/frontend/webapp/hooks/notification/useNotify.ts
similarity index 100%
rename from frontend/webapp/hooks/useNotify.ts
rename to frontend/webapp/hooks/notification/useNotify.ts
diff --git a/frontend/webapp/hooks/useSSE.ts b/frontend/webapp/hooks/notification/useSSE.ts
similarity index 82%
rename from frontend/webapp/hooks/useSSE.ts
rename to frontend/webapp/hooks/notification/useSSE.ts
index 26a47a45e..d307cdb85 100644
--- a/frontend/webapp/hooks/useSSE.ts
+++ b/frontend/webapp/hooks/notification/useSSE.ts
@@ -26,7 +26,10 @@ export function useSSE() {
         };
 
         // Check if the event is already in the buffer
-        if (eventBuffer.current[key] && eventBuffer.current[key].id > Date.now() - 2000) {
+        if (
+          eventBuffer.current[key] &&
+          eventBuffer.current[key].id > Date.now() - 2000
+        ) {
           eventBuffer.current[key] = notification;
           return;
         } else {
@@ -55,7 +58,10 @@ export function useSSE() {
         setRetryCount((prevRetryCount) => {
           if (prevRetryCount < maxRetries) {
             const newRetryCount = prevRetryCount + 1;
-            const retryTimeout = Math.min(10000, 1000 * Math.pow(2, newRetryCount));
+            const retryTimeout = Math.min(
+              10000,
+              1000 * Math.pow(2, newRetryCount)
+            );
 
             setTimeout(() => {
               connect();
@@ -63,12 +69,15 @@ export function useSSE() {
 
             return newRetryCount;
           } else {
-            console.error('Max retries reached. Could not reconnect to EventSource.');
+            console.error(
+              'Max retries reached. Could not reconnect to EventSource.'
+            );
 
             notify({
               type: NOTIFICATION.ERROR,
               title: 'Connection Error',
-              message: 'Connection to the server failed. Please reboot the application.',
+              message:
+                'Connection to the server failed. Please reboot the application.',
             });
 
             return prevRetryCount;
diff --git a/frontend/webapp/hooks/setup/index.ts b/frontend/webapp/hooks/setup/index.ts
index 31100a828..34949e277 100644
--- a/frontend/webapp/hooks/setup/index.ts
+++ b/frontend/webapp/hooks/setup/index.ts
@@ -1,2 +1 @@
-export * from './useConnect';
 export * from './useConnectEnv';
diff --git a/frontend/webapp/hooks/setup/useConnect.ts b/frontend/webapp/hooks/setup/useConnect.ts
deleted file mode 100644
index 331be8a80..000000000
--- a/frontend/webapp/hooks/setup/useConnect.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { NOTIFICATION, ROUTES, SETUP } from '@/utils';
-import { useMutation } from 'react-query';
-import { setDestination } from '@/services';
-import { useSelector } from 'react-redux';
-import { useRouter } from 'next/navigation';
-import { useSources } from '../sources';
-
-export function useConnect() {
-  const router = useRouter();
-
-  const { upsertSources } = useSources();
-  const { mutateAsync } = useMutation(setDestination);
-  const sectionData = useSelector(({ app }) => app.sources);
-
-  const connect = async (body) => {
-    try {
-      await upsertSources({
-        sectionData,
-        onSuccess: () => {},
-        onError: null,
-      });
-
-      await mutateAsync(body, {
-        onSuccess: () => router.push(`${ROUTES.OVERVIEW}?poll=true`),
-        onError: () => {},
-      });
-    } catch (error) {}
-  };
-
-  return { connect };
-}
diff --git a/frontend/webapp/hooks/sources/index.ts b/frontend/webapp/hooks/sources/index.ts
index c98e0a1d7..50af77f92 100644
--- a/frontend/webapp/hooks/sources/index.ts
+++ b/frontend/webapp/hooks/sources/index.ts
@@ -1,4 +1,3 @@
-export * from './useSources';
 export * from './useConnectSourcesMenuState';
 export * from './useConnectSourcesList';
 export * from './useSourceCRUD';
diff --git a/frontend/webapp/hooks/sources/useSourceCRUD.ts b/frontend/webapp/hooks/sources/useSourceCRUD.ts
index 67b7543de..d2cacb301 100644
--- a/frontend/webapp/hooks/sources/useSourceCRUD.ts
+++ b/frontend/webapp/hooks/sources/useSourceCRUD.ts
@@ -1,10 +1,10 @@
 import { useDrawerStore } from '@/store';
-import { useNotify } from '../useNotify';
 import { useMutation } from '@apollo/client';
 import { ACTION, getSseTargetFromId, NOTIFICATION } from '@/utils';
 import { PERSIST_SOURCE, UPDATE_K8S_ACTUAL_SOURCE } from '@/graphql';
 import { useComputePlatform, useNamespace } from '../compute-platform';
 import { OVERVIEW_ENTITY_TYPES, type WorkloadId, type NotificationType, type PatchSourceRequestInput, type K8sActualSource } from '@/types';
+import { useNotify } from '../notification';
 
 interface Params {
   onSuccess?: () => void;
diff --git a/frontend/webapp/hooks/sources/useSources.ts b/frontend/webapp/hooks/sources/useSources.ts
deleted file mode 100644
index 4ac00f4a9..000000000
--- a/frontend/webapp/hooks/sources/useSources.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import { QUERIES } from '@/utils/constants';
-import {
-  SelectedSources,
-  ManagedSource,
-  SourceSortOptions,
-  Namespace,
-} from '@/types';
-import { useMutation, useQuery } from 'react-query';
-import {
-  deleteSource,
-  getNamespaces,
-  getSources,
-  setNamespaces,
-} from '@/services';
-import { useEffect, useState } from 'react';
-
-export function useSources() {
-  const [instrumentedNamespaces, setInstrumentedNamespaces] = useState<
-    Namespace[]
-  >([]);
-  const {
-    data: sources,
-    isLoading,
-    refetch: refetchSources,
-  } = useQuery<ManagedSource[]>([QUERIES.API_SOURCES], getSources);
-
-  const { data: namespaces } = useQuery<{ namespaces: Namespace[] }>(
-    [QUERIES.API_NAMESPACES],
-    getNamespaces
-  );
-
-  const { mutate: deleteSourceMutation } = useMutation(
-    ({
-      namespace,
-      kind,
-      name,
-    }: {
-      namespace: string;
-      kind: string;
-      name: string;
-    }) => deleteSource(namespace, kind, name)
-  );
-
-  useEffect(() => {
-    if (namespaces?.namespaces && sources) {
-      const instrumented = namespaces.namespaces.map((item) => {
-        const totalApps =
-          sources?.filter((source) => source.namespace === item.name).length ||
-          0;
-        return {
-          ...item,
-          totalApps,
-          selected: false,
-        };
-      });
-
-      setInstrumentedNamespaces(instrumented);
-    }
-  }, [namespaces, sources]);
-
-  const [sortedSources, setSortedSources] = useState<
-    ManagedSource[] | undefined
-  >(undefined);
-
-  const { mutateAsync } = useMutation((body: SelectedSources) =>
-    setNamespaces(body)
-  );
-
-  useEffect(() => {
-    const data = sources?.sort((a, b) => a.name.localeCompare(b.name));
-    setSortedSources(data || []);
-  }, [sources]);
-
-  async function upsertSources({ sectionData, onSuccess, onError }) {
-    // Create a set of unique identifiers (name + namespace) for the sources
-    const sourceIdentifiersSet = new Set(
-      sources?.map(
-        (source: ManagedSource) =>
-          `${source.name}:${source.namespace}:${source.kind}`
-      )
-    );
-
-    const updatedSectionData: SelectedSources = {};
-
-    for (const key in sectionData) {
-      const { objects, ...rest } = sectionData[key];
-      const updatedObjects = objects.map((item) => {
-        // Create a unique identifier for the current item
-        const itemIdentifier = `${item.name}:${key}:${item.kind}`;
-        return {
-          ...item,
-          selected: item?.selected || sourceIdentifiersSet.has(itemIdentifier),
-        };
-      });
-
-      updatedSectionData[key] = {
-        ...rest,
-        objects: updatedObjects,
-      };
-    }
-
-    try {
-      await mutateAsync(updatedSectionData);
-      if (onSuccess) {
-        onSuccess();
-      }
-    } catch (error) {
-      if (onError) {
-        onError(error);
-      }
-    }
-  }
-
-  async function deleteSourcesHandler(sources: ManagedSource[]) {
-    const promises = sources.map((source) =>
-      deleteSourceMutation({
-        namespace: source.namespace,
-        kind: source.kind,
-        name: source.name,
-      })
-    );
-    try {
-      await Promise.all(promises);
-      setTimeout(() => {
-        refetchSources();
-      }, 1000);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  function sortSources(condition: string) {
-    const sorted = [...(sources || [])].sort((a, b) => {
-      switch (condition) {
-        case SourceSortOptions.NAME:
-          return a.name.localeCompare(b.name);
-        case SourceSortOptions.NAMESPACE:
-          return a.namespace.localeCompare(b.namespace);
-        case SourceSortOptions.KIND:
-          return a.kind.localeCompare(b.kind);
-        case SourceSortOptions.LANGUAGE:
-          const aLanguage =
-            a.instrumented_application_details?.languages?.[0]?.language || '';
-          const bLanguage =
-            b.instrumented_application_details?.languages?.[0]?.language || '';
-          return aLanguage.localeCompare(bLanguage);
-        default:
-          return 0;
-      }
-    });
-    setSortedSources(sorted);
-  }
-
-  function filterSourcesByNamespace(namespaces: string[]) {
-    const filtered = sources?.filter((source) =>
-      namespaces.includes(source.namespace)
-    );
-    setSortedSources(filtered);
-  }
-
-  function filterSourcesByLanguage(languages: string[]) {
-    const filtered = sources?.filter((source) =>
-      languages.includes(
-        source.instrumented_application_details?.languages?.[0]?.language || ''
-      )
-    );
-    setSortedSources(filtered);
-  }
-
-  function filterSourcesByKind(kind: string[]) {
-    const filtered = sources?.filter((source) =>
-      kind.includes(source.kind.toLowerCase())
-    );
-
-    setSortedSources(filtered);
-  }
-
-  function filterByConditionMessage(message: string[]) {
-    const sourcesWithCondition = sources?.filter((deployment) =>
-      deployment.instrumented_application_details.conditions.some(
-        (condition) => condition.status === 'False'
-      )
-    );
-
-    const filteredSources = sourcesWithCondition?.filter((deployment) =>
-      deployment.instrumented_application_details.conditions.some((condition) =>
-        message.includes(condition.message)
-      )
-    );
-
-    setSortedSources(filteredSources || []);
-  }
-
-  const filterByConditionStatus = (status: 'All' | 'True' | 'False') => {
-    if (status === 'All') {
-      setSortedSources(sources);
-      return;
-    }
-
-    const filteredSources = sources?.filter((deployment) =>
-      deployment?.instrumented_application_details?.conditions.some(
-        (condition) => condition?.status === status
-      )
-    );
-
-    setSortedSources(filteredSources || []);
-  };
-
-  const groupErrorMessages = (): string[] => {
-    const errorMessagesSet: Set<string> = new Set();
-
-    sources?.forEach((deployment) => {
-      deployment.instrumented_application_details?.conditions
-        .filter((condition) => condition.status === 'False')
-        .forEach((condition) => {
-          errorMessagesSet.add(condition.message); // Using Set to avoid duplicates
-        });
-    });
-
-    return Array.from(errorMessagesSet);
-  };
-
-  return {
-    upsertSources,
-    refetchSources,
-    sources: sortedSources || [],
-    isLoading,
-    sortSources,
-    filterSourcesByNamespace,
-    filterSourcesByLanguage,
-    filterSourcesByKind,
-    instrumentedNamespaces,
-    namespaces: namespaces?.namespaces || [],
-    deleteSourcesHandler,
-    filterByConditionStatus,
-    groupErrorMessages,
-    filterByConditionMessage,
-  };
-}
diff --git a/frontend/webapp/hooks/useNotification.tsx b/frontend/webapp/hooks/useNotification.tsx
deleted file mode 100644
index f0bd512db..000000000
--- a/frontend/webapp/hooks/useNotification.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-import { useState } from 'react';
-import { KeyvalNotification } from '@/design.system';
-
-export function useNotification() {
-  const [data, show] = useState<any>(false);
-
-  function Notification() {
-    return data && <KeyvalNotification {...data} onClose={() => show(false)} />;
-  }
-
-  return { show, Notification };
-}
diff --git a/frontend/webapp/hooks/useOverviewMetrics.ts b/frontend/webapp/hooks/useOverviewMetrics.ts
deleted file mode 100644
index 527082aea..000000000
--- a/frontend/webapp/hooks/useOverviewMetrics.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useQuery } from 'react-query';
-import { getOverviewMetrics } from '@/services/metrics';
-
-export function useOverviewMetrics() {
-  const { data: metrics } = useQuery([], getOverviewMetrics, {
-    refetchInterval: 5000,
-  });
-
-  return { metrics };
-}
diff --git a/frontend/webapp/hooks/useSectionData.tsx b/frontend/webapp/hooks/useSectionData.tsx
deleted file mode 100644
index cfea9b52a..000000000
--- a/frontend/webapp/hooks/useSectionData.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useMemo, useState } from 'react';
-
-export function useSectionData(initialData) {
-  const [sectionData, setSectionData] = useState(initialData);
-
-  const totalSelected = useMemo(() => {
-    let total = 0;
-    for (const key in sectionData) {
-      const apps = sectionData[key]?.objects;
-      const counter = apps?.filter(
-        (item) => item.selected && !item.app_instrumentation_labeled
-      )?.length;
-      total += counter;
-    }
-
-    return total;
-  }, [JSON.stringify(sectionData)]);
-
-  return { sectionData, setSectionData, totalSelected };
-}
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 1b5776f5a..3ef13f056 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,6 +1,12 @@
 import theme from '@/styles/theme';
 import { Node, Edge } from 'react-flow-renderer';
-import { extractMonitors, formatBytes, getActionIcon, getRuleIcon, getValueForRange } from '@/utils';
+import {
+  extractMonitors,
+  formatBytes,
+  getActionIcon,
+  getRuleIcon,
+  getValueForRange,
+} from '@/utils';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
 import {
   OVERVIEW_ENTITY_TYPES,
@@ -17,13 +23,24 @@ import {
 const HEADER_ICON_PATH = '/icons/overview/';
 
 const getHealthStatus = (item: K8sActualSource | ActualDestination) => {
-  const conditions = (item as K8sActualSource)?.instrumentedApplicationDetails?.conditions || (item as ActualDestination)?.conditions;
-  const isUnhealthy = !conditions?.length || !!conditions.find(({ status }) => status === 'False');
+  const conditions =
+    (item as K8sActualSource)?.instrumentedApplicationDetails?.conditions ||
+    (item as ActualDestination)?.conditions;
+  const isUnhealthy =
+    !conditions?.length ||
+    !!conditions.find(({ status }) => status === 'False');
 
   return isUnhealthy ? STATUSES.UNHEALTHY : STATUSES.HEALTHY;
 };
 
-const createNode = (nodeId: string, nodeType: string, x: number, y: number, data: Record<string, any>, style?: React.CSSProperties): Node => {
+const createNode = (
+  nodeId: string,
+  nodeType: string,
+  x: number,
+  y: number,
+  data: Record<string, any>,
+  style?: React.CSSProperties
+): Node => {
   // const [columnType] = nodeId.split('-');
 
   return {
@@ -140,36 +157,54 @@ export const buildNodesAndEdges = ({
       }),
     ],
     destinations: [
-      createNode('destination-header', 'header', postions['destinations']['x'], 0, {
-        icon: `${HEADER_ICON_PATH}destinations.svg`,
-        title: 'Destinations',
-        tagValue: destinations.length,
-      }),
+      createNode(
+        'destination-header',
+        'header',
+        postions['destinations']['x'],
+        0,
+        {
+          icon: `${HEADER_ICON_PATH}destinations.svg`,
+          title: 'Destinations',
+          tagValue: destinations.length,
+        }
+      ),
     ],
   };
 
   // Build Rules Nodes
   if (!rules.length) {
     tempNodes['rules'].push(
-      createNode('rule-0', 'add', postions['rules']['x'], postions['rules']['y'](), {
-        type: OVERVIEW_NODE_TYPES.ADD_RULE,
-        status: STATUSES.HEALTHY,
-        title: 'ADD RULE',
-        subTitle: 'Add first rule to modify the OpenTelemetry data',
-      })
+      createNode(
+        'rule-0',
+        'add',
+        postions['rules']['x'],
+        postions['rules']['y'](),
+        {
+          type: OVERVIEW_NODE_TYPES.ADD_RULE,
+          status: STATUSES.HEALTHY,
+          title: 'ADD RULE',
+          subTitle: 'Add first rule to modify the OpenTelemetry data',
+        }
+      )
     );
   } else {
     rules.forEach((rule, idx) => {
       tempNodes['rules'].push(
-        createNode(`rule-${idx}`, 'base', postions['rules']['x'], postions['rules']['y'](idx), {
-          id: rule.ruleId,
-          type: OVERVIEW_ENTITY_TYPES.RULE,
-          status: STATUSES.HEALTHY,
-          title: rule.ruleName || rule.type,
-          subTitle: rule.type,
-          imageUri: getRuleIcon(rule.type),
-          isActive: !rule.disabled,
-        })
+        createNode(
+          `rule-${idx}`,
+          'base',
+          postions['rules']['x'],
+          postions['rules']['y'](idx),
+          {
+            id: rule.ruleId,
+            type: OVERVIEW_ENTITY_TYPES.RULE,
+            status: STATUSES.HEALTHY,
+            title: rule.ruleName || rule.type,
+            subTitle: rule.type,
+            imageUri: getRuleIcon(rule.type),
+            isActive: !rule.disabled,
+          }
+        )
       );
     });
   }
@@ -177,29 +212,50 @@ export const buildNodesAndEdges = ({
   // Build Source Nodes
   if (!sources.length) {
     tempNodes['sources'].push(
-      createNode('source-0', 'add', postions['sources']['x'], postions['rules']['y'](), {
-        type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
-        status: STATUSES.HEALTHY,
-        title: 'ADD SOURCE',
-        subTitle: 'Add first source to collect OpenTelemetry data',
-      })
+      createNode(
+        'source-0',
+        'add',
+        postions['sources']['x'],
+        postions['rules']['y'](),
+        {
+          type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
+          status: STATUSES.HEALTHY,
+          title: 'ADD SOURCE',
+          subTitle: 'Add first source to collect OpenTelemetry data',
+        }
+      )
     );
   } else {
     sources.forEach((source, idx) => {
       const metric = metrics?.getOverviewMetrics.sources.find(
-        ({ kind, name, namespace }) => kind === source.kind && name === source.name && namespace === source.namespace
+        ({ kind, name, namespace }) =>
+          kind === source.kind &&
+          name === source.name &&
+          namespace === source.namespace
       );
 
       tempNodes['sources'].push(
-        createNode(`source-${idx}`, 'base', postions['sources']['x'], postions['rules']['y'](idx), {
-          id: { kind: source.kind, name: source.name, namespace: source.namespace },
-          type: OVERVIEW_ENTITY_TYPES.SOURCE,
-          status: getHealthStatus(source),
-          title: source.name + (source.reportedName ? ` (${source.reportedName})` : ''),
-          subTitle: source.kind,
-          imageUri: getMainContainerLanguageLogo(source),
-          metric,
-        })
+        createNode(
+          `source-${idx}`,
+          'base',
+          postions['sources']['x'],
+          postions['rules']['y'](idx),
+          {
+            id: {
+              kind: source.kind,
+              name: source.name,
+              namespace: source.namespace,
+            },
+            type: OVERVIEW_ENTITY_TYPES.SOURCE,
+            status: getHealthStatus(source),
+            title:
+              source.name +
+              (source.reportedName ? ` (${source.reportedName})` : ''),
+            subTitle: source.kind,
+            imageUri: getMainContainerLanguageLogo(source),
+            metric,
+          }
+        )
       );
     });
   }
@@ -207,28 +263,43 @@ export const buildNodesAndEdges = ({
   // Build Action Nodes
   if (!actions.length) {
     tempNodes['actions'].push(
-      createNode('action-0', 'add', postions['actions']['x'], postions['rules']['y'](), {
-        type: OVERVIEW_NODE_TYPES.ADD_ACTION,
-        status: STATUSES.HEALTHY,
-        title: 'ADD ACTION',
-        subTitle: 'Add first action to modify the OpenTelemetry data',
-      })
+      createNode(
+        'action-0',
+        'add',
+        postions['actions']['x'],
+        postions['rules']['y'](),
+        {
+          type: OVERVIEW_NODE_TYPES.ADD_ACTION,
+          status: STATUSES.HEALTHY,
+          title: 'ADD ACTION',
+          subTitle: 'Add first action to modify the OpenTelemetry data',
+        }
+      )
     );
   } else {
     actions.forEach((action, idx) => {
-      const spec: ActionItem = typeof action.spec === 'string' ? JSON.parse(action.spec) : (action.spec as ActionItem);
+      const spec: ActionItem =
+        typeof action.spec === 'string'
+          ? JSON.parse(action.spec)
+          : (action.spec as ActionItem);
 
       tempNodes['actions'].push(
-        createNode(`action-${idx}`, 'base', postions['actions']['x'], postions['rules']['y'](idx), {
-          id: action.id,
-          type: OVERVIEW_ENTITY_TYPES.ACTION,
-          status: STATUSES.HEALTHY,
-          title: spec.actionName || action.type,
-          subTitle: action.type,
-          imageUri: getActionIcon(action.type),
-          monitors: spec.signals,
-          isActive: !spec.disabled,
-        })
+        createNode(
+          `action-${idx}`,
+          'base',
+          postions['actions']['x'],
+          postions['rules']['y'](idx),
+          {
+            id: action.id,
+            type: OVERVIEW_ENTITY_TYPES.ACTION,
+            status: STATUSES.HEALTHY,
+            title: spec.actionName || action.type,
+            subTitle: action.type,
+            imageUri: getActionIcon(action.type),
+            monitors: spec.signals,
+            isActive: !spec.disabled,
+          }
+        )
       );
     });
 
@@ -259,28 +330,42 @@ export const buildNodesAndEdges = ({
   // Build Destination Nodes
   if (!destinations.length) {
     tempNodes['destinations'].push(
-      createNode('destination-0', 'add', postions['destinations']['x'], postions['rules']['y'](), {
-        type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
-        status: STATUSES.HEALTHY,
-        title: 'ADD DESTIONATION',
-        subTitle: 'Add first destination to monitor OpenTelemetry data',
-      })
+      createNode(
+        'destination-0',
+        'add',
+        postions['destinations']['x'],
+        postions['rules']['y'](),
+        {
+          type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
+          status: STATUSES.HEALTHY,
+          title: 'ADD DESTIONATION',
+          subTitle: 'Add first destination to monitor OpenTelemetry data',
+        }
+      )
     );
   } else {
     destinations.forEach((destination, idx) => {
-      const metric = metrics?.getOverviewMetrics.destinations.find(({ id }) => id === destination.id);
+      const metric = metrics?.getOverviewMetrics.destinations.find(
+        ({ id }) => id === destination.id
+      );
 
       tempNodes['destinations'].push(
-        createNode(`destination-${idx}`, 'base', postions['destinations']['x'], postions['rules']['y'](idx), {
-          id: destination.id,
-          type: OVERVIEW_ENTITY_TYPES.DESTINATION,
-          status: getHealthStatus(destination),
-          title: destination.name || destination.destinationType.displayName,
-          subTitle: destination.destinationType.displayName,
-          imageUri: destination.destinationType.imageUrl,
-          monitors: extractMonitors(destination.exportedSignals),
-          metric,
-        })
+        createNode(
+          `destination-${idx}`,
+          'base',
+          postions['destinations']['x'],
+          postions['rules']['y'](idx),
+          {
+            id: destination.id,
+            type: OVERVIEW_ENTITY_TYPES.DESTINATION,
+            status: getHealthStatus(destination),
+            title: destination.name || destination.destinationType.displayName,
+            subTitle: destination.destinationType.displayName,
+            imageUri: destination.destinationType.imageUrl,
+            monitors: extractMonitors(destination.exportedSignals),
+            metric,
+          }
+        )
       );
     });
   }
@@ -310,7 +395,9 @@ export const buildNodesAndEdges = ({
   if (!!actions.length) {
     actions.forEach((_, sourceActionIndex) => {
       const targetActionIndex = sourceActionIndex + 1;
-      edges.push(createEdge(`action-${sourceActionIndex}-to-action-${targetActionIndex}`));
+      edges.push(
+        createEdge(`action-${sourceActionIndex}-to-action-${targetActionIndex}`)
+      );
     });
   }
 
@@ -324,12 +411,15 @@ export const buildNodesAndEdges = ({
         const actionIndex = actions.length ? 'group' : 0;
 
         edges.push(
-          createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, {
-            animated: true,
-            isMultiTarget: true,
-            label: formatBytes(node.data.metric?.throughput),
-            isError: node.data.status === STATUSES.UNHEALTHY,
-          })
+          createEdge(
+            `action-${actionIndex}-to-destination-${destinationIndex}`,
+            {
+              animated: false,
+              isMultiTarget: true,
+              label: formatBytes(node.data.metric?.throughput),
+              isError: node.data.status === STATUSES.UNHEALTHY,
+            }
+          )
         );
       }
     });
diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx
index 5dce50bc2..1d1f31b74 100644
--- a/frontend/webapp/utils/constants/routes.tsx
+++ b/frontend/webapp/utils/constants/routes.tsx
@@ -1,6 +1,7 @@
 export const ROUTES = {
   SETUP: '/setup',
   OVERVIEW: '/overview',
+  APP: '/',
   SOURCES: '/sources',
   INSTRUMENTATION_RULES: '/instrumentation-rules',
   DESTINATIONS: '/destinations',

From f32923b071526b6e32e4c6171758262fc39e5016 Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Sun, 10 Nov 2024 15:40:26 +0200
Subject: [PATCH 347/374] [GEN-1680]: added new "toggle buttons" component
 (#1723)

---
 .../main/actions/choose-action-body/index.tsx | 25 +----
 .../choose-rule-body/index.tsx                | 15 +--
 .../public/icons/common/circled-check.svg     |  8 ++
 .../public/icons/common/circled-cross.svg     |  8 ++
 frontend/webapp/reuseable-components/index.ts |  1 +
 .../toggle-buttons/index.tsx                  | 97 +++++++++++++++++++
 .../reuseable-components/toggle/index.tsx     | 25 ++---
 frontend/webapp/styles/theme.ts               |  3 +-
 8 files changed, 137 insertions(+), 45 deletions(-)
 create mode 100644 frontend/webapp/public/icons/common/circled-check.svg
 create mode 100644 frontend/webapp/public/icons/common/circled-cross.svg
 create mode 100644 frontend/webapp/reuseable-components/toggle-buttons/index.tsx

diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
index 12550a740..5ce4e78c3 100644
--- a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { type ActionInput } from '@/types';
 import ActionCustomFields from './custom-fields';
 import { type ActionOption } from '../choose-action-modal/action-options';
-import { DocsButton, Input, Text, TextArea, Toggle, MonitoringCheckboxes, SectionTitle } from '@/reuseable-components';
+import { DocsButton, Input, Text, TextArea, MonitoringCheckboxes, SectionTitle, ToggleButtons } from '@/reuseable-components';
 
 const FieldWrapper = styled.div`
   width: 100%;
@@ -27,34 +27,19 @@ const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ isUpdate, action
       {isUpdate && (
         <FieldWrapper>
           <FieldTitle>Status</FieldTitle>
-          <Toggle
-            title={!formData.disable ? 'Active' : 'Inactive'}
-            initialValue={!formData.disable}
-            onChange={(bool) => handleFormChange('disable', !bool)}
-          />
+          <ToggleButtons initialValue={!formData.disable} onChange={(bool) => handleFormChange('disable', !bool)} />
         </FieldWrapper>
       )}
 
-      {!isUpdate && (
-        <SectionTitle title='' description={action.docsDescription as string} actionButton={<DocsButton endpoint={action.docsEndpoint} />} />
-      )}
+      {!isUpdate && <SectionTitle title='' description={action.docsDescription as string} actionButton={<DocsButton endpoint={action.docsEndpoint} />} />}
 
       <FieldWrapper>
-        <MonitoringCheckboxes
-          allowedSignals={action.allowedSignals}
-          selectedSignals={formData.signals}
-          setSelectedSignals={(value) => handleFormChange('signals', value)}
-        />
+        <MonitoringCheckboxes allowedSignals={action.allowedSignals} selectedSignals={formData.signals} setSelectedSignals={(value) => handleFormChange('signals', value)} />
       </FieldWrapper>
 
       {!isUpdate && (
         <FieldWrapper>
-          <Input
-            title='Action name'
-            placeholder='Use a name that describes the action'
-            value={formData.name}
-            onChange={({ target: { value } }) => handleFormChange('name', value)}
-          />
+          <Input title='Action name' placeholder='Use a name that describes the action' value={formData.name} onChange={({ target: { value } }) => handleFormChange('name', value)} />
         </FieldWrapper>
       )}
 
diff --git a/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx b/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx
index d4e29eb1d..0e2070eb1 100644
--- a/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx
+++ b/frontend/webapp/containers/main/instrumentation-rules/choose-rule-body/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import RuleCustomFields from './custom-fields';
 import type { InstrumentationRuleInput } from '@/types';
 import type { RuleOption } from '../add-rule-modal/rule-options';
-import { DocsButton, Input, Text, TextArea, Toggle, SectionTitle } from '@/reuseable-components';
+import { DocsButton, Input, Text, TextArea, SectionTitle, ToggleButtons } from '@/reuseable-components';
 
 const FieldWrapper = styled.div`
   width: 100%;
@@ -27,11 +27,7 @@ const ChooseRuleBody: React.FC<Props> = ({ isUpdate, rule, formData, handleFormC
       {isUpdate && (
         <FieldWrapper>
           <FieldTitle>Status</FieldTitle>
-          <Toggle
-            title={!formData.disabled ? 'Active' : 'Inactive'}
-            initialValue={!formData.disabled}
-            onChange={(bool) => handleFormChange('disabled', !bool)}
-          />
+          <ToggleButtons initialValue={!formData.disabled} onChange={(bool) => handleFormChange('disabled', !bool)} />
         </FieldWrapper>
       )}
 
@@ -39,12 +35,7 @@ const ChooseRuleBody: React.FC<Props> = ({ isUpdate, rule, formData, handleFormC
 
       {!isUpdate && (
         <FieldWrapper>
-          <Input
-            title='Rule name'
-            placeholder='Use a name that describes the rule'
-            value={formData.ruleName}
-            onChange={({ target: { value } }) => handleFormChange('ruleName', value)}
-          />
+          <Input title='Rule name' placeholder='Use a name that describes the rule' value={formData.ruleName} onChange={({ target: { value } }) => handleFormChange('ruleName', value)} />
         </FieldWrapper>
       )}
 
diff --git a/frontend/webapp/public/icons/common/circled-check.svg b/frontend/webapp/public/icons/common/circled-check.svg
new file mode 100644
index 000000000..b5db32751
--- /dev/null
+++ b/frontend/webapp/public/icons/common/circled-check.svg
@@ -0,0 +1,8 @@
+<svg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M6.41707 8.34197L7.97787 9.90111C8.72855 8.58846 9.76744 7.46337 11.0162 6.61065L11.0837 6.56453M14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.75039 14.1004C5.38145 14.1004 2.65039 11.3693 2.65039 8.00039C2.65039 4.63145 5.38145 1.90039 8.75039 1.90039C12.1193 1.90039 14.8504 4.63145 14.8504 8.00039Z'
+    stroke='#F9F9F9'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+  />
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/public/icons/common/circled-cross.svg b/frontend/webapp/public/icons/common/circled-cross.svg
new file mode 100644
index 000000000..72ed2097e
--- /dev/null
+++ b/frontend/webapp/public/icons/common/circled-cross.svg
@@ -0,0 +1,8 @@
+<svg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+  <path
+    d='M6.75049 10.0005L8.75049 8.00049M8.75049 8.00049L10.7505 6.00049M8.75049 8.00049L6.75049 6.00049M8.75049 8.00049L10.7505 10.0005M8.75039 14.1004C5.38145 14.1004 2.65039 11.3693 2.65039 8.00039C2.65039 4.63145 5.38145 1.90039 8.75039 1.90039C12.1193 1.90039 14.8504 4.63145 14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.75039 14.1004Z'
+    stroke='#F9F9F9'
+    stroke-linecap='round'
+    stroke-linejoin='round'
+  />
+</svg>
\ No newline at end of file
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index b8e7357ee..34ee3e82b 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -8,6 +8,7 @@ export * from './dropdown';
 export * from './divider';
 export * from './counter';
 export * from './toggle';
+export * from './toggle-buttons';
 export * from './checkbox';
 export * from './modal';
 export * from './modal/warning-modal';
diff --git a/frontend/webapp/reuseable-components/toggle-buttons/index.tsx b/frontend/webapp/reuseable-components/toggle-buttons/index.tsx
new file mode 100644
index 000000000..b051a6ef3
--- /dev/null
+++ b/frontend/webapp/reuseable-components/toggle-buttons/index.tsx
@@ -0,0 +1,97 @@
+import Image from 'next/image';
+import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
+
+interface ToggleProps {
+  activeText?: string;
+  inactiveText?: string;
+  tooltip?: string;
+  initialValue?: boolean;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+const BaseButton = styled.button`
+  width: 100%;
+  padding: 12px;
+  gap: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  color: ${({ theme }) => theme.colors.secondary};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-size: 14px;
+  text-decoration: underline;
+  text-transform: uppercase;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+`;
+
+const ActiveButton = styled(BaseButton)`
+  border-radius: 32px 0 0 32px;
+  background-color: ${({ theme }) => theme.colors.blank_background};
+  &.colored {
+    background-color: ${({ theme }) => theme.colors.dark_green};
+  }
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  transition: background-color 0.3s;
+`;
+
+const InactiveButton = styled(BaseButton)`
+  border-radius: 0 32px 32px 0;
+  background-color: ${({ theme }) => theme.colors.blank_background};
+  &.colored {
+    background-color: ${({ theme }) => theme.colors.darker_red};
+  }
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+  transition: background-color 0.3s;
+`;
+
+const ToggleButtons: React.FC<ToggleProps> = ({ activeText = 'Active', inactiveText = 'Inactive', tooltip, initialValue = false, onChange, disabled }) => {
+  const [isActive, setIsActive] = useState(initialValue);
+  useEffect(() => setIsActive(initialValue), [initialValue]);
+
+  const handleToggle = (forcedBool?: boolean) => {
+    if (disabled) return;
+
+    let newValue = initialValue;
+
+    setIsActive((prev) => {
+      newValue = typeof forcedBool === 'boolean' ? forcedBool : !prev;
+      return newValue;
+    });
+
+    if (onChange) onChange(newValue);
+  };
+
+  return (
+    <Tooltip text={tooltip || ''}>
+      <Container>
+        <ActiveButton className={isActive ? 'colored' : ''} onClick={() => handleToggle(true)} disabled={disabled}>
+          <Image src='/icons/common/circled-check.svg' alt='' width={16} height={16} />
+          {activeText}
+        </ActiveButton>
+        <InactiveButton className={isActive ? '' : 'colored'} onClick={() => handleToggle(false)} disabled={disabled}>
+          <Image src='/icons/common/circled-cross.svg' alt='' width={16} height={16} />
+          {inactiveText}
+        </InactiveButton>
+      </Container>
+
+      {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} style={{ margin: '0 8px' }} />}
+    </Tooltip>
+  );
+};
+
+export { ToggleButtons };
diff --git a/frontend/webapp/reuseable-components/toggle/index.tsx b/frontend/webapp/reuseable-components/toggle/index.tsx
index fa1cc5b0f..719fbfc8a 100644
--- a/frontend/webapp/reuseable-components/toggle/index.tsx
+++ b/frontend/webapp/reuseable-components/toggle/index.tsx
@@ -46,19 +46,19 @@ const ToggleSwitch = styled.div<{ isActive: boolean; disabled?: boolean }>`
 
 const Toggle: React.FC<ToggleProps> = ({ title, tooltip, initialValue = false, onChange, disabled }) => {
   const [isActive, setIsActive] = useState(initialValue);
-
-  useEffect(() => {
-    setIsActive(initialValue);
-  }, [initialValue]);
+  useEffect(() => setIsActive(initialValue), [initialValue]);
 
   const handleToggle = () => {
-    if (!disabled) {
-      const newValue = !isActive;
-      setIsActive(newValue);
-      if (onChange) {
-        onChange(newValue);
-      }
-    }
+    if (disabled) return;
+
+    let newValue = initialValue;
+
+    setIsActive((prev) => {
+      newValue = !prev;
+      return newValue;
+    });
+
+    if (onChange) onChange(newValue);
   };
 
   return (
@@ -66,8 +66,9 @@ const Toggle: React.FC<ToggleProps> = ({ title, tooltip, initialValue = false, o
       <Container disabled={disabled} onClick={handleToggle}>
         <ToggleSwitch isActive={isActive} disabled={disabled} />
         <Text size={14}>{title}</Text>
-        {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} />}
       </Container>
+
+      {tooltip && <Image src='/icons/common/info.svg' alt='' width={16} height={16} />}
     </Tooltip>
   );
 };
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index cdd988e2a..715f46ec3 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -15,7 +15,8 @@ const colors = {
   blank_background: '#11111100',
 
   dark_red: '#802828',
-  dark_green: '#2d4323',
+  darker_red: '#611F1F',
+  dark_green: '#2D4323',
 
   warning: '#472300',
   error: '#431919',

From 87711929ee993e3d30ebf9c005ab221cbc91f270 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Sun, 10 Nov 2024 17:46:45 +0200
Subject: [PATCH 348/374] [GEN-1691] load styled on server (#1725)

This pull request includes several changes to the `frontend/webapp`
directory, focusing on refactoring the theme provider, adding a new
header component, and updating the layout file to use the new theme
provider. The most important changes are summarized below:

### Refactoring and Theming:

* Replaced the `ThemeProvider` with `ThemeProviderWrapper` in
`frontend/webapp/app/layout.tsx` to encapsulate the theme and
styled-components registry.
[[1]](diffhunk://#diff-788a38ec94bfca9467b13cb6eb93cdeccd4237facfb5fff310e05b3af67413efL5-R6)
[[2]](diffhunk://#diff-788a38ec94bfca9467b13cb6eb93cdeccd4237facfb5fff310e05b3af67413efL17-R26)
* Removed the old `palette.ts` file and moved theme-related code to
`theme-provider/index.tsx`.
[[1]](diffhunk://#diff-80a3cfb572b6f3e0b18eb5880735fe84c8cdbc222e7af63c3a696c732221aeeaL1-L50)
[[2]](diffhunk://#diff-1b2f072fc24d4e371e711036a6ec0d8437c8b6b68c97378c19fa865cff06e0a1R1-R15)
* Added `StyledComponentsRegistry` for server-side rendering of
styled-components.

### Component Additions:

* Added a new `SetupHeader` component in
`frontend/webapp/components/setup/header/index.tsx` for the setup page
header.
* Updated the `index.tsx` file in `frontend/webapp/components/setup` to
export the new `SetupHeader` component.

### File Organization:

* Updated `frontend/webapp/styles/index.ts` to export the new
`theme-provider` module instead of the old `palette`.
---
 frontend/webapp/app/layout.tsx                | 15 ++----
 .../webapp/components/setup/header/index.tsx  | 52 +++++++++++++++++++
 frontend/webapp/components/setup/index.tsx    |  1 +
 frontend/webapp/styles/index.ts               |  2 +-
 frontend/webapp/styles/palette.ts             | 50 ------------------
 .../webapp/styles/theme-provider/index.tsx    | 15 ++++++
 .../webapp/styles/theme-provider/registry.tsx | 29 +++++++++++
 7 files changed, 103 insertions(+), 61 deletions(-)
 create mode 100644 frontend/webapp/components/setup/header/index.tsx
 delete mode 100644 frontend/webapp/styles/palette.ts
 create mode 100644 frontend/webapp/styles/theme-provider/index.tsx
 create mode 100644 frontend/webapp/styles/theme-provider/registry.tsx

diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index 4d586388f..a1c9d85f5 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -2,9 +2,8 @@
 import './globals.css';
 import React from 'react';
 import { useSSE } from '@/hooks';
-import theme from '@/styles/theme';
 import { ApolloWrapper } from '@/lib';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProviderWrapper } from '@/styles';
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -14,21 +13,17 @@ const LAYOUT_STYLE: React.CSSProperties = {
   height: '100vh',
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   useSSE();
 
   return (
-    <html lang="en">
+    <html lang='en'>
       <ApolloWrapper>
-        <ThemeProvider theme={theme}>
+        <ThemeProviderWrapper>
           <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
             {children}
           </body>
-        </ThemeProvider>
+        </ThemeProviderWrapper>
       </ApolloWrapper>
     </html>
   );
diff --git a/frontend/webapp/components/setup/header/index.tsx b/frontend/webapp/components/setup/header/index.tsx
new file mode 100644
index 000000000..0c22d70ba
--- /dev/null
+++ b/frontend/webapp/components/setup/header/index.tsx
@@ -0,0 +1,52 @@
+import Image from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
+import { NavigationButtons, Text } from '@/reuseable-components';
+
+interface SetupHeaderProps {
+  navigationButtons: {
+    label: string;
+    iconSrc?: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+  }[];
+}
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0 24px 0 32px;
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.dark_grey};
+  border-bottom: 1px solid rgba(249, 249, 249, 0.16);
+  height: 80px;
+`;
+
+const Title = styled(Text)``;
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 1.2em;
+`;
+
+const NavigationButtonsWrapper = styled.div`
+  position: absolute;
+  right: 24px;
+`;
+
+export const SetupHeader: React.FC<SetupHeaderProps> = ({ navigationButtons }) => {
+  return (
+    <HeaderContainer>
+      <Logo>
+        <Image src='/brand/transparent-logo-white.svg' alt='logo' width={84} height={20} />
+      </Logo>
+      <Title family={'secondary'}>START WITH ODIGOS</Title>
+      <div style={{ width: 84 }} />
+      <NavigationButtonsWrapper>
+        <NavigationButtons buttons={navigationButtons} />
+      </NavigationButtonsWrapper>
+    </HeaderContainer>
+  );
+};
diff --git a/frontend/webapp/components/setup/index.tsx b/frontend/webapp/components/setup/index.tsx
index 8267df70b..349c6cc4b 100644
--- a/frontend/webapp/components/setup/index.tsx
+++ b/frontend/webapp/components/setup/index.tsx
@@ -1 +1,2 @@
 export * from './menu';
+export * from './header';
diff --git a/frontend/webapp/styles/index.ts b/frontend/webapp/styles/index.ts
index 639634e14..0ff7e8fa3 100644
--- a/frontend/webapp/styles/index.ts
+++ b/frontend/webapp/styles/index.ts
@@ -1,3 +1,3 @@
 export * from './animations';
-export * from './palette';
+export * from './theme-provider';
 export * from './styled';
diff --git a/frontend/webapp/styles/palette.ts b/frontend/webapp/styles/palette.ts
deleted file mode 100644
index 006a9a0cf..000000000
--- a/frontend/webapp/styles/palette.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-
-// Define your color palette
-const colors = {
-  primary: '#111',
-  secondary: '#F9F9F9',
-  dark_grey: '#151515',
-  text: '#F9F9F9',
-
-  torquiz_light: '#96F2FF',
-  dark: '#07111A',
-  light_dark: '#132330',
-  dark_blue: '#203548',
-  light_grey: '#CCD0D2',
-  blue_grey: '#374A5B',
-  white: '#fff',
-  error: '#FD3F3F',
-  orange_brown: '#b98a01',
-  success: '#a5ff96',
-};
-
-const text = {
-  primary: '#07111A',
-  secondary: '#0EE6F3',
-  white: '#fff',
-  light_grey: '#CCD0D2',
-  grey: '#8b92a5',
-  dark_button: '#0A1824',
-};
-
-const font_family = {
-  primary: 'Kode Mono, sans-serif',
-};
-
-// Define the theme interface
-interface ThemeInterface extends DefaultTheme {
-  colors: typeof colors;
-  text: typeof text;
-  font_family: typeof font_family;
-}
-
-// Create your theme object
-const theme: ThemeInterface = {
-  colors,
-  text,
-  font_family,
-};
-
-// Export the theme
-export default theme;
diff --git a/frontend/webapp/styles/theme-provider/index.tsx b/frontend/webapp/styles/theme-provider/index.tsx
new file mode 100644
index 000000000..ba429d668
--- /dev/null
+++ b/frontend/webapp/styles/theme-provider/index.tsx
@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import StyledComponentsRegistry from './registry';
+import { ThemeProvider } from 'styled-components';
+import theme from '../theme';
+interface ThemeProviderWrapperProps {
+  children: ReactNode; // Add children prop with ReactNode type
+}
+
+export const ThemeProviderWrapper: React.FC<ThemeProviderWrapperProps> = ({ children }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+    </ThemeProvider>
+  );
+};
diff --git a/frontend/webapp/styles/theme-provider/registry.tsx b/frontend/webapp/styles/theme-provider/registry.tsx
new file mode 100644
index 000000000..79346eae0
--- /dev/null
+++ b/frontend/webapp/styles/theme-provider/registry.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useServerInsertedHTML } from 'next/navigation';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== 'undefined') return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}

From 5e3bb02e34d528f8079404a6a6f326303b5a5dad Mon Sep 17 00:00:00 2001
From: Ben Elferink <ben.elferink@icloud.com>
Date: Mon, 11 Nov 2024 09:56:22 +0200
Subject: [PATCH 349/374] [GEN-1694]: search overview entities (#1731)

---
 .../components/overview/filters/index.tsx     |  47 ++-
 frontend/webapp/components/overview/index.tsx |   2 +-
 .../overview/monitors-legend/index.tsx        |   2 +-
 .../overview/overview-actions-menu/index.tsx  |  61 +---
 .../overview-actions-menu/search/index.tsx    |  46 +++
 .../search/recent-searches/index.tsx          |  14 +
 .../search/search-results/builder.ts          |  83 ++++++
 .../search/search-results/index.tsx           |  97 ++++++
 .../overview-actions-menu/search/styled.ts    |  22 ++
 .../hooks/overview/useNodeDataFlowHandlers.ts |  23 +-
 .../reuseable-components/badge/index.tsx      |  24 ++
 .../index.tsx}                                |   4 +-
 .../button/selection-button/index.tsx         |  44 +++
 .../reuseable-components/divider/index.tsx    |  13 +-
 frontend/webapp/reuseable-components/index.ts |   2 +
 .../nodes-data-flow/builder.ts                | 282 ++++++------------
 .../nodes-data-flow/nodes/header-node.tsx     |  20 +-
 .../reuseable-components/tab-list/index.tsx   |   4 +-
 frontend/webapp/styles/theme.ts               |   1 -
 .../utils/functions/get-entity-label.ts       |  45 +++
 .../utils/functions/get-health-status.ts      |   8 +
 frontend/webapp/utils/functions/icons.ts      |   8 +-
 frontend/webapp/utils/functions/index.ts      |   2 +
 23 files changed, 533 insertions(+), 321 deletions(-)
 create mode 100644 frontend/webapp/containers/main/overview/overview-actions-menu/search/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-actions-menu/search/recent-searches/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/builder.ts
 create mode 100644 frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx
 create mode 100644 frontend/webapp/containers/main/overview/overview-actions-menu/search/styled.ts
 create mode 100644 frontend/webapp/reuseable-components/badge/index.tsx
 rename frontend/webapp/reuseable-components/button/{docs-button.tsx => docs-button/index.tsx} (94%)
 create mode 100644 frontend/webapp/reuseable-components/button/selection-button/index.tsx
 create mode 100644 frontend/webapp/utils/functions/get-entity-label.ts
 create mode 100644 frontend/webapp/utils/functions/get-health-status.ts

diff --git a/frontend/webapp/components/overview/filters/index.tsx b/frontend/webapp/components/overview/filters/index.tsx
index 5e64aa18a..87ee67674 100644
--- a/frontend/webapp/components/overview/filters/index.tsx
+++ b/frontend/webapp/components/overview/filters/index.tsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
 import { DropdownOption } from '@/types';
-import { Button, Dropdown, Text } from '@/reuseable-components';
+import { useOnClickOutside } from '@/hooks';
+import { Badge, Button, Dropdown, Text } from '@/reuseable-components';
 
-const Container = styled.div`
+const RelativeContainer = styled.div`
   position: relative;
 `;
 
@@ -15,22 +16,12 @@ const ButtonText = styled(Text)`
   margin: 0 6px;
 `;
 
-const Badge = styled.div`
-  background-color: ${({ theme }) => theme.colors.majestic_blue};
-  border-radius: 100%;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const CardWrapper = styled.div`
   position: absolute;
-  top: 100%;
+  top: calc(100% + 8px);
   left: 0;
   z-index: 10;
-  background-color: ${({ theme }) => theme.colors.translucent_bg};
+  background-color: ${({ theme }) => theme.colors.dropdown_bg};
   border: ${({ theme }) => `1px solid ${theme.colors.border}`};
   border-radius: 24px;
   width: 360px;
@@ -44,32 +35,28 @@ const CardContent = styled.div`
 `;
 
 const Filters = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleOpen = () => setIsOpen((prev) => !prev);
+  const [focused, setFocused] = useState(false);
+  const toggleFocused = () => setFocused((prev) => !prev);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(ref, () => setFocused(false));
 
   const [namespace, setNamespace] = useState<DropdownOption | undefined>(undefined);
   const [filters, setFilters] = useState<DropdownOption[]>([]);
   const [metrics, setMetrics] = useState<DropdownOption[]>([]);
 
   return (
-    <Container>
-      <Button variant='secondary' style={{ textDecoration: 'none' }} onClick={toggleOpen}>
+    <RelativeContainer ref={ref}>
+      <Button variant='secondary' style={{ textDecoration: 'none' }} onClick={toggleFocused}>
         <Image src='/icons/common/filter.svg' alt='filter' width={14} height={14} />
         <ButtonText>Filters</ButtonText>
-        <Badge>{filters.length}</Badge>
+        <Badge label={filters.length} filled />
       </Button>
 
-      {isOpen && (
+      {focused && (
         <CardWrapper>
           <CardContent>
-            <Dropdown
-              title='Namespace'
-              placeholder='Select namespace'
-              options={[]}
-              value={namespace}
-              onSelect={(val) => setNamespace(val)}
-              required
-            />
+            <Dropdown title='Namespace' placeholder='Select namespace' options={[]} value={namespace} onSelect={(val) => setNamespace(val)} required />
 
             {/* TODO: make this a multi-select dropwdown (with internal checkboxes) */}
             <Dropdown title='Type' placeholder='All' options={[]} value={filters[0]} onSelect={(val) => setFilters((prev) => prev)} required />
@@ -78,7 +65,7 @@ const Filters = () => {
           </CardContent>
         </CardWrapper>
       )}
-    </Container>
+    </RelativeContainer>
   );
 };
 
diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index cf8dcea9b..3e588e2c3 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -1,3 +1,3 @@
-export * from './filters';
 export * from './add-entity';
+export * from './filters';
 export * from './monitors-legend';
diff --git a/frontend/webapp/components/overview/monitors-legend/index.tsx b/frontend/webapp/components/overview/monitors-legend/index.tsx
index e129dafe6..f71bed5c0 100644
--- a/frontend/webapp/components/overview/monitors-legend/index.tsx
+++ b/frontend/webapp/components/overview/monitors-legend/index.tsx
@@ -8,7 +8,7 @@ import { Text } from '@/reuseable-components';
 const List = styled.div`
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 12px;
 `;
 
 const ListItem = styled.div`
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
index 830afe98f..750e74ca2 100644
--- a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -1,70 +1,33 @@
-import React, { useState } from 'react';
+import React from 'react';
+import { Search } from './search';
 import styled from 'styled-components';
-import { Input, TabList } from '@/reuseable-components';
+import { Divider, TabList } from '@/reuseable-components';
 import { AddEntity, Filters, MonitorsLegend } from '@/components';
 
 const MenuContainer = styled.div`
   display: flex;
   align-items: center;
   margin: 20px 0;
+  gap: 16px;
 `;
 
-const DividerContainer = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`;
-
-const Divider = styled.div`
-  width: 1px;
-  height: 24px;
-  background-color: ${({ theme }) => theme.colors.card};
-  margin: 0 16px;
-`;
-
-const SearchContainer = styled.div`
-  width: 200px;
-`;
-
-const FilterContainer = styled.div`
-  margin-left: 12px;
-`;
-
-const MonitorsContainer = styled.div`
-  margin: 0 24px;
-`;
-
-// Aligns the AddEntityButtonDropdown to the right
-const StyledAddEntityButtonDropdownWrapper = styled.div`
+// Aligns the "AddEntity" button to the right
+const PushToEnd = styled.div`
   margin-left: auto;
 `;
 
 export function OverviewActionMenuContainer() {
-  const [search, setSearch] = useState<string>('');
-
   return (
     <MenuContainer>
       <TabList />
+      <Divider orientation='vertical' length='20px' margin='0' />
+      <Search />
+      <Filters />
+      <MonitorsLegend />
 
-      <DividerContainer>
-        <Divider />
-      </DividerContainer>
-
-      <SearchContainer>
-        <Input placeholder='Search' icon='/icons/common/search.svg' value={search} onChange={(e) => setSearch(e.target.value)} />
-      </SearchContainer>
-
-      <FilterContainer>
-        <Filters />
-      </FilterContainer>
-
-      <MonitorsContainer>
-        <MonitorsLegend />
-      </MonitorsContainer>
-
-      <StyledAddEntityButtonDropdownWrapper>
+      <PushToEnd>
         <AddEntity />
-      </StyledAddEntityButtonDropdownWrapper>
+      </PushToEnd>
     </MenuContainer>
   );
 }
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/search/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/search/index.tsx
new file mode 100644
index 000000000..50203187d
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/search/index.tsx
@@ -0,0 +1,46 @@
+import React, { useRef, useState } from 'react';
+import { useOnClickOutside } from '@/hooks';
+import { RelativeContainer } from './styled';
+import { Input } from '@/reuseable-components';
+import { SearchResults } from './search-results';
+// import { RecentSearches } from './recent-searches';
+
+const Search = () => {
+  const [input, setInput] = useState('');
+  const [focused, setFocused] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(ref, () => setFocused(false));
+
+  return (
+    <RelativeContainer ref={ref}>
+      <Input placeholder='Search' icon='/icons/common/search.svg' value={input} onChange={(e) => setInput(e.target.value)} onFocus={() => setFocused(true)} />
+
+      {!!input || focused ? (
+        <SearchResults
+          searchText={input}
+          onClose={() => {
+            setInput('');
+            setFocused(false);
+          }}
+        />
+      ) : null}
+
+      {/* TODO: recent searches...
+
+        {!!input ? (
+          <SearchResults
+            searchText={input}
+            onClose={() => {
+              setInput('');
+              setFocused(false);
+            }}
+          />
+        ) : focused ? (
+          <RecentSearches />
+        ) : null} */}
+    </RelativeContainer>
+  );
+};
+
+export { Search };
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/search/recent-searches/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/search/recent-searches/index.tsx
new file mode 100644
index 000000000..06ecaab9e
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/search/recent-searches/index.tsx
@@ -0,0 +1,14 @@
+import { Text } from '@/reuseable-components';
+import { CardContent, CardWrapper } from '../styled';
+
+export const RecentSearches = () => {
+  return (
+    <CardWrapper>
+      <CardContent>
+        <div style={{ padding: 12 }}>
+          <Text size={14}>TODO: recent searches...</Text>
+        </div>
+      </CardContent>
+    </CardWrapper>
+  );
+};
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/builder.ts b/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/builder.ts
new file mode 100644
index 000000000..296d39107
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/builder.ts
@@ -0,0 +1,83 @@
+import { type ActionDataParsed, type ActualDestination, type InstrumentationRuleSpec, type K8sActualSource, OVERVIEW_ENTITY_TYPES } from '@/types';
+
+export type Category = 'all' | OVERVIEW_ENTITY_TYPES;
+
+export const buildSearchResults = ({
+  rules,
+  sources,
+  actions,
+  destinations,
+  searchText,
+  selectedCategory,
+}: {
+  rules: InstrumentationRuleSpec[];
+  sources: K8sActualSource[];
+  actions: ActionDataParsed[];
+  destinations: ActualDestination[];
+  searchText: string;
+  selectedCategory: Category;
+}) => {
+  const filteredRules = !searchText ? rules : rules.filter((rule) => rule.type?.toLowerCase().includes(searchText) || rule.ruleName.toLowerCase().includes(searchText));
+  const filteredSources = !searchText ? sources : sources.filter((source) => source.name.toLowerCase().includes(searchText) || source.reportedName.toLowerCase().includes(searchText));
+  const filteredActions = !searchText ? actions : actions.filter((action) => action.type.toLowerCase().includes(searchText) || action.spec.actionName.toLowerCase().includes(searchText));
+  const filteredDestinations = !searchText
+    ? destinations
+    : destinations.filter((destination) => destination.destinationType.displayName.toLowerCase().includes(searchText) || destination.name.toLowerCase().includes(searchText));
+
+  const categories: {
+    category: Category;
+    label: string;
+    count: number;
+    entities: InstrumentationRuleSpec[] | K8sActualSource[] | ActionDataParsed[] | ActualDestination[];
+  }[] = [
+    {
+      category: OVERVIEW_ENTITY_TYPES.SOURCE,
+      label: 'Sources',
+      count: filteredSources.length,
+      entities: [],
+    },
+    {
+      category: OVERVIEW_ENTITY_TYPES.ACTION,
+      label: 'Actions',
+      count: filteredActions.length,
+      entities: [],
+    },
+    {
+      category: OVERVIEW_ENTITY_TYPES.DESTINATION,
+      label: 'Destinations',
+      count: filteredDestinations.length,
+      entities: [],
+    },
+    {
+      category: OVERVIEW_ENTITY_TYPES.RULE,
+      label: 'Instrumentation Rules',
+      count: filteredRules.length,
+      entities: [],
+    },
+  ];
+
+  categories.unshift({
+    category: 'all',
+    label: 'All',
+    count: filteredRules.length + filteredSources.length + filteredActions.length + filteredDestinations.length,
+    entities: [],
+  });
+
+  const searchResults = categories
+    .filter(({ count, category }) => !!count && category !== 'all' && ['all', category].includes(selectedCategory))
+    .map((item) => ({
+      ...item,
+      entities:
+        item.category === OVERVIEW_ENTITY_TYPES.RULE
+          ? filteredRules
+          : item.category === OVERVIEW_ENTITY_TYPES.SOURCE
+          ? filteredSources
+          : item.category === OVERVIEW_ENTITY_TYPES.ACTION
+          ? filteredActions
+          : item.category === OVERVIEW_ENTITY_TYPES.DESTINATION
+          ? filteredDestinations
+          : [],
+    }));
+
+  return { categories, searchResults };
+};
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx
new file mode 100644
index 000000000..f983fd14e
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/search/search-results/index.tsx
@@ -0,0 +1,97 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import theme from '@/styles/theme';
+import styled from 'styled-components';
+import { OVERVIEW_ENTITY_TYPES } from '@/types';
+import { CardContent, CardWrapper } from '../styled';
+import { getEntityIcon, getEntityLabel } from '@/utils';
+import { buildSearchResults, type Category } from './builder';
+import { Divider, SelectionButton, Text } from '@/reuseable-components';
+import { useActionCRUD, useDestinationCRUD, useInstrumentationRuleCRUD, useNodeDataFlowHandlers, useSourceCRUD } from '@/hooks';
+
+interface Props {
+  searchText: string;
+  onClose: () => void;
+}
+
+const HorizontalScroll = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
+  overflow-x: auto;
+`;
+
+const VerticalScroll = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  overflow-y: auto;
+`;
+
+export const SearchResults = ({ searchText, onClose }: Props) => {
+  const [selectedCategory, setSelectedCategory] = useState<Category>('all');
+
+  const { sources } = useSourceCRUD();
+  const { actions } = useActionCRUD();
+  const { destinations } = useDestinationCRUD();
+  const { instrumentationRules } = useInstrumentationRuleCRUD();
+  const { handleNodeClick } = useNodeDataFlowHandlers({ rules: instrumentationRules, sources, actions, destinations });
+
+  const { categories, searchResults } = useMemo(
+    () =>
+      buildSearchResults({
+        rules: instrumentationRules,
+        sources,
+        actions,
+        destinations,
+        searchText: searchText.toLowerCase(),
+        selectedCategory,
+      }),
+    [instrumentationRules, sources, actions, destinations, searchText, selectedCategory],
+  );
+
+  return (
+    <CardWrapper>
+      <CardContent>
+        <HorizontalScroll style={{ borderBottom: `1px solid ${!searchResults.length ? 'transparent' : theme.colors.border}` }}>
+          {categories.map(({ category, label, count }) => (
+            <SelectionButton
+              key={`category-select-${category}`}
+              label={label}
+              badgeLabel={count}
+              isSelected={selectedCategory === category}
+              onClick={() => setSelectedCategory(category as Category)}
+            />
+          ))}
+        </HorizontalScroll>
+
+        {searchResults.map(({ category, label, entities }, catIdx) => (
+          <Fragment key={`category-list-${category}`}>
+            <VerticalScroll style={{ maxHeight: selectedCategory !== 'all' ? '240px' : '140px' }}>
+              <Text size={12} family='secondary' color={theme.text.dark_grey} style={{ marginLeft: '16px' }}>
+                {label}
+              </Text>
+
+              {entities.map((item, entIdx) => (
+                <SelectionButton
+                  key={`entity-${catIdx}-${entIdx}`}
+                  icon={getEntityIcon(category as OVERVIEW_ENTITY_TYPES)}
+                  label={getEntityLabel(item, category as OVERVIEW_ENTITY_TYPES, { extended: true })}
+                  onClick={() => {
+                    const id = item.id || item.ruleId || { kind: item.kind, name: item.name, namespace: item.namespace };
+                    handleNodeClick(null, { data: { type: category, id } });
+                    onClose();
+                  }}
+                  style={{ width: '100%', justifyContent: 'flex-start' }}
+                  color='transparent'
+                />
+              ))}
+            </VerticalScroll>
+
+            <Divider thickness={catIdx === searchResults.length - 1 ? 0 : 1} length='90%' margin='8px auto' />
+          </Fragment>
+        ))}
+      </CardContent>
+    </CardWrapper>
+  );
+};
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/search/styled.ts b/frontend/webapp/containers/main/overview/overview-actions-menu/search/styled.ts
new file mode 100644
index 000000000..52858c39d
--- /dev/null
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/search/styled.ts
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const RelativeContainer = styled.div`
+  position: relative;
+  width: 200px;
+`;
+
+export const CardWrapper = styled.div`
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 10;
+  background-color: ${({ theme }) => theme.colors.dropdown_bg};
+  border: ${({ theme }) => `1px solid ${theme.colors.border}`};
+  border-radius: 24px;
+  width: 440px;
+`;
+
+export const CardContent = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
diff --git a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
index cc5801584..c936bbcd5 100644
--- a/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
+++ b/frontend/webapp/hooks/overview/useNodeDataFlowHandlers.ts
@@ -3,33 +3,18 @@ import { useCallback } from 'react';
 import { useDrawerStore, useModalStore } from '@/store';
 import { K8sActualSource, ActualDestination, ActionDataParsed, OVERVIEW_ENTITY_TYPES, OVERVIEW_NODE_TYPES, InstrumentationRuleSpec } from '@/types';
 
-export function useNodeDataFlowHandlers(params: {
-  rules: InstrumentationRuleSpec[];
-  sources: K8sActualSource[];
-  actions: ActionDataParsed[];
-  destinations: ActualDestination[];
-}) {
+export function useNodeDataFlowHandlers(params: { rules: InstrumentationRuleSpec[]; sources: K8sActualSource[]; actions: ActionDataParsed[]; destinations: ActualDestination[] }) {
   const { setCurrentModal } = useModalStore();
   const setSelectedItem = useDrawerStore(({ setSelectedItem }) => setSelectedItem);
 
   const handleNodeClick = useCallback(
-    (
-      _,
-      object: {
-        type: string;
-        id: string;
-        position: { x: number; y: number };
-        data: Record<string, any>;
-      }
-    ) => {
+    (_: unknown, object: { data: { id: any; type: any } }) => {
       const {
         data: { id, type },
       } = object;
 
       if (type === OVERVIEW_ENTITY_TYPES.SOURCE) {
-        const selectedDrawerItem = params['sources'].find(
-          ({ kind, name, namespace }) => kind === id.kind && name === id.name && namespace === id.namespace
-        );
+        const selectedDrawerItem = params['sources'].find(({ kind, name, namespace }) => kind === id.kind && name === id.name && namespace === id.namespace);
         if (!selectedDrawerItem) return;
 
         const { kind, name, namespace } = selectedDrawerItem;
@@ -58,7 +43,7 @@ export function useNodeDataFlowHandlers(params: {
         setCurrentModal(OVERVIEW_ENTITY_TYPES.DESTINATION);
       }
     },
-    [params, setSelectedItem, setCurrentModal]
+    [params, setSelectedItem, setCurrentModal],
   );
 
   return {
diff --git a/frontend/webapp/reuseable-components/badge/index.tsx b/frontend/webapp/reuseable-components/badge/index.tsx
new file mode 100644
index 000000000..d63d682ef
--- /dev/null
+++ b/frontend/webapp/reuseable-components/badge/index.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+interface Props {
+  label: string | number;
+  filled?: boolean;
+}
+
+const Styled = styled.span<{ filled: Props['filled'] }>`
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  border: 1px solid ${({ theme, filled }) => (filled ? theme.colors.majestic_blue : theme.colors.border)};
+  background-color: ${({ theme, filled }) => (filled ? theme.colors.majestic_blue : theme.colors.blank_background)};
+  color: ${({ theme, filled }) => (filled ? theme.colors.secondary : theme.text.grey)};
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  font-size: 12px;
+`;
+
+export const Badge = ({ label, filled }: Props) => {
+  return <Styled filled={filled}>{label}</Styled>;
+};
diff --git a/frontend/webapp/reuseable-components/button/docs-button.tsx b/frontend/webapp/reuseable-components/button/docs-button/index.tsx
similarity index 94%
rename from frontend/webapp/reuseable-components/button/docs-button.tsx
rename to frontend/webapp/reuseable-components/button/docs-button/index.tsx
index 1de7c9242..601bd5069 100644
--- a/frontend/webapp/reuseable-components/button/docs-button.tsx
+++ b/frontend/webapp/reuseable-components/button/docs-button/index.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
-import styled from 'styled-components';
-import { Button, ButtonProps } from '.';
 import { DOCS_LINK } from '@/utils';
+import styled from 'styled-components';
+import { Button, ButtonProps } from '..';
 
 const StyledButton = styled(Button)`
   display: flex;
diff --git a/frontend/webapp/reuseable-components/button/selection-button/index.tsx b/frontend/webapp/reuseable-components/button/selection-button/index.tsx
new file mode 100644
index 000000000..054dfcccf
--- /dev/null
+++ b/frontend/webapp/reuseable-components/button/selection-button/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Button } from '..';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { Badge, Text } from '@/reuseable-components';
+
+interface Props {
+  label: string;
+  badgeLabel?: string | number;
+  icon?: string;
+  isSelected?: boolean;
+  onClick: () => void;
+  color?: React.CSSProperties['backgroundColor'];
+  hoverColor?: React.CSSProperties['backgroundColor'];
+  style?: React.CSSProperties;
+}
+
+const StyledButton = styled(Button)<{ color: Props['color']; hoverColor: Props['hoverColor'] }>`
+  gap: 8px;
+  text-transform: none;
+  text-decoration: none;
+  border: none;
+  background-color: ${({ theme, color }) => color || theme.colors.white_opacity['004']};
+  &.not-selected {
+    &:hover {
+      background-color: ${({ theme, hoverColor }) => hoverColor || theme.colors.white_opacity['008']};
+    }
+  }
+  &.selected {
+    background-color: ${({ theme }) => theme.colors.majestic_blue + '7A'};
+  }
+`;
+
+export const SelectionButton = ({ label, badgeLabel, icon, isSelected, onClick, color, hoverColor, style }: Props) => {
+  return (
+    <StyledButton onClick={onClick} className={isSelected ? 'selected' : 'not-selected'} color={color} hoverColor={hoverColor} style={style}>
+      {icon && <Image src={icon} alt='' width={16} height={16} />}
+      <Text size={14} style={{ whiteSpace: 'nowrap' }}>
+        {label}
+      </Text>
+      {badgeLabel !== undefined && <Badge label={badgeLabel} filled={isSelected} />}
+    </StyledButton>
+  );
+};
diff --git a/frontend/webapp/reuseable-components/divider/index.tsx b/frontend/webapp/reuseable-components/divider/index.tsx
index 26c80541b..bfa8bc9ff 100644
--- a/frontend/webapp/reuseable-components/divider/index.tsx
+++ b/frontend/webapp/reuseable-components/divider/index.tsx
@@ -2,21 +2,22 @@ import React from 'react';
 import styled from 'styled-components';
 
 interface DividerProps {
+  orientation?: 'horizontal' | 'vertical';
   thickness?: number;
+  length?: number | string;
   color?: string;
   margin?: string;
-  orientation?: 'horizontal' | 'vertical';
 }
 
 const StyledDivider = styled.div<DividerProps>`
-  width: ${({ orientation, thickness }) => (orientation === 'vertical' ? `${thickness}px` : '100%')};
-  height: ${({ orientation, thickness }) => (orientation === 'horizontal' ? `${thickness}px` : '100%')};
-  background-color: ${({ color, theme }) => color || theme.colors.border};
+  width: ${({ orientation, thickness, length }) => (orientation === 'vertical' ? `${thickness}px` : length || '100%')};
+  height: ${({ orientation, thickness, length }) => (orientation === 'horizontal' ? `${thickness}px` : length || '100%')};
   margin: ${({ orientation, margin }) => margin || (orientation === 'horizontal' ? '8px 0' : '0 8px')};
+  background-color: ${({ color, theme }) => color || theme.colors.border};
 `;
 
-const Divider: React.FC<DividerProps> = ({ thickness = 1, color, margin, orientation = 'horizontal' }) => {
-  return <StyledDivider thickness={thickness} color={color} margin={margin} orientation={orientation} />;
+const Divider: React.FC<DividerProps> = ({ orientation = 'horizontal', thickness = 1, length, color, margin }) => {
+  return <StyledDivider orientation={orientation} thickness={thickness} length={length} color={color} margin={margin} />;
 };
 
 export { Divider };
diff --git a/frontend/webapp/reuseable-components/index.ts b/frontend/webapp/reuseable-components/index.ts
index 34ee3e82b..b1a94f572 100644
--- a/frontend/webapp/reuseable-components/index.ts
+++ b/frontend/webapp/reuseable-components/index.ts
@@ -1,6 +1,8 @@
 export * from './text';
+export * from './badge';
 export * from './button';
 export * from './button/docs-button';
+export * from './button/selection-button';
 export * from './section-title';
 export * from './input';
 export * from './tooltip';
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
index 3ef13f056..d65f7b949 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -1,46 +1,19 @@
 import theme from '@/styles/theme';
 import { Node, Edge } from 'react-flow-renderer';
-import {
-  extractMonitors,
-  formatBytes,
-  getActionIcon,
-  getRuleIcon,
-  getValueForRange,
-} from '@/utils';
 import { getMainContainerLanguageLogo } from '@/utils/constants/programming-languages';
+import { extractMonitors, formatBytes, getActionIcon, getEntityIcon, getEntityLabel, getHealthStatus, getRuleIcon, getValueForRange } from '@/utils';
 import {
   OVERVIEW_ENTITY_TYPES,
   OVERVIEW_NODE_TYPES,
   STATUSES,
   type InstrumentationRuleSpec,
-  type ActionData,
-  type ActionItem,
   type ActualDestination,
   type K8sActualSource,
   type OverviewMetricsResponse,
+  ActionDataParsed,
 } from '@/types';
 
-const HEADER_ICON_PATH = '/icons/overview/';
-
-const getHealthStatus = (item: K8sActualSource | ActualDestination) => {
-  const conditions =
-    (item as K8sActualSource)?.instrumentedApplicationDetails?.conditions ||
-    (item as ActualDestination)?.conditions;
-  const isUnhealthy =
-    !conditions?.length ||
-    !!conditions.find(({ status }) => status === 'False');
-
-  return isUnhealthy ? STATUSES.UNHEALTHY : STATUSES.HEALTHY;
-};
-
-const createNode = (
-  nodeId: string,
-  nodeType: string,
-  x: number,
-  y: number,
-  data: Record<string, any>,
-  style?: React.CSSProperties
-): Node => {
+const createNode = (nodeId: string, nodeType: string, x: number, y: number, data: Record<string, any>, style?: React.CSSProperties): Node => {
   // const [columnType] = nodeId.split('-');
 
   return {
@@ -59,7 +32,7 @@ const createEdge = (
     isMultiTarget?: boolean;
     isError?: boolean;
     animated?: boolean;
-  }
+  },
 ): Edge => {
   const { label, isMultiTarget, isError, animated } = params || {};
   const [sourceNodeId, targetNodeId] = edgeId.split('-to-');
@@ -87,7 +60,7 @@ export const buildNodesAndEdges = ({
 }: {
   rules: InstrumentationRuleSpec[];
   sources: K8sActualSource[];
-  actions: ActionData[];
+  actions: ActionDataParsed[];
   destinations: ActualDestination[];
   metrics?: OverviewMetricsResponse;
   containerWidth: number;
@@ -137,74 +110,56 @@ export const buildNodesAndEdges = ({
   const tempNodes = {
     rules: [
       createNode('rule-header', 'header', postions['rules']['x'], 0, {
-        icon: `${HEADER_ICON_PATH}rules.svg`,
+        icon: getEntityIcon(OVERVIEW_ENTITY_TYPES.RULE),
         title: 'Instrumentation Rules',
         tagValue: rules.length,
       }),
     ],
     sources: [
       createNode('source-header', 'header', postions['sources']['x'], 0, {
-        icon: `${HEADER_ICON_PATH}sources.svg`,
+        icon: getEntityIcon(OVERVIEW_ENTITY_TYPES.SOURCE),
         title: 'Sources',
         tagValue: sources.length,
       }),
     ],
     actions: [
       createNode('action-header', 'header', postions['actions']['x'], 0, {
-        icon: `${HEADER_ICON_PATH}actions.svg`,
+        icon: getEntityIcon(OVERVIEW_ENTITY_TYPES.ACTION),
         title: 'Actions',
         tagValue: actions.length,
       }),
     ],
     destinations: [
-      createNode(
-        'destination-header',
-        'header',
-        postions['destinations']['x'],
-        0,
-        {
-          icon: `${HEADER_ICON_PATH}destinations.svg`,
-          title: 'Destinations',
-          tagValue: destinations.length,
-        }
-      ),
+      createNode('destination-header', 'header', postions['destinations']['x'], 0, {
+        icon: getEntityIcon(OVERVIEW_ENTITY_TYPES.DESTINATION),
+        title: 'Destinations',
+        tagValue: destinations.length,
+      }),
     ],
   };
 
   // Build Rules Nodes
   if (!rules.length) {
     tempNodes['rules'].push(
-      createNode(
-        'rule-0',
-        'add',
-        postions['rules']['x'],
-        postions['rules']['y'](),
-        {
-          type: OVERVIEW_NODE_TYPES.ADD_RULE,
-          status: STATUSES.HEALTHY,
-          title: 'ADD RULE',
-          subTitle: 'Add first rule to modify the OpenTelemetry data',
-        }
-      )
+      createNode('rule-0', 'add', postions['rules']['x'], postions['rules']['y'](), {
+        type: OVERVIEW_NODE_TYPES.ADD_RULE,
+        status: STATUSES.HEALTHY,
+        title: 'ADD RULE',
+        subTitle: 'Add first rule to modify the OpenTelemetry data',
+      }),
     );
   } else {
     rules.forEach((rule, idx) => {
       tempNodes['rules'].push(
-        createNode(
-          `rule-${idx}`,
-          'base',
-          postions['rules']['x'],
-          postions['rules']['y'](idx),
-          {
-            id: rule.ruleId,
-            type: OVERVIEW_ENTITY_TYPES.RULE,
-            status: STATUSES.HEALTHY,
-            title: rule.ruleName || rule.type,
-            subTitle: rule.type,
-            imageUri: getRuleIcon(rule.type),
-            isActive: !rule.disabled,
-          }
-        )
+        createNode(`rule-${idx}`, 'base', postions['rules']['x'], postions['rules']['y'](idx), {
+          id: rule.ruleId,
+          type: OVERVIEW_ENTITY_TYPES.RULE,
+          status: STATUSES.HEALTHY,
+          title: getEntityLabel(rule, OVERVIEW_ENTITY_TYPES.RULE, { prioritizeDisplayName: true }),
+          subTitle: rule.type,
+          imageUri: getRuleIcon(rule.type),
+          isActive: !rule.disabled,
+        }),
       );
     });
   }
@@ -212,50 +167,31 @@ export const buildNodesAndEdges = ({
   // Build Source Nodes
   if (!sources.length) {
     tempNodes['sources'].push(
-      createNode(
-        'source-0',
-        'add',
-        postions['sources']['x'],
-        postions['rules']['y'](),
-        {
-          type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
-          status: STATUSES.HEALTHY,
-          title: 'ADD SOURCE',
-          subTitle: 'Add first source to collect OpenTelemetry data',
-        }
-      )
+      createNode('source-0', 'add', postions['sources']['x'], postions['rules']['y'](), {
+        type: OVERVIEW_NODE_TYPES.ADD_SOURCE,
+        status: STATUSES.HEALTHY,
+        title: 'ADD SOURCE',
+        subTitle: 'Add first source to collect OpenTelemetry data',
+      }),
     );
   } else {
     sources.forEach((source, idx) => {
-      const metric = metrics?.getOverviewMetrics.sources.find(
-        ({ kind, name, namespace }) =>
-          kind === source.kind &&
-          name === source.name &&
-          namespace === source.namespace
-      );
+      const metric = metrics?.getOverviewMetrics.sources.find(({ kind, name, namespace }) => kind === source.kind && name === source.name && namespace === source.namespace);
 
       tempNodes['sources'].push(
-        createNode(
-          `source-${idx}`,
-          'base',
-          postions['sources']['x'],
-          postions['rules']['y'](idx),
-          {
-            id: {
-              kind: source.kind,
-              name: source.name,
-              namespace: source.namespace,
-            },
-            type: OVERVIEW_ENTITY_TYPES.SOURCE,
-            status: getHealthStatus(source),
-            title:
-              source.name +
-              (source.reportedName ? ` (${source.reportedName})` : ''),
-            subTitle: source.kind,
-            imageUri: getMainContainerLanguageLogo(source),
-            metric,
-          }
-        )
+        createNode(`source-${idx}`, 'base', postions['sources']['x'], postions['rules']['y'](idx), {
+          id: {
+            kind: source.kind,
+            name: source.name,
+            namespace: source.namespace,
+          },
+          type: OVERVIEW_ENTITY_TYPES.SOURCE,
+          status: getHealthStatus(source),
+          title: getEntityLabel(source, OVERVIEW_ENTITY_TYPES.SOURCE, { extended: true }),
+          subTitle: source.kind,
+          imageUri: getMainContainerLanguageLogo(source),
+          metric,
+        }),
       );
     });
   }
@@ -263,43 +199,26 @@ export const buildNodesAndEdges = ({
   // Build Action Nodes
   if (!actions.length) {
     tempNodes['actions'].push(
-      createNode(
-        'action-0',
-        'add',
-        postions['actions']['x'],
-        postions['rules']['y'](),
-        {
-          type: OVERVIEW_NODE_TYPES.ADD_ACTION,
-          status: STATUSES.HEALTHY,
-          title: 'ADD ACTION',
-          subTitle: 'Add first action to modify the OpenTelemetry data',
-        }
-      )
+      createNode('action-0', 'add', postions['actions']['x'], postions['rules']['y'](), {
+        type: OVERVIEW_NODE_TYPES.ADD_ACTION,
+        status: STATUSES.HEALTHY,
+        title: 'ADD ACTION',
+        subTitle: 'Add first action to modify the OpenTelemetry data',
+      }),
     );
   } else {
     actions.forEach((action, idx) => {
-      const spec: ActionItem =
-        typeof action.spec === 'string'
-          ? JSON.parse(action.spec)
-          : (action.spec as ActionItem);
-
       tempNodes['actions'].push(
-        createNode(
-          `action-${idx}`,
-          'base',
-          postions['actions']['x'],
-          postions['rules']['y'](idx),
-          {
-            id: action.id,
-            type: OVERVIEW_ENTITY_TYPES.ACTION,
-            status: STATUSES.HEALTHY,
-            title: spec.actionName || action.type,
-            subTitle: action.type,
-            imageUri: getActionIcon(action.type),
-            monitors: spec.signals,
-            isActive: !spec.disabled,
-          }
-        )
+        createNode(`action-${idx}`, 'base', postions['actions']['x'], postions['rules']['y'](idx), {
+          id: action.id,
+          type: OVERVIEW_ENTITY_TYPES.ACTION,
+          status: STATUSES.HEALTHY,
+          title: getEntityLabel(action, OVERVIEW_ENTITY_TYPES.ACTION, { prioritizeDisplayName: true }),
+          subTitle: action.type,
+          imageUri: getActionIcon(action.type),
+          monitors: action.spec.signals,
+          isActive: !action.spec.disabled,
+        }),
       );
     });
 
@@ -322,50 +241,36 @@ export const buildNodesAndEdges = ({
           border: `1px dashed ${theme.colors.border}`,
           borderRadius: 24,
           zIndex: -1,
-        }
-      )
+        },
+      ),
     );
   }
 
   // Build Destination Nodes
   if (!destinations.length) {
     tempNodes['destinations'].push(
-      createNode(
-        'destination-0',
-        'add',
-        postions['destinations']['x'],
-        postions['rules']['y'](),
-        {
-          type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
-          status: STATUSES.HEALTHY,
-          title: 'ADD DESTIONATION',
-          subTitle: 'Add first destination to monitor OpenTelemetry data',
-        }
-      )
+      createNode('destination-0', 'add', postions['destinations']['x'], postions['rules']['y'](), {
+        type: OVERVIEW_NODE_TYPES.ADD_DESTIONATION,
+        status: STATUSES.HEALTHY,
+        title: 'ADD DESTIONATION',
+        subTitle: 'Add first destination to monitor OpenTelemetry data',
+      }),
     );
   } else {
     destinations.forEach((destination, idx) => {
-      const metric = metrics?.getOverviewMetrics.destinations.find(
-        ({ id }) => id === destination.id
-      );
+      const metric = metrics?.getOverviewMetrics.destinations.find(({ id }) => id === destination.id);
 
       tempNodes['destinations'].push(
-        createNode(
-          `destination-${idx}`,
-          'base',
-          postions['destinations']['x'],
-          postions['rules']['y'](idx),
-          {
-            id: destination.id,
-            type: OVERVIEW_ENTITY_TYPES.DESTINATION,
-            status: getHealthStatus(destination),
-            title: destination.name || destination.destinationType.displayName,
-            subTitle: destination.destinationType.displayName,
-            imageUri: destination.destinationType.imageUrl,
-            monitors: extractMonitors(destination.exportedSignals),
-            metric,
-          }
-        )
+        createNode(`destination-${idx}`, 'base', postions['destinations']['x'], postions['rules']['y'](idx), {
+          id: destination.id,
+          type: OVERVIEW_ENTITY_TYPES.DESTINATION,
+          status: getHealthStatus(destination),
+          title: getEntityLabel(destination, OVERVIEW_ENTITY_TYPES.DESTINATION, { prioritizeDisplayName: true }),
+          subTitle: destination.destinationType.displayName,
+          imageUri: destination.destinationType.imageUrl,
+          monitors: extractMonitors(destination.exportedSignals),
+          metric,
+        }),
       );
     });
   }
@@ -385,7 +290,7 @@ export const buildNodesAndEdges = ({
             isMultiTarget: false,
             label: formatBytes(node.data.metric?.throughput),
             isError: node.data.status === STATUSES.UNHEALTHY,
-          })
+          }),
         );
       }
     });
@@ -395,9 +300,7 @@ export const buildNodesAndEdges = ({
   if (!!actions.length) {
     actions.forEach((_, sourceActionIndex) => {
       const targetActionIndex = sourceActionIndex + 1;
-      edges.push(
-        createEdge(`action-${sourceActionIndex}-to-action-${targetActionIndex}`)
-      );
+      edges.push(createEdge(`action-${sourceActionIndex}-to-action-${targetActionIndex}`));
     });
   }
 
@@ -411,15 +314,12 @@ export const buildNodesAndEdges = ({
         const actionIndex = actions.length ? 'group' : 0;
 
         edges.push(
-          createEdge(
-            `action-${actionIndex}-to-destination-${destinationIndex}`,
-            {
-              animated: false,
-              isMultiTarget: true,
-              label: formatBytes(node.data.metric?.throughput),
-              isError: node.data.status === STATUSES.UNHEALTHY,
-            }
-          )
+          createEdge(`action-${actionIndex}-to-destination-${destinationIndex}`, {
+            animated: false,
+            isMultiTarget: true,
+            label: formatBytes(node.data.metric?.throughput),
+            isError: node.data.status === STATUSES.UNHEALTHY,
+          }),
         );
       }
     });
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
index 7cae41c02..60c790bd6 100644
--- a/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
+++ b/frontend/webapp/reuseable-components/nodes-data-flow/nodes/header-node.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
-import { Text } from '@/reuseable-components';
+import { Badge, Text } from '@/reuseable-components';
 
 const ColumnContainer = styled.div<{ nodeWidth: number }>`
   width: ${({ nodeWidth }) => `${nodeWidth + 40}px`};
@@ -13,24 +13,10 @@ const ColumnContainer = styled.div<{ nodeWidth: number }>`
   border-bottom: 1px solid ${({ theme }) => theme.colors.border};
 `;
 
-const TagValueContainer = styled.div`
-  border: 1px solid ${({ theme }) => theme.colors.border};
-  padding: 0px 8px;
-  border-radius: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-`;
-
 const Title = styled(Text)`
   color: ${({ theme }) => theme.text.grey};
 `;
 
-const TagText = styled(Title)`
-  font-family: ${({ theme }) => theme.font_family.secondary};
-`;
-
 interface Column {
   icon: string;
   title: string;
@@ -47,9 +33,7 @@ const HeaderNode = ({ data, nodeWidth }: HeaderNodeProps) => {
     <ColumnContainer nodeWidth={nodeWidth}>
       <Image src={data.icon} width={16} height={16} alt={data.title} />
       <Title size={14}>{data.title}</Title>
-      <TagValueContainer>
-        <TagText size={12}>{data.tagValue}</TagText>
-      </TagValueContainer>
+      <Badge label={data.tagValue} />
     </ColumnContainer>
   );
 };
diff --git a/frontend/webapp/reuseable-components/tab-list/index.tsx b/frontend/webapp/reuseable-components/tab-list/index.tsx
index 49b6ad0e7..6f33723bb 100644
--- a/frontend/webapp/reuseable-components/tab-list/index.tsx
+++ b/frontend/webapp/reuseable-components/tab-list/index.tsx
@@ -28,12 +28,12 @@ const TabContainer = styled.div<{ selected: TabProps['selected']; disabled: TabP
   padding: 0px 12px;
   border-radius: 32px;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  background-color: ${({ selected, theme }) => (selected ? theme.colors.selected_hover : theme.colors.card)};
+  background-color: ${({ selected, theme }) => (selected ? theme.colors.majestic_blue + '3D' : theme.colors.card)};
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   transition: background-color 0.3s, color 0.3s;
 
   &:hover {
-    background-color: ${({ disabled, theme }) => (disabled ? 'none' : theme.colors.selected_hover)};
+    background-color: ${({ disabled, theme }) => (disabled ? 'none' : theme.colors.majestic_blue + '3D')};
   }
 
   svg {
diff --git a/frontend/webapp/styles/theme.ts b/frontend/webapp/styles/theme.ts
index 715f46ec3..606fc2a3c 100644
--- a/frontend/webapp/styles/theme.ts
+++ b/frontend/webapp/styles/theme.ts
@@ -9,7 +9,6 @@ const colors = {
   border: '#525252',
   translucent_bg: '#1A1A1A',
   majestic_blue: '#444AD9',
-  selected_hover: '#444AD93D',
   card: '#F9F9F90A',
   dropdown_bg: '#242424',
   blank_background: '#11111100',
diff --git a/frontend/webapp/utils/functions/get-entity-label.ts b/frontend/webapp/utils/functions/get-entity-label.ts
new file mode 100644
index 000000000..964eca7de
--- /dev/null
+++ b/frontend/webapp/utils/functions/get-entity-label.ts
@@ -0,0 +1,45 @@
+import { ActionData, ActionDataParsed, ActualDestination, InstrumentationRuleSpec, K8sActualSource, OVERVIEW_ENTITY_TYPES } from '@/types';
+
+export const getEntityLabel = (
+  entity: InstrumentationRuleSpec | K8sActualSource | ActionData | ActualDestination,
+  entityType: OVERVIEW_ENTITY_TYPES,
+  options?: { extended?: boolean; prioritizeDisplayName?: boolean },
+): string => {
+  const { extended, prioritizeDisplayName } = options || {};
+
+  let type = '';
+  let name = '';
+
+  switch (entityType) {
+    case OVERVIEW_ENTITY_TYPES.RULE:
+      const rule = entity as InstrumentationRuleSpec;
+      type = rule.type as string;
+      name = rule.ruleName;
+      break;
+
+    case OVERVIEW_ENTITY_TYPES.SOURCE:
+      const source = entity as K8sActualSource;
+      type = source.name;
+      name = source.reportedName;
+      break;
+
+    case OVERVIEW_ENTITY_TYPES.ACTION:
+      const action = entity as ActionDataParsed;
+      type = action.type;
+      name = action.spec.actionName;
+      break;
+
+    case OVERVIEW_ENTITY_TYPES.DESTINATION:
+      const destination = entity as ActualDestination;
+      type = destination.destinationType.displayName;
+      name = destination.name;
+      break;
+
+    default:
+      break;
+  }
+
+  if (extended) return type + (name ? ` (${name})` : '');
+  else if (prioritizeDisplayName) return name || type;
+  else return type;
+};
diff --git a/frontend/webapp/utils/functions/get-health-status.ts b/frontend/webapp/utils/functions/get-health-status.ts
new file mode 100644
index 000000000..6f2d97205
--- /dev/null
+++ b/frontend/webapp/utils/functions/get-health-status.ts
@@ -0,0 +1,8 @@
+import { STATUSES, type ActualDestination, type K8sActualSource } from '@/types';
+
+export const getHealthStatus = (item: K8sActualSource | ActualDestination) => {
+  const conditions = (item as K8sActualSource)?.instrumentedApplicationDetails?.conditions || (item as ActualDestination)?.conditions || [];
+  const isUnhealthy = !conditions.length || !!conditions.find(({ status }) => status === 'False');
+
+  return isUnhealthy ? STATUSES.UNHEALTHY : STATUSES.HEALTHY;
+};
diff --git a/frontend/webapp/utils/functions/icons.ts b/frontend/webapp/utils/functions/icons.ts
index ed9f628ba..fddb81e85 100644
--- a/frontend/webapp/utils/functions/icons.ts
+++ b/frontend/webapp/utils/functions/icons.ts
@@ -1,4 +1,4 @@
-import type { ActionsType, InstrumentationRuleType, NotificationType } from '@/types';
+import { type ActionsType, type InstrumentationRuleType, type NotificationType, OVERVIEW_ENTITY_TYPES } from '@/types';
 
 const BRAND_ICON = '/brand/odigos-icon.svg';
 
@@ -19,6 +19,12 @@ export const getStatusIcon = (status?: NotificationType) => {
   }
 };
 
+export const getEntityIcon = (type?: OVERVIEW_ENTITY_TYPES) => {
+  if (!type) return BRAND_ICON;
+
+  return `/icons/overview/${type}s.svg`;
+};
+
 export const getRuleIcon = (type?: InstrumentationRuleType) => {
   if (!type) return BRAND_ICON;
 
diff --git a/frontend/webapp/utils/functions/index.ts b/frontend/webapp/utils/functions/index.ts
index b8aac660b..57838fb20 100644
--- a/frontend/webapp/utils/functions/index.ts
+++ b/frontend/webapp/utils/functions/index.ts
@@ -1,5 +1,7 @@
 export * from './derive-types';
 export * from './formatters';
+export * from './get-entity-label';
+export * from './get-health-status';
 export * from './get-value-for-range';
 export * from './icons';
 export * from './strings';

From b314d77fdbc882bbd5dd6ddf4dc322bad7c9d704 Mon Sep 17 00:00:00 2001
From: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:29:41 +0200
Subject: [PATCH 350/374] [GEN-1703] merge main (#1732)

Co-authored-by: Tamir David <tamir@odigos.io>
Co-authored-by: Tamir David <tamirdavid@Tamirs-MacBook-Pro.local>
Co-authored-by: Amir Blum <amirgiraffe@gmail.com>
Co-authored-by: Ben Elferink <ben.elferink@icloud.com>
Co-authored-by: Ron Federman <73110295+RonFed@users.noreply.github.com>
Co-authored-by: yodigos <yoav@odigos.io>
Co-authored-by: Mike Dame <mike@odigos.io>
---
 .github/workflows/cross-cloud-tests.yaml      | 240 ++++++++
 .gitignore                                    |   7 +-
 .../crd/bases/odigos.io_collectorsgroups.yaml |   9 +-
 .../odigos.io_instrumentationconfigs.yaml     |   5 +
 .../odigos.io_instrumentedapplications.yaml   |   5 +
 .../bases/odigos.io_odigosconfigurations.yaml |  30 -
 .../odigos/v1alpha1/collectorsgroupspec.go    |  20 +-
 .../v1alpha1/odigosconfigurationspec.go       |  34 --
 .../odigos/v1alpha1/otheragent.go             |  38 ++
 .../v1alpha1/runtimedetailsbycontainer.go     |  17 +-
 .../odigos/applyconfiguration/utils.go        |   2 +
 api/odigos/v1alpha1/collectorsgroup_types.go  |   7 +-
 .../v1alpha1/instrumentedapplication_types.go |   5 +
 api/odigos/v1alpha1/odigosconfig_types.go     |   3 -
 api/odigos/v1alpha1/zz_generated.deepcopy.go  |  43 +-
 .../controllers/collectorsgroup_controller.go |  19 +-
 .../controller_config/controller_config.go    |   5 +
 .../controllers/datacollection/configmap.go   |  33 +-
 autoscaler/controllers/datacollection/root.go |   9 +-
 .../controllers/destination_controller.go     |   4 +-
 autoscaler/controllers/gateway/configmap.go   |  22 +-
 .../controllers/gateway/configmap_test.go     |  14 +-
 autoscaler/controllers/gateway/hpa.go         |  15 +-
 autoscaler/controllers/gateway/root.go        |  32 +-
 autoscaler/controllers/gateway/service.go     |   6 +-
 .../instrumentedapplication_controller.go     |  11 +-
 .../controllers/odigosconfig_controller.go    |  11 +-
 .../controllers/processor_controller.go       |  15 +-
 autoscaler/controllers/secret_controller.go   |   4 +-
 autoscaler/main.go                            |  74 ++-
 cli/cmd/describe.go                           |  28 +-
 cli/cmd/diagnose.go                           | 269 ++-------
 cli/cmd/diagnose_util/crd_utils.go            | 171 ++++++
 cli/cmd/diagnose_util/logs_util.go            | 124 ++++
 cli/cmd/diagnose_util/profiling_util.go       | 234 ++++++++
 cli/cmd/install.go                            |  43 --
 cli/cmd/resources/autoscaler.go               |  26 +-
 cli/cmd/resources/datacollection.go           |   3 +-
 cli/cmd/resources/instrumentor.go             |  25 +-
 cli/cmd/resources/keyvalproxy.go              |   3 +-
 cli/cmd/resources/odiglet.go                  |   3 +-
 cli/cmd/resources/odigosconfig.go             |   5 +-
 cli/cmd/resources/odigosdeployment.go         |   8 +-
 cli/cmd/resources/odigospro/manager.go        |   3 +-
 cli/cmd/resources/owntelemetry.go             |   7 +-
 cli/cmd/resources/profiles.go                 |  44 +-
 cli/cmd/resources/profiles/render.go          |   6 +-
 cli/cmd/resources/profiles/small-batches.yaml |  15 +
 cli/cmd/resources/scheduler.go                |   3 +-
 cli/cmd/resources/ui.go                       |   5 +-
 cli/cmd/uninstall.go                          |  27 +-
 cli/go.mod                                    |   2 +-
 cli/pkg/kube/client.go                        |  15 +-
 .../odigos/v1alpha1/collectorsgroup.go        |  98 ----
 .../listers/odigos/v1alpha1/destination.go    |  98 ----
 .../odigos/v1alpha1/expansion_generated.go    |  58 --
 .../v1alpha1/instrumentedapplication.go       |  98 ----
 .../odigos/v1alpha1/odigosconfiguration.go    |  98 ----
 cli/pkg/listers/odigos/v1alpha1/processor.go  |  98 ----
 common/consts/consts.go                       |  23 +-
 common/envOverwrite/overwriter.go             |  28 +
 common/envOverwrite/overwriter_test.go        |  27 +
 common/odigos_config.go                       |   8 +-
 docs/README.md                                |   4 +-
 docs/mint.json                                |   2 +-
 .../installation-guide-for-beginners.mdx      | 210 +++----
 docs/setup/docker-registry.mdx                |  14 +
 docs/setup/odigos-with-argocd.mdx             |  31 +
 .../collector_metrics/cluster_collector.go    |  23 +-
 .../collector_metrics/node_collector.go       |   9 +-
 frontend/endpoints/collector_metrics/utils.go |  14 +
 .../endpoints/collector_metrics/utils_test.go |  33 ++
 frontend/endpoints/describe.go                |  54 +-
 frontend/endpoints/sources.go                 |  14 +-
 frontend/webapp/app/layout.tsx                |   6 +
 .../webapp/assets/icons/general/describe.svg  |   1 +
 frontend/webapp/assets/icons/general/index.ts |   5 +-
 .../webapp/assets/icons/general/refresh.svg   |   1 +
 frontend/webapp/package.json                  |   2 -
 .../webapp/public/brand/odigos_black_icon.svg |   6 +
 frontend/webapp/services/actions.ts           |  26 -
 frontend/webapp/services/api.ts               |  29 -
 frontend/webapp/services/config.ts            |   6 -
 frontend/webapp/services/destinations.ts      |  30 -
 frontend/webapp/services/index.ts             |   5 -
 .../webapp/services/instrumentation-rules.ts  |  33 --
 frontend/webapp/services/metrics.ts           |   6 -
 frontend/webapp/services/sources.ts           |  47 --
 frontend/webapp/styles/global.tsx             |   5 -
 frontend/webapp/styles/styled.tsx             |   9 -
 frontend/webapp/types/actions.ts              |  30 -
 frontend/webapp/types/destinations.ts         |  21 -
 frontend/webapp/types/sources.ts              |  92 ---
 frontend/webapp/utils/constants/config.tsx    |   2 +-
 frontend/webapp/utils/constants/index.tsx     |   2 +-
 .../utils/constants/programming.languages.ts  |  84 ---
 frontend/webapp/utils/constants/routes.tsx    |  17 +-
 frontend/webapp/utils/constants/string.tsx    | 157 -----
 frontend/webapp/utils/constants/urls.tsx      |  32 +-
 frontend/webapp/yarn.lock                     |  95 +--
 .../cleanup/cleanup-clusterrole.yaml          |   4 +
 .../templates/instrumentor/clusterrole.yaml   |   1 -
 .../templates/instrumentor/deployment.yaml    |   2 +
 helm/odigos/templates/odigos-config-cm.yaml   |   6 +
 helm/odigos/templates/odigos-deployment.yaml  |   1 +
 helm/odigos/templates/ui/clusterrole.yaml     |   1 +
 helm/odigos/values.yaml                       |   5 +
 .../deleteinstrumentedapplication/manager.go  |   2 +-
 .../namespace_controller.go                   | 122 +++-
 .../collectorsgroup_controller.go             |  41 +-
 .../instrumentationdevice/common.go           | 129 ++--
 .../envoverwiter_test.go                      |  62 +-
 .../instrumentationrule_controller.go         |  14 +-
 .../instrumentedapplication_controller.go     |  10 +-
 .../instrumentationdevice/manager.go          |  23 +-
 .../odigosconfig_contoller.go                 |  44 --
 .../instrumentationdevice/pods_webhook.go     |  20 +-
 .../instrumentationdevice/suite_test.go       |  17 +-
 .../workload_controllers.go                   |  22 +-
 .../controllers/startlangdetection/manager.go |   5 +-
 .../odigosconfig_controller.go                |  56 +-
 instrumentor/controllers/utils/predicate.go   |  18 -
 instrumentor/go.mod                           |   2 +-
 .../instrumentation/instrumentation.go        | 115 +++-
 instrumentor/internal/testutil/mocks.go       |  47 +-
 instrumentor/main.go                          |  81 +--
 instrumentor/sdks/sdks.go                     |  78 +++
 k8sutils/pkg/client/cache_api_fallback.go     |  96 ---
 k8sutils/pkg/consts/consts.go                 |  25 +-
 k8sutils/pkg/container/container.go           |  17 +-
 k8sutils/pkg/describe/common.go               |  27 +-
 k8sutils/pkg/describe/odigos.go               | 295 ++--------
 k8sutils/pkg/describe/odigos/analyze.go       | 386 ++++++++++++
 k8sutils/pkg/describe/odigos/resources.go     | 151 +++++
 .../pkg/describe/properties/properties.go     |  33 ++
 k8sutils/pkg/describe/properties/utils.go     |  25 +
 k8sutils/pkg/describe/source.go               | 489 ++++------------
 k8sutils/pkg/describe/source/analyze.go       | 551 ++++++++++++++++++
 k8sutils/pkg/describe/source/resources.go     |  75 +++
 k8sutils/pkg/describe/source/source.go        |  13 +
 k8sutils/pkg/env/env.go                       |  19 +-
 k8sutils/pkg/envoverwrite/origenv.go          |  13 +-
 k8sutils/pkg/predicate/cgbecomesready.go      |  56 ++
 k8sutils/pkg/predicate/cm_changed.go          |  45 ++
 k8sutils/pkg/predicate/existence.go           |  33 ++
 k8sutils/pkg/predicate/objectname.go          |  84 +++
 k8sutils/pkg/predicate/onlyupdate.go          |  29 +
 k8sutils/pkg/utils/collectorgroup_util.go     |  15 +-
 k8sutils/pkg/utils/retryonconflict.go         |  16 +
 odiglet/Makefile                              |  19 +-
 odiglet/cmd/main.go                           |  14 +
 odiglet/go.mod                                |   1 +
 odiglet/go.sum                                |   2 +
 odiglet/pkg/detector/detector.go              | 107 ++++
 odiglet/pkg/instrumentation/plugin.go         |  25 +-
 .../pkg/kube/runtime_details/inspection.go    |  10 +
 .../runtime_details/instconfig_controller.go  |   4 +-
 .../instrumentationconfigs_controller.go      |   1 -
 .../kube/runtime_details/pods_controller.go   |  63 +-
 odiglet/pkg/kube/utils/utils.go               |   7 +-
 .../sdkconfig/collectorsgroup_controller.go   |   2 +-
 procdiscovery/pkg/process/process.go          |  25 +-
 .../controllers/collectorgroups/cluster.go    |   7 +-
 .../collectorgroups/datacollection.go         |  20 +-
 .../controllers/collectorsgroup_controller.go | 113 ----
 .../controllers/destination_controller.go     |  20 +-
 .../instrumentationconfig_controller.go       |  81 ---
 .../controllers/nodecollector_controller.go   | 106 ++++
 scheduler/go.mod                              |   4 +-
 scheduler/main.go                             |  28 +-
 tests-infrastructure/terraform/aks/main.tf    |  27 +
 tests-infrastructure/terraform/aks/outputs.tf |   4 +
 .../terraform/aks/provider.tf                 |   3 +
 .../terraform/aks/variables.tf                |  24 +
 .../assert-instrumented-and-pipeline.yaml     |  52 +-
 .../assert-instrumented-and-pipeline.yaml     |  12 +
 .../assert-instrumented-and-pipeline.yaml     |  14 +-
 tests/e2e/helm-chart/chainsaw-test.yaml       |  83 ++-
 .../tracesql/resource-attributes.yaml         |   4 +-
 .../assert-instrumented-and-pipeline.yaml     |  14 +-
 tests/e2e/multi-apps/chainsaw-test.yaml       |  57 +-
 .../tracesql/resource-attributes.yaml         |   4 +-
 .../01-assert-instrumented.yaml               |  46 +-
 .../java-http-server/java-azul.Dockerfile     |   2 +-
 .../java-supported-docker-env.Dockerfile      |   2 +-
 .../java-supported-manifest-env.Dockerfile    |   2 +-
 .../java-supported-version.Dockerfile         |   2 +-
 187 files changed, 4537 insertions(+), 3494 deletions(-)
 create mode 100644 .github/workflows/cross-cloud-tests.yaml
 create mode 100644 api/generated/odigos/applyconfiguration/odigos/v1alpha1/otheragent.go
 create mode 100644 autoscaler/controllers/controller_config/controller_config.go
 create mode 100644 cli/cmd/diagnose_util/crd_utils.go
 create mode 100644 cli/cmd/diagnose_util/logs_util.go
 create mode 100644 cli/cmd/diagnose_util/profiling_util.go
 create mode 100644 cli/cmd/resources/profiles/small-batches.yaml
 delete mode 100644 cli/pkg/listers/odigos/v1alpha1/collectorsgroup.go
 delete mode 100644 cli/pkg/listers/odigos/v1alpha1/destination.go
 delete mode 100644 cli/pkg/listers/odigos/v1alpha1/expansion_generated.go
 delete mode 100644 cli/pkg/listers/odigos/v1alpha1/instrumentedapplication.go
 delete mode 100644 cli/pkg/listers/odigos/v1alpha1/odigosconfiguration.go
 delete mode 100644 cli/pkg/listers/odigos/v1alpha1/processor.go
 create mode 100644 docs/setup/odigos-with-argocd.mdx
 create mode 100644 frontend/endpoints/collector_metrics/utils.go
 create mode 100644 frontend/endpoints/collector_metrics/utils_test.go
 create mode 100644 frontend/webapp/assets/icons/general/describe.svg
 create mode 100644 frontend/webapp/assets/icons/general/refresh.svg
 create mode 100644 frontend/webapp/public/brand/odigos_black_icon.svg
 delete mode 100644 frontend/webapp/services/actions.ts
 delete mode 100644 frontend/webapp/services/api.ts
 delete mode 100644 frontend/webapp/services/config.ts
 delete mode 100644 frontend/webapp/services/destinations.ts
 delete mode 100644 frontend/webapp/services/index.ts
 delete mode 100644 frontend/webapp/services/instrumentation-rules.ts
 delete mode 100644 frontend/webapp/services/metrics.ts
 delete mode 100644 frontend/webapp/services/sources.ts
 delete mode 100644 frontend/webapp/styles/global.tsx
 delete mode 100644 frontend/webapp/utils/constants/programming.languages.ts
 delete mode 100644 instrumentor/controllers/instrumentationdevice/odigosconfig_contoller.go
 create mode 100644 instrumentor/sdks/sdks.go
 delete mode 100644 k8sutils/pkg/client/cache_api_fallback.go
 create mode 100644 k8sutils/pkg/describe/odigos/analyze.go
 create mode 100644 k8sutils/pkg/describe/odigos/resources.go
 create mode 100644 k8sutils/pkg/describe/properties/properties.go
 create mode 100644 k8sutils/pkg/describe/properties/utils.go
 create mode 100644 k8sutils/pkg/describe/source/analyze.go
 create mode 100644 k8sutils/pkg/describe/source/resources.go
 create mode 100644 k8sutils/pkg/describe/source/source.go
 create mode 100644 k8sutils/pkg/predicate/cgbecomesready.go
 create mode 100644 k8sutils/pkg/predicate/cm_changed.go
 create mode 100644 k8sutils/pkg/predicate/existence.go
 create mode 100644 k8sutils/pkg/predicate/objectname.go
 create mode 100644 k8sutils/pkg/predicate/onlyupdate.go
 create mode 100644 k8sutils/pkg/utils/retryonconflict.go
 create mode 100644 odiglet/pkg/detector/detector.go
 delete mode 100644 scheduler/controllers/collectorsgroup_controller.go
 delete mode 100644 scheduler/controllers/instrumentationconfig_controller.go
 create mode 100644 scheduler/controllers/nodecollector_controller.go
 create mode 100644 tests-infrastructure/terraform/aks/main.tf
 create mode 100644 tests-infrastructure/terraform/aks/outputs.tf
 create mode 100644 tests-infrastructure/terraform/aks/provider.tf
 create mode 100644 tests-infrastructure/terraform/aks/variables.tf

diff --git a/.github/workflows/cross-cloud-tests.yaml b/.github/workflows/cross-cloud-tests.yaml
new file mode 100644
index 000000000..a6dbf5191
--- /dev/null
+++ b/.github/workflows/cross-cloud-tests.yaml
@@ -0,0 +1,240 @@
+name: Cross-Cloud Chainsaw Tests
+
+on:
+  schedule:
+    - cron: '0 0 * * *' # Nightly run at midnight
+  workflow_dispatch: # Manual trigger
+
+
+permissions:
+  id-token: write
+  contents: read  
+
+jobs:
+  build-and-push-images:  
+    permissions:
+      id-token: write
+      contents: read  
+    name: Build and Push Docker Images
+    runs-on: warp-ubuntu-latest-x64-8x-spot
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+
+      - name: Configure AWS credentials from OIDC
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: arn:aws:iam::061717858829:role/ecr-pull-push-role
+          aws-region: us-east-1
+
+
+      - name: Login to Amazon ECR
+        run: |
+          aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws
+
+      - name: Build and Tag Docker Images
+        env:
+          COMMIT_HASH: ${{ github.sha }}
+        run: |
+          # Build images
+          make build-images TAG=${COMMIT_HASH}
+          # Tag images for public ECR
+          docker tag keyval/odigos-collector:${COMMIT_HASH} public.ecr.aws/y2v0v6s7/keyval/odigos-collector:${COMMIT_HASH}
+          docker tag keyval/odigos-instrumentor:${COMMIT_HASH} public.ecr.aws/y2v0v6s7/keyval/odigos-instrumentor:${COMMIT_HASH}
+          docker tag keyval/odigos-ui:${COMMIT_HASH} public.ecr.aws/y2v0v6s7/keyval/odigos-ui:${COMMIT_HASH}
+          docker tag keyval/odigos-scheduler:${COMMIT_HASH} public.ecr.aws/y2v0v6s7/keyval/odigos-scheduler:${COMMIT_HASH}
+          docker tag keyval/odigos-autoscaler:${COMMIT_HASH} public.ecr.aws/y2v0v6s7/keyval/odigos-autoscaler:${COMMIT_HASH}
+          docker tag keyval/odigos-odiglet:${COMMIT_HASH} public.ecr.aws/y2v0v6s7/keyval/odigos-odiglet:${COMMIT_HASH}
+
+          docker push public.ecr.aws/y2v0v6s7/keyval/odigos-collector:${COMMIT_HASH}
+          docker push public.ecr.aws/y2v0v6s7/keyval/odigos-instrumentor:${COMMIT_HASH}
+          docker push public.ecr.aws/y2v0v6s7/keyval/odigos-ui:${COMMIT_HASH}
+          docker push public.ecr.aws/y2v0v6s7/keyval/odigos-scheduler:${COMMIT_HASH}
+          docker push public.ecr.aws/y2v0v6s7/keyval/odigos-autoscaler:${COMMIT_HASH}
+          docker push public.ecr.aws/y2v0v6s7/keyval/odigos-odiglet:${COMMIT_HASH}
+
+  test:
+    permissions:
+      id-token: write
+      contents: read    
+    needs: build-and-push-images
+    runs-on: warp-ubuntu-latest-x64-8x-spot
+    strategy:
+      matrix:
+        cloud-provider: [aks] # Add or remove providers as needed [TODO: later add -> eks + gke]
+        test-scenario: [multi-apps, helm-chart] # Add or remove scenarios as needed
+
+    steps:
+
+      - name: Configure AWS credentials from OIDC
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: arn:aws:iam::061717858829:role/ecr-pull-push-role
+          aws-region: us-east-1
+
+      - name: Login to Amazon ECR
+        run: |
+          aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws
+
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Set Environment Variables for Terraform
+        run: |
+          CLUSTER_NAME="${{ matrix.test-scenario }}-${{ github.run_id }}"
+          echo "CLUSTER_NAME=${CLUSTER_NAME}" >> $GITHUB_ENV
+          echo "TF_VAR_cluster_name=${CLUSTER_NAME}" >> $GITHUB_ENV
+          echo "TF_VAR_resource_group_name=${CLUSTER_NAME}" >> $GITHUB_ENV
+          echo "TF_VAR_test_scenario=${{ matrix.test-scenario }}" >> $GITHUB_ENV
+          echo "TF_VAR_run_id=${{ github.run_id }}" >> $GITHUB_ENV
+
+
+      - name: Configure Cloud Provider
+        run: |
+          if [ "${{ matrix.cloud-provider }}" = "aks" ]; then
+            echo "Configuring for AKS"
+            
+            # Set environment variables for Azure provider
+            echo "ARM_CLIENT_ID=${{ secrets.AZURE_CLIENT_ID }}" >> $GITHUB_ENV
+            echo "ARM_CLIENT_SECRET=${{ secrets.AZURE_CLIENT_SECRET }}" >> $GITHUB_ENV
+            echo "ARM_TENANT_ID=${{ secrets.AZURE_TENANT_ID }}" >> $GITHUB_ENV
+            echo "ARM_SUBSCRIPTION_ID=${{ secrets.AZURE_SUBSCRIPTION_ID }}" >> $GITHUB_ENV
+
+            az login --service-principal -u ${{ secrets.AZURE_CLIENT_ID }} -p ${{ secrets.AZURE_CLIENT_SECRET }} --tenant ${{ secrets.AZURE_TENANT_ID }}
+            az account set --subscription ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
+          elif [ "${{ matrix.cloud-provider }}" = "eks" ]; then
+            echo "Configuring for EKS"
+            aws configure set aws_access_key_id ${{ secrets.AWS_ACCESS_KEY_ID }}
+            aws configure set aws_secret_access_key ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+            aws configure set region us-east-1
+
+          elif [ "${{ matrix.cloud-provider }}" = "gke" ]; then
+            echo "Configuring for GKE"
+            echo "${{ secrets.GCP_SERVICE_ACCOUNT_KEY }}" | base64 --decode > gcp-key.json
+            gcloud auth activate-service-account --key-file=gcp-key.json
+            gcloud config set project ${{ secrets.GCP_PROJECT_ID }}
+
+          else
+            echo "Unknown cloud provider: ${{ matrix.cloud-provider }}"
+            exit 1
+          fi
+
+      - uses: opentofu/setup-opentofu@v1
+
+      - name: Set Terraform Directory Based on Cloud Provider
+        run: |
+          if [ "${{ matrix.cloud-provider }}" == "aks" ]; then
+            echo "TF_DIR=./tests-infrastructure/terraform/aks" >> $GITHUB_ENV
+          elif [ "${{ matrix.cloud-provider }}" == "eks" ]; then
+            echo "TF_DIR=./tests-infrastructure/terraform/eks" >> $GITHUB_ENV
+          elif [ "${{ matrix.cloud-provider }}" == "gke" ]; then
+            echo "TF_DIR=./tests-infrastructure/terraform/gke" >> $GITHUB_ENV
+          else
+            echo "Unknown cloud provider"
+            exit 1
+          fi
+
+      - name: Initialize OpenTofu
+        run: tofu -chdir=$TF_DIR init 
+
+
+      - name: Plan OpenTofu
+        run: tofu -chdir=$TF_DIR plan
+
+      - name: Apply OpenTofu Configuration
+        run: |
+          tofu -chdir=$TF_DIR apply -auto-approve
+
+      - name: Get kubeconfig for AKS/EKS/GKE
+        run: |
+          if [ "${{ matrix.cloud-provider }}" == "aks" ]; then
+            echo "Fetching AKS kubeconfig..."
+            az aks get-credentials --resource-group $CLUSTER_NAME --name $CLUSTER_NAME
+          elif [ "${{ matrix.cloud-provider }}" == "eks" ]; then
+            echo "Fetching EKS kubeconfig..."
+          elif [ "${{ matrix.cloud-provider }}" == "gke" ]; then
+            echo "Fetching GKE kubeconfig..."
+          else
+            echo "Unknown cloud provider"
+            exit 1
+          fi
+
+      - name: Verify cluster Access
+        run: |
+          kubectl get nodes || exit 1 
+
+      - name: Install Chainsaw
+        uses: kyverno/action-install-chainsaw@v0.2.8
+
+      - name: Build CLI
+        run: |
+          cd cli
+          go build -tags=embed_manifests -o odigos
+          chmod +x odigos
+
+      - name: Install FE
+        # this is used for cypress tests which are not run in every scenario
+        if: matrix.test-scenario == 'multi-apps' || matrix.test-scenario == 'helm-chart' || matrix.test-scenario == 'fe-synthetic'
+        run: |
+          cd frontend/webapp
+          yarn install
+
+      - name: Run E2E Tests
+        run: |
+
+          # This uses in chainsaw to split e2e tests from cross cloud tests
+          export MODE=cross-cloud-tests
+          
+          # This uses in chainsaw to verify the odigos version is equal to the commit version
+          export COMMIT_HASH=${{ github.sha }}
+
+          chainsaw test tests/e2e/${{ matrix.test-scenario }}
+      
+      - name: Run diagnose command
+        if: always()
+        run: |
+          ./cli/odigos diagnose
+        continue-on-error: true
+        
+      - name: Upload run details artifact
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: run-details-${{ matrix.cloud-provider }}-${{ matrix.test-scenario }}
+          path: odigos_debug*.tar.gz
+        continue-on-error: true
+
+      - name: Destroy Resources
+        if: always()
+        run: |
+          tofu -chdir=$TF_DIR destroy -auto-approve
+
+      - name: Extract Tag
+        id: extract_tag
+        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
+
+      # Notify Slack on Failure or Cancellation
+      - name: Notify Slack on Failure or Cancellation
+        if: ${{ failure() || cancelled() }}
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.CLOUD_PROVIDERS_TESTS_WEBHOOK_URL }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
+        run: |
+          curl -X POST -H 'Content-type: application/json' --data '{"blocks":[{"type":"section","text":{"type":"mrkdwn","text":"*ERROR*: Providers tests fail > `${{ matrix.cloud-provider }} - ${{ matrix.test-scenario }}`"}},{"type":"section","fields":[{"type":"mrkdwn","text":"*Link:*\n<https://github.com/${{ env.GITHUB_REPOSITORY }}/actions/runs/${{ env.GITHUB_RUN_ID }}|View the GitHub Run>"},{"type":"mrkdwn","text":"*Tag:*\n`${{ steps.extract_tag.outputs.tag }}`"}]}]}' ${{ env.SLACK_WEBHOOK_URL }}
+
+      # Notify Slack on Success
+      - name: Notify Slack on Success
+        if: ${{ success() }}
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.CLOUD_PROVIDERS_TESTS_WEBHOOK_URL }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
+        run: |
+          curl -X POST -H 'Content-type: application/json' --data '{"blocks":[{"type":"section","text":{"type":"mrkdwn","text":"*SUCCESS*: Providers tests succeed > `${{ matrix.cloud-provider }} - ${{ matrix.test-scenario }}`"}},{"type":"section","fields":[{"type":"mrkdwn","text":"*Link:*\n<https://github.com/${{ env.GITHUB_REPOSITORY }}/actions/runs/${{ env.GITHUB_RUN_ID }}|View the GitHub Run>"},{"type":"mrkdwn","text":"*Tag:*\n`${{ steps.extract_tag.outputs.tag }}`"}]}]}' ${{ env.SLACK_WEBHOOK_URL }}
+
diff --git a/.gitignore b/.gitignore
index 7fde39a2c..2adcc7e5c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,8 +3,13 @@ dist/
 node_modules
 .DS_Store
 go.work.sum
+go.work
 cli/odigos
 .venv
 **/__pycache__/
 **/*.pyc
-serving-certs/
\ No newline at end of file
+serving-certs/
+
+**.tfstate
+**.tfstate.backup
+**.terraform**
\ No newline at end of file
diff --git a/api/config/crd/bases/odigos.io_collectorsgroups.yaml b/api/config/crd/bases/odigos.io_collectorsgroups.yaml
index 922bdace2..0fc09ae44 100644
--- a/api/config/crd/bases/odigos.io_collectorsgroups.yaml
+++ b/api/config/crd/bases/odigos.io_collectorsgroups.yaml
@@ -42,14 +42,19 @@ spec:
           spec:
             description: CollectorsGroupSpec defines the desired state of Collector
             properties:
-              inputSvc:
-                type: string
+              collectorOwnMetricsPort:
+                description: |-
+                  The port to use for exposing the collector's own metrics as a prometheus endpoint.
+                  This can be used to resolve conflicting ports when a collector is using the host network.
+                format: int32
+                type: integer
               role:
                 enum:
                 - CLUSTER_GATEWAY
                 - NODE_COLLECTOR
                 type: string
             required:
+            - collectorOwnMetricsPort
             - role
             type: object
           status:
diff --git a/api/config/crd/bases/odigos.io_instrumentationconfigs.yaml b/api/config/crd/bases/odigos.io_instrumentationconfigs.yaml
index 41e8f9333..b2f338f1d 100644
--- a/api/config/crd/bases/odigos.io_instrumentationconfigs.yaml
+++ b/api/config/crd/bases/odigos.io_instrumentationconfigs.yaml
@@ -458,6 +458,11 @@ spec:
                       - unknown
                       - ignored
                       type: string
+                    otherAgent:
+                      properties:
+                        name:
+                          type: string
+                      type: object
                     runtimeVersion:
                       type: string
                   required:
diff --git a/api/config/crd/bases/odigos.io_instrumentedapplications.yaml b/api/config/crd/bases/odigos.io_instrumentedapplications.yaml
index 7d59771af..696bd689b 100644
--- a/api/config/crd/bases/odigos.io_instrumentedapplications.yaml
+++ b/api/config/crd/bases/odigos.io_instrumentedapplications.yaml
@@ -114,6 +114,11 @@ spec:
                       - unknown
                       - ignored
                       type: string
+                    otherAgent:
+                      properties:
+                        name:
+                          type: string
+                      type: object
                     runtimeVersion:
                       type: string
                   required:
diff --git a/api/config/crd/bases/odigos.io_odigosconfigurations.yaml b/api/config/crd/bases/odigos.io_odigosconfigurations.yaml
index 0aa844cd0..37b9691b1 100644
--- a/api/config/crd/bases/odigos.io_odigosconfigurations.yaml
+++ b/api/config/crd/bases/odigos.io_odigosconfigurations.yaml
@@ -80,20 +80,6 @@ spec:
                 type: object
               configVersion:
                 type: integer
-              defaultSDKs:
-                additionalProperties:
-                  properties:
-                    sdkTier:
-                      type: string
-                    sdkType:
-                      description: 'Odigos supports two types of OpenTelemetry SDKs:
-                        native and ebpf.'
-                      type: string
-                  required:
-                  - sdkTier
-                  - sdkType
-                  type: object
-                type: object
               goAutoIncludeCodeAttributes:
                 description: |-
                   this is internal currently, and is not exposed on the CLI / helm
@@ -119,22 +105,6 @@ spec:
                 type: boolean
               psp:
                 type: boolean
-              supportedSDKs:
-                additionalProperties:
-                  items:
-                    properties:
-                      sdkTier:
-                        type: string
-                      sdkType:
-                        description: 'Odigos supports two types of OpenTelemetry SDKs:
-                          native and ebpf.'
-                        type: string
-                    required:
-                    - sdkTier
-                    - sdkType
-                    type: object
-                  type: array
-                type: object
               telemetryEnabled:
                 type: boolean
             required:
diff --git a/api/generated/odigos/applyconfiguration/odigos/v1alpha1/collectorsgroupspec.go b/api/generated/odigos/applyconfiguration/odigos/v1alpha1/collectorsgroupspec.go
index 46f8e3419..776732e4a 100644
--- a/api/generated/odigos/applyconfiguration/odigos/v1alpha1/collectorsgroupspec.go
+++ b/api/generated/odigos/applyconfiguration/odigos/v1alpha1/collectorsgroupspec.go
@@ -24,8 +24,8 @@ import (
 // CollectorsGroupSpecApplyConfiguration represents a declarative configuration of the CollectorsGroupSpec type for use
 // with apply.
 type CollectorsGroupSpecApplyConfiguration struct {
-	InputSvc *string                       `json:"inputSvc,omitempty"`
-	Role     *v1alpha1.CollectorsGroupRole `json:"role,omitempty"`
+	Role                    *v1alpha1.CollectorsGroupRole `json:"role,omitempty"`
+	CollectorOwnMetricsPort *int32                        `json:"collectorOwnMetricsPort,omitempty"`
 }
 
 // CollectorsGroupSpecApplyConfiguration constructs a declarative configuration of the CollectorsGroupSpec type for use with
@@ -34,14 +34,6 @@ func CollectorsGroupSpec() *CollectorsGroupSpecApplyConfiguration {
 	return &CollectorsGroupSpecApplyConfiguration{}
 }
 
-// WithInputSvc sets the InputSvc field in the declarative configuration to the given value
-// and returns the receiver, so that objects can be built by chaining "With" function invocations.
-// If called multiple times, the InputSvc field is set to the value of the last call.
-func (b *CollectorsGroupSpecApplyConfiguration) WithInputSvc(value string) *CollectorsGroupSpecApplyConfiguration {
-	b.InputSvc = &value
-	return b
-}
-
 // WithRole sets the Role field in the declarative configuration to the given value
 // and returns the receiver, so that objects can be built by chaining "With" function invocations.
 // If called multiple times, the Role field is set to the value of the last call.
@@ -49,3 +41,11 @@ func (b *CollectorsGroupSpecApplyConfiguration) WithRole(value v1alpha1.Collecto
 	b.Role = &value
 	return b
 }
+
+// WithCollectorOwnMetricsPort sets the CollectorOwnMetricsPort field in the declarative configuration to the given value
+// and returns the receiver, so that objects can be built by chaining "With" function invocations.
+// If called multiple times, the CollectorOwnMetricsPort field is set to the value of the last call.
+func (b *CollectorsGroupSpecApplyConfiguration) WithCollectorOwnMetricsPort(value int32) *CollectorsGroupSpecApplyConfiguration {
+	b.CollectorOwnMetricsPort = &value
+	return b
+}
diff --git a/api/generated/odigos/applyconfiguration/odigos/v1alpha1/odigosconfigurationspec.go b/api/generated/odigos/applyconfiguration/odigos/v1alpha1/odigosconfigurationspec.go
index e77765bcb..736ee39b3 100644
--- a/api/generated/odigos/applyconfiguration/odigos/v1alpha1/odigosconfigurationspec.go
+++ b/api/generated/odigos/applyconfiguration/odigos/v1alpha1/odigosconfigurationspec.go
@@ -17,10 +17,6 @@ limitations under the License.
 
 package v1alpha1
 
-import (
-	common "github.com/odigos-io/odigos/common"
-)
-
 // OdigosConfigurationSpecApplyConfiguration represents a declarative configuration of the OdigosConfigurationSpec type for use
 // with apply.
 type OdigosConfigurationSpecApplyConfiguration struct {
@@ -35,8 +31,6 @@ type OdigosConfigurationSpecApplyConfiguration struct {
 	OdigletImage                *string                                          `json:"odigletImage,omitempty"`
 	InstrumentorImage           *string                                          `json:"instrumentorImage,omitempty"`
 	AutoscalerImage             *string                                          `json:"autoscalerImage,omitempty"`
-	SupportedSDKs               map[common.ProgrammingLanguage][]common.OtelSdk  `json:"supportedSDKs,omitempty"`
-	DefaultSDKs                 map[common.ProgrammingLanguage]common.OtelSdk    `json:"defaultSDKs,omitempty"`
 	CollectorGateway            *CollectorGatewayConfigurationApplyConfiguration `json:"collectorGateway,omitempty"`
 	GoAutoIncludeCodeAttributes *bool                                            `json:"goAutoIncludeCodeAttributes,omitempty"`
 }
@@ -139,34 +133,6 @@ func (b *OdigosConfigurationSpecApplyConfiguration) WithAutoscalerImage(value st
 	return b
 }
 
-// WithSupportedSDKs puts the entries into the SupportedSDKs field in the declarative configuration
-// and returns the receiver, so that objects can be build by chaining "With" function invocations.
-// If called multiple times, the entries provided by each call will be put on the SupportedSDKs field,
-// overwriting an existing map entries in SupportedSDKs field with the same key.
-func (b *OdigosConfigurationSpecApplyConfiguration) WithSupportedSDKs(entries map[common.ProgrammingLanguage][]common.OtelSdk) *OdigosConfigurationSpecApplyConfiguration {
-	if b.SupportedSDKs == nil && len(entries) > 0 {
-		b.SupportedSDKs = make(map[common.ProgrammingLanguage][]common.OtelSdk, len(entries))
-	}
-	for k, v := range entries {
-		b.SupportedSDKs[k] = v
-	}
-	return b
-}
-
-// WithDefaultSDKs puts the entries into the DefaultSDKs field in the declarative configuration
-// and returns the receiver, so that objects can be build by chaining "With" function invocations.
-// If called multiple times, the entries provided by each call will be put on the DefaultSDKs field,
-// overwriting an existing map entries in DefaultSDKs field with the same key.
-func (b *OdigosConfigurationSpecApplyConfiguration) WithDefaultSDKs(entries map[common.ProgrammingLanguage]common.OtelSdk) *OdigosConfigurationSpecApplyConfiguration {
-	if b.DefaultSDKs == nil && len(entries) > 0 {
-		b.DefaultSDKs = make(map[common.ProgrammingLanguage]common.OtelSdk, len(entries))
-	}
-	for k, v := range entries {
-		b.DefaultSDKs[k] = v
-	}
-	return b
-}
-
 // WithCollectorGateway sets the CollectorGateway field in the declarative configuration to the given value
 // and returns the receiver, so that objects can be built by chaining "With" function invocations.
 // If called multiple times, the CollectorGateway field is set to the value of the last call.
diff --git a/api/generated/odigos/applyconfiguration/odigos/v1alpha1/otheragent.go b/api/generated/odigos/applyconfiguration/odigos/v1alpha1/otheragent.go
new file mode 100644
index 000000000..0ef195a9a
--- /dev/null
+++ b/api/generated/odigos/applyconfiguration/odigos/v1alpha1/otheragent.go
@@ -0,0 +1,38 @@
+/*
+Copyright 2022.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+// Code generated by applyconfiguration-gen. DO NOT EDIT.
+
+package v1alpha1
+
+// OtherAgentApplyConfiguration represents a declarative configuration of the OtherAgent type for use
+// with apply.
+type OtherAgentApplyConfiguration struct {
+	Name *string `json:"name,omitempty"`
+}
+
+// OtherAgentApplyConfiguration constructs a declarative configuration of the OtherAgent type for use with
+// apply.
+func OtherAgent() *OtherAgentApplyConfiguration {
+	return &OtherAgentApplyConfiguration{}
+}
+
+// WithName sets the Name field in the declarative configuration to the given value
+// and returns the receiver, so that objects can be built by chaining "With" function invocations.
+// If called multiple times, the Name field is set to the value of the last call.
+func (b *OtherAgentApplyConfiguration) WithName(value string) *OtherAgentApplyConfiguration {
+	b.Name = &value
+	return b
+}
diff --git a/api/generated/odigos/applyconfiguration/odigos/v1alpha1/runtimedetailsbycontainer.go b/api/generated/odigos/applyconfiguration/odigos/v1alpha1/runtimedetailsbycontainer.go
index 24e6eef07..4fcb2f4d3 100644
--- a/api/generated/odigos/applyconfiguration/odigos/v1alpha1/runtimedetailsbycontainer.go
+++ b/api/generated/odigos/applyconfiguration/odigos/v1alpha1/runtimedetailsbycontainer.go
@@ -24,10 +24,11 @@ import (
 // RuntimeDetailsByContainerApplyConfiguration represents a declarative configuration of the RuntimeDetailsByContainer type for use
 // with apply.
 type RuntimeDetailsByContainerApplyConfiguration struct {
-	ContainerName  *string                     `json:"containerName,omitempty"`
-	Language       *common.ProgrammingLanguage `json:"language,omitempty"`
-	RuntimeVersion *string                     `json:"runtimeVersion,omitempty"`
-	EnvVars        []EnvVarApplyConfiguration  `json:"envVars,omitempty"`
+	ContainerName  *string                       `json:"containerName,omitempty"`
+	Language       *common.ProgrammingLanguage   `json:"language,omitempty"`
+	RuntimeVersion *string                       `json:"runtimeVersion,omitempty"`
+	EnvVars        []EnvVarApplyConfiguration    `json:"envVars,omitempty"`
+	OtherAgent     *OtherAgentApplyConfiguration `json:"otherAgent,omitempty"`
 }
 
 // RuntimeDetailsByContainerApplyConfiguration constructs a declarative configuration of the RuntimeDetailsByContainer type for use with
@@ -72,3 +73,11 @@ func (b *RuntimeDetailsByContainerApplyConfiguration) WithEnvVars(values ...*Env
 	}
 	return b
 }
+
+// WithOtherAgent sets the OtherAgent field in the declarative configuration to the given value
+// and returns the receiver, so that objects can be built by chaining "With" function invocations.
+// If called multiple times, the OtherAgent field is set to the value of the last call.
+func (b *RuntimeDetailsByContainerApplyConfiguration) WithOtherAgent(value *OtherAgentApplyConfiguration) *RuntimeDetailsByContainerApplyConfiguration {
+	b.OtherAgent = value
+	return b
+}
diff --git a/api/generated/odigos/applyconfiguration/utils.go b/api/generated/odigos/applyconfiguration/utils.go
index dc2c14dc5..123503121 100644
--- a/api/generated/odigos/applyconfiguration/utils.go
+++ b/api/generated/odigos/applyconfiguration/utils.go
@@ -101,6 +101,8 @@ func ForKind(kind schema.GroupVersionKind) interface{} {
 		return &odigosv1alpha1.OdigosConfigurationSpecApplyConfiguration{}
 	case v1alpha1.SchemeGroupVersion.WithKind("OptionByContainer"):
 		return &odigosv1alpha1.OptionByContainerApplyConfiguration{}
+	case v1alpha1.SchemeGroupVersion.WithKind("OtherAgent"):
+		return &odigosv1alpha1.OtherAgentApplyConfiguration{}
 	case v1alpha1.SchemeGroupVersion.WithKind("Processor"):
 		return &odigosv1alpha1.ProcessorApplyConfiguration{}
 	case v1alpha1.SchemeGroupVersion.WithKind("ProcessorSpec"):
diff --git a/api/odigos/v1alpha1/collectorsgroup_types.go b/api/odigos/v1alpha1/collectorsgroup_types.go
index 15d673128..e04fc37ca 100644
--- a/api/odigos/v1alpha1/collectorsgroup_types.go
+++ b/api/odigos/v1alpha1/collectorsgroup_types.go
@@ -32,8 +32,11 @@ const (
 
 // CollectorsGroupSpec defines the desired state of Collector
 type CollectorsGroupSpec struct {
-	InputSvc string              `json:"inputSvc,omitempty"`
-	Role     CollectorsGroupRole `json:"role"`
+	Role CollectorsGroupRole `json:"role"`
+
+	// The port to use for exposing the collector's own metrics as a prometheus endpoint.
+	// This can be used to resolve conflicting ports when a collector is using the host network.
+	CollectorOwnMetricsPort int32 `json:"collectorOwnMetricsPort"`
 }
 
 // CollectorsGroupStatus defines the observed state of Collector
diff --git a/api/odigos/v1alpha1/instrumentedapplication_types.go b/api/odigos/v1alpha1/instrumentedapplication_types.go
index 37510f4a3..c3011f6be 100644
--- a/api/odigos/v1alpha1/instrumentedapplication_types.go
+++ b/api/odigos/v1alpha1/instrumentedapplication_types.go
@@ -39,12 +39,17 @@ type EnvVar struct {
 	Value string `json:"value"`
 }
 
+type OtherAgent struct {
+	Name string `json:"name,omitempty"`
+}
+
 // +kubebuilder:object:generate=true
 type RuntimeDetailsByContainer struct {
 	ContainerName  string                     `json:"containerName"`
 	Language       common.ProgrammingLanguage `json:"language"`
 	RuntimeVersion string                     `json:"runtimeVersion,omitempty"`
 	EnvVars        []EnvVar                   `json:"envVars,omitempty"`
+	OtherAgent     *OtherAgent                `json:"otherAgent,omitempty"`
 }
 
 // +kubebuilder:object:generate=true
diff --git a/api/odigos/v1alpha1/odigosconfig_types.go b/api/odigos/v1alpha1/odigosconfig_types.go
index 034459412..40d561271 100644
--- a/api/odigos/v1alpha1/odigosconfig_types.go
+++ b/api/odigos/v1alpha1/odigosconfig_types.go
@@ -45,8 +45,6 @@ type OdigosConfigurationSpec struct {
 	OdigletImage      string                                          `json:"odigletImage,omitempty"`
 	InstrumentorImage string                                          `json:"instrumentorImage,omitempty"`
 	AutoscalerImage   string                                          `json:"autoscalerImage,omitempty"`
-	SupportedSDKs     map[common.ProgrammingLanguage][]common.OtelSdk `json:"supportedSDKs,omitempty"`
-	DefaultSDKs       map[common.ProgrammingLanguage]common.OtelSdk   `json:"defaultSDKs,omitempty"`
 	CollectorGateway  *CollectorGatewayConfiguration                  `json:"collectorGateway,omitempty"`
 
 	// this is internal currently, and is not exposed on the CLI / helm
@@ -103,7 +101,6 @@ func (odigosConfig *OdigosConfiguration) ToCommonConfig() *common.OdigosConfigur
 		OdigletImage:                odigosConfig.Spec.OdigletImage,
 		InstrumentorImage:           odigosConfig.Spec.InstrumentorImage,
 		AutoscalerImage:             odigosConfig.Spec.AutoscalerImage,
-		DefaultSDKs:                 odigosConfig.Spec.DefaultSDKs,
 		CollectorGateway:            &collectorGateway,
 		GoAutoIncludeCodeAttributes: odigosConfig.Spec.GoAutoIncludeCodeAttributes,
 	}
diff --git a/api/odigos/v1alpha1/zz_generated.deepcopy.go b/api/odigos/v1alpha1/zz_generated.deepcopy.go
index d3faa7f41..41f1abe04 100644
--- a/api/odigos/v1alpha1/zz_generated.deepcopy.go
+++ b/api/odigos/v1alpha1/zz_generated.deepcopy.go
@@ -1029,29 +1029,6 @@ func (in *OdigosConfigurationSpec) DeepCopyInto(out *OdigosConfigurationSpec) {
 		*out = make([]string, len(*in))
 		copy(*out, *in)
 	}
-	if in.SupportedSDKs != nil {
-		in, out := &in.SupportedSDKs, &out.SupportedSDKs
-		*out = make(map[common.ProgrammingLanguage][]common.OtelSdk, len(*in))
-		for key, val := range *in {
-			var outVal []common.OtelSdk
-			if val == nil {
-				(*out)[key] = nil
-			} else {
-				inVal := (*in)[key]
-				in, out := &inVal, &outVal
-				*out = make([]common.OtelSdk, len(*in))
-				copy(*out, *in)
-			}
-			(*out)[key] = outVal
-		}
-	}
-	if in.DefaultSDKs != nil {
-		in, out := &in.DefaultSDKs, &out.DefaultSDKs
-		*out = make(map[common.ProgrammingLanguage]common.OtelSdk, len(*in))
-		for key, val := range *in {
-			(*out)[key] = val
-		}
-	}
 	if in.CollectorGateway != nil {
 		in, out := &in.CollectorGateway, &out.CollectorGateway
 		*out = new(CollectorGatewayConfiguration)
@@ -1091,6 +1068,21 @@ func (in *OptionByContainer) DeepCopy() *OptionByContainer {
 	return out
 }
 
+// DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
+func (in *OtherAgent) DeepCopyInto(out *OtherAgent) {
+	*out = *in
+}
+
+// DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new OtherAgent.
+func (in *OtherAgent) DeepCopy() *OtherAgent {
+	if in == nil {
+		return nil
+	}
+	out := new(OtherAgent)
+	in.DeepCopyInto(out)
+	return out
+}
+
 // DeepCopyInto is an autogenerated deepcopy function, copying the receiver, writing into out. in must be non-nil.
 func (in *Processor) DeepCopyInto(out *Processor) {
 	*out = *in
@@ -1199,6 +1191,11 @@ func (in *RuntimeDetailsByContainer) DeepCopyInto(out *RuntimeDetailsByContainer
 		*out = make([]EnvVar, len(*in))
 		copy(*out, *in)
 	}
+	if in.OtherAgent != nil {
+		in, out := &in.OtherAgent, &out.OtherAgent
+		*out = new(OtherAgent)
+		**out = **in
+	}
 }
 
 // DeepCopy is an autogenerated deepcopy function, copying the receiver, creating a new RuntimeDetailsByContainer.
diff --git a/autoscaler/controllers/collectorsgroup_controller.go b/autoscaler/controllers/collectorsgroup_controller.go
index 4136f3b7f..14f12ccc2 100644
--- a/autoscaler/controllers/collectorsgroup_controller.go
+++ b/autoscaler/controllers/collectorsgroup_controller.go
@@ -20,10 +20,11 @@ import (
 	"context"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	controllerconfig "github.com/odigos-io/odigos/autoscaler/controllers/controller_config"
 	"github.com/odigos-io/odigos/autoscaler/controllers/datacollection"
 	"github.com/odigos-io/odigos/autoscaler/controllers/gateway"
+	"sigs.k8s.io/controller-runtime/pkg/predicate"
 
-	"github.com/odigos-io/odigos/common"
 	"sigs.k8s.io/controller-runtime/pkg/log"
 
 	"k8s.io/apimachinery/pkg/runtime"
@@ -34,10 +35,11 @@ import (
 // CollectorsGroupReconciler reconciles a CollectorsGroup object
 type CollectorsGroupReconciler struct {
 	client.Client
-	Scheme           *runtime.Scheme
-	ImagePullSecrets []string
-	OdigosVersion    string
-	OdigosTier       common.OdigosTier
+	Scheme               *runtime.Scheme
+	ImagePullSecrets     []string
+	OdigosVersion        string
+	DisableNameProcessor bool
+	Config               *controllerconfig.ControllerConfig
 }
 
 //+kubebuilder:rbac:groups=odigos.io,namespace=odigos-system,resources=collectorsgroups,verbs=get;list;watch;create;update;patch;delete
@@ -62,12 +64,12 @@ func (r *CollectorsGroupReconciler) Reconcile(ctx context.Context, req ctrl.Requ
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Reconciling CollectorsGroup")
 
-	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion)
+	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.Config.MetricsServerEnabled)
 	if err != nil {
 		return ctrl.Result{}, err
 	}
 
-	err = datacollection.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.OdigosTier)
+	err = datacollection.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.DisableNameProcessor)
 	if err != nil {
 		return ctrl.Result{}, err
 	}
@@ -79,5 +81,8 @@ func (r *CollectorsGroupReconciler) Reconcile(ctx context.Context, req ctrl.Requ
 func (r *CollectorsGroupReconciler) SetupWithManager(mgr ctrl.Manager) error {
 	return ctrl.NewControllerManagedBy(mgr).
 		For(&odigosv1.CollectorsGroup{}).
+		// we assume everything in the collectorsgroup spec is the configuration for the collectors to generate.
+		// thus, we need to monitor any change to the spec which is what the generation field is for.
+		WithEventFilter(&predicate.GenerationChangedPredicate{}).
 		Complete(r)
 }
diff --git a/autoscaler/controllers/controller_config/controller_config.go b/autoscaler/controllers/controller_config/controller_config.go
new file mode 100644
index 000000000..94250a912
--- /dev/null
+++ b/autoscaler/controllers/controller_config/controller_config.go
@@ -0,0 +1,5 @@
+package controllerconfig
+
+type ControllerConfig struct {
+	MetricsServerEnabled bool
+}
diff --git a/autoscaler/controllers/datacollection/configmap.go b/autoscaler/controllers/datacollection/configmap.go
index 333a1c430..8b7885dcd 100644
--- a/autoscaler/controllers/datacollection/configmap.go
+++ b/autoscaler/controllers/datacollection/configmap.go
@@ -29,7 +29,7 @@ import (
 
 func SyncConfigMap(apps *odigosv1.InstrumentedApplicationList, dests *odigosv1.DestinationList, allProcessors *odigosv1.ProcessorList,
 	datacollection *odigosv1.CollectorsGroup, ctx context.Context,
-	c client.Client, scheme *runtime.Scheme, tier common.OdigosTier) (string, error) {
+	c client.Client, scheme *runtime.Scheme, disableNameProcessor bool) (string, error) {
 	logger := log.FromContext(ctx)
 
 	processors := commonconf.FilterAndSortProcessorsByOrderHint(allProcessors, odigosv1.CollectorsGroupRoleNodeCollector)
@@ -38,7 +38,7 @@ func SyncConfigMap(apps *odigosv1.InstrumentedApplicationList, dests *odigosv1.D
 	SamplingExists := commonconf.FindFirstProcessorByType(allProcessors, "odigossampling")
 	setTracesLoadBalancer := SamplingExists != nil
 
-	desired, err := getDesiredConfigMap(apps, dests, processors, datacollection, scheme, setTracesLoadBalancer, tier)
+	desired, err := getDesiredConfigMap(apps, dests, processors, datacollection, scheme, setTracesLoadBalancer, disableNameProcessor)
 	if err != nil {
 		logger.Error(err, "failed to get desired config map")
 		return "", err
@@ -97,8 +97,8 @@ func createConfigMap(desired *v1.ConfigMap, ctx context.Context, c client.Client
 }
 
 func getDesiredConfigMap(apps *odigosv1.InstrumentedApplicationList, dests *odigosv1.DestinationList, processors []*odigosv1.Processor,
-	datacollection *odigosv1.CollectorsGroup, scheme *runtime.Scheme, setTracesLoadBalancer bool, tier common.OdigosTier) (*v1.ConfigMap, error) {
-	cmData, err := calculateConfigMapData(apps, dests, processors, setTracesLoadBalancer, tier)
+	datacollection *odigosv1.CollectorsGroup, scheme *runtime.Scheme, setTracesLoadBalancer bool, disableNameProcessor bool) (*v1.ConfigMap, error) {
+	cmData, err := calculateConfigMapData(datacollection, apps, dests, processors, setTracesLoadBalancer, disableNameProcessor)
 	if err != nil {
 		return nil, err
 	}
@@ -124,19 +124,19 @@ func getDesiredConfigMap(apps *odigosv1.InstrumentedApplicationList, dests *odig
 	return &desired, nil
 }
 
-func calculateConfigMapData(apps *odigosv1.InstrumentedApplicationList, dests *odigosv1.DestinationList, processors []*odigosv1.Processor,
-	setTracesLoadBalancer bool, tier common.OdigosTier) (string, error) {
+func calculateConfigMapData(collectorsGroup *odigosv1.CollectorsGroup, apps *odigosv1.InstrumentedApplicationList, dests *odigosv1.DestinationList, processors []*odigosv1.Processor,
+	setTracesLoadBalancer bool, disableNameProcessor bool) (string, error) {
+
+	ownMetricsPort := collectorsGroup.Spec.CollectorOwnMetricsPort
 
 	empty := struct{}{}
 
 	processorsCfg, tracesProcessors, metricsProcessors, logsProcessors, errs := config.GetCrdProcessorsConfigMap(commonconf.ToProcessorConfigurerArray(processors))
-	if errs != nil {
-		for name, err := range errs {
-			log.Log.V(0).Info(err.Error(), "processor", name)
-		}
+	for name, err := range errs {
+		log.Log.V(0).Info(err.Error(), "processor", name)
 	}
 
-	if tier != common.OnPremOdigosTier {
+	if !disableNameProcessor {
 		processorsCfg["odigosresourcename"] = empty
 	}
 
@@ -173,6 +173,7 @@ func calculateConfigMapData(apps *odigosv1.InstrumentedApplicationList, dests *o
 			"tls": config.GenericMap{
 				"insecure": true,
 			},
+			"balancer_name": "round_robin",
 		},
 		"otlp/odigos-own-telemetry-ui": config.GenericMap{
 			"endpoint": fmt.Sprintf("ui.%s:%d", env.GetCurrentNamespace(), consts.OTLPPort),
@@ -214,7 +215,7 @@ func calculateConfigMapData(apps *odigosv1.InstrumentedApplicationList, dests *o
 							"scrape_interval": "10s",
 							"static_configs": []config.GenericMap{
 								{
-									"targets": []string{"127.0.0.1:8888"},
+									"targets": []string{fmt.Sprintf("127.0.0.1:%d", ownMetricsPort)},
 								},
 							},
 							"metric_relabel_configs": []config.GenericMap{
@@ -247,7 +248,7 @@ func calculateConfigMapData(apps *odigosv1.InstrumentedApplicationList, dests *o
 			Extensions: []string{"health_check"},
 			Telemetry: config.Telemetry{
 				Metrics: config.GenericMap{
-					"address": "0.0.0.0:8888",
+					"address": fmt.Sprintf("0.0.0.0:%d", ownMetricsPort),
 				},
 				Resource: map[string]*string{
 					// The collector add "otelcol" as a service name, so we need to remove it
@@ -277,7 +278,7 @@ func calculateConfigMapData(apps *odigosv1.InstrumentedApplicationList, dests *o
 		}
 	}
 
-	commonProcessors := getCommonProcessorsByTier(tier)
+	commonProcessors := getCommonProcessors(disableNameProcessor)
 
 	if collectLogs {
 		includes := make([]string, 0)
@@ -402,9 +403,9 @@ func getSignalsFromOtelcolConfig(otelcolConfigContent string) ([]common.Observab
 	return signals, nil
 }
 
-func getCommonProcessorsByTier(tier common.OdigosTier) []string {
+func getCommonProcessors(disableNameProcessor bool) []string {
 	processors := []string{"batch"}
-	if tier != common.OnPremOdigosTier {
+	if !disableNameProcessor {
 		processors = append(processors, "odigosresourcename")
 	}
 	processors = append(processors, "resource", "resourcedetection", "odigostrafficmetrics")
diff --git a/autoscaler/controllers/datacollection/root.go b/autoscaler/controllers/datacollection/root.go
index 8a484e197..0ad92b35e 100644
--- a/autoscaler/controllers/datacollection/root.go
+++ b/autoscaler/controllers/datacollection/root.go
@@ -5,7 +5,6 @@ import (
 	"time"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
 	"k8s.io/apimachinery/pkg/runtime"
@@ -19,7 +18,7 @@ const (
 	syncDaemonsetRetry = 3
 )
 
-func Sync(ctx context.Context, c client.Client, scheme *runtime.Scheme, imagePullSecrets []string, odigosVersion string, tier common.OdigosTier) error {
+func Sync(ctx context.Context, c client.Client, scheme *runtime.Scheme, imagePullSecrets []string, odigosVersion string, disableNameProcessor bool) error {
 	logger := log.FromContext(ctx)
 
 	var instApps odigosv1.InstrumentedApplicationList
@@ -52,16 +51,16 @@ func Sync(ctx context.Context, c client.Client, scheme *runtime.Scheme, imagePul
 		return err
 	}
 
-	return syncDataCollection(&instApps, &dests, &processors, &dataCollectionCollectorGroup, ctx, c, scheme, imagePullSecrets, odigosVersion, tier)
+	return syncDataCollection(&instApps, &dests, &processors, &dataCollectionCollectorGroup, ctx, c, scheme, imagePullSecrets, odigosVersion, disableNameProcessor)
 }
 
 func syncDataCollection(instApps *odigosv1.InstrumentedApplicationList, dests *odigosv1.DestinationList, processors *odigosv1.ProcessorList,
 	dataCollection *odigosv1.CollectorsGroup, ctx context.Context, c client.Client,
-	scheme *runtime.Scheme, imagePullSecrets []string, odigosVersion string, tier common.OdigosTier) error {
+	scheme *runtime.Scheme, imagePullSecrets []string, odigosVersion string, disableNameProcessor bool) error {
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Syncing data collection")
 
-	_, err := SyncConfigMap(instApps, dests, processors, dataCollection, ctx, c, scheme, tier)
+	_, err := SyncConfigMap(instApps, dests, processors, dataCollection, ctx, c, scheme, disableNameProcessor)
 	if err != nil {
 		logger.Error(err, "Failed to sync config map")
 		return err
diff --git a/autoscaler/controllers/destination_controller.go b/autoscaler/controllers/destination_controller.go
index d2ade66cc..009e17a9c 100644
--- a/autoscaler/controllers/destination_controller.go
+++ b/autoscaler/controllers/destination_controller.go
@@ -19,6 +19,7 @@ package controllers
 import (
 	"context"
 
+	controllerconfig "github.com/odigos-io/odigos/autoscaler/controllers/controller_config"
 	"github.com/odigos-io/odigos/autoscaler/controllers/gateway"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
@@ -34,6 +35,7 @@ type DestinationReconciler struct {
 	Scheme           *runtime.Scheme
 	ImagePullSecrets []string
 	OdigosVersion    string
+	Config           *controllerconfig.ControllerConfig
 }
 
 //+kubebuilder:rbac:groups=odigos.io,namespace=odigos-system,resources=destinations,verbs=get;list;watch;create;update;patch;delete
@@ -51,7 +53,7 @@ type DestinationReconciler struct {
 func (r *DestinationReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Reconciling Destination")
-	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion)
+	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.Config.MetricsServerEnabled)
 	if err != nil {
 		return ctrl.Result{}, err
 	}
diff --git a/autoscaler/controllers/gateway/configmap.go b/autoscaler/controllers/gateway/configmap.go
index 61a28e857..ab9a23af2 100644
--- a/autoscaler/controllers/gateway/configmap.go
+++ b/autoscaler/controllers/gateway/configmap.go
@@ -28,12 +28,12 @@ const (
 )
 
 var (
-	errNoPipelineConfigured = errors.New("no pipeline was configured, cannot add self telemetry pipeline")
+	errNoPipelineConfigured  = errors.New("no pipeline was configured, cannot add self telemetry pipeline")
 	errNoReceiversConfigured = errors.New("no receivers were configured, cannot add self telemetry pipeline")
 	errNoExportersConfigured = errors.New("no exporters were configured, cannot add self telemetry pipeline")
 )
 
-func addSelfTelemetryPipeline(c *config.Config) error {
+func addSelfTelemetryPipeline(c *config.Config, ownTelemetryPort int32) error {
 	if c.Service.Pipelines == nil {
 		return errNoPipelineConfigured
 	}
@@ -47,18 +47,18 @@ func addSelfTelemetryPipeline(c *config.Config) error {
 		"config": config.GenericMap{
 			"scrape_configs": []config.GenericMap{
 				{
-					"job_name": "otelcol",
+					"job_name":        "otelcol",
 					"scrape_interval": "10s",
 					"static_configs": []config.GenericMap{
 						{
-							"targets": []string{"127.0.0.1:8888"},
+							"targets": []string{fmt.Sprintf("127.0.0.1:%d", ownTelemetryPort)},
 						},
 					},
 					"metric_relabel_configs": []config.GenericMap{
 						{
 							"source_labels": []string{"__name__"},
-							"regex": "(.*odigos.*|^otelcol_processor_accepted.*|^otelcol_exporter_sent.*)",
-							"action": "keep",
+							"regex":         "(.*odigos.*|^otelcol_processor_accepted.*|^otelcol_exporter_sent.*)",
+							"action":        "keep",
 						},
 					},
 				},
@@ -91,13 +91,13 @@ func addSelfTelemetryPipeline(c *config.Config) error {
 		},
 	}
 	c.Service.Pipelines["metrics/otelcol"] = config.Pipeline{
-		Receivers: []string{"prometheus/self-metrics"},
+		Receivers:  []string{"prometheus/self-metrics"},
 		Processors: []string{"resource/pod-name"},
-		Exporters: []string{"otlp/odigos-own-telemetry-ui"},
+		Exporters:  []string{"otlp/odigos-own-telemetry-ui"},
 	}
 
 	c.Service.Telemetry.Metrics = config.GenericMap{
-		"address": "0.0.0.0:8888",
+		"address": fmt.Sprintf("0.0.0.0:%d", ownTelemetryPort),
 	}
 
 	for pipelineName, pipeline := range c.Service.Pipelines {
@@ -126,7 +126,9 @@ func syncConfigMap(dests *odigosv1.DestinationList, allProcessors *odigosv1.Proc
 		common.ToExporterConfigurerArray(dests),
 		common.ToProcessorConfigurerArray(processors),
 		memoryLimiterConfiguration,
-		addSelfTelemetryPipeline,
+		func(c *config.Config) error {
+			return addSelfTelemetryPipeline(c, gateway.Spec.CollectorOwnMetricsPort)
+		},
 	)
 	if err != nil {
 		logger.Error(err, "Failed to calculate config")
diff --git a/autoscaler/controllers/gateway/configmap_test.go b/autoscaler/controllers/gateway/configmap_test.go
index b4bbe628c..3a037adb8 100644
--- a/autoscaler/controllers/gateway/configmap_test.go
+++ b/autoscaler/controllers/gateway/configmap_test.go
@@ -1,9 +1,11 @@
 package gateway
 
 import (
+	"fmt"
 	"testing"
 
 	"github.com/odigos-io/odigos/common/config"
+	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
 	"github.com/stretchr/testify/assert"
 )
 
@@ -12,7 +14,7 @@ func TestAddSelfTelemetryPipeline(t *testing.T) {
 	cases := []struct {
 		name string
 		cfg  *config.Config
-		err error
+		err  error
 	}{
 		{
 			name: "no pipeline",
@@ -66,7 +68,7 @@ func TestAddSelfTelemetryPipeline(t *testing.T) {
 				},
 				Processors: config.GenericMap{
 					"memory_limiter": config.GenericMap{
-						"check_interval":  "1s",
+						"check_interval": "1s",
 					},
 					"resource/odigos-version": config.GenericMap{
 						"attributes": []config.GenericMap{
@@ -98,7 +100,7 @@ func TestAddSelfTelemetryPipeline(t *testing.T) {
 			},
 		},
 	}
-	
+
 	for _, tc := range cases {
 		t.Run(tc.name, func(t *testing.T) {
 			c := tc.cfg
@@ -115,15 +117,15 @@ func TestAddSelfTelemetryPipeline(t *testing.T) {
 			assert.Equal(t, []string{"prometheus"}, c.Service.Pipelines["metrics/otelcol"].Receivers)
 			assert.Equal(t, []string{"resource/pod-name"}, c.Service.Pipelines["metrics/otelcol"].Processors)
 			assert.Equal(t, []string{"otlp/ui"}, c.Service.Pipelines["metrics/otelcol"].Exporters)
-			assert.Equal(t, "0.0.0.0:8888", c.Service.Telemetry.Metrics["address"])
+			assert.Equal(t, fmt.Sprintf("0.0.0.0:%d", consts.OdigosNodeCollectorOwnTelemetryPortDefault), c.Service.Telemetry.Metrics["address"])
 			for pipelineName, pipeline := range c.Service.Pipelines {
 				if pipelineName == "metrics/otelcol" {
 					assert.NotContains(t, pipeline.Processors, "odigostrafficmetrics")
 				} else {
-					assert.Equal(t, pipeline.Processors[len(pipeline.Processors) - 1], "odigostrafficmetrics")
+					assert.Equal(t, pipeline.Processors[len(pipeline.Processors)-1], "odigostrafficmetrics")
 				}
 
 			}
 		})
 	}
-}
\ No newline at end of file
+}
diff --git a/autoscaler/controllers/gateway/hpa.go b/autoscaler/controllers/gateway/hpa.go
index 09854aeac..80fa91f52 100644
--- a/autoscaler/controllers/gateway/hpa.go
+++ b/autoscaler/controllers/gateway/hpa.go
@@ -12,7 +12,7 @@ import (
 	"k8s.io/apimachinery/pkg/api/resource"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	autoscaling "k8s.io/api/autoscaling/v2beta2"
+	autoscaling "k8s.io/api/autoscaling/v2"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
@@ -24,8 +24,9 @@ const (
 )
 
 var (
-	minReplicas = intPtr(1)
-	maxReplicas = int32(10)
+	minReplicas                = intPtr(1)
+	maxReplicas                = int32(10)
+	stabilizationWindowSeconds = intPtr(300) // cooldown period for scaling down
 )
 
 func syncHPA(gateway *odigosv1.CollectorsGroup, ctx context.Context, c client.Client, scheme *runtime.Scheme, memConfig *memoryConfigurations) error {
@@ -34,7 +35,7 @@ func syncHPA(gateway *odigosv1.CollectorsGroup, ctx context.Context, c client.Cl
 	metricQuantity := resource.MustParse(fmt.Sprintf("%dMi", memLimit))
 	hpa := &autoscaling.HorizontalPodAutoscaler{
 		TypeMeta: metav1.TypeMeta{
-			APIVersion: "autoscaling/v2beta2",
+			APIVersion: "autoscaling/v2",
 			Kind:       "HorizontalPodAutoscaler",
 		},
 		ObjectMeta: metav1.ObjectMeta{
@@ -61,8 +62,14 @@ func syncHPA(gateway *odigosv1.CollectorsGroup, ctx context.Context, c client.Cl
 					},
 				},
 			},
+			Behavior: &autoscaling.HorizontalPodAutoscalerBehavior{
+				ScaleDown: &autoscaling.HPAScalingRules{
+					StabilizationWindowSeconds: stabilizationWindowSeconds,
+				},
+			},
 		},
 	}
+
 	if err := controllerutil.SetControllerReference(gateway, hpa, scheme); err != nil {
 		logger.Error(err, "Failed to set controller reference")
 		return err
diff --git a/autoscaler/controllers/gateway/root.go b/autoscaler/controllers/gateway/root.go
index c9552203b..95e5f2ca8 100644
--- a/autoscaler/controllers/gateway/root.go
+++ b/autoscaler/controllers/gateway/root.go
@@ -3,8 +3,6 @@ package gateway
 import (
 	"context"
 
-	appsv1 "k8s.io/api/apps/v1"
-
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	commonconf "github.com/odigos-io/odigos/autoscaler/controllers/common"
 	odigoscommon "github.com/odigos-io/odigos/common"
@@ -23,7 +21,8 @@ var (
 	}
 )
 
-func Sync(ctx context.Context, k8sClient client.Client, scheme *runtime.Scheme, imagePullSecrets []string, odigosVersion string) error {
+func Sync(ctx context.Context, k8sClient client.Client, scheme *runtime.Scheme, imagePullSecrets []string, odigosVersion string,
+	metricsServerExists bool) error {
 	logger := log.FromContext(ctx)
 
 	odigosNs := env.GetCurrentNamespace()
@@ -55,7 +54,8 @@ func Sync(ctx context.Context, k8sClient client.Client, scheme *runtime.Scheme,
 		return err
 	}
 
-	err = syncGateway(&dests, &processors, &gatewayCollectorGroup, ctx, k8sClient, scheme, imagePullSecrets, odigosVersion, &odigosConfig)
+	err = syncGateway(&dests, &processors, &gatewayCollectorGroup, ctx, k8sClient, scheme, imagePullSecrets, odigosVersion, &odigosConfig,
+		metricsServerExists)
 	statusPatchString := commonconf.GetCollectorsGroupDeployedConditionsPatch(err)
 	statusErr := k8sClient.Status().Patch(ctx, &gatewayCollectorGroup, client.RawPatch(types.MergePatchType, []byte(statusPatchString)))
 	if statusErr != nil {
@@ -67,7 +67,8 @@ func Sync(ctx context.Context, k8sClient client.Client, scheme *runtime.Scheme,
 
 func syncGateway(dests *odigosv1.DestinationList, processors *odigosv1.ProcessorList,
 	gateway *odigosv1.CollectorsGroup, ctx context.Context,
-	c client.Client, scheme *runtime.Scheme, imagePullSecrets []string, odigosVersion string, odigosConfig *odigoscommon.OdigosConfiguration) error {
+	c client.Client, scheme *runtime.Scheme, imagePullSecrets []string, odigosVersion string, odigosConfig *odigoscommon.OdigosConfiguration,
+	metricsServerExists bool) error {
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Syncing gateway")
 
@@ -103,7 +104,7 @@ func syncGateway(dests *odigosv1.DestinationList, processors *odigosv1.Processor
 		return err
 	}
 
-	if isMetricsServerInstalled(ctx, c) {
+	if metricsServerExists {
 		err = syncHPA(gateway, ctx, c, scheme, memConfig)
 		if err != nil {
 			logger.Error(err, "Failed to sync HPA")
@@ -112,22 +113,3 @@ func syncGateway(dests *odigosv1.DestinationList, processors *odigosv1.Processor
 
 	return nil
 }
-
-func isMetricsServerInstalled(ctx context.Context, c client.Client) bool {
-	// Check if Kubernetes metrics server is installed by checking if the metrics-server deployment exists
-	logger := log.FromContext(ctx)
-	var metricsServerDeployment appsv1.Deployment
-	err := c.Get(ctx, types.NamespacedName{Name: "metrics-server", Namespace: "kube-system"}, &metricsServerDeployment)
-	if err != nil {
-		if client.IgnoreNotFound(err) != nil {
-			logger.Error(err, "Failed to get metrics-server deployment")
-			return false
-		}
-
-		logger.V(0).Info("Metrics server not found, skipping HPA creation")
-		return false
-	}
-
-	logger.V(0).Info("Metrics server found, creating HPA for Gateway")
-	return true
-}
diff --git a/autoscaler/controllers/gateway/service.go b/autoscaler/controllers/gateway/service.go
index e747c2f57..e0c168f2c 100644
--- a/autoscaler/controllers/gateway/service.go
+++ b/autoscaler/controllers/gateway/service.go
@@ -54,7 +54,7 @@ func syncService(gateway *odigosv1.CollectorsGroup, ctx context.Context, c clien
 	}
 
 	result, err := controllerutil.CreateOrPatch(ctx, c, gatewaySvc, func() error {
-		updateGatewaySvc(gatewaySvc)
+		updateGatewaySvc(gatewaySvc, gateway)
 		return nil
 	})
 
@@ -67,7 +67,7 @@ func syncService(gateway *odigosv1.CollectorsGroup, ctx context.Context, c clien
 	return gatewaySvc, nil
 }
 
-func updateGatewaySvc(svc *v1.Service) {
+func updateGatewaySvc(svc *v1.Service, collectorsGroup *odigosv1.CollectorsGroup) {
 	svc.Spec.Ports = []v1.ServicePort{
 		{
 			Name:       "otlp",
@@ -83,7 +83,7 @@ func updateGatewaySvc(svc *v1.Service) {
 		},
 		{
 			Name: "metrics",
-			Port: 8888,
+			Port: collectorsGroup.Spec.CollectorOwnMetricsPort,
 		},
 	}
 
diff --git a/autoscaler/controllers/instrumentedapplication_controller.go b/autoscaler/controllers/instrumentedapplication_controller.go
index d7cb43104..25e21793d 100644
--- a/autoscaler/controllers/instrumentedapplication_controller.go
+++ b/autoscaler/controllers/instrumentedapplication_controller.go
@@ -21,7 +21,6 @@ import (
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/autoscaler/controllers/datacollection"
-	"github.com/odigos-io/odigos/common"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
@@ -31,10 +30,10 @@ import (
 // InstrumentedApplicationReconciler reconciles a InstrumentedApplication object
 type InstrumentedApplicationReconciler struct {
 	client.Client
-	Scheme           *runtime.Scheme
-	ImagePullSecrets []string
-	OdigosVersion    string
-	OdigosTier       common.OdigosTier
+	Scheme               *runtime.Scheme
+	ImagePullSecrets     []string
+	OdigosVersion        string
+	DisableNameProcessor bool
 }
 
 //+kubebuilder:rbac:groups=odigos.io,resources=instrumentedapplications,verbs=get;list;watch;create;update;patch;delete
@@ -52,7 +51,7 @@ type InstrumentedApplicationReconciler struct {
 func (r *InstrumentedApplicationReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Reconciling InstrumentedApps")
-	err := datacollection.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.OdigosTier)
+	err := datacollection.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.DisableNameProcessor)
 	if err != nil {
 		return ctrl.Result{}, err
 	}
diff --git a/autoscaler/controllers/odigosconfig_controller.go b/autoscaler/controllers/odigosconfig_controller.go
index 43098a8ab..371ea713a 100644
--- a/autoscaler/controllers/odigosconfig_controller.go
+++ b/autoscaler/controllers/odigosconfig_controller.go
@@ -3,12 +3,16 @@ package controllers
 import (
 	"context"
 
+	controllerconfig "github.com/odigos-io/odigos/autoscaler/controllers/controller_config"
+	odigospredicate "github.com/odigos-io/odigos/k8sutils/pkg/predicate"
+
 	"github.com/odigos-io/odigos/autoscaler/controllers/gateway"
-	"k8s.io/api/core/v1"
+	v1 "k8s.io/api/core/v1"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 	"sigs.k8s.io/controller-runtime/pkg/log"
+	"sigs.k8s.io/controller-runtime/pkg/predicate"
 )
 
 type OdigosConfigReconciler struct {
@@ -16,13 +20,14 @@ type OdigosConfigReconciler struct {
 	Scheme           *runtime.Scheme
 	ImagePullSecrets []string
 	OdigosVersion    string
+	Config           *controllerconfig.ControllerConfig
 }
 
 func (r *OdigosConfigReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Reconciling Odigos Configuration")
 
-	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion)
+	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.Config.MetricsServerEnabled)
 	if err != nil {
 		return ctrl.Result{}, err
 	}
@@ -32,8 +37,8 @@ func (r *OdigosConfigReconciler) Reconcile(ctx context.Context, req ctrl.Request
 
 // SetupWithManager sets up the controller with the Manager.
 func (r *OdigosConfigReconciler) SetupWithManager(mgr ctrl.Manager) error {
-	// TODO: Clean up noise from too broad of a definition here
 	return ctrl.NewControllerManagedBy(mgr).
 		For(&v1.ConfigMap{}).
+		WithEventFilter(predicate.And(odigospredicate.OdigosConfigMapPredicate, odigospredicate.ConfigMapDataChangedPredicate{})).
 		Complete(r)
 }
diff --git a/autoscaler/controllers/processor_controller.go b/autoscaler/controllers/processor_controller.go
index a73fce7ed..891f14f28 100644
--- a/autoscaler/controllers/processor_controller.go
+++ b/autoscaler/controllers/processor_controller.go
@@ -4,9 +4,9 @@ import (
 	"context"
 
 	v1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	controllerconfig "github.com/odigos-io/odigos/autoscaler/controllers/controller_config"
 	"github.com/odigos-io/odigos/autoscaler/controllers/datacollection"
 	"github.com/odigos-io/odigos/autoscaler/controllers/gateway"
-	"github.com/odigos-io/odigos/common"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
@@ -15,10 +15,11 @@ import (
 
 type ProcessorReconciler struct {
 	client.Client
-	Scheme           *runtime.Scheme
-	ImagePullSecrets []string
-	OdigosVersion    string
-	OdigosTier       common.OdigosTier
+	Scheme               *runtime.Scheme
+	ImagePullSecrets     []string
+	OdigosVersion        string
+	DisableNameProcessor bool
+	Config               *controllerconfig.ControllerConfig
 }
 
 func (r *ProcessorReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
@@ -26,12 +27,12 @@ func (r *ProcessorReconciler) Reconcile(ctx context.Context, req ctrl.Request) (
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Reconciling Processor")
 
-	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion)
+	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.Config.MetricsServerEnabled)
 	if err != nil {
 		return ctrl.Result{}, err
 	}
 
-	err = datacollection.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.OdigosTier)
+	err = datacollection.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.DisableNameProcessor)
 	if err != nil {
 		return ctrl.Result{}, err
 	}
diff --git a/autoscaler/controllers/secret_controller.go b/autoscaler/controllers/secret_controller.go
index 56e689eb3..20bb14c28 100644
--- a/autoscaler/controllers/secret_controller.go
+++ b/autoscaler/controllers/secret_controller.go
@@ -3,6 +3,7 @@ package controllers
 import (
 	"context"
 
+	controllerconfig "github.com/odigos-io/odigos/autoscaler/controllers/controller_config"
 	"github.com/odigos-io/odigos/autoscaler/controllers/gateway"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
@@ -19,6 +20,7 @@ type SecretReconciler struct {
 	Scheme           *runtime.Scheme
 	ImagePullSecrets []string
 	OdigosVersion    string
+	Config           *controllerconfig.ControllerConfig
 }
 
 type secretPredicate struct {
@@ -52,7 +54,7 @@ func (r *SecretReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctr
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Reconciling Secret")
 
-	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion)
+	err := gateway.Sync(ctx, r.Client, r.Scheme, r.ImagePullSecrets, r.OdigosVersion, r.Config.MetricsServerEnabled)
 	if err != nil {
 		return ctrl.Result{}, err
 	}
diff --git a/autoscaler/main.go b/autoscaler/main.go
index 6e6d052a5..2d55a5dae 100644
--- a/autoscaler/main.go
+++ b/autoscaler/main.go
@@ -22,6 +22,8 @@ import (
 	"os"
 	"strings"
 
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
 
 	corev1 "k8s.io/api/core/v1"
@@ -29,10 +31,9 @@ import (
 	appsv1 "k8s.io/api/apps/v1"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 
-	k8sClient "github.com/odigos-io/odigos/k8sutils/pkg/client"
-	k8sUtils "github.com/odigos-io/odigos/k8sutils/pkg/utils"
 	"sigs.k8s.io/controller-runtime/pkg/cache"
 
+	"github.com/go-logr/logr"
 	"github.com/go-logr/zapr"
 	bridge "github.com/odigos-io/opentelemetry-zap-bridge"
 
@@ -42,6 +43,7 @@ import (
 
 	"k8s.io/apimachinery/pkg/labels"
 	"k8s.io/apimachinery/pkg/runtime"
+	"k8s.io/apimachinery/pkg/types"
 	utilruntime "k8s.io/apimachinery/pkg/util/runtime"
 	clientgoscheme "k8s.io/client-go/kubernetes/scheme"
 	ctrl "sigs.k8s.io/controller-runtime"
@@ -55,6 +57,7 @@ import (
 
 	"github.com/odigos-io/odigos/autoscaler/controllers"
 	"github.com/odigos-io/odigos/autoscaler/controllers/actions"
+	controllerconfig "github.com/odigos-io/odigos/autoscaler/controllers/controller_config"
 	"github.com/odigos-io/odigos/autoscaler/controllers/gateway"
 	nameutils "github.com/odigos-io/odigos/autoscaler/utils"
 
@@ -165,14 +168,14 @@ func main() {
 		os.Exit(1)
 	}
 
-	client, err := k8sClient.GetK8sClientset()
-	if err != nil {
-		setupLog.Error(err, "unable to create k8s clientset")
-	}
+	// The name processor is used to transform device ids injected with the virtual device,
+	// to service names and k8s attributes.
+	// it is not needed for eBPF instrumentation or OpAMP implementations.
+	// at the time of writing (2024-10-22) only dotnet and java native agent are using the name processor.
+	_, disableNameProcessor := os.LookupEnv("DISABLE_NAME_PROCESSOR")
 
-	tier, err := k8sUtils.GetCurrentOdigosTier(context.Background(), odigosNs, client)
-	if err != nil {
-		setupLog.Error(err, "unable to get current odigos tier")
+	config := &controllerconfig.ControllerConfig{
+		MetricsServerEnabled: isMetricsServerInstalled(mgr, setupLog),
 	}
 
 	if err = (&controllers.DestinationReconciler{
@@ -180,37 +183,40 @@ func main() {
 		Scheme:           mgr.GetScheme(),
 		ImagePullSecrets: imagePullSecrets,
 		OdigosVersion:    odigosVersion,
+		Config:           config,
 	}).SetupWithManager(mgr); err != nil {
 		setupLog.Error(err, "unable to create controller", "controller", "Destination")
 		os.Exit(1)
 	}
 
 	if err = (&controllers.ProcessorReconciler{
-		Client:           mgr.GetClient(),
-		Scheme:           mgr.GetScheme(),
-		ImagePullSecrets: imagePullSecrets,
-		OdigosVersion:    odigosVersion,
-		OdigosTier:       tier,
+		Client:               mgr.GetClient(),
+		Scheme:               mgr.GetScheme(),
+		ImagePullSecrets:     imagePullSecrets,
+		OdigosVersion:        odigosVersion,
+		DisableNameProcessor: disableNameProcessor,
+		Config:               config,
 	}).SetupWithManager(mgr); err != nil {
 		setupLog.Error(err, "unable to create controller", "controller", "Processor")
 		os.Exit(1)
 	}
 	if err = (&controllers.CollectorsGroupReconciler{
-		Client:           mgr.GetClient(),
-		Scheme:           mgr.GetScheme(),
-		ImagePullSecrets: imagePullSecrets,
-		OdigosVersion:    odigosVersion,
-		OdigosTier:       tier,
+		Client:               mgr.GetClient(),
+		Scheme:               mgr.GetScheme(),
+		ImagePullSecrets:     imagePullSecrets,
+		OdigosVersion:        odigosVersion,
+		DisableNameProcessor: disableNameProcessor,
+		Config:               config,
 	}).SetupWithManager(mgr); err != nil {
 		setupLog.Error(err, "unable to create controller", "controller", "CollectorsGroup")
 		os.Exit(1)
 	}
 	if err = (&controllers.InstrumentedApplicationReconciler{
-		Client:           mgr.GetClient(),
-		Scheme:           mgr.GetScheme(),
-		ImagePullSecrets: imagePullSecrets,
-		OdigosVersion:    odigosVersion,
-		OdigosTier:       tier,
+		Client:               mgr.GetClient(),
+		Scheme:               mgr.GetScheme(),
+		ImagePullSecrets:     imagePullSecrets,
+		OdigosVersion:        odigosVersion,
+		DisableNameProcessor: disableNameProcessor,
 	}).SetupWithManager(mgr); err != nil {
 		setupLog.Error(err, "unable to create controller", "controller", "InstrumentedApplication")
 		os.Exit(1)
@@ -220,6 +226,7 @@ func main() {
 		Scheme:           mgr.GetScheme(),
 		ImagePullSecrets: imagePullSecrets,
 		OdigosVersion:    odigosVersion,
+		Config:           config,
 	}).SetupWithManager(mgr); err != nil {
 		setupLog.Error(err, "unable to create controller", "controller", "OdigosConfig")
 		os.Exit(1)
@@ -229,6 +236,7 @@ func main() {
 		Scheme:           mgr.GetScheme(),
 		ImagePullSecrets: imagePullSecrets,
 		OdigosVersion:    odigosVersion,
+		Config:           config,
 	}).SetupWithManager(mgr); err != nil {
 		setupLog.Error(err, "unable to create controller", "controller", "Secret")
 		os.Exit(1)
@@ -268,3 +276,21 @@ func main() {
 		os.Exit(1)
 	}
 }
+
+func isMetricsServerInstalled(mgr ctrl.Manager, logger logr.Logger) bool {
+	var metricsServerDeployment appsv1.Deployment
+	// Use APIReader (uncached client) for direct access to the API server
+	// uses because mgr not cache the metrics-server deployment
+	err := mgr.GetAPIReader().Get(context.TODO(), types.NamespacedName{Name: "metrics-server", Namespace: "kube-system"}, &metricsServerDeployment)
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			logger.Info("Metrics-server deployment not found")
+		} else {
+			logger.Error(err, "Failed to get metrics-server deployment")
+		}
+		return false
+	}
+
+	logger.V(0).Info("Metrics server found")
+	return true
+}
diff --git a/cli/cmd/describe.go b/cli/cmd/describe.go
index 9426ea595..32568a70f 100644
--- a/cli/cmd/describe.go
+++ b/cli/cmd/describe.go
@@ -42,7 +42,12 @@ var describeCmd = &cobra.Command{
 		if describeRemoteFlag {
 			describeText = executeRemoteOdigosDescribe(ctx, client, odigosNs)
 		} else {
-			describeText = describe.DescribeOdigos(ctx, client, client.OdigosClient, odigosNs)
+			describeAnalyze, err := describe.DescribeOdigos(ctx, client, client.OdigosClient, odigosNs)
+			if err != nil {
+				describeText = fmt.Sprintf("Failed to describe odigos: %s", err)
+			} else {
+				describeText = describe.DescribeOdigosToText(describeAnalyze)
+			}
 		}
 		fmt.Println(describeText)
 	},
@@ -73,7 +78,12 @@ var describeSourceDeploymentCmd = &cobra.Command{
 		if describeRemoteFlag {
 			describeText = executeRemoteSourceDescribe(ctx, client, "deployment", ns, name)
 		} else {
-			describeText = describe.DescribeDeployment(ctx, client.Interface, client.OdigosClient, ns, name)
+			desc, err := describe.DescribeDeployment(ctx, client.Interface, client.OdigosClient, ns, name)
+			if err != nil {
+				describeText = fmt.Sprintf("Failed to describe deployment: %s", err)
+			} else {
+				describeText = describe.DescribeSourceToText(desc)
+			}
 		}
 		fmt.Println(describeText)
 	},
@@ -99,7 +109,12 @@ var describeSourceDaemonSetCmd = &cobra.Command{
 		if describeRemoteFlag {
 			describeText = executeRemoteSourceDescribe(ctx, client, "daemonset", ns, name)
 		} else {
-			describeText = describe.DescribeDaemonSet(ctx, client.Interface, client.OdigosClient, ns, name)
+			desc, err := describe.DescribeDaemonSet(ctx, client.Interface, client.OdigosClient, ns, name)
+			if err != nil {
+				describeText = fmt.Sprintf("Failed to describe daemonset: %s", err)
+			} else {
+				describeText = describe.DescribeSourceToText(desc)
+			}
 		}
 		fmt.Println(describeText)
 	},
@@ -125,7 +140,12 @@ var describeSourceStatefulSetCmd = &cobra.Command{
 		if describeRemoteFlag {
 			describeText = executeRemoteSourceDescribe(ctx, client, "statefulset", ns, name)
 		} else {
-			describeText = describe.DescribeStatefulSet(ctx, client.Interface, client.OdigosClient, ns, name)
+			desc, err := describe.DescribeStatefulSet(ctx, client.Interface, client.OdigosClient, ns, name)
+			if err != nil {
+				describeText = fmt.Sprintf("Failed to describe statefulset: %s", err)
+			} else {
+				describeText = describe.DescribeSourceToText(desc)
+			}
 		}
 		fmt.Println(describeText)
 	},
diff --git a/cli/cmd/diagnose.go b/cli/cmd/diagnose.go
index 74117f485..45f33b7ad 100644
--- a/cli/cmd/diagnose.go
+++ b/cli/cmd/diagnose.go
@@ -5,80 +5,25 @@ import (
 	"compress/gzip"
 	"context"
 	"fmt"
-	"github.com/odigos-io/odigos/cli/cmd/resources"
+	"github.com/odigos-io/odigos/cli/cmd/diagnose_util"
 	"github.com/odigos-io/odigos/cli/pkg/kube"
-	"github.com/odigos-io/odigos/k8sutils/pkg/client"
 	"github.com/spf13/cobra"
 	"io"
-	v1 "k8s.io/api/core/v1"
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-	"k8s.io/apimachinery/pkg/apis/meta/v1/unstructured"
-	"k8s.io/apimachinery/pkg/runtime/schema"
 	"os"
 	"path/filepath"
-	"sigs.k8s.io/yaml"
 	"sync"
 	"time"
 )
 
 const (
-	logBufferSize   = 1024 * 1024 // 1MB buffer size for reading logs in chunks
-	LogsDir         = "Logs"
-	CRDsDir         = "CRDs"
-	CRDName         = "crdName"
-	CRDGroup        = "crdGroup"
-	actionGroupName = "actions.odigos.io"
-	odigosGroupName = "odigos.io"
+	LogsDir    = "Logs"
+	CRDsDir    = "CRDs"
+	ProfileDir = "Profile"
+	MetricsDir = "Metrics"
 )
 
 var (
-	diagnoseDirs = []string{LogsDir, CRDsDir}
-	CRDsList     = []map[string]string{
-		{
-			CRDName:  "addclusterinfos",
-			CRDGroup: actionGroupName,
-		},
-		{
-			CRDName:  "deleteattributes",
-			CRDGroup: actionGroupName,
-		},
-		{
-			CRDName:  "renameattributes",
-			CRDGroup: actionGroupName,
-		},
-		{
-			CRDName:  "probabilisticsamplers",
-			CRDGroup: actionGroupName,
-		},
-		{
-			CRDName:  "piimaskings",
-			CRDGroup: actionGroupName,
-		},
-		{
-			CRDName:  "latencysamplers",
-			CRDGroup: actionGroupName,
-		},
-		{
-			CRDName:  "errorsamplers",
-			CRDGroup: actionGroupName,
-		},
-		{
-			CRDName:  "instrumentedapplications",
-			CRDGroup: odigosGroupName,
-		},
-		{
-			CRDName:  "instrumentationconfigs",
-			CRDGroup: odigosGroupName,
-		},
-		{
-			CRDName:  "instrumentationrules",
-			CRDGroup: odigosGroupName,
-		},
-		{
-			CRDName:  "instrumentationinstances",
-			CRDGroup: odigosGroupName,
-		},
-	}
+	diagnoseDirs = []string{LogsDir, CRDsDir, ProfileDir, MetricsDir}
 )
 
 var diagnoseCmd = &cobra.Command{
@@ -108,11 +53,11 @@ func startDiagnose(ctx context.Context, client *kube.Client) error {
 
 	var wg sync.WaitGroup
 
-	// Fetch Odigos components logs
+	//// Fetch Odigos components logs
 	wg.Add(1)
 	go func() {
 		defer wg.Done()
-		if err := fetchOdigosComponentsLogs(ctx, client, filepath.Join(mainTempDir, LogsDir)); err != nil {
+		if err := diagnose_util.FetchOdigosComponentsLogs(ctx, client, filepath.Join(mainTempDir, LogsDir)); err != nil {
 			fmt.Printf("Error fetching Odigos components logs: %v\n", err)
 		}
 	}()
@@ -121,7 +66,34 @@ func startDiagnose(ctx context.Context, client *kube.Client) error {
 	wg.Add(1)
 	go func() {
 		defer wg.Done()
-		if err = fetchOdigosCRs(ctx, client, filepath.Join(mainTempDir, CRDsDir)); err != nil {
+		if err = diagnose_util.FetchOdigosCRs(ctx, client, filepath.Join(mainTempDir, CRDsDir)); err != nil {
+			fmt.Printf("Error fetching Odigos CRDs: %v\n", err)
+		}
+	}()
+
+	// Fetch Odigos Profile
+	wg.Add(1)
+	go func() {
+		defer wg.Done()
+		if err = diagnose_util.FetchOdigosProfiles(ctx, client, filepath.Join(mainTempDir, ProfileDir)); err != nil {
+			fmt.Printf("Error calculating Odigos Profile: %v\n", err)
+		}
+	}()
+
+	// Fetch Odigos Collector Metrics
+	wg.Add(1)
+	go func() {
+		defer wg.Done()
+		if err = diagnose_util.FetchOdigosCollectorMetrics(ctx, client, filepath.Join(mainTempDir, MetricsDir)); err != nil {
+			fmt.Printf("Error calculating Odigos Metrics: %v\n", err)
+		}
+	}()
+
+	// Fetch Odigos Destinations
+	wg.Add(1)
+	go func() {
+		defer wg.Done()
+		if err = diagnose_util.FetchDestinationsCRDs(ctx, client, filepath.Join(mainTempDir, CRDsDir)); err != nil {
 			fmt.Printf("Error fetching Odigos CRDs: %v\n", err)
 		}
 	}()
@@ -153,175 +125,6 @@ func createAllDirs() (string, error) {
 	return mainTempDir, nil
 }
 
-func fetchOdigosComponentsLogs(ctx context.Context, client *kube.Client, logDir string) error {
-	odigosNamespace, err := resources.GetOdigosNamespace(client, ctx)
-	if err != nil {
-		return err
-	}
-
-	pods, err := client.CoreV1().Pods(odigosNamespace).List(context.TODO(), metav1.ListOptions{})
-	if err != nil {
-		return err
-	}
-
-	var wg sync.WaitGroup
-
-	for _, pod := range pods.Items {
-		wg.Add(1)
-		go func() {
-			defer wg.Done()
-			fetchPodLogs(ctx, client, odigosNamespace, pod, logDir)
-		}()
-	}
-
-	wg.Wait()
-
-	return nil
-}
-
-func fetchPodLogs(ctx context.Context, client *kube.Client, odigosNamespace string, pod v1.Pod, logDir string) {
-	for _, container := range pod.Spec.Containers {
-		fetchingContainerLogs(ctx, client, odigosNamespace, pod, container, logDir)
-
-	}
-}
-
-func fetchingContainerLogs(ctx context.Context, client *kube.Client, odigosNamespace string, pod v1.Pod, container v1.Container, logDir string) {
-	logPrefix := fmt.Sprintf("Fetching logs for Pod: %s, Container: %s, Node: %s", pod.Name, container.Name, pod.Spec.NodeName)
-	fmt.Printf(logPrefix + "\n")
-
-	// Define the log file path for saving compressed logs
-	logFilePath := filepath.Join(logDir, pod.Name+"_"+container.Name+"_"+pod.Spec.NodeName+".log.gz")
-	logFile, err := os.OpenFile(logFilePath, os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0666)
-	if err != nil {
-		fmt.Printf(logPrefix+" - Failed - Error creating log file: %v\n", err)
-		return
-	}
-	defer logFile.Close()
-
-	req := client.CoreV1().Pods(odigosNamespace).GetLogs(pod.Name, &v1.PodLogOptions{})
-	logStream, err := req.Stream(ctx)
-	if err != nil {
-		fmt.Printf(logPrefix+" - Failed - Error creating log stream: %v\n", err)
-		return
-	}
-	defer logStream.Close()
-
-	if err = saveLogsToGzipFileInBatches(logFile, logStream, logBufferSize); err != nil {
-		fmt.Printf(logPrefix+" - Failed - Error saving logs to file: %v\n", err)
-		return
-	}
-}
-
-func saveLogsToGzipFileInBatches(logFile *os.File, logStream io.ReadCloser, bufferSize int) error {
-	// Create a gzip writer to compress the logs
-	gzipWriter := gzip.NewWriter(logFile)
-	defer gzipWriter.Close()
-
-	// Read logs in chunks and write them to the file
-	buffer := make([]byte, bufferSize)
-	for {
-		n, err := logStream.Read(buffer)
-		if n > 0 {
-			// Write the chunk to the gzip file
-			if _, err := gzipWriter.Write(buffer[:n]); err != nil {
-				return err
-			}
-		}
-
-		if err == io.EOF {
-			// End of the log stream; break out of the loop
-			break
-		}
-
-		if err != nil {
-			return err
-		}
-	}
-
-	return nil
-}
-
-func fetchOdigosCRs(ctx context.Context, kubeClient *kube.Client, crdDir string) error {
-	var wg sync.WaitGroup
-
-	for _, resourceData := range CRDsList {
-		crdDataDirPath := filepath.Join(crdDir, resourceData[CRDName])
-		err := os.Mkdir(crdDataDirPath, os.ModePerm) // os.ModePerm gives full permissions (0777)
-		if err != nil {
-			fmt.Printf("Error creating directory for CRD: %v, because: %v", resourceData, err)
-			continue
-		}
-
-		wg.Add(1)
-
-		go func() {
-			defer wg.Done()
-			err = fetchSingleResource(ctx, kubeClient, crdDataDirPath, resourceData)
-			if err != nil {
-				fmt.Printf("Error Getting CRDs of: %v, because: %v\n", resourceData[CRDName], err)
-			}
-		}()
-	}
-
-	wg.Wait()
-
-	return nil
-}
-
-func fetchSingleResource(ctx context.Context, kubeClient *kube.Client, crdDataDirPath string, resourceData map[string]string) error {
-	fmt.Printf("Fetching Resource: %s\n", resourceData[CRDName])
-
-	gvr := schema.GroupVersionResource{
-		Group:    resourceData[CRDGroup], // The API group
-		Version:  "v1alpha1",             // The version of the resourceData
-		Resource: resourceData[CRDName],  // The resourceData type
-	}
-
-	err := client.ListWithPages(client.DefaultPageSize, kubeClient.Dynamic.Resource(gvr).List, ctx, metav1.ListOptions{}, func(crds *unstructured.UnstructuredList) error {
-		for _, crd := range crds.Items {
-			if err := saveCrdToFile(crd, crdDataDirPath); err != nil {
-				fmt.Printf("Fetching Resource %s Failed because: %s\n", resourceData[CRDName], err)
-			}
-		}
-		return nil
-	},
-	)
-
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func saveCrdToFile(crd unstructured.Unstructured, crdDataDirPath string) error {
-	crdDirPath := filepath.Join(crdDataDirPath, crd.GetName()+".yaml.gz")
-	crdFile, err := os.OpenFile(crdDirPath, os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0666)
-	if err != nil {
-		return err
-	}
-	defer crdFile.Close()
-
-	gzipWriter := gzip.NewWriter(crdFile)
-	defer gzipWriter.Close()
-
-	crdYAML, err := yaml.Marshal(crd)
-	if err != nil {
-		return err
-	}
-
-	_, err = gzipWriter.Write(crdYAML)
-	if err != nil {
-		return err
-	}
-	if err = gzipWriter.Flush(); err != nil {
-		return err
-	}
-
-	return nil
-}
-
 func createTarGz(sourceDir string) error {
 	timestamp := time.Now().Format("02012006150405")
 	tarGzFileName := fmt.Sprintf("odigos_debug_%s.tar.gz", timestamp)
diff --git a/cli/cmd/diagnose_util/crd_utils.go b/cli/cmd/diagnose_util/crd_utils.go
new file mode 100644
index 000000000..9eb99cbec
--- /dev/null
+++ b/cli/cmd/diagnose_util/crd_utils.go
@@ -0,0 +1,171 @@
+package diagnose_util
+
+import (
+	"context"
+	"fmt"
+	"github.com/odigos-io/odigos/cli/cmd/resources"
+	"github.com/odigos-io/odigos/cli/pkg/kube"
+	"github.com/odigos-io/odigos/k8sutils/pkg/client"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/apis/meta/v1/unstructured"
+	"k8s.io/apimachinery/pkg/runtime/schema"
+	"os"
+	"path/filepath"
+	"sigs.k8s.io/yaml"
+	"sync"
+)
+
+const (
+	CRDName         = "crdName"
+	CRDGroup        = "crdGroup"
+	actionGroupName = "actions.odigos.io"
+	odigosGroupName = "odigos.io"
+)
+
+var CRDsList = []map[string]string{
+	{
+		CRDName:  "addclusterinfos",
+		CRDGroup: actionGroupName,
+	},
+	{
+		CRDName:  "deleteattributes",
+		CRDGroup: actionGroupName,
+	},
+	{
+		CRDName:  "renameattributes",
+		CRDGroup: actionGroupName,
+	},
+	{
+		CRDName:  "probabilisticsamplers",
+		CRDGroup: actionGroupName,
+	},
+	{
+		CRDName:  "piimaskings",
+		CRDGroup: actionGroupName,
+	},
+	{
+		CRDName:  "latencysamplers",
+		CRDGroup: actionGroupName,
+	},
+	{
+		CRDName:  "errorsamplers",
+		CRDGroup: actionGroupName,
+	},
+	{
+		CRDName:  "instrumentedapplications",
+		CRDGroup: odigosGroupName,
+	},
+	{
+		CRDName:  "instrumentationconfigs",
+		CRDGroup: odigosGroupName,
+	},
+	{
+		CRDName:  "instrumentationrules",
+		CRDGroup: odigosGroupName,
+	},
+	{
+		CRDName:  "instrumentationinstances",
+		CRDGroup: odigosGroupName,
+	},
+}
+
+func FetchOdigosCRs(ctx context.Context, kubeClient *kube.Client, crdDir string) error {
+	var wg sync.WaitGroup
+
+	for _, resourceData := range CRDsList {
+		crdDataDirPath := filepath.Join(crdDir, resourceData[CRDName])
+		err := os.Mkdir(crdDataDirPath, os.ModePerm) // os.ModePerm gives full permissions (0777)
+		if err != nil {
+			fmt.Printf("Error creating directory for CRD: %v, because: %v", resourceData, err)
+			continue
+		}
+
+		wg.Add(1)
+
+		go func() {
+			defer wg.Done()
+			err = fetchSingleResource(ctx, kubeClient, crdDataDirPath, resourceData)
+			if err != nil {
+				fmt.Printf("Error Getting CRDs of: %v, because: %v\n", resourceData[CRDName], err)
+			}
+		}()
+	}
+
+	wg.Wait()
+
+	return nil
+}
+
+func fetchSingleResource(ctx context.Context, kubeClient *kube.Client, crdDataDirPath string, resourceData map[string]string) error {
+	fmt.Printf("Fetching Resource: %s\n", resourceData[CRDName])
+
+	gvr := schema.GroupVersionResource{
+		Group:    resourceData[CRDGroup], // The API group
+		Version:  "v1alpha1",             // The version of the resourceData
+		Resource: resourceData[CRDName],  // The resourceData type
+	}
+
+	err := client.ListWithPages(client.DefaultPageSize, kubeClient.Dynamic.Resource(gvr).List, ctx, metav1.ListOptions{}, func(crds *unstructured.UnstructuredList) error {
+		for _, crd := range crds.Items {
+			if err := saveCrdToFile(crd, crdDataDirPath, crd.GetName()); err != nil {
+				fmt.Printf("Fetching Resource %s Failed because: %s\n", resourceData[CRDName], err)
+			}
+		}
+		return nil
+	},
+	)
+
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func saveCrdToFile(crd interface{}, crdDataDirPath string, crdName string) error {
+	crdDirPath := filepath.Join(crdDataDirPath, crdName+".yaml")
+	crdFile, err := os.OpenFile(crdDirPath, os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0666)
+	if err != nil {
+		return err
+	}
+	defer crdFile.Close()
+
+	crdYAML, err := yaml.Marshal(crd)
+	if err != nil {
+		return err
+	}
+
+	_, err = crdFile.Write(crdYAML)
+	if err != nil {
+		return err
+	}
+	if err = crdFile.Sync(); err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func FetchDestinationsCRDs(ctx context.Context, client *kube.Client, CRDsDir string) error {
+	odigosNamespace, err := resources.GetOdigosNamespace(client, ctx)
+	if err != nil {
+		return err
+	}
+
+	destinations, err := client.OdigosClient.Destinations(odigosNamespace).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return err
+	}
+
+	crdDestinationPath := filepath.Join(CRDsDir, "destinations")
+	err = os.Mkdir(crdDestinationPath, os.ModePerm)
+
+	for _, destination := range destinations.Items {
+		if err := saveCrdToFile(destination, crdDestinationPath, destination.Name); err != nil {
+			fmt.Printf("Fetching Resource %s Failed because: %s\n", destination.Name, err)
+		}
+
+	}
+
+	return nil
+}
diff --git a/cli/cmd/diagnose_util/logs_util.go b/cli/cmd/diagnose_util/logs_util.go
new file mode 100644
index 000000000..866a0f384
--- /dev/null
+++ b/cli/cmd/diagnose_util/logs_util.go
@@ -0,0 +1,124 @@
+package diagnose_util
+
+import (
+	"compress/gzip"
+	"context"
+	"fmt"
+	"github.com/odigos-io/odigos/cli/cmd/resources"
+	"github.com/odigos-io/odigos/cli/pkg/kube"
+	"io"
+	v1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"os"
+	"path/filepath"
+	"sync"
+)
+
+const logBufferSize = 1024 * 1024 // 1MB buffer size for reading logs in chunks
+
+func FetchOdigosComponentsLogs(ctx context.Context, client *kube.Client, logDir string) error {
+	odigosNamespace, err := resources.GetOdigosNamespace(client, ctx)
+	if err != nil {
+		return err
+	}
+
+	pods, err := client.CoreV1().Pods(odigosNamespace).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return err
+	}
+
+	var wg sync.WaitGroup
+
+	for _, pod := range pods.Items {
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			fetchPodLogs(ctx, client, odigosNamespace, pod, logDir)
+		}()
+	}
+
+	wg.Wait()
+
+	return nil
+}
+
+func fetchPodLogs(ctx context.Context, client *kube.Client, odigosNamespace string, pod v1.Pod, logDir string) {
+	for _, container := range pod.Spec.Containers {
+		fetchingContainerLogs(ctx, client, odigosNamespace, pod, container, logDir, false)
+
+		// Check if the pod has been restarted
+		if pod.Status.ContainerStatuses != nil {
+			for _, status := range pod.Status.ContainerStatuses {
+				if status.RestartCount > 0 {
+					// Fetch logs from the previous instance of the container
+					fetchingContainerLogs(ctx, client, odigosNamespace, pod, container, logDir, true)
+				}
+			}
+		}
+
+	}
+}
+
+func fetchingContainerLogs(ctx context.Context, client *kube.Client, odigosNamespace string, pod v1.Pod, container v1.Container, logDir string, previous bool) {
+	logPrefix := fmt.Sprintf("Fetching logs for Pod: %s, Container: %s, Node: %s", pod.Name, container.Name, pod.Spec.NodeName)
+	fmt.Printf(logPrefix + "\n")
+
+	// Define the log file path for saving compressed logs
+	logFileName := getLogFileName(pod, container, previous)
+	logFilePath := filepath.Join(logDir, logFileName)
+	logFile, err := os.OpenFile(logFilePath, os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0666)
+	if err != nil {
+		fmt.Printf(logPrefix+" - Failed - Error creating log file: %v\n", err)
+		return
+	}
+	defer logFile.Close()
+
+	req := client.CoreV1().Pods(odigosNamespace).GetLogs(pod.Name, &v1.PodLogOptions{Previous: previous})
+	logStream, err := req.Stream(ctx)
+	if err != nil {
+		fmt.Printf(logPrefix+" - Failed - Error creating log stream: %v\n", err)
+		return
+	}
+	defer logStream.Close()
+
+	if err = saveLogsToGzipFileInBatches(logFile, logStream, logBufferSize); err != nil {
+		fmt.Printf(logPrefix+" - Failed - Error saving logs to file: %v\n", err)
+		return
+	}
+}
+
+func getLogFileName(pod v1.Pod, container v1.Container, previous bool) string {
+	if previous {
+		return pod.Name + "_" + container.Name + "_" + pod.Spec.NodeName + "_previous.log.gz"
+	}
+	return pod.Name + "_" + container.Name + "_" + pod.Spec.NodeName + ".log.gz"
+}
+
+func saveLogsToGzipFileInBatches(logFile *os.File, logStream io.ReadCloser, bufferSize int) error {
+	// Create a gzip writer to compress the logs
+	gzipWriter := gzip.NewWriter(logFile)
+	defer gzipWriter.Close()
+
+	// Read logs in chunks and write them to the file
+	buffer := make([]byte, bufferSize)
+	for {
+		n, err := logStream.Read(buffer)
+		if n > 0 {
+			// Write the chunk to the gzip file
+			if _, err := gzipWriter.Write(buffer[:n]); err != nil {
+				return err
+			}
+		}
+
+		if err == io.EOF {
+			// End of the log stream; break out of the loop
+			break
+		}
+
+		if err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
diff --git a/cli/cmd/diagnose_util/profiling_util.go b/cli/cmd/diagnose_util/profiling_util.go
new file mode 100644
index 000000000..a12bbf964
--- /dev/null
+++ b/cli/cmd/diagnose_util/profiling_util.go
@@ -0,0 +1,234 @@
+package diagnose_util
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"github.com/odigos-io/odigos/cli/cmd/resources"
+	"github.com/odigos-io/odigos/cli/pkg/kube"
+	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
+	"io"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"os"
+	"path/filepath"
+	"strconv"
+	"sync"
+)
+
+var ProfilingMetricsFunctions = []ProfileInterface{CPUProfiler{}, HeapProfiler{}, GoRoutineProfiler{}, AllocsProfiler{}}
+
+type ProfileInterface interface {
+	GetFileName() string
+	GetUrlSuffix() string
+}
+
+type CPUProfiler struct{}
+
+func (c CPUProfiler) GetFileName() string {
+	return "cpu_profile.prof"
+}
+
+func (c CPUProfiler) GetUrlSuffix() string {
+	return "/profile"
+}
+
+type HeapProfiler struct{}
+
+func (h HeapProfiler) GetFileName() string {
+	return "heap_profile.prof"
+}
+
+func (h HeapProfiler) GetUrlSuffix() string {
+	return "/heap"
+}
+
+type GoRoutineProfiler struct{}
+
+func (h GoRoutineProfiler) GetFileName() string {
+	return "goroutine_profile.prof"
+}
+
+func (h GoRoutineProfiler) GetUrlSuffix() string {
+	return "/goroutine"
+}
+
+type AllocsProfiler struct{}
+
+func (h AllocsProfiler) GetFileName() string {
+	return "allocs_profile.prof"
+}
+
+func (h AllocsProfiler) GetUrlSuffix() string {
+	return "/allocs"
+}
+
+func FetchOdigosProfiles(ctx context.Context, client *kube.Client, profileDir string) error {
+
+	odigosNamespace, err := resources.GetOdigosNamespace(client, ctx)
+	if err != nil {
+		return nil
+	}
+
+	odigletPods, err := client.CoreV1().Pods(odigosNamespace).List(ctx, metav1.ListOptions{
+		LabelSelector: "app.kubernetes.io/name=odiglet",
+	})
+	if err != nil {
+		return err
+	}
+
+	var wg sync.WaitGroup
+
+	for _, odigletPod := range odigletPods.Items {
+		fmt.Printf("Fetching profile for node: %v", odigletPod.Spec.NodeName)
+		nodeFilePath := filepath.Join(profileDir, odigletPod.Spec.NodeName)
+		err := os.Mkdir(nodeFilePath, os.ModePerm)
+		if err != nil {
+			fmt.Printf("Error creating directory for node: %v, because: %v", nodeFilePath, err)
+			continue
+		}
+
+		for _, profileMetricFunction := range ProfilingMetricsFunctions {
+			metricFilePath := filepath.Join(nodeFilePath, profileMetricFunction.GetFileName())
+			metricFile, err := os.OpenFile(metricFilePath, os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0666)
+			if err != nil {
+				fmt.Printf("Error creating file: %v, because: %v", metricFilePath, err)
+				continue
+			}
+			defer metricFile.Close()
+
+			wg.Add(1)
+
+			go func() {
+				defer wg.Done()
+				podName := odigletPod.Name
+				err = captureProfile(ctx, client, podName, odigosNamespace, metricFile, profileMetricFunction)
+				if err != nil {
+					fmt.Printf("Error Getting Profile Data  of: %v, because: %v\n", profileMetricFunction, err)
+				}
+			}()
+		}
+
+		wg.Wait()
+	}
+
+	return nil
+}
+
+func captureProfile(ctx context.Context, client *kube.Client, podName string, namespace string, metricFile *os.File, profileInterface ProfileInterface) error {
+	proxyURL := fmt.Sprintf("/api/v1/namespaces/%s/pods/%s:6060/proxy/debug/pprof%s", namespace, podName, profileInterface.GetUrlSuffix())
+
+	// Make the HTTP GET request via the API server proxy
+	request := client.Clientset.CoreV1().RESTClient().
+		Get().
+		AbsPath(proxyURL).
+		Do(ctx)
+
+	response, err := request.Raw()
+	if err != nil {
+		return err
+	}
+
+	_, err = io.Copy(metricFile, bytes.NewReader(response))
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func FetchOdigosCollectorMetrics(ctx context.Context, client *kube.Client, metricsDir string) error {
+	odigosNamespace, err := resources.GetOdigosNamespace(client, ctx)
+	if err != nil {
+		return nil
+	}
+
+	var wg sync.WaitGroup
+
+	wg.Add(1)
+	go func() {
+		defer wg.Done()
+		err = collectMetrics(ctx, client, odigosNamespace, metricsDir, consts.CollectorsRoleClusterGateway)
+		if err != nil {
+			fmt.Printf("Error Getting Metrics Data of: %v, because: %v\n", consts.CollectorsRoleClusterGateway, err)
+		}
+	}()
+
+	wg.Add(1)
+	go func() {
+		defer wg.Done()
+		err = collectMetrics(ctx, client, odigosNamespace, metricsDir, consts.CollectorsRoleNodeCollector)
+		if err != nil {
+			fmt.Printf("Error Getting Metrics Data of: %v, because: %v\n", consts.CollectorsRoleNodeCollector, err)
+		}
+	}()
+
+	wg.Wait()
+
+	return nil
+}
+
+func collectMetrics(ctx context.Context, client *kube.Client, odigosNamespace string, metricsDir string, collectorRole consts.CollectorRole) error {
+	collectorPods, err := client.CoreV1().Pods(odigosNamespace).List(ctx, metav1.ListOptions{
+		LabelSelector: "odigos.io/collector-role=" + string(collectorRole),
+	})
+	if err != nil {
+		return err
+	}
+
+	var wg sync.WaitGroup
+
+	for _, collectorPod := range collectorPods.Items {
+		fmt.Printf("Fetching metrics for pod: %v", collectorPod.Name)
+		metricFilePath := filepath.Join(metricsDir, collectorPod.Name)
+		metricFile, err := os.OpenFile(metricFilePath, os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0666)
+		if err != nil {
+			fmt.Printf("Error creating file: %v, because: %v", metricFilePath, err)
+			continue
+		}
+		defer metricFile.Close()
+
+		wg.Add(1)
+
+		go func() {
+			defer wg.Done()
+			err = captureMetrics(ctx, client, collectorPod.Name, odigosNamespace, metricFile, collectorRole)
+			if err != nil {
+				fmt.Printf("Error Getting Metrics Data of: %v, because: %v\n", metricFile, err)
+			}
+		}()
+	}
+
+	wg.Wait()
+	return nil
+}
+
+func captureMetrics(ctx context.Context, client *kube.Client, podName string, namespace string, metricFile *os.File, collectorRole consts.CollectorRole) error {
+	portNumber := ""
+	if collectorRole == consts.CollectorsRoleClusterGateway {
+		portNumber = strconv.Itoa(int(consts.OdigosClusterCollectorOwnTelemetryPortDefault))
+	} else if collectorRole == consts.CollectorsRoleNodeCollector {
+		portNumber = strconv.Itoa(int(consts.OdigosNodeCollectorOwnTelemetryPortDefault))
+	} else {
+		return nil
+	}
+
+	proxyURL := fmt.Sprintf("/api/v1/namespaces/%s/pods/%s:%s/proxy/metrics", namespace, podName, portNumber)
+
+	// Make the HTTP GET request via the API server proxy
+	request := client.Clientset.CoreV1().RESTClient().
+		Get().
+		AbsPath(proxyURL).
+		Do(ctx)
+
+	response, err := request.Raw()
+	if err != nil {
+		return err
+	}
+
+	_, err = io.Copy(metricFile, bytes.NewReader(response))
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
diff --git a/cli/cmd/install.go b/cli/cmd/install.go
index 9d318fb75..8cb729242 100644
--- a/cli/cmd/install.go
+++ b/cli/cmd/install.go
@@ -179,52 +179,10 @@ func createNamespace(ctx context.Context, cmd *cobra.Command, client *kube.Clien
 	return nil
 }
 
-func otelSdkConfigCommunity() map[common.ProgrammingLanguage]common.OtelSdk {
-	return map[common.ProgrammingLanguage]common.OtelSdk{
-		common.JavaProgrammingLanguage:       common.OtelSdkNativeCommunity,
-		common.PythonProgrammingLanguage:     common.OtelSdkNativeCommunity,
-		common.GoProgrammingLanguage:         common.OtelSdkEbpfCommunity,
-		common.DotNetProgrammingLanguage:     common.OtelSdkNativeCommunity,
-		common.JavascriptProgrammingLanguage: common.OtelSdkNativeCommunity,
-	}
-}
-
-func otelSdkConfigCloud() map[common.ProgrammingLanguage]common.OtelSdk {
-	return map[common.ProgrammingLanguage]common.OtelSdk{
-		common.JavaProgrammingLanguage:       common.OtelSdkNativeCommunity,
-		common.PythonProgrammingLanguage:     common.OtelSdkNativeCommunity,
-		common.GoProgrammingLanguage:         common.OtelSdkEbpfEnterprise,
-		common.DotNetProgrammingLanguage:     common.OtelSdkNativeCommunity,
-		common.JavascriptProgrammingLanguage: common.OtelSdkNativeCommunity,
-	}
-}
-
-func otelSdkConfigOnPrem() map[common.ProgrammingLanguage]common.OtelSdk {
-	return map[common.ProgrammingLanguage]common.OtelSdk{
-		common.JavaProgrammingLanguage:       common.OtelSdkEbpfEnterprise, // Notice - for onprem, the default for java is eBPF
-		common.PythonProgrammingLanguage:     common.OtelSdkEbpfEnterprise,
-		common.GoProgrammingLanguage:         common.OtelSdkEbpfEnterprise,
-		common.DotNetProgrammingLanguage:     common.OtelSdkNativeCommunity,
-		common.JavascriptProgrammingLanguage: common.OtelSdkEbpfEnterprise,
-		common.MySQLProgrammingLanguage:      common.OtelSdkEbpfEnterprise,
-		common.NginxProgrammingLanguage:      common.OtelSdkNativeCommunity,
-	}
-}
-
 func createOdigosConfig(odigosTier common.OdigosTier) common.OdigosConfiguration {
 	fullIgnoredNamespaces := utils.MergeDefaultIgnoreWithUserInput(userInputIgnoredNamespaces, consts.SystemNamespaces)
 	fullIgnoredContainers := utils.MergeDefaultIgnoreWithUserInput(userInputIgnoredContainers, consts.IgnoredContainers)
 
-	var defaultOtelSdkPerLanguage map[common.ProgrammingLanguage]common.OtelSdk
-	switch odigosTier {
-	case common.CommunityOdigosTier:
-		defaultOtelSdkPerLanguage = otelSdkConfigCommunity()
-	case common.CloudOdigosTier:
-		defaultOtelSdkPerLanguage = otelSdkConfigCloud()
-	case common.OnPremOdigosTier:
-		defaultOtelSdkPerLanguage = otelSdkConfigOnPrem()
-	}
-
 	selectedProfiles := []common.ProfileName{}
 	profiles := resources.GetAvailableProfilesForTier(odigosTier)
 	for _, profile := range userInputInstallProfiles {
@@ -253,7 +211,6 @@ func createOdigosConfig(odigosTier common.OdigosTier) common.OdigosConfiguration
 		OdigletImage:      odigletImage,
 		InstrumentorImage: instrumentorImage,
 		AutoscalerImage:   autoScalerImage,
-		DefaultSDKs:       defaultOtelSdkPerLanguage,
 		Profiles:          selectedProfiles,
 	}
 }
diff --git a/cli/cmd/resources/autoscaler.go b/cli/cmd/resources/autoscaler.go
index c6e99ba96..506e7770c 100644
--- a/cli/cmd/resources/autoscaler.go
+++ b/cli/cmd/resources/autoscaler.go
@@ -2,13 +2,13 @@ package resources
 
 import (
 	"context"
+	"slices"
 
 	"github.com/odigos-io/odigos/cli/cmd/resources/resourcemanager"
 	"github.com/odigos-io/odigos/cli/pkg/containers"
 	"github.com/odigos-io/odigos/cli/pkg/kube"
 	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
@@ -393,7 +393,18 @@ func NewAutoscalerLeaderElectionRoleBinding(ns string) *rbacv1.RoleBinding {
 	}
 }
 
-func NewAutoscalerDeployment(ns string, version string, imagePrefix string, imageName string) *appsv1.Deployment {
+func NewAutoscalerDeployment(ns string, version string, imagePrefix string, imageName string, disableNameProcessor bool) *appsv1.Deployment {
+
+	optionalEnvs := []corev1.EnvVar{}
+
+	if disableNameProcessor {
+		// temporary until we migrate java and dotnet to OpAMP
+		optionalEnvs = append(optionalEnvs, corev1.EnvVar{
+			Name:  "DISABLE_NAME_PROCESSOR",
+			Value: "true",
+		})
+	}
+
 	dep := &appsv1.Deployment{
 		TypeMeta: metav1.TypeMeta{
 			Kind:       "Deployment",
@@ -435,7 +446,7 @@ func NewAutoscalerDeployment(ns string, version string, imagePrefix string, imag
 								"--metrics-bind-address=127.0.0.1:8080",
 								"--leader-elect",
 							},
-							Env: []corev1.EnvVar{
+							Env: append([]corev1.EnvVar{
 								{
 									Name:  "OTEL_SERVICE_NAME",
 									Value: AutoScalerServiceName,
@@ -448,7 +459,7 @@ func NewAutoscalerDeployment(ns string, version string, imagePrefix string, imag
 										},
 									},
 								},
-							},
+							}, optionalEnvs...),
 							EnvFrom: []corev1.EnvFromSource{
 								{
 									ConfigMapRef: &corev1.ConfigMapEnvSource{
@@ -528,14 +539,17 @@ func NewAutoScalerResourceManager(client *kube.Client, ns string, config *common
 func (a *autoScalerResourceManager) Name() string { return "AutoScaler" }
 
 func (a *autoScalerResourceManager) InstallFromScratch(ctx context.Context) error {
-	resources := []client.Object{
+
+	disableNameProcessor := slices.Contains(a.config.Profiles, "disable-name-processor") || slices.Contains(a.config.Profiles, "kratos")
+
+	resources := []kube.Object{
 		NewAutoscalerServiceAccount(a.ns),
 		NewAutoscalerRole(a.ns),
 		NewAutoscalerRoleBinding(a.ns),
 		NewAutoscalerClusterRole(),
 		NewAutoscalerClusterRoleBinding(a.ns),
 		NewAutoscalerLeaderElectionRoleBinding(a.ns),
-		NewAutoscalerDeployment(a.ns, a.odigosVersion, a.config.ImagePrefix, a.config.AutoscalerImage),
+		NewAutoscalerDeployment(a.ns, a.odigosVersion, a.config.ImagePrefix, a.config.AutoscalerImage, disableNameProcessor),
 	}
 	return a.client.ApplyResources(ctx, a.config.ConfigVersion, resources)
 }
diff --git a/cli/cmd/resources/datacollection.go b/cli/cmd/resources/datacollection.go
index cf274d279..2462ae501 100644
--- a/cli/cmd/resources/datacollection.go
+++ b/cli/cmd/resources/datacollection.go
@@ -9,7 +9,6 @@ import (
 	corev1 "k8s.io/api/core/v1"
 	rbacv1 "k8s.io/api/rbac/v1"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 )
 
 func NewDataCollectionServiceAccount(ns string) *corev1.ServiceAccount {
@@ -123,7 +122,7 @@ func NewDataCollectionResourceManager(client *kube.Client, ns string, config *co
 func (a *dataCollectionResourceManager) Name() string { return "DataCollection" }
 
 func (a *dataCollectionResourceManager) InstallFromScratch(ctx context.Context) error {
-	resources := []client.Object{
+	resources := []kube.Object{
 		NewDataCollectionServiceAccount(a.ns),
 		NewDataCollectionClusterRole(a.config.Psp),
 		NewDataCollectionClusterRoleBinding(a.ns),
diff --git a/cli/cmd/resources/instrumentor.go b/cli/cmd/resources/instrumentor.go
index 238363e0b..e2e972306 100644
--- a/cli/cmd/resources/instrumentor.go
+++ b/cli/cmd/resources/instrumentor.go
@@ -9,10 +9,10 @@ import (
 	"github.com/odigos-io/odigos/cli/pkg/crypto"
 	"github.com/odigos-io/odigos/cli/pkg/kube"
 	"github.com/odigos-io/odigos/common"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 
 	certv1 "github.com/cert-manager/cert-manager/pkg/apis/certmanager/v1"
 	cmmeta "github.com/cert-manager/cert-manager/pkg/apis/meta/v1"
+	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
 	admissionregistrationv1 "k8s.io/api/admissionregistration/v1"
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
@@ -44,7 +44,7 @@ func NewInstrumentorServiceAccount(ns string) *corev1.ServiceAccount {
 	}
 }
 
-func NewInstrumentorRoleBinding(ns string) *rbacv1.RoleBinding {
+func NewInstrumentorLeaderElectionRoleBinding(ns string) *rbacv1.RoleBinding {
 	return &rbacv1.RoleBinding{
 		TypeMeta: metav1.TypeMeta{
 			Kind:       "RoleBinding",
@@ -168,11 +168,6 @@ func NewInstrumentorClusterRole() *rbacv1.ClusterRole {
 				Resources: []string{"instrumentedapplications/status"},
 				Verbs:     []string{"get", "patch", "update"},
 			},
-			{
-				APIGroups: []string{"odigos.io"},
-				Resources: []string{"odigosconfigurations"},
-				Verbs:     []string{"create", "delete", "get", "list", "patch", "update", "watch"},
-			},
 			{
 				APIGroups: []string{"odigos.io"},
 				Resources: []string{"destinations"},
@@ -483,7 +478,15 @@ func NewInstrumentorDeployment(ns string, version string, telemetryEnabled bool,
 										},
 									},
 								},
+								{
+									ConfigMapRef: &corev1.ConfigMapEnvSource{
+										LocalObjectReference: corev1.LocalObjectReference{
+											Name: consts.OdigosDeploymentConfigMapName,
+										},
+									},
+								},
 							},
+
 							Ports: []corev1.ContainerPort{
 								{
 									Name:          "webhook-server",
@@ -585,9 +588,9 @@ func (a *instrumentorResourceManager) Name() string { return "Instrumentor" }
 
 func (a *instrumentorResourceManager) InstallFromScratch(ctx context.Context) error {
 	certManagerInstalled := isCertManagerInstalled(ctx, a.client)
-	resources := []client.Object{
+	resources := []kube.Object{
 		NewInstrumentorServiceAccount(a.ns),
-		NewInstrumentorRoleBinding(a.ns),
+		NewInstrumentorLeaderElectionRoleBinding(a.ns),
 		NewInstrumentorClusterRole(),
 		NewInstrumentorClusterRoleBinding(a.ns),
 		NewInstrumentorDeployment(a.ns, a.odigosVersion, a.config.TelemetryEnabled, a.config.ImagePrefix, a.config.InstrumentorImage),
@@ -595,7 +598,7 @@ func (a *instrumentorResourceManager) InstallFromScratch(ctx context.Context) er
 	}
 
 	if certManagerInstalled {
-		resources = append([]client.Object{NewInstrumentorIssuer(a.ns),
+		resources = append([]kube.Object{NewInstrumentorIssuer(a.ns),
 			NewInstrumentorCertificate(a.ns),
 			NewMutatingWebhookConfiguration(a.ns, nil),
 		},
@@ -616,7 +619,7 @@ func (a *instrumentorResourceManager) InstallFromScratch(ctx context.Context) er
 			return fmt.Errorf("failed to generate signed certificate: %w", err)
 		}
 
-		resources = append([]client.Object{NewInstrumentorTLSSecret(a.ns, &cert),
+		resources = append([]kube.Object{NewInstrumentorTLSSecret(a.ns, &cert),
 			NewMutatingWebhookConfiguration(a.ns, []byte(cert.Cert)),
 		},
 			resources...)
diff --git a/cli/cmd/resources/keyvalproxy.go b/cli/cmd/resources/keyvalproxy.go
index 77bbdb765..950410840 100644
--- a/cli/cmd/resources/keyvalproxy.go
+++ b/cli/cmd/resources/keyvalproxy.go
@@ -9,7 +9,6 @@ import (
 	"github.com/odigos-io/odigos/cli/pkg/kube"
 	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
@@ -385,7 +384,7 @@ func NewKeyvalProxyResourceManager(client *kube.Client, ns string, config *commo
 func (a *keyvalProxyResourceManager) Name() string { return "CloudProxy" }
 
 func (a *keyvalProxyResourceManager) InstallFromScratch(ctx context.Context) error {
-	resources := []client.Object{
+	resources := []kube.Object{
 		NewKeyvalProxyServiceAccount(a.ns),
 		NewKeyvalProxyRole(a.ns),
 		NewKeyvalProxyRoleBinding(a.ns),
diff --git a/cli/cmd/resources/odiglet.go b/cli/cmd/resources/odiglet.go
index 22ee89e4b..b5cad80b6 100644
--- a/cli/cmd/resources/odiglet.go
+++ b/cli/cmd/resources/odiglet.go
@@ -13,7 +13,6 @@ import (
 	"github.com/odigos-io/odigos/cli/pkg/containers"
 	"github.com/odigos-io/odigos/cli/pkg/kube"
 	"github.com/odigos-io/odigos/common"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
@@ -714,7 +713,7 @@ func (a *odigletResourceManager) InstallFromScratch(ctx context.Context) error {
 		}
 	}
 
-	resources := []client.Object{
+	resources := []kube.Object{
 		NewOdigletServiceAccount(a.ns),
 		NewOdigletClusterRole(a.config.Psp),
 		NewOdigletClusterRoleBinding(a.ns),
diff --git a/cli/cmd/resources/odigosconfig.go b/cli/cmd/resources/odigosconfig.go
index e3dbec990..2785e64a1 100644
--- a/cli/cmd/resources/odigosconfig.go
+++ b/cli/cmd/resources/odigosconfig.go
@@ -10,10 +10,9 @@ import (
 	"github.com/odigos-io/odigos/common/consts"
 	v1 "k8s.io/api/core/v1"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 )
 
-func NewOdigosConfiguration(ns string, config *common.OdigosConfiguration) (client.Object, error) {
+func NewOdigosConfiguration(ns string, config *common.OdigosConfiguration) (kube.Object, error) {
 	data, err := json.Marshal(config)
 	if err != nil {
 		return nil, err
@@ -53,7 +52,7 @@ func (a *odigosConfigResourceManager) InstallFromScratch(ctx context.Context) er
 		return err
 	}
 
-	resources := []client.Object{
+	resources := []kube.Object{
 		obj,
 	}
 	return a.client.ApplyResources(ctx, a.config.ConfigVersion, resources)
diff --git a/cli/cmd/resources/odigosdeployment.go b/cli/cmd/resources/odigosdeployment.go
index 9f2ae9b4b..22920d861 100644
--- a/cli/cmd/resources/odigosdeployment.go
+++ b/cli/cmd/resources/odigosdeployment.go
@@ -12,10 +12,9 @@ import (
 	rbacv1 "k8s.io/api/rbac/v1"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	v1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 )
 
-func NewOdigosDeploymentConfigMap(ns string, odigosVersion string) *corev1.ConfigMap {
+func NewOdigosDeploymentConfigMap(ns string, odigosVersion string, odigosTier string) *corev1.ConfigMap {
 	return &corev1.ConfigMap{
 		TypeMeta: v1.TypeMeta{
 			Kind:       "ConfigMap",
@@ -27,6 +26,7 @@ func NewOdigosDeploymentConfigMap(ns string, odigosVersion string) *corev1.Confi
 		},
 		Data: map[string]string{
 			"ODIGOS_VERSION": odigosVersion,
+			"ODIGOS_TIER":    odigosTier,
 		},
 	}
 }
@@ -103,8 +103,8 @@ func NewOdigosDeploymentResourceManager(client *kube.Client, ns string, config *
 func (a *odigosDeploymentResourceManager) Name() string { return "OdigosDeployment" }
 
 func (a *odigosDeploymentResourceManager) InstallFromScratch(ctx context.Context) error {
-	resources := []client.Object{
-		NewOdigosDeploymentConfigMap(a.ns, a.odigosVersion),
+	resources := []kube.Object{
+		NewOdigosDeploymentConfigMap(a.ns, a.odigosVersion, string(a.odigosTier)),
 		NewLeaderElectionRole(a.ns),
 	}
 
diff --git a/cli/cmd/resources/odigospro/manager.go b/cli/cmd/resources/odigospro/manager.go
index 4cec620f6..00dda06e9 100644
--- a/cli/cmd/resources/odigospro/manager.go
+++ b/cli/cmd/resources/odigospro/manager.go
@@ -7,7 +7,6 @@ import (
 	"github.com/odigos-io/odigos/cli/pkg/kube"
 	"github.com/odigos-io/odigos/common"
 	corev1 "k8s.io/api/core/v1"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 )
 
 type odigosCloudResourceManager struct {
@@ -61,6 +60,6 @@ func (a *odigosCloudResourceManager) InstallFromScratch(ctx context.Context) err
 		secret = newOdigosProSecret(a.ns, cloudApiKey, onpremToken)
 	}
 
-	resources := []client.Object{secret}
+	resources := []kube.Object{secret}
 	return a.client.ApplyResources(ctx, a.config.ConfigVersion, resources)
 }
diff --git a/cli/cmd/resources/owntelemetry.go b/cli/cmd/resources/owntelemetry.go
index 934bf50d6..8fdf3072a 100644
--- a/cli/cmd/resources/owntelemetry.go
+++ b/cli/cmd/resources/owntelemetry.go
@@ -15,7 +15,6 @@ import (
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	v1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/util/intstr"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 )
 
 const (
@@ -273,16 +272,16 @@ func NewOwnTelemetryResourceManager(client *kube.Client, ns string, config *comm
 func (a *ownTelemetryResourceManager) Name() string { return "OwnTelemetry Pipeline" }
 
 func (a *ownTelemetryResourceManager) InstallFromScratch(ctx context.Context) error {
-	var resources []client.Object
+	var resources []kube.Object
 	if a.odigosTier == common.CloudOdigosTier {
-		resources = []client.Object{
+		resources = []kube.Object{
 			NewOwnTelemetryConfigMapOtlpGrpc(a.ns, a.odigosVersion),
 			NewOwnTelemetryCollectorConfigMap(a.ns),
 			NewOwnTelemetryCollectorDeployment(a.ns),
 			NewOwnTelemetryCollectorService(a.ns),
 		}
 	} else {
-		resources = []client.Object{
+		resources = []kube.Object{
 			NewOwnTelemetryConfigMapDisabled(a.ns),
 		}
 	}
diff --git a/cli/cmd/resources/profiles.go b/cli/cmd/resources/profiles.go
index 2d70f6f8a..84aad0f9b 100644
--- a/cli/cmd/resources/profiles.go
+++ b/cli/cmd/resources/profiles.go
@@ -10,13 +10,12 @@ import (
 	"github.com/odigos-io/odigos/cli/cmd/resources/resourcemanager"
 	"github.com/odigos-io/odigos/cli/pkg/kube"
 	"github.com/odigos-io/odigos/common"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 )
 
 type Profile struct {
 	ProfileName      common.ProfileName
 	ShortDescription string
-	ClientObject     client.Object        // used to read it from the embedded YAML file
+	KubeObject       kube.Object          // used to read it from the embedded YAML file
 	Dependencies     []common.ProfileName // other profiles that are applied by the current profile
 }
 
@@ -24,73 +23,82 @@ var (
 	fullPayloadCollectionProfile = Profile{
 		ProfileName:      common.ProfileName("full-payload-collection"),
 		ShortDescription: "Collect any payload from the cluster where supported with default settings",
-		ClientObject:     &odigosv1alpha1.InstrumentationRule{},
+		KubeObject:       &odigosv1alpha1.InstrumentationRule{},
 	}
 	dbPayloadCollectionProfile = Profile{
 		ProfileName:      common.ProfileName("db-payload-collection"),
 		ShortDescription: "Collect db payload from the cluster where supported with default settings",
-		ClientObject:     &odigosv1alpha1.InstrumentationRule{},
+		KubeObject:       &odigosv1alpha1.InstrumentationRule{},
 	}
 	queryOperationDetector = Profile{
 		ProfileName:      common.ProfileName("query-operation-detector"),
 		ShortDescription: "Detect the SQL operation name from the query text",
-		ClientObject:     &odigosv1alpha1.Processor{},
+		KubeObject:       &odigosv1alpha1.Processor{},
 	}
 	semconvUpgraderProfile = Profile{
 		ProfileName:      common.ProfileName("semconv"),
 		ShortDescription: "Upgrade and align some attribute names to a newer version of the OpenTelemetry semantic conventions",
-		ClientObject:     &actions.RenameAttribute{},
+		KubeObject:       &actions.RenameAttribute{},
 	}
 	categoryAttributesProfile = Profile{
 		ProfileName:      common.ProfileName("category-attributes"),
 		ShortDescription: "Add category attributes to the spans",
-		ClientObject:     &odigosv1alpha1.Processor{},
+		KubeObject:       &odigosv1alpha1.Processor{},
 	}
 	copyScopeProfile = Profile{
 		ProfileName:      common.ProfileName("copy-scope"),
 		ShortDescription: "Copy the scope name into a separate attribute for backends that do not support scopes",
-		ClientObject:     &odigosv1alpha1.Processor{},
+		KubeObject:       &odigosv1alpha1.Processor{},
 	}
 	hostnameAsPodNameProfile = Profile{
 		ProfileName:      common.ProfileName("hostname-as-podname"),
 		ShortDescription: "Populate the spans resource `host.name` attribute with value of `k8s.pod.name`",
-		ClientObject:     &odigosv1alpha1.Processor{},
+		KubeObject:       &odigosv1alpha1.Processor{},
 	}
 	javaNativeInstrumentationsProfile = Profile{
 		ProfileName:      common.ProfileName("java-native-instrumentations"),
 		ShortDescription: "Instrument Java applications using native instrumentation and eBPF enterprise processing",
-		ClientObject:     &odigosv1alpha1.InstrumentationRule{},
+		KubeObject:       &odigosv1alpha1.InstrumentationRule{},
 	}
 	codeAttributesProfile = Profile{
 		ProfileName:      common.ProfileName("code-attributes"),
 		ShortDescription: "Record span attributes in 'code' namespace where supported",
 	}
+	disableNameProcessorProfile = Profile{
+		ProfileName:      common.ProfileName("disable-name-processor"),
+		ShortDescription: "If not using dotnet or java native instrumentations, disable the name processor which is not needed",
+	}
+	smallBatchesProfile = Profile{
+		ProfileName:      common.ProfileName("small-batches"),
+		ShortDescription: "Reduce the batch size for exports",
+		KubeObject:       &odigosv1alpha1.Processor{},
+	}
 	kratosProfile = Profile{
 		ProfileName:      common.ProfileName("kratos"),
 		ShortDescription: "Bundle profile that includes db-payload-collection, semconv, category-attributes, copy-scope, hostname-as-podname, java-native-instrumentations, code-attributes, query-operation-detector",
-		Dependencies:     []common.ProfileName{"db-payload-collection", "semconv", "category-attributes", "copy-scope", "hostname-as-podname", "java-native-instrumentations", "code-attributes", "query-operation-detector"},
+		Dependencies:     []common.ProfileName{"db-payload-collection", "semconv", "category-attributes", "copy-scope", "hostname-as-podname", "java-native-instrumentations", "code-attributes", "query-operation-detector", "disableNameProcessorProfile", "small-batches"},
 	}
 )
 
 func GetAvailableCommunityProfiles() []Profile {
-	return []Profile{semconvUpgraderProfile, copyScopeProfile}
+	return []Profile{semconvUpgraderProfile, copyScopeProfile, disableNameProcessorProfile}
 }
 
 func GetAvailableOnPremProfiles() []Profile {
-	return append([]Profile{fullPayloadCollectionProfile, dbPayloadCollectionProfile, categoryAttributesProfile, hostnameAsPodNameProfile, javaNativeInstrumentationsProfile, kratosProfile, queryOperationDetector},
+	return append([]Profile{fullPayloadCollectionProfile, dbPayloadCollectionProfile, categoryAttributesProfile, hostnameAsPodNameProfile, javaNativeInstrumentationsProfile, kratosProfile, queryOperationDetector, smallBatchesProfile},
 		GetAvailableCommunityProfiles()...)
 }
 
-func GetResourcesForProfileName(profileName common.ProfileName, tier common.OdigosTier) ([]client.Object, error) {
+func GetResourcesForProfileName(profileName common.ProfileName, tier common.OdigosTier) ([]kube.Object, error) {
 	allAvailableProfiles := GetAvailableProfilesForTier(tier)
 	for _, p := range allAvailableProfiles {
 		if p.ProfileName == common.ProfileName(profileName) {
-			if p.ClientObject != nil {
+			if p.KubeObject != nil {
 				filename := fmt.Sprintf("%s.yaml", profileName)
-				return profiles.GetEmbeddedYAMLFileAsObjects(filename, p.ClientObject)
+				return profiles.GetEmbeddedYAMLFileAsObjects(filename, p.KubeObject)
 			}
 			if len(p.Dependencies) > 0 {
-				allResources := []client.Object{}
+				allResources := []kube.Object{}
 				for _, dep := range p.Dependencies {
 					resources, err := GetResourcesForProfileName(dep, tier)
 					if err != nil {
@@ -132,7 +140,7 @@ func NewProfilesResourceManager(client *kube.Client, ns string, config *common.O
 func (a *profilesResourceManager) Name() string { return "Profiles" }
 
 func (a *profilesResourceManager) InstallFromScratch(ctx context.Context) error {
-	allResources := []client.Object{}
+	allResources := []kube.Object{}
 	for _, profile := range a.config.Profiles {
 		profileResources, err := GetResourcesForProfileName(profile, a.tier)
 		if err != nil {
diff --git a/cli/cmd/resources/profiles/render.go b/cli/cmd/resources/profiles/render.go
index 722c3fbad..8bc71bfb4 100644
--- a/cli/cmd/resources/profiles/render.go
+++ b/cli/cmd/resources/profiles/render.go
@@ -5,7 +5,7 @@ import (
 	"fmt"
 	"reflect"
 
-	"sigs.k8s.io/controller-runtime/pkg/client"
+	"github.com/odigos-io/odigos/cli/pkg/kube"
 	"sigs.k8s.io/yaml"
 )
 
@@ -13,7 +13,7 @@ import (
 var embeddedFiles embed.FS
 
 // GetEmbeddedYAMLFileAsObjects is a generic function to read embedded YAML files and convert them into runtime.Object
-func GetEmbeddedYAMLFileAsObjects(filename string, obj client.Object) ([]client.Object, error) {
+func GetEmbeddedYAMLFileAsObjects(filename string, obj kube.Object) ([]kube.Object, error) {
 
 	// Read the embedded YAML file content
 	yamlBytes, err := embeddedFiles.ReadFile(filename)
@@ -32,5 +32,5 @@ func GetEmbeddedYAMLFileAsObjects(filename string, obj client.Object) ([]client.
 	}
 
 	// Return the object wrapped in a slice
-	return []client.Object{newObj.(client.Object)}, nil
+	return []kube.Object{newObj.(kube.Object)}, nil
 }
diff --git a/cli/cmd/resources/profiles/small-batches.yaml b/cli/cmd/resources/profiles/small-batches.yaml
new file mode 100644
index 000000000..012f3ca22
--- /dev/null
+++ b/cli/cmd/resources/profiles/small-batches.yaml
@@ -0,0 +1,15 @@
+apiVersion: odigos.io/v1alpha1
+kind: Processor
+metadata:
+  name: small-batches
+  namespace: odigos-system
+spec:
+  type: batch
+  processorConfig:
+    send_batch_size: 1 # This processor is after batching happened, and is only to split large ones into smaller ones
+    send_batch_max_size: 256
+  orderHint: 100 # Should be after the default batch with orderHint 0, preferably after other processors
+  signals:
+    - TRACES
+  collectorRoles:
+    - CLUSTER_GATEWAY
diff --git a/cli/cmd/resources/scheduler.go b/cli/cmd/resources/scheduler.go
index 40d3c4603..b3f6e7b77 100644
--- a/cli/cmd/resources/scheduler.go
+++ b/cli/cmd/resources/scheduler.go
@@ -7,7 +7,6 @@ import (
 	"github.com/odigos-io/odigos/cli/pkg/containers"
 	"github.com/odigos-io/odigos/cli/pkg/kube"
 	"github.com/odigos-io/odigos/common"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
@@ -312,7 +311,7 @@ func NewSchedulerResourceManager(client *kube.Client, ns string, config *common.
 func (a *schedulerResourceManager) Name() string { return "Scheduler" }
 
 func (a *schedulerResourceManager) InstallFromScratch(ctx context.Context) error {
-	resources := []client.Object{
+	resources := []kube.Object{
 		NewSchedulerServiceAccount(a.ns),
 		NewSchedulerRoleBinding(a.ns),
 		NewSchedulerClusterRole(),
diff --git a/cli/cmd/resources/ui.go b/cli/cmd/resources/ui.go
index f0bcfc750..65c3edb76 100644
--- a/cli/cmd/resources/ui.go
+++ b/cli/cmd/resources/ui.go
@@ -12,7 +12,6 @@ import (
 	corev1 "k8s.io/api/core/v1"
 	"k8s.io/apimachinery/pkg/api/resource"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 
 	"github.com/odigos-io/odigos/cli/cmd/resources/resourcemanager"
 	"github.com/odigos-io/odigos/cli/pkg/kube"
@@ -247,7 +246,7 @@ func NewUIClusterRole() *rbacv1.ClusterRole {
 			{
 				APIGroups: []string{"apps"},
 				Resources: []string{"deployments", "statefulsets", "daemonsets"},
-				Verbs:     []string{"get", "list", "watch", "patch"},
+				Verbs:     []string{"get", "list", "watch", "patch", "update"},
 			},
 			{
 				APIGroups: []string{"odigos.io"},
@@ -319,7 +318,7 @@ func NewUIService(ns string) *corev1.Service {
 }
 
 func (u *uiResourceManager) InstallFromScratch(ctx context.Context) error {
-	resources := []client.Object{
+	resources := []kube.Object{
 		NewUIServiceAccount(u.ns),
 		NewUIRole(u.ns),
 		NewUIRoleBinding(u.ns),
diff --git a/cli/cmd/uninstall.go b/cli/cmd/uninstall.go
index cd97726c9..a9d6dc4da 100644
--- a/cli/cmd/uninstall.go
+++ b/cli/cmd/uninstall.go
@@ -23,7 +23,6 @@ import (
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/types"
 	"k8s.io/apimachinery/pkg/util/wait"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 
 	"github.com/spf13/cobra"
 )
@@ -102,6 +101,10 @@ var uninstallCmd = &cobra.Command{
 
 		createKubeResourceWithLogging(ctx, "Uninstalling Odigos CRDs",
 			client, cmd, ns, uninstallCRDs)
+
+		createKubeResourceWithLogging(ctx, "Uninstalling Odigos MutatingWebhookConfigurations",
+			client, cmd, ns, uninstallMutatingWebhookConfigs)
+
 		fmt.Printf("\n\u001B[32mSUCCESS:\u001B[0m Odigos uninstalled.\n")
 	},
 }
@@ -178,7 +181,7 @@ func jsonPatchEscapeKey(key string) string {
 	return strings.Replace(key, "/", "~1", 1)
 }
 
-func getWorkloadRolloutJsonPatch(obj client.Object, pts *v1.PodTemplateSpec) ([]byte, error) {
+func getWorkloadRolloutJsonPatch(obj kube.Object, pts *v1.PodTemplateSpec) ([]byte, error) {
 	patchOperations := []map[string]interface{}{}
 
 	// Remove odigos instrumentation label
@@ -398,6 +401,26 @@ func uninstallCRDs(ctx context.Context, cmd *cobra.Command, client *kube.Client,
 	return nil
 }
 
+func uninstallMutatingWebhookConfigs(ctx context.Context, cmd *cobra.Command, client *kube.Client, ns string) error {
+	list, err := client.AdmissionregistrationV1().MutatingWebhookConfigurations().List(ctx, metav1.ListOptions{
+		LabelSelector: metav1.FormatLabelSelector(&metav1.LabelSelector{
+			MatchLabels: labels.OdigosSystem,
+		}),
+	})
+	if err != nil {
+		return err
+	}
+
+	for _, webhook := range list.Items {
+		err = client.AdmissionregistrationV1().MutatingWebhookConfigurations().Delete(ctx, webhook.Name, metav1.DeleteOptions{})
+		if err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
 func uninstallRBAC(ctx context.Context, cmd *cobra.Command, client *kube.Client, ns string) error {
 	list, err := client.RbacV1().ClusterRoles().List(ctx, metav1.ListOptions{
 		LabelSelector: metav1.FormatLabelSelector(&metav1.LabelSelector{
diff --git a/cli/go.mod b/cli/go.mod
index dab0338ce..0bdf04b91 100644
--- a/cli/go.mod
+++ b/cli/go.mod
@@ -15,7 +15,6 @@ require (
 	k8s.io/apiextensions-apiserver v0.31.0
 	k8s.io/apimachinery v0.31.0
 	k8s.io/client-go v0.31.0
-	sigs.k8s.io/controller-runtime v0.19.0
 	sigs.k8s.io/yaml v1.4.0
 )
 
@@ -31,6 +30,7 @@ require (
 	github.com/spf13/pflag v1.0.5 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
 	golang.org/x/xerrors v0.0.0-20231012003039-104605ab7028 // indirect
+	sigs.k8s.io/controller-runtime v0.19.0 // indirect
 	sigs.k8s.io/gateway-api v1.1.0 // indirect
 )
 
diff --git a/cli/pkg/kube/client.go b/cli/pkg/kube/client.go
index 377e664a4..c36d5fef7 100644
--- a/cli/pkg/kube/client.go
+++ b/cli/pkg/kube/client.go
@@ -11,9 +11,9 @@ import (
 	appsv1 "k8s.io/api/apps/v1"
 	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/runtime"
 	"k8s.io/apimachinery/pkg/selection"
 	k8stypes "k8s.io/apimachinery/pkg/types"
-	"sigs.k8s.io/controller-runtime/pkg/client"
 	"sigs.k8s.io/yaml"
 
 	"github.com/odigos-io/odigos/api/generated/odigos/clientset/versioned/typed/odigos/v1alpha1"
@@ -36,6 +36,13 @@ type Client struct {
 	Config        *rest.Config
 }
 
+// Identical to the Object interface defined in controller-runtime: https://pkg.go.dev/sigs.k8s.io/controller-runtime/pkg/client#Object
+// This is a workaround to avoid importing controller-runtime in the cli package
+type Object interface {
+	metav1.Object
+	runtime.Object
+}
+
 func CreateClient(cmd *cobra.Command) (*Client, error) {
 	kc := cmd.Flag("kubeconfig").Value.String()
 
@@ -79,7 +86,7 @@ func PrintClientErrorAndExit(err error) {
 	os.Exit(-1)
 }
 
-func (c *Client) ApplyResources(ctx context.Context, configVersion int, objs []client.Object) error {
+func (c *Client) ApplyResources(ctx context.Context, configVersion int, objs []Object) error {
 	for _, obj := range objs {
 		err := c.ApplyResource(ctx, configVersion, obj)
 		if err != nil {
@@ -94,7 +101,7 @@ func (c *Client) ApplyResources(ctx context.Context, configVersion int, objs []c
 // and apparently this field id immutable:
 // ERROR Deployment.apps "odigos-instrumentor" is invalid: spec.selector: Invalid value: v1.LabelSelector{MatchLabels:map[string]string{"app.kubernetes.io/name":"odigos-instrumentor"}, MatchExpressions:[]v1.LabelSelectorRequirement(nil)}: field is immutable
 // Once we end support for odigos versions <v1.0.23 we can remove this function
-func (c *Client) deleteResourceBeforeAppending(ctx context.Context, obj client.Object) error {
+func (c *Client) deleteResourceBeforeAppending(ctx context.Context, obj Object) error {
 	gvk := obj.GetObjectKind().GroupVersionKind()
 	switch gvk.Kind {
 
@@ -153,7 +160,7 @@ func (c *Client) deleteResourceBeforeAppending(ctx context.Context, obj client.O
 	return nil
 }
 
-func (c *Client) ApplyResource(ctx context.Context, configVersion int, obj client.Object) error {
+func (c *Client) ApplyResource(ctx context.Context, configVersion int, obj Object) error {
 
 	err := c.deleteResourceBeforeAppending(ctx, obj)
 	if err != nil {
diff --git a/cli/pkg/listers/odigos/v1alpha1/collectorsgroup.go b/cli/pkg/listers/odigos/v1alpha1/collectorsgroup.go
deleted file mode 100644
index 1aa40f20e..000000000
--- a/cli/pkg/listers/odigos/v1alpha1/collectorsgroup.go
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
-Copyright 2022.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-// Code generated by lister-gen. DO NOT EDIT.
-
-package v1alpha1
-
-import (
-	v1alpha1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"k8s.io/apimachinery/pkg/api/errors"
-	"k8s.io/apimachinery/pkg/labels"
-	"k8s.io/client-go/tools/cache"
-)
-
-// CollectorsGroupLister helps list CollectorsGroups.
-// All objects returned here must be treated as read-only.
-type CollectorsGroupLister interface {
-	// List lists all CollectorsGroups in the indexer.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.CollectorsGroup, err error)
-	// CollectorsGroups returns an object that can list and get CollectorsGroups.
-	CollectorsGroups(namespace string) CollectorsGroupNamespaceLister
-	CollectorsGroupListerExpansion
-}
-
-// collectorsGroupLister implements the CollectorsGroupLister interface.
-type collectorsGroupLister struct {
-	indexer cache.Indexer
-}
-
-// NewCollectorsGroupLister returns a new CollectorsGroupLister.
-func NewCollectorsGroupLister(indexer cache.Indexer) CollectorsGroupLister {
-	return &collectorsGroupLister{indexer: indexer}
-}
-
-// List lists all CollectorsGroups in the indexer.
-func (s *collectorsGroupLister) List(selector labels.Selector) (ret []*v1alpha1.CollectorsGroup, err error) {
-	err = cache.ListAll(s.indexer, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.CollectorsGroup))
-	})
-	return ret, err
-}
-
-// CollectorsGroups returns an object that can list and get CollectorsGroups.
-func (s *collectorsGroupLister) CollectorsGroups(namespace string) CollectorsGroupNamespaceLister {
-	return collectorsGroupNamespaceLister{indexer: s.indexer, namespace: namespace}
-}
-
-// CollectorsGroupNamespaceLister helps list and get CollectorsGroups.
-// All objects returned here must be treated as read-only.
-type CollectorsGroupNamespaceLister interface {
-	// List lists all CollectorsGroups in the indexer for a given namespace.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.CollectorsGroup, err error)
-	// Get retrieves the CollectorsGroup from the indexer for a given namespace and name.
-	// Objects returned here must be treated as read-only.
-	Get(name string) (*v1alpha1.CollectorsGroup, error)
-	CollectorsGroupNamespaceListerExpansion
-}
-
-// collectorsGroupNamespaceLister implements the CollectorsGroupNamespaceLister
-// interface.
-type collectorsGroupNamespaceLister struct {
-	indexer   cache.Indexer
-	namespace string
-}
-
-// List lists all CollectorsGroups in the indexer for a given namespace.
-func (s collectorsGroupNamespaceLister) List(selector labels.Selector) (ret []*v1alpha1.CollectorsGroup, err error) {
-	err = cache.ListAllByNamespace(s.indexer, s.namespace, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.CollectorsGroup))
-	})
-	return ret, err
-}
-
-// Get retrieves the CollectorsGroup from the indexer for a given namespace and name.
-func (s collectorsGroupNamespaceLister) Get(name string) (*v1alpha1.CollectorsGroup, error) {
-	obj, exists, err := s.indexer.GetByKey(s.namespace + "/" + name)
-	if err != nil {
-		return nil, err
-	}
-	if !exists {
-		return nil, errors.NewNotFound(v1alpha1.Resource("collectorsgroup"), name)
-	}
-	return obj.(*v1alpha1.CollectorsGroup), nil
-}
diff --git a/cli/pkg/listers/odigos/v1alpha1/destination.go b/cli/pkg/listers/odigos/v1alpha1/destination.go
deleted file mode 100644
index 6bfc446b9..000000000
--- a/cli/pkg/listers/odigos/v1alpha1/destination.go
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
-Copyright 2022.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-// Code generated by lister-gen. DO NOT EDIT.
-
-package v1alpha1
-
-import (
-	v1alpha1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"k8s.io/apimachinery/pkg/api/errors"
-	"k8s.io/apimachinery/pkg/labels"
-	"k8s.io/client-go/tools/cache"
-)
-
-// DestinationLister helps list Destinations.
-// All objects returned here must be treated as read-only.
-type DestinationLister interface {
-	// List lists all Destinations in the indexer.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.Destination, err error)
-	// Destinations returns an object that can list and get Destinations.
-	Destinations(namespace string) DestinationNamespaceLister
-	DestinationListerExpansion
-}
-
-// destinationLister implements the DestinationLister interface.
-type destinationLister struct {
-	indexer cache.Indexer
-}
-
-// NewDestinationLister returns a new DestinationLister.
-func NewDestinationLister(indexer cache.Indexer) DestinationLister {
-	return &destinationLister{indexer: indexer}
-}
-
-// List lists all Destinations in the indexer.
-func (s *destinationLister) List(selector labels.Selector) (ret []*v1alpha1.Destination, err error) {
-	err = cache.ListAll(s.indexer, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.Destination))
-	})
-	return ret, err
-}
-
-// Destinations returns an object that can list and get Destinations.
-func (s *destinationLister) Destinations(namespace string) DestinationNamespaceLister {
-	return destinationNamespaceLister{indexer: s.indexer, namespace: namespace}
-}
-
-// DestinationNamespaceLister helps list and get Destinations.
-// All objects returned here must be treated as read-only.
-type DestinationNamespaceLister interface {
-	// List lists all Destinations in the indexer for a given namespace.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.Destination, err error)
-	// Get retrieves the Destination from the indexer for a given namespace and name.
-	// Objects returned here must be treated as read-only.
-	Get(name string) (*v1alpha1.Destination, error)
-	DestinationNamespaceListerExpansion
-}
-
-// destinationNamespaceLister implements the DestinationNamespaceLister
-// interface.
-type destinationNamespaceLister struct {
-	indexer   cache.Indexer
-	namespace string
-}
-
-// List lists all Destinations in the indexer for a given namespace.
-func (s destinationNamespaceLister) List(selector labels.Selector) (ret []*v1alpha1.Destination, err error) {
-	err = cache.ListAllByNamespace(s.indexer, s.namespace, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.Destination))
-	})
-	return ret, err
-}
-
-// Get retrieves the Destination from the indexer for a given namespace and name.
-func (s destinationNamespaceLister) Get(name string) (*v1alpha1.Destination, error) {
-	obj, exists, err := s.indexer.GetByKey(s.namespace + "/" + name)
-	if err != nil {
-		return nil, err
-	}
-	if !exists {
-		return nil, errors.NewNotFound(v1alpha1.Resource("destination"), name)
-	}
-	return obj.(*v1alpha1.Destination), nil
-}
diff --git a/cli/pkg/listers/odigos/v1alpha1/expansion_generated.go b/cli/pkg/listers/odigos/v1alpha1/expansion_generated.go
deleted file mode 100644
index f399ddb22..000000000
--- a/cli/pkg/listers/odigos/v1alpha1/expansion_generated.go
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-Copyright 2022.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-// Code generated by lister-gen. DO NOT EDIT.
-
-package v1alpha1
-
-// CollectorsGroupListerExpansion allows custom methods to be added to
-// CollectorsGroupLister.
-type CollectorsGroupListerExpansion interface{}
-
-// CollectorsGroupNamespaceListerExpansion allows custom methods to be added to
-// CollectorsGroupNamespaceLister.
-type CollectorsGroupNamespaceListerExpansion interface{}
-
-// DestinationListerExpansion allows custom methods to be added to
-// DestinationLister.
-type DestinationListerExpansion interface{}
-
-// DestinationNamespaceListerExpansion allows custom methods to be added to
-// DestinationNamespaceLister.
-type DestinationNamespaceListerExpansion interface{}
-
-// InstrumentedApplicationListerExpansion allows custom methods to be added to
-// InstrumentedApplicationLister.
-type InstrumentedApplicationListerExpansion interface{}
-
-// InstrumentedApplicationNamespaceListerExpansion allows custom methods to be added to
-// InstrumentedApplicationNamespaceLister.
-type InstrumentedApplicationNamespaceListerExpansion interface{}
-
-// OdigosConfigurationListerExpansion allows custom methods to be added to
-// OdigosConfigurationLister.
-type OdigosConfigurationListerExpansion interface{}
-
-// OdigosConfigurationNamespaceListerExpansion allows custom methods to be added to
-// OdigosConfigurationNamespaceLister.
-type OdigosConfigurationNamespaceListerExpansion interface{}
-
-// ProcessorListerExpansion allows custom methods to be added to
-// ProcessorLister.
-type ProcessorListerExpansion interface{}
-
-// ProcessorNamespaceListerExpansion allows custom methods to be added to
-// ProcessorNamespaceLister.
-type ProcessorNamespaceListerExpansion interface{}
diff --git a/cli/pkg/listers/odigos/v1alpha1/instrumentedapplication.go b/cli/pkg/listers/odigos/v1alpha1/instrumentedapplication.go
deleted file mode 100644
index c5774e777..000000000
--- a/cli/pkg/listers/odigos/v1alpha1/instrumentedapplication.go
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
-Copyright 2022.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-// Code generated by lister-gen. DO NOT EDIT.
-
-package v1alpha1
-
-import (
-	v1alpha1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"k8s.io/apimachinery/pkg/api/errors"
-	"k8s.io/apimachinery/pkg/labels"
-	"k8s.io/client-go/tools/cache"
-)
-
-// InstrumentedApplicationLister helps list InstrumentedApplications.
-// All objects returned here must be treated as read-only.
-type InstrumentedApplicationLister interface {
-	// List lists all InstrumentedApplications in the indexer.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.InstrumentedApplication, err error)
-	// InstrumentedApplications returns an object that can list and get InstrumentedApplications.
-	InstrumentedApplications(namespace string) InstrumentedApplicationNamespaceLister
-	InstrumentedApplicationListerExpansion
-}
-
-// instrumentedApplicationLister implements the InstrumentedApplicationLister interface.
-type instrumentedApplicationLister struct {
-	indexer cache.Indexer
-}
-
-// NewInstrumentedApplicationLister returns a new InstrumentedApplicationLister.
-func NewInstrumentedApplicationLister(indexer cache.Indexer) InstrumentedApplicationLister {
-	return &instrumentedApplicationLister{indexer: indexer}
-}
-
-// List lists all InstrumentedApplications in the indexer.
-func (s *instrumentedApplicationLister) List(selector labels.Selector) (ret []*v1alpha1.InstrumentedApplication, err error) {
-	err = cache.ListAll(s.indexer, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.InstrumentedApplication))
-	})
-	return ret, err
-}
-
-// InstrumentedApplications returns an object that can list and get InstrumentedApplications.
-func (s *instrumentedApplicationLister) InstrumentedApplications(namespace string) InstrumentedApplicationNamespaceLister {
-	return instrumentedApplicationNamespaceLister{indexer: s.indexer, namespace: namespace}
-}
-
-// InstrumentedApplicationNamespaceLister helps list and get InstrumentedApplications.
-// All objects returned here must be treated as read-only.
-type InstrumentedApplicationNamespaceLister interface {
-	// List lists all InstrumentedApplications in the indexer for a given namespace.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.InstrumentedApplication, err error)
-	// Get retrieves the InstrumentedApplication from the indexer for a given namespace and name.
-	// Objects returned here must be treated as read-only.
-	Get(name string) (*v1alpha1.InstrumentedApplication, error)
-	InstrumentedApplicationNamespaceListerExpansion
-}
-
-// instrumentedApplicationNamespaceLister implements the InstrumentedApplicationNamespaceLister
-// interface.
-type instrumentedApplicationNamespaceLister struct {
-	indexer   cache.Indexer
-	namespace string
-}
-
-// List lists all InstrumentedApplications in the indexer for a given namespace.
-func (s instrumentedApplicationNamespaceLister) List(selector labels.Selector) (ret []*v1alpha1.InstrumentedApplication, err error) {
-	err = cache.ListAllByNamespace(s.indexer, s.namespace, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.InstrumentedApplication))
-	})
-	return ret, err
-}
-
-// Get retrieves the InstrumentedApplication from the indexer for a given namespace and name.
-func (s instrumentedApplicationNamespaceLister) Get(name string) (*v1alpha1.InstrumentedApplication, error) {
-	obj, exists, err := s.indexer.GetByKey(s.namespace + "/" + name)
-	if err != nil {
-		return nil, err
-	}
-	if !exists {
-		return nil, errors.NewNotFound(v1alpha1.Resource("instrumentedapplication"), name)
-	}
-	return obj.(*v1alpha1.InstrumentedApplication), nil
-}
diff --git a/cli/pkg/listers/odigos/v1alpha1/odigosconfiguration.go b/cli/pkg/listers/odigos/v1alpha1/odigosconfiguration.go
deleted file mode 100644
index 0ff363e26..000000000
--- a/cli/pkg/listers/odigos/v1alpha1/odigosconfiguration.go
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
-Copyright 2022.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-// Code generated by lister-gen. DO NOT EDIT.
-
-package v1alpha1
-
-import (
-	v1alpha1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"k8s.io/apimachinery/pkg/api/errors"
-	"k8s.io/apimachinery/pkg/labels"
-	"k8s.io/client-go/tools/cache"
-)
-
-// OdigosConfigurationLister helps list OdigosConfigurations.
-// All objects returned here must be treated as read-only.
-type OdigosConfigurationLister interface {
-	// List lists all OdigosConfigurations in the indexer.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.OdigosConfiguration, err error)
-	// OdigosConfigurations returns an object that can list and get OdigosConfigurations.
-	OdigosConfigurations(namespace string) OdigosConfigurationNamespaceLister
-	OdigosConfigurationListerExpansion
-}
-
-// odigosConfigurationLister implements the OdigosConfigurationLister interface.
-type odigosConfigurationLister struct {
-	indexer cache.Indexer
-}
-
-// NewOdigosConfigurationLister returns a new OdigosConfigurationLister.
-func NewOdigosConfigurationLister(indexer cache.Indexer) OdigosConfigurationLister {
-	return &odigosConfigurationLister{indexer: indexer}
-}
-
-// List lists all OdigosConfigurations in the indexer.
-func (s *odigosConfigurationLister) List(selector labels.Selector) (ret []*v1alpha1.OdigosConfiguration, err error) {
-	err = cache.ListAll(s.indexer, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.OdigosConfiguration))
-	})
-	return ret, err
-}
-
-// OdigosConfigurations returns an object that can list and get OdigosConfigurations.
-func (s *odigosConfigurationLister) OdigosConfigurations(namespace string) OdigosConfigurationNamespaceLister {
-	return odigosConfigurationNamespaceLister{indexer: s.indexer, namespace: namespace}
-}
-
-// OdigosConfigurationNamespaceLister helps list and get OdigosConfigurations.
-// All objects returned here must be treated as read-only.
-type OdigosConfigurationNamespaceLister interface {
-	// List lists all OdigosConfigurations in the indexer for a given namespace.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.OdigosConfiguration, err error)
-	// Get retrieves the OdigosConfiguration from the indexer for a given namespace and name.
-	// Objects returned here must be treated as read-only.
-	Get(name string) (*v1alpha1.OdigosConfiguration, error)
-	OdigosConfigurationNamespaceListerExpansion
-}
-
-// odigosConfigurationNamespaceLister implements the OdigosConfigurationNamespaceLister
-// interface.
-type odigosConfigurationNamespaceLister struct {
-	indexer   cache.Indexer
-	namespace string
-}
-
-// List lists all OdigosConfigurations in the indexer for a given namespace.
-func (s odigosConfigurationNamespaceLister) List(selector labels.Selector) (ret []*v1alpha1.OdigosConfiguration, err error) {
-	err = cache.ListAllByNamespace(s.indexer, s.namespace, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.OdigosConfiguration))
-	})
-	return ret, err
-}
-
-// Get retrieves the OdigosConfiguration from the indexer for a given namespace and name.
-func (s odigosConfigurationNamespaceLister) Get(name string) (*v1alpha1.OdigosConfiguration, error) {
-	obj, exists, err := s.indexer.GetByKey(s.namespace + "/" + name)
-	if err != nil {
-		return nil, err
-	}
-	if !exists {
-		return nil, errors.NewNotFound(v1alpha1.Resource("odigosconfiguration"), name)
-	}
-	return obj.(*v1alpha1.OdigosConfiguration), nil
-}
diff --git a/cli/pkg/listers/odigos/v1alpha1/processor.go b/cli/pkg/listers/odigos/v1alpha1/processor.go
deleted file mode 100644
index 639a44077..000000000
--- a/cli/pkg/listers/odigos/v1alpha1/processor.go
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
-Copyright 2022.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-// Code generated by lister-gen. DO NOT EDIT.
-
-package v1alpha1
-
-import (
-	v1alpha1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"k8s.io/apimachinery/pkg/api/errors"
-	"k8s.io/apimachinery/pkg/labels"
-	"k8s.io/client-go/tools/cache"
-)
-
-// ProcessorLister helps list Processors.
-// All objects returned here must be treated as read-only.
-type ProcessorLister interface {
-	// List lists all Processors in the indexer.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.Processor, err error)
-	// Processors returns an object that can list and get Processors.
-	Processors(namespace string) ProcessorNamespaceLister
-	ProcessorListerExpansion
-}
-
-// processorLister implements the ProcessorLister interface.
-type processorLister struct {
-	indexer cache.Indexer
-}
-
-// NewProcessorLister returns a new ProcessorLister.
-func NewProcessorLister(indexer cache.Indexer) ProcessorLister {
-	return &processorLister{indexer: indexer}
-}
-
-// List lists all Processors in the indexer.
-func (s *processorLister) List(selector labels.Selector) (ret []*v1alpha1.Processor, err error) {
-	err = cache.ListAll(s.indexer, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.Processor))
-	})
-	return ret, err
-}
-
-// Processors returns an object that can list and get Processors.
-func (s *processorLister) Processors(namespace string) ProcessorNamespaceLister {
-	return processorNamespaceLister{indexer: s.indexer, namespace: namespace}
-}
-
-// ProcessorNamespaceLister helps list and get Processors.
-// All objects returned here must be treated as read-only.
-type ProcessorNamespaceLister interface {
-	// List lists all Processors in the indexer for a given namespace.
-	// Objects returned here must be treated as read-only.
-	List(selector labels.Selector) (ret []*v1alpha1.Processor, err error)
-	// Get retrieves the Processor from the indexer for a given namespace and name.
-	// Objects returned here must be treated as read-only.
-	Get(name string) (*v1alpha1.Processor, error)
-	ProcessorNamespaceListerExpansion
-}
-
-// processorNamespaceLister implements the ProcessorNamespaceLister
-// interface.
-type processorNamespaceLister struct {
-	indexer   cache.Indexer
-	namespace string
-}
-
-// List lists all Processors in the indexer for a given namespace.
-func (s processorNamespaceLister) List(selector labels.Selector) (ret []*v1alpha1.Processor, err error) {
-	err = cache.ListAllByNamespace(s.indexer, s.namespace, selector, func(m interface{}) {
-		ret = append(ret, m.(*v1alpha1.Processor))
-	})
-	return ret, err
-}
-
-// Get retrieves the Processor from the indexer for a given namespace and name.
-func (s processorNamespaceLister) Get(name string) (*v1alpha1.Processor, error) {
-	obj, exists, err := s.indexer.GetByKey(s.namespace + "/" + name)
-	if err != nil {
-		return nil, err
-	}
-	if !exists {
-		return nil, errors.NewNotFound(v1alpha1.Resource("processor"), name)
-	}
-	return obj.(*v1alpha1.Processor), nil
-}
diff --git a/common/consts/consts.go b/common/consts/consts.go
index a0287e309..cb22ea132 100644
--- a/common/consts/consts.go
+++ b/common/consts/consts.go
@@ -5,18 +5,17 @@ import (
 )
 
 const (
-	CurrentNamespaceEnvVar        = "CURRENT_NS"
-	DefaultOdigosNamespace        = "odigos-system"
-	OdigosConfigurationName       = "odigos-config"
-	OdigosConfigurationFileName   = "config.yaml"
-	OTLPPort                      = 4317
-	OTLPHttpPort                  = 4318
-	PprofOdigosPort               = 6060
-	OdigosInstrumentationLabel    = "odigos-instrumentation"
-	InstrumentationEnabled        = "enabled"
-	InstrumentationDisabled       = "disabled"
-	OdigosReportedNameAnnotation  = "odigos.io/reported-name"
-	EbpfInstrumentationAnnotation = "instrumentation.odigos.io/ebpf" // deprecated.
+	CurrentNamespaceEnvVar       = "CURRENT_NS"
+	DefaultOdigosNamespace       = "odigos-system"
+	OdigosConfigurationName      = "odigos-config"
+	OdigosConfigurationFileName  = "config.yaml"
+	OTLPPort                     = 4317
+	OTLPHttpPort                 = 4318
+	PprofOdigosPort              = 6060
+	OdigosInstrumentationLabel   = "odigos-instrumentation"
+	InstrumentationEnabled       = "enabled"
+	InstrumentationDisabled      = "disabled"
+	OdigosReportedNameAnnotation = "odigos.io/reported-name"
 
 	// Used to store the original value of the environment variable in the pod manifest.
 	// This is used to restore the original value when an instrumentation is removed
diff --git a/common/envOverwrite/overwriter.go b/common/envOverwrite/overwriter.go
index c457772e5..4e83f3b84 100644
--- a/common/envOverwrite/overwriter.go
+++ b/common/envOverwrite/overwriter.go
@@ -58,6 +58,15 @@ var EnvValuesMap = map[string]envValues{
 	},
 }
 
+func GetRelevantEnvVarsKeys() []string {
+	keys := make([]string, 0, len(EnvValuesMap))
+	for key := range EnvValuesMap {
+		keys = append(keys, key)
+	}
+	return keys
+}
+
+
 // returns the current value that should be populated in a specific environment variable.
 // if we should not patch the value, returns nil.
 // the are 2 parts to the environment value: odigos part and user part.
@@ -110,6 +119,25 @@ func GetPatchedEnvValue(envName string, observedValue string, currentSdk *common
 			if sdkEnvValue == desiredOdigosPart {
 				// shortcut, the value is already patched
 				// both the odigos part equals to the new value, and the user part we want to keep
+				// Exception: if there is a webhook involved that inject the env value,
+				// we need to remove duplicate values, otherwise it will grow indefinitely in each iteration
+				parts := strings.Split(observedValue, envMetadata.delim)
+				specialEnvValue := "-javaagent:/opt/sre-agent/sre-agent.jar"
+				specialFound := false
+				newValues := []string{}
+				for _, part := range parts {
+					if part == specialEnvValue {
+						if specialFound {
+							continue
+						}
+						specialFound = true
+					}
+					if strings.TrimSpace(part) == "" {
+						continue
+					}
+					newValues = append(newValues, part)
+				}
+				observedValue = strings.Join(newValues, envMetadata.delim)
 				return &observedValue
 			} else {
 				// The environment variable is patched by some other odigos sdk.
diff --git a/common/envOverwrite/overwriter_test.go b/common/envOverwrite/overwriter_test.go
index 7bb4c4558..7075c1cf8 100644
--- a/common/envOverwrite/overwriter_test.go
+++ b/common/envOverwrite/overwriter_test.go
@@ -1,6 +1,7 @@
 package envOverwrite
 
 import (
+	"fmt"
 	"testing"
 
 	"github.com/odigos-io/odigos/common"
@@ -10,7 +11,9 @@ import (
 func TestGetPatchedEnvValue(t *testing.T) {
 	nodeOptionsNativeCommunity, _ := ValToAppend("NODE_OPTIONS", common.OtelSdkNativeCommunity)
 	nodeOptionsEbpfEnterprise, _ := ValToAppend("NODE_OPTIONS", common.OtelSdkEbpfEnterprise)
+	javaToolsNativeCommunity, _ := ValToAppend("JAVA_TOOL_OPTIONS", common.OtelSdkNativeCommunity)
 	userVal := "--max-old-space-size=4096"
+	specialEnvValueJava := "-javaagent:/opt/sre-agent/sre-agent.jar"
 
 	// test different cases
 	tests := []struct {
@@ -87,6 +90,30 @@ func TestGetPatchedEnvValue(t *testing.T) {
 			programmingLanguage:  common.UnknownProgrammingLanguage,
 			patchedValueExpected: "",
 		},
+		{
+			name:                 "multiple values in env var",
+			envName:              "JAVA_TOOL_OPTIONS",
+			observedValue:        fmt.Sprintf("%s %s %s %s", specialEnvValueJava, specialEnvValueJava, specialEnvValueJava, javaToolsNativeCommunity),
+			sdk:                  &common.OtelSdkNativeCommunity,
+			programmingLanguage:  common.JavaProgrammingLanguage,
+			patchedValueExpected: specialEnvValueJava + " " + javaToolsNativeCommunity,
+		},
+		{
+			name:                 "multiple spaces in special env value",
+			envName:              "JAVA_TOOL_OPTIONS",
+			observedValue:        fmt.Sprintf("%s %s              %s", specialEnvValueJava, specialEnvValueJava, javaToolsNativeCommunity),
+			sdk:                  &common.OtelSdkNativeCommunity,
+			programmingLanguage:  common.JavaProgrammingLanguage,
+			patchedValueExpected: specialEnvValueJava + " " + javaToolsNativeCommunity,
+		},
+		{
+			name:                 "tabs in special env value",
+			envName:              "JAVA_TOOL_OPTIONS",
+			observedValue:        fmt.Sprintf("%s \t %s \t %s", specialEnvValueJava, specialEnvValueJava, javaToolsNativeCommunity),
+			sdk:                  &common.OtelSdkNativeCommunity,
+			programmingLanguage:  common.JavaProgrammingLanguage,
+			patchedValueExpected: specialEnvValueJava + " " + javaToolsNativeCommunity,
+		},
 	}
 
 	for _, tt := range tests {
diff --git a/common/odigos_config.go b/common/odigos_config.go
index d10427edb..d6434dda4 100644
--- a/common/odigos_config.go
+++ b/common/odigos_config.go
@@ -2,6 +2,12 @@ package common
 
 type ProfileName string
 
+type CollectorNodeConfiguration struct {
+	// The port to use for exposing the collector's own metrics as a prometheus endpoint.
+	// This can be used to resolve conflicting ports when a collector is using the host network.
+	CollectorOwnMetricsPort int32 `json:"collectorOwnMetricsPort,omitempty"`
+}
+
 type CollectorGatewayConfiguration struct {
 	// RequestMemoryMiB is the memory request for the cluster gateway collector deployment.
 	// it will be embedded in the deployment as a resource request of the form "memory: <value>Mi"
@@ -36,8 +42,8 @@ type OdigosConfiguration struct {
 	OdigletImage      string                          `json:"odigletImage,omitempty"`
 	InstrumentorImage string                          `json:"instrumentorImage,omitempty"`
 	AutoscalerImage   string                          `json:"autoscalerImage,omitempty"`
-	DefaultSDKs       map[ProgrammingLanguage]OtelSdk `json:"defaultSDKs,omitempty"`
 	CollectorGateway  *CollectorGatewayConfiguration  `json:"collectorGateway,omitempty"`
+	CollectorNode     *CollectorNodeConfiguration     `json:"collectorNode,omitempty"`
 	Profiles          []ProfileName                   `json:"profiles,omitempty"`
 
 	// this is internal currently, and is not exposed on the CLI / helm
diff --git a/docs/README.md b/docs/README.md
index d6aeb89db..f122df6e3 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -12,8 +12,8 @@ The documentation is build on [Mintlify](https://www.npmjs.com/package/mintlify)
 
 ```
 # make sure you're in `/docs` folder, where `mint.json` and `package.json` files are
-npm ci
-npm run dev
+npm i -g mintlify
+mintlify dev
 ```
 
 ### 😎 Publishing Changes
diff --git a/docs/mint.json b/docs/mint.json
index 2781d1ffd..ef5b2992f 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -61,7 +61,7 @@
           "pages": [
             {
               "group": "Installation",
-              "pages": ["setup/installation", "setup/installation-options", "setup/docker-registry"]
+              "pages": ["setup/installation", "setup/installation-options", "setup/docker-registry", "setup/odigos-with-argocd"]
             },
             "setup/upgrade",
             "setup/uninstall"
diff --git a/docs/quickstart/installation-guide-for-beginners.mdx b/docs/quickstart/installation-guide-for-beginners.mdx
index 8e6be468b..59578a8ee 100644
--- a/docs/quickstart/installation-guide-for-beginners.mdx
+++ b/docs/quickstart/installation-guide-for-beginners.mdx
@@ -1,16 +1,16 @@
 ---
-title: "Step-by-Step Installation Guide"
-sidebarTitle: "Step-by-Step Installation Guide"
+title: 'Step-by-Step Installation Guide'
+sidebarTitle: 'Step-by-Step Installation Guide'
 ---
 
 This guide is perfect for you if:
 
-* You're new to tech tools but curious about ways to understand how your computer systems work. Maybe you've heard about "observability" and want to see what it's all about, without getting lost in technical jargon.
-* You're a software developer or work in IT, and while you're comfortable with computers, you're new to kubernetes. You're looking for a clear, step-by-step guide that doesn't assume you're already an expert.
-* You're simply interested in Odigos and want to give it a try but don't have previous experience with CLI. This guide will walk you through the process without assuming any prior knowledge.
+- You're new to tech tools but curious about ways to understand how your computer systems work. Maybe you've heard about "observability" and want to see what it's all about, without getting lost in technical jargon.
+- You're a software developer or work in IT, and while you're comfortable with computers, you're new to kubernetes. You're looking for a clear, step-by-step guide that doesn't assume you're already an expert.
+- You're simply interested in Odigos and want to give it a try but don't have previous experience with CLI. This guide will walk you through the process without assuming any prior knowledge.
 
 <Info>
-  If you find this guide too basic for you please refer to the main [Quick Start guide](https://docs.odigos.io/quickstart/introduction) article. 
+  If you find this guide too basic for you please refer to the main [Quick Start guide](https://docs.odigos.io/quickstart/introduction) article.
 </Info>
 
 Before installing Odigos, you need to set up some tools on your computer. These are one-time installations that prepare your computer for running Odigos.
@@ -18,7 +18,7 @@ You will only need to install these tools once on your computer. Next time you w
 
 ### Required Tools to Get Started
 
-  #### 1. Install Homebrew
+#### 1. Install Homebrew
 
     Homebrew is a package manager for macOS that simplifies the installation of software packages. We will use Homebrew to install Docker Desktop, KinD (Kubernetes in Docker), and the Odigos CLI.
 
@@ -30,33 +30,33 @@ You will only need to install these tools once on your computer. Next time you w
 
     b. When the Terminal window opens, you'll see a prompt where you can type commands. It might look something like this:
 
-    ```
+    ```bash
     YourComputerName:~ YourUsername$
     ```
 
     c. Check if Homebrew is already installed:
 
-    ```
+    ```bash
     brew --version
     ```
 
     If you see a version number, Homebrew is already installed and you can skip to step 2. If not, continue with the following steps.
 
-  d. Copy the following command:
+d. Copy the following command:
 
-    ```
+    ```bash
     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
     ```
 
-  e. Paste this command into the Terminal (use Command+V) and press the `Enter` key.
+e. Paste this command into the Terminal (use Command+V) and press the `Enter` key.
 
-  f. The Terminal will display text as it runs the command. This is normal.
+f. The Terminal will display text as it runs the command. This is normal.
 
-  g. If prompted, enter your computer's password. As you type, no characters will appear – this is a security feature. Press `Enter` after typing your password.
+g. If prompted, enter your computer's password. As you type, no characters will appear – this is a security feature. Press `Enter` after typing your password.
 
-  h. The installation may take several minutes. It's complete when you see the command prompt again.
+h. The installation may take several minutes. It's complete when you see the command prompt again.
 
-  i. After installation, you need to add Homebrew to your PATH. The Terminal will display instructions for this. It typically involves running two commands like these:
+i. After installation, you need to add Homebrew to your PATH. The Terminal will display instructions for this. It typically involves running two commands like these:
 
     ```
     echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
@@ -65,13 +65,13 @@ You will only need to install these tools once on your computer. Next time you w
 
     Copy and run these commands as displayed in your Terminal.
 
-  j. Close the Terminal window.
+j. Close the Terminal window.
 
-  k. Open a new Terminal window to ensure the installation takes effect.
+k. Open a new Terminal window to ensure the installation takes effect.
 
-  l. Verify the installation by running:
+l. Verify the installation by running:
 
-    ```
+    ```bash
     brew --version
     ```
 
@@ -83,7 +83,7 @@ If you see a version number, Homebrew has been successfully installed.
 
     a. In the new Terminal window, copy and paste the following command, then press `Enter`:
 
-    ```
+    ```bash
     brew install --cask docker
     ```
 
@@ -97,9 +97,9 @@ If you see a version number, Homebrew has been successfully installed.
 
     d. When Docker starts for the first time, you may see a box asking for your computer's password. Enter your password and click `OK`.
 
-    e. You may see a welcome screen or tutorial from Docker. 
+    e. You may see a welcome screen or tutorial from Docker.
 
-    f. Docker Desktop will ask you to login or create an account if this is the first time you use it. Follow the instruction to register an account and login to Docker Desktop once you register your account. 
+    f. Docker Desktop will ask you to login or create an account if this is the first time you use it. Follow the instruction to register an account and login to Docker Desktop once you register your account.
 
     g. Wait until you see a green dot next to "Docker Desktop is running" in the Docker Dashboard.
 
@@ -115,7 +115,7 @@ If you see a version number, Homebrew has been successfully installed.
 
     b. Copy and paste the following command, then press `Enter`:
 
-    ```
+    ```bash
     brew install kind
     ```
 
@@ -123,69 +123,76 @@ If you see a version number, Homebrew has been successfully installed.
 
 This is the end of the one-time installations and the following steps will be required every time:
 
-    #### 4. Setting up the cluster
+    ### Setting up the cluster
     Now that you have Kind installed, let's create a Kubernetes cluster:
 
-    1. Create a new cluster by running:
+    1. In the Terminal, copy and paste the following command and press `Enter`:
 
-      ```bash
-      kind create cluster --name odigos-demo
-      ```
-    
-    This command creates a new Kubernetes cluster named "odigos-demo".
+    ```bash
+    kind delete cluster --name odigos-demo
+    ```
 
-    2. Verify that the cluster is running:
+    This removes any existing test environment with the same name. If this is your first time, you'll see a message saying the cluster doesn't exist, which is fine.
 
-      ```bash
-      kubectl cluster-info --context kind-odigos-demo
-      ```
-    
-      This should display information about your cluster, including the Kubernetes master and CoreDNS.
+    2. Create a new cluster by running:
+
+    ```bash
+    kind create cluster --name odigos-demo
+    ```
+
+    This command creates a new Kubernetes cluster named "odigos-demo". You'll see a lot of text appear in the Terminal. This is normal. Wait until you see a message that says "Your Kubernetes control-plane has initialized successfully!" and the command prompt appears again.
+
+    3. Verify that the cluster is running:
+
+    ```bash
+    kubectl cluster-info --context kind-odigos-demo
+    ```
 
-    #### 5. Install the demo application
+    This should display information about your cluster, including the Kubernetes master and CoreDNS.
+
+    ### Install the demo application
     With our Kubernetes cluster running, we'll now deploy a demo application consisting of 5 microservices written in Go, Java, Python, .NET, and Node.js:
 
     1. Deploy the application using the following command:
 
-      ```bash
-      kubectl apply -f https://raw.githubusercontent.com/odigos-io/simple-demo/main/kubernetes/deployment.yaml
-      ```
-    
+    ```bash
+    kubectl apply -f https://raw.githubusercontent.com/odigos-io/simple-demo/main/kubernetes/deployment.yaml
+    ```
+
     This command applies the Kubernetes configuration file that defines our demo application.
     2. Wait for all the pods to be in the 'Running' state:
 
-      ```bash
-      kubectl get pods --watch
-      ```
-   
+    ```bash
+    kubectl get pods --watch
+    ```
+
     Press Ctrl+C to exit the watch mode once all pods are running.
-    
+
     3. Verify that all services are running:
 
-      ```bash
-      kubectl get services
-      ```
-    You should see a list of services including frontend, inventory, membership, coupon, and pricing.
+    ```bash
+    kubectl get services
+    ```
 
-    To access the demo application:
+    You should see a list of services including frontend, inventory, membership, coupon, and pricing.
 
-      1. Set up port forwarding to the frontend service:
+    4. Set up port forwarding to the frontend service:
 
-        ```bash
-        kubectl port-forward svc/frontend 8080:8080
-        ```
+    ```bash
+    kubectl port-forward svc/frontend 8080:8080
+    ```
 
-      This command forwards local port 8080 to port 8080 of the frontend service in the cluster.
+    This command forwards local port 8080 to port 8080 of the frontend service in the cluster.
 
-      2. Open your web browser and navigate to http://localhost:8080
+    5. Open your web browser and navigate to http://localhost:8080
 
-        You should now see the demo application running in your browser. You can interact with it to generate some traffic and data for Odigos to observe.
+    You should now see the demo application running in your browser. You can interact with it to generate some traffic and data for Odigos to observe.
 
-    #### 6. Setting Up Jaeger as a Destination in Odigos
+    ### Setting Up Jaeger as a Destination in Odigos
 
     For this demo, we'll use Jaeger, a popular open-source tool for tracing in distributed systems. Here's how to set it up:
 
-    ##### 1. Install Jaeger
+    #### 1. Install Jaeger
 
     a. Open your Terminal application.
 
@@ -201,7 +208,7 @@ This is the end of the one-time installations and the following steps will be re
       kubectl wait --for=condition=available --timeout=300s deployment jaeger -n tracing
       ```
 
-    ##### 2. Access the Jaeger UI
+    #### 2. Access the Jaeger UI
 
     a. To access the Jaeger UI, run this command in your terminal:
 
@@ -213,66 +220,10 @@ This is the end of the one-time installations and the following steps will be re
 
       You should see the Jaeger UI. Keep this terminal window open to maintain access to Jaeger.
 
-    ##### 3. Configure Jaeger as a Destination in Odigos
-
-    a. Open a new terminal window.
-
-    b. Run the following command to open the Odigos UI:
-
-      ```
-      odigos ui
-      ```
-
-    c. In your web browser, a new tab will open with the Odigos UI (usually at http://localhost:3000).
-
-    d. In the Odigos UI, you'll see a "Select Sources" page. Click "Select All" to choose all available sources, then click "Next".
-
-    e. On the "Add Destinations" page, click on "Jaeger".
-
-    f. Fill in the following details:
-
-      - Destination Name: Enter "jaeger-demo" (or any name you prefer)
-      - Endpoint: Enter "jaeger.tracing"
-
-    g. Click the "Test Connection" button. If successful, you'll see a green checkmark.
-
-    h. Click "Create Destination".
-
-    ##### 4. Verify the Setup
-
-    a. You should now see an overview page in the Odigos UI showing your selected sources and the Jaeger destination.
-
-    b. Go back to the Jaeger UI tab in your browser (http://localhost:16686).
-
-    c. After a few minutes, you should start seeing trace data appear in the Jaeger UI.
-
-    Congratulations! You've now set up Jaeger as a destination for your Odigos observability data. The system will now collect and send trace data to Jaeger, allowing you to visualize and analyze the behavior of your applications.
-
-
-
     ### Installing Odigos
 
-    #### 1. Set up a test environment
 
-    a. In the Terminal, copy and paste the following command and press `Enter`:
-
-    ```
-    kind delete cluster --name odigos-demo
-    ```
-
-    This removes any existing test environment with the same name. If this is your first time, you'll see a message saying the cluster doesn't exist, which is fine.
-
-    b. Now, copy and paste this command and press `Enter`:
-
-    ```
-    kind create cluster --name odigos-demo
-    ```
-
-    This creates a new test environment.
-
-    c. You'll see a lot of text appear in the Terminal. This is normal. Wait until you see a message that says "Your Kubernetes control-plane has initialized successfully!" and the command prompt appears again.
-
-    #### 2. Install the Odigos CLI tool
+    #### 1. Install the Odigos CLI tool
 
     The Odigos CLI (Command Line Interface) tool allows you to manage Odigos from the Terminal.
 
@@ -284,7 +235,7 @@ This is the end of the one-time installations and the following steps will be re
 
     b. Wait for the installation to complete. You'll know it's done when you see the command prompt again.
 
-    #### 3. Install Odigos in your test environment
+    #### 2. Install Odigos in your test environment
 
     a. In the Terminal, copy and paste the following command and press `Enter`:
 
@@ -296,7 +247,7 @@ This is the end of the one-time installations and the following steps will be re
 
     c. You'll know it's done when you see a message saying "SUCCESS: Odigos installed." and the command prompt appears again.
 
-    #### 4. Open the Odigos control panel
+    #### 3. Open the Odigos control panel
 
     a. In the Terminal, copy and paste the following command and press `Enter`:
 
@@ -318,7 +269,7 @@ This is the end of the one-time installations and the following steps will be re
 
     d. The Odigos control panel should now open in your browser. It might take a few seconds to load.
 
-    #### 5. Set up Odigos
+    #### 4. Set up Odigos
 
     a. In the Odigos control panel, you'll see a page titled "Select Sources". Sources are the things Odigos can collect data from.
 
@@ -330,7 +281,10 @@ This is the end of the one-time installations and the following steps will be re
 
     e. Click on one of the destination options (for example, "Jaeger").
 
-    f. Fill in any required information. If you're not sure what to enter, consult the Odigos documentation or ask for help.
+    f. If you're using "Jaeger", fill in the following details:
+
+      - Destination Name: Enter "jaeger-demo" (or any name you prefer)
+      - Endpoint: Enter "jaeger.tracing"
 
     g. Click the blue "Create Destination" button.
 
@@ -345,9 +299,9 @@ But the journey doesn't stop here. Now that you have the foundation in place, it
 
 In the next article, [Building a Pipeline](https://docs.odigos.io/quickstart/building-a-pipeline), you'll learn how to:
 
-* Configure data sources for your observability pipeline
-* Set up data processing and filtering
-* Direct your observability data to Jaeger and other potential destinations
-* Customize your pipeline to meet your specific needs
+- Configure data sources for your observability pipeline
+- Set up data processing and filtering
+- Direct your observability data to Jaeger and other potential destinations
+- Customize your pipeline to meet your specific needs
 
-By building a pipeline, you'll be able to collect, process, and analyze data from your applications more effectively, giving you a comprehensive view of your system's performance and behavior.
\ No newline at end of file
+By building a pipeline, you'll be able to collect, process, and analyze data from your applications more effectively, giving you a comprehensive view of your system's performance and behavior.
diff --git a/docs/setup/docker-registry.mdx b/docs/setup/docker-registry.mdx
index 4cfe6bbf2..3376522c2 100644
--- a/docs/setup/docker-registry.mdx
+++ b/docs/setup/docker-registry.mdx
@@ -78,6 +78,20 @@ If your Docker registry is private, configure your Kubernetes cluster to pull im
 
 ### Step 6: Install Odigos Using Custom Images
 Finally, install Odigos using the images from your custom Docker registry:
+
+
+<Tabs>
+  <Tab title="Odigos CLI">
 ```bash
 odigos install --image-prefix=$CUSTOM_DOCKER_REGISTRY
 ```
+  </Tab>
+  <Tab title="Helm Chart">
+```bash
+helm repo update
+helm upgrade --install odigos odigos/odigos --namespace odigos-system --create-namespace --set imagePrefix=$CUSTOM_DOCKER_REGISTRY
+kubectl label namespace odigos-system odigos.io/system-object="true"
+```  
+  </Tab>
+
+</Tabs>
\ No newline at end of file
diff --git a/docs/setup/odigos-with-argocd.mdx b/docs/setup/odigos-with-argocd.mdx
new file mode 100644
index 000000000..efd97b9e8
--- /dev/null
+++ b/docs/setup/odigos-with-argocd.mdx
@@ -0,0 +1,31 @@
+---
+title: "Configure Odigos with Argo CD"
+sidebarTitle: "Odigos with Argo CD"
+---
+
+This guide explains how to configure Argo CD to work seamlessly with Odigos by preserving the custom labels, annotations, and other fields that Odigos injects into workloads. By utilizing the ignoreDifferences setting in Argo CD, you can prevent these Odigos-specific fields from being overwritten during synchronization.
+
+## Setting up `ignoreDifferences` at the System Level
+
+To configure Argo CD to ignore specific differences at a **system-wide level**, follow the [Argo CD documentation](https://argo-cd.readthedocs.io/en/stable/user-guide/diffing/#system-level-configuration) on configuring `ignoreDifferences`. This approach ensures that fields injected by Odigos will not be removed or modified during Argo CD sync operations.
+
+### Configuration Example
+
+In your Argo CD configuration, add the following entries under `resource.customizations.ignoreDifferences.all` in the `data` section:
+
+```yaml
+data:
+  resource.customizations.ignoreDifferences.all: |
+    jqPathExpressions:
+    - .metadata.labels."odigos-instrumentation"
+    - .metadata.annotations | select(has("odigos.io"))
+    - .spec.template.metadata.labels | select(has("odigos.io"))
+    - .spec.template.spec.containers[].resources.limits | select(keys[] | startswith("instrumentation.odigos.io"))
+```
+
+These paths specify fields added by Odigos that you want Argo CD to ignore during synchronization.
+
+
+Refer to the [Argo CD documentation on diffing](https://argo-cd.readthedocs.io/en/stable/user-guide/diffing/) for further guidance on configuring `ignoreDifferences`.
+
+By setting up `ignoreDifferences` in this way, Argo CD will avoid syncing the fields injected by Odigos, allowing the instrumentation to function without interference.
diff --git a/frontend/endpoints/collector_metrics/cluster_collector.go b/frontend/endpoints/collector_metrics/cluster_collector.go
index 69a904844..df467ede3 100644
--- a/frontend/endpoints/collector_metrics/cluster_collector.go
+++ b/frontend/endpoints/collector_metrics/cluster_collector.go
@@ -199,7 +199,7 @@ func (dm *destinationsMetrics) updateDestinationMetricsByExporter(dp pmetric.Num
 
 	// From this point on, we are updating the existing destination metrics
 	var throughputPtr *int64
-	var dataSentInInterval int64
+	var dataSentInInterval float64
 	dtm := currentVal.clusterCollectorsTraffic[clusterCollectorID]
 
 	// the metric data in 'dp' represent the number of spans/metrics/logs sent by the exporter
@@ -208,20 +208,20 @@ func (dm *destinationsMetrics) updateDestinationMetricsByExporter(dp pmetric.Num
 	case exporterSentSpansMetricName:
 		throughputPtr = &dtm.tracesThroughput
 		spansInInterval := int64(dp.DoubleValue()) - dtm.sentSpans
-		dataSentInInterval = int64(float64(spansInInterval) * dm.avgCalculator.lastCalculatedAvgSpanSize())
-		dtm.tracesDataSent += dataSentInInterval
+		dataSentInInterval = float64(spansInInterval) * dm.avgCalculator.lastCalculatedAvgSpanSize()
+		dtm.tracesDataSent += int64(dataSentInInterval)
 		dtm.sentSpans = int64(dp.DoubleValue())
 	case exporterSentMetricsMetricName:
 		throughputPtr = &dtm.metricsThroughput
 		metricsInInterval := int64(dp.DoubleValue()) - dtm.sentMetrics
-		dataSentInInterval = int64(float64(metricsInInterval) * dm.avgCalculator.lastCalculatedAvgMetricSize())
-		dtm.metricsDataSent += dataSentInInterval
+		dataSentInInterval = float64(metricsInInterval) * dm.avgCalculator.lastCalculatedAvgMetricSize()
+		dtm.metricsDataSent += int64(dataSentInInterval)
 		dtm.sentMetrics = int64(dp.DoubleValue())
 	case exporterSentLogsMetricName:
 		throughputPtr = &dtm.logsThroughput
 		logsInInterval := int64(dp.DoubleValue()) - dtm.sentLogs
-		dataSentInInterval = int64(float64(logsInInterval) * dm.avgCalculator.lastCalculatedAvgLogSize())
-		dtm.logsDataSent += dataSentInInterval
+		dataSentInInterval = float64(logsInInterval) * dm.avgCalculator.lastCalculatedAvgLogSize()
+		dtm.logsDataSent += int64(dataSentInInterval)
 		dtm.sentLogs = int64(dp.DoubleValue())
 	}
 
@@ -235,14 +235,7 @@ func (dm *destinationsMetrics) updateDestinationMetricsByExporter(dp pmetric.Num
 		return
 	}
 
-	timeDiff := newTime.Sub(oldTime).Seconds()
-
-	var throughput int64
-	// calculate throughput only if the new value is greater than the old value and the time difference is positive
-	// otherwise, the throughput is set to 0
-	if dataSentInInterval > 0 && timeDiff > 0 {
-		throughput = (dataSentInInterval) / int64(timeDiff)
-	}
+	throughput := calculateThroughput(dataSentInInterval, newTime, oldTime)
 
 	*throughputPtr = throughput
 }
diff --git a/frontend/endpoints/collector_metrics/node_collector.go b/frontend/endpoints/collector_metrics/node_collector.go
index 61d6e2fa2..49e6623ee 100644
--- a/frontend/endpoints/collector_metrics/node_collector.go
+++ b/frontend/endpoints/collector_metrics/node_collector.go
@@ -95,14 +95,7 @@ func (sm *sourcesMetrics) updateSourceMetrics(dp pmetric.NumberDataPoint, metric
 		return
 	}
 
-	timeDiff := newTime.Sub(oldTime).Seconds()
-
-	var throughput int64
-	// calculate throughput only if the new value is greater than the old value and the time difference is positive
-	// otherwise, the throughput is set to 0
-	if newVal > oldVal && timeDiff > 0 {
-		throughput = (newVal - oldVal) / int64(timeDiff)
-	}
+	throughput := calculateThroughput(float64(newVal-oldVal), newTime, oldTime)
 
 	*throughputPtr = throughput
 }
diff --git a/frontend/endpoints/collector_metrics/utils.go b/frontend/endpoints/collector_metrics/utils.go
new file mode 100644
index 000000000..495b03690
--- /dev/null
+++ b/frontend/endpoints/collector_metrics/utils.go
@@ -0,0 +1,14 @@
+package collectormetrics
+
+import "time"
+
+func calculateThroughput(diff float64, currentTime, prevTime time.Time) int64 {
+	elapsed := currentTime.Sub(prevTime).Seconds()
+
+	var throughput int64
+	if diff > 0 && elapsed > 0 {
+		throughput = int64(diff / elapsed)
+	}
+
+	return throughput
+}
\ No newline at end of file
diff --git a/frontend/endpoints/collector_metrics/utils_test.go b/frontend/endpoints/collector_metrics/utils_test.go
new file mode 100644
index 000000000..0f360d602
--- /dev/null
+++ b/frontend/endpoints/collector_metrics/utils_test.go
@@ -0,0 +1,33 @@
+package collectormetrics
+
+import (
+	"testing"
+	"time"
+)
+
+func TestCalculateThroughput(t *testing.T) {
+	cases := []struct {
+		name string
+		diff float64
+		currentTime time.Time
+		prevTime time.Time
+		want int64
+	}{
+		{name: "no diff and no time change", diff: 0, currentTime: time.Now(), prevTime: time.Now(), want: 0},
+		{name: "diff of 1 in 1 second", diff: 1, currentTime: time.Now(), prevTime: time.Now().Add(-1 * time.Second), want: 1},
+		{name: "diff of 1 in 2 seconds", diff: 1, currentTime: time.Now(), prevTime: time.Now().Add(-2 * time.Second), want: 0},
+		{name: "diff of 0 in 1 second", diff: 0, currentTime: time.Now(), prevTime: time.Now().Add(-1 * time.Second), want: 0},
+		{name: "diff of 100 in 10 seconds", diff: 100, currentTime: time.Now(), prevTime: time.Now().Add(-10 * time.Second), want: 10},
+		{name: "diff of 100 in 0.1 seconds", diff: 100, currentTime: time.Now(), prevTime: time.Now().Add(-100 * time.Millisecond), want: 1000},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			got := calculateThroughput(c.diff, c.currentTime, c.prevTime)
+			if got != c.want {
+				t.Errorf("calculateThroughput(%f, %v, %v) = %d, want %d", c.diff, c.currentTime, c.prevTime, got, c.want)
+			}
+		})
+	}
+
+}
\ No newline at end of file
diff --git a/frontend/endpoints/describe.go b/frontend/endpoints/describe.go
index c67e4ef4a..c57fec891 100644
--- a/frontend/endpoints/describe.go
+++ b/frontend/endpoints/describe.go
@@ -4,31 +4,69 @@ import (
 	"github.com/gin-gonic/gin"
 	"github.com/odigos-io/odigos/frontend/kube"
 	"github.com/odigos-io/odigos/k8sutils/pkg/describe"
+	"github.com/odigos-io/odigos/k8sutils/pkg/describe/source"
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
 )
 
 func DescribeOdigos(c *gin.Context) {
 	ctx := c.Request.Context()
 	odiogosNs := env.GetCurrentNamespace()
-	describeText := describe.DescribeOdigos(ctx, kube.DefaultClient, kube.DefaultClient.OdigosClient, odiogosNs)
-	c.Writer.WriteString(describeText)
+	desc, err := describe.DescribeOdigos(ctx, kube.DefaultClient, kube.DefaultClient.OdigosClient, odiogosNs)
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": err.Error(),
+		})
+		return
+	}
+
+	// construct the http response code based on the status of the odigos
+	returnCode := 200
+
+	// Check for the Accept header
+	acceptHeader := c.GetHeader("Accept")
+
+	if acceptHeader == "application/json" {
+		// Return JSON response if Accept header is "application/json"
+		c.JSON(returnCode, desc)
+	} else {
+		describeText := describe.DescribeOdigosToText(desc)
+		c.String(returnCode, describeText)
+	}
 }
 
 func DescribeSource(c *gin.Context, ns string, kind string, name string) {
 	ctx := c.Request.Context()
+	var desc *source.SourceAnalyze
+	var err error
 	switch kind {
 	case "deployment":
-		describeText := describe.DescribeDeployment(ctx, kube.DefaultClient.Interface, kube.DefaultClient.OdigosClient, ns, name)
-		c.Writer.WriteString(describeText)
+		desc, err = describe.DescribeDeployment(ctx, kube.DefaultClient.Interface, kube.DefaultClient.OdigosClient, ns, name)
 	case "daemonset":
-		describeText := describe.DescribeDaemonSet(ctx, kube.DefaultClient.Interface, kube.DefaultClient.OdigosClient, ns, name)
-		c.Writer.WriteString(describeText)
+		desc, err = describe.DescribeDaemonSet(ctx, kube.DefaultClient.Interface, kube.DefaultClient.OdigosClient, ns, name)
 	case "statefulset":
-		describeText := describe.DescribeStatefulSet(ctx, kube.DefaultClient.Interface, kube.DefaultClient.OdigosClient, ns, name)
-		c.Writer.WriteString(describeText)
+		desc, err = describe.DescribeStatefulSet(ctx, kube.DefaultClient.Interface, kube.DefaultClient.OdigosClient, ns, name)
 	default:
 		c.JSON(404, gin.H{
 			"message": "kind not supported",
 		})
+		return
+	}
+
+	if err != nil {
+		c.JSON(500, gin.H{
+			"message": err.Error(),
+		})
+		return
+	}
+
+	// Check for the Accept header
+	acceptHeader := c.GetHeader("Accept")
+
+	if acceptHeader == "application/json" {
+		// Return JSON response if Accept header is "application/json"
+		c.JSON(200, desc)
+	} else {
+		describeText := describe.DescribeSourceToText(desc)
+		c.String(200, describeText)
 	}
 }
diff --git a/frontend/endpoints/sources.go b/frontend/endpoints/sources.go
index 682e1ce45..e9f1d7fe3 100644
--- a/frontend/endpoints/sources.go
+++ b/frontend/endpoints/sources.go
@@ -18,9 +18,10 @@ import (
 )
 
 type SourceLanguage struct {
-	ContainerName  string `json:"container_name"`
-	Language       string `json:"language"`
-	RuntimeVersion string `json:"runtime_version,omitempty"`
+	ContainerName  string               `json:"container_name"`
+	Language       string               `json:"language"`
+	RuntimeVersion string               `json:"runtime_version,omitempty"`
+	OtherAgent     *v1alpha1.OtherAgent `json:"other_agent,omitempty"`
 }
 
 type InstrumentedApplicationDetails struct {
@@ -387,11 +388,14 @@ func k8sInstrumentedAppToThinSource(app *v1alpha1.InstrumentedApplication) ThinS
 	}
 
 	for _, language := range app.Spec.RuntimeDetails {
-		source.IaDetails.Languages = append(source.IaDetails.Languages, SourceLanguage{
+		sourceLanguage := SourceLanguage{
 			ContainerName:  language.ContainerName,
 			Language:       string(language.Language),
 			RuntimeVersion: language.RuntimeVersion,
-		})
+			OtherAgent:     language.OtherAgent,
+		}
+
+		source.IaDetails.Languages = append(source.IaDetails.Languages, sourceLanguage)
 	}
 	return source
 }
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
index a1c9d85f5..333e92306 100644
--- a/frontend/webapp/app/layout.tsx
+++ b/frontend/webapp/app/layout.tsx
@@ -2,6 +2,7 @@
 import './globals.css';
 import React from 'react';
 import { useSSE } from '@/hooks';
+import { METADATA } from '@/utils';
 import { ApolloWrapper } from '@/lib';
 import { ThemeProviderWrapper } from '@/styles';
 
@@ -18,6 +19,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
   return (
     <html lang='en'>
+      <head>
+        <link rel='icon' href={`/${METADATA.icons}`} type='image/svg+xml' />
+        <title>{METADATA.title}</title>
+        <meta name='description' content={METADATA.title} />
+      </head>
       <ApolloWrapper>
         <ThemeProviderWrapper>
           <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
diff --git a/frontend/webapp/assets/icons/general/describe.svg b/frontend/webapp/assets/icons/general/describe.svg
new file mode 100644
index 000000000..25088b139
--- /dev/null
+++ b/frontend/webapp/assets/icons/general/describe.svg
@@ -0,0 +1 @@
+<svg viewBox="-2.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#8b92a6"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>paper</title> <desc>Created with Sketch.</desc> <g id="icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ui-gambling-website-lined-icnos-casinoshunter" transform="translate(-476.000000, -284.000000)" fill="#ffffff" fill-rule="nonzero"> <g id="square-filled" transform="translate(50.000000, 120.000000)"> <path d="M447.017693,164 C447.504179,164 447.973985,164.177317 448.339153,164.498753 L452.32146,168.004143 C452.752813,168.383838 453,168.930731 453,169.505391 L453,193 C453,194.656854 451.656854,196 450,196 L429,196 C427.343146,196 426,194.656854 426,193 L426,167 C426,165.343146 427.343146,164 429,164 L447.017693,164 Z M446,166 L429,166 C428.447715,166 428,166.447715 428,167 L428,193 C428,193.552285 428.447715,194 429,194 L450,194 C450.552285,194 451,193.552285 451,193 L451,172 L448.659002,172 C447.198488,172 446.085129,170.710688 446.004662,169.160652 L446,168.980703 L446,166 Z M451,169.505391 L448,166.865 L448,168.980703 C448,169.535984 448.292436,169.934644 448.585808,169.992691 L448.659002,170 L451,170 L451,169.505391 Z" id="paper"> </path> </g> </g> </g> </g></svg>
\ No newline at end of file
diff --git a/frontend/webapp/assets/icons/general/index.ts b/frontend/webapp/assets/icons/general/index.ts
index 9e731bb54..ecceee6ff 100644
--- a/frontend/webapp/assets/icons/general/index.ts
+++ b/frontend/webapp/assets/icons/general/index.ts
@@ -1,4 +1,7 @@
 import Funnel from './funnel.svg';
 import FunnelFocus from './funnel-focus.svg';
 import PayloadCollectionIcon from './payload-collection.svg';
-export { Funnel, FunnelFocus, PayloadCollectionIcon };
+import Describe from './describe.svg';
+import Refresh from './refresh.svg';
+
+export { Funnel, FunnelFocus, PayloadCollectionIcon, Describe, Refresh };
diff --git a/frontend/webapp/assets/icons/general/refresh.svg b/frontend/webapp/assets/icons/general/refresh.svg
new file mode 100644
index 000000000..7db42c18a
--- /dev/null
+++ b/frontend/webapp/assets/icons/general/refresh.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.06189 13C4.02104 12.6724 4 12.3387 4 12C4 7.58172 7.58172 4 12 4C14.5006 4 16.7332 5.14727 18.2002 6.94416M19.9381 11C19.979 11.3276 20 11.6613 20 12C20 16.4183 16.4183 20 12 20C9.61061 20 7.46589 18.9525 6 17.2916M9 17H6V17.2916M18.2002 4V6.94416M18.2002 6.94416V6.99993L15.2002 7M6 20V17.2916" stroke="#8b92a5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
\ No newline at end of file
diff --git a/frontend/webapp/package.json b/frontend/webapp/package.json
index 4017d95bb..7404b6aa8 100644
--- a/frontend/webapp/package.json
+++ b/frontend/webapp/package.json
@@ -32,8 +32,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-flow-renderer": "^10.3.17",
-    "react-query": "^3.39.3",
-    "react-redux": "^9.1.0",
     "styled-components": "^6.0.2",
     "swr": "^2.1.5",
     "typescript": "5.6.2",
diff --git a/frontend/webapp/public/brand/odigos_black_icon.svg b/frontend/webapp/public/brand/odigos_black_icon.svg
new file mode 100644
index 000000000..9247584f3
--- /dev/null
+++ b/frontend/webapp/public/brand/odigos_black_icon.svg
@@ -0,0 +1,6 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" fill="#242023"/>
+<path d="M553.491 377.309V294.077H717.573C738.785 294.077 756 310.446 756 330.659V668.508C756 688.72 738.785 705.09 717.573 705.09H553.491V622.396L699.666 557.762C723.721 547.079 738.708 524.791 738.708 499.583C738.708 474.375 723.721 452.011 699.666 441.405L553.414 377.386L553.491 377.309Z" fill="#F9F9F9"/>
+<path d="M447.51 621.781V705.014H283.427C262.215 705.014 245 688.644 245 668.431V330.582C245 310.37 262.215 294 283.427 294H447.51V376.695L301.334 441.329C277.279 452.011 262.292 474.299 262.292 499.507C262.292 524.715 277.279 547.079 301.334 557.685L447.586 621.704L447.51 621.781Z" fill="#F9F9F9"/>
+<path d="M500.462 584.507C547.363 584.507 585.385 546.485 585.385 499.584C585.385 452.682 547.363 414.66 500.462 414.66C453.56 414.66 415.538 452.682 415.538 499.584C415.538 546.485 453.56 584.507 500.462 584.507Z" fill="#F9F9F9"/>
+</svg>
diff --git a/frontend/webapp/services/actions.ts b/frontend/webapp/services/actions.ts
deleted file mode 100644
index b0b5b8556..000000000
--- a/frontend/webapp/services/actions.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { API } from '@/utils';
-import { get, httpDelete, post, put } from './api';
-import { ActionItem, ActionData } from '@/types';
-
-export async function setAction(body: ActionItem, type: string): Promise<void> {
-  return post(API.SET_ACTION(type), body);
-}
-
-export async function putAction(
-  id: string = '',
-  body: ActionItem,
-  type: string
-): Promise<void> {
-  return put(API.PUT_ACTION(type, id), body);
-}
-
-export async function deleteAction(
-  id: string,
-  type: string = 'AddClusterInfo'
-): Promise<void> {
-  return httpDelete(API.DELETE_ACTION(type, id));
-}
-
-export async function getActions(): Promise<ActionData[]> {
-  return get(API.ACTIONS);
-}
diff --git a/frontend/webapp/services/api.ts b/frontend/webapp/services/api.ts
deleted file mode 100644
index e02ed4921..000000000
--- a/frontend/webapp/services/api.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import axios from 'axios';
-
-export async function get(url: string) {
-  const { data, status } = await axios.get(url);
-  if (status === 200) {
-    return data;
-  }
-}
-
-export async function post(url: string, body: any) {
-  try {
-    const response = await axios.post(url, body);
-    return response.data;
-  } catch (error) {
-    throw error;
-  }
-}
-
-export function put(url: string, body: any) {
-  axios.put(url, body);
-}
-
-export function httpDelete(url: string) {
-  axios.delete(url);
-}
-
-export function patch(url: string, body: any) {
-  axios.patch(url, body);
-}
diff --git a/frontend/webapp/services/config.ts b/frontend/webapp/services/config.ts
deleted file mode 100644
index 754096007..000000000
--- a/frontend/webapp/services/config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { API } from "@/utils/constants";
-import { get } from "./api";
-
-export async function getConfig() {
-  return await get(API.CONFIG);
-}
diff --git a/frontend/webapp/services/destinations.ts b/frontend/webapp/services/destinations.ts
deleted file mode 100644
index ae1586b14..000000000
--- a/frontend/webapp/services/destinations.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { API } from '@/utils/constants';
-import { get, post, put, httpDelete } from './api';
-
-export async function getDestinationsTypes() {
-  return await get(API.DESTINATION_TYPE);
-}
-
-export async function getDestinations() {
-  return await get(API.DESTINATIONS);
-}
-
-export async function getDestination(type: string) {
-  return await get(`${API.DESTINATION_TYPE}/${type}`);
-}
-
-export async function setDestination(body: any) {
-  return await post(API.DESTINATIONS, body);
-}
-
-export async function updateDestination(body: any, id: string) {
-  return await put(`${API.DESTINATIONS}/${id}`, body);
-}
-
-export async function deleteDestination(id: string) {
-  return await httpDelete(`${API.DESTINATIONS}/${id}`);
-}
-
-export async function checkConnection(body: any) {
-  return post(API.CHECK_CONNECTION, body);
-}
diff --git a/frontend/webapp/services/index.ts b/frontend/webapp/services/index.ts
deleted file mode 100644
index 7ecd1a2f9..000000000
--- a/frontend/webapp/services/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './destinations';
-export * from './sources';
-export * from './config';
-export * from './actions';
-export * from './instrumentation-rules';
diff --git a/frontend/webapp/services/instrumentation-rules.ts b/frontend/webapp/services/instrumentation-rules.ts
deleted file mode 100644
index 22b6d994e..000000000
--- a/frontend/webapp/services/instrumentation-rules.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { API } from '@/utils';
-import { get, httpDelete, post, put } from './api';
-import { InstrumentationRuleSpec } from '@/types'; // Ensure this type matches your backend data model
-
-// API Endpoints
-export async function getInstrumentationRules(): Promise<
-  InstrumentationRuleSpec[]
-> {
-  return get(API.INSTRUMENTATION_RULES);
-}
-
-export async function getInstrumentationRule(
-  id: string
-): Promise<InstrumentationRuleSpec> {
-  return get(API.INSTRUMENTATION_RULE(id));
-}
-
-export async function createInstrumentationRule(
-  body: InstrumentationRuleSpec
-): Promise<void> {
-  return post(API.INSTRUMENTATION_RULES, body);
-}
-
-export async function updateInstrumentationRule(
-  id: string,
-  body: InstrumentationRuleSpec
-): Promise<void> {
-  return put(API.INSTRUMENTATION_RULE(id), body);
-}
-
-export async function deleteInstrumentationRule(id: string): Promise<void> {
-  return httpDelete(API.INSTRUMENTATION_RULE(id));
-}
diff --git a/frontend/webapp/services/metrics.ts b/frontend/webapp/services/metrics.ts
deleted file mode 100644
index abc4867fd..000000000
--- a/frontend/webapp/services/metrics.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { API } from '@/utils/constants';
-import { get } from './api';
-
-export async function getOverviewMetrics() {
-  return await get(API.OVERVIEW_METRICS);
-}
diff --git a/frontend/webapp/services/sources.ts b/frontend/webapp/services/sources.ts
deleted file mode 100644
index 8221a620d..000000000
--- a/frontend/webapp/services/sources.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { API } from '@/utils/constants';
-import { SelectedSources } from '@/types/sources';
-import { get, post, httpDelete, patch } from './api';
-
-export async function getNamespaces() {
-  return await get(API.NAMESPACES);
-}
-
-export async function getApplication(id: string) {
-  return await get(`${API.APPLICATIONS}/${id}`);
-}
-
-export async function setNamespaces(body: SelectedSources): Promise<void> {
-  return await post(API.NAMESPACES, body);
-}
-
-export async function getSources() {
-  return await get(API.SOURCES);
-}
-
-export async function getSource(namespace: string, kind: string, name: string) {
-  return await get(
-    `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`
-  );
-}
-
-export async function deleteSource(
-  namespace: string,
-  kind: string,
-  name: string
-) {
-  return await httpDelete(
-    `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`
-  );
-}
-
-export async function patchSources(
-  namespace: string,
-  kind: string,
-  name: string,
-  body: any
-) {
-  patch(
-    `${API.SOURCES}/namespace/${namespace}/kind/${kind}/name/${name}`,
-    body
-  );
-}
diff --git a/frontend/webapp/styles/global.tsx b/frontend/webapp/styles/global.tsx
deleted file mode 100644
index 229feb652..000000000
--- a/frontend/webapp/styles/global.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export const KIND_COLORS = {
-  deployment: '#203548',
-  daemonset: '#033869',
-  statefulset: '#0F2C3F',
-};
diff --git a/frontend/webapp/styles/styled.tsx b/frontend/webapp/styles/styled.tsx
index 1e6f1246d..d81c3e8ce 100644
--- a/frontend/webapp/styles/styled.tsx
+++ b/frontend/webapp/styles/styled.tsx
@@ -1,14 +1,5 @@
 import styled from 'styled-components';
 
-export const HideScroll = styled.div`
-  overflow-y: hidden;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-`;
-
 export const CenterThis = styled.div`
   width: 100%;
   display: flex;
diff --git a/frontend/webapp/types/actions.ts b/frontend/webapp/types/actions.ts
index 6c883f38f..10ebe6de7 100644
--- a/frontend/webapp/types/actions.ts
+++ b/frontend/webapp/types/actions.ts
@@ -10,12 +10,6 @@ export enum ActionsType {
   PII_MASKING = 'PiiMasking',
 }
 
-export enum ActionsSortType {
-  ACTION_NAME = 'action_name',
-  STATUS = 'status',
-  TYPE = 'type',
-}
-
 export type AddClusterInfoSpec = {
   clusterAttributes: {
     attributeName: string;
@@ -54,14 +48,6 @@ export type LatencySamplerSpec = {
   }[];
 };
 
-export interface ActionItemCard {
-  id: string;
-  title: string;
-  description: string;
-  type: string;
-  icon: string;
-}
-
 export interface ActionItem {
   actionName: string;
   notes: string;
@@ -86,22 +72,6 @@ export interface ActionDataParsed extends ActionData {
   spec: ActionItem;
 }
 
-interface Monitor {
-  id: string;
-  label: string;
-  checked: boolean;
-}
-
-export interface ActionState {
-  id?: string;
-  actionName: string;
-  actionNote: string;
-  actionData: any;
-  selectedMonitors: Monitor[];
-  disabled: boolean;
-  type: string;
-}
-
 export type ActionInput = {
   type: string;
   name: string;
diff --git a/frontend/webapp/types/destinations.ts b/frontend/webapp/types/destinations.ts
index 72ac143ac..55850608b 100644
--- a/frontend/webapp/types/destinations.ts
+++ b/frontend/webapp/types/destinations.ts
@@ -1,10 +1,5 @@
 import type { Condition, ExportedSignals } from './common';
 
-export enum DestinationsSortType {
-  NAME = 'name',
-  TYPE = 'type',
-}
-
 interface ObservabilitySignalSupport {
   supported: boolean;
 }
@@ -87,13 +82,6 @@ export type ConfiguredDestination = {
   destinationTypeDetails: DestinationTypeDetail[];
 };
 
-export interface DestinationType {
-  fields: any;
-  display_name: string;
-  image_url: string;
-  id: string;
-}
-
 interface SupportedSignal {
   supported: boolean;
 }
@@ -131,15 +119,6 @@ export interface Destination {
   };
 }
 
-export interface Field {
-  name: string;
-  component_type: string;
-  display_name: string;
-  component_properties: any;
-  video_url: string;
-  initial_value?: string;
-}
-
 export interface DestinationConfig {
   type: string;
   name: string;
diff --git a/frontend/webapp/types/sources.ts b/frontend/webapp/types/sources.ts
index 0e4492aa6..0e8dc97a6 100644
--- a/frontend/webapp/types/sources.ts
+++ b/frontend/webapp/types/sources.ts
@@ -1,79 +1,5 @@
 import { Condition } from './common';
 
-export enum SourceSortOptions {
-  NAME = 'name',
-  KIND = 'kind',
-  NAMESPACE = 'namespace',
-  LANGUAGE = 'language',
-}
-
-export enum K8SSourceTypes {
-  DEPLOYMENT = 'deployment',
-  STATEFUL_SET = 'statefulset',
-  DAEMON_SET = 'daemonset',
-}
-
-export interface ManagedSource {
-  kind: string;
-  name: string;
-  namespace: string;
-  reported_name?: string;
-  number_of_running_instances: number;
-  instrumentation_config: Array<InstrumentationConfig>;
-  instrumented_application_details: {
-    instrumentation_options: Array<InstrumentationConfig>;
-    conditions: Array<Condition>;
-    languages: Array<{
-      container_name: string;
-      language: string;
-      runtime_version?: string;
-    }> | null;
-  };
-}
-
-export interface Namespace {
-  name: string;
-  selected: boolean;
-  totalApps: number;
-}
-
-export interface SourceConfig {
-  app_instrumentation_labeled: boolean;
-  instances: number;
-  instrumentation_effective: boolean;
-  kind: string;
-  name: string;
-  ns_instrumentation_labeled: boolean;
-  selected?: boolean;
-}
-
-export type NamespaceConfiguration = {
-  selected_all: boolean;
-  future_selected: boolean;
-  objects: SourceConfig[];
-};
-
-// Type for the overall structure which has "default" as a key
-export type SelectedSourcesConfiguration = {
-  [key: string]: NamespaceConfiguration;
-};
-
-export interface SelectedSources {
-  [key: string]: {
-    objects: {
-      name: string;
-      selected: boolean;
-      kind: string;
-      app_instrumentation_labeled: boolean | null;
-      ns_instrumentation_labeled: boolean | null;
-      instrumentation_effective: boolean | null;
-      instances: number;
-    };
-    selected_all: boolean;
-    future_selected: boolean;
-  };
-}
-
 export type SourceContainer = {
   containerName: string;
   language: string;
@@ -91,18 +17,6 @@ export type K8sActualSource = {
     conditions: Array<Condition>;
   };
 };
-export interface InstrumentationConfig {
-  optionKey: string;
-  optionValueBoolean?: boolean;
-  spanKind: string;
-  instrumentationLibraries: InstrumentationConfigLibrary[];
-}
-
-export interface InstrumentationConfigLibrary {
-  instrumentationLibraryName: string;
-  language: string;
-  selected?: boolean;
-}
 
 export type WorkloadId = {
   kind: string;
@@ -113,9 +27,3 @@ export type WorkloadId = {
 export interface PatchSourceRequestInput {
   reportedName?: string;
 }
-
-export type PersistSourcesArray = {
-  kind: string;
-  name: string;
-  selected: boolean;
-};
diff --git a/frontend/webapp/utils/constants/config.tsx b/frontend/webapp/utils/constants/config.tsx
index a1fa46b46..d19374f2a 100644
--- a/frontend/webapp/utils/constants/config.tsx
+++ b/frontend/webapp/utils/constants/config.tsx
@@ -6,5 +6,5 @@ export const CONFIG = {
 
 export const METADATA = {
   title: 'Odigos',
-  icons: 'https://d2q89wckrml3k4.cloudfront.net/logo.png',
+  icons: 'brand/odigos_black_icon.svg',
 };
diff --git a/frontend/webapp/utils/constants/index.tsx b/frontend/webapp/utils/constants/index.tsx
index 21b5ba246..63ba9f452 100644
--- a/frontend/webapp/utils/constants/index.tsx
+++ b/frontend/webapp/utils/constants/index.tsx
@@ -2,5 +2,5 @@ export * from './routes';
 export * from './config';
 export * from './string';
 export * from './urls';
-export * from './programming.languages';
+export * from './programming-languages';
 export * from './monitors';
diff --git a/frontend/webapp/utils/constants/programming.languages.ts b/frontend/webapp/utils/constants/programming.languages.ts
deleted file mode 100644
index 8da32678f..000000000
--- a/frontend/webapp/utils/constants/programming.languages.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ManagedSource } from '@/types/sources';
-
-const BASE_URL = 'https://d1n7d4xz7fr8b4.cloudfront.net/';
-
-// while odigos lists language per container, we want to aggregate one single language for the workload.
-// the process is mostly heuristic, we iterate over the containers and return the first valid language we find.
-// there are additional cases for when the workload programming language is not available.
-export enum WORKLOAD_PROGRAMMING_LANGUAGES {
-  JAVA = 'java',
-  GO = 'go',
-  JAVASCRIPT = 'javascript',
-  PYTHON = 'python',
-  DOTNET = 'dotnet',
-  MYSQL = 'mysql',
-  UNKNOWN = 'unknown', // language detection completed but could not find a supported language
-  PROCESSING = 'processing', // language detection is not yet complotted, data is not available
-  NO_CONTAINERS = 'no containers', // language detection completed but no containers found or they are ignored
-  NO_RUNNING_PODS = 'no running pods', // no running pods are available for language detection
-  NGINX = 'nginx',
-}
-
-export const LANGUAGES_LOGOS: Record<WORKLOAD_PROGRAMMING_LANGUAGES, string> = {
-  [WORKLOAD_PROGRAMMING_LANGUAGES.JAVA]: `${BASE_URL}java.svg`,
-  [WORKLOAD_PROGRAMMING_LANGUAGES.GO]: `${BASE_URL}go.svg`,
-  [WORKLOAD_PROGRAMMING_LANGUAGES.JAVASCRIPT]: `${BASE_URL}nodejs.svg`,
-  [WORKLOAD_PROGRAMMING_LANGUAGES.PYTHON]: `${BASE_URL}python.svg`,
-  [WORKLOAD_PROGRAMMING_LANGUAGES.DOTNET]: `${BASE_URL}dotnet.svg`,
-  [WORKLOAD_PROGRAMMING_LANGUAGES.MYSQL]: `${BASE_URL}mysql.svg`,
-  [WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN]: `${BASE_URL}default.svg`, // TODO: good icon
-  [WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING]: `${BASE_URL}default.svg`, // TODO: good icon
-  [WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS]: `${BASE_URL}default.svg`, // TODO: good icon
-  [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: `${BASE_URL}default.svg`, // TODO: good icon
-  [WORKLOAD_PROGRAMMING_LANGUAGES.NGINX]: `${BASE_URL}nginx.svg`,
-};
-
-export const LANGUAGES_COLORS: Record<WORKLOAD_PROGRAMMING_LANGUAGES, string> =
-  {
-    [WORKLOAD_PROGRAMMING_LANGUAGES.JAVA]: '#B07219',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.GO]: '#00ADD8',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.JAVASCRIPT]: '#F7DF1E',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.PYTHON]: '#306998',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.DOTNET]: '#512BD4',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.MYSQL]: '#00758F',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN]: '#8b92a6',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING]: '#3367d9',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS]: '#111111',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS]: '#666666',
-    [WORKLOAD_PROGRAMMING_LANGUAGES.NGINX]: '#009237',
-  };
-
-export const getMainContainerLanguage = (
-  source: ManagedSource
-): WORKLOAD_PROGRAMMING_LANGUAGES => {
-  const ia = source?.instrumented_application_details;
-  if (!ia) {
-    if (source?.number_of_running_instances > 0) {
-      return WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING;
-    } else {
-      return WORKLOAD_PROGRAMMING_LANGUAGES.NO_RUNNING_PODS;
-    }
-  }
-
-  const { languages } = ia;
-  if (!languages) {
-    return WORKLOAD_PROGRAMMING_LANGUAGES.PROCESSING;
-  }
-
-  // we will filter out the ignored languages as we don't want to account them in the main language
-  const noneIgnoredLanguages = languages.filter(
-    (container) => container.language !== 'ignored'
-  );
-  if (noneIgnoredLanguages.length === 0) {
-    return WORKLOAD_PROGRAMMING_LANGUAGES.NO_CONTAINERS;
-  }
-
-  // find the first container with valid language
-  const mainContainer = noneIgnoredLanguages.find(
-    (container) => container.language !== 'unknown'
-  );
-  if (!mainContainer) {
-    return WORKLOAD_PROGRAMMING_LANGUAGES.UNKNOWN; // no valid language found, return the first one
-  }
-  return mainContainer.language as WORKLOAD_PROGRAMMING_LANGUAGES;
-};
diff --git a/frontend/webapp/utils/constants/routes.tsx b/frontend/webapp/utils/constants/routes.tsx
index 1d1f31b74..04fd793bc 100644
--- a/frontend/webapp/utils/constants/routes.tsx
+++ b/frontend/webapp/utils/constants/routes.tsx
@@ -1,19 +1,4 @@
 export const ROUTES = {
-  SETUP: '/setup',
-  OVERVIEW: '/overview',
-  APP: '/',
-  SOURCES: '/sources',
-  INSTRUMENTATION_RULES: '/instrumentation-rules',
-  DESTINATIONS: '/destinations',
-  ACTIONS: '/actions',
-  NEW_DESTINATION: '/setup?state=destinations',
-  MANAGE_DESTINATION: '/create-destination?dest=',
-  UPDATE_DESTINATION: 'edit-destination?dest=',
-  CREATE_DESTINATION: '/select-destination',
-  CREATE_SOURCE: '/select-sources',
-  MANAGE_SOURCE: '/edit-source',
-  CHOOSE_DESTINATION: '/choose-destination',
   CHOOSE_SOURCES: '/choose-sources',
-  CHOOSE_ACTIONS: '/choose-action',
-  EDIT_ACTION: '/edit-action',
+  OVERVIEW: '/overview',
 };
diff --git a/frontend/webapp/utils/constants/string.tsx b/frontend/webapp/utils/constants/string.tsx
index de673f550..028e7b312 100644
--- a/frontend/webapp/utils/constants/string.tsx
+++ b/frontend/webapp/utils/constants/string.tsx
@@ -1,57 +1,11 @@
 import type { NotificationType } from '@/types';
 
 export const SETUP = {
-  STEPS: {
-    CHOOSE_SOURCE: 'Choose Source',
-    CHOOSE_DESTINATION: 'Choose Destination',
-    CREATE_CONNECTION: 'Create Connection',
-    STATUS: {
-      ACTIVE: 'active',
-      DISABLED: 'disabled',
-      DONE: 'done',
-    },
-    ID: {
-      CHOOSE_SOURCE: 'choose-source',
-      CHOOSE_DESTINATION: 'choose-destination',
-      CREATE_CONNECTION: 'create-connection',
-    },
-  },
-  HEADER: {
-    CHOOSE_SOURCE_TITLE: 'Select applications to connect',
-    CHOOSE_DESTINATION_TITLE: 'Add new backend destination from the list',
-  },
-  MENU: {
-    NAMESPACES: 'Namespaces',
-    SELECT_ALL: 'Select All',
-    FUTURE_APPLY: 'Apply for any future apps',
-    TOOLTIP: 'Automatically connect any future apps in this namespace',
-    SEARCH_PLACEHOLDER: 'Search',
-    TYPE: 'Type',
-    MONITORING: 'I want to monitor',
-  },
-  NEXT: 'Next',
-  BACK: 'Back',
-  ALL: 'All',
-  CLEAR_SELECTION: 'Clear Selection',
-  APPLICATIONS: 'Applications',
-  RUNNING_INSTANCES: 'Running Instances',
-  SELECTED: 'Selected',
-  SOURCE_SELECTED: 'Source selected',
-  NONE_SOURCE_SELECTED: 'No source selected',
-  MANAGED: 'Managed',
-  CREATE_CONNECTION: 'Create Connection',
-  UPDATE_CONNECTION: 'Update Connection',
-  CONNECTION_MONITORS: 'This connection will monitor:',
   MONITORS: {
     LOGS: 'Logs',
     METRICS: 'Metrics',
     TRACES: 'Traces',
   },
-  DESTINATION_NAME: 'Destination Name',
-  CREATE_DESTINATION: 'Create Destination',
-  UPDATE_DESTINATION: 'Update Destination',
-  QUICK_HELP: 'Quick Help',
-  ERROR: 'Something went wrong',
 };
 
 export const INPUT_TYPES = {
@@ -62,57 +16,6 @@ export const INPUT_TYPES = {
   TEXTAREA: 'textarea',
 };
 
-export const OVERVIEW = {
-  ODIGOS: 'Odigos',
-  MENU: {
-    OVERVIEW: 'Overview',
-    SOURCES: 'Sources',
-    DESTINATIONS: 'Destinations',
-    ACTIONS: 'Actions',
-    INSTRUMENTATION_RULES: 'Instrumentation Rules',
-  },
-  SEARCH_SOURCE: 'Search Source',
-  ADD_NEW_SOURCE: 'Add New Source',
-  ADD_NEW_DESTINATION: 'Add New Destination',
-  ADD_NEW_ACTION: 'Add New Action',
-  EMPTY_DESTINATION: 'No destinations found',
-  EMPTY_ACTION: 'No actions found',
-  EMPTY_SOURCE: 'No sources found in this namespace',
-  DESTINATION_UPDATE_SUCCESS: 'Destination updated successfully',
-  DESTINATION_CREATED_SUCCESS: 'Destination created successfully',
-  DESTINATION_DELETED_SUCCESS: 'Destination deleted successfully',
-  SOURCE_UPDATE_SUCCESS: 'Source updated successfully',
-  SOURCE_CREATED_SUCCESS: 'Source created successfully',
-  SOURCE_DELETED_SUCCESS: 'Source deleted successfully',
-  ACTION_UPDATE_SUCCESS: 'Action updated successfully',
-  ACTION_UPDATE_ERROR: 'Failed to update action',
-  MANAGE: 'Manage',
-  DELETE: 'Delete',
-  DELETE_DESTINATION: 'Delete Destination',
-  DELETE_SOURCE: 'Delete Source',
-  DELETE_ACTION: 'Delete Action',
-
-  SOURCE_DANGER_ZONE_TITLE: 'Delete this source',
-  ACTION_DANGER_ZONE_TITLE: 'Delete this action',
-  SOURCE_DANGER_ZONE_SUBTITLE:
-    'Uninstrument this source, and delete all odigos associated data. You can always re-instrument this source later with odigos.',
-  ACTION_DANGER_ZONE_SUBTITLE: 'This action cannot be undone. This will permanently delete the action and all associated data.',
-  DELETE_MODAL_TITLE: 'Delete this destination',
-  DELETE_MODAL_SUBTITLE: 'This action cannot be undone. This will permanently delete the destination and all associated data.',
-  DELETE_BUTTON: 'I want to delete this destination',
-  CONFIRM_SOURCE_DELETE: 'I want to delete this source',
-  CONFIRM_DELETE_ACTION: 'I want to delete this action',
-  CONNECT: 'Connect',
-  REPORTED_NAME: 'Override service.name',
-  CREATE_ACTION: 'Create Action',
-  EDIT_ACTION: 'Edit Action',
-  ACTION_DESCRIPTION:
-    'Actions are a way to modify the OpenTelemetry data recorded by Odigos Sources, before it is exported to your Odigos Destinations.',
-  CREATE_INSTRUMENTATION_RULE: 'Create Instrumentation Rule',
-  EDIT_INSTRUMENTATION_RULE: 'Edit Instrumentation Rule',
-  INSTRUMENTATION_RULE_DESCRIPTION: 'Instrumentation Rules control how telemetry is recorded from your application.',
-};
-
 export const ACTION = {
   SAVE: 'Save',
   CONTACT_US: 'Contact Us',
@@ -138,63 +41,3 @@ export const NOTIFICATION: {
   ERROR: 'error',
   SUCCESS: 'success',
 };
-
-export const PARAMS = {
-  STATUS: 'status',
-  DELETED: 'deleted',
-  CREATED: 'created',
-  UPDATED: 'updated',
-};
-
-//odigos actions
-export const ACTIONS = {
-  MONITORS_TITLE: 'Monitors',
-  ACTION_NAME: 'Action Name',
-  ACTION_NOTE: 'Note',
-  NOTE_PLACEHOLDER: 'Add a note to describe the use case of this action',
-  CREATE_ACTION: 'Create Action',
-  UPDATE_ACTION: 'Update Action',
-
-  AddClusterInfo: {
-    TITLE: 'Add Cluster Info',
-    DESCRIPTION: `The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.`,
-  },
-  DeleteAttribute: {
-    TITLE: 'Delete Attribute',
-    DESCRIPTION: `The “Delete Attribute” Odigos Action can be used to delete attributes from telemetry signals originated from the k8s cluster where the Odigos is running.`,
-  },
-  RenameAttribute: {
-    TITLE: 'Rename Attribute',
-    DESCRIPTION: `The “Rename Attribute” Odigos Action can be used to rename attributes from telemetry signals originated from the k8s cluster where the Odigos is running.`,
-  },
-  ErrorSampler: {
-    TITLE: 'Error Sampler',
-    DESCRIPTION: `The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.`,
-  },
-  ProbabilisticSampler: {
-    TITLE: 'Probabilistic Sampler',
-    DESCRIPTION: `The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.`,
-  },
-  LatencySampler: {
-    TITLE: 'Latency Sampler',
-    DESCRIPTION: `The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.`,
-  },
-  PiiMasking: {
-    TITLE: 'PII Masking',
-    DESCRIPTION: `The “PII Masking” Odigos Action is an Endpoint Action that masks PII (Personally Identifiable Information) attributes from telemetry signals.`,
-  },
-  SEARCH_ACTION: 'Search Action',
-};
-
-export const INSTRUMENTATION_RULES = {
-  'payload-collection': {
-    TITLE: 'Payload Collection',
-    DESCRIPTION: 'Collect span attributes containing payload data to traces.',
-  },
-};
-
-export const MONITORS = {
-  LOGS: 'Logs',
-  METRICS: 'Metrics',
-  TRACES: 'Traces',
-};
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 921492eca..1f16bfaef 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -5,38 +5,8 @@ const BASE_URL = env === 'production' ? '/api' : LOCALHOST;
 
 const API = {
   EVENTS: `${BASE_URL}/events`,
-  CONFIG: `${BASE_URL}/config`,
-  NAMESPACES: `${BASE_URL}/namespaces`,
-  APPLICATIONS: `${BASE_URL}/applications`,
-  DESTINATION_TYPE: `${BASE_URL}/destination-types`,
-  DESTINATIONS: `${BASE_URL}/destinations`,
-  CHECK_CONNECTION: `${BASE_URL}/destinations/testConnection`,
-  SOURCES: `${BASE_URL}/sources`,
-  SET_ACTION: (type: string) => `${BASE_URL}/actions/types/${type}`,
-  PUT_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
-  ACTIONS: `${BASE_URL}/actions`,
-  DELETE_ACTION: (type: string, id: string) => `${BASE_URL}/actions/types/${type}/${id}`,
-  OVERVIEW_METRICS: `${BASE_URL}/metrics/overview`,
-  INSTRUMENTATION_RULES: `${BASE_URL}/instrumentation-rules`,
-  INSTRUMENTATION_RULE: (id: string) => `${BASE_URL}/instrumentation-rules/${id}`,
 };
 
-const QUERIES = {
-  API_CONFIG: 'apiConfig',
-  API_NAMESPACES: 'apiNamespaces',
-  API_APPLICATIONS: 'apiApplications',
-  API_DESTINATIONS: 'apiDestinations',
-  API_SOURCES: 'apiSources',
-  API_DESTINATION_TYPE: 'apiDestinationType',
-  API_DESTINATION_TYPES: 'apiDestinationTypes',
-  API_ACTIONS: 'apiActions',
-};
-
-const SLACK_INVITE_LINK = 'https://odigos.slack.com/join/shared_invite/zt-1d7egaz29-Rwv2T8kyzc3mWP8qKobz~A#/shared-invite/email';
-
 export const DOCS_LINK = 'https://docs.odigos.io';
-export const ACTION_DOCS_LINK = `${DOCS_LINK}/pipeline/actions/introduction`;
-export const ACTION_ITEM_DOCS_LINK = `${DOCS_LINK}/pipeline/actions`;
-export const INSTRUMENTATION_RULES_DOCS_LINK = `${DOCS_LINK}/pipeline/rules/overview`;
 
-export { API, QUERIES, SLACK_INVITE_LINK, BASE_URL };
+export { API, BASE_URL };
diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index 8a3764f34..1c3fbe5db 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -1072,7 +1072,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.23.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.8.4":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
   integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
@@ -2347,11 +2347,6 @@
   resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.6.tgz#20341df2bdcc394f2d825d8651cfd6e5bf2d3b32"
   integrity sha512-4nebF2ZJGzQk0ka0O6+FZUWceyFv4vWq/0dXBMmrSeAwzOuOd/GxE5Pa64d/ndeNLG73dXoBsRzvtsVsYUv6Uw==
 
-"@types/use-sync-external-store@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
-  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
-
 "@types/yauzl@^2.9.1":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.3.tgz#e9b2808b4f109504a03cda958259876f61017999"
@@ -2777,11 +2772,6 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-big-integer@^1.6.16:
-  version "1.6.52"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85"
-  integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==
-
 binary-extensions@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
@@ -2817,20 +2807,6 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-broadcast-channel@^3.4.1:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
-  integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    detect-node "^2.1.0"
-    js-sha3 "0.8.0"
-    microseconds "0.2.0"
-    nano-time "1.0.0"
-    oblivious-set "1.0.0"
-    rimraf "3.0.2"
-    unload "2.2.0"
-
 browserslist@^4.23.1, browserslist@^4.23.3:
   version "4.23.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.3.tgz#debb029d3c93ebc97ffbc8d9cbb03403e227c800"
@@ -3400,11 +3376,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-detect-node@^2.0.4, detect-node@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
-  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
-
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -4675,11 +4646,6 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
-js-sha3@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
-  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -4903,14 +4869,6 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-match-sorter@^6.0.2:
-  version "6.3.4"
-  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.4.tgz#afa779d8e922c81971fbcb4781c7003ace781be7"
-  integrity sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==
-  dependencies:
-    "@babel/runtime" "^7.23.8"
-    remove-accents "0.5.0"
-
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -4944,11 +4902,6 @@ micromatch@^4.0.4:
     braces "^3.0.3"
     picomatch "^2.3.1"
 
-microseconds@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
-  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
-
 mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -4988,13 +4941,6 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-nano-time@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
-  integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==
-  dependencies:
-    big-integer "^1.6.16"
-
 nanoid@^3.3.4, nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -5159,11 +5105,6 @@ object.values@^1.1.6, object.values@^1.1.7, object.values@^1.2.0:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-oblivious-set@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
-  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
-
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -5440,23 +5381,6 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-query@^3.39.3:
-  version "3.39.3"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35"
-  integrity sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    broadcast-channel "^3.4.1"
-    match-sorter "^6.0.2"
-
-react-redux@^9.1.0:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.1.2.tgz#deba38c64c3403e9abd0c3fbeab69ffd9d8a7e4b"
-  integrity sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==
-  dependencies:
-    "@types/use-sync-external-store" "^0.0.3"
-    use-sync-external-store "^1.0.0"
-
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -5564,11 +5488,6 @@ rehackt@^0.1.0:
   resolved "https://registry.yarnpkg.com/rehackt/-/rehackt-0.1.0.tgz#a7c5e289c87345f70da8728a7eb878e5d03c696b"
   integrity sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==
 
-remove-accents@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.5.0.tgz#77991f37ba212afba162e375b627631315bed687"
-  integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==
-
 request-progress@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
@@ -5637,7 +5556,7 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
-rimraf@3.0.2, rimraf@^3.0.2:
+rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -6292,14 +6211,6 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
-unload@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
-  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    detect-node "^2.0.4"
-
 untildify@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
@@ -6333,7 +6244,7 @@ use-sync-external-store@1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-use-sync-external-store@1.2.2, use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@1.2.2, use-sync-external-store@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
diff --git a/helm/odigos/templates/cleanup/cleanup-clusterrole.yaml b/helm/odigos/templates/cleanup/cleanup-clusterrole.yaml
index 8e1a9c0fa..2fb1f29b5 100644
--- a/helm/odigos/templates/cleanup/cleanup-clusterrole.yaml
+++ b/helm/odigos/templates/cleanup/cleanup-clusterrole.yaml
@@ -15,3 +15,7 @@ rules:
 - apiGroups: ["apiextensions.k8s.io"]
   resources: ["customresourcedefinitions"]
   verbs: ["list", "get", "patch", "delete"]
+- apiGroups: ["admissionregistration.k8s.io"]
+  resources: ["mutatingwebhookconfigurations"]
+  verbs: ["get", "list", "delete"]
+  
diff --git a/helm/odigos/templates/instrumentor/clusterrole.yaml b/helm/odigos/templates/instrumentor/clusterrole.yaml
index fb0dd5bab..1c558fcf8 100644
--- a/helm/odigos/templates/instrumentor/clusterrole.yaml
+++ b/helm/odigos/templates/instrumentor/clusterrole.yaml
@@ -58,7 +58,6 @@ rules:
     resources:
       - collectorsgroups
       - instrumentedapplications
-      - odigosconfigurations
       - destinations
     verbs:
       - create
diff --git a/helm/odigos/templates/instrumentor/deployment.yaml b/helm/odigos/templates/instrumentor/deployment.yaml
index 43c106181..db0422a1e 100644
--- a/helm/odigos/templates/instrumentor/deployment.yaml
+++ b/helm/odigos/templates/instrumentor/deployment.yaml
@@ -48,6 +48,8 @@ spec:
           - configMapRef:
               name: odigos-own-telemetry-otel-config
               optional: true
+          - configMapRef:
+              name: odigos-deployment
         livenessProbe:
           httpGet:
             path: /healthz
diff --git a/helm/odigos/templates/odigos-config-cm.yaml b/helm/odigos/templates/odigos-config-cm.yaml
index 024c3287e..1ea0ec880 100644
--- a/helm/odigos/templates/odigos-config-cm.yaml
+++ b/helm/odigos/templates/odigos-config-cm.yaml
@@ -30,6 +30,12 @@ data:
       goMemLimitMiB: {{ . }}
       {{- end }}
     {{- end }}
+    {{- if .Values.collectorNode }}
+    collectorNode:
+      {{- with .Values.collectorNode.collectorOwnMetricsPort }}
+      collectorOwnMetricsPort: {{ . }}
+      {{- end }}
+    {{- end }}
     instrumentorImage: {{ .Values.instrumentor.image.repository }}
     telemetryEnabled: {{ .Values.telemetry.enabled }}
     openshiftEnabled: {{ .Values.openshift.enabled }}
diff --git a/helm/odigos/templates/odigos-deployment.yaml b/helm/odigos/templates/odigos-deployment.yaml
index b49ba0877..95ae01a85 100644
--- a/helm/odigos/templates/odigos-deployment.yaml
+++ b/helm/odigos/templates/odigos-deployment.yaml
@@ -5,3 +5,4 @@ metadata:
   namespace: {{ .Release.Namespace }}
 data:
   ODIGOS_VERSION: {{ .Values.image.tag | default .Chart.AppVersion }}
+  ODIGOS_TIER: "{{- if .Values.onPremToken }}onprem{{- else }}community{{- end }}"
\ No newline at end of file
diff --git a/helm/odigos/templates/ui/clusterrole.yaml b/helm/odigos/templates/ui/clusterrole.yaml
index 36762bd6b..08a7bb5ba 100644
--- a/helm/odigos/templates/ui/clusterrole.yaml
+++ b/helm/odigos/templates/ui/clusterrole.yaml
@@ -41,6 +41,7 @@ rules:
       - get
       - list
       - watch
+      - update
       - patch
   - apiGroups:
       - odigos.io
diff --git a/helm/odigos/values.yaml b/helm/odigos/values.yaml
index 01651fcc6..e407e5dcb 100644
--- a/helm/odigos/values.yaml
+++ b/helm/odigos/values.yaml
@@ -38,6 +38,11 @@ collectorGateway:
   # if not specified, it will be set to 80% of the hard limit of the memory limiter.
   goMemLimitMiB: 340
 
+collectorNode:
+  # The port to use for exposing the collector's own metrics as a prometheus endpoint.
+  # This can be used to resolve conflicting ports when a collector is using the host network.
+  collectorOwnMetricsPort: 55682
+
 autoscaler:
   image:
     repository: keyval/odigos-autoscaler
diff --git a/instrumentor/controllers/deleteinstrumentedapplication/manager.go b/instrumentor/controllers/deleteinstrumentedapplication/manager.go
index bbd4406ee..eb99d5347 100644
--- a/instrumentor/controllers/deleteinstrumentedapplication/manager.go
+++ b/instrumentor/controllers/deleteinstrumentedapplication/manager.go
@@ -53,7 +53,7 @@ func SetupWithManager(mgr ctrl.Manager) error {
 		ControllerManagedBy(mgr).
 		Named("deleteinstrumentedapplication-namespace").
 		For(&corev1.Namespace{}).
-		WithEventFilter(predicate.LabelChangedPredicate{}).
+		WithEventFilter(&NsLabelBecameDisabledPredicate{}).
 		Complete(&NamespaceReconciler{
 			Client: mgr.GetClient(),
 			Scheme: mgr.GetScheme(),
diff --git a/instrumentor/controllers/deleteinstrumentedapplication/namespace_controller.go b/instrumentor/controllers/deleteinstrumentedapplication/namespace_controller.go
index fa1b9908c..a71452cd3 100644
--- a/instrumentor/controllers/deleteinstrumentedapplication/namespace_controller.go
+++ b/instrumentor/controllers/deleteinstrumentedapplication/namespace_controller.go
@@ -18,17 +18,56 @@ package deleteinstrumentedapplication
 
 import (
 	"context"
+	"errors"
 
+	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
+	"sigs.k8s.io/controller-runtime/pkg/event"
 	"sigs.k8s.io/controller-runtime/pkg/log"
 )
 
+type NsLabelBecameDisabledPredicate struct{}
+
+func (i *NsLabelBecameDisabledPredicate) Create(e event.CreateEvent) bool {
+	// new namespace should start empty.
+	// existing namespace inserted into cache on startup should not trigger this
+	return false
+}
+
+func (i *NsLabelBecameDisabledPredicate) Update(e event.UpdateEvent) bool {
+	if e.ObjectOld == nil || e.ObjectNew == nil {
+		return false
+	}
+
+	oldNs, ok := e.ObjectOld.(*corev1.Namespace)
+	if !ok {
+		return false
+	}
+	newNs, ok := e.ObjectNew.(*corev1.Namespace)
+	if !ok {
+		return false
+	}
+
+	// if the namespace was not labeled for instrumentation before, and now it is, we should not trigger
+	// if the namespace was labeled for instrumentation before, and now it is not, we should trigger
+	return workload.IsObjectLabeledForInstrumentation(oldNs) && !workload.IsObjectLabeledForInstrumentation(newNs)
+}
+
+func (i *NsLabelBecameDisabledPredicate) Delete(e event.DeleteEvent) bool {
+	return false
+}
+
+func (i *NsLabelBecameDisabledPredicate) Generic(e event.GenericEvent) bool {
+	return false
+}
+
 // NamespaceReconciler reconciles a Namespace object
 type NamespaceReconciler struct {
 	client.Client
@@ -38,14 +77,16 @@ type NamespaceReconciler struct {
 func (r *NamespaceReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
 	logger := log.FromContext(ctx)
 
+	logger.Info("namespace reconcile - will delete instrumentation for workloads that are not labeled in this namespace", "namespace", req.Name)
+
 	var ns corev1.Namespace
 	err := r.Get(ctx, client.ObjectKey{Name: req.Name}, &ns)
 	if client.IgnoreNotFound(err) != nil {
 		logger.Error(err, "error fetching namespace object")
 		return ctrl.Result{}, err
 	}
-
-	// If namespace is labeled, skip
+	// this reconciler handles cases where ns becomes uninstrumented,
+	// and workloads that are not labeled and instrumented inherently from the ns should be deleted
 	if err == nil && workload.IsObjectLabeledForInstrumentation(&ns) {
 		return ctrl.Result{}, nil
 	}
@@ -59,16 +100,9 @@ func (r *NamespaceReconciler) Reconcile(ctx context.Context, req ctrl.Request) (
 	}
 
 	for _, dep := range deps.Items {
-		if !workload.IsObjectLabeledForInstrumentation(&dep) {
-			if err := deleteWorkloadInstrumentedApplication(ctx, r.Client, &dep); err != nil {
-				logger.Error(err, "error removing runtime details")
-				return ctrl.Result{}, err
-			}
-			err = removeReportedNameAnnotation(ctx, r.Client, &dep)
-			if err != nil {
-				logger.Error(err, "error removing reported name annotation from deployment")
-				return ctrl.Result{}, err
-			}
+		err := syncGenericWorkloadListToNs(ctx, r.Client, workload.WorkloadKindDeployment, client.ObjectKey{Namespace: dep.Namespace, Name: dep.Name})
+		if err != nil {
+			return ctrl.Result{}, err
 		}
 	}
 
@@ -80,16 +114,9 @@ func (r *NamespaceReconciler) Reconcile(ctx context.Context, req ctrl.Request) (
 	}
 
 	for _, s := range ss.Items {
-		if !workload.IsObjectLabeledForInstrumentation(&s) {
-			if err := deleteWorkloadInstrumentedApplication(ctx, r.Client, &s); err != nil {
-				logger.Error(err, "error removing runtime details")
-				return ctrl.Result{}, err
-			}
-			err = removeReportedNameAnnotation(ctx, r.Client, &s)
-			if err != nil {
-				logger.Error(err, "error removing reported name annotation from statefulset")
-				return ctrl.Result{}, err
-			}
+		err := syncGenericWorkloadListToNs(ctx, r.Client, workload.WorkloadKindStatefulSet, client.ObjectKey{Namespace: s.Namespace, Name: s.Name})
+		if err != nil {
+			return ctrl.Result{}, err
 		}
 	}
 
@@ -101,18 +128,49 @@ func (r *NamespaceReconciler) Reconcile(ctx context.Context, req ctrl.Request) (
 	}
 
 	for _, d := range ds.Items {
-		if !workload.IsObjectLabeledForInstrumentation(&d) {
-			if err := deleteWorkloadInstrumentedApplication(ctx, r.Client, &d); err != nil {
-				logger.Error(err, "error removing runtime details")
-				return ctrl.Result{}, err
-			}
-			err = removeReportedNameAnnotation(ctx, r.Client, &d)
-			if err != nil {
-				logger.Error(err, "error removing reported name annotation from daemonset")
-				return ctrl.Result{}, err
-			}
+		err := syncGenericWorkloadListToNs(ctx, r.Client, workload.WorkloadKindDaemonSet, client.ObjectKey{Namespace: d.Namespace, Name: d.Name})
+		if err != nil {
+			return ctrl.Result{}, err
 		}
 	}
 
 	return ctrl.Result{}, nil
 }
+
+func syncGenericWorkloadListToNs(ctx context.Context, c client.Client, kind workload.WorkloadKind, key client.ObjectKey) error {
+
+	// it is very important that we make the changes based on a fresh copy of the workload object
+	// if a list operation pulled in state and is now slowly iterating over it, we might be working with stale data
+	freshWorkloadCopy := workload.ClientObjectFromWorkloadKind(kind)
+	workloadGetErr := c.Get(ctx, key, freshWorkloadCopy)
+	if workloadGetErr != nil {
+		if apierrors.IsNotFound(workloadGetErr) {
+			// if the workload been deleted, we don't need to do anything
+			return nil
+		} else {
+			return workloadGetErr
+		}
+	}
+
+	if !isInheritingInstrumentationFromNs(freshWorkloadCopy) {
+		return nil
+	}
+
+	var err error
+	err = errors.Join(err, deleteWorkloadInstrumentedApplication(ctx, c, freshWorkloadCopy))
+	err = errors.Join(err, removeReportedNameAnnotation(ctx, c, freshWorkloadCopy))
+	return err
+}
+
+// this function indicates that the odigos instrumentation label is missing from the workload object manifest.
+// when reconciling the namespace, the usecase is to delete instrumentation for workloads that were only
+// instrumented due to the label on the namespace. These are workloads with the label missing.
+// (they inherit the instrumentation from the namespace this way)
+func isInheritingInstrumentationFromNs(obj client.Object) bool {
+	labels := obj.GetLabels()
+	if labels == nil {
+		return true
+	}
+	_, exists := labels[consts.OdigosInstrumentationLabel]
+	return !exists
+}
diff --git a/instrumentor/controllers/instrumentationdevice/collectorsgroup_controller.go b/instrumentor/controllers/instrumentationdevice/collectorsgroup_controller.go
index 952d5b763..cb64c0ca4 100644
--- a/instrumentor/controllers/instrumentationdevice/collectorsgroup_controller.go
+++ b/instrumentor/controllers/instrumentationdevice/collectorsgroup_controller.go
@@ -18,21 +18,28 @@ package instrumentationdevice
 
 import (
 	"context"
+	"errors"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
 
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
+	"sigs.k8s.io/controller-runtime/pkg/log"
 )
 
+// CollectorsGroupReconciler is responsible for reconciling the instrumented workloads
+// once the collectors group becomes ready - by adding the instrumentation device to the workloads.
+// This is necessary to ensure that we won't instrument any workload before the
+// node collectors are ready to receive the data.
 type CollectorsGroupReconciler struct {
 	client.Client
 	Scheme *runtime.Scheme
 }
 
 func (r *CollectorsGroupReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
-
+	logger := log.FromContext(ctx)
 	isDataCollectionReady := isDataCollectionReady(ctx, r.Client)
 
 	var instApps odigosv1.InstrumentedApplicationList
@@ -40,12 +47,38 @@ func (r *CollectorsGroupReconciler) Reconcile(ctx context.Context, req ctrl.Requ
 		return ctrl.Result{}, err
 	}
 
+	logger.V(0).Info("Reconciling instrumented applications after node collectors group became ready", "count", len(instApps.Items))
+
+	var reconcileErr error
+	var gotConflict bool
+
 	for _, runtimeDetails := range instApps.Items {
-		err := reconcileSingleWorkload(ctx, r.Client, &runtimeDetails, isDataCollectionReady)
+		var currentInstApp odigosv1.InstrumentedApplication
+		err := r.Get(ctx, client.ObjectKey{Namespace: runtimeDetails.Namespace, Name: runtimeDetails.Name}, &currentInstApp)
+		if apierrors.IsNotFound(err) {
+			// the loop can take time, so the instrumented application might get deleted
+			// in the meantime, so we ignore the error
+			continue
+		}
+
 		if err != nil {
-			return ctrl.Result{}, err
+			reconcileErr = errors.Join(reconcileErr, err)
+			continue
+		}
+
+		err = reconcileSingleWorkload(ctx, r.Client, &currentInstApp, isDataCollectionReady)
+		if err != nil {
+			if apierrors.IsConflict(err) {
+				gotConflict = true
+			}
+			reconcileErr = errors.Join(reconcileErr, err)
 		}
 	}
 
-	return ctrl.Result{}, nil
+	if gotConflict && reconcileErr == nil {
+		// if we got a conflict and no other error, we will request a requeue and not return an error
+		// so we can retry the reconciliation but not have logs filled with errors
+		return ctrl.Result{Requeue: true}, nil
+	}
+	return ctrl.Result{}, reconcileErr
 }
diff --git a/instrumentor/controllers/instrumentationdevice/common.go b/instrumentor/controllers/instrumentationdevice/common.go
index 035c07341..64766ca96 100644
--- a/instrumentor/controllers/instrumentationdevice/common.go
+++ b/instrumentor/controllers/instrumentationdevice/common.go
@@ -5,16 +5,17 @@ import (
 	"errors"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/instrumentor/controllers/utils"
 	"github.com/odigos-io/odigos/instrumentor/controllers/utils/versionsupport"
 	"github.com/odigos-io/odigos/instrumentor/instrumentation"
+	"github.com/odigos-io/odigos/instrumentor/sdks"
 	"github.com/odigos-io/odigos/k8sutils/pkg/conditions"
+	odigosk8sconsts "github.com/odigos-io/odigos/k8sutils/pkg/consts"
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
-	k8sutils "github.com/odigos-io/odigos/k8sutils/pkg/utils"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 	"sigs.k8s.io/controller-runtime/pkg/controller/controllerutil"
@@ -35,45 +36,42 @@ const (
 	appliedInstrumentationDeviceType = "AppliedInstrumentationDevice"
 )
 
-func clearInstrumentationEbpf(obj client.Object) {
-	annotations := obj.GetAnnotations()
-	if annotations == nil {
-		return
-	}
-
-	delete(annotations, consts.EbpfInstrumentationAnnotation)
-}
+var (
+	// can be overridden in tests
+	GetDefaultSDKs = sdks.GetDefaultSDKs
+)
 
 func isDataCollectionReady(ctx context.Context, c client.Client) bool {
 	logger := log.FromContext(ctx)
-	var collectorGroups odigosv1.CollectorsGroupList
-	err := c.List(ctx, &collectorGroups, client.InNamespace(env.GetCurrentNamespace()))
-	if err != nil {
-		logger.Error(err, "error getting collectors groups, skipping instrumentation")
-		return false
-	}
 
-	for _, cg := range collectorGroups.Items {
-		// up until v1.0.31, the collectors group role names were "GATEWAY" and "DATA_COLLECTION".
-		// in v1.0.32, the role names were changed to "CLUSTER_GATEWAY" and "NODE_COLLECTOR",
-		// due to adding the Processor CRD which uses these role names.
-		// the new names are more descriptive and are preparations for future roles.
-		// the check for "DATA_COLLECTION" is a temporary support for users that upgrade from <=v1.0.31 to >=v1.0.32.
-		// once we drop support for <=v1.0.31, we can remove this comparison.
-		if (cg.Spec.Role == odigosv1.CollectorsGroupRoleNodeCollector || cg.Spec.Role == "DATA_COLLECTION") && cg.Status.Ready {
-			return true
+	nodeCollectorsGroup := odigosv1.CollectorsGroup{}
+	err := c.Get(ctx, client.ObjectKey{
+		Namespace: env.GetCurrentNamespace(),
+		Name:      odigosk8sconsts.OdigosNodeCollectorCollectorGroupName,
+	}, &nodeCollectorsGroup)
+
+	if err != nil {
+		if apierrors.IsNotFound(err) {
+			// if node collector is not yet created, then it is not ready
+			return false
+		} else {
+			logger.Error(err, "error getting node collector group, skipping instrumentation")
+			return false
 		}
 	}
 
-	return false
+	return nodeCollectorsGroup.Status.Ready
 }
 
-func addInstrumentationDeviceToWorkload(ctx context.Context, kubeClient client.Client, runtimeDetails *odigosv1.InstrumentedApplication) error {
+func addInstrumentationDeviceToWorkload(ctx context.Context, kubeClient client.Client, runtimeDetails *odigosv1.InstrumentedApplication) (error, bool) {
+
+	// devicePartiallyApplied is used to indicate that the instrumentation device was partially applied for some of the containers.
+	devicePartiallyApplied := false
 
 	logger := log.FromContext(ctx)
 	obj, err := getWorkloadObject(ctx, kubeClient, runtimeDetails)
 	if err != nil {
-		return err
+		return err, false
 	}
 
 	workload := workload.PodWorkload{
@@ -82,20 +80,16 @@ func addInstrumentationDeviceToWorkload(ctx context.Context, kubeClient client.C
 		Kind:      workload.WorkloadKind(obj.GetObjectKind().GroupVersionKind().Kind),
 	}
 
-	odigosConfig, err := k8sutils.GetCurrentOdigosConfig(ctx, kubeClient)
-	if err != nil {
-		return err
-	}
-
 	// build an otel sdk map from instrumentation rules first, and merge it with the default otel sdk map
 	// this way, we can override the default otel sdk with the instrumentation rules
 	instrumentationRules := odigosv1.InstrumentationRuleList{}
 	err = kubeClient.List(ctx, &instrumentationRules)
 	if err != nil {
-		return err
+		return err, false
 	}
 
-	otelSdkToUse := odigosConfig.DefaultSDKs
+	// default otel sdk map according to Odigos tier
+	otelSdkToUse := GetDefaultSDKs()
 
 	for i := range instrumentationRules.Items {
 		instrumentationRule := &instrumentationRules.Items[i]
@@ -123,11 +117,22 @@ func addInstrumentationDeviceToWorkload(ctx context.Context, kubeClient client.C
 			return err
 		}
 
-		return instrumentation.ApplyInstrumentationDevicesToPodTemplate(podSpec, runtimeDetails, otelSdkToUse, obj)
+		err, deviceApplied, tempDevicePartiallyApplied := instrumentation.ApplyInstrumentationDevicesToPodTemplate(podSpec, runtimeDetails, otelSdkToUse, obj, logger)
+		if err != nil {
+			return err
+		}
+
+		devicePartiallyApplied = tempDevicePartiallyApplied
+		// If instrumentation device is applied successfully, add odigos.io/inject-instrumentation label to enable the webhook
+		if deviceApplied {
+			instrumentation.SetInjectInstrumentationLabel(podSpec)
+		}
+
+		return nil
 	})
 
 	if err != nil {
-		return err
+		return err, false
 	}
 
 	modified := result != controllerutil.OperationResultNone
@@ -135,7 +140,7 @@ func addInstrumentationDeviceToWorkload(ctx context.Context, kubeClient client.C
 		logger.V(0).Info("added instrumentation device to workload", "name", obj.GetName(), "namespace", obj.GetNamespace())
 	}
 
-	return nil
+	return nil, devicePartiallyApplied
 }
 
 func removeInstrumentationDeviceFromWorkload(ctx context.Context, kubeClient client.Client, namespace string, workloadKind workload.WorkloadKind, workloadName string, uninstrumentReason ApplyInstrumentationDeviceReason) error {
@@ -153,32 +158,32 @@ func removeInstrumentationDeviceFromWorkload(ctx context.Context, kubeClient cli
 		return client.IgnoreNotFound(err)
 	}
 
-	result, err := controllerutil.CreateOrPatch(ctx, kubeClient, workloadObj, func() error {
-
-		// clear old ebpf instrumentation annotation, just in case it still exists
-		clearInstrumentationEbpf(workloadObj)
-		podSpec, err := getPodSpecFromObject(workloadObj)
-		if err != nil {
-			return err
-		}
+	podSpec, err := getPodSpecFromObject(workloadObj)
+	if err != nil {
+		return err
+	}
+	// If instrumentation device is removed successfully, remove odigos.io/inject-instrumentation label to disable the webhook
+	webhookLabelRemoved := instrumentation.RemoveInjectInstrumentationLabel(podSpec)
+	deviceRemoved := instrumentation.RevertInstrumentationDevices(podSpec)
+	envChanged, err := instrumentation.RevertEnvOverwrites(workloadObj, podSpec)
+	if err != nil {
+		return err
+	}
 
-		instrumentation.RevertInstrumentationDevices(podSpec)
-		err = instrumentation.RevertEnvOverwrites(workloadObj, podSpec)
-		if err != nil {
-			return err
-		}
+	// if we didn't change anything, we don't need to update the object
+	// skip the api-server call, return no-op and skip the log message
+	if !webhookLabelRemoved && !deviceRemoved && !envChanged {
 		return nil
-	})
+	}
 
+	err = kubeClient.Update(ctx, workloadObj)
 	if err != nil {
+		// if the update fails due to a conflict, the controller will retry the operation
 		return err
 	}
 
-	modified := result != controllerutil.OperationResultNone
-	if modified {
-		logger := log.FromContext(ctx)
-		logger.V(0).Info("removed instrumentation device from workload", "namespace", workloadObj.GetNamespace(), "kind", workloadObj.GetObjectKind(), "name", workloadObj.GetName(), "reason", uninstrumentReason)
-	}
+	logger := log.FromContext(ctx)
+	logger.V(0).Info("removed instrumentation device from workload", "namespace", workloadObj.GetNamespace(), "kind", workloadObj.GetObjectKind(), "name", workloadObj.GetName(), "reason", uninstrumentReason)
 
 	return nil
 }
@@ -259,9 +264,15 @@ func reconcileSingleWorkload(ctx context.Context, kubeClient client.Client, inst
 		return nil
 	}
 
-	err = addInstrumentationDeviceToWorkload(ctx, kubeClient, instrumentedApplication)
+	err, devicePartiallyApplied := addInstrumentationDeviceToWorkload(ctx, kubeClient, instrumentedApplication)
 	if err == nil {
-		conditions.UpdateStatusConditions(ctx, kubeClient, instrumentedApplication, &instrumentedApplication.Status.Conditions, metav1.ConditionTrue, appliedInstrumentationDeviceType, "InstrumentationDeviceApplied", "Instrumentation device applied successfully")
+		var successMessage string
+		if devicePartiallyApplied {
+			successMessage = "Instrumentation device partially applied"
+		} else {
+			successMessage = "Instrumentation device applied successfully"
+		}
+		conditions.UpdateStatusConditions(ctx, kubeClient, instrumentedApplication, &instrumentedApplication.Status.Conditions, metav1.ConditionTrue, appliedInstrumentationDeviceType, "InstrumentationDeviceApplied", successMessage)
 	} else {
 		conditions.UpdateStatusConditions(ctx, kubeClient, instrumentedApplication, &instrumentedApplication.Status.Conditions, metav1.ConditionFalse, appliedInstrumentationDeviceType, string(ApplyInstrumentationDeviceReasonErrApplying), err.Error())
 	}
diff --git a/instrumentor/controllers/instrumentationdevice/envoverwiter_test.go b/instrumentor/controllers/instrumentationdevice/envoverwiter_test.go
index 54815bb96..5d57e8bc0 100644
--- a/instrumentor/controllers/instrumentationdevice/envoverwiter_test.go
+++ b/instrumentor/controllers/instrumentationdevice/envoverwiter_test.go
@@ -4,6 +4,7 @@ import (
 	"context"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/api/odigos/v1alpha1/instrumentationrules"
 	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/common/envOverwrite"
@@ -14,25 +15,8 @@ import (
 	corev1 "k8s.io/api/core/v1"
 	"k8s.io/apimachinery/pkg/types"
 	"sigs.k8s.io/controller-runtime/pkg/client"
-	"sigs.k8s.io/yaml"
 )
 
-func GetOdigosConfig(configMap *corev1.ConfigMap, odigosConfig *common.OdigosConfiguration) error {
-	if err := yaml.Unmarshal([]byte(configMap.Data[consts.OdigosConfigurationFileName]), &odigosConfig); err != nil {
-		return err
-	}
-	return nil
-}
-
-func SetOdigosConfig(configMap *corev1.ConfigMap, odigosConfig *common.OdigosConfiguration) error {
-	data, err := yaml.Marshal(odigosConfig)
-	if err != nil {
-		return err
-	}
-	configMap.Data[consts.OdigosConfigurationFileName] = string(data)
-	return nil
-}
-
 var _ = Describe("envoverwrite", func() {
 	ctx := context.Background()
 	var namespace *corev1.Namespace
@@ -56,14 +40,8 @@ var _ = Describe("envoverwrite", func() {
 	})
 
 	AfterEach(func() {
-		// restore odigos config to it's original state
-		var cm corev1.ConfigMap
-		var odigosConfig common.OdigosConfiguration
-		Expect(k8sClient.Get(ctx, types.NamespacedName{Namespace: consts.DefaultOdigosNamespace, Name: consts.OdigosConfigurationName}, &cm)).Should(Succeed())
-		GetOdigosConfig(&cm, &odigosConfig)
-		odigosConfig.DefaultSDKs[testProgrammingLanguagePython] = common.OtelSdkNativeCommunity
-		SetOdigosConfig(&cm, &odigosConfig)
-		Expect(k8sClient.Update(ctx, &cm)).Should(Succeed())
+		// restore to the default SDK
+		testutil.SetDefaultSDK(testProgrammingLanguagePython, common.OtelSdkNativeCommunity)
 	})
 
 	Describe("User did not set env in manifest or docker image", func() {
@@ -150,13 +128,7 @@ var _ = Describe("envoverwrite", func() {
 
 		It("Should not add the unrelated env vars with different otel SDKs", func() {
 			// make the SDK for python and java different
-			var cm corev1.ConfigMap
-			var odigosConfig common.OdigosConfiguration
-			Expect(k8sClient.Get(ctx, types.NamespacedName{Namespace: consts.DefaultOdigosNamespace, Name: consts.OdigosConfigurationName}, &cm)).Should(Succeed())
-			GetOdigosConfig(&cm, &odigosConfig)
-			odigosConfig.DefaultSDKs[common.JavaProgrammingLanguage] = common.OtelSdkEbpfEnterprise
-			SetOdigosConfig(&cm, &odigosConfig)
-			Expect(k8sClient.Update(ctx, &cm)).Should(Succeed())
+			testutil.SetDefaultSDK(common.JavaProgrammingLanguage, common.OtelSdkEbpfEnterprise)
 
 			instrumentedApplication = testutil.SetInstrumentedApplicationContainer(testutil.NewMockInstrumentedApplication(deployment), &testEnvVarPythonPath, &userEnvValue, common.JavaProgrammingLanguage)
 			Expect(k8sClient.Create(ctx, instrumentedApplication)).Should(Succeed())
@@ -230,15 +202,25 @@ var _ = Describe("envoverwrite", func() {
 
 		When("Default SDK changes to another SDK", func() {
 			newSdk := common.OtelSdkEbpfEnterprise
+			const ruleName = "test-instrumentation-rule"
 
 			BeforeEach(func() {
-				var cm corev1.ConfigMap
-				var odigosConfig common.OdigosConfiguration
-				Expect(k8sClient.Get(ctx, types.NamespacedName{Namespace: consts.DefaultOdigosNamespace, Name: consts.OdigosConfigurationName}, &cm)).Should(Succeed())
-				GetOdigosConfig(&cm, &odigosConfig)
-				odigosConfig.DefaultSDKs[testProgrammingLanguagePython] = newSdk
-				SetOdigosConfig(&cm, &odigosConfig)
-				Expect(k8sClient.Update(ctx, &cm)).Should(Succeed())
+				// change the default SDK to another SDK by creating a rule
+				rule := testutil.NewMockEmptyInstrumentationRule(ruleName, consts.DefaultOdigosNamespace)
+				Expect(k8sClient.Create(ctx, rule)).Should(Succeed())
+				rule.Spec.OtelSdks = &instrumentationrules.OtelSdks{
+					OtelSdkByLanguage: map[common.ProgrammingLanguage]common.OtelSdk{
+						testProgrammingLanguagePython: newSdk,
+					},
+				}
+				Expect(k8sClient.Update(ctx, rule)).Should(Succeed())
+			})
+
+			AfterEach(func() {
+				// revert the default SDK back to the original value by deleting the rule
+				var rule odigosv1.InstrumentationRule
+				Expect(k8sClient.Get(ctx, types.NamespacedName{Name: ruleName, Namespace: consts.DefaultOdigosNamespace}, &rule)).Should(Succeed())
+				Expect(k8sClient.Delete(ctx, &rule)).Should(Succeed())
 			})
 
 			It("Should update the manifest with new odigos env value", func() {
@@ -246,7 +228,7 @@ var _ = Describe("envoverwrite", func() {
 				Expect(found).Should(BeTrue())
 				newMergedEnvValue := userEnvValue + ":" + newOdigosValue
 
-				// after the odigos config is updated, the deployment should be updated with the new odigos value
+				// after the SDK is updated, the deployment should be updated with the new odigos value
 				testutil.AssertDepContainerSingleEnv(ctx, k8sClient, deployment, testEnvVarPythonPath, newMergedEnvValue)
 
 				// when uninstrumented, the value should be reverted to the original value which was in the manifest
diff --git a/instrumentor/controllers/instrumentationdevice/instrumentationrule_controller.go b/instrumentor/controllers/instrumentationdevice/instrumentationrule_controller.go
index 9c73535ae..a6e2cf6c7 100644
--- a/instrumentor/controllers/instrumentationdevice/instrumentationrule_controller.go
+++ b/instrumentor/controllers/instrumentationdevice/instrumentationrule_controller.go
@@ -4,6 +4,7 @@ import (
 	"context"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
@@ -23,15 +24,24 @@ func (r *InstrumentationRuleReconciler) Reconcile(ctx context.Context, req ctrl.
 	}
 	isNodeCollectorReady := isDataCollectionReady(ctx, r.Client)
 
+	gotConflict := false
 	for _, runtimeDetails := range instApps.Items {
 		err := reconcileSingleWorkload(ctx, r.Client, &runtimeDetails, isNodeCollectorReady)
 		if err != nil {
-			return ctrl.Result{}, err
+			if apierrors.IsConflict(err) {
+				gotConflict = true
+			} else {
+				return ctrl.Result{}, err
+			}
 		}
 	}
 
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("InstrumentationRule changed, recalculating instrumentation device for potential changes of otel sdks")
 
-	return ctrl.Result{}, nil
+	if gotConflict {
+		return ctrl.Result{Requeue: true}, nil
+	} else {
+		return ctrl.Result{}, nil
+	}
 }
diff --git a/instrumentor/controllers/instrumentationdevice/instrumentedapplication_controller.go b/instrumentor/controllers/instrumentationdevice/instrumentedapplication_controller.go
index 1a9693493..a3143ccb7 100644
--- a/instrumentor/controllers/instrumentationdevice/instrumentedapplication_controller.go
+++ b/instrumentor/controllers/instrumentationdevice/instrumentedapplication_controller.go
@@ -20,6 +20,7 @@ import (
 	"context"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/k8sutils/pkg/utils"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	"k8s.io/apimachinery/pkg/runtime"
@@ -52,15 +53,10 @@ func (r *InstrumentedApplicationReconciler) Reconcile(ctx context.Context, req c
 			return ctrl.Result{}, err
 		}
 		err = removeInstrumentationDeviceFromWorkload(ctx, r.Client, req.Namespace, workloadKind, workloadName, ApplyInstrumentationDeviceReasonNoRuntimeDetails)
-		if err != nil {
-			logger.Error(err, "error removing instrumentation")
-			return ctrl.Result{}, err
-		}
-
-		return ctrl.Result{}, nil
+		return utils.RetryOnConflict(err)
 	}
 
 	isNodeCollectorReady := isDataCollectionReady(ctx, r.Client)
 	err = reconcileSingleWorkload(ctx, r.Client, &runtimeDetails, isNodeCollectorReady)
-	return ctrl.Result{}, err
+	return utils.RetryOnConflict(err)
 }
diff --git a/instrumentor/controllers/instrumentationdevice/manager.go b/instrumentor/controllers/instrumentationdevice/manager.go
index 8b37b0015..e06e5cd57 100644
--- a/instrumentor/controllers/instrumentationdevice/manager.go
+++ b/instrumentor/controllers/instrumentationdevice/manager.go
@@ -4,6 +4,7 @@ import (
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/instrumentor/controllers/utils"
+	odigospredicate "github.com/odigos-io/odigos/k8sutils/pkg/predicate"
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
 	ctrl "sigs.k8s.io/controller-runtime"
@@ -27,7 +28,12 @@ type workloadPodTemplatePredicate struct {
 }
 
 func (w workloadPodTemplatePredicate) Create(e event.CreateEvent) bool {
-	return false
+	// when instrumentor restarts, this case will be triggered as workloads objects are being added to the cache.
+	// in this case, we need to reconcile the workload, and guarantee that the device is injected or removed
+	// based on the current state of the cluster.
+	// if the instrumented application is deleted but the device is not cleaned,
+	// the instrumented application controller will not be invoked after restart, which is why we need to handle this case here.
+	return true
 }
 
 func (w workloadPodTemplatePredicate) Update(e event.UpdateEvent) bool {
@@ -85,6 +91,7 @@ func SetupWithManager(mgr ctrl.Manager) error {
 		ControllerManagedBy(mgr).
 		Named("instrumentationdevice-collectorsgroup").
 		For(&odigosv1.CollectorsGroup{}).
+		WithEventFilter(predicate.And(&odigospredicate.OdigosCollectorsGroupNodePredicate, &odigospredicate.CgBecomesReadyPredicate{})).
 		Complete(&CollectorsGroupReconciler{
 			Client: mgr.GetClient(),
 			Scheme: mgr.GetScheme(),
@@ -97,6 +104,7 @@ func SetupWithManager(mgr ctrl.Manager) error {
 		ControllerManagedBy(mgr).
 		Named("instrumentationdevice-instrumentedapplication").
 		For(&odigosv1.InstrumentedApplication{}).
+		WithEventFilter(&predicate.GenerationChangedPredicate{}).
 		Complete(&InstrumentedApplicationReconciler{
 			Client: mgr.GetClient(),
 			Scheme: mgr.GetScheme(),
@@ -105,19 +113,6 @@ func SetupWithManager(mgr ctrl.Manager) error {
 		return err
 	}
 
-	err = builder.
-		ControllerManagedBy(mgr).
-		Named("instrumentationdevice-configmaps").
-		For(&corev1.ConfigMap{}).
-		WithEventFilter(&utils.OnlyUpdatesPredicate{}).
-		Complete(&OdigosConfigReconciler{
-			Client: mgr.GetClient(),
-			Scheme: mgr.GetScheme(),
-		})
-	if err != nil {
-		return err
-	}
-
 	err = builder.
 		ControllerManagedBy(mgr).
 		Named("instrumentationdevice-deployment").
diff --git a/instrumentor/controllers/instrumentationdevice/odigosconfig_contoller.go b/instrumentor/controllers/instrumentationdevice/odigosconfig_contoller.go
deleted file mode 100644
index 9d98ab163..000000000
--- a/instrumentor/controllers/instrumentationdevice/odigosconfig_contoller.go
+++ /dev/null
@@ -1,44 +0,0 @@
-package instrumentationdevice
-
-import (
-	"context"
-
-	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"k8s.io/apimachinery/pkg/runtime"
-	ctrl "sigs.k8s.io/controller-runtime"
-	"sigs.k8s.io/controller-runtime/pkg/client"
-	"sigs.k8s.io/controller-runtime/pkg/log"
-)
-
-type OdigosConfigReconciler struct {
-	client.Client
-	Scheme *runtime.Scheme
-}
-
-// odigos config is used to determine the default SDKs to use for each language
-// when the config changes (for example, when upgrading from community to cloud tier)
-// we may need to re-calculate the instrumentation devices for existing workloads
-func (r *OdigosConfigReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
-	logger := log.FromContext(ctx)
-
-	// this might be overkill, but updating the odigos configuration should be very rare
-	// and we want to make sure we don't miss any instrumentation
-	// so we'll just re-instrument all instrumented applications
-	var instrumentedApplications odigosv1.InstrumentedApplicationList
-	err := r.Client.List(ctx, &instrumentedApplications)
-	if err != nil {
-		return ctrl.Result{}, err
-	}
-
-	isNodeCollectorReady := isDataCollectionReady(ctx, r.Client)
-	logger.Info("reconciling all instrumented applications on odigos config change", "numInstrumentedApplications", len(instrumentedApplications.Items))
-
-	for _, instrumentedApplication := range instrumentedApplications.Items {
-		err = reconcileSingleWorkload(ctx, r.Client, &instrumentedApplication, isNodeCollectorReady)
-		if err != nil {
-			return ctrl.Result{}, err
-		}
-	}
-
-	return ctrl.Result{}, nil
-}
diff --git a/instrumentor/controllers/instrumentationdevice/pods_webhook.go b/instrumentor/controllers/instrumentationdevice/pods_webhook.go
index cbf4f231c..af572cc60 100644
--- a/instrumentor/controllers/instrumentationdevice/pods_webhook.go
+++ b/instrumentor/controllers/instrumentationdevice/pods_webhook.go
@@ -6,18 +6,13 @@ import (
 	"strings"
 
 	common "github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
 	"sigs.k8s.io/controller-runtime/pkg/webhook"
 
 	corev1 "k8s.io/api/core/v1"
 	"k8s.io/apimachinery/pkg/runtime"
 )
 
-const (
-	EnvVarNamespace     = "ODIGOS_WORKLOAD_NAMESPACE"
-	EnvVarContainerName = "ODIGOS_CONTAINER_NAME"
-	EnvVarPodName       = "ODIGOS_POD_NAME"
-)
-
 type PodsWebhook struct{}
 
 var _ webhook.CustomDefaulter = &PodsWebhook{}
@@ -39,16 +34,19 @@ func (p *PodsWebhook) Default(ctx context.Context, obj runtime.Object) error {
 }
 
 func injectOdigosEnvVars(pod *corev1.Pod) {
-	namespace := pod.Namespace
 
 	// Common environment variables that do not change across containers
 	commonEnvVars := []corev1.EnvVar{
 		{
-			Name:  EnvVarNamespace,
-			Value: namespace,
+			Name:  consts.OdigosEnvVarNamespace,
+			ValueFrom: &corev1.EnvVarSource{
+				FieldRef: &corev1.ObjectFieldSelector{
+					FieldPath: "metadata.namespace",
+				},
+			},
 		},
 		{
-			Name: EnvVarPodName,
+			Name: consts.OdigosEnvVarPodName,
 			ValueFrom: &corev1.EnvVarSource{
 				FieldRef: &corev1.ObjectFieldSelector{
 					FieldPath: "metadata.name",
@@ -71,7 +69,7 @@ func injectOdigosEnvVars(pod *corev1.Pod) {
 		}
 
 		container.Env = append(container.Env, append(commonEnvVars, corev1.EnvVar{
-			Name:  EnvVarContainerName,
+			Name:  consts.OdigosEnvVarContainerName,
 			Value: container.Name,
 		})...)
 	}
diff --git a/instrumentor/controllers/instrumentationdevice/suite_test.go b/instrumentor/controllers/instrumentationdevice/suite_test.go
index c8caedc57..314fc1523 100644
--- a/instrumentor/controllers/instrumentationdevice/suite_test.go
+++ b/instrumentor/controllers/instrumentationdevice/suite_test.go
@@ -23,6 +23,7 @@ import (
 
 	"sigs.k8s.io/controller-runtime/pkg/webhook"
 
+	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/instrumentor/internal/testutil"
 	. "github.com/onsi/ginkgo"
 	. "github.com/onsi/gomega"
@@ -41,11 +42,12 @@ import (
 )
 
 var (
-	cfg       *rest.Config
-	k8sClient client.Client
-	testEnv   *envtest.Environment
-	testCtx   context.Context
-	cancel    context.CancelFunc
+	cfg                *rest.Config
+	k8sClient          client.Client
+	testEnv            *envtest.Environment
+	testCtx            context.Context
+	cancel             context.CancelFunc
+	origGetDefaultSDKs func() map[common.ProgrammingLanguage]common.OtelSdk
 )
 
 func TestControllers(t *testing.T) {
@@ -92,8 +94,8 @@ var _ = BeforeSuite(func() {
 	Expect(k8sClient.Status().Update(testCtx, datacollection)).Should(Succeed())
 
 	// create odigos configuration with default sdks
-	odigosConfiguration := testutil.NewMockOdigosConfig()
-	Expect(k8sClient.Create(testCtx, odigosConfiguration)).Should(Succeed())
+	origGetDefaultSDKs = instrumentationdevice.GetDefaultSDKs
+	instrumentationdevice.GetDefaultSDKs = testutil.MockGetDefaultSDKs
 
 	webhookInstallOptions := &testEnv.WebhookInstallOptions
 	k8sManager, err := ctrl.NewManager(cfg, ctrl.Options{
@@ -122,4 +124,5 @@ var _ = AfterSuite(func() {
 	By("tearing down the test environment")
 	err := testEnv.Stop()
 	Expect(err).NotTo(HaveOccurred())
+	instrumentationdevice.GetDefaultSDKs = origGetDefaultSDKs
 })
diff --git a/instrumentor/controllers/instrumentationdevice/workload_controllers.go b/instrumentor/controllers/instrumentationdevice/workload_controllers.go
index c9aac4293..f4c7769f1 100644
--- a/instrumentor/controllers/instrumentationdevice/workload_controllers.go
+++ b/instrumentor/controllers/instrumentationdevice/workload_controllers.go
@@ -4,7 +4,9 @@ import (
 	"context"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/k8sutils/pkg/utils"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	"k8s.io/apimachinery/pkg/types"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
@@ -17,7 +19,7 @@ type DeploymentReconciler struct {
 func (r *DeploymentReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
 	instrumentedAppName := workload.CalculateWorkloadRuntimeObjectName(req.Name, workload.WorkloadKindDeployment)
 	err := reconcileSingleInstrumentedApplicationByName(ctx, r.Client, instrumentedAppName, req.Namespace)
-	return ctrl.Result{}, err
+	return utils.RetryOnConflict(err)
 }
 
 type DaemonSetReconciler struct {
@@ -27,7 +29,7 @@ type DaemonSetReconciler struct {
 func (r *DaemonSetReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
 	instrumentedAppName := workload.CalculateWorkloadRuntimeObjectName(req.Name, workload.WorkloadKindDaemonSet)
 	err := reconcileSingleInstrumentedApplicationByName(ctx, r.Client, instrumentedAppName, req.Namespace)
-	return ctrl.Result{}, err
+	return utils.RetryOnConflict(err)
 }
 
 type StatefulSetReconciler struct {
@@ -37,16 +39,26 @@ type StatefulSetReconciler struct {
 func (r *StatefulSetReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
 	instrumentedAppName := workload.CalculateWorkloadRuntimeObjectName(req.Name, workload.WorkloadKindStatefulSet)
 	err := reconcileSingleInstrumentedApplicationByName(ctx, r.Client, instrumentedAppName, req.Namespace)
-	return ctrl.Result{}, err
+	return utils.RetryOnConflict(err)
 }
 
 func reconcileSingleInstrumentedApplicationByName(ctx context.Context, k8sClient client.Client, instrumentedAppName string, namespace string) error {
 	var instrumentedApplication odigosv1.InstrumentedApplication
 	err := k8sClient.Get(ctx, types.NamespacedName{Name: instrumentedAppName, Namespace: namespace}, &instrumentedApplication)
 	if err != nil {
-		// changes in workload when there is no instrumented application is not interesting
-		return client.IgnoreNotFound(err)
+		if apierrors.IsNotFound(err) {
+			// if there is no instrumented application, make sure the device is removed from the workload pod template manifest
+			workloadName, workloadKind, err := workload.ExtractWorkloadInfoFromRuntimeObjectName(instrumentedAppName)
+			if err != nil {
+				return err
+			}
+			err = removeInstrumentationDeviceFromWorkload(ctx, k8sClient, namespace, workloadKind, workloadName, ApplyInstrumentationDeviceReasonNoRuntimeDetails)
+			return err
+		} else {
+			return err
+		}
 	}
 	isNodeCollectorReady := isDataCollectionReady(ctx, k8sClient)
+
 	return reconcileSingleWorkload(ctx, k8sClient, &instrumentedApplication, isNodeCollectorReady)
 }
diff --git a/instrumentor/controllers/startlangdetection/manager.go b/instrumentor/controllers/startlangdetection/manager.go
index e39e88ad7..2be2646cd 100644
--- a/instrumentor/controllers/startlangdetection/manager.go
+++ b/instrumentor/controllers/startlangdetection/manager.go
@@ -1,11 +1,12 @@
 package startlangdetection
 
 import (
-	"github.com/odigos-io/odigos/instrumentor/controllers/utils"
+	odigospredicate "github.com/odigos-io/odigos/k8sutils/pkg/predicate"
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/builder"
+	"sigs.k8s.io/controller-runtime/pkg/predicate"
 )
 
 func SetupWithManager(mgr ctrl.Manager) error {
@@ -64,7 +65,7 @@ func SetupWithManager(mgr ctrl.Manager) error {
 		ControllerManagedBy(mgr).
 		Named("startlangdetection-configmaps").
 		For(&corev1.ConfigMap{}).
-		WithEventFilter(&utils.OnlyUpdatesPredicate{}).
+		WithEventFilter(predicate.And(odigospredicate.OdigosConfigMapPredicate, odigospredicate.ConfigMapDataChangedPredicate{})).
 		Complete(&OdigosConfigReconciler{
 			Client: mgr.GetClient(),
 			Scheme: mgr.GetScheme(),
diff --git a/instrumentor/controllers/startlangdetection/odigosconfig_controller.go b/instrumentor/controllers/startlangdetection/odigosconfig_controller.go
index 68b698f81..e68415142 100644
--- a/instrumentor/controllers/startlangdetection/odigosconfig_controller.go
+++ b/instrumentor/controllers/startlangdetection/odigosconfig_controller.go
@@ -6,18 +6,23 @@ import (
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 
 	appsv1 "k8s.io/api/apps/v1"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	"k8s.io/apimachinery/pkg/runtime"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 	"sigs.k8s.io/controller-runtime/pkg/log"
 )
 
+// This reconiler is responsible for recalculating the instrumented application for potential changes of ignored container list,
+// and trigger runtime detection.
 type OdigosConfigReconciler struct {
 	client.Client
 	Scheme *runtime.Scheme
 }
 
 func (r *OdigosConfigReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
+	// TODO: this logic can be improved by iterating over the instrumentation configs and marking the invalidate flag
+	// we currently no changing this logic because all the runtime detection logic is still under development
 	logger := log.FromContext(ctx)
 	logger.V(0).Info("Odigos Configuration changed, recalculating instrumentated application for potential changes of ignored container list")
 
@@ -29,12 +34,9 @@ func (r *OdigosConfigReconciler) Reconcile(ctx context.Context, req ctrl.Request
 	}
 
 	for _, dep := range deps.Items {
-		if !workload.IsInstrumentationDisabledExplicitly(&dep) {
-			req := ctrl.Request{NamespacedName: client.ObjectKey{Name: dep.Name, Namespace: dep.Namespace}}
-			_, err = reconcileWorkload(ctx, r.Client, &appsv1.Deployment{}, workload.WorkloadKindDeployment, req, r.Scheme)
-			if err != nil {
-				logger.Error(err, "error requesting runtime details from odiglets", "name", dep.Name, "namespace", dep.Namespace)
-			}
+		err := r.reconcileUnDisabledFreshWorkload(ctx, workload.WorkloadKindDeployment, client.ObjectKey{Name: dep.Name, Namespace: dep.Namespace})
+		if err != nil {
+			logger.Error(err, "error requesting runtime details from odiglets", "name", dep.Name, "namespace", dep.Namespace)
 		}
 	}
 
@@ -46,12 +48,9 @@ func (r *OdigosConfigReconciler) Reconcile(ctx context.Context, req ctrl.Request
 	}
 
 	for _, st := range sts.Items {
-		if !workload.IsInstrumentationDisabledExplicitly(&st) {
-			req := ctrl.Request{NamespacedName: client.ObjectKey{Name: st.Name, Namespace: st.Namespace}}
-			_, err = reconcileWorkload(ctx, r.Client, &appsv1.StatefulSet{}, workload.WorkloadKindStatefulSet, req, r.Scheme)
-			if err != nil {
-				logger.Error(err, "error requesting runtime details from odiglets", "name", st.Name, "namespace", st.Namespace)
-			}
+		err := r.reconcileUnDisabledFreshWorkload(ctx, workload.WorkloadKindStatefulSet, client.ObjectKey{Name: st.Name, Namespace: st.Namespace})
+		if err != nil {
+			logger.Error(err, "error requesting runtime details from odiglets", "name", st.Name, "namespace", st.Namespace)
 		}
 	}
 
@@ -63,14 +62,35 @@ func (r *OdigosConfigReconciler) Reconcile(ctx context.Context, req ctrl.Request
 	}
 
 	for _, ds := range dss.Items {
-		if !workload.IsInstrumentationDisabledExplicitly(&ds) {
-			req := ctrl.Request{NamespacedName: client.ObjectKey{Name: ds.Name, Namespace: ds.Namespace}}
-			_, err = reconcileWorkload(ctx, r.Client, &appsv1.DaemonSet{}, workload.WorkloadKindDaemonSet, req, r.Scheme)
-			if err != nil {
-				logger.Error(err, "error requesting runtime details from odiglets", "name", ds.Name, "namespace", ds.Namespace)
-			}
+		err := r.reconcileUnDisabledFreshWorkload(ctx, workload.WorkloadKindDaemonSet, client.ObjectKey{Name: ds.Name, Namespace: ds.Namespace})
+		if err != nil {
+			logger.Error(err, "error requesting runtime details from odiglets", "name", ds.Name, "namespace", ds.Namespace)
 		}
 	}
 
 	return ctrl.Result{}, nil
 }
+
+func (r *OdigosConfigReconciler) reconcileUnDisabledFreshWorkload(ctx context.Context, kind workload.WorkloadKind, key client.ObjectKey) error {
+	// it is very important that we make the changes based on a fresh copy of the workload object
+	// if a list operation pulled in state and is now slowly iterating over it, we might be working with stale data
+	freshWorkloadCopy := workload.ClientObjectFromWorkloadKind(kind)
+	workloadGetErr := r.Client.Get(ctx, key, freshWorkloadCopy)
+	if workloadGetErr != nil {
+		if apierrors.IsNotFound(workloadGetErr) {
+			// if the workload been deleted, we don't need to do anything
+			return nil
+		} else {
+			return workloadGetErr
+		}
+	}
+
+	var err error
+	// a more accurate approach here might be to che
+	// if workload.IsWorkloadInstrumentationEffectiveEnabled
+	if !workload.IsInstrumentationDisabledExplicitly(freshWorkloadCopy) {
+		req := ctrl.Request{NamespacedName: key}
+		_, err = reconcileWorkload(ctx, r.Client, workload.ClientObjectFromWorkloadKind(kind), kind, req, r.Scheme)
+	}
+	return err
+}
diff --git a/instrumentor/controllers/utils/predicate.go b/instrumentor/controllers/utils/predicate.go
index ff22d24bb..896c6ab52 100644
--- a/instrumentor/controllers/utils/predicate.go
+++ b/instrumentor/controllers/utils/predicate.go
@@ -5,24 +5,6 @@ import (
 	"sigs.k8s.io/controller-runtime/pkg/event"
 )
 
-type OnlyUpdatesPredicate struct{}
-
-func (o OnlyUpdatesPredicate) Create(e event.CreateEvent) bool {
-	return false
-}
-
-func (i OnlyUpdatesPredicate) Update(e event.UpdateEvent) bool {
-	return true
-}
-
-func (i OnlyUpdatesPredicate) Delete(e event.DeleteEvent) bool {
-	return false
-}
-
-func (i OnlyUpdatesPredicate) Generic(e event.GenericEvent) bool {
-	return false
-}
-
 type OtelSdkInstrumentationRulePredicate struct{}
 
 func (o OtelSdkInstrumentationRulePredicate) Create(e event.CreateEvent) bool {
diff --git a/instrumentor/go.mod b/instrumentor/go.mod
index 59b90f079..dac99690f 100644
--- a/instrumentor/go.mod
+++ b/instrumentor/go.mod
@@ -3,6 +3,7 @@ module github.com/odigos-io/odigos/instrumentor
 go 1.22.0
 
 require (
+	github.com/go-logr/logr v1.4.2
 	github.com/google/uuid v1.6.0
 	github.com/hashicorp/go-version v1.7.0
 	github.com/odigos-io/odigos/api v0.0.0
@@ -22,7 +23,6 @@ require (
 	github.com/cenkalti/backoff/v4 v4.3.0 // indirect
 	github.com/fatih/color v1.10.0 // indirect
 	github.com/fxamacker/cbor/v2 v2.7.0 // indirect
-	github.com/go-logr/logr v1.4.2 // indirect
 	github.com/go-logr/stdr v1.2.2 // indirect
 	github.com/goccy/go-yaml v1.11.3 // indirect
 	github.com/grpc-ecosystem/grpc-gateway/v2 v2.20.0 // indirect
diff --git a/instrumentor/instrumentation/instrumentation.go b/instrumentor/instrumentation/instrumentation.go
index eae78c988..94b6803bf 100644
--- a/instrumentor/instrumentation/instrumentation.go
+++ b/instrumentor/instrumentation/instrumentation.go
@@ -5,11 +5,13 @@ import (
 	"fmt"
 	"strings"
 
+	"github.com/go-logr/logr"
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common/envOverwrite"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 
-	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/k8sutils/pkg/env"
 	"github.com/odigos-io/odigos/k8sutils/pkg/envoverwrite"
 	corev1 "k8s.io/api/core/v1"
 	"k8s.io/apimachinery/pkg/api/resource"
@@ -20,67 +22,97 @@ var (
 	ErrPatchEnvVars = errors.New("failed to patch env vars")
 )
 
-func ApplyInstrumentationDevicesToPodTemplate(original *corev1.PodTemplateSpec, runtimeDetails *odigosv1.InstrumentedApplication, defaultSdks map[common.ProgrammingLanguage]common.OtelSdk, targetObj client.Object) error {
+func ApplyInstrumentationDevicesToPodTemplate(original *corev1.PodTemplateSpec, runtimeDetails *odigosv1.InstrumentedApplication, defaultSdks map[common.ProgrammingLanguage]common.OtelSdk, targetObj client.Object,
+	logger logr.Logger) (error, bool, bool) {
 	// delete any existing instrumentation devices.
 	// this is necessary for example when migrating from community to enterprise,
 	// and we need to cleanup the community device before adding the enterprise one.
 	RevertInstrumentationDevices(original)
 
+	deviceApplied := false
+	deviceSkippedDueToOtherAgent := false
+	var modifiedContainers []corev1.Container
+
 	manifestEnvOriginal, err := envoverwrite.NewOrigWorkloadEnvValues(targetObj.GetAnnotations())
 	if err != nil {
-		return err
+		return err, deviceApplied, deviceSkippedDueToOtherAgent
 	}
 
-	var modifiedContainers []corev1.Container
 	for _, container := range original.Spec.Containers {
 		containerLanguage := getLanguageOfContainer(runtimeDetails, container.Name)
-		if containerLanguage == nil || *containerLanguage == common.UnknownProgrammingLanguage || *containerLanguage == common.IgnoredProgrammingLanguage || *containerLanguage == common.NginxProgrammingLanguage {
+		containerHaveOtherAgent := getContainerOtherAgents(runtimeDetails, container.Name)
+
+		// In case there is another agent in the container, we should not apply the instrumentation device.
+		if containerLanguage == common.PythonProgrammingLanguage && containerHaveOtherAgent != nil {
+			logger.Info("Python container has other agent, skip applying instrumentation device", "agent", containerHaveOtherAgent.Name, "container", container.Name)
+
+			// Not actually modifying the container, but we need to append it to the list.
+			modifiedContainers = append(modifiedContainers, container)
+			deviceSkippedDueToOtherAgent = true
+			continue
+
+		}
+		// handle containers with unknown language or ignored language
+		if containerLanguage == common.UnknownProgrammingLanguage || containerLanguage == common.IgnoredProgrammingLanguage || containerLanguage == common.NginxProgrammingLanguage {
 			// always patch the env vars, even if the language is unknown or ignored.
 			// this is necessary to sync the existing envs with the missing language if changed for any reason.
-			err = patchEnvVarsForContainer(runtimeDetails, &container, nil, *containerLanguage, manifestEnvOriginal)
+			err = patchEnvVarsForContainer(runtimeDetails, &container, nil, containerLanguage, manifestEnvOriginal)
 			if err != nil {
-				return fmt.Errorf("%w: %v", ErrPatchEnvVars, err)
+				return fmt.Errorf("%w: %v", ErrPatchEnvVars, err), deviceApplied, deviceSkippedDueToOtherAgent
 			}
 			modifiedContainers = append(modifiedContainers, container)
 			continue
 		}
 
-		otelSdk, found := defaultSdks[*containerLanguage]
+		// Find and apply the appropriate SDK for the container language.
+		otelSdk, found := defaultSdks[containerLanguage]
 		if !found {
-			return fmt.Errorf("%w for language: %s, container:%s", ErrNoDefaultSDK, *containerLanguage, container.Name)
+			return fmt.Errorf("%w for language: %s, container:%s", ErrNoDefaultSDK, containerLanguage, container.Name), deviceApplied, deviceSkippedDueToOtherAgent
 		}
 
-		instrumentationDeviceName := common.InstrumentationDeviceName(*containerLanguage, otelSdk)
-
+		instrumentationDeviceName := common.InstrumentationDeviceName(containerLanguage, otelSdk)
 		if container.Resources.Limits == nil {
 			container.Resources.Limits = make(map[corev1.ResourceName]resource.Quantity)
 		}
 		container.Resources.Limits[corev1.ResourceName(instrumentationDeviceName)] = resource.MustParse("1")
+		deviceApplied = true
 
-		err = patchEnvVarsForContainer(runtimeDetails, &container, &otelSdk, *containerLanguage, manifestEnvOriginal)
+		err = patchEnvVarsForContainer(runtimeDetails, &container, &otelSdk, containerLanguage, manifestEnvOriginal)
 		if err != nil {
-			return fmt.Errorf("%w: %v", ErrPatchEnvVars, err)
+			return fmt.Errorf("%w: %v", ErrPatchEnvVars, err), deviceApplied, deviceSkippedDueToOtherAgent
 		}
 
 		modifiedContainers = append(modifiedContainers, container)
 	}
 
-	original.Spec.Containers = modifiedContainers
+	if modifiedContainers != nil {
+		original.Spec.Containers = modifiedContainers
+	}
 
 	// persist the original values if changed
 	manifestEnvOriginal.SerializeToAnnotation(targetObj)
-	return nil
+
+	// if non of the devices were applied due to the presence of another agent, return an error.
+	if !deviceApplied && deviceSkippedDueToOtherAgent {
+		return fmt.Errorf("device not added to any container due to the presence of another agent"), false, deviceSkippedDueToOtherAgent
+	}
+
+	// devicePartiallyApplied is used to indicate that the instrumentation device was partially applied for some of the containers.
+	devicePartiallyApplied := deviceSkippedDueToOtherAgent && deviceApplied
+
+	return nil, deviceApplied, devicePartiallyApplied
 }
 
 // this function restores a workload manifest env vars to their original values.
 // it is used when the instrumentation is removed from the workload.
 // the original values are read from the annotation which was saved when the instrumentation was applied.
-func RevertEnvOverwrites(obj client.Object, podSpec *corev1.PodTemplateSpec) error {
+func RevertEnvOverwrites(obj client.Object, podSpec *corev1.PodTemplateSpec) (bool, error) {
 	manifestEnvOriginal, err := envoverwrite.NewOrigWorkloadEnvValues(obj.GetAnnotations())
 	if err != nil {
-		return err
+		return false, err
 	}
 
+	changed := false
 	for iContainer, c := range podSpec.Spec.Containers {
 		containerOriginalEnv := manifestEnvOriginal.GetContainerStoredEnvs(c.Name)
 		newContainerEnvs := make([]corev1.EnvVar, 0, len(c.Env))
@@ -96,6 +128,7 @@ func RevertEnvOverwrites(obj client.Object, podSpec *corev1.PodTemplateSpec) err
 					// if the value is nil, the env var was not set by the user to begin with.
 					// we will simply not append it to the new envs to achieve the same effect.
 				}
+				changed = true
 			} else {
 				newContainerEnvs = append(newContainerEnvs, envVar)
 			}
@@ -103,34 +136,49 @@ func RevertEnvOverwrites(obj client.Object, podSpec *corev1.PodTemplateSpec) err
 		podSpec.Spec.Containers[iContainer].Env = newContainerEnvs
 	}
 
-	manifestEnvOriginal.DeleteFromObj(obj)
+	annotationRemoved := manifestEnvOriginal.DeleteFromObj(obj)
 
-	return nil
+	return changed || annotationRemoved, nil
 }
 
-func RevertInstrumentationDevices(original *corev1.PodTemplateSpec) {
+func RevertInstrumentationDevices(original *corev1.PodTemplateSpec) bool {
+	changed := false
 	for _, container := range original.Spec.Containers {
 		for resourceName := range container.Resources.Limits {
 			if strings.HasPrefix(string(resourceName), common.OdigosResourceNamespace) {
 				delete(container.Resources.Limits, resourceName)
+				changed = true
 			}
 		}
 		// Is it needed?
 		for resourceName := range container.Resources.Requests {
 			if strings.HasPrefix(string(resourceName), common.OdigosResourceNamespace) {
 				delete(container.Resources.Requests, resourceName)
+				changed = true
 			}
 		}
 	}
+	return changed
 }
 
-func getLanguageOfContainer(instrumentation *odigosv1.InstrumentedApplication, containerName string) *common.ProgrammingLanguage {
+func getLanguageOfContainer(instrumentation *odigosv1.InstrumentedApplication, containerName string) common.ProgrammingLanguage {
 	for _, l := range instrumentation.Spec.RuntimeDetails {
 		if l.ContainerName == containerName {
-			return &l.Language
+			return l.Language
 		}
 	}
 
+	return common.UnknownProgrammingLanguage
+}
+
+func getContainerOtherAgents(instrumentation *odigosv1.InstrumentedApplication, containerName string) *odigosv1.OtherAgent {
+	for _, l := range instrumentation.Spec.RuntimeDetails {
+		if l.ContainerName == containerName {
+			if l.OtherAgent != nil && *l.OtherAgent != (odigosv1.OtherAgent{}) {
+				return l.OtherAgent
+			}
+		}
+	}
 	return nil
 }
 
@@ -218,3 +266,26 @@ func patchEnvVarsForContainer(runtimeDetails *odigosv1.InstrumentedApplication,
 
 	return nil
 }
+
+func SetInjectInstrumentationLabel(original *corev1.PodTemplateSpec) {
+	odigosTier := env.GetOdigosTierFromEnv()
+
+	// inject the instrumentation annotation for oss tier only
+	if odigosTier == common.CommunityOdigosTier {
+		if original.Labels == nil {
+			original.Labels = make(map[string]string)
+		}
+		original.Labels["odigos.io/inject-instrumentation"] = "true"
+	}
+}
+
+// RemoveInjectInstrumentationLabel removes the "odigos.io/inject-instrumentation" label if it exists.
+func RemoveInjectInstrumentationLabel(original *corev1.PodTemplateSpec) bool {
+	if original.Labels != nil {
+		if _, ok := original.Labels["odigos.io/inject-instrumentation"]; ok {
+			delete(original.Labels, "odigos.io/inject-instrumentation")
+			return true
+		}
+	}
+	return false
+}
diff --git a/instrumentor/internal/testutil/mocks.go b/instrumentor/internal/testutil/mocks.go
index 7d19e6ca8..946a61489 100644
--- a/instrumentor/internal/testutil/mocks.go
+++ b/instrumentor/internal/testutil/mocks.go
@@ -1,7 +1,6 @@
 package testutil
 
 import (
-	"encoding/json"
 	"fmt"
 
 	"github.com/google/uuid"
@@ -12,7 +11,6 @@ import (
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 	appsv1 "k8s.io/api/apps/v1"
 	corev1 "k8s.io/api/core/v1"
-	v1 "k8s.io/api/core/v1"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/client-go/kubernetes/scheme"
 	"sigs.k8s.io/controller-runtime/pkg/client"
@@ -26,6 +24,10 @@ const (
 	mockStatefulSetName = "test-statefulset"
 )
 
+var (
+	mockDefaultSDKs = map[common.ProgrammingLanguage]common.OtelSdk{}
+)
+
 func NewOdigosSystemNamespace() *corev1.Namespace {
 	return &corev1.Namespace{
 		ObjectMeta: metav1.ObjectMeta{
@@ -152,37 +154,24 @@ func NewMockInstrumentedApplication(workloadObject client.Object) *odigosv1.Inst
 	}
 }
 
-func NewMockDataCollection() *odigosv1.CollectorsGroup {
-	return &odigosv1.CollectorsGroup{
+func NewMockEmptyInstrumentationRule(name, ns string) *odigosv1.InstrumentationRule {
+	return &odigosv1.InstrumentationRule{
 		ObjectMeta: metav1.ObjectMeta{
-			Name:      k8sconsts.OdigosNodeCollectorDaemonSetName,
-			Namespace: consts.DefaultOdigosNamespace,
-		},
-		Spec: odigosv1.CollectorsGroupSpec{
-			Role: odigosv1.CollectorsGroupRoleNodeCollector,
+			Name:      name,
+			Namespace: ns,
 		},
+		Spec: odigosv1.InstrumentationRuleSpec{},
 	}
 }
 
-func NewMockOdigosConfig() *v1.ConfigMap {
-	config, _ := json.Marshal(common.OdigosConfiguration{
-		DefaultSDKs: map[common.ProgrammingLanguage]common.OtelSdk{
-			common.PythonProgrammingLanguage: common.OtelSdkNativeCommunity,
-			common.GoProgrammingLanguage:     common.OtelSdkNativeCommunity,
-		},
-	})
-
-	return &v1.ConfigMap{
-		TypeMeta: metav1.TypeMeta{
-			Kind:       "ConfigMap",
-			APIVersion: "v1",
-		},
+func NewMockDataCollection() *odigosv1.CollectorsGroup {
+	return &odigosv1.CollectorsGroup{
 		ObjectMeta: metav1.ObjectMeta{
-			Name:      consts.OdigosConfigurationName,
+			Name:      k8sconsts.OdigosNodeCollectorDaemonSetName,
 			Namespace: consts.DefaultOdigosNamespace,
 		},
-		Data: map[string]string{
-			consts.OdigosConfigurationFileName: string(config),
+		Spec: odigosv1.CollectorsGroupSpec{
+			Role: odigosv1.CollectorsGroupRoleNodeCollector,
 		},
 	}
 }
@@ -192,3 +181,11 @@ func NewMockOdigosConfig() *v1.ConfigMap {
 func generateUUIDNamespace(baseName string) string {
 	return fmt.Sprintf("%s-%s", baseName, uuid.New().String())
 }
+
+func MockGetDefaultSDKs() map[common.ProgrammingLanguage]common.OtelSdk {
+	return mockDefaultSDKs
+}
+
+func SetDefaultSDK(language common.ProgrammingLanguage, sdk common.OtelSdk) {
+	mockDefaultSDKs[language] = sdk
+}
diff --git a/instrumentor/main.go b/instrumentor/main.go
index 67a9494b9..0460a6322 100644
--- a/instrumentor/main.go
+++ b/instrumentor/main.go
@@ -24,17 +24,13 @@ import (
 
 	"github.com/odigos-io/odigos/instrumentor/controllers/instrumentationconfig"
 	"github.com/odigos-io/odigos/instrumentor/controllers/startlangdetection"
-
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"github.com/odigos-io/odigos/instrumentor/sdks"
 
 	corev1 "k8s.io/api/core/v1"
 
-	"github.com/odigos-io/odigos/common/consts"
-	appsv1 "k8s.io/api/apps/v1"
-	"k8s.io/apimachinery/pkg/labels"
-
 	"sigs.k8s.io/controller-runtime/pkg/cache"
 	"sigs.k8s.io/controller-runtime/pkg/client"
+	"sigs.k8s.io/controller-runtime/pkg/manager/signals"
 	"sigs.k8s.io/controller-runtime/pkg/webhook"
 
 	metricsserver "sigs.k8s.io/controller-runtime/pkg/metrics/server"
@@ -51,11 +47,11 @@ import (
 
 	// Import all Kubernetes client auth plugins (e.g. Azure, GCP, OIDC, etc.)
 	// to ensure that exec-entrypoint and run can make use of them.
-	_ "k8s.io/client-go/plugin/pkg/client/auth"
 
 	"k8s.io/apimachinery/pkg/runtime"
 	utilruntime "k8s.io/apimachinery/pkg/util/runtime"
 	clientgoscheme "k8s.io/client-go/kubernetes/scheme"
+	_ "k8s.io/client-go/plugin/pkg/client/auth"
 	ctrl "sigs.k8s.io/controller-runtime"
 	"sigs.k8s.io/controller-runtime/pkg/healthz"
 	ctrlzap "sigs.k8s.io/controller-runtime/pkg/log/zap"
@@ -114,66 +110,6 @@ func main() {
 			// Store minimum amount of data for every object type.
 			// Currently, instrumentor only need the labels and the .spec.template.spec field of the workloads.
 			ByObject: map[client.Object]cache.ByObject{
-				&appsv1.Deployment{}: {
-					Transform: func(obj interface{}) (interface{}, error) {
-						deployment := obj.(*appsv1.Deployment)
-						newDep := &appsv1.Deployment{
-							TypeMeta: deployment.TypeMeta,
-							ObjectMeta: metav1.ObjectMeta{
-								Name:        deployment.Name,
-								Namespace:   deployment.Namespace,
-								Labels:      deployment.Labels,
-								Annotations: deployment.Annotations,
-								UID:         deployment.UID,
-							},
-							Status: deployment.Status,
-						}
-
-						newDep.Spec.Template.Spec = deployment.Spec.Template.Spec
-						return newDep, nil
-					},
-				},
-				&appsv1.StatefulSet{}: {
-					Transform: func(obj interface{}) (interface{}, error) {
-						ss := obj.(*appsv1.StatefulSet)
-						newSs := &appsv1.StatefulSet{
-							TypeMeta: ss.TypeMeta,
-							ObjectMeta: metav1.ObjectMeta{
-								Name:        ss.Name,
-								Namespace:   ss.Namespace,
-								Labels:      ss.Labels,
-								Annotations: ss.Annotations,
-								UID:         ss.UID,
-							},
-							Status: ss.Status,
-						}
-
-						newSs.Spec.Template.Spec = ss.Spec.Template.Spec
-						return newSs, nil
-					},
-				},
-				&appsv1.DaemonSet{}: {
-					Transform: func(obj interface{}) (interface{}, error) {
-						ds := obj.(*appsv1.DaemonSet)
-						newDs := &appsv1.DaemonSet{
-							TypeMeta: ds.TypeMeta,
-							ObjectMeta: metav1.ObjectMeta{
-								Name:        ds.Name,
-								Namespace:   ds.Namespace,
-								Labels:      ds.Labels,
-								Annotations: ds.Annotations,
-								UID:         ds.UID,
-							},
-							Status: ds.Status,
-						}
-
-						newDs.Spec.Template.Spec = ds.Spec.Template.Spec
-						return newDs, nil
-					},
-				},
-				&corev1.Namespace{}: {
-					Label: labels.Set{consts.OdigosInstrumentationLabel: consts.InstrumentationEnabled}.AsSelector(),
-				},
 				&corev1.ConfigMap{}: {
 					Field: client.InNamespace(env.GetCurrentNamespace()).AsSelector(),
 				},
@@ -198,6 +134,15 @@ func main() {
 		os.Exit(1)
 	}
 
+	ctx := signals.SetupSignalHandler()
+
+	err = sdks.SetDefaultSDKs(ctx)
+
+	if err != nil {
+		setupLog.Error(err, "Failed to set default SDKs")
+		os.Exit(-1)
+	}
+
 	err = instrumentationdevice.SetupWithManager(mgr)
 	if err != nil {
 		setupLog.Error(err, "unable to create controller")
@@ -240,7 +185,7 @@ func main() {
 	}
 
 	setupLog.Info("starting manager")
-	if err := mgr.Start(ctrl.SetupSignalHandler()); err != nil {
+	if err := mgr.Start(ctx); err != nil {
 		setupLog.Error(err, "problem running manager")
 		os.Exit(1)
 	}
diff --git a/instrumentor/sdks/sdks.go b/instrumentor/sdks/sdks.go
new file mode 100644
index 000000000..7f474e878
--- /dev/null
+++ b/instrumentor/sdks/sdks.go
@@ -0,0 +1,78 @@
+package sdks
+
+import (
+	"context"
+
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/k8sutils/pkg/env"
+)
+
+var defaultOtelSdkPerLanguage = map[common.ProgrammingLanguage]common.OtelSdk{}
+
+func otelSdkConfigCommunity() map[common.ProgrammingLanguage]common.OtelSdk {
+	return map[common.ProgrammingLanguage]common.OtelSdk{
+		common.JavaProgrammingLanguage:       common.OtelSdkNativeCommunity,
+		common.PythonProgrammingLanguage:     common.OtelSdkNativeCommunity,
+		common.GoProgrammingLanguage:         common.OtelSdkEbpfCommunity,
+		common.DotNetProgrammingLanguage:     common.OtelSdkNativeCommunity,
+		common.JavascriptProgrammingLanguage: common.OtelSdkNativeCommunity,
+	}
+}
+
+func otelSdkConfigCloud() map[common.ProgrammingLanguage]common.OtelSdk {
+	return map[common.ProgrammingLanguage]common.OtelSdk{
+		common.JavaProgrammingLanguage:       common.OtelSdkNativeCommunity,
+		common.PythonProgrammingLanguage:     common.OtelSdkNativeCommunity,
+		common.GoProgrammingLanguage:         common.OtelSdkEbpfEnterprise,
+		common.DotNetProgrammingLanguage:     common.OtelSdkNativeCommunity,
+		common.JavascriptProgrammingLanguage: common.OtelSdkNativeCommunity,
+	}
+}
+
+func otelSdkConfigOnPrem() map[common.ProgrammingLanguage]common.OtelSdk {
+	return map[common.ProgrammingLanguage]common.OtelSdk{
+		common.JavaProgrammingLanguage:       common.OtelSdkEbpfEnterprise, // Notice - for onprem, the default for java is eBPF
+		common.PythonProgrammingLanguage:     common.OtelSdkEbpfEnterprise,
+		common.GoProgrammingLanguage:         common.OtelSdkEbpfEnterprise,
+		common.DotNetProgrammingLanguage:     common.OtelSdkNativeCommunity,
+		common.JavascriptProgrammingLanguage: common.OtelSdkEbpfEnterprise,
+		common.MySQLProgrammingLanguage:      common.OtelSdkEbpfEnterprise,
+		common.NginxProgrammingLanguage:      common.OtelSdkNativeCommunity,
+	}
+}
+
+func SetDefaultSDKs(ctx context.Context) error {
+	odigosTier := env.GetOdigosTierFromEnv()
+
+	switch odigosTier {
+	case common.CommunityOdigosTier:
+		defaultOtelSdkPerLanguage = otelSdkConfigCommunity()
+	case common.CloudOdigosTier:
+		defaultOtelSdkPerLanguage = otelSdkConfigCloud()
+	case common.OnPremOdigosTier:
+		defaultOtelSdkPerLanguage = otelSdkConfigOnPrem()
+	}
+
+	return nil
+}
+
+func copyOtelSdkMap(m map[common.ProgrammingLanguage]common.OtelSdk) map[common.ProgrammingLanguage]common.OtelSdk {
+	// Create a new map with the same capacity as the original
+	newMap := make(map[common.ProgrammingLanguage]common.OtelSdk, len(m))
+
+	// Copy each key-value pair to the new map
+	for key, value := range m {
+		newMap[key] = common.OtelSdk{
+			SdkType: value.SdkType,
+			SdkTier: value.SdkTier,
+		}
+	}
+
+	return newMap
+}
+
+func GetDefaultSDKs() map[common.ProgrammingLanguage]common.OtelSdk {
+	// return a copy of the map, so it can be modified without affecting the original
+	// and if used by multiple goroutines, it will be safe to write to the instance returned
+	return copyOtelSdkMap(defaultOtelSdkPerLanguage)
+}
diff --git a/k8sutils/pkg/client/cache_api_fallback.go b/k8sutils/pkg/client/cache_api_fallback.go
deleted file mode 100644
index a38aab796..000000000
--- a/k8sutils/pkg/client/cache_api_fallback.go
+++ /dev/null
@@ -1,96 +0,0 @@
-package client
-
-import (
-	"context"
-
-	"k8s.io/apimachinery/pkg/api/meta"
-	"k8s.io/apimachinery/pkg/runtime"
-	"k8s.io/apimachinery/pkg/runtime/schema"
-	"sigs.k8s.io/controller-runtime/pkg/client"
-)
-
-type KubernetesClientFromCacheWithAPIFallback struct {
-	Cache     client.Client
-	APIServer client.Reader
-}
-
-func NewKubernetesClientFromCacheWithAPIFallback(cache client.Client, apiServer client.Reader) *KubernetesClientFromCacheWithAPIFallback {
-	return &KubernetesClientFromCacheWithAPIFallback{
-		Cache:     cache,
-		APIServer: apiServer,
-	}
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) Get(ctx context.Context, key client.ObjectKey, obj client.Object, opts ...client.GetOption) error {
-	err := k.Cache.Get(ctx, key, obj, opts...)
-	if err != nil {
-		if client.IgnoreNotFound(err) != nil {
-			return err
-		}
-
-		err = k.APIServer.Get(ctx, key, obj, opts...)
-		if err != nil {
-			return err
-		}
-	}
-	return nil
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) List(ctx context.Context, list client.ObjectList, opts ...client.ListOption) error {
-	err := k.Cache.List(ctx, list, opts...)
-	if err != nil || meta.LenList(list) == 0 {
-		if err != nil && client.IgnoreNotFound(err) != nil {
-			return err
-		}
-
-		err = k.APIServer.List(ctx, list, opts...)
-		if err != nil {
-			return err
-		}
-	}
-	return nil
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) Create(ctx context.Context, obj client.Object, opts ...client.CreateOption) error {
-	return k.Cache.Create(ctx, obj, opts...)
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) Delete(ctx context.Context, obj client.Object, opts ...client.DeleteOption) error {
-	return k.Cache.Delete(ctx, obj, opts...)
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) Update(ctx context.Context, obj client.Object, opts ...client.UpdateOption) error {
-	return k.Cache.Update(ctx, obj, opts...)
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) Patch(ctx context.Context, obj client.Object, patch client.Patch, opts ...client.PatchOption) error {
-	return k.Cache.Patch(ctx, obj, patch, opts...)
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) DeleteAllOf(ctx context.Context, obj client.Object, opts ...client.DeleteAllOfOption) error {
-	return k.Cache.DeleteAllOf(ctx, obj, opts...)
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) Status() client.SubResourceWriter {
-	return k.Cache.Status()
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) SubResource(subResource string) client.SubResourceClient {
-	return k.Cache.SubResource(subResource)
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) Scheme() *runtime.Scheme {
-	return k.Cache.Scheme()
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) RESTMapper() meta.RESTMapper {
-	return k.Cache.RESTMapper()
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) GroupVersionKindFor(obj runtime.Object) (schema.GroupVersionKind, error) {
-	return k.Cache.GroupVersionKindFor(obj)
-}
-
-func (k *KubernetesClientFromCacheWithAPIFallback) IsObjectNamespaced(obj runtime.Object) (bool, error) {
-	return k.Cache.IsObjectNamespaced(obj)
-}
diff --git a/k8sutils/pkg/consts/consts.go b/k8sutils/pkg/consts/consts.go
index f27b4c7c5..c9d0ecbf2 100644
--- a/k8sutils/pkg/consts/consts.go
+++ b/k8sutils/pkg/consts/consts.go
@@ -21,12 +21,31 @@ const (
 
 	OdigosClusterCollectorCollectorGroupName = OdigosClusterCollectorDeploymentName
 	OdigosClusterCollectorConfigMapKey       = "collector-conf"
+
+	// The cluster gateway collector runs as a deployment and the pod is exposed as a service.
+	// Thus it cannot collide with other ports on the same node, and we can use an handy default port.
+	OdigosClusterCollectorOwnTelemetryPortDefault = int32(8888)
 )
 
 const (
-	OdigosNodeCollectorDaemonSetName      = "odigos-data-collection"
-	OdigosNodeCollectorConfigMapName      = OdigosNodeCollectorDaemonSetName
-	OdigosNodeCollectorCollectorGroupName = OdigosNodeCollectorDaemonSetName
+	OdigosNodeCollectorDaemonSetName           = "odigos-data-collection"
+	OdigosNodeCollectorConfigMapName           = OdigosNodeCollectorDaemonSetName
+	OdigosNodeCollectorCollectorGroupName      = OdigosNodeCollectorDaemonSetName
+	OdigosNodeCollectorOwnTelemetryPortDefault = int32(55682)
 
 	OdigosNodeCollectorConfigMapKey = "conf" // this key is different than the cluster collector value. not sure why
 )
+
+const (
+	OdigosEnvVarNamespace     = "ODIGOS_WORKLOAD_NAMESPACE"
+	OdigosEnvVarContainerName = "ODIGOS_CONTAINER_NAME"
+	OdigosEnvVarPodName       = "ODIGOS_POD_NAME"
+)
+
+func OdigosInjectedEnvVars() []string {
+	return []string{
+		OdigosEnvVarNamespace,
+		OdigosEnvVarContainerName,
+		OdigosEnvVarPodName,
+	}
+}
diff --git a/k8sutils/pkg/container/container.go b/k8sutils/pkg/container/container.go
index 25f58957b..0d7b65387 100644
--- a/k8sutils/pkg/container/container.go
+++ b/k8sutils/pkg/container/container.go
@@ -4,7 +4,7 @@ import (
 	"strings"
 
 	"github.com/odigos-io/odigos/common"
-	"k8s.io/api/core/v1"
+	v1 "k8s.io/api/core/v1"
 )
 
 func GetLanguageAndOtelSdk(container v1.Container) (common.ProgrammingLanguage, common.OtelSdk, bool) {
@@ -30,4 +30,17 @@ func podContainerDeviceName(container v1.Container) *string {
 	}
 
 	return nil
-}
\ No newline at end of file
+}
+
+func AllContainersReady(pod *v1.Pod) bool {
+	// Iterate over all containers in the pod
+	// Return false if any container is:
+	// 1. Not Ready
+	// 2. Started is nil or false
+	for _, containerStatus := range pod.Status.ContainerStatuses {
+		if !containerStatus.Ready || containerStatus.Started == nil || !*containerStatus.Started {
+			return false
+		}
+	}
+	return true
+}
diff --git a/k8sutils/pkg/describe/common.go b/k8sutils/pkg/describe/common.go
index 3fe026154..ddb4a9847 100644
--- a/k8sutils/pkg/describe/common.go
+++ b/k8sutils/pkg/describe/common.go
@@ -3,6 +3,8 @@ package describe
 import (
 	"fmt"
 	"strings"
+
+	"github.com/odigos-io/odigos/k8sutils/pkg/describe/properties"
 )
 
 func wrapTextInRed(text string) string {
@@ -13,12 +15,8 @@ func wrapTextInGreen(text string) string {
 	return "\033[32m" + text + "\033[0m"
 }
 
-func wrapTextSuccessOfFailure(text string, success bool) string {
-	if success {
-		return wrapTextInGreen(text)
-	} else {
-		return wrapTextInRed(text)
-	}
+func wrapTextInYellow(text string) string {
+	return "\033[33m" + text + "\033[0m"
 }
 
 func describeText(sb *strings.Builder, indent int, printftext string, args ...interface{}) {
@@ -26,3 +24,20 @@ func describeText(sb *strings.Builder, indent int, printftext string, args ...in
 	lineText := fmt.Sprintf(printftext, args...)
 	sb.WriteString(fmt.Sprintf("%s%s\n", indentText, lineText))
 }
+
+func printProperty(sb *strings.Builder, indent int, property *properties.EntityProperty) {
+	if property == nil {
+		return
+	}
+	text := fmt.Sprintf("%s: %v", property.Name, property.Value)
+	switch property.Status {
+	case properties.PropertyStatusSuccess:
+		text = wrapTextInGreen(text)
+	case properties.PropertyStatusError:
+		text = wrapTextInRed(text)
+	case properties.PropertyStatusTransitioning:
+		text = wrapTextInYellow(text)
+	}
+
+	describeText(sb, indent, text)
+}
diff --git a/k8sutils/pkg/describe/odigos.go b/k8sutils/pkg/describe/odigos.go
index c8ed1566e..b20c8f72c 100644
--- a/k8sutils/pkg/describe/odigos.go
+++ b/k8sutils/pkg/describe/odigos.go
@@ -2,292 +2,65 @@ package describe
 
 import (
 	"context"
-	"fmt"
 	"strings"
 
 	odigosclientset "github.com/odigos-io/odigos/api/generated/odigos/clientset/versioned/typed/odigos/v1alpha1"
-	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
-	"github.com/odigos-io/odigos/k8sutils/pkg/getters"
-	appsv1 "k8s.io/api/apps/v1"
-	corev1 "k8s.io/api/core/v1"
-	apierrors "k8s.io/apimachinery/pkg/api/errors"
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	odigos "github.com/odigos-io/odigos/k8sutils/pkg/describe/odigos"
 	"k8s.io/client-go/kubernetes"
 )
 
-type clusterCollectorResources struct {
-	CollectorsGroup    *odigosv1.CollectorsGroup
-	Deployment         *appsv1.Deployment
-	LatestRevisionPods *corev1.PodList
-}
-
-type nodeCollectorResources struct {
-	CollectorsGroup *odigosv1.CollectorsGroup
-	DaemonSet       *appsv1.DaemonSet
-}
-
-type odigosResources struct {
-	ClusterCollector       clusterCollectorResources
-	NodeCollector          nodeCollectorResources
-	Destinations           *odigosv1.DestinationList
-	InstrumentationConfigs *odigosv1.InstrumentationConfigList
-}
-
-func getClusterCollectorResources(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, odigosNs string) (clusterCollector clusterCollectorResources, err error) {
-
-	clusterCollector = clusterCollectorResources{}
-
-	clusterCollector.CollectorsGroup, err = odigosClient.CollectorsGroups(odigosNs).Get(ctx, consts.OdigosClusterCollectorCollectorGroupName, metav1.GetOptions{})
-	if err != nil && !apierrors.IsNotFound(err) {
-		return
-	}
-
-	clusterCollector.Deployment, err = kubeClient.AppsV1().Deployments(odigosNs).Get(ctx, consts.OdigosClusterCollectorDeploymentName, metav1.GetOptions{})
-	if err != nil && !apierrors.IsNotFound(err) {
-		return
-	}
-
-	var clusterRoleRevision string
-	if clusterCollector.Deployment != nil {
-		revisionAnnotation, found := clusterCollector.Deployment.Annotations["deployment.kubernetes.io/revision"]
-		if found {
-			clusterRoleRevision = revisionAnnotation
-		}
-	}
-
-	// get only cluster role replicasets
-	if clusterRoleRevision != "" {
-		deploymentRs, errRs := kubeClient.AppsV1().ReplicaSets(odigosNs).List(ctx, metav1.ListOptions{
-			LabelSelector: metav1.FormatLabelSelector(clusterCollector.Deployment.Spec.Selector),
-		})
-		if errRs != nil {
-			err = errRs
-			return
-		}
-
-		var latestRevisionReplicaSet *appsv1.ReplicaSet
-		for i := range deploymentRs.Items {
-			rs := &deploymentRs.Items[i]
-			if rs.Annotations["deployment.kubernetes.io/revision"] == clusterRoleRevision {
-				latestRevisionReplicaSet = rs
-				break
-			}
-		}
-
-		if latestRevisionReplicaSet != nil {
-			podTemplateHash := latestRevisionReplicaSet.Labels["pod-template-hash"]
-			clusterCollector.LatestRevisionPods, err = kubeClient.CoreV1().Pods(odigosNs).List(ctx, metav1.ListOptions{
-				LabelSelector: fmt.Sprintf("pod-template-hash=%s", podTemplateHash),
-			})
-			if err != nil {
-				return
-			}
-		}
-	}
-
-	return
-}
-
-func getNodeCollectorResources(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, odigosNs string) (nodeCollector nodeCollectorResources, err error) {
-
-	nodeCollector = nodeCollectorResources{}
-
-	nodeCollector.CollectorsGroup, err = odigosClient.CollectorsGroups(odigosNs).Get(ctx, consts.OdigosNodeCollectorCollectorGroupName, metav1.GetOptions{})
-	if err != nil && !apierrors.IsNotFound(err) {
-		return
-	}
-
-	nodeCollector.DaemonSet, err = kubeClient.AppsV1().DaemonSets(odigosNs).Get(ctx, consts.OdigosNodeCollectorDaemonSetName, metav1.GetOptions{})
-	if err != nil && !apierrors.IsNotFound(err) {
-		return
-	}
-
-	return
-}
-
-func getRelevantOdigosResources(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, odigosNs string) (odigos odigosResources, err error) {
-
-	odigos.ClusterCollector, err = getClusterCollectorResources(ctx, kubeClient, odigosClient, odigosNs)
-	if err != nil {
-		return
-	}
-
-	odigos.NodeCollector, err = getNodeCollectorResources(ctx, kubeClient, odigosClient, odigosNs)
-	if err != nil {
-		return
-	}
-
-	odigos.Destinations, err = odigosClient.Destinations(odigosNs).List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return
-	}
-
-	odigos.InstrumentationConfigs, err = odigosClient.InstrumentationConfigs("").List(ctx, metav1.ListOptions{})
-	if err != nil {
-		return
-	}
-
-	return
-}
-
-func printOdigosVersion(odigosVersion string, sb *strings.Builder) {
-	describeText(sb, 0, "Odigos Version: %s", odigosVersion)
-}
-
-func printOdigosPipelineStatus(numInstrumentationConfigs, numDestinations int, expectingPipeline bool, sb *strings.Builder) {
-	if expectingPipeline {
-		describeText(sb, 1, "Status: there are %d sources and %d destinations so pipeline will be deployed\n", numInstrumentationConfigs, numDestinations)
-	} else {
-		describeText(sb, 1, "Status: no sources or destinations found so pipeline will not be deployed")
-	}
-}
-
-func printClusterCollectorStatus(clusterCollector clusterCollectorResources, expectingPipeline bool, sb *strings.Builder) {
+func printClusterCollectorStatus(analyze *odigos.OdigosAnalyze, sb *strings.Builder) {
 	describeText(sb, 1, "Cluster Collector:")
-	if clusterCollector.CollectorsGroup == nil {
-		describeText(sb, 2, wrapTextSuccessOfFailure("Collectors Group Not Created", !expectingPipeline))
-		return
-	}
-
-	describeText(sb, 2, wrapTextSuccessOfFailure("Collectors Group Created", expectingPipeline))
-
-	var deployedCondition *metav1.Condition
-	for _, condition := range clusterCollector.CollectorsGroup.Status.Conditions {
-		if condition.Type == "Deployed" {
-			deployedCondition = &condition
-			break
-		}
-	}
-	if deployedCondition == nil {
-		describeText(sb, 2, wrapTextInRed("Deployed: Status Unavailable"))
-	} else {
-		if deployedCondition.Status == metav1.ConditionTrue {
-			describeText(sb, 2, wrapTextInGreen("Deployed: true"))
-		} else {
-			describeText(sb, 2, wrapTextInRed("Deployed: false"))
-			describeText(sb, 2, wrapTextInRed(fmt.Sprintf("Reason: %s", deployedCondition.Message)))
-		}
-	}
-
-	ready := clusterCollector.CollectorsGroup.Status.Ready
-	describeText(sb, 2, wrapTextSuccessOfFailure(fmt.Sprintf("Ready: %t", ready), ready))
-
-	if clusterCollector.LatestRevisionPods == nil || clusterCollector.Deployment == nil {
-		describeText(sb, 2, wrapTextInRed("Number of Replicas: Status Unavailable"))
-	} else {
-		runningReplicas := 0
-		failureReplicas := 0
-		var failureText string
-		for _, pod := range clusterCollector.LatestRevisionPods.Items {
-			var condition *corev1.PodCondition
-			for i := range pod.Status.Conditions {
-				c := pod.Status.Conditions[i]
-				if c.Type == corev1.PodReady {
-					condition = &c
-					break
-				}
-			}
-			if condition == nil {
-				failureReplicas++
-			} else {
-				if condition.Status == corev1.ConditionTrue {
-					runningReplicas++
-				} else {
-					failureReplicas++
-					failureText = condition.Message
-				}
-			}
-		}
-		desiredReplicas := *clusterCollector.Deployment.Spec.Replicas
-		describeText(sb, 2, fmt.Sprintf("Desired Replicas: %d", desiredReplicas))
-		podReplicasText := fmt.Sprintf("Actual Replicas: %d running, %d failed", runningReplicas, failureReplicas)
-		deploymentSuccessful := runningReplicas == int(desiredReplicas)
-		describeText(sb, 2, wrapTextSuccessOfFailure(podReplicasText, deploymentSuccessful))
-		if !deploymentSuccessful {
-			describeText(sb, 2, wrapTextInRed(fmt.Sprintf("Replicas Not Ready Reason: %s", failureText)))
-		}
-	}
+	printProperty(sb, 2, &analyze.ClusterCollector.Enabled)
+	printProperty(sb, 2, &analyze.ClusterCollector.CollectorGroup)
+	printProperty(sb, 2, analyze.ClusterCollector.Deployed)
+	printProperty(sb, 2, analyze.ClusterCollector.DeployedError)
+	printProperty(sb, 2, analyze.ClusterCollector.CollectorReady)
+	printProperty(sb, 2, &analyze.ClusterCollector.DeploymentCreated)
+	printProperty(sb, 2, analyze.ClusterCollector.ExpectedReplicas)
+	printProperty(sb, 2, analyze.ClusterCollector.HealthyReplicas)
+	printProperty(sb, 2, analyze.ClusterCollector.FailedReplicas)
+	printProperty(sb, 2, analyze.ClusterCollector.FailedReplicasReason)
 }
 
-func printNodeCollectorStatus(nodeCollector nodeCollectorResources, expectingNodeCollector bool, sb *strings.Builder) {
+func printNodeCollectorStatus(analyze *odigos.OdigosAnalyze, sb *strings.Builder) {
 	describeText(sb, 1, "Node Collector:")
-	if nodeCollector.CollectorsGroup == nil {
-		describeText(sb, 2, wrapTextSuccessOfFailure("Collectors Group Not Created", !expectingNodeCollector))
-		return
-	}
-
-	describeText(sb, 2, wrapTextSuccessOfFailure("Collectors Group Created", expectingNodeCollector))
-
-	var deployedCondition *metav1.Condition
-	for _, condition := range nodeCollector.CollectorsGroup.Status.Conditions {
-		if condition.Type == "Deployed" {
-			deployedCondition = &condition
-			break
-		}
-	}
-	if deployedCondition == nil {
-		describeText(sb, 2, wrapTextInRed("Deployed: Status Unavailable"))
-	} else {
-		if deployedCondition.Status == metav1.ConditionTrue {
-			describeText(sb, 2, wrapTextInGreen("Deployed: True"))
-		} else {
-			describeText(sb, 2, wrapTextInRed("Deployed: False"))
-			describeText(sb, 2, wrapTextInRed(fmt.Sprintf("Reason: %s", deployedCondition.Message)))
-		}
-	}
-
-	ready := nodeCollector.CollectorsGroup.Status.Ready
-	describeText(sb, 2, wrapTextSuccessOfFailure(fmt.Sprintf("Ready: %t", ready), ready))
-
-	// this is copied from k8sutils/pkg/describe/describe.go
-	// I hope the info is accurate since there can be many edge cases
-	describeText(sb, 2, "Desired Number of Nodes Scheduled: %d", nodeCollector.DaemonSet.Status.DesiredNumberScheduled)
-	currentMeetsDesired := nodeCollector.DaemonSet.Status.DesiredNumberScheduled == nodeCollector.DaemonSet.Status.CurrentNumberScheduled
-	describeText(sb, 2, wrapTextSuccessOfFailure(fmt.Sprintf("Current Number of Nodes Scheduled: %d", nodeCollector.DaemonSet.Status.CurrentNumberScheduled), currentMeetsDesired))
-	updatedMeetsDesired := nodeCollector.DaemonSet.Status.DesiredNumberScheduled == nodeCollector.DaemonSet.Status.UpdatedNumberScheduled
-	describeText(sb, 2, wrapTextSuccessOfFailure(fmt.Sprintf("Number of Nodes Scheduled with Up-to-date Pods: %d", nodeCollector.DaemonSet.Status.UpdatedNumberScheduled), updatedMeetsDesired))
-	availableMeetsDesired := nodeCollector.DaemonSet.Status.DesiredNumberScheduled == nodeCollector.DaemonSet.Status.NumberAvailable
-	describeText(sb, 2, wrapTextSuccessOfFailure(fmt.Sprintf("Number of Nodes Scheduled with Available Pods: %d", nodeCollector.DaemonSet.Status.NumberAvailable), availableMeetsDesired))
-	noMisscheduled := nodeCollector.DaemonSet.Status.NumberMisscheduled == 0
-	describeText(sb, 2, wrapTextSuccessOfFailure(fmt.Sprintf("Number of Nodes Misscheduled: %d", nodeCollector.DaemonSet.Status.NumberMisscheduled), noMisscheduled))
+	printProperty(sb, 2, &analyze.NodeCollector.Enabled)
+	printProperty(sb, 2, &analyze.NodeCollector.CollectorGroup)
+	printProperty(sb, 2, analyze.NodeCollector.Deployed)
+	printProperty(sb, 2, analyze.NodeCollector.DeployedError)
+	printProperty(sb, 2, analyze.NodeCollector.CollectorReady)
+	printProperty(sb, 2, &analyze.NodeCollector.DaemonSet)
+	printProperty(sb, 2, analyze.NodeCollector.DesiredNodes)
+	printProperty(sb, 2, analyze.NodeCollector.CurrentNodes)
+	printProperty(sb, 2, analyze.NodeCollector.UpdatedNodes)
+	printProperty(sb, 2, analyze.NodeCollector.AvailableNodes)
 }
 
-func printOdigosPipeline(odigosResources odigosResources, sb *strings.Builder) {
+func printOdigosPipeline(analyze *odigos.OdigosAnalyze, sb *strings.Builder) {
 	describeText(sb, 0, "Odigos Pipeline:")
-	numDestinations := len(odigosResources.Destinations.Items)
-	numInstrumentationConfigs := len(odigosResources.InstrumentationConfigs.Items)
-	// odigos will only initiate pipeline if there are any sources or destinations
-	expectingPipeline := numDestinations > 0 || numInstrumentationConfigs > 0
-
-	printOdigosPipelineStatus(numInstrumentationConfigs, numDestinations, expectingPipeline, sb)
-	printClusterCollectorStatus(odigosResources.ClusterCollector, expectingPipeline, sb)
+	describeText(sb, 1, "Status: there are %d sources and %d destinations\n", analyze.NumberOfSources, analyze.NumberOfDestinations)
+	printClusterCollectorStatus(analyze, sb)
 	sb.WriteString("\n")
-	expectingNodeCollector := odigosResources.ClusterCollector.CollectorsGroup != nil && odigosResources.ClusterCollector.CollectorsGroup.Status.Ready && numInstrumentationConfigs > 0
-	printNodeCollectorStatus(odigosResources.NodeCollector, expectingNodeCollector, sb)
+	printNodeCollectorStatus(analyze, sb)
 }
 
-func printDescribeOdigos(odigosVersion string, odigosResources odigosResources) string {
+func DescribeOdigosToText(analyze *odigos.OdigosAnalyze) string {
 	var sb strings.Builder
 
-	printOdigosVersion(odigosVersion, &sb)
+	printProperty(&sb, 0, &analyze.OdigosVersion)
 	sb.WriteString("\n")
-	printOdigosPipeline(odigosResources, &sb)
+	printOdigosPipeline(analyze, &sb)
 
 	return sb.String()
 }
 
-func DescribeOdigos(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, odigosNs string) string {
-
-	odigosVersion, err := getters.GetOdigosVersionInClusterFromConfigMap(ctx, kubeClient, odigosNs)
-	if err != nil {
-		return fmt.Sprintf("Error: %v\n", err)
-	}
+func DescribeOdigos(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, odigosNs string) (*odigos.OdigosAnalyze, error) {
 
-	odigosResources, err := getRelevantOdigosResources(ctx, kubeClient, odigosClient, odigosNs)
+	odigosResources, err := odigos.GetRelevantOdigosResources(ctx, kubeClient, odigosClient, odigosNs)
 	if err != nil {
-		return fmt.Sprintf("Error: %v\n", err)
+		return nil, err
 	}
 
-	return printDescribeOdigos(odigosVersion, odigosResources)
+	return odigos.AnalyzeOdigos(odigosResources), nil
 }
diff --git a/k8sutils/pkg/describe/odigos/analyze.go b/k8sutils/pkg/describe/odigos/analyze.go
new file mode 100644
index 000000000..efdf80a6a
--- /dev/null
+++ b/k8sutils/pkg/describe/odigos/analyze.go
@@ -0,0 +1,386 @@
+package odigos
+
+import (
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/k8sutils/pkg/describe/properties"
+	appsv1 "k8s.io/api/apps/v1"
+	corev1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type ClusterCollectorAnalyze struct {
+	Enabled              properties.EntityProperty  `json:"enabled"`
+	CollectorGroup       properties.EntityProperty  `json:"collectorGroup"`
+	Deployed             *properties.EntityProperty `json:"deployed,omitempty"`
+	DeployedError        *properties.EntityProperty `json:"deployedError,omitempty"`
+	CollectorReady       *properties.EntityProperty `json:"collectorReady,omitempty"`
+	DeploymentCreated    properties.EntityProperty  `json:"deployment,omitempty"`
+	ExpectedReplicas     *properties.EntityProperty `json:"expectedReplicas,omitempty"`
+	HealthyReplicas      *properties.EntityProperty `json:"healthyReplicas,omitempty"`
+	FailedReplicas       *properties.EntityProperty `json:"failedReplicas,omitempty"`
+	FailedReplicasReason *properties.EntityProperty `json:"failedReplicasReason,omitempty"`
+}
+
+type NodeCollectorAnalyze struct {
+	Enabled        properties.EntityProperty  `json:"enabled"`
+	CollectorGroup properties.EntityProperty  `json:"collectorGroup"`
+	Deployed       *properties.EntityProperty `json:"deployed,omitempty"`
+	DeployedError  *properties.EntityProperty `json:"deployedError,omitempty"`
+	CollectorReady *properties.EntityProperty `json:"collectorReady,omitempty"`
+	DaemonSet      properties.EntityProperty  `json:"daemonSet,omitempty"`
+	DesiredNodes   *properties.EntityProperty `json:"desiredNodes,omitempty"`
+	CurrentNodes   *properties.EntityProperty `json:"currentNodes,omitempty"`
+	UpdatedNodes   *properties.EntityProperty `json:"updatedNodes,omitempty"`
+	AvailableNodes *properties.EntityProperty `json:"availableNodes,omitempty"`
+}
+
+type OdigosAnalyze struct {
+	OdigosVersion        properties.EntityProperty `json:"odigosVersion"`
+	NumberOfDestinations int                       `json:"numberOfDestinations"`
+	NumberOfSources      int                       `json:"numberOfSources"`
+	ClusterCollector     ClusterCollectorAnalyze   `json:"clusterCollector"`
+	NodeCollector        NodeCollectorAnalyze      `json:"nodeCollector"`
+
+	// is settled is true if all resources are created and ready
+	IsSettled bool `json:"isSettled"`
+	HasErrors bool `json:"hasErrors"`
+}
+
+func analyzeDeployed(cg *odigosv1.CollectorsGroup) (*properties.EntityProperty, *properties.EntityProperty) {
+	if cg == nil {
+		return nil, nil
+	}
+
+	var deployedCondition *metav1.Condition
+	for _, condition := range cg.Status.Conditions {
+		if condition.Type == "Deployed" {
+			deployedCondition = &condition
+			break
+		}
+	}
+	if deployedCondition == nil {
+		// scheduler created the cg but autoscaler did not reconcile it yet
+		return &properties.EntityProperty{
+				Name:    "Deployed",
+				Value:   false,
+				Status:  properties.PropertyStatusTransitioning,
+				Explain: "deployed means the relevant k8s objects (deployment, configmap, secret, daemonset, etc) were created successfully and are expected to start. It does not mean the relevant pods were actually created, started, or are healthy.",
+			}, &properties.EntityProperty{
+				Name:    "Deployed Error",
+				Value:   "waiting for reconciliation",
+				Status:  properties.PropertyStatusTransitioning,
+				Explain: "in case the deployment resources were not able to be calculated or created, this error will show the reason",
+			}
+	}
+
+	if deployedCondition.Status == metav1.ConditionTrue {
+		// successfully reconciled to collectors deployment
+		return &properties.EntityProperty{
+			Name:    "Deployed",
+			Value:   true,
+			Status:  properties.PropertyStatusSuccess,
+			Explain: "deployed means the relevant k8s objects (deployment, configmap, secret, daemonset, etc) were created successfully and are expected to start. It does not mean the relevant pods were actually created, started, or are healthy.",
+		}, nil
+	} else {
+		// had an error during reconciliation to k8s deployment objects
+		return &properties.EntityProperty{
+				Name:    "Deployed",
+				Value:   false,
+				Status:  properties.PropertyStatusError,
+				Explain: "deployed means the relevant k8s objects (deployment, configmap, secret, daemonset, etc) were created successfully and are expected to start. It does not mean the relevant pods were actually created, started, or are healthy.",
+			}, &properties.EntityProperty{
+				Name:    "Deployed Error",
+				Value:   deployedCondition.Message,
+				Status:  properties.PropertyStatusError,
+				Explain: "in case the deployment resources were not able to be calculated or created, this error will show the reason",
+			}
+	}
+}
+
+func analyzeCollectorReady(cg *odigosv1.CollectorsGroup) *properties.EntityProperty {
+	if cg == nil {
+		return nil
+	}
+
+	// TODO: ready is true only once deployment is ready
+	// but there is no difference between deployment starting and deployment failed to start
+	ready := cg.Status.Ready
+
+	return &properties.EntityProperty{
+		Name:    "Ready",
+		Value:   ready,
+		Status:  properties.GetSuccessOrTransitioning(ready),
+		Explain: "ready means that odigos has detected the collectors group as ready to start collecting/receiving data",
+	}
+}
+
+func analyzeDeployment(dep *appsv1.Deployment, enabled bool) (properties.EntityProperty, *properties.EntityProperty, int) {
+	depFound := dep != nil
+	deployment := properties.EntityProperty{
+		Name:    "Deployment",
+		Value:   properties.GetTextCreated(depFound),
+		Status:  properties.GetSuccessOrTransitioning(depFound == enabled),
+		Explain: "is the k8s deployment object for cluster collector exists in the cluster",
+	}
+	if !depFound {
+		return deployment, nil, 0
+	} else {
+		expectedReplicas := int(*dep.Spec.Replicas)
+		return deployment, &properties.EntityProperty{
+			Name:    "Expected Replicas",
+			Value:   expectedReplicas,
+			Explain: "the number of pods that should be scheduled to run the cluster collector",
+		}, expectedReplicas
+	}
+}
+
+func analyzeDaemonSet(ds *appsv1.DaemonSet, enabled bool) properties.EntityProperty {
+	dsFound := ds != nil
+	return properties.EntityProperty{
+		Name:    "DaemonSet",
+		Value:   properties.GetTextCreated(dsFound),
+		Status:  properties.GetSuccessOrTransitioning(dsFound == enabled),
+		Explain: "is the k8s daemonset object for node collector exists in the cluster",
+	}
+}
+
+func analyzeDsReplicas(ds *appsv1.DaemonSet) (*properties.EntityProperty, *properties.EntityProperty, *properties.EntityProperty, *properties.EntityProperty) {
+	if ds == nil {
+		return nil, nil, nil, nil
+	}
+
+	desiredNodes := int(ds.Status.DesiredNumberScheduled)
+	currentReplicas := int(ds.Status.CurrentNumberScheduled)
+	updatedReplicas := int(ds.Status.UpdatedNumberScheduled)
+	availableNodes := int(ds.Status.NumberAvailable)
+	return &properties.EntityProperty{
+			// The total number of nodes that should be running this daemon.
+			// Regardless of what is actually running (0, 1, or more), rollouts, failures, etc.
+			// this number can be less than the number of nodes in the cluster if affinity rules and node selectors are used.
+			Name:    "Desired Nodes",
+			Value:   desiredNodes,
+			Explain: "the number of k8s nodes that should be running the node collector daemonset",
+		}, &properties.EntityProperty{
+			// The number of nodes that are running at least 1
+			// daemon pod and are supposed to run the daemon pod.
+			// if this number is less than the desired number, the daemonset is not fully scheduled.
+			// it can be due to an active rollout (which is ok), or due to a problem with the nodes / pods
+			// this prevents the daemonset pod from being scheduled.
+			Name:    "Current Nodes",
+			Value:   currentReplicas,
+			Status:  properties.GetSuccessOrTransitioning(currentReplicas == desiredNodes),
+			Explain: "the number of k8s nodes that have at least one pod of the node collector daemonset. this number counts the pod objects that were created on this node, regardless of the pod status or revision.",
+		}, &properties.EntityProperty{
+			// The number of nodes that are running pods from the latest version of the daemonset and do not have old pods from previous versions.
+			// if this number is less than the desired number, the daemonset is not fully updated.
+			// it can be due to an active rollout (which is ok), or due to a problem with the nodes / pods
+			// this prevents the daemonset pod from being updated.
+			// this number does not indicate if the pods are indeed running and healthy, only that the only pods scheduled to them is only the latest.
+			Name:    "Updated Nodes",
+			Value:   updatedReplicas,
+			Status:  properties.GetSuccessOrTransitioning(updatedReplicas == desiredNodes),
+			Explain: "the number of k8s nodes that have only the latest version of the node collector daemonset pods. this number counts the pod objects that were created on this node with the latest revision, regardless of the pod status or readiness",
+		}, &properties.EntityProperty{
+			// available nodes are the nodes for which the oldest pod is ready and available.
+			// it can count nodes that are running an old version of the daemonset,
+			// so it alone cannot be used to determine if the daemonset is updated and healthy.
+			Name:    "Available Nodes",
+			Value:   availableNodes,
+			Status:  properties.GetSuccessOrTransitioning(availableNodes == desiredNodes),
+			Explain: "the number of k8s nodes that have at least one pod of the node collector daemonset that is ready and available. this number counts the pod objects that were created on this node, regardless of the pod status or revision.",
+		}
+}
+
+func analyzePodsHealth(pods *corev1.PodList, expectedReplicas int) (*properties.EntityProperty, *properties.EntityProperty, *properties.EntityProperty) {
+	if pods == nil { // should not happen, but check just in case
+		return nil, nil, nil
+	}
+
+	runningReplicas := 0
+	failureReplicas := 0
+	var failureText string
+	for _, pod := range pods.Items {
+		var condition *corev1.PodCondition
+		for i := range pod.Status.Conditions {
+			c := pod.Status.Conditions[i]
+			if c.Type == corev1.PodReady {
+				condition = &c
+				break
+			}
+		}
+		if condition == nil {
+			failureReplicas++
+		} else {
+			if condition.Status == corev1.ConditionTrue {
+				runningReplicas++
+			} else {
+				failureReplicas++
+				failureText = condition.Message
+			}
+		}
+	}
+
+	healthyReplicas := properties.EntityProperty{
+		Name:    "Healthy Replicas",
+		Value:   runningReplicas,
+		Status:  properties.GetSuccessOrTransitioning(runningReplicas == expectedReplicas),
+		Explain: "the number of k8s pods running the updated revision of the cluster collector and are healthy",
+	}
+	unhealthyReplicas := properties.EntityProperty{
+		Name:    "Failed Replicas",
+		Value:   failureReplicas,
+		Status:  properties.GetSuccessOrError(failureReplicas == 0),
+		Explain: "the number of k8s pods running the updated revision of the cluster collector and are not healthy",
+	}
+	if failureText == "" {
+		return &healthyReplicas, &unhealthyReplicas, nil
+	} else {
+		return &healthyReplicas, &unhealthyReplicas, &properties.EntityProperty{
+			Name:    "Failed Replicas Reason",
+			Value:   failureText,
+			Status:  properties.PropertyStatusError,
+			Explain: "if not all replicas are healthy, this error will show the reason",
+		}
+	}
+}
+
+func analyzeClusterCollector(resources *OdigosResources) ClusterCollectorAnalyze {
+
+	isEnabled := len(resources.Destinations.Items) > 0
+
+	enabled := properties.EntityProperty{
+		Name:    "Enabled",
+		Value:   isEnabled,
+		Explain: "should odigos create a cluster collector in the cluster",
+	}
+
+	hasCg := resources.ClusterCollector.CollectorsGroup != nil
+	cg := properties.EntityProperty{
+		Name:    "Collector Group",
+		Value:   properties.GetTextCreated(hasCg),
+		Status:  properties.GetSuccessOrTransitioning(hasCg == isEnabled),
+		Explain: "is the k8s collectors group object for cluster collector exists in the cluster",
+	}
+
+	deployed, deployedError := analyzeDeployed(resources.ClusterCollector.CollectorsGroup)
+	ready := analyzeCollectorReady(resources.ClusterCollector.CollectorsGroup)
+	dep, depExpected, expectedReplicas := analyzeDeployment(resources.ClusterCollector.Deployment, isEnabled)
+	healthyPodsCount, failedPodsCount, failedPodsReason := analyzePodsHealth(resources.ClusterCollector.LatestRevisionPods, expectedReplicas)
+
+	return ClusterCollectorAnalyze{
+		Enabled:              enabled,
+		CollectorGroup:       cg,
+		Deployed:             deployed,
+		DeployedError:        deployedError,
+		CollectorReady:       ready,
+		DeploymentCreated:    dep,
+		ExpectedReplicas:     depExpected,
+		HealthyReplicas:      healthyPodsCount,
+		FailedReplicas:       failedPodsCount,
+		FailedReplicasReason: failedPodsReason,
+	}
+}
+
+func analyzeNodeCollector(resources *OdigosResources) NodeCollectorAnalyze {
+
+	hasClusterCollector := resources.ClusterCollector.CollectorsGroup != nil
+	isClusterCollectorReady := hasClusterCollector && resources.ClusterCollector.CollectorsGroup.Status.Ready
+	hasInstrumentedSources := len(resources.InstrumentationConfigs.Items) > 0
+	isEnabled := hasClusterCollector && isClusterCollectorReady && hasInstrumentedSources
+
+	enabled := properties.EntityProperty{
+		Name:    "Enabled",
+		Value:   isEnabled,
+		Explain: "should odigos deploy node collector daemonset in the cluster",
+	}
+
+	hasCg := resources.ClusterCollector.CollectorsGroup != nil
+	cg := properties.EntityProperty{
+		Name:    "Collector Group",
+		Value:   properties.GetTextCreated(hasCg),
+		Status:  properties.GetSuccessOrTransitioning(hasCg == isEnabled),
+		Explain: "is the k8s collectors group object for node collector exists in the cluster",
+	}
+
+	deployed, deployedError := analyzeDeployed(resources.ClusterCollector.CollectorsGroup)
+	ready := analyzeCollectorReady(resources.ClusterCollector.CollectorsGroup)
+	ds := analyzeDaemonSet(resources.NodeCollector.DaemonSet, isEnabled)
+	// TODO: implement our oun pod lister to figure out how many are updated and ready which isn't available in the daemonset status
+	desiredNodes, currentNodes, updatedNodes, availableNodes := analyzeDsReplicas(resources.NodeCollector.DaemonSet)
+
+	return NodeCollectorAnalyze{
+		Enabled:        enabled,
+		CollectorGroup: cg,
+		Deployed:       deployed,
+		DeployedError:  deployedError,
+		CollectorReady: ready,
+		DaemonSet:      ds,
+		DesiredNodes:   desiredNodes,
+		CurrentNodes:   currentNodes,
+		UpdatedNodes:   updatedNodes,
+		AvailableNodes: availableNodes,
+	}
+}
+
+func summarizeStatus(clusterCollector ClusterCollectorAnalyze, nodeCollector NodeCollectorAnalyze) (bool, bool) {
+	isSettled := true  // everything is settled, unless we find property with status transitioning
+	hasErrors := false // there is no error, unless we find property with status error
+
+	var allProperties = []*properties.EntityProperty{
+		&clusterCollector.Enabled,
+		&clusterCollector.CollectorGroup,
+		clusterCollector.Deployed,
+		clusterCollector.DeployedError,
+		clusterCollector.CollectorReady,
+		&clusterCollector.DeploymentCreated,
+		clusterCollector.ExpectedReplicas,
+		clusterCollector.HealthyReplicas,
+		clusterCollector.FailedReplicas,
+		clusterCollector.FailedReplicasReason,
+		&nodeCollector.Enabled,
+		&nodeCollector.CollectorGroup,
+		nodeCollector.Deployed,
+		nodeCollector.DeployedError,
+		nodeCollector.CollectorReady,
+		&nodeCollector.DaemonSet,
+		nodeCollector.DesiredNodes,
+		nodeCollector.CurrentNodes,
+		nodeCollector.UpdatedNodes,
+		nodeCollector.AvailableNodes,
+	}
+
+	for _, property := range allProperties {
+		if property == nil {
+			continue
+		}
+		switch property.Status {
+		case properties.PropertyStatusError:
+			hasErrors = true
+		case properties.PropertyStatusTransitioning:
+			isSettled = false
+		}
+	}
+
+	return isSettled, hasErrors
+}
+
+func AnalyzeOdigos(resources *OdigosResources) *OdigosAnalyze {
+	clusterCollector := analyzeClusterCollector(resources)
+	nodeCollector := analyzeNodeCollector(resources)
+	isSettled, hasErrors := summarizeStatus(clusterCollector, nodeCollector)
+	odigosVersion := properties.EntityProperty{
+		Name:  "Odigos Version",
+		Value: resources.OdigosVersion,
+	}
+
+	return &OdigosAnalyze{
+		OdigosVersion:        odigosVersion,
+		NumberOfDestinations: len(resources.Destinations.Items),
+		NumberOfSources:      len(resources.InstrumentationConfigs.Items),
+		ClusterCollector:     clusterCollector,
+		NodeCollector:        nodeCollector,
+
+		IsSettled: isSettled,
+		HasErrors: hasErrors,
+	}
+}
diff --git a/k8sutils/pkg/describe/odigos/resources.go b/k8sutils/pkg/describe/odigos/resources.go
new file mode 100644
index 000000000..e0080befa
--- /dev/null
+++ b/k8sutils/pkg/describe/odigos/resources.go
@@ -0,0 +1,151 @@
+package odigos
+
+import (
+	"context"
+	"fmt"
+
+	odigosclientset "github.com/odigos-io/odigos/api/generated/odigos/clientset/versioned/typed/odigos/v1alpha1"
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
+	"github.com/odigos-io/odigos/k8sutils/pkg/getters"
+	appsv1 "k8s.io/api/apps/v1"
+	corev1 "k8s.io/api/core/v1"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/client-go/kubernetes"
+)
+
+type ClusterCollectorResources struct {
+	CollectorsGroup    *odigosv1.CollectorsGroup
+	Deployment         *appsv1.Deployment
+	LatestRevisionPods *corev1.PodList
+}
+
+type NodeCollectorResources struct {
+	CollectorsGroup *odigosv1.CollectorsGroup
+	DaemonSet       *appsv1.DaemonSet
+}
+
+type OdigosResources struct {
+	OdigosVersion          string
+	ClusterCollector       ClusterCollectorResources
+	NodeCollector          NodeCollectorResources
+	Destinations           *odigosv1.DestinationList
+	InstrumentationConfigs *odigosv1.InstrumentationConfigList
+}
+
+func getClusterCollectorResources(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, odigosNs string) (*ClusterCollectorResources, error) {
+
+	clusterCollector := ClusterCollectorResources{}
+
+	cg, err := odigosClient.CollectorsGroups(odigosNs).Get(ctx, consts.OdigosClusterCollectorCollectorGroupName, metav1.GetOptions{})
+	if err == nil {
+		clusterCollector.CollectorsGroup = cg
+	} else if !apierrors.IsNotFound(err) {
+		return nil, err
+	}
+
+	dep, err := kubeClient.AppsV1().Deployments(odigosNs).Get(ctx, consts.OdigosClusterCollectorDeploymentName, metav1.GetOptions{})
+	if err == nil {
+		clusterCollector.Deployment = dep
+	} else if !apierrors.IsNotFound(err) {
+		return nil, err
+	}
+
+	var clusterRoleRevision string
+	if dep != nil {
+		revisionAnnotation, found := dep.Annotations["deployment.kubernetes.io/revision"]
+		if found {
+			clusterRoleRevision = revisionAnnotation
+		}
+	}
+
+	// get only cluster role replicasets
+	if clusterRoleRevision != "" {
+		deploymentRs, errRs := kubeClient.AppsV1().ReplicaSets(odigosNs).List(ctx, metav1.ListOptions{
+			LabelSelector: metav1.FormatLabelSelector(clusterCollector.Deployment.Spec.Selector),
+		})
+		if errRs != nil {
+			return nil, errRs
+		}
+
+		var latestRevisionReplicaSet *appsv1.ReplicaSet
+		for i := range deploymentRs.Items {
+			rs := &deploymentRs.Items[i]
+			if rs.Annotations["deployment.kubernetes.io/revision"] == clusterRoleRevision {
+				latestRevisionReplicaSet = rs
+				break
+			}
+		}
+
+		if latestRevisionReplicaSet != nil {
+			podTemplateHash := latestRevisionReplicaSet.Labels["pod-template-hash"]
+			clusterCollector.LatestRevisionPods, err = kubeClient.CoreV1().Pods(odigosNs).List(ctx, metav1.ListOptions{
+				LabelSelector: fmt.Sprintf("pod-template-hash=%s", podTemplateHash),
+			})
+			if err != nil {
+				return nil, err
+			}
+		}
+	}
+
+	return &clusterCollector, nil
+}
+
+func getNodeCollectorResources(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, odigosNs string) (*NodeCollectorResources, error) {
+
+	nodeCollector := NodeCollectorResources{}
+
+	cg, err := odigosClient.CollectorsGroups(odigosNs).Get(ctx, consts.OdigosNodeCollectorCollectorGroupName, metav1.GetOptions{})
+	if err == nil {
+		nodeCollector.CollectorsGroup = cg
+	} else if !apierrors.IsNotFound(err) {
+		return nil, err
+	}
+
+	ds, err := kubeClient.AppsV1().DaemonSets(odigosNs).Get(ctx, consts.OdigosNodeCollectorDaemonSetName, metav1.GetOptions{})
+	if err == nil {
+		nodeCollector.DaemonSet = ds
+	} else if !apierrors.IsNotFound(err) {
+		return nil, err
+	}
+
+	return &nodeCollector, nil
+}
+
+func GetRelevantOdigosResources(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, odigosNs string) (*OdigosResources, error) {
+
+	odigos := OdigosResources{}
+
+	odigosVersion, err := getters.GetOdigosVersionInClusterFromConfigMap(ctx, kubeClient, odigosNs)
+	if err != nil {
+		return nil, err
+	}
+	odigos.OdigosVersion = odigosVersion
+
+	cc, err := getClusterCollectorResources(ctx, kubeClient, odigosClient, odigosNs)
+	if err != nil {
+		return nil, err
+	}
+	odigos.ClusterCollector = *cc
+
+	nc, err := getNodeCollectorResources(ctx, kubeClient, odigosClient, odigosNs)
+	if err != nil {
+		return nil, err
+	}
+	odigos.NodeCollector = *nc
+
+	dest, err := odigosClient.Destinations(odigosNs).List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	odigos.Destinations = dest
+
+	ics, err := odigosClient.InstrumentationConfigs("").List(ctx, metav1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
+	odigos.InstrumentationConfigs = ics
+
+	return &odigos, nil
+}
diff --git a/k8sutils/pkg/describe/properties/properties.go b/k8sutils/pkg/describe/properties/properties.go
new file mode 100644
index 000000000..668af23ad
--- /dev/null
+++ b/k8sutils/pkg/describe/properties/properties.go
@@ -0,0 +1,33 @@
+package properties
+
+type PropertyStatus string
+
+const (
+
+	// the property is in it's desired state
+	PropertyStatusSuccess PropertyStatus = "success"
+
+	// the property is not in it's desired state, but it's state might be temporary
+	// if wait some time, it might reconcile to the desired state (or not)
+	PropertyStatusTransitioning PropertyStatus = "transitioning"
+
+	// the property is not in it's desired state, and it's state is not expected to change
+	PropertyStatusError PropertyStatus = "error"
+)
+
+type EntityProperty struct {
+
+	// The name of the property being described
+	Name string `json:"name"`
+
+	// Explain is a human readable explanation of the property
+	// it is static describe the property itself and not the current value.
+	// this is optional and can be empty
+	Explain string `json:"explain,omitempty"`
+
+	// The value to display for this property
+	Value interface{} `json:"value"`
+
+	// The status of the property actual state
+	Status PropertyStatus `json:"status,omitempty"`
+}
diff --git a/k8sutils/pkg/describe/properties/utils.go b/k8sutils/pkg/describe/properties/utils.go
new file mode 100644
index 000000000..b182f7367
--- /dev/null
+++ b/k8sutils/pkg/describe/properties/utils.go
@@ -0,0 +1,25 @@
+package properties
+
+func GetTextCreated(created bool) string {
+	if created {
+		return "created"
+	} else {
+		return "not created"
+	}
+}
+
+func GetSuccessOrTransitioning(matchExpected bool) PropertyStatus {
+	if matchExpected {
+		return PropertyStatusSuccess
+	} else {
+		return PropertyStatusTransitioning
+	}
+}
+
+func GetSuccessOrError(matchExpected bool) PropertyStatus {
+	if matchExpected {
+		return PropertyStatusSuccess
+	} else {
+		return PropertyStatusError
+	}
+}
diff --git a/k8sutils/pkg/describe/source.go b/k8sutils/pkg/describe/source.go
index b615c17d3..d5bf6a75e 100644
--- a/k8sutils/pkg/describe/source.go
+++ b/k8sutils/pkg/describe/source.go
@@ -6,465 +6,178 @@ import (
 	"strings"
 
 	odigosclientset "github.com/odigos-io/odigos/api/generated/odigos/clientset/versioned/typed/odigos/v1alpha1"
-	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"github.com/odigos-io/odigos/common"
-	"github.com/odigos-io/odigos/common/consts"
-	"github.com/odigos-io/odigos/k8sutils/pkg/envoverwrite"
-	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
-	corev1 "k8s.io/api/core/v1"
-	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	"github.com/odigos-io/odigos/k8sutils/pkg/describe/source"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-	"k8s.io/apimachinery/pkg/labels"
 	"k8s.io/client-go/kubernetes"
 )
 
-type K8sSourceObject struct {
-	metav1.ObjectMeta
-	Kind            string
-	PodTemplateSpec *corev1.PodTemplateSpec
-	LabelSelector   *metav1.LabelSelector
-}
-
-func getInstrumentationLabelTexts(workload *K8sSourceObject, ns *corev1.Namespace) (workloadText, nsText, decisionText string, instrumented bool) {
-	workloadLabel, workloadFound := workload.GetLabels()[consts.OdigosInstrumentationLabel]
-	nsLabel, nsFound := ns.GetLabels()[consts.OdigosInstrumentationLabel]
-
-	if workloadFound {
-		workloadText = consts.OdigosInstrumentationLabel + "=" + workloadLabel
-	} else {
-		workloadText = consts.OdigosInstrumentationLabel + " label not set"
-	}
-
-	if nsFound {
-		nsText = consts.OdigosInstrumentationLabel + "=" + nsLabel
-	} else {
-		nsText = consts.OdigosInstrumentationLabel + " label not set"
-	}
-
-	if workloadFound {
-		instrumented = workloadLabel == consts.InstrumentationEnabled
-		if instrumented {
-			decisionText = "Workload is instrumented because the " + workload.Kind + " contains the label '" + consts.OdigosInstrumentationLabel + "=" + workloadLabel + "'"
-		} else {
-			decisionText = "Workload is NOT instrumented because the " + workload.Kind + " contains the label '" + consts.OdigosInstrumentationLabel + "=" + workloadLabel + "'"
-		}
-	} else {
-		instrumented = nsLabel == consts.InstrumentationEnabled
-		if instrumented {
-			decisionText = "Workload is instrumented because the " + workload.Kind + " is not labeled, and the namespace is labeled with '" + consts.OdigosInstrumentationLabel + "=" + nsLabel + "'"
-		} else {
-			if nsFound {
-				decisionText = "Workload is NOT instrumented because the " + workload.Kind + " is not labeled, and the namespace is labeled with '" + consts.OdigosInstrumentationLabel + "=" + nsLabel + "'"
-			} else {
-				decisionText = "Workload is NOT instrumented because neither the workload nor the namespace has the '" + consts.OdigosInstrumentationLabel + "' label set"
-			}
-		}
-	}
-
-	return
-}
-
-func getRelevantSourceResources(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, workloadObj *K8sSourceObject) (namespace *corev1.Namespace, instrumentationConfig *odigosv1.InstrumentationConfig, instrumentedApplication *odigosv1.InstrumentedApplication, instrumentationInstances *odigosv1.InstrumentationInstanceList, pods *corev1.PodList, err error) {
-
-	ns := workloadObj.GetNamespace()
-	namespace, err = kubeClient.CoreV1().Namespaces().Get(ctx, ns, metav1.GetOptions{})
-	if err != nil {
-		return
-	}
-
-	runtimeObjectName := workload.CalculateWorkloadRuntimeObjectName(workloadObj.GetName(), workloadObj.Kind)
-	instrumentationConfig, err = odigosClient.InstrumentationConfigs(ns).Get(ctx, runtimeObjectName, metav1.GetOptions{})
-	if err != nil {
-		if apierrors.IsNotFound(err) {
-			// it is ok if the instrumentation config is not found
-			err = nil
-			instrumentationConfig = nil
-		} else {
-			return
-		}
-	}
-
-	instrumentedApplication, err = odigosClient.InstrumentedApplications(ns).Get(ctx, runtimeObjectName, metav1.GetOptions{})
-	if err != nil {
-		if apierrors.IsNotFound(err) {
-			// it is ok if the instrumented application is not found
-			err = nil
-			instrumentedApplication = nil
-		} else {
-			return
-		}
-	}
-
-	instrumentedAppSelector := labels.SelectorFromSet(labels.Set{
-		"instrumented-app": runtimeObjectName,
-	})
-	instrumentationInstances, err = odigosClient.InstrumentationInstances(ns).List(ctx, metav1.ListOptions{LabelSelector: instrumentedAppSelector.String()})
-	if err != nil {
-		// if no instrumentation instances are found, it should not error, so any error is returned
-		return
-	}
-
-	podLabelSelector := metav1.FormatLabelSelector(workloadObj.LabelSelector)
-	if err != nil {
-		// if pod info cannot be extracted, it is an unrecoverable error
-		return
-	}
-	pods, err = kubeClient.CoreV1().Pods(ns).List(ctx, metav1.ListOptions{LabelSelector: podLabelSelector})
-	if err != nil {
-		// if no pods are found, it should not error, so any error is returned
-		return
-	}
-
-	return
-}
-
-func printWorkloadManifestInfo(workloadObj *K8sSourceObject, namespace *corev1.Namespace, sb *strings.Builder) bool {
-	sb.WriteString(fmt.Sprintf("Name: %s\n", workloadObj.GetName()))
-	sb.WriteString(fmt.Sprintf("Kind: %s\n", workloadObj.Kind))
-	sb.WriteString(fmt.Sprintf("Namespace: %s\n\n", workloadObj.GetNamespace()))
+func printWorkloadManifestInfo(analyze *source.SourceAnalyze, sb *strings.Builder) {
+	printProperty(sb, 0, &analyze.Name)
+	printProperty(sb, 0, &analyze.Kind)
+	printProperty(sb, 0, &analyze.Namespace)
 
 	sb.WriteString("Labels:\n")
-	workloadText, nsText, decisionText, instrumented := getInstrumentationLabelTexts(workloadObj, namespace)
-	if instrumented {
-		sb.WriteString("  Instrumented: " + wrapTextInGreen("true") + "\n")
-	} else {
-		sb.WriteString("  Instrumented: " + wrapTextInRed("false") + "\n")
-	}
-	sb.WriteString("  Workload: " + workloadText + "\n")
-	sb.WriteString("  Namespace: " + nsText + "\n")
-	sb.WriteString("  Decision: " + decisionText + "\n")
-	sb.WriteString("  Troubleshooting: https://docs.odigos.io/architecture/troubleshooting#1-odigos-instrumentation-label\n")
-
-	return instrumented
+	printProperty(sb, 1, &analyze.Labels.Instrumented)
+	printProperty(sb, 1, analyze.Labels.Workload)
+	printProperty(sb, 1, analyze.Labels.Namespace)
+	printProperty(sb, 1, &analyze.Labels.InstrumentedText)
 }
 
-func printInstrumentationConfigInfo(instrumentationConfig *odigosv1.InstrumentationConfig, instrumented bool, sb *strings.Builder) {
-	instrumentationConfigNotFound := instrumentationConfig == nil
-	statusAsExpected := instrumentationConfigNotFound == !instrumented
-	sb.WriteString("\nInstrumentation Config:\n")
-	if instrumentationConfigNotFound {
-		if statusAsExpected {
-			sb.WriteString(wrapTextInGreen("  Workload not instrumented, no instrumentation config\n"))
-		} else {
-			sb.WriteString("  Not yet created\n")
-		}
-	} else {
-		createAtText := "  Created at " + instrumentationConfig.GetCreationTimestamp().String()
-		sb.WriteString(wrapTextSuccessOfFailure(createAtText, statusAsExpected) + "\n")
-	}
-
-	if !statusAsExpected {
-		sb.WriteString("  Troubleshooting: https://docs.odigos.io/architecture/troubleshooting#2-odigos-instrumentation-config\n")
-	}
+func printInstrumentationConfigInfo(analyze *source.SourceAnalyze, sb *strings.Builder) {
+	describeText(sb, 0, "\nInstrumentation Config:")
+	printProperty(sb, 1, &analyze.InstrumentationConfig.Created)
+	printProperty(sb, 1, analyze.InstrumentationConfig.CreateTime)
 }
 
-func printRuntimeDetails(instrumentationConfig *odigosv1.InstrumentationConfig, instrumented bool, sb *strings.Builder) {
-	if instrumentationConfig == nil {
-		sb.WriteString("No runtime details\n")
+func printRuntimeDetails(analyze *source.SourceAnalyze, sb *strings.Builder) {
+	describeText(sb, 0, "\nRuntime Inspection Details (new):")
+
+	if analyze.RuntimeInfo == nil {
+		describeText(sb, 1, "No runtime details")
 		return
 	}
 
-	sb.WriteString("\nRuntime inspection details (new):\n")
-	sb.WriteString(fmt.Sprintf("Workload generation: %d\n", instrumentationConfig.Status.ObservedWorkloadGeneration))
-	for _, container := range instrumentationConfig.Status.RuntimeDetailsByContainer {
-		sb.WriteString(fmt.Sprintf("  Container Name: %s\n", container.ContainerName))
-		colorfulLanguage := string(container.Language)
-		isUnknown := container.Language == common.UnknownProgrammingLanguage
-		if isUnknown {
-			colorfulLanguage = wrapTextInRed(string(container.Language))
-		} else if container.Language != common.IgnoredProgrammingLanguage {
-			colorfulLanguage = wrapTextInGreen(string(container.Language))
-		}
-		sb.WriteString("    Language:      " + colorfulLanguage + "\n")
-		if isUnknown {
-			sb.WriteString("    Troubleshooting: http://localhost:3000/architecture/troubleshooting#4-language-not-detected\n")
-		}
-		if container.RuntimeVersion != "" {
-			sb.WriteString("    Runtime Version: " + container.RuntimeVersion + "\n")
-		} else {
-			sb.WriteString("    Runtime Version: not detected\n")
-		}
-
-		// calculate env vars for this container
-		if container.EnvVars != nil && len(container.EnvVars) > 0 {
-			sb.WriteString("    Relevant Environment Variables:\n")
+	printProperty(sb, 1, &analyze.RuntimeInfo.Generation)
+	describeText(sb, 1, "Detected Containers:")
+	for _, container := range analyze.RuntimeInfo.Containers {
+		printProperty(sb, 2, &container.ContainerName)
+		printProperty(sb, 3, &container.Language)
+		printProperty(sb, 3, &container.RuntimeVersion)
+		if len(container.EnvVars) > 0 {
+			describeText(sb, 3, "Relevant Environment Variables:")
 			for _, envVar := range container.EnvVars {
-				sb.WriteString(fmt.Sprintf("      - %s: %s\n", envVar.Name, envVar.Value))
+				describeText(sb, 4, fmt.Sprintf("%s: %s", envVar.Name, envVar.Value))
 			}
 		}
 	}
 }
 
-func printInstrumentedApplicationInfo(instrumentedApplication *odigosv1.InstrumentedApplication, instrumented bool, sb *strings.Builder) {
-	instrumentedApplicationNotFound := instrumentedApplication == nil
-	statusAsExpected := instrumentedApplicationNotFound == !instrumented
-	sb.WriteString("\nRuntime inspection details (old):\n")
-	if instrumentedApplicationNotFound {
-		if instrumented {
-			sb.WriteString("  Not yet created\n")
-		} else {
-			sb.WriteString(wrapTextInGreen("  Workload not instrumented, no runtime details\n"))
-		}
-	} else {
-		createdAtText := "  Created at " + instrumentedApplication.GetCreationTimestamp().String()
-		sb.WriteString(wrapTextSuccessOfFailure(createdAtText, statusAsExpected) + "\n")
-		sb.WriteString("  Detected Containers:\n")
-		for _, container := range instrumentedApplication.Spec.RuntimeDetails {
-			sb.WriteString(fmt.Sprintf("    - Container Name: %s\n", container.ContainerName))
-			colorfulLanguage := string(container.Language)
-			isUnknown := container.Language == common.UnknownProgrammingLanguage
-			if isUnknown {
-				colorfulLanguage = wrapTextInRed(string(container.Language))
-			} else if container.Language != common.IgnoredProgrammingLanguage {
-				colorfulLanguage = wrapTextInGreen(string(container.Language))
-			}
-			sb.WriteString("      Language:      " + colorfulLanguage + "\n")
-			if isUnknown {
-				sb.WriteString("      Troubleshooting: http://localhost:3000/architecture/troubleshooting#4-language-not-detected\n")
-			}
-			if container.RuntimeVersion != "" {
-				sb.WriteString("      Runtime Version: " + container.RuntimeVersion + "\n")
-			} else {
-				sb.WriteString("      Runtime Version: not detected\n")
-			}
+func printInstrumentedApplicationInfo(analyze *source.SourceAnalyze, sb *strings.Builder) {
 
-			// calculate env vars for this container
-			if container.EnvVars != nil && len(container.EnvVars) > 0 {
-				sb.WriteString("      Relevant Environment Variables:\n")
-				for _, envVar := range container.EnvVars {
-					sb.WriteString(fmt.Sprintf("        - %s: %s\n", envVar.Name, envVar.Value))
-				}
+	describeText(sb, 0, "\nRuntime Inspection Details (old):")
+	printProperty(sb, 1, &analyze.InstrumentedApplication.Created)
+	printProperty(sb, 1, analyze.InstrumentedApplication.CreateTime)
+
+	describeText(sb, 1, "Detected Containers:")
+	for _, container := range analyze.InstrumentedApplication.Containers {
+		printProperty(sb, 2, &container.ContainerName)
+		printProperty(sb, 3, &container.Language)
+		printProperty(sb, 3, &container.RuntimeVersion)
+		if len(container.EnvVars) > 0 {
+			describeText(sb, 3, "Relevant Environment Variables:")
+			for _, envVar := range container.EnvVars {
+				describeText(sb, 4, fmt.Sprintf("%s: %s", envVar.Name, envVar.Value))
 			}
 		}
 	}
-	if !statusAsExpected {
-		sb.WriteString("  Troubleshooting: https://docs.odigos.io/architecture/troubleshooting#3-odigos-instrumented-application\n")
-	}
 }
 
-func printAppliedInstrumentationDeviceInfo(workloadObj *K8sSourceObject, instrumentedApplication *odigosv1.InstrumentedApplication, instrumented bool, sb *strings.Builder) map[string][]string {
-	appliedInstrumentationDeviceStatusMessage := "Unknown"
-	if !instrumented {
-		// if the workload is not instrumented, the instrumentation device expected
-		appliedInstrumentationDeviceStatusMessage = "No instrumentation devices expected"
-	}
-	if instrumentedApplication != nil && instrumentedApplication.Status.Conditions != nil {
-		for _, condition := range instrumentedApplication.Status.Conditions {
-			if condition.Type == "AppliedInstrumentationDevice" { // TODO: share this constant with instrumentor
-				if condition.ObservedGeneration == instrumentedApplication.GetGeneration() {
-					appliedInstrumentationDeviceStatusMessage = wrapTextSuccessOfFailure(condition.Message, condition.Status == metav1.ConditionTrue)
-				} else {
-					appliedInstrumentationDeviceStatusMessage = "Not yet reconciled"
-				}
-				break
-			}
-		}
-	}
-	// get original env vars:
-	origWorkloadEnvValues, _ := envoverwrite.NewOrigWorkloadEnvValues(workloadObj.GetAnnotations())
-	sb.WriteString("\nInstrumentation Device:\n")
-	sb.WriteString("  Status: " + appliedInstrumentationDeviceStatusMessage + "\n")
-	containerNameToExpectedDevices := make(map[string][]string)
-	for _, container := range workloadObj.PodTemplateSpec.Spec.Containers {
-		sb.WriteString(fmt.Sprintf("  - Container Name: %s\n", container.Name))
-		odigosDevices := make([]string, 0)
-		for resourceName := range container.Resources.Limits {
-			deviceName, found := strings.CutPrefix(resourceName.String(), common.OdigosResourceNamespace+"/")
-			if found {
-				odigosDevices = append(odigosDevices, deviceName)
-			}
-		}
-		if len(odigosDevices) == 0 {
-			if !instrumented {
-				sb.WriteString(wrapTextInGreen("    No instrumentation devices\n"))
-			} else {
-				sb.WriteString("    No instrumentation devices\n")
-				sb.WriteString("    Troubleshooting: https://docs.odigos.io/architecture/troubleshooting#5-odigos-instrumentation-devices-not-added\n")
-			}
-		} else {
-			sb.WriteString("    Instrumentation Devices: " + wrapTextSuccessOfFailure(strings.Join(odigosDevices, ", "), instrumented) + "\n")
-			if !instrumented {
-				sb.WriteString("	 Troubleshooting: https://docs.odigos.io/architecture/troubleshooting#5-odigos-instrumentation-devices-not-added\n")
-			}
-		}
-		containerNameToExpectedDevices[container.Name] = odigosDevices
+func printAppliedInstrumentationDeviceInfo(analyze *source.SourceAnalyze, sb *strings.Builder) {
 
-		// override environment variables
-		originalContainerEnvs := origWorkloadEnvValues.GetContainerStoredEnvs(container.Name)
-		if originalContainerEnvs != nil && len(originalContainerEnvs) > 0 {
-			sb.WriteString("    Original Environment Variables:\n")
-			for envName, envVarOriginalValue := range originalContainerEnvs {
-				if envVarOriginalValue == nil {
-					sb.WriteString("    - " + envName + "=null (not set in manifest)\n")
-				} else {
-					sb.WriteString("    - " + envName + "=" + *envVarOriginalValue + "\n")
-				}
+	describeText(sb, 0, "\nInstrumentation Device:")
+	printProperty(sb, 1, &analyze.InstrumentationDevice.StatusText)
+	describeText(sb, 1, "Containers:")
+	for _, container := range analyze.InstrumentationDevice.Containers {
+		printProperty(sb, 2, &container.ContainerName)
+		printProperty(sb, 3, &container.Devices)
+		if len(container.OriginalEnv) > 0 {
+			describeText(sb, 3, "Original Environment Variables:")
+			for _, envVar := range container.OriginalEnv {
+				printProperty(sb, 4, &envVar)
 			}
 		}
 	}
-
-	return containerNameToExpectedDevices
 }
 
-func printPodContainerInstrumentationInstancesInfo(instances []*odigosv1.InstrumentationInstance, sb *strings.Builder) {
-	if len(instances) == 0 {
-		sb.WriteString("    No instrumentation instances\n")
-		return
-	}
+func printPodsInfo(analyze *source.SourceAnalyze, sb *strings.Builder) {
 
-	sb.WriteString("    Instrumentation Instances:\n")
-	for _, instance := range instances {
-		unhealthy := false
-		healthyText := "unknown"
-		if instance.Status.Healthy != nil {
-			if *instance.Status.Healthy {
-				healthyText = wrapTextInGreen("true")
-			} else {
-				healthyText = wrapTextInRed("false")
-				unhealthy = true
+	describeText(sb, 0, "\nPods (Total %d, %s):", analyze.TotalPods, analyze.PodsPhasesCount)
+
+	for _, pod := range analyze.Pods {
+		describeText(sb, 0, "")
+		printProperty(sb, 1, &pod.PodName)
+		printProperty(sb, 1, &pod.NodeName)
+		printProperty(sb, 1, &pod.Phase)
+		describeText(sb, 1, "Containers:")
+		for _, container := range pod.Containers {
+			printProperty(sb, 2, &container.ContainerName)
+			printProperty(sb, 3, &container.ActualDevices)
+			describeText(sb, 3, "")
+			describeText(sb, 3, "Instrumentation Instances:")
+			for _, ii := range container.InstrumentationInstances {
+				printProperty(sb, 4, &ii.Healthy)
+				printProperty(sb, 4, ii.Message)
+				if len(ii.IdentifyingAttributes) > 0 {
+					describeText(sb, 4, "Identifying Attributes:")
+					for _, attr := range ii.IdentifyingAttributes {
+						printProperty(sb, 5, &attr)
+					}
+				}
 			}
 		}
-		sb.WriteString(fmt.Sprintf("    - Healthy: %s\n", healthyText))
-		if instance.Status.Message != "" {
-			sb.WriteString(fmt.Sprintf("      Message: %s\n", instance.Status.Message))
-		}
-		if instance.Status.Reason != "" && instance.Status.Reason != string(common.AgentHealthStatusHealthy) {
-			sb.WriteString(fmt.Sprintf("      Reason: %s\n", instance.Status.Reason))
-		}
-		if unhealthy {
-			sb.WriteString("      Troubleshooting: https://docs.odigos.io/architecture/troubleshooting#7-instrumentation-instance-unhealthy\n")
-		}
 	}
 }
 
-func printPodContainerInfo(pod *corev1.Pod, container *corev1.Container, instrumentationInstances *odigosv1.InstrumentationInstanceList, containerNameToExpectedDevices map[string][]string, sb *strings.Builder) {
-	instrumentationDevices := make([]string, 0)
-	sb.WriteString(fmt.Sprintf("  - Container Name: %s\n", container.Name))
-	for resourceName := range container.Resources.Limits {
-		deviceName, found := strings.CutPrefix(resourceName.String(), common.OdigosResourceNamespace+"/")
-		if found {
-			instrumentationDevices = append(instrumentationDevices, deviceName)
-		}
-	}
-	expectedDevices, foundExpectedDevices := containerNameToExpectedDevices[container.Name]
-	if len(instrumentationDevices) == 0 {
-		isMatch := !foundExpectedDevices || len(expectedDevices) == 0
-		sb.WriteString(wrapTextSuccessOfFailure("    No instrumentation devices", isMatch) + "\n")
-		if !isMatch {
-			sb.WriteString("      Expected Devices: " + strings.Join(expectedDevices, ", ") + "\n")
-			sb.WriteString("      Troubleshooting: https://docs.odigos.io/architecture/troubleshooting#6-pods-instrumentation-devices-not-matching-manifest\n")
-		}
-	} else {
-		actualDevicesText := strings.Join(instrumentationDevices, ", ")
-		expectedDevicesText := strings.Join(expectedDevices, ", ")
-		isMatch := actualDevicesText == expectedDevicesText
-		sb.WriteString("    Instrumentation Devices: " + wrapTextSuccessOfFailure(actualDevicesText, isMatch) + "\n")
-		if !isMatch {
-			sb.WriteString("      Expected Devices: " + expectedDevicesText + "\n")
-			sb.WriteString("      Troubleshooting: https://docs.odigos.io/architecture/troubleshooting#6-pods-instrumentation-devices-not-matching-manifest\n")
-		}
-	}
-
-	// find the instrumentation instances for this pod
-	thisPodInstrumentationInstances := make([]*odigosv1.InstrumentationInstance, 0)
-	for _, instance := range instrumentationInstances.Items {
-		if len(instance.OwnerReferences) != 1 || instance.OwnerReferences[0].Kind != "Pod" {
-			continue
-		}
-		if instance.OwnerReferences[0].Name != pod.GetName() {
-			continue
-		}
-		if instance.Spec.ContainerName != container.Name {
-			continue
-		}
-		thisPodInstrumentationInstances = append(thisPodInstrumentationInstances, &instance)
-	}
-	printPodContainerInstrumentationInstancesInfo(thisPodInstrumentationInstances, sb)
-}
+func DescribeSourceToText(analyze *source.SourceAnalyze) string {
+	var sb strings.Builder
 
-func printSinglePodInfo(pod *corev1.Pod, instrumentationInstances *odigosv1.InstrumentationInstanceList, containerNameToExpectedDevices map[string][]string, sb *strings.Builder) {
-	sb.WriteString(fmt.Sprintf("\n  Pod Name: %s\n", pod.GetName()))
-	sb.WriteString(fmt.Sprintf("  Pod Phase: %s\n", pod.Status.Phase))
-	sb.WriteString(fmt.Sprintf("  Pod Node Name: %s\n", pod.Spec.NodeName))
-	sb.WriteString("  Containers:\n")
-	for _, container := range pod.Spec.Containers {
-		printPodContainerInfo(pod, &container, instrumentationInstances, containerNameToExpectedDevices, sb)
-	}
-}
+	printWorkloadManifestInfo(analyze, &sb)
+	printInstrumentationConfigInfo(analyze, &sb)
+	printRuntimeDetails(analyze, &sb)
+	printInstrumentedApplicationInfo(analyze, &sb)
+	printAppliedInstrumentationDeviceInfo(analyze, &sb)
+	printPodsInfo(analyze, &sb)
 
-func printPodsInfo(pods *corev1.PodList, instrumentationInstances *odigosv1.InstrumentationInstanceList, containerNameToExpectedDevices map[string][]string, sb *strings.Builder) {
-	podsStatuses := make(map[corev1.PodPhase]int)
-	for _, pod := range pods.Items {
-		podsStatuses[pod.Status.Phase]++
-	}
-	podPhasesTexts := make([]string, 0)
-	for phase, count := range podsStatuses {
-		podPhasesTexts = append(podPhasesTexts, fmt.Sprintf("%s %d", phase, count))
-	}
-	podPhasesText := strings.Join(podPhasesTexts, ", ")
-	sb.WriteString(fmt.Sprintf("\nPods (Total %d, %s):\n", len(pods.Items), podPhasesText))
-	for _, pod := range pods.Items {
-		printSinglePodInfo(&pod, instrumentationInstances, containerNameToExpectedDevices, sb)
-	}
+	return sb.String()
 }
 
-func PrintDescribeSource(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, workloadObj *K8sSourceObject) string {
-	var sb strings.Builder
-
-	namespace, instrumentationConfig, instrumentedApplication, instrumentationInstances, pods, err := getRelevantSourceResources(ctx, kubeClient, odigosClient, workloadObj)
+func DescribeSource(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, workloadObj *source.K8sSourceObject) (*source.SourceAnalyze, error) {
+	resources, err := source.GetRelevantSourceResources(ctx, kubeClient, odigosClient, workloadObj)
 	if err != nil {
-		sb.WriteString(fmt.Sprintf("Error: %v\n", err))
-		return sb.String()
+		return nil, err
 	}
-
-	instrumented := printWorkloadManifestInfo(workloadObj, namespace, &sb)
-	printInstrumentationConfigInfo(instrumentationConfig, instrumented, &sb)
-	printRuntimeDetails(instrumentationConfig, instrumented, &sb)
-	printInstrumentedApplicationInfo(instrumentedApplication, instrumented, &sb)
-	containerNameToExpectedDevices := printAppliedInstrumentationDeviceInfo(workloadObj, instrumentedApplication, instrumented, &sb)
-	printPodsInfo(pods, instrumentationInstances, containerNameToExpectedDevices, &sb)
-
-	return sb.String()
+	analyze := source.AnalyzeSource(resources, workloadObj)
+	return analyze, nil
 }
 
-func DescribeDeployment(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, ns string, name string) string {
+func DescribeDeployment(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, ns string, name string) (*source.SourceAnalyze, error) {
 	deployment, err := kubeClient.AppsV1().Deployments(ns).Get(ctx, name, metav1.GetOptions{})
 	if err != nil {
-		return fmt.Sprintf("Error: %v\n", err)
+		return nil, err
 	}
-	workloadObj := &K8sSourceObject{
+	workloadObj := &source.K8sSourceObject{
 		Kind:            "deployment",
 		ObjectMeta:      deployment.ObjectMeta,
 		PodTemplateSpec: &deployment.Spec.Template,
 		LabelSelector:   deployment.Spec.Selector,
 	}
-	return PrintDescribeSource(ctx, kubeClient, odigosClient, workloadObj)
+	return DescribeSource(ctx, kubeClient, odigosClient, workloadObj)
 }
 
-func DescribeDaemonSet(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, ns string, name string) string {
+func DescribeDaemonSet(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, ns string, name string) (*source.SourceAnalyze, error) {
 	ds, err := kubeClient.AppsV1().DaemonSets(ns).Get(ctx, name, metav1.GetOptions{})
 	if err != nil {
-		return fmt.Sprintf("Error: %v\n", err)
+		return nil, err
 	}
-	workloadObj := &K8sSourceObject{
+	workloadObj := &source.K8sSourceObject{
 		Kind:            "daemonset",
 		ObjectMeta:      ds.ObjectMeta,
 		PodTemplateSpec: &ds.Spec.Template,
 		LabelSelector:   ds.Spec.Selector,
 	}
-	return PrintDescribeSource(ctx, kubeClient, odigosClient, workloadObj)
+	return DescribeSource(ctx, kubeClient, odigosClient, workloadObj)
 }
 
-func DescribeStatefulSet(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, ns string, name string) string {
+func DescribeStatefulSet(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, ns string, name string) (*source.SourceAnalyze, error) {
 	ss, err := kubeClient.AppsV1().StatefulSets(ns).Get(ctx, name, metav1.GetOptions{})
 	if err != nil {
-		return fmt.Sprintf("Error: %v\n", err)
+		return nil, err
 	}
-	workloadObj := &K8sSourceObject{
+	workloadObj := &source.K8sSourceObject{
 		Kind:            "statefulset",
 		ObjectMeta:      ss.ObjectMeta,
 		PodTemplateSpec: &ss.Spec.Template,
 		LabelSelector:   ss.Spec.Selector,
 	}
-	return PrintDescribeSource(ctx, kubeClient, odigosClient, workloadObj)
+	return DescribeSource(ctx, kubeClient, odigosClient, workloadObj)
 }
diff --git a/k8sutils/pkg/describe/source/analyze.go b/k8sutils/pkg/describe/source/analyze.go
new file mode 100644
index 000000000..cfc6eede8
--- /dev/null
+++ b/k8sutils/pkg/describe/source/analyze.go
@@ -0,0 +1,551 @@
+package source
+
+import (
+	"fmt"
+	"reflect"
+	"strings"
+
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/k8sutils/pkg/describe/properties"
+	"github.com/odigos-io/odigos/k8sutils/pkg/envoverwrite"
+	corev1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type InstrumentationLabelsAnalyze struct {
+	Instrumented     properties.EntityProperty  `json:"instrumented"`
+	Workload         *properties.EntityProperty `json:"workload"`
+	Namespace        *properties.EntityProperty `json:"namespace"`
+	InstrumentedText properties.EntityProperty  `json:"instrumentedText"`
+}
+
+type InstrumentationConfigAnalyze struct {
+	Created    properties.EntityProperty  `json:"created"`
+	CreateTime *properties.EntityProperty `json:"createTime"`
+}
+
+type ContainerRuntimeInfoAnalyze struct {
+	ContainerName  properties.EntityProperty   `json:"containerName"`
+	Language       properties.EntityProperty   `json:"language"`
+	RuntimeVersion properties.EntityProperty   `json:"runtimeVersion"`
+	EnvVars        []properties.EntityProperty `json:"envVars"`
+}
+
+type RuntimeInfoAnalyze struct {
+	Generation properties.EntityProperty     `json:"generation"`
+	Containers []ContainerRuntimeInfoAnalyze `json:"containers"`
+}
+
+type InstrumentedApplicationAnalyze struct {
+	Created    properties.EntityProperty     `json:"created"`
+	CreateTime *properties.EntityProperty    `json:"createTime"`
+	Containers []ContainerRuntimeInfoAnalyze `json:"containers"`
+}
+
+type ContainerWorkloadManifestAnalyze struct {
+	ContainerName properties.EntityProperty   `json:"containerName"`
+	Devices       properties.EntityProperty   `json:"devices"`
+	OriginalEnv   []properties.EntityProperty `json:"originalEnv"`
+}
+
+type InstrumentationDeviceAnalyze struct {
+	StatusText properties.EntityProperty          `json:"statusText"`
+	Containers []ContainerWorkloadManifestAnalyze `json:"containers"`
+}
+
+type InstrumentationInstanceAnalyze struct {
+	Healthy               properties.EntityProperty   `json:"healthy"`
+	Message               *properties.EntityProperty  `json:"message"`
+	IdentifyingAttributes []properties.EntityProperty `json:"identifyingAttributes"`
+}
+
+type PodContainerAnalyze struct {
+	ContainerName            properties.EntityProperty        `json:"containerName"`
+	ActualDevices            properties.EntityProperty        `json:"actualDevices"`
+	InstrumentationInstances []InstrumentationInstanceAnalyze `json:"instrumentationInstances"`
+}
+
+type PodAnalyze struct {
+	PodName    properties.EntityProperty `json:"podName"`
+	NodeName   properties.EntityProperty `json:"nodeName"`
+	Phase      properties.EntityProperty `json:"phase"`
+	Containers []PodContainerAnalyze     `json:"containers"`
+}
+
+type SourceAnalyze struct {
+	Name      properties.EntityProperty    `json:"name"`
+	Kind      properties.EntityProperty    `json:"kind"`
+	Namespace properties.EntityProperty    `json:"namespace"`
+	Labels    InstrumentationLabelsAnalyze `json:"labels"`
+
+	InstrumentationConfig   InstrumentationConfigAnalyze   `json:"instrumentationConfig"`
+	RuntimeInfo             *RuntimeInfoAnalyze            `json:"runtimeInfo"`
+	InstrumentedApplication InstrumentedApplicationAnalyze `json:"instrumentedApplication"`
+	InstrumentationDevice   InstrumentationDeviceAnalyze   `json:"instrumentationDevice"`
+
+	TotalPods       int          `json:"totalPods"`
+	PodsPhasesCount string       `json:"podsPhasesCount"`
+	Pods            []PodAnalyze `json:"pods"`
+}
+
+func analyzeInstrumentationLabels(resource *OdigosSourceResources, workloadObj *K8sSourceObject) (InstrumentationLabelsAnalyze, bool) {
+
+	workloadLabel, workloadFound := workloadObj.GetLabels()[consts.OdigosInstrumentationLabel]
+	nsLabel, nsFound := resource.Namespace.GetLabels()[consts.OdigosInstrumentationLabel]
+
+	workload := &properties.EntityProperty{Name: "Workload", Value: "unset", Explain: "the value of the odigos-instrumentation label on the workload object in k8s"}
+	if workloadFound {
+		workload.Value = fmt.Sprintf("%s=%s", consts.OdigosInstrumentationLabel, workloadLabel)
+	}
+
+	ns := &properties.EntityProperty{Name: "Namespace", Value: "unset", Explain: "the value of the odigos-instrumentation label on the namespace object in k8s"}
+	if nsFound {
+		ns.Value = fmt.Sprintf("%s=%s", consts.OdigosInstrumentationLabel, nsLabel)
+	}
+
+	var instrumented bool
+	var decisionText string
+
+	if workloadFound {
+		instrumented = workloadLabel == consts.InstrumentationEnabled
+		if instrumented {
+			decisionText = "Workload is instrumented because the " + workloadObj.Kind + " contains the label '" + consts.OdigosInstrumentationLabel + "=" + workloadLabel + "'"
+		} else {
+			decisionText = "Workload is NOT instrumented because the " + workloadObj.Kind + " contains the label '" + consts.OdigosInstrumentationLabel + "=" + workloadLabel + "'"
+		}
+	} else {
+		instrumented = nsLabel == consts.InstrumentationEnabled
+		if instrumented {
+			decisionText = "Workload is instrumented because the " + workloadObj.Kind + " is not labeled, and the namespace is labeled with '" + consts.OdigosInstrumentationLabel + "=" + nsLabel + "'"
+		} else {
+			if nsFound {
+				decisionText = "Workload is NOT instrumented because the " + workloadObj.Kind + " is not labeled, and the namespace is labeled with '" + consts.OdigosInstrumentationLabel + "=" + nsLabel + "'"
+			} else {
+				decisionText = "Workload is NOT instrumented because neither the workload nor the namespace has the '" + consts.OdigosInstrumentationLabel + "' label set"
+			}
+		}
+	}
+
+	instrumentedProperty := properties.EntityProperty{
+		Name:    "Instrumented",
+		Value:   instrumented,
+		Explain: "whether this workload is considered for instrumentation based on the presence of the odigos-instrumentation label",
+	}
+	decisionTextProperty := properties.EntityProperty{
+		Name:    "DecisionText",
+		Value:   decisionText,
+		Explain: "a human readable explanation of the decision to instrument or not instrument this workload",
+	}
+
+	return InstrumentationLabelsAnalyze{
+		Instrumented:     instrumentedProperty,
+		Workload:         workload,
+		Namespace:        ns,
+		InstrumentedText: decisionTextProperty,
+	}, instrumented
+}
+
+func analyzeInstrumentationConfig(resources *OdigosSourceResources, instrumented bool) InstrumentationConfigAnalyze {
+
+	instrumentationConfigCreated := resources.InstrumentationConfig != nil
+
+	created := properties.EntityProperty{
+		Name:    "Created",
+		Value:   properties.GetTextCreated(instrumentationConfigCreated),
+		Status:  properties.GetSuccessOrTransitioning(instrumentationConfigCreated == instrumented),
+		Explain: "whether the instrumentation config object exists in the cluster. When a workload is labeled for instrumentation, an instrumentation config object is created",
+	}
+
+	var createdTime *properties.EntityProperty
+	if instrumentationConfigCreated {
+		createdTime = &properties.EntityProperty{
+			Name:    "create time",
+			Value:   resources.InstrumentationConfig.GetCreationTimestamp().String(),
+			Explain: "the time when the instrumentation config object was created",
+		}
+	}
+
+	return InstrumentationConfigAnalyze{
+		Created:    created,
+		CreateTime: createdTime,
+	}
+}
+
+func analyzeRuntimeDetails(runtimeDetailsByContainer []odigosv1.RuntimeDetailsByContainer) []ContainerRuntimeInfoAnalyze {
+	containers := make([]ContainerRuntimeInfoAnalyze, 0, len(runtimeDetailsByContainer))
+
+	for _, container := range runtimeDetailsByContainer {
+
+		containerName := properties.EntityProperty{
+			Name:    "Container Name",
+			Value:   container.ContainerName,
+			Explain: "the unique name of the container in the k8s pod",
+		}
+
+		language := properties.EntityProperty{
+			Name:    "Programming Language",
+			Value:   container.Language,
+			Status:  properties.GetSuccessOrError(container.Language != common.UnknownProgrammingLanguage),
+			Explain: "the programming language detected by odigos to be running in this container",
+		}
+
+		runtimeVersion := properties.EntityProperty{
+			Name:    "Runtime Version",
+			Value:   container.RuntimeVersion,
+			Explain: "the version of the runtime detected by odigos to be running in this container",
+		}
+		if container.RuntimeVersion == "" {
+			runtimeVersion.Value = "not available"
+		}
+
+		envVars := make([]properties.EntityProperty, 0, len(container.EnvVars))
+		for _, envVar := range container.EnvVars {
+			envVars = append(envVars, properties.EntityProperty{
+				Name:  envVar.Name,
+				Value: envVar.Value,
+			})
+		}
+
+		containers = append(containers, ContainerRuntimeInfoAnalyze{
+			ContainerName:  containerName,
+			Language:       language,
+			RuntimeVersion: runtimeVersion,
+			EnvVars:        envVars,
+		})
+	}
+
+	return containers
+}
+
+func analyzeRuntimeInfo(resources *OdigosSourceResources) *RuntimeInfoAnalyze {
+	if resources.InstrumentationConfig == nil {
+		return nil
+	}
+
+	generation := properties.EntityProperty{
+		Name:    "Workload Generation",
+		Value:   resources.InstrumentationConfig.Status.ObservedWorkloadGeneration,
+		Explain: "the k8s object generation of the workload object that this instrumentation config is associated with",
+	}
+
+	return &RuntimeInfoAnalyze{
+		Generation: generation,
+		Containers: analyzeRuntimeDetails(resources.InstrumentationConfig.Status.RuntimeDetailsByContainer),
+	}
+}
+
+func analyzeInstrumentedApplication(resources *OdigosSourceResources) InstrumentedApplicationAnalyze {
+	instrumentedApplicationCreated := resources.InstrumentedApplication != nil
+
+	created := properties.EntityProperty{
+		Name:    "Created",
+		Value:   properties.GetTextCreated(instrumentedApplicationCreated),
+		Status:  properties.GetSuccessOrTransitioning(instrumentedApplicationCreated),
+		Explain: "whether the instrumented application object exists in the cluster. When a workload is labeled for instrumentation, an instrumented application object is created",
+	}
+
+	var createdTime *properties.EntityProperty
+	if instrumentedApplicationCreated {
+		createdTime = &properties.EntityProperty{
+			Name:    "create time",
+			Value:   resources.InstrumentedApplication.GetCreationTimestamp().String(),
+			Explain: "the time when the instrumented application object was created",
+		}
+	}
+
+	containers := make([]ContainerRuntimeInfoAnalyze, 0)
+	if resources.InstrumentedApplication != nil {
+		containers = analyzeRuntimeDetails(resources.InstrumentedApplication.Spec.RuntimeDetails)
+	}
+
+	return InstrumentedApplicationAnalyze{
+		Created:    created,
+		CreateTime: createdTime,
+		Containers: containers,
+	}
+}
+
+func analyzeInstrumentationDevice(resources *OdigosSourceResources, workloadObj *K8sSourceObject, instrumented bool) InstrumentationDeviceAnalyze {
+
+	instrumentedApplication := resources.InstrumentedApplication
+
+	appliedInstrumentationDeviceStatusMessage := "Unknown"
+	var appliedDeviceStatus properties.PropertyStatus
+	if !instrumented {
+		// if the workload is not instrumented, the instrumentation device expected
+		appliedInstrumentationDeviceStatusMessage = "No instrumentation devices expected"
+		appliedDeviceStatus = properties.PropertyStatusSuccess
+	}
+	if instrumentedApplication != nil && instrumentedApplication.Status.Conditions != nil {
+		for _, condition := range instrumentedApplication.Status.Conditions {
+			if condition.Type == "AppliedInstrumentationDevice" { // TODO: share this constant with instrumentor
+				if condition.ObservedGeneration == instrumentedApplication.GetGeneration() {
+					appliedInstrumentationDeviceStatusMessage = condition.Message
+					if condition.Status == metav1.ConditionTrue {
+						appliedDeviceStatus = properties.PropertyStatusSuccess
+					} else {
+						appliedDeviceStatus = properties.PropertyStatusError
+					}
+				} else {
+					appliedInstrumentationDeviceStatusMessage = "Waiting for reconciliation"
+					appliedDeviceStatus = properties.PropertyStatusTransitioning
+				}
+				break
+			}
+		}
+	}
+
+	statusText := properties.EntityProperty{
+		Name:    "Status",
+		Value:   appliedInstrumentationDeviceStatusMessage,
+		Status:  appliedDeviceStatus,
+		Explain: "the result of applying the instrumentation device to the workload manifest",
+	}
+
+	// get original env vars:
+	origWorkloadEnvValues, _ := envoverwrite.NewOrigWorkloadEnvValues(workloadObj.GetAnnotations())
+
+	templateContainers := workloadObj.PodTemplateSpec.Spec.Containers
+	containers := make([]ContainerWorkloadManifestAnalyze, 0, len(templateContainers))
+	for _, container := range templateContainers {
+
+		containerName := properties.EntityProperty{
+			Name:    "Container Name",
+			Value:   container.Name,
+			Explain: "the unique name of the container in the k8s pod",
+		}
+
+		odigosDevices := make([]string, 0)
+		for resourceName := range container.Resources.Limits {
+			deviceName, found := strings.CutPrefix(resourceName.String(), common.OdigosResourceNamespace+"/")
+			if found {
+				odigosDevices = append(odigosDevices, deviceName)
+			}
+		}
+
+		devices := properties.EntityProperty{
+			Name:    "Devices",
+			Value:   odigosDevices,
+			Explain: "the odigos instrumentation devices that were added to the workload manifest",
+		}
+
+		originalContainerEnvs := origWorkloadEnvValues.GetContainerStoredEnvs(container.Name)
+		originalEnv := make([]properties.EntityProperty, 0, len(originalContainerEnvs))
+		for envName, envValue := range originalContainerEnvs {
+			if envValue == nil {
+				originalEnv = append(originalEnv, properties.EntityProperty{
+					Name:    envName,
+					Value:   "unset",
+					Explain: "the original value of the environment variable in the workload manifest, before it was patched by odigos",
+				})
+			} else {
+				originalEnv = append(originalEnv, properties.EntityProperty{
+					Name:    envName,
+					Value:   *envValue,
+					Explain: "the original value of the environment variable in the workload manifest, before it was patched by odigos",
+				})
+			}
+		}
+
+		containers = append(containers, ContainerWorkloadManifestAnalyze{
+			ContainerName: containerName,
+			Devices:       devices,
+			OriginalEnv:   originalEnv,
+		})
+	}
+
+	return InstrumentationDeviceAnalyze{
+		StatusText: statusText,
+		Containers: containers,
+	}
+}
+
+func analyzeInstrumentationInstance(instrumentationInstance *odigosv1.InstrumentationInstance) InstrumentationInstanceAnalyze {
+
+	var healthy properties.EntityProperty
+	if instrumentationInstance.Status.Healthy == nil {
+		healthy = properties.EntityProperty{
+			Name:    "Healthy",
+			Value:   "Not Reported",
+			Status:  properties.PropertyStatusTransitioning,
+			Explain: "health indication for the instrumentation running for this process",
+		}
+	} else {
+		healthy = properties.EntityProperty{
+			Name:    "Healthy",
+			Value:   *instrumentationInstance.Status.Healthy,
+			Status:  properties.GetSuccessOrError(*instrumentationInstance.Status.Healthy),
+			Explain: "health indication for the instrumentation running for this process",
+		}
+	}
+
+	var message *properties.EntityProperty
+	if instrumentationInstance.Status.Message != "" {
+		message = &properties.EntityProperty{
+			Name:    "Message",
+			Value:   instrumentationInstance.Status.Message,
+			Explain: "a human readable message from the instrumentation indicating the health of the instrumentation running for this process",
+		}
+	}
+
+	identifyingAttributes := make([]properties.EntityProperty, 0, len(instrumentationInstance.Status.IdentifyingAttributes))
+	for _, attribute := range instrumentationInstance.Status.IdentifyingAttributes {
+		identifyingAttributes = append(identifyingAttributes, properties.EntityProperty{
+			Name:  attribute.Key,
+			Value: attribute.Value,
+		})
+	}
+
+	return InstrumentationInstanceAnalyze{
+		Healthy:               healthy,
+		Message:               message,
+		IdentifyingAttributes: identifyingAttributes,
+	}
+}
+
+func podPhaseToStatus(phase corev1.PodPhase) properties.PropertyStatus {
+	switch phase {
+	case corev1.PodSucceeded, corev1.PodRunning:
+		return properties.PropertyStatusSuccess
+	case corev1.PodPending:
+		return properties.PropertyStatusTransitioning
+	case corev1.PodFailed:
+		return properties.PropertyStatusError
+	default:
+		return properties.PropertyStatusError
+	}
+}
+
+func analyzePods(resources *OdigosSourceResources, expectedDevices InstrumentationDeviceAnalyze) ([]PodAnalyze, string) {
+	pods := make([]PodAnalyze, 0, len(resources.Pods.Items))
+	podsStatuses := make(map[corev1.PodPhase]int)
+	for _, pod := range resources.Pods.Items {
+		podsStatuses[pod.Status.Phase]++
+
+		name := properties.EntityProperty{
+			Name:    "Pod Name",
+			Value:   pod.GetName(),
+			Explain: "the name of the k8s pod object that is part of the source workload",
+		}
+		nodeName := properties.EntityProperty{
+			Name:    "Node Name",
+			Value:   pod.Spec.NodeName,
+			Explain: "the name of the k8s node where the current pod being described is scheduled",
+		}
+
+		var phase properties.EntityProperty
+
+		if pod.DeletionTimestamp != nil {
+			phase = properties.EntityProperty{
+				Name:    "Phase",
+				Value:   "Terminating",
+				Status:  properties.PropertyStatusTransitioning,
+				Explain: "the current pod phase for the pod being described",
+			}
+		} else {
+			phase = properties.EntityProperty{
+				Name:    "Phase",
+				Value:   pod.Status.Phase,
+				Status:  podPhaseToStatus(pod.Status.Phase),
+				Explain: "the current pod phase for the pod being described",
+			}
+		}
+
+		containers := make([]PodContainerAnalyze, 0, len(pod.Spec.Containers))
+		for _, container := range pod.Spec.Containers {
+			containerName := properties.EntityProperty{
+				Name:    "Container Name",
+				Value:   container.Name,
+				Explain: "the unique name of a container being described in the pod",
+			}
+
+			deviceNames := make([]string, 0)
+			for resourceName := range container.Resources.Limits {
+				deviceName, found := strings.CutPrefix(resourceName.String(), common.OdigosResourceNamespace+"/")
+				if found {
+					deviceNames = append(deviceNames, deviceName)
+				}
+			}
+
+			var expectedContainer *ContainerWorkloadManifestAnalyze
+			for _, c := range expectedDevices.Containers {
+				if c.ContainerName.Value == container.Name {
+					expectedContainer = &c
+					break
+				}
+			}
+			devicesStatus := properties.GetSuccessOrError(expectedContainer != nil && reflect.DeepEqual(deviceNames, expectedContainer.Devices.Value))
+			actualDevices := properties.EntityProperty{
+				Name:    "Actual Devices",
+				Value:   deviceNames,
+				Status:  devicesStatus,
+				Explain: "the odigos instrumentation devices that were found on this pod container instance",
+			}
+
+			// find the instrumentation instances for this pod
+			thisPodInstrumentationInstances := make([]InstrumentationInstanceAnalyze, 0)
+			for _, instance := range resources.InstrumentationInstances.Items {
+				if len(instance.OwnerReferences) != 1 || instance.OwnerReferences[0].Kind != "Pod" {
+					continue
+				}
+				if instance.OwnerReferences[0].Name != pod.GetName() {
+					continue
+				}
+				if instance.Spec.ContainerName != container.Name {
+					continue
+				}
+				instanceAnalyze := analyzeInstrumentationInstance(&instance)
+				thisPodInstrumentationInstances = append(thisPodInstrumentationInstances, instanceAnalyze)
+			}
+
+			containers = append(containers, PodContainerAnalyze{
+				ContainerName:            containerName,
+				ActualDevices:            actualDevices,
+				InstrumentationInstances: thisPodInstrumentationInstances,
+			})
+		}
+
+		pods = append(pods, PodAnalyze{
+			PodName:    name,
+			NodeName:   nodeName,
+			Phase:      phase,
+			Containers: containers,
+		})
+	}
+
+	podPhasesTexts := make([]string, 0)
+	for phase, count := range podsStatuses {
+		podPhasesTexts = append(podPhasesTexts, fmt.Sprintf("%s %d", phase, count))
+	}
+	podPhasesText := strings.Join(podPhasesTexts, ", ")
+
+	return pods, podPhasesText
+}
+
+func AnalyzeSource(resources *OdigosSourceResources, workloadObj *K8sSourceObject) *SourceAnalyze {
+
+	labelsAnalysis, instrumented := analyzeInstrumentationLabels(resources, workloadObj)
+	icAnalysis := analyzeInstrumentationConfig(resources, instrumented)
+	runtimeAnalysis := analyzeRuntimeInfo(resources)
+	instrumentedApplication := analyzeInstrumentedApplication(resources)
+	device := analyzeInstrumentationDevice(resources, workloadObj, instrumented)
+	pods, podsText := analyzePods(resources, device)
+
+	return &SourceAnalyze{
+		Name:      properties.EntityProperty{Name: "Name", Value: workloadObj.GetName(), Explain: "the name of the k8s workload object that this source describes"},
+		Kind:      properties.EntityProperty{Name: "Kind", Value: workloadObj.Kind, Explain: "the kind of the k8s workload object that this source describes (deployment/daemonset/statefulset)"},
+		Namespace: properties.EntityProperty{Name: "Namespace", Value: workloadObj.GetNamespace(), Explain: "the namespace of the k8s workload object that this source describes"},
+		Labels:    labelsAnalysis,
+
+		InstrumentationConfig:   icAnalysis,
+		RuntimeInfo:             runtimeAnalysis,
+		InstrumentedApplication: instrumentedApplication,
+		InstrumentationDevice:   device,
+
+		TotalPods:       len(pods),
+		PodsPhasesCount: podsText,
+		Pods:            pods,
+	}
+}
diff --git a/k8sutils/pkg/describe/source/resources.go b/k8sutils/pkg/describe/source/resources.go
new file mode 100644
index 000000000..5c1f0b3ff
--- /dev/null
+++ b/k8sutils/pkg/describe/source/resources.go
@@ -0,0 +1,75 @@
+package source
+
+import (
+	"context"
+
+	odigosclientset "github.com/odigos-io/odigos/api/generated/odigos/clientset/versioned/typed/odigos/v1alpha1"
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
+	corev1 "k8s.io/api/core/v1"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/labels"
+	"k8s.io/client-go/kubernetes"
+)
+
+type OdigosSourceResources struct {
+	Namespace                *corev1.Namespace
+	InstrumentationConfig    *odigosv1.InstrumentationConfig
+	InstrumentedApplication  *odigosv1.InstrumentedApplication
+	InstrumentationInstances *odigosv1.InstrumentationInstanceList
+	Pods                     *corev1.PodList
+}
+
+func GetRelevantSourceResources(ctx context.Context, kubeClient kubernetes.Interface, odigosClient odigosclientset.OdigosV1alpha1Interface, workloadObj *K8sSourceObject) (*OdigosSourceResources, error) {
+
+	sourceResources := OdigosSourceResources{}
+
+	workloadNs := workloadObj.GetNamespace()
+	ns, err := kubeClient.CoreV1().Namespaces().Get(ctx, workloadNs, metav1.GetOptions{})
+	if err == nil {
+		sourceResources.Namespace = ns
+	} else {
+		// namespace must be found
+		return nil, err
+	}
+
+	runtimeObjectName := workload.CalculateWorkloadRuntimeObjectName(workloadObj.GetName(), workloadObj.Kind)
+	ic, err := odigosClient.InstrumentationConfigs(workloadNs).Get(ctx, runtimeObjectName, metav1.GetOptions{})
+	if err == nil {
+		sourceResources.InstrumentationConfig = ic
+	} else if !apierrors.IsNotFound(err) {
+		return nil, err
+	}
+
+	ia, err := odigosClient.InstrumentedApplications(workloadNs).Get(ctx, runtimeObjectName, metav1.GetOptions{})
+	if err == nil {
+		sourceResources.InstrumentedApplication = ia
+	} else if !apierrors.IsNotFound(err) {
+		return nil, err
+	}
+
+	instrumentedAppSelector := labels.SelectorFromSet(labels.Set{
+		"instrumented-app": runtimeObjectName,
+	})
+	iis, err := odigosClient.InstrumentationInstances(workloadNs).List(ctx, metav1.ListOptions{LabelSelector: instrumentedAppSelector.String()})
+	if err == nil {
+		sourceResources.InstrumentationInstances = iis
+	} else {
+		return nil, err
+	}
+
+	podLabelSelector := metav1.FormatLabelSelector(workloadObj.LabelSelector)
+	if err != nil {
+		// if pod info cannot be extracted, it is an unrecoverable error
+		return nil, err
+	}
+	pods, err := kubeClient.CoreV1().Pods(workloadNs).List(ctx, metav1.ListOptions{LabelSelector: podLabelSelector})
+	if err == nil {
+		sourceResources.Pods = pods
+	} else {
+		return nil, err
+	}
+
+	return &sourceResources, nil
+}
diff --git a/k8sutils/pkg/describe/source/source.go b/k8sutils/pkg/describe/source/source.go
new file mode 100644
index 000000000..db011a422
--- /dev/null
+++ b/k8sutils/pkg/describe/source/source.go
@@ -0,0 +1,13 @@
+package source
+
+import (
+	corev1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type K8sSourceObject struct {
+	metav1.ObjectMeta
+	Kind            string
+	PodTemplateSpec *corev1.PodTemplateSpec
+	LabelSelector   *metav1.LabelSelector
+}
diff --git a/k8sutils/pkg/env/env.go b/k8sutils/pkg/env/env.go
index 54ba9df68..dd2b19028 100644
--- a/k8sutils/pkg/env/env.go
+++ b/k8sutils/pkg/env/env.go
@@ -1,11 +1,13 @@
 package env
 
 import (
-	"github.com/odigos-io/odigos/common/consts"
 	"os"
 	"path/filepath"
 	"strconv"
 
+	"github.com/odigos-io/odigos/common"
+	"github.com/odigos-io/odigos/common/consts"
+
 	"k8s.io/client-go/util/homedir"
 )
 
@@ -48,3 +50,18 @@ func GetSyncDaemonSetDelay() int {
 
 	return delayValue
 }
+
+func GetOdigosTierFromEnv() common.OdigosTier {
+	odigosTierStr := os.Getenv("ODIGOS_TIER")
+
+	switch odigosTierStr {
+	case string(common.CommunityOdigosTier):
+		return common.CommunityOdigosTier
+	case string(common.CloudOdigosTier):
+		return common.CloudOdigosTier
+	case string(common.OnPremOdigosTier):
+		return common.OnPremOdigosTier
+	default:
+		return common.CommunityOdigosTier
+	}
+}
diff --git a/k8sutils/pkg/envoverwrite/origenv.go b/k8sutils/pkg/envoverwrite/origenv.go
index 8a2ab38e0..32369d13f 100644
--- a/k8sutils/pkg/envoverwrite/origenv.go
+++ b/k8sutils/pkg/envoverwrite/origenv.go
@@ -6,7 +6,7 @@ import (
 
 	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/common/envOverwrite"
-	"sigs.k8s.io/controller-runtime/pkg/client"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
 // original manifest values for the env vars of a workload
@@ -66,7 +66,7 @@ func (o *OrigWorkloadEnvValues) InsertOriginalValue(containerName string, envNam
 
 // stores the original values back into the manifest annotations
 // by modifying the annotations map of the input argument
-func (o *OrigWorkloadEnvValues) SerializeToAnnotation(obj client.Object) error {
+func (o *OrigWorkloadEnvValues) SerializeToAnnotation(obj metav1.Object) error {
 	if !o.modifiedSinceCreated {
 		return nil
 	}
@@ -95,11 +95,16 @@ func (o *OrigWorkloadEnvValues) SerializeToAnnotation(obj client.Object) error {
 	return nil
 }
 
-func (o *OrigWorkloadEnvValues) DeleteFromObj(obj client.Object) {
+func (o *OrigWorkloadEnvValues) DeleteFromObj(obj metav1.Object) bool {
 	currentAnnotations := obj.GetAnnotations()
 	if currentAnnotations == nil {
-		return
+		return false
+	}
+
+	if _, ok := currentAnnotations[consts.ManifestEnvOriginalValAnnotation]; !ok {
+		return false
 	}
 
 	delete(currentAnnotations, consts.ManifestEnvOriginalValAnnotation)
+	return true
 }
diff --git a/k8sutils/pkg/predicate/cgbecomesready.go b/k8sutils/pkg/predicate/cgbecomesready.go
new file mode 100644
index 000000000..89c762a13
--- /dev/null
+++ b/k8sutils/pkg/predicate/cgbecomesready.go
@@ -0,0 +1,56 @@
+package predicate
+
+import (
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"sigs.k8s.io/controller-runtime/pkg/event"
+	cr_predicate "sigs.k8s.io/controller-runtime/pkg/predicate"
+)
+
+// this event filter will only trigger reconciliation when the collectors group was not ready and now it is ready.
+// some controllers in odigos reacts to this specific event, and should not be triggered by other events such as spec updates or status conditions changes.
+// for create events, it will only trigger reconciliation if the collectors group is ready.
+type CgBecomesReadyPredicate struct{}
+
+func (i *CgBecomesReadyPredicate) Create(e event.CreateEvent) bool {
+	if e.Object == nil {
+		return false
+	}
+
+	cg, ok := e.Object.(*odigosv1.CollectorsGroup)
+	if !ok {
+		return false
+	}
+	return cg.Status.Ready
+}
+
+func (i *CgBecomesReadyPredicate) Update(e event.UpdateEvent) bool {
+
+	if e.ObjectOld == nil || e.ObjectNew == nil {
+		return false
+	}
+
+	oldCollectorGroup, ok := e.ObjectOld.(*odigosv1.CollectorsGroup)
+	if !ok {
+		return false
+	}
+	newCollectorGroup, ok := e.ObjectNew.(*odigosv1.CollectorsGroup)
+	if !ok {
+		return false
+	}
+
+	wasReady := oldCollectorGroup.Status.Ready
+	nowReady := newCollectorGroup.Status.Ready
+	becameReady := !wasReady && nowReady
+
+	return becameReady
+}
+
+func (i *CgBecomesReadyPredicate) Delete(e event.DeleteEvent) bool {
+	return false
+}
+
+func (i *CgBecomesReadyPredicate) Generic(e event.GenericEvent) bool {
+	return false
+}
+
+var _ cr_predicate.Predicate = &CgBecomesReadyPredicate{}
diff --git a/k8sutils/pkg/predicate/cm_changed.go b/k8sutils/pkg/predicate/cm_changed.go
new file mode 100644
index 000000000..e73b84b0b
--- /dev/null
+++ b/k8sutils/pkg/predicate/cm_changed.go
@@ -0,0 +1,45 @@
+package predicate
+
+import (
+	"maps"
+
+	corev1 "k8s.io/api/core/v1"
+	"sigs.k8s.io/controller-runtime/pkg/event"
+	"sigs.k8s.io/controller-runtime/pkg/predicate"
+)
+
+// this event filter will only trigger reconciliation when the configmap data was changed.
+// the reconciled type must be corev1.ConfigMap
+// note: this preidcate currently only check the Data field of the ConfigMap (without BinaryData)
+type ConfigMapDataChangedPredicate struct{}
+
+func (o ConfigMapDataChangedPredicate) Create(e event.CreateEvent) bool {
+	return false
+}
+
+func (i ConfigMapDataChangedPredicate) Update(e event.UpdateEvent) bool {
+	if e.ObjectOld == nil || e.ObjectNew == nil {
+		return false
+	}
+
+	oldConfigMap, ok := e.ObjectOld.(*corev1.ConfigMap)
+	if !ok {
+		return false
+	}
+	newConfigMap, ok := e.ObjectNew.(*corev1.ConfigMap)
+	if !ok {
+		return false
+	}
+
+	return !maps.Equal(oldConfigMap.Data, newConfigMap.Data)
+}
+
+func (i ConfigMapDataChangedPredicate) Delete(e event.DeleteEvent) bool {
+	return false
+}
+
+func (i ConfigMapDataChangedPredicate) Generic(e event.GenericEvent) bool {
+	return false
+}
+
+var _ predicate.Predicate = &ConfigMapDataChangedPredicate{}
diff --git a/k8sutils/pkg/predicate/existence.go b/k8sutils/pkg/predicate/existence.go
new file mode 100644
index 000000000..bdcd1b18c
--- /dev/null
+++ b/k8sutils/pkg/predicate/existence.go
@@ -0,0 +1,33 @@
+package predicate
+
+import (
+	"sigs.k8s.io/controller-runtime/pkg/event"
+	cr_predicate "sigs.k8s.io/controller-runtime/pkg/predicate"
+)
+
+// existence predicate only allows create and delete events.
+// it is useful when the controller only reacts to the presence of an object (e.g. if it exists or not),
+// and not to it's content or status changes.
+//
+// Notice these 2 things when using this predicate:
+// 1. The event filter will allow events for each object on startup, as all the objects are "created" in the cache.
+// 2. If you have important task to do on delete events, make sure it is applied if the event is missed and the controller restarts, since the delete event will not be triggered on controller restart as the object is no longer in k8s.
+type ExistencePredicate struct{}
+
+func (o ExistencePredicate) Create(e event.CreateEvent) bool {
+	return true
+}
+
+func (i ExistencePredicate) Update(e event.UpdateEvent) bool {
+	return false
+}
+
+func (i ExistencePredicate) Delete(e event.DeleteEvent) bool {
+	return true
+}
+
+func (i ExistencePredicate) Generic(e event.GenericEvent) bool {
+	return false
+}
+
+var _ cr_predicate.Predicate = &ExistencePredicate{}
diff --git a/k8sutils/pkg/predicate/objectname.go b/k8sutils/pkg/predicate/objectname.go
new file mode 100644
index 000000000..074f82e48
--- /dev/null
+++ b/k8sutils/pkg/predicate/objectname.go
@@ -0,0 +1,84 @@
+package predicate
+
+import (
+	"github.com/odigos-io/odigos/common/consts"
+	odigosk8sconsts "github.com/odigos-io/odigos/k8sutils/pkg/consts"
+	"sigs.k8s.io/controller-runtime/pkg/event"
+	cr_predicate "sigs.k8s.io/controller-runtime/pkg/predicate"
+)
+
+type ObjectNamePredicate struct {
+	AllowedObjectName string
+}
+
+func (o ObjectNamePredicate) Create(e event.CreateEvent) bool {
+	if e.Object == nil {
+		return false
+	}
+	return e.Object.GetName() == o.AllowedObjectName
+}
+
+func (i ObjectNamePredicate) Update(e event.UpdateEvent) bool {
+	if e.ObjectNew == nil || e.ObjectOld == nil {
+		return false
+	}
+	return e.ObjectNew.GetName() == i.AllowedObjectName
+}
+
+func (i ObjectNamePredicate) Delete(e event.DeleteEvent) bool {
+	if e.Object == nil {
+		return false
+	}
+	return e.Object.GetName() == i.AllowedObjectName
+}
+
+func (i ObjectNamePredicate) Generic(e event.GenericEvent) bool {
+	if e.Object == nil {
+		return false
+	}
+	return e.Object.GetName() == i.AllowedObjectName
+}
+
+var _ cr_predicate.Predicate = &ObjectNamePredicate{}
+
+// This predicate will only allow config map events on the "odigos-config" object,
+// and will filter out events for possible other config maps which the reconciler should not handle.
+// Example usage:
+// import odigospredicates "github.com/odigos-io/odigos/k8sutils/pkg/predicate"
+// ...
+//
+//	err = ctrl.NewControllerManagedBy(mgr).
+//		For(&corev1.ConfigMap{}).
+//		WithEventFilter(&odigospredicates.OdigosConfigMapPredicate).
+//		Complete(r)
+var OdigosConfigMapPredicate = ObjectNamePredicate{
+	AllowedObjectName: consts.OdigosConfigurationName,
+}
+
+// use this event filter to reconcile only collectors group events for node collectors group objects
+// this is useful if you reconcile only depends on changes from the node collectors group and should not react to cluster collectors group changes
+// example usage:
+// import odigospredicates "github.com/odigos-io/odigos/k8sutils/pkg/predicate"
+// ...
+//
+//	err = ctrl.NewControllerManagedBy(mgr).
+//		For(&odigosv1.CollectorsGroup{}).
+//		WithEventFilter(&odigospredicates.OdigosCollectorsGroupCluster).
+//		Complete(r)
+var OdigosCollectorsGroupNodePredicate = ObjectNamePredicate{
+	AllowedObjectName: odigosk8sconsts.OdigosNodeCollectorCollectorGroupName,
+}
+
+// use this event filter to reconcile only collectors group events for cluster collectors group objects
+// this is useful if you reconcile only depends on changes from the cluster collectors group and should not react to node collectors group changes
+// example usage:
+// import odigospredicates "github.com/odigos-io/odigos/k8sutils/pkg/predicate"
+// ...
+//
+//	err = ctrl.NewControllerManagedBy(mgr).
+//		For(&odigosv1.CollectorsGroup{}).
+//		WithEventFilter(&odigospredicates.OdigosCollectorsGroupClusterPredicate).
+//		Complete(r)
+var OdigosCollectorsGroupClusterPredicate = ObjectNamePredicate{
+	AllowedObjectName: odigosk8sconsts.OdigosClusterCollectorCollectorGroupName,
+}
diff --git a/k8sutils/pkg/predicate/onlyupdate.go b/k8sutils/pkg/predicate/onlyupdate.go
new file mode 100644
index 000000000..bd6061adc
--- /dev/null
+++ b/k8sutils/pkg/predicate/onlyupdate.go
@@ -0,0 +1,29 @@
+package predicate
+
+import (
+	"sigs.k8s.io/controller-runtime/pkg/event"
+	cr_predicate "sigs.k8s.io/controller-runtime/pkg/predicate"
+)
+
+// This predicate only allows update events.
+// It is useful if you handle the initial state when the controller starts, and only need to apply changes
+// for example - when monitoring odigos config changes.
+type OnlyUpdatesPredicate struct{}
+
+func (o OnlyUpdatesPredicate) Create(e event.CreateEvent) bool {
+	return false
+}
+
+func (i OnlyUpdatesPredicate) Update(e event.UpdateEvent) bool {
+	return true
+}
+
+func (i OnlyUpdatesPredicate) Delete(e event.DeleteEvent) bool {
+	return false
+}
+
+func (i OnlyUpdatesPredicate) Generic(e event.GenericEvent) bool {
+	return false
+}
+
+var _ cr_predicate.Predicate = &OnlyUpdatesPredicate{}
diff --git a/k8sutils/pkg/utils/collectorgroup_util.go b/k8sutils/pkg/utils/collectorgroup_util.go
index eff0b9122..b62b6e145 100644
--- a/k8sutils/pkg/utils/collectorgroup_util.go
+++ b/k8sutils/pkg/utils/collectorgroup_util.go
@@ -2,15 +2,24 @@ package utils
 
 import (
 	"context"
+
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"k8s.io/apimachinery/pkg/api/errors"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 	"sigs.k8s.io/controller-runtime/pkg/log"
 )
 
-func CreateCollectorGroup(ctx context.Context, c client.Client, collectorGroup *odigosv1.CollectorsGroup) error {
-	log.FromContext(ctx).Info("Creating collector group", "collectorGroupName", collectorGroup.Name)
-	return c.Create(ctx, collectorGroup)
+func ApplyCollectorGroup(ctx context.Context, c client.Client, collectorGroup *odigosv1.CollectorsGroup) error {
+	logger := log.FromContext(ctx)
+	logger.Info("Applying collector group", "collectorGroupName", collectorGroup.Name)
+
+	err := c.Patch(ctx, collectorGroup, client.Apply, client.ForceOwnership, client.FieldOwner("scheduler"))
+	if err != nil {
+		logger.Error(err, "Failed to apply collector group")
+		return err
+	}
+
+	return nil
 }
 
 func GetCollectorGroup(ctx context.Context, c client.Client, namespace string, collectorGroupName string) (*odigosv1.CollectorsGroup, error) {
diff --git a/k8sutils/pkg/utils/retryonconflict.go b/k8sutils/pkg/utils/retryonconflict.go
new file mode 100644
index 000000000..57a540b0c
--- /dev/null
+++ b/k8sutils/pkg/utils/retryonconflict.go
@@ -0,0 +1,16 @@
+package utils
+
+import (
+	"k8s.io/apimachinery/pkg/api/errors"
+	"sigs.k8s.io/controller-runtime/pkg/reconcile"
+)
+
+func RetryOnConflict(err error) (reconcile.Result, error) {
+	if errors.IsConflict(err) {
+		// For conflict errors, requeue without returning an error.
+		// this is so that we don't have errors and stack traces in the logs for valid scenario
+		return reconcile.Result{Requeue: true}, nil
+	}
+	// For other errors, return as is (will log the stack trace)
+	return reconcile.Result{}, err
+}
diff --git a/odiglet/Makefile b/odiglet/Makefile
index 5fd060f86..92b6e4189 100644
--- a/odiglet/Makefile
+++ b/odiglet/Makefile
@@ -1,5 +1,8 @@
 .PHONY: build-odiglet generate
 
+LIBRARIES := go.opentelemetry.io/auto \
+			github.com/odigos-io/runtime-detector
+
 build-odiglet: generate
 	CGO_ENABLED=0 go build -o odiglet cmd/main.go
 
@@ -8,15 +11,11 @@ debug-build-odiglet: generate
 
 generate:
 	go mod download
-	GO_AUTO_PATH=$$(go list -m -f '{{.Dir}}' "go.opentelemetry.io/auto") && \
-	cd $$GO_AUTO_PATH && \
-	chmod -R +w $$GO_AUTO_PATH && \
-	make generate
+	@for lib in $(LIBRARIES); do \
+		LIB_PATH=$$(go list -m -f '{{.Dir}}' $${lib%@*}) && \
+		chmod -R +w $$LIB_PATH && \
+		make -C "$$LIB_PATH" generate; \
+	done
 
-test:
-	go mod download
-	GO_AUTO_PATH=$$(go list -m -f '{{.Dir}}' "go.opentelemetry.io/auto") && \
-	sudo chmod -R +w $$GO_AUTO_PATH && \
-	cd $$GO_AUTO_PATH && \
-	make generate
+test: generate
 	go test -v ./...
diff --git a/odiglet/cmd/main.go b/odiglet/cmd/main.go
index 0ab9bc88b..a8e605b5a 100644
--- a/odiglet/cmd/main.go
+++ b/odiglet/cmd/main.go
@@ -6,6 +6,7 @@ import (
 
 	"github.com/odigos-io/odigos/odiglet/pkg/ebpf/sdks"
 	"github.com/odigos-io/odigos/odiglet/pkg/instrumentation/fs"
+	detector "github.com/odigos-io/odigos/odiglet/pkg/detector"
 
 	"github.com/kubevirt/device-plugin-manager/pkg/dpm"
 	"github.com/odigos-io/odigos/common"
@@ -71,6 +72,13 @@ func main() {
 
 	go startDeviceManager(clientset)
 
+	procEvents := make(chan detector.ProcessEvent)
+	runtimeDetector, err := detector.StartRuntimeDetector(ctx, log.Logger, procEvents)
+	if err != nil {
+		log.Logger.Error(err, "Failed to start runtime detector")
+		os.Exit(-1)
+	}
+
 	mgr, err := kube.CreateManager()
 	if err != nil {
 		log.Logger.Error(err, "Failed to create controller-runtime manager")
@@ -105,6 +113,12 @@ func main() {
 	for _, director := range ebpfDirectors {
 		director.Shutdown()
 	}
+	err = runtimeDetector.Stop()
+	if err != nil {
+		log.Logger.Error(err, "Failed to stop runtime detector")
+		os.Exit(-1)
+	}
+	log.Logger.V(0).Info("odiglet exiting")
 }
 
 func startDeviceManager(clientset *kubernetes.Clientset) {
diff --git a/odiglet/go.mod b/odiglet/go.mod
index f58c1b540..70b10aa8d 100644
--- a/odiglet/go.mod
+++ b/odiglet/go.mod
@@ -14,6 +14,7 @@ require (
 	github.com/odigos-io/odigos/opampserver v0.0.0
 	github.com/odigos-io/odigos/procdiscovery v0.0.0
 	github.com/odigos-io/opentelemetry-zap-bridge v0.0.5
+	github.com/odigos-io/runtime-detector v0.0.2
 	github.com/stretchr/testify v1.9.0
 	go.opentelemetry.io/auto v0.15.0-alpha
 	go.opentelemetry.io/otel v1.30.0
diff --git a/odiglet/go.sum b/odiglet/go.sum
index 14a15cae8..5eb1074fb 100644
--- a/odiglet/go.sum
+++ b/odiglet/go.sum
@@ -256,6 +256,8 @@ github.com/nxadm/tail v1.4.4 h1:DQuhQpB1tVlglWS2hLQ5OV6B5r8aGxSrPc5Qo6uTN78=
 github.com/nxadm/tail v1.4.4/go.mod h1:kenIhsEOeOJmVchQTgglprH7qJGnHDVpk1VPCcaMI8A=
 github.com/odigos-io/opentelemetry-zap-bridge v0.0.5 h1:UDEKtgab42nGVSvA/F3lLKUYFPETtpl7kpxM9BKBlWk=
 github.com/odigos-io/opentelemetry-zap-bridge v0.0.5/go.mod h1:K98wHhktQ6vCTqeFztcpBDtPTe88vxVgZFlbeGobt24=
+github.com/odigos-io/runtime-detector v0.0.2 h1:8G6KOBxlmP0vu+/62lHbvjSDARP+DML0gk5ypcdZOpg=
+github.com/odigos-io/runtime-detector v0.0.2/go.mod h1:m8GfdG6pET0K/8aoZwnX+MkYz8oVroKs8HzRnkuJWt4=
 github.com/onsi/ginkgo v0.0.0-20170829012221-11459a886d9c/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v1.6.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
 github.com/onsi/ginkgo v1.11.0/go.mod h1:lLunBs/Ym6LB5Z9jYTR76FiuTmxDTDusOGeTQH+WWjE=
diff --git a/odiglet/pkg/detector/detector.go b/odiglet/pkg/detector/detector.go
new file mode 100644
index 000000000..09e01c0cf
--- /dev/null
+++ b/odiglet/pkg/detector/detector.go
@@ -0,0 +1,107 @@
+package detector
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"log/slog"
+	"sync"
+
+	"github.com/go-logr/logr"
+	"github.com/odigos-io/odigos/common/envOverwrite"
+	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
+	"github.com/odigos-io/odigos/procdiscovery/pkg/process"
+	"github.com/odigos-io/runtime-detector"
+)
+
+type ProcessEvent = detector.ProcessEvent
+
+type Detector struct {
+	detector *detector.Detector
+	wg       sync.WaitGroup
+	runError error
+}
+
+func StartRuntimeDetector(ctx context.Context, logger logr.Logger, events chan ProcessEvent) (*Detector, error) {
+	detector, err := newDetector(ctx, logger, events)
+	if err != nil {
+		return nil, fmt.Errorf("failed to create runtime detector: %w", err)
+	}
+
+	d := &Detector{detector: detector}
+
+	d.wg.Add(1)
+	go func() {
+		defer d.wg.Done()
+		readProcEventsLoop(logger, events)
+	}()
+
+	d.wg.Add(1)
+	go func() {
+		defer d.wg.Done()
+		d.runError = detector.Run(ctx)
+	}()
+
+	return d, nil
+}
+
+func (d *Detector) Stop() error {
+	err := d.detector.Stop()
+	d.wg.Wait()
+	return errors.Join(d.runError, err)
+}
+
+func newDetector(ctx context.Context, logger logr.Logger, events chan ProcessEvent) (*detector.Detector, error) {
+	sLogger := slog.New(logr.ToSlogHandler(logger))
+
+	opts := []detector.DetectorOption{
+		detector.WithLogger(sLogger),
+		detector.WithEnvironments(relevantEnvVars()...),
+	}
+	detector, err := detector.NewDetector(ctx, events, opts...)
+
+	if err != nil {
+		return nil, err
+	}
+
+	return detector, nil
+}
+
+func readProcEventsLoop(l logr.Logger, events chan ProcessEvent) {
+	l = l.WithName("process detector")
+	for e := range events {
+		switch e.EventType {
+		case detector.ProcessExecEvent:
+			l.Info("detected new process",
+				"pid", e.PID,
+				"cmd", e.ExecDetails.CmdLine,
+				"exeName", e.ExecDetails.ExeName,
+				"exeLink", e.ExecDetails.ExeLink,
+				"envs", e.ExecDetails.Environments,
+				"container PID", e.ExecDetails.ContainerProcessID,
+			)
+		case detector.ProcessExitEvent:
+			l.Info("detected process exit",
+				"pid", e.PID,
+			)
+		}
+	}
+}
+
+func relevantEnvVars() []string {
+	// env vars related to language versions
+	versionEnvs := process.LangsVersionEnvs
+
+	envs := make([]string, 0, len(versionEnvs))
+	for env := range versionEnvs {
+		envs = append(envs, env)
+	}
+
+	// env vars that Odigos is using for adding dependencies
+	envs = append(envs, envOverwrite.GetRelevantEnvVarsKeys()...)
+
+	// env vars that Odigos is injecting to the relevant containers
+	envs = append(envs, consts.OdigosInjectedEnvVars()...)
+
+	return envs
+}
diff --git a/odiglet/pkg/instrumentation/plugin.go b/odiglet/pkg/instrumentation/plugin.go
index 0ea22d44c..699d5e7e4 100644
--- a/odiglet/pkg/instrumentation/plugin.go
+++ b/odiglet/pkg/instrumentation/plugin.go
@@ -2,6 +2,7 @@ package instrumentation
 
 import (
 	"context"
+	"errors"
 
 	"github.com/kubevirt/device-plugin-manager/pkg/dpm"
 	odigosclientset "github.com/odigos-io/odigos/api/generated/odigos/clientset/versioned"
@@ -10,6 +11,7 @@ import (
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
 	"github.com/odigos-io/odigos/odiglet/pkg/instrumentation/devices"
 	"github.com/odigos-io/odigos/odiglet/pkg/log"
+	apierrors "k8s.io/apimachinery/pkg/api/errors"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/client-go/rest"
 	"k8s.io/kubelet/pkg/apis/deviceplugin/v1beta1"
@@ -82,16 +84,25 @@ func (p *plugin) GetPreferredAllocation(ctx context.Context, request *v1beta1.Pr
 func (p *plugin) Allocate(ctx context.Context, request *v1beta1.AllocateRequest) (*v1beta1.AllocateResponse, error) {
 	res := &v1beta1.AllocateResponse{}
 
+	// calculate the enabled signals from the collectors group status.
+	// in any error, just use empty enabled signals.
+	// If the Allocate returns an error, the pod will not be scheduled which we have to avoid no matter what.
+	enabledSignals := make(map[common.ObservabilitySignal]struct{})
+
 	odigosNs := env.GetCurrentNamespace()
 	nodeCollectorGroup, err := p.odigosKubeClient.OdigosV1alpha1().CollectorsGroups(odigosNs).Get(ctx, k8sconsts.OdigosNodeCollectorCollectorGroupName, metav1.GetOptions{})
 	if err != nil {
-		log.Logger.Error(err, "Failed to get node collector group")
-		return nil, err
-	}
-
-	enabledSignals := make(map[common.ObservabilitySignal]struct{})
-	for _, signal := range nodeCollectorGroup.Status.ReceiverSignals {
-		enabledSignals[signal] = struct{}{}
+		// we should have collectors group created for odigos device to trigger.
+		// however if we don't, just log and do not populate the enabled signals.
+		if apierrors.IsNotFound(err) {
+			log.Logger.Error(errors.New("pod with odigos device started, but collectors group not created. disabling all signals for this pod"), "collectorGroupName", k8sconsts.OdigosNodeCollectorCollectorGroupName)
+		} else {
+			log.Logger.Error(err, "error getting node collectors group, no enabled signals are set")
+		}
+	} else {
+		for _, signal := range nodeCollectorGroup.Status.ReceiverSignals {
+			enabledSignals[signal] = struct{}{}
+		}
 	}
 
 	for _, req := range request.ContainerRequests {
diff --git a/odiglet/pkg/kube/runtime_details/inspection.go b/odiglet/pkg/kube/runtime_details/inspection.go
index 4bba4d7b7..4cad643cf 100644
--- a/odiglet/pkg/kube/runtime_details/inspection.go
+++ b/odiglet/pkg/kube/runtime_details/inspection.go
@@ -107,6 +107,8 @@ func runtimeInspection(pods []corev1.Pod, ignoredContainers []string) ([]odigosv
 			}
 
 			envs := make([]odigosv1.EnvVar, 0)
+			var detectedAgent *odigosv1.OtherAgent
+
 			if inspectProc == nil {
 				log.Logger.V(0).Info("unable to detect language for any process", "pod", pod.Name, "container", container.Name, "namespace", pod.Namespace)
 				programLanguageDetails.Language = common.UnknownProgrammingLanguage
@@ -117,9 +119,16 @@ func runtimeInspection(pods []corev1.Pod, ignoredContainers []string) ([]odigosv
 
 				// Convert map to slice for k8s format
 				envs = make([]odigosv1.EnvVar, 0, len(inspectProc.Environments.DetailedEnvs))
+
 				for envName, envValue := range inspectProc.Environments.OverwriteEnvs {
 					envs = append(envs, odigosv1.EnvVar{Name: envName, Value: envValue})
 				}
+
+				for envName := range inspectProc.Environments.DetailedEnvs {
+					if otherAgentName, exists := procdiscovery.OtherAgentEnvs[envName]; exists {
+						detectedAgent = &odigosv1.OtherAgent{Name: otherAgentName}
+					}
+				}
 			}
 
 			var runtimeVersion string
@@ -132,6 +141,7 @@ func runtimeInspection(pods []corev1.Pod, ignoredContainers []string) ([]odigosv
 				Language:       programLanguageDetails.Language,
 				RuntimeVersion: runtimeVersion,
 				EnvVars:        envs,
+				OtherAgent:     detectedAgent,
 			}
 		}
 	}
diff --git a/odiglet/pkg/kube/runtime_details/instconfig_controller.go b/odiglet/pkg/kube/runtime_details/instconfig_controller.go
index 0f1cf68a7..0358212cb 100644
--- a/odiglet/pkg/kube/runtime_details/instconfig_controller.go
+++ b/odiglet/pkg/kube/runtime_details/instconfig_controller.go
@@ -9,9 +9,8 @@ import (
 
 	appsv1 "k8s.io/api/apps/v1"
 
-	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
-
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"sigs.k8s.io/controller-runtime/pkg/log"
 
 	"k8s.io/apimachinery/pkg/runtime"
@@ -30,6 +29,7 @@ type DeprecatedInstrumentationConfigReconciler struct {
 
 func (i *DeprecatedInstrumentationConfigReconciler) Reconcile(ctx context.Context, request reconcile.Request) (reconcile.Result, error) {
 	logger := log.FromContext(ctx)
+
 	var instConfig odigosv1.InstrumentationConfig
 	err := i.Get(ctx, request.NamespacedName, &instConfig)
 	if err != nil {
diff --git a/odiglet/pkg/kube/runtime_details/instrumentationconfigs_controller.go b/odiglet/pkg/kube/runtime_details/instrumentationconfigs_controller.go
index c5d321942..1ec221858 100644
--- a/odiglet/pkg/kube/runtime_details/instrumentationconfigs_controller.go
+++ b/odiglet/pkg/kube/runtime_details/instrumentationconfigs_controller.go
@@ -124,6 +124,5 @@ func (r *InstrumentationConfigReconciler) Reconcile(ctx context.Context, request
 	}
 
 	logger.Info("Completed runtime detection for new instrumentation config", "namespace", request.Namespace, "name", request.Name)
-
 	return reconcile.Result{}, nil
 }
diff --git a/odiglet/pkg/kube/runtime_details/pods_controller.go b/odiglet/pkg/kube/runtime_details/pods_controller.go
index 77f229c52..f55c6797a 100644
--- a/odiglet/pkg/kube/runtime_details/pods_controller.go
+++ b/odiglet/pkg/kube/runtime_details/pods_controller.go
@@ -4,6 +4,8 @@ import (
 	"context"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common"
+	k8scontainer "github.com/odigos-io/odigos/k8sutils/pkg/container"
 	k8sutils "github.com/odigos-io/odigos/k8sutils/pkg/utils"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 	corev1 "k8s.io/api/core/v1"
@@ -18,20 +20,28 @@ import (
 type podPredicate struct{}
 
 func (p *podPredicate) Create(e event.CreateEvent) bool {
-	// this function is called when a new entity is created in the controller-runtime cache.
-	// 1. When odiglet restarts, it will receive create events for all running pods.
-	// 2. When a new pod is created in k8s, should not have status phase as running, but it does not harm to check.
 	pod, ok := e.Object.(*corev1.Pod)
 	if !ok {
 		return false
 	}
-	return pod.Status.Phase == corev1.PodRunning
+
+	// Check if pod is in Running phase. This is the first requirement
+	if pod.Status.Phase != corev1.PodRunning {
+		return false
+	}
+
+	// If pod has no containers, return false as we can't determine readiness
+	if len(pod.Status.ContainerStatuses) == 0 {
+		return false
+	}
+
+	allContainersReady := k8scontainer.AllContainersReady(pod)
+	// If all containers are not ready, return false.
+	// Otherwise, return true
+	return allContainersReady
 }
 
 func (p *podPredicate) Update(e event.UpdateEvent) bool {
-	// this function is called when an entity is updated in the controller-runtime cache.
-	// We care about pod once it's status changes from not running to running -
-	// this is the point in time we want to apply runtime details detection.
 	oldPod, oldOk := e.ObjectOld.(*corev1.Pod)
 	newPod, newOk := e.ObjectNew.(*corev1.Pod)
 
@@ -39,7 +49,25 @@ func (p *podPredicate) Update(e event.UpdateEvent) bool {
 		return false
 	}
 
-	return oldPod.Status.Phase != corev1.PodRunning && newPod.Status.Phase == corev1.PodRunning
+	// If pod has no containers, return false as we can't determine readiness
+	if len(newPod.Status.ContainerStatuses) == 0 {
+		return false
+	}
+
+	// First check if all containers in newPod are ready and started
+	allNewContainersReady := k8scontainer.AllContainersReady(newPod)
+
+	// If new containers aren't all ready, return false
+	if !allNewContainersReady {
+		return false
+	}
+
+	// Now check if any container in oldPod was not ready or not started
+	allOldContainersReady := k8scontainer.AllContainersReady(oldPod)
+
+	// Return true only if old pods had at least one container not ready/not started
+	// and new pod has all containers ready/started
+	return !allOldContainersReady && allNewContainersReady
 }
 
 func (p *podPredicate) Delete(e event.DeleteEvent) bool {
@@ -91,14 +119,20 @@ func (p *PodsReconciler) Reconcile(ctx context.Context, request reconcile.Reques
 	if err != nil {
 		return reconcile.Result{}, client.IgnoreNotFound(err)
 	}
-
 	podGeneration, err := GetPodGeneration(ctx, p.Clientset, &pod)
 	if err != nil {
 		return reconcile.Result{}, err
 	}
 
 	// prevent runtime inspection on pods for which we already have the runtime details for this generation
-	if podGeneration == 0 || podGeneration <= instrumentationConfig.Status.ObservedWorkloadGeneration {
+	// if instrumentation config contains unknown language we need to re-inspect the pod
+	failedToGetPodGeneration := podGeneration == 0
+	isNewPodGeneration := podGeneration > instrumentationConfig.Status.ObservedWorkloadGeneration
+	instrumentedConfigContainUnknown := InstrumentationConfigContainsUnknownLanguage(instrumentationConfig)
+
+	shouldSkipDetection := failedToGetPodGeneration || (!isNewPodGeneration && !instrumentedConfigContainUnknown)
+
+	if shouldSkipDetection {
 		logger.V(3).Info("skipping redundant runtime details detection since generation is not newer", "name", request.Name, "namespace", request.Namespace, "currentPodGeneration", podGeneration, "observedWorkloadGeneration", instrumentationConfig.Status.ObservedWorkloadGeneration)
 		return reconcile.Result{}, nil
 	}
@@ -143,3 +177,12 @@ func (p *PodsReconciler) getPodWorkloadObject(ctx context.Context, pod *corev1.P
 	// Pod does not necessarily have to be managed by a controller
 	return nil, nil
 }
+
+func InstrumentationConfigContainsUnknownLanguage(config odigosv1.InstrumentationConfig) bool {
+	for _, containerDetails := range config.Status.RuntimeDetailsByContainer {
+		if containerDetails.Language == common.UnknownProgrammingLanguage {
+			return true
+		}
+	}
+	return false
+}
diff --git a/odiglet/pkg/kube/utils/utils.go b/odiglet/pkg/kube/utils/utils.go
index 62c08ab11..3ebabad54 100644
--- a/odiglet/pkg/kube/utils/utils.go
+++ b/odiglet/pkg/kube/utils/utils.go
@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 
+	k8scontainer "github.com/odigos-io/odigos/k8sutils/pkg/container"
 	"github.com/odigos-io/odigos/k8sutils/pkg/workload"
 	"github.com/odigos-io/odigos/odiglet/pkg/env"
 	"go.opentelemetry.io/otel/attribute"
@@ -25,8 +26,10 @@ func GetRunningPods(ctx context.Context, labels map[string]string, ns string, ku
 
 	var filteredPods []corev1.Pod
 	for _, pod := range podList.Items {
-		if IsPodInCurrentNode(&pod) && pod.Status.Phase == corev1.PodRunning && pod.DeletionTimestamp == nil {
-			filteredPods = append(filteredPods, pod)
+		if IsPodInCurrentNode(&pod) && pod.DeletionTimestamp == nil {
+			if k8scontainer.AllContainersReady(&pod) {
+				filteredPods = append(filteredPods, pod)
+			}
 		}
 	}
 
diff --git a/opampserver/pkg/sdkconfig/collectorsgroup_controller.go b/opampserver/pkg/sdkconfig/collectorsgroup_controller.go
index c77d28a8c..f0fe54d85 100644
--- a/opampserver/pkg/sdkconfig/collectorsgroup_controller.go
+++ b/opampserver/pkg/sdkconfig/collectorsgroup_controller.go
@@ -35,7 +35,7 @@ func (d *CollectorsGroupReconciler) Reconcile(ctx context.Context, req ctrl.Requ
 	var collectorsGroup odigosv1.CollectorsGroup
 	err := d.Client.Get(ctx, req.NamespacedName, &collectorsGroup)
 	if err != nil {
-		return ctrl.Result{}, err
+		return ctrl.Result{}, client.IgnoreNotFound(err)
 	}
 
 	tracesEnabled := slices.Contains(collectorsGroup.Status.ReceiverSignals, common.TracesObservabilitySignal)
diff --git a/procdiscovery/pkg/process/process.go b/procdiscovery/pkg/process/process.go
index 95184e874..cbac14d6f 100644
--- a/procdiscovery/pkg/process/process.go
+++ b/procdiscovery/pkg/process/process.go
@@ -10,12 +10,22 @@ import (
 	"github.com/odigos-io/odigos/common/envOverwrite"
 )
 
-const NodeVersionConst = "NODE_VERSION"
-const PythonVersionConst = "PYTHON_VERSION"
-const JavaVersionConst = "JAVA_VERSION"
+const (
+	NodeVersionConst   = "NODE_VERSION"
+	PythonVersionConst = "PYTHON_VERSION"
+	JavaVersionConst   = "JAVA_VERSION"
+)
+
+// LangsVersionEnvs is a map of environment variables used for detecting the versions of different languages
+var LangsVersionEnvs = map[string]struct{}{NodeVersionConst: {}, PythonVersionConst: {}, JavaVersionConst: {}}
 
-// envDetailsMap is a map of environment variables and their separators
-var envDetailsMap = map[string]struct{}{NodeVersionConst: {}, PythonVersionConst: {}, JavaVersionConst: {}}
+const (
+	NewRelicAgentEnv = "NEW_RELIC_CONFIG_FILE"
+)
+
+var OtherAgentEnvs = map[string]string{
+	NewRelicAgentEnv: "New Relic Agent",
+}
 
 type Details struct {
 	ProcessID    int
@@ -158,10 +168,13 @@ func getRelevantEnvVars(pid int) ProcessEnvs {
 			overWriteEnvsResult[envParts[0]] = envParts[1]
 		}
 
-		if _, ok := envDetailsMap[envParts[0]]; ok {
+		if _, ok := LangsVersionEnvs[envParts[0]]; ok {
 			detailedEnvsResult[envParts[0]] = envParts[1]
 		}
 
+		if _, ok := OtherAgentEnvs[envParts[0]]; ok {
+			detailedEnvsResult[envParts[0]] = envParts[1]
+		}
 	}
 
 	envs := ProcessEnvs{
diff --git a/scheduler/controllers/collectorgroups/cluster.go b/scheduler/controllers/collectorgroups/cluster.go
index e528bb84b..f9e9dfe63 100644
--- a/scheduler/controllers/collectorgroups/cluster.go
+++ b/scheduler/controllers/collectorgroups/cluster.go
@@ -8,12 +8,17 @@ import (
 
 func NewClusterCollectorGroup(namespace string) *odigosv1.CollectorsGroup {
 	return &odigosv1.CollectorsGroup{
+		TypeMeta: metav1.TypeMeta{
+			Kind:       "CollectorsGroup",
+			APIVersion: "odigos.io/v1alpha1",
+		},
 		ObjectMeta: metav1.ObjectMeta{
 			Name:      consts.OdigosClusterCollectorCollectorGroupName,
 			Namespace: namespace,
 		},
 		Spec: odigosv1.CollectorsGroupSpec{
-			Role: odigosv1.CollectorsGroupRoleClusterGateway,
+			Role:                    odigosv1.CollectorsGroupRoleClusterGateway,
+			CollectorOwnMetricsPort: consts.OdigosClusterCollectorOwnTelemetryPortDefault,
 		},
 	}
 }
diff --git a/scheduler/controllers/collectorgroups/datacollection.go b/scheduler/controllers/collectorgroups/datacollection.go
index b87da7b6f..3d3631d84 100644
--- a/scheduler/controllers/collectorgroups/datacollection.go
+++ b/scheduler/controllers/collectorgroups/datacollection.go
@@ -2,23 +2,35 @@ package collectorgroups
 
 import (
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
-func NewNodeCollectorGroup() *odigosv1.CollectorsGroup {
+func NewNodeCollectorGroup(odigosConfig common.OdigosConfiguration) *odigosv1.CollectorsGroup {
+
+	ownMetricsPort := consts.OdigosNodeCollectorOwnTelemetryPortDefault
+	if odigosConfig.CollectorNode != nil && odigosConfig.CollectorNode.CollectorOwnMetricsPort != 0 {
+		ownMetricsPort = odigosConfig.CollectorNode.CollectorOwnMetricsPort
+	}
+
 	return &odigosv1.CollectorsGroup{
+		TypeMeta: metav1.TypeMeta{
+			Kind:       "CollectorsGroup",
+			APIVersion: "odigos.io/v1alpha1",
+		},
 		ObjectMeta: metav1.ObjectMeta{
 			Name:      consts.OdigosNodeCollectorDaemonSetName,
 			Namespace: env.GetCurrentNamespace(),
 		},
 		Spec: odigosv1.CollectorsGroupSpec{
-			Role: odigosv1.CollectorsGroupRoleNodeCollector,
+			Role:                    odigosv1.CollectorsGroupRoleNodeCollector,
+			CollectorOwnMetricsPort: ownMetricsPort,
 		},
 	}
 }
 
-func ShouldCreateNodeCollectorGroup(gatewayReady bool, dataCollectionExists bool, numberofInstrumentedApps int) bool {
-	return gatewayReady && !dataCollectionExists && numberofInstrumentedApps > 0
+func ShouldHaveNodeCollectorGroup(gatewayReady bool, numberofInstrumentedApps int) bool {
+	return gatewayReady && numberofInstrumentedApps > 0
 }
diff --git a/scheduler/controllers/collectorsgroup_controller.go b/scheduler/controllers/collectorsgroup_controller.go
deleted file mode 100644
index 4dfa5eb98..000000000
--- a/scheduler/controllers/collectorsgroup_controller.go
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
-Copyright 2022.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-package controllers
-
-import (
-	"context"
-
-	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"github.com/odigos-io/odigos/k8sutils/pkg/utils"
-	"github.com/odigos-io/odigos/scheduler/controllers/collectorgroups"
-	"k8s.io/apimachinery/pkg/runtime"
-	ctrl "sigs.k8s.io/controller-runtime"
-	"sigs.k8s.io/controller-runtime/pkg/client"
-	"sigs.k8s.io/controller-runtime/pkg/log"
-)
-
-// CollectorsGroupReconciler reconciles a CollectorsGroup object
-type CollectorsGroupReconciler struct {
-	client.Client
-	Scheme *runtime.Scheme
-}
-
-// up until v1.0.31, the collectors group role names were "GATEWAY" and "DATA_COLLECTION".
-// in v1.0.32, the role names were changed to "CLUSTER_GATEWAY" and "NODE_COLLECTOR",
-// due to adding the Processor CRD which uses these role names.
-// the new names are more descriptive and are preparations for future roles.
-// unfortunately, the role names are used in the collectorgroup CR, which needs to be updated
-// when a user upgrades from <=v1.0.31 to >=v1.0.32.
-// this function is responsible to do this update.
-// once we drop support for <=v1.0.31, we can remove this function.
-func (r *CollectorsGroupReconciler) applyNewCollectorRoleNames(ctx context.Context, collectorGroup *odigosv1.CollectorsGroup) error {
-	if collectorGroup.Spec.Role == "GATEWAY" {
-		logger := log.FromContext(ctx)
-		logger.Info("updating collector group role name", "old", "GATEWAY", "new", "CLUSTER_GATEWAY")
-		collectorGroup.Spec.Role = odigosv1.CollectorsGroupRoleClusterGateway
-		return r.Update(ctx, collectorGroup)
-	}
-	if collectorGroup.Spec.Role == "DATA_COLLECTION" {
-		logger := log.FromContext(ctx)
-		logger.Info("updating collector group role name", "old", "DATA_COLLECTION", "new", "NODE_COLLECTOR")
-		collectorGroup.Spec.Role = odigosv1.CollectorsGroupRoleNodeCollector
-		return r.Update(ctx, collectorGroup)
-	}
-	return nil
-}
-
-// +kubebuilder:rbac:groups=odigos.io,resources=collectorsgroups,verbs=get;list;watch;create;update;patch;delete
-// +kubebuilder:rbac:groups=odigos.io,resources=collectorsgroups/status,verbs=get;update;patch
-// +kubebuilder:rbac:groups=odigos.io,resources=collectorsgroups/finalizers,verbs=update
-func (r *CollectorsGroupReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
-	logger := log.FromContext(ctx)
-	var collectorGroups odigosv1.CollectorsGroupList
-	err := r.List(ctx, &collectorGroups, client.InNamespace(req.Namespace))
-	if err != nil {
-		logger.Error(err, "failed to list collectors groups")
-		return ctrl.Result{}, err
-	}
-
-	gatewayReady := false
-	dataCollectionExists := false
-	for _, collectorGroup := range collectorGroups.Items {
-		err := r.applyNewCollectorRoleNames(ctx, &collectorGroup)
-		if err != nil {
-			logger.Error(err, "failed to apply new collector role names")
-			return ctrl.Result{}, err
-		}
-
-		if collectorGroup.Spec.Role == odigosv1.CollectorsGroupRoleClusterGateway && collectorGroup.Status.Ready {
-			gatewayReady = true
-		}
-
-		if collectorGroup.Spec.Role == odigosv1.CollectorsGroupRoleNodeCollector {
-			dataCollectionExists = true
-		}
-	}
-
-	var instApps odigosv1.InstrumentationConfigList
-	if err = r.List(ctx, &instApps); err != nil {
-		logger.Error(err, "failed to list InstrumentationConfigs")
-		return ctrl.Result{}, err
-	}
-
-	if collectorgroups.ShouldCreateNodeCollectorGroup(gatewayReady, dataCollectionExists, len(instApps.Items)) {
-		err = utils.CreateCollectorGroup(ctx, r.Client, collectorgroups.NewNodeCollectorGroup())
-		if err != nil {
-			logger.Error(err, "failed to create data collection collector group")
-			return ctrl.Result{}, err
-		}
-	}
-
-	return ctrl.Result{}, nil
-}
-
-// SetupWithManager sets up the controller with the Manager.
-func (r *CollectorsGroupReconciler) SetupWithManager(mgr ctrl.Manager) error {
-	return ctrl.NewControllerManagedBy(mgr).
-		For(&odigosv1.CollectorsGroup{}).
-		Complete(r)
-}
diff --git a/scheduler/controllers/destination_controller.go b/scheduler/controllers/destination_controller.go
index a1af2d6ae..46eab9c86 100644
--- a/scheduler/controllers/destination_controller.go
+++ b/scheduler/controllers/destination_controller.go
@@ -18,9 +18,11 @@ package controllers
 
 import (
 	"context"
+
 	"github.com/odigos-io/odigos/k8sutils/pkg/utils"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	odigospredicates "github.com/odigos-io/odigos/k8sutils/pkg/predicate"
 	"github.com/odigos-io/odigos/scheduler/controllers/collectorgroups"
 
 	"k8s.io/apimachinery/pkg/runtime"
@@ -49,22 +51,15 @@ func (r *DestinationReconciler) Reconcile(ctx context.Context, req ctrl.Request)
 	}
 
 	if len(dests.Items) > 0 {
-		var collectorGroups odigosv1.CollectorsGroupList
-		err := r.List(ctx, &collectorGroups, client.InNamespace(req.Namespace))
+		logger.V(0).Info("destinations found, syncing cluster collector group")
+		err := utils.ApplyCollectorGroup(ctx, r.Client, collectorgroups.NewClusterCollectorGroup(req.Namespace))
 		if err != nil {
-			logger.Error(err, "failed to list collectors groups")
+			logger.Error(err, "failed to sync cluster collector group")
 			return ctrl.Result{}, err
 		}
-
-		if len(collectorGroups.Items) == 0 {
-			logger.V(0).Info("destinations found, but no collectors groups found, creating gateway")
-			err = utils.CreateCollectorGroup(ctx, r.Client, collectorgroups.NewClusterCollectorGroup(req.Namespace))
-			if err != nil {
-				logger.Error(err, "failed to create gateway")
-				return ctrl.Result{}, err
-			}
-		}
 	}
+	// once the gateway is created, it is not deleted, even if there are no destinations.
+	// we might want to re-consider this behavior.
 
 	return ctrl.Result{}, nil
 }
@@ -73,5 +68,6 @@ func (r *DestinationReconciler) Reconcile(ctx context.Context, req ctrl.Request)
 func (r *DestinationReconciler) SetupWithManager(mgr ctrl.Manager) error {
 	return ctrl.NewControllerManagedBy(mgr).
 		For(&odigosv1.Destination{}).
+		WithEventFilter(&odigospredicates.ExistencePredicate{}). // only care when destinations are created or deleted
 		Complete(r)
 }
diff --git a/scheduler/controllers/instrumentationconfig_controller.go b/scheduler/controllers/instrumentationconfig_controller.go
deleted file mode 100644
index 096a284ec..000000000
--- a/scheduler/controllers/instrumentationconfig_controller.go
+++ /dev/null
@@ -1,81 +0,0 @@
-package controllers
-
-import (
-	"context"
-
-	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
-	"github.com/odigos-io/odigos/k8sutils/pkg/consts"
-	"github.com/odigos-io/odigos/k8sutils/pkg/env"
-	"github.com/odigos-io/odigos/k8sutils/pkg/utils"
-	nodeCollectorGroupUtil "github.com/odigos-io/odigos/scheduler/controllers/collectorgroups"
-	"k8s.io/apimachinery/pkg/api/errors"
-	"k8s.io/apimachinery/pkg/runtime"
-	ctrl "sigs.k8s.io/controller-runtime"
-	"sigs.k8s.io/controller-runtime/pkg/client"
-	"sigs.k8s.io/controller-runtime/pkg/log"
-)
-
-type InstrumentationConfigReconciler struct {
-	client.Client
-	Scheme           *runtime.Scheme
-	ImagePullSecrets []string
-	OdigosVersion    string
-}
-
-func (r *InstrumentationConfigReconciler) Reconcile(ctx context.Context, req ctrl.Request) (ctrl.Result, error) {
-	logger := log.FromContext(ctx)
-	logger.V(0).Info("Reconciling InstrumentationConfig")
-
-	namespace := env.GetCurrentNamespace()
-
-	var instrumentedConfigs odigosv1.InstrumentationConfigList
-	err := r.List(ctx, &instrumentedConfigs)
-	if err != nil {
-		logger.Error(err, "failed to list InstrumentationConfigs")
-		return ctrl.Result{}, err
-	}
-	numberOfInstrumentedApps := len(instrumentedConfigs.Items)
-
-	if numberOfInstrumentedApps == 0 {
-		if err = utils.DeleteCollectorGroup(ctx, r.Client, namespace, consts.OdigosNodeCollectorCollectorGroupName); err != nil {
-			return ctrl.Result{}, err
-		}
-	}
-
-	clusterCollectorGroup, err := utils.GetCollectorGroup(ctx, r.Client, namespace, consts.OdigosClusterCollectorCollectorGroupName)
-	if err != nil {
-		if errors.IsNotFound(err) {
-			logger.V(3).Info("collector group doesn't exist", "collectorGroupName", clusterCollectorGroup)
-			return ctrl.Result{}, nil
-		}
-		logger.Error(err, "failed to get collector group", "collectorGroupName", consts.OdigosClusterCollectorCollectorGroupName)
-		return ctrl.Result{}, err
-	}
-
-	dataCollectionExists := true
-	_, err = utils.GetCollectorGroup(ctx, r.Client, namespace, consts.OdigosNodeCollectorDaemonSetName)
-	if err != nil {
-		if errors.IsNotFound(err) {
-			dataCollectionExists = false
-		} else {
-			logger.Error(err, "failed to get collector group", "collectorGroupName", consts.OdigosNodeCollectorCollectorGroupName)
-			return ctrl.Result{}, err
-		}
-	}
-
-	if nodeCollectorGroupUtil.ShouldCreateNodeCollectorGroup(clusterCollectorGroup.Status.Ready, dataCollectionExists, numberOfInstrumentedApps) {
-		err = utils.CreateCollectorGroup(ctx, r.Client, nodeCollectorGroupUtil.NewNodeCollectorGroup())
-		if err != nil {
-			logger.Error(err, "failed to create data collection collector group")
-			return ctrl.Result{}, err
-		}
-	}
-
-	return ctrl.Result{}, nil
-}
-
-func (r *InstrumentationConfigReconciler) SetupWithManager(mgr ctrl.Manager) error {
-	return ctrl.NewControllerManagedBy(mgr).
-		For(&odigosv1.InstrumentationConfig{}).
-		Complete(r)
-}
diff --git a/scheduler/controllers/nodecollector_controller.go b/scheduler/controllers/nodecollector_controller.go
new file mode 100644
index 000000000..1fbc5a0c1
--- /dev/null
+++ b/scheduler/controllers/nodecollector_controller.go
@@ -0,0 +1,106 @@
+package controllers
+
+import (
+	"context"
+
+	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	k8sutilsconsts "github.com/odigos-io/odigos/k8sutils/pkg/consts"
+	"github.com/odigos-io/odigos/k8sutils/pkg/env"
+	odigospredicates "github.com/odigos-io/odigos/k8sutils/pkg/predicate"
+	"github.com/odigos-io/odigos/k8sutils/pkg/utils"
+	nodeCollectorGroupUtil "github.com/odigos-io/odigos/scheduler/controllers/collectorgroups"
+	corev1 "k8s.io/api/core/v1"
+	"k8s.io/apimachinery/pkg/api/errors"
+	"k8s.io/apimachinery/pkg/runtime"
+	ctrl "sigs.k8s.io/controller-runtime"
+	"sigs.k8s.io/controller-runtime/pkg/client"
+	"sigs.k8s.io/controller-runtime/pkg/log"
+	"sigs.k8s.io/controller-runtime/pkg/predicate"
+)
+
+type NodeCollectorsGroupReconciler struct {
+	client.Client
+	Scheme           *runtime.Scheme
+	ImagePullSecrets []string
+	OdigosVersion    string
+}
+
+func (r *NodeCollectorsGroupReconciler) Reconcile(ctx context.Context, _ ctrl.Request) (ctrl.Result, error) {
+	logger := log.FromContext(ctx)
+
+	namespace := env.GetCurrentNamespace()
+
+	var instrumentedConfigs odigosv1.InstrumentationConfigList
+	err := r.List(ctx, &instrumentedConfigs)
+	if err != nil {
+		logger.Error(err, "failed to list InstrumentationConfigs")
+		return ctrl.Result{}, err
+	}
+	numberOfInstrumentedApps := len(instrumentedConfigs.Items)
+
+	if numberOfInstrumentedApps == 0 {
+		if err = utils.DeleteCollectorGroup(ctx, r.Client, namespace, k8sutilsconsts.OdigosNodeCollectorCollectorGroupName); err != nil {
+			return ctrl.Result{}, err
+		}
+	}
+
+	clusterCollectorGroup, err := utils.GetCollectorGroup(ctx, r.Client, namespace, k8sutilsconsts.OdigosClusterCollectorCollectorGroupName)
+	if err != nil {
+		if errors.IsNotFound(err) {
+			logger.V(3).Info("collector group doesn't exist", "collectorGroupName", clusterCollectorGroup)
+			return ctrl.Result{}, nil
+		}
+		logger.Error(err, "failed to get collector group", "collectorGroupName", k8sutilsconsts.OdigosClusterCollectorCollectorGroupName)
+		return ctrl.Result{}, err
+	}
+
+	odigosConfig, err := utils.GetCurrentOdigosConfig(ctx, r.Client)
+	if err != nil {
+		logger.Error(err, "failed to get odigos config")
+		return ctrl.Result{}, err
+	}
+
+	if nodeCollectorGroupUtil.ShouldHaveNodeCollectorGroup(clusterCollectorGroup.Status.Ready, numberOfInstrumentedApps) {
+		err = utils.ApplyCollectorGroup(ctx, r.Client, nodeCollectorGroupUtil.NewNodeCollectorGroup(odigosConfig))
+		if err != nil {
+			logger.Error(err, "failed to create data collection collector group")
+			return ctrl.Result{}, err
+		}
+	}
+
+	return ctrl.Result{}, nil
+}
+
+func (r *NodeCollectorsGroupReconciler) SetupWithManager(mgr ctrl.Manager) error {
+
+	// here we enumerate the inputs events that the controller when data collection collector group should be updated
+
+	err := ctrl.NewControllerManagedBy(mgr).
+		For(&odigosv1.InstrumentationConfig{}).
+		Named("nodecollectorgroup-instrumentationconfig").
+		WithEventFilter(&odigospredicates.ExistencePredicate{}).
+		Complete(r)
+	if err != nil {
+		return err
+	}
+
+	err = ctrl.NewControllerManagedBy(mgr).
+		For(&corev1.ConfigMap{}).
+		Named("nodecollectorgroup-odigosconfig").
+		WithEventFilter(&odigospredicates.OdigosConfigMapPredicate).
+		Complete(r)
+	if err != nil {
+		return err
+	}
+
+	err = ctrl.NewControllerManagedBy(mgr).
+		For(&odigosv1.CollectorsGroup{}).
+		Named("nodecollectorgroup-collectorsgroup").
+		WithEventFilter(predicate.And(&odigospredicates.OdigosCollectorsGroupClusterPredicate, &odigospredicates.CgBecomesReadyPredicate{})).
+		Complete(r)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
diff --git a/scheduler/go.mod b/scheduler/go.mod
index dcc459f56..ef8bb2b33 100644
--- a/scheduler/go.mod
+++ b/scheduler/go.mod
@@ -5,10 +5,12 @@ go 1.22.0
 require (
 	github.com/go-logr/zapr v1.3.0
 	github.com/odigos-io/odigos/api v0.0.0
+	github.com/odigos-io/odigos/common v0.0.0
 	github.com/odigos-io/odigos/k8sutils v0.0.0
 	github.com/odigos-io/opentelemetry-zap-bridge v0.0.5
 	github.com/onsi/ginkgo v1.16.5
 	github.com/onsi/gomega v1.34.2
+	k8s.io/api v0.31.0
 	k8s.io/apimachinery v0.31.0
 	k8s.io/client-go v0.31.0
 	sigs.k8s.io/controller-runtime v0.19.0
@@ -50,7 +52,6 @@ require (
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 // indirect
 	github.com/nxadm/tail v1.4.8 // indirect
-	github.com/odigos-io/odigos/common v0.0.0 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/prometheus/client_golang v1.19.1 // indirect
 	github.com/prometheus/client_model v0.6.1 // indirect
@@ -82,7 +83,6 @@ require (
 	gopkg.in/tomb.v1 v1.0.0-20141024135613-dd632973f1e7 // indirect
 	gopkg.in/yaml.v2 v2.4.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
-	k8s.io/api v0.31.0 // indirect
 	k8s.io/apiextensions-apiserver v0.31.0 // indirect
 	k8s.io/klog/v2 v2.130.1 // indirect
 	k8s.io/kube-openapi v0.0.0-20240228011516-70dd3763d340 // indirect
diff --git a/scheduler/main.go b/scheduler/main.go
index 9ae9e330c..21c1ad2a1 100644
--- a/scheduler/main.go
+++ b/scheduler/main.go
@@ -22,6 +22,8 @@ import (
 
 	"github.com/go-logr/zapr"
 	bridge "github.com/odigos-io/opentelemetry-zap-bridge"
+	"sigs.k8s.io/controller-runtime/pkg/cache"
+	"sigs.k8s.io/controller-runtime/pkg/client"
 	metricsserver "sigs.k8s.io/controller-runtime/pkg/metrics/server"
 
 	// Import all Kubernetes client auth plugins (e.g. Azure, GCP, OIDC, etc.)
@@ -29,6 +31,10 @@ import (
 	_ "k8s.io/client-go/plugin/pkg/client/auth"
 
 	odigosv1 "github.com/odigos-io/odigos/api/odigos/v1alpha1"
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/k8sutils/pkg/env"
+	corev1 "k8s.io/api/core/v1"
+	"k8s.io/apimachinery/pkg/fields"
 	"k8s.io/apimachinery/pkg/runtime"
 	utilruntime "k8s.io/apimachinery/pkg/util/runtime"
 	clientgoscheme "k8s.io/client-go/kubernetes/scheme"
@@ -71,11 +77,24 @@ func main() {
 	logger := zapr.NewLogger(zapLogger)
 	ctrl.SetLogger(logger)
 
+	odigosNs := env.GetCurrentNamespace()
+	nsSelector := client.InNamespace(odigosNs).AsSelector()
+	nameSelector := fields.OneTermEqualSelector("metadata.name", consts.OdigosConfigurationName)
+	odigosConfigSelector := fields.AndSelectors(nsSelector, nameSelector)
+
 	mgr, err := ctrl.NewManager(ctrl.GetConfigOrDie(), ctrl.Options{
 		Scheme: scheme,
 		Metrics: metricsserver.Options{
 			BindAddress: metricsAddr,
 		},
+		Cache: cache.Options{
+			DefaultTransform: cache.TransformStripManagedFields(),
+			ByObject: map[client.Object]cache.ByObject{
+				&corev1.ConfigMap{}: {
+					Field: odigosConfigSelector,
+				},
+			},
+		},
 		HealthProbeBindAddress: probeAddr,
 		LeaderElection:         enableLeaderElection,
 		LeaderElectionID:       "ce024640.odigos.io",
@@ -85,13 +104,6 @@ func main() {
 		os.Exit(1)
 	}
 
-	if err = (&controllers.CollectorsGroupReconciler{
-		Client: mgr.GetClient(),
-		Scheme: mgr.GetScheme(),
-	}).SetupWithManager(mgr); err != nil {
-		setupLog.Error(err, "unable to create controller", "controller", "CollectorsGroup")
-		os.Exit(1)
-	}
 	if err = (&controllers.DestinationReconciler{
 		Client: mgr.GetClient(),
 		Scheme: mgr.GetScheme(),
@@ -99,7 +111,7 @@ func main() {
 		setupLog.Error(err, "unable to create controller", "controller", "Destination")
 		os.Exit(1)
 	}
-	if err = (&controllers.InstrumentationConfigReconciler{
+	if err = (&controllers.NodeCollectorsGroupReconciler{
 		Client: mgr.GetClient(),
 		Scheme: mgr.GetScheme(),
 	}).SetupWithManager(mgr); err != nil {
diff --git a/tests-infrastructure/terraform/aks/main.tf b/tests-infrastructure/terraform/aks/main.tf
new file mode 100644
index 000000000..ffab99dd0
--- /dev/null
+++ b/tests-infrastructure/terraform/aks/main.tf
@@ -0,0 +1,27 @@
+terraform {
+  backend "local" {
+    path = "terraform-${var.test_scenario}-${var.run_id}.tfstate"
+  }
+}
+
+resource "azurerm_kubernetes_cluster" "aks" {
+  name                = var.cluster_name
+  location            = azurerm_resource_group.rg.location
+  resource_group_name = azurerm_resource_group.rg.name
+  dns_prefix          = var.cluster_name
+
+  default_node_pool {
+    name       = "default"
+    node_count = var.node_count
+    vm_size    = "Standard_B2s"
+  }
+
+  identity {
+    type = "SystemAssigned"
+  }
+}
+
+resource "azurerm_resource_group" "rg" {
+  name     = var.resource_group_name
+  location = "East US"
+}
diff --git a/tests-infrastructure/terraform/aks/outputs.tf b/tests-infrastructure/terraform/aks/outputs.tf
new file mode 100644
index 000000000..da1f331ba
--- /dev/null
+++ b/tests-infrastructure/terraform/aks/outputs.tf
@@ -0,0 +1,4 @@
+output "kube_config" {
+  value = azurerm_kubernetes_cluster.aks.kube_config_raw
+  sensitive = true
+}
diff --git a/tests-infrastructure/terraform/aks/provider.tf b/tests-infrastructure/terraform/aks/provider.tf
new file mode 100644
index 000000000..615cb43d9
--- /dev/null
+++ b/tests-infrastructure/terraform/aks/provider.tf
@@ -0,0 +1,3 @@
+provider "azurerm" {
+  features {}
+}
\ No newline at end of file
diff --git a/tests-infrastructure/terraform/aks/variables.tf b/tests-infrastructure/terraform/aks/variables.tf
new file mode 100644
index 000000000..01befe9f6
--- /dev/null
+++ b/tests-infrastructure/terraform/aks/variables.tf
@@ -0,0 +1,24 @@
+variable "resource_group_name" {
+  description = "Name of the resource group"
+  default     = "tests-rg"
+}
+
+variable "cluster_name" {
+  description = "Name of the AKS cluster"
+  default     = "tests-aks"
+}
+
+variable "node_count" {
+  description = "Number of nodes in the cluster"
+  default     = 1
+}
+
+variable "test_scenario" {
+  description = "Test scenario to differentiate state files"
+  type        = string
+}
+
+variable "run_id" {
+  description = "GitHub run ID for uniquely identifying state files"
+  type        = string
+}
\ No newline at end of file
diff --git a/tests/e2e/cli-upgrade/assert-instrumented-and-pipeline.yaml b/tests/e2e/cli-upgrade/assert-instrumented-and-pipeline.yaml
index 8f32b4ada..e83ab4ced 100644
--- a/tests/e2e/cli-upgrade/assert-instrumented-and-pipeline.yaml
+++ b/tests/e2e/cli-upgrade/assert-instrumented-and-pipeline.yaml
@@ -22,7 +22,7 @@ apiVersion: apps/v1
 kind: Deployment
 metadata:
   labels:
-    odigos.io/collector-role: "CLUSTER_GATEWAY"
+    odigos.io/collector-role: 'CLUSTER_GATEWAY'
   name: odigos-gateway
   namespace: odigos-test-cli-upgrade
   ownerReferences:
@@ -35,11 +35,11 @@ spec:
   replicas: 1
   selector:
     matchLabels:
-      odigos.io/collector-role: "CLUSTER_GATEWAY"
+      odigos.io/collector-role: 'CLUSTER_GATEWAY'
   template:
     metadata:
       labels:
-        odigos.io/collector-role: "CLUSTER_GATEWAY"
+        odigos.io/collector-role: 'CLUSTER_GATEWAY'
     spec:
       containers:
         - env:
@@ -105,7 +105,7 @@ apiVersion: apps/v1
 kind: DaemonSet
 metadata:
   labels:
-    odigos.io/collector-role: "NODE_COLLECTOR"
+    odigos.io/collector-role: 'NODE_COLLECTOR'
   name: odigos-data-collection
   namespace: odigos-test-cli-upgrade
   ownerReferences:
@@ -117,11 +117,11 @@ metadata:
 spec:
   selector:
     matchLabels:
-      odigos.io/collector-role: "NODE_COLLECTOR"
+      odigos.io/collector-role: 'NODE_COLLECTOR'
   template:
     metadata:
       labels:
-        odigos.io/collector-role: "NODE_COLLECTOR"
+        odigos.io/collector-role: 'NODE_COLLECTOR'
     spec:
       containers:
         - name: data-collection
@@ -166,15 +166,15 @@ spec:
           name: conf
         - hostPath:
             path: /var/log
-            type: ""
+            type: ''
           name: varlog
         - hostPath:
             path: /var/lib/docker/containers
-            type: ""
+            type: ''
           name: varlibdockercontainers
         - hostPath:
             path: /var/lib/kubelet/pod-resources
-            type: ""
+            type: ''
           name: kubeletpodresources
 status:
   numberAvailable: 1
@@ -191,9 +191,9 @@ spec:
     - name: frontend
       resources:
         limits:
-          instrumentation.odigos.io/java-native-community: "1"
+          instrumentation.odigos.io/java-native-community: '1'
         requests:
-          instrumentation.odigos.io/java-native-community: "1"
+          instrumentation.odigos.io/java-native-community: '1'
 status:
   containerStatuses:
     - name: frontend
@@ -213,9 +213,9 @@ spec:
     - name: coupon
       resources:
         limits:
-          instrumentation.odigos.io/javascript-native-community: "1"
+          instrumentation.odigos.io/javascript-native-community: '1'
         requests:
-          instrumentation.odigos.io/javascript-native-community: "1"
+          instrumentation.odigos.io/javascript-native-community: '1'
 status:
   containerStatuses:
     - name: coupon
@@ -235,9 +235,9 @@ spec:
     - name: inventory
       resources:
         limits:
-          instrumentation.odigos.io/python-native-community: "1"
+          instrumentation.odigos.io/python-native-community: '1'
         requests:
-          instrumentation.odigos.io/python-native-community: "1"
+          instrumentation.odigos.io/python-native-community: '1'
 status:
   containerStatuses:
     - name: inventory
@@ -257,9 +257,9 @@ spec:
     - name: membership
       resources:
         limits:
-          instrumentation.odigos.io/go-ebpf-community: "1"
+          instrumentation.odigos.io/go-ebpf-community: '1'
         requests:
-          instrumentation.odigos.io/go-ebpf-community: "1"
+          instrumentation.odigos.io/go-ebpf-community: '1'
 status:
   containerStatuses:
     - name: membership
@@ -279,9 +279,9 @@ spec:
     - name: pricing
       resources:
         limits:
-          instrumentation.odigos.io/dotnet-native-community: "1"
+          instrumentation.odigos.io/dotnet-native-community: '1'
         requests:
-          instrumentation.odigos.io/dotnet-native-community: "1"
+          instrumentation.odigos.io/dotnet-native-community: '1'
 status:
   containerStatuses:
     - name: pricing
@@ -309,7 +309,12 @@ status:
       (value != null): true # This will hold the version before the upgrade
     - key: process.pid
       (value != null): true
----
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
 metadata:
@@ -325,7 +330,12 @@ status:
       (value != null): true
     - key: telemetry.sdk.language
       value: python
----
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true          
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
 metadata:
diff --git a/tests/e2e/fe-synthetic/assert-instrumented-and-pipeline.yaml b/tests/e2e/fe-synthetic/assert-instrumented-and-pipeline.yaml
index 29e00f88c..963140ca2 100644
--- a/tests/e2e/fe-synthetic/assert-instrumented-and-pipeline.yaml
+++ b/tests/e2e/fe-synthetic/assert-instrumented-and-pipeline.yaml
@@ -309,6 +309,12 @@ status:
       value: e2e-test
     - key: process.pid
       (value != null): true
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true      
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
@@ -325,6 +331,12 @@ status:
       (value != null): true
     - key: telemetry.sdk.language
       value: python
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true        
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
diff --git a/tests/e2e/helm-chart/assert-instrumented-and-pipeline.yaml b/tests/e2e/helm-chart/assert-instrumented-and-pipeline.yaml
index f043c52b2..49d45bca6 100644
--- a/tests/e2e/helm-chart/assert-instrumented-and-pipeline.yaml
+++ b/tests/e2e/helm-chart/assert-instrumented-and-pipeline.yaml
@@ -306,9 +306,15 @@ status:
     - key: process.runtime.version
       (value != null): true
     - key: telemetry.distro.version
-      value: e2e-test
+      (value != null): true
     - key: process.pid
       (value != null): true
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
@@ -325,6 +331,12 @@ status:
       (value != null): true
     - key: telemetry.sdk.language
       value: python
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true        
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
diff --git a/tests/e2e/helm-chart/chainsaw-test.yaml b/tests/e2e/helm-chart/chainsaw-test.yaml
index 637bedb81..972977c85 100644
--- a/tests/e2e/helm-chart/chainsaw-test.yaml
+++ b/tests/e2e/helm-chart/chainsaw-test.yaml
@@ -32,17 +32,35 @@ spec:
           P="../../.."
           # "build" complete helm chart by copying CRDs into the template folder
           cp -r $P/api/config/crd/bases/* $P/helm/odigos/templates/crds/
-          helm upgrade --install odigos $P/helm/odigos --create-namespace --namespace odigos-test-ns --set image.tag=e2e-test
+          if [ "$MODE" = "cross-cloud-tests" ]; then
+            helm upgrade --install odigos $P/helm/odigos --create-namespace --namespace odigos-test-ns --set image.tag="$COMMIT_HASH" --set imagePrefix=public.ecr.aws/y2v0v6s7
+          else
+            helm upgrade --install odigos $P/helm/odigos --create-namespace --namespace odigos-test-ns --set image.tag=e2e-test
+          fi
           kubectl label namespace odigos-test-ns odigos.io/system-object="true"
         timeout: 60s
   - name: Verify Odigos Installation
     try:
     - script:
+        timeout: 200s
         content: |
+          echo "Starting Odigos version check..."
           export ACTUAL_VERSION=$(../../../cli/odigos version --cluster)
-          if [ "$ACTUAL_VERSION" != "e2e-test" ]; then
-            echo "Odigos version is not e2e-test, got $ACTUAL_VERSION"
-            exit 1
+          echo "Actual Version: $ACTUAL_VERSION"
+
+          if [ "$MODE" = "cross-cloud-tests" ]; then
+            if [ "$ACTUAL_VERSION" != "$COMMIT_HASH" ]; then
+              echo "Odigos version is not the expected commit hash, got $ACTUAL_VERSION"
+              exit 1
+            fi
+
+          kubectl wait --for=condition=ready pods --all -n odigos-test-ns --timeout=40s
+
+          else
+            if [ "$ACTUAL_VERSION" != "e2e-test" ]; then
+              echo "Odigos version is not e2e-test, got $ACTUAL_VERSION"
+              exit 1
+            fi
           fi
     - assert:
         file: assert-odigos-installed.yaml
@@ -51,34 +69,69 @@ spec:
     - script:
         timeout: 100s
         content: |
-          docker pull keyval/odigos-demo-inventory:v0.1
-          docker pull keyval/odigos-demo-membership:v0.1
-          docker pull keyval/odigos-demo-coupon:v0.1
-          docker pull keyval/odigos-demo-inventory:v0.1
-          docker pull keyval/odigos-demo-frontend:v0.2
-          kind load docker-image keyval/odigos-demo-inventory:v0.1
-          kind load docker-image keyval/odigos-demo-membership:v0.1
-          kind load docker-image keyval/odigos-demo-coupon:v0.1
-          kind load docker-image keyval/odigos-demo-inventory:v0.1
-          kind load docker-image keyval/odigos-demo-frontend:v0.2
+          if [ "$MODE" != "cross-cloud-tests" ]; then
+            docker pull keyval/odigos-demo-inventory:v0.1
+            docker pull keyval/odigos-demo-membership:v0.1
+            docker pull keyval/odigos-demo-coupon:v0.1
+            docker pull keyval/odigos-demo-frontend:v0.2
+            kind load docker-image keyval/odigos-demo-inventory:v0.1
+            kind load docker-image keyval/odigos-demo-membership:v0.1
+            kind load docker-image keyval/odigos-demo-coupon:v0.1
+            kind load docker-image keyval/odigos-demo-frontend:v0.2
+          else
+            echo "Skipping docker pull and kind load for cross-cloud-tests mode"
+          fi
     - apply:
         file: 02-install-simple-demo.yaml
+    - script:
+        timeout: 70s
+        content: |
+          # Wait for the pods to be ready
+          kubectl wait --for=condition=ready pod -l app=frontend --timeout=60s
+          kubectl wait --for=condition=ready pod -l app=coupon --timeout=60s
+          kubectl wait --for=condition=ready pod -l app=inventory --timeout=60s
+          kubectl wait --for=condition=ready pod -l app=pricing --timeout=60s
+          kubectl wait --for=condition=ready pod -l app=membership --timeout=60s
     - assert:
         file: assert-apps-installed.yaml
-  - name: Detect Languages
+
+  - name: Instrument Namespace
     try:
     - apply:
         file: 03-instrument-ns.yaml
+  
+  - name: Assert Runtime Detected
+    try:
     - assert:
+        timeout: 2m
         file: assert-runtime-detected.yaml
+
   - name: Add Destination
     try:
     - apply:
         file: 04-add-destination.yaml
+
+  - name: Assert Instrumented and Pipeline
+    try:
     - assert:
         file: assert-instrumented-and-pipeline.yaml
+
+  - name: Verify InstrumentationConfig Generation Status
+    try:
+    - script:
+        timeout: 65s
+        content: |
+          kubectl wait --for=jsonpath='{.status.observedWorkloadGeneration}'=2 -n default instrumentationconfig/deployment-frontend --timeout=60s
+          kubectl wait --for=jsonpath='{.status.observedWorkloadGeneration}'=2 -n default instrumentationconfig/deployment-coupon --timeout=60s
+          kubectl wait --for=jsonpath='{.status.observedWorkloadGeneration}'=2 -n default instrumentationconfig/deployment-inventory --timeout=60s
+          kubectl wait --for=jsonpath='{.status.observedWorkloadGeneration}'=2 -n default instrumentationconfig/deployment-pricing --timeout=60s
+          kubectl wait --for=jsonpath='{.status.observedWorkloadGeneration}'=2 -n default instrumentationconfig/deployment-membership --timeout=60s
+
+  - name: Assert Post Destination Runtime Details
+    try:
     - assert:
         file: assert-post-dest-runtime-details.yaml
+
   - name: Generate Traffic
     try:
       - script:
diff --git a/tests/e2e/helm-chart/tracesql/resource-attributes.yaml b/tests/e2e/helm-chart/tracesql/resource-attributes.yaml
index 934439b7e..f6b56aef5 100644
--- a/tests/e2e/helm-chart/tracesql/resource-attributes.yaml
+++ b/tests/e2e/helm-chart/tracesql/resource-attributes.yaml
@@ -6,9 +6,9 @@ description: |
   B. Kubernetes attributes are correctly set on all spans
   At the time of writing this test, TraceQL api does not support not equal to nil so we use regex instead.
 query: |
-    { resource.odigos.version != "e2e-test" ||
+    { resource.odigos.version !~ ".*" ||
       resource.k8s.deployment.name !~ ".*" ||
-      resource.k8s.node.name !~ "kind-control-plane" ||
+      resource.k8s.node.name !~ "(kind-control-plane|aks-.*)" ||
       resource.k8s.pod.name !~ ".*" }
 expected:
   count: 0
\ No newline at end of file
diff --git a/tests/e2e/multi-apps/assert-instrumented-and-pipeline.yaml b/tests/e2e/multi-apps/assert-instrumented-and-pipeline.yaml
index 29e00f88c..61fcce346 100644
--- a/tests/e2e/multi-apps/assert-instrumented-and-pipeline.yaml
+++ b/tests/e2e/multi-apps/assert-instrumented-and-pipeline.yaml
@@ -306,9 +306,15 @@ status:
     - key: process.runtime.version
       (value != null): true
     - key: telemetry.distro.version
-      value: e2e-test
+      (value != null): true
     - key: process.pid
       (value != null): true
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true      
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
@@ -325,6 +331,12 @@ status:
       (value != null): true
     - key: telemetry.sdk.language
       value: python
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true        
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
diff --git a/tests/e2e/multi-apps/chainsaw-test.yaml b/tests/e2e/multi-apps/chainsaw-test.yaml
index 8dfeb4d47..3b04edafd 100644
--- a/tests/e2e/multi-apps/chainsaw-test.yaml
+++ b/tests/e2e/multi-apps/chainsaw-test.yaml
@@ -27,43 +27,74 @@ spec:
   - name: Install Odigos
     try:
     - script:
-        content: ../../../cli/odigos install --version e2e-test
+        content: |
+          if [ "$MODE" = "cross-cloud-tests" ]; then
+            ../../../cli/odigos install --version "$COMMIT_HASH" --image-prefix=public.ecr.aws/y2v0v6s7
+          else
+            ../../../cli/odigos install --version e2e-test
+          fi
         timeout: 60s
     - assert:
         file: assert-odigos-installed.yaml
+
   - name: Install Demo App
     try:
     - script:
-        timeout: 100s
+        timeout: 200s
         content: |
-          docker pull keyval/odigos-demo-inventory:v0.1
-          docker pull keyval/odigos-demo-membership:v0.1
-          docker pull keyval/odigos-demo-coupon:v0.1
-          docker pull keyval/odigos-demo-inventory:v0.1
-          docker pull keyval/odigos-demo-frontend:v0.2
-          kind load docker-image keyval/odigos-demo-inventory:v0.1
-          kind load docker-image keyval/odigos-demo-membership:v0.1
-          kind load docker-image keyval/odigos-demo-coupon:v0.1
-          kind load docker-image keyval/odigos-demo-inventory:v0.1
-          kind load docker-image keyval/odigos-demo-frontend:v0.2
+          if [ "$MODE" != "cross-cloud-tests" ]; then
+            docker pull keyval/odigos-demo-inventory:v0.1
+            docker pull keyval/odigos-demo-membership:v0.1
+            docker pull keyval/odigos-demo-coupon:v0.1
+            docker pull keyval/odigos-demo-inventory:v0.1
+            docker pull keyval/odigos-demo-frontend:v0.2
+            kind load docker-image keyval/odigos-demo-inventory:v0.1
+            kind load docker-image keyval/odigos-demo-membership:v0.1
+            kind load docker-image keyval/odigos-demo-coupon:v0.1
+            kind load docker-image keyval/odigos-demo-inventory:v0.1
+            kind load docker-image keyval/odigos-demo-frontend:v0.2
+          else
+            echo "Skipping docker pull and kind load for cross-cloud-tests mode"
+          fi
     - apply:
         file: 02-install-simple-demo.yaml
+    - script:
+        timeout: 70s
+        content: |
+          kubectl wait --for=condition=ready pod -l app=frontend --timeout=60s
+          kubectl wait --for=condition=ready pod -l app=coupon --timeout=60s
+          kubectl wait --for=condition=ready pod -l app=inventory --timeout=60s
+          kubectl wait --for=condition=ready pod -l app=pricing --timeout=60s
+          kubectl wait --for=condition=ready pod -l app=membership --timeout=60s        
     - assert:
         file: assert-apps-installed.yaml
-  - name: Detect Languages
+  
+  - name: Instrument Namespace
     try:
     - apply:
         file: 03-instrument-ns.yaml
+
+  - name: Assert Runtime Detected
+    try:
     - assert:
+        timeout: 2m
         file: assert-runtime-detected.yaml
+
   - name: Add Destination
     try:
     - apply:
         file: 04-add-destination.yaml
+
+  - name: Assert Instrumented and Pipeline
+    try:
     - assert:
         file: assert-instrumented-and-pipeline.yaml
+
+  - name: Assert Post Destination Runtime Details
+    try:        
     - assert:
         file: assert-post-dest-runtime-details.yaml
+
   - name: Generate Traffic
     try:
     - script:
diff --git a/tests/e2e/multi-apps/tracesql/resource-attributes.yaml b/tests/e2e/multi-apps/tracesql/resource-attributes.yaml
index 934439b7e..f6b56aef5 100644
--- a/tests/e2e/multi-apps/tracesql/resource-attributes.yaml
+++ b/tests/e2e/multi-apps/tracesql/resource-attributes.yaml
@@ -6,9 +6,9 @@ description: |
   B. Kubernetes attributes are correctly set on all spans
   At the time of writing this test, TraceQL api does not support not equal to nil so we use regex instead.
 query: |
-    { resource.odigos.version != "e2e-test" ||
+    { resource.odigos.version !~ ".*" ||
       resource.k8s.deployment.name !~ ".*" ||
-      resource.k8s.node.name !~ "kind-control-plane" ||
+      resource.k8s.node.name !~ "(kind-control-plane|aks-.*)" ||
       resource.k8s.pod.name !~ ".*" }
 expected:
   count: 0
\ No newline at end of file
diff --git a/tests/e2e/workload-lifecycle/01-assert-instrumented.yaml b/tests/e2e/workload-lifecycle/01-assert-instrumented.yaml
index 527003a5f..33714094c 100644
--- a/tests/e2e/workload-lifecycle/01-assert-instrumented.yaml
+++ b/tests/e2e/workload-lifecycle/01-assert-instrumented.yaml
@@ -59,6 +59,12 @@ status:
       value: e2e-test
     - key: process.pid
       (value != null): true
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true      
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentedApplication
@@ -92,6 +98,12 @@ status:
       value: e2e-test
     - key: process.pid
       (value != null): true
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true      
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentedApplication
@@ -125,6 +137,12 @@ status:
       value: e2e-test
     - key: process.pid
       (value != null): true
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true      
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentedApplication
@@ -158,6 +176,12 @@ status:
       value: e2e-test
     - key: process.pid
       (value != null): true
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true      
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentedApplication
@@ -346,6 +370,12 @@ status:
       (value != null): true
     - key: telemetry.sdk.language
       value: python      
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true         
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
@@ -361,7 +391,13 @@ status:
     - key: process.pid
       (value != null): true
     - key: telemetry.sdk.language
-      value: python      
+      value: python
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true          
 ---
 apiVersion: odigos.io/v1alpha1
 kind: InstrumentationInstance
@@ -377,4 +413,10 @@ status:
     - key: process.pid
       (value != null): true
     - key: telemetry.sdk.language
-      value: python      
\ No newline at end of file
+      value: python
+    - key: k8s.namespace.name
+      (value != null): true
+    - key: k8s.container.name
+      (value != null): true
+    - key: k8s.pod.name
+      (value != null): true          
\ No newline at end of file
diff --git a/tests/e2e/workload-lifecycle/services/java-http-server/java-azul.Dockerfile b/tests/e2e/workload-lifecycle/services/java-http-server/java-azul.Dockerfile
index b8fbaa4fd..ad70de0aa 100644
--- a/tests/e2e/workload-lifecycle/services/java-http-server/java-azul.Dockerfile
+++ b/tests/e2e/workload-lifecycle/services/java-http-server/java-azul.Dockerfile
@@ -3,7 +3,7 @@ COPY src /home/app/src
 COPY pom.xml /home/app
 RUN mvn -f /home/app/pom.xml clean package
 
-FROM azul/zulu-openjdk-alpine:17-jre
+FROM azul/zulu-openjdk-alpine:17.0.12-jre-headless
 COPY --from=build /home/app/target/*.jar /app/java-azul.jar
 USER 15000
 CMD ["java", "-XX:+UnlockExperimentalVMOptions", "-XX:+UseZGC", "-jar", "/app/java-azul.jar"]
diff --git a/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-docker-env.Dockerfile b/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-docker-env.Dockerfile
index 2853ca826..588d9c743 100644
--- a/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-docker-env.Dockerfile
+++ b/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-docker-env.Dockerfile
@@ -3,7 +3,7 @@ COPY src /home/app/src
 COPY pom.xml /home/app
 RUN mvn -f /home/app/pom.xml clean package
 
-FROM eclipse-temurin:17-jre-jammy
+FROM eclipse-temurin:17.0.12_7-jre-jammy
 ENV JAVA_OPTS="-Dthis.does.not.exist=true"
 COPY --from=build /home/app/target/*.jar /app/java-supported-docker-env.jar
 USER 15000
diff --git a/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-manifest-env.Dockerfile b/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-manifest-env.Dockerfile
index 16857797e..2f304d841 100644
--- a/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-manifest-env.Dockerfile
+++ b/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-manifest-env.Dockerfile
@@ -3,7 +3,7 @@ COPY src /home/app/src
 COPY pom.xml /home/app
 RUN mvn -f /home/app/pom.xml clean package
 
-FROM eclipse-temurin:17-jre-jammy
+FROM eclipse-temurin:17.0.12_7-jre-jammy
 COPY --from=build /home/app/target/*.jar /app/java-supported-manifest-env.jar
 USER 15000
 CMD ["java","-jar", "/app/java-supported-manifest-env.jar"]
\ No newline at end of file
diff --git a/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-version.Dockerfile b/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-version.Dockerfile
index 6acc08f29..0b6a32756 100644
--- a/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-version.Dockerfile
+++ b/tests/e2e/workload-lifecycle/services/java-http-server/java-supported-version.Dockerfile
@@ -3,7 +3,7 @@ COPY src /home/app/src
 COPY pom.xml /home/app
 RUN mvn -f /home/app/pom.xml clean package
 
-FROM eclipse-temurin:17-jre-jammy
+FROM eclipse-temurin:17.0.12_7-jre-jammy
 COPY --from=build /home/app/target/*.jar /app/java-supported-version.jar
 USER 15000
 CMD ["java","-jar", "/app/java-supported-version.jar"]
\ No newline at end of file

From ec4f8c0fbc0c5716d16e39bf0cbbdccbc32f567c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 16:49:06 +0300
Subject: [PATCH 351/374] chore: update yarn lock

---
 frontend/webapp/yarn.lock | 2350 ++++++++++++++++---------------------
 1 file changed, 1038 insertions(+), 1312 deletions(-)

diff --git a/frontend/webapp/yarn.lock b/frontend/webapp/yarn.lock
index 1c3fbe5db..4e81e0a6e 100644
--- a/frontend/webapp/yarn.lock
+++ b/frontend/webapp/yarn.lock
@@ -10,17 +10,17 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@apollo/client-react-streaming@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@apollo/client-react-streaming/-/client-react-streaming-0.11.3.tgz#ca14d15241b60e9e5e86f075d14e7cf72e1485ba"
-  integrity sha512-bAyyD7iZQ8UIvYZv2ZY3i5FTNdCgM0kfWW/0St3sqJLAs4Ji6QB9uzGUTc5434vQo6Ddb17N+Q+Ikr7fj2yTxw==
+"@apollo/client-react-streaming@0.11.5":
+  version "0.11.5"
+  resolved "https://registry.yarnpkg.com/@apollo/client-react-streaming/-/client-react-streaming-0.11.5.tgz#fb80f96b1abc31aa86f8e4b967560dce16b8d2ee"
+  integrity sha512-HK794oSbEdKa0e13E6rRTJY29da9FZnHAb/YZa7r+0/9EMbbEWe8Ll6BsBh1xN2RAR6BHJhZbo0c8yRMLnrGVQ==
   dependencies:
     ts-invariant "^0.10.3"
 
 "@apollo/client@^3.11.0-rc.2":
-  version "3.11.0-rc.2"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.11.0-rc.2.tgz#69cbdf263330edf313f02f782ab30a3b8420c5d1"
-  integrity sha512-k5mj92/WKwMpnrViL3+EYGQwQ7grlo3xho9ZLIU/Y7+7KLGHpXVtb4lrqoZHA1+SqXFciZOu4sUx5ysAuv325g==
+  version "3.11.9"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.11.9.tgz#d7f998a6e8496667f157823d50a746c4e5a20b46"
+  integrity sha512-aQ6VL+CPO1G4DLS/3FelfA+nl+ZQCP5qeN1NS6J8xh9wumUM/2W1ccneqCYmbTMDtoSunxE1BV2W6u0FF4axwQ==
   dependencies:
     "@graphql-typed-document-node/core" "^3.1.1"
     "@wry/caches" "^1.0.0"
@@ -38,16 +38,16 @@
     zen-observable-ts "^1.2.5"
 
 "@apollo/experimental-nextjs-app-support@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.11.3.tgz#a0910e4d6376d6ac8293e4718e17d8df96b69de8"
-  integrity sha512-eMfbEtHyQE9EceBn0sTBWcHVvjhd+dkMO5dBhoEglEm0ga2n87KKiTeaNNb/XZnvOX81/6y0iyc0U7cgITpvKw==
+  version "0.11.5"
+  resolved "https://registry.yarnpkg.com/@apollo/experimental-nextjs-app-support/-/experimental-nextjs-app-support-0.11.5.tgz#e988d48724fcff50c90eed98134067ca42eeb430"
+  integrity sha512-ifPDAQ/o+yko5UMhcH02yzR5WRkI0xocPMNMfKGjEDy7yNdrnd5o//m3B2oaiUMPOSOnqvlBO94CleeiFB5SoQ==
   dependencies:
-    "@apollo/client-react-streaming" "0.11.3"
+    "@apollo/client-react-streaming" "0.11.5"
 
 "@babel/cli@^7.21.0":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.24.8.tgz#79eaa55a69c77cafbea3e87537fd1df5a5a2edf8"
-  integrity sha512-isdp+G6DpRyKc+3Gqxy2rjzgF7Zj9K0mzLNnxz+E/fgeag8qT3vVulX4gY9dGO1q0y+0lUv6V3a+uhUzMzrwXg==
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.25.9.tgz#51036166fd0e9cfb26eee1b9ddc264a0d6d5f843"
+  integrity sha512-I+02IfrTiSanpxJBlZQYb18qCxB6c2Ih371cVpfgIrPQrjAYkf45XxomTJOG8JBWX5GY35/+TmhCMdJ4ZPkL8Q==
   dependencies:
     "@jridgewell/trace-mapping" "^0.3.25"
     commander "^6.2.0"
@@ -58,98 +58,100 @@
     slash "^2.0.0"
   optionalDependencies:
     "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
-    chokidar "^3.4.0"
+    chokidar "^3.6.0"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
-  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
   dependencies:
-    "@babel/highlight" "^7.24.7"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.2.tgz#e41928bd33475305c586f6acbbb7e3ade7a6f7f5"
-  integrity sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==
+"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.9", "@babel/compat-data@^7.26.0":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.2.tgz#278b6b13664557de95b8f35b90d96785850bb56e"
+  integrity sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==
 
 "@babel/core@^7.19.6", "@babel/core@^7.21.0", "@babel/core@^7.21.3":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.2.tgz#ed8eec275118d7613e77a352894cd12ded8eba77"
-  integrity sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
+  integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.24.7"
-    "@babel/generator" "^7.25.0"
-    "@babel/helper-compilation-targets" "^7.25.2"
-    "@babel/helper-module-transforms" "^7.25.2"
-    "@babel/helpers" "^7.25.0"
-    "@babel/parser" "^7.25.0"
-    "@babel/template" "^7.25.0"
-    "@babel/traverse" "^7.25.2"
-    "@babel/types" "^7.25.2"
+    "@babel/code-frame" "^7.26.0"
+    "@babel/generator" "^7.26.0"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-module-transforms" "^7.26.0"
+    "@babel/helpers" "^7.26.0"
+    "@babel/parser" "^7.26.0"
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.26.0"
     convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
-  integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
+"@babel/generator@^7.25.9", "@babel/generator@^7.26.0":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.2.tgz#87b75813bec87916210e5e01939a4c823d6bb74f"
+  integrity sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==
   dependencies:
-    "@babel/types" "^7.25.0"
+    "@babel/parser" "^7.26.2"
+    "@babel/types" "^7.26.0"
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.25"
-    jsesc "^2.5.1"
+    jsesc "^3.0.2"
 
-"@babel/helper-annotate-as-pure@^7.22.5", "@babel/helper-annotate-as-pure@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab"
-  integrity sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==
+"@babel/helper-annotate-as-pure@^7.22.5", "@babel/helper-annotate-as-pure@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
   dependencies:
-    "@babel/types" "^7.24.7"
+    "@babel/types" "^7.25.9"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.24.7.tgz#37d66feb012024f2422b762b9b2a7cfe27c7fba3"
-  integrity sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.9.tgz#f41752fe772a578e67286e6779a68a5a92de1ee9"
+  integrity sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g==
   dependencies:
-    "@babel/traverse" "^7.24.7"
-    "@babel/types" "^7.24.7"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
 
-"@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.24.7", "@babel/helper-compilation-targets@^7.24.8", "@babel/helper-compilation-targets@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz#e1d9410a90974a3a5a66e84ff55ef62e3c02d06c"
-  integrity sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==
+"@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875"
+  integrity sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==
   dependencies:
-    "@babel/compat-data" "^7.25.2"
-    "@babel/helper-validator-option" "^7.24.8"
-    browserslist "^4.23.1"
+    "@babel/compat-data" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    browserslist "^4.24.0"
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.24.7", "@babel/helper-create-class-features-plugin@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz#a109bf9c3d58dfed83aaf42e85633c89f43a6253"
-  integrity sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-member-expression-to-functions" "^7.24.8"
-    "@babel/helper-optimise-call-expression" "^7.24.7"
-    "@babel/helper-replace-supers" "^7.25.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
-    "@babel/traverse" "^7.25.0"
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83"
+  integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
     semver "^6.3.1"
 
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.24.7", "@babel/helper-create-regexp-features-plugin@^7.25.0":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.2.tgz#24c75974ed74183797ffd5f134169316cd1808d9"
-  integrity sha512-+wqVGP+DFmqwFD3EH6TMTfUNeqDehV3E/dl+Sd54eaXqm17tEUNbEIn4sVivVowbvUpOtIGxdo3GoXyDH9N/9g==
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz#3e8999db94728ad2b2458d7a470e7770b7764e26"
+  integrity sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.24.7"
-    regexpu-core "^5.3.1"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    regexpu-core "^6.1.1"
     semver "^6.3.1"
 
 "@babel/helper-define-polyfill-provider@^0.6.2":
@@ -163,172 +165,161 @@
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
 
-"@babel/helper-member-expression-to-functions@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz#6155e079c913357d24a4c20480db7c712a5c3fb6"
-  integrity sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==
-  dependencies:
-    "@babel/traverse" "^7.24.8"
-    "@babel/types" "^7.24.8"
-
-"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.5", "@babel/helper-module-imports@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b"
-  integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
-  dependencies:
-    "@babel/traverse" "^7.24.7"
-    "@babel/types" "^7.24.7"
-
-"@babel/helper-module-transforms@^7.24.7", "@babel/helper-module-transforms@^7.24.8", "@babel/helper-module-transforms@^7.25.0", "@babel/helper-module-transforms@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz#ee713c29768100f2776edf04d4eb23b8d27a66e6"
-  integrity sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.24.7"
-    "@babel/helper-simple-access" "^7.24.7"
-    "@babel/helper-validator-identifier" "^7.24.7"
-    "@babel/traverse" "^7.25.2"
-
-"@babel/helper-optimise-call-expression@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz#8b0a0456c92f6b323d27cfd00d1d664e76692a0f"
-  integrity sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==
-  dependencies:
-    "@babel/types" "^7.24.7"
-
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.24.8", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
-  integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
-
-"@babel/helper-remap-async-to-generator@^7.24.7", "@babel/helper-remap-async-to-generator@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.0.tgz#d2f0fbba059a42d68e5e378feaf181ef6055365e"
-  integrity sha512-NhavI2eWEIz/H9dbrG0TuOicDhNexze43i5z7lEqwYm0WEZVTwnPpA0EafUTP7+6/W79HWIP2cTe3Z5NiSTVpw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-wrap-function" "^7.25.0"
-    "@babel/traverse" "^7.25.0"
-
-"@babel/helper-replace-supers@^7.24.7", "@babel/helper-replace-supers@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz#ff44deac1c9f619523fe2ca1fd650773792000a9"
-  integrity sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.24.8"
-    "@babel/helper-optimise-call-expression" "^7.24.7"
-    "@babel/traverse" "^7.25.0"
-
-"@babel/helper-simple-access@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz#bcade8da3aec8ed16b9c4953b74e506b51b5edb3"
-  integrity sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==
-  dependencies:
-    "@babel/traverse" "^7.24.7"
-    "@babel/types" "^7.24.7"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz#5f8fa83b69ed5c27adc56044f8be2b3ea96669d9"
-  integrity sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==
-  dependencies:
-    "@babel/traverse" "^7.24.7"
-    "@babel/types" "^7.24.7"
-
-"@babel/helper-string-parser@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
-  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
-
-"@babel/helper-validator-identifier@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
-  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
-
-"@babel/helper-validator-option@^7.24.7", "@babel/helper-validator-option@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz#3725cdeea8b480e86d34df15304806a06975e33d"
-  integrity sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==
-
-"@babel/helper-wrap-function@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.0.tgz#dab12f0f593d6ca48c0062c28bcfb14ebe812f81"
-  integrity sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==
-  dependencies:
-    "@babel/template" "^7.25.0"
-    "@babel/traverse" "^7.25.0"
-    "@babel/types" "^7.25.0"
-
-"@babel/helpers@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.0.tgz#e69beb7841cb93a6505531ede34f34e6a073650a"
-  integrity sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==
-  dependencies:
-    "@babel/template" "^7.25.0"
-    "@babel/types" "^7.25.0"
-
-"@babel/highlight@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
-  integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.24.7"
-    chalk "^2.4.2"
-    js-tokens "^4.0.0"
-    picocolors "^1.0.0"
+"@babel/helper-member-expression-to-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+  integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.22.5", "@babel/helper-module-imports@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-module-transforms@^7.25.9", "@babel/helper-module-transforms@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-optimise-call-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+  integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
+  dependencies:
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46"
+  integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==
+
+"@babel/helper-remap-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92"
+  integrity sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-wrap-function" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-replace-supers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz#ba447224798c3da3f8713fc272b145e33da6a5c5"
+  integrity sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.25.9"
+    "@babel/helper-optimise-call-expression" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/helper-simple-access@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz#6d51783299884a2c74618d6ef0f86820ec2e7739"
+  integrity sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+  integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
 
-"@babel/parser@^7.25.0", "@babel/parser@^7.25.3":
-  version "7.25.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
-  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/helper-validator-option@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
+
+"@babel/helper-wrap-function@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0"
+  integrity sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==
   dependencies:
-    "@babel/types" "^7.25.2"
+    "@babel/template" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
 
-"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.3":
-  version "7.25.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.3.tgz#dca427b45a6c0f5c095a1c639dfe2476a3daba7f"
-  integrity sha512-wUrcsxZg6rqBXG05HG1FPYgsP6EvwF4WpBbxIpWIIYnH8wG0gzx3yZY3dtEHas4sTAOGkbTsc9EGPxwff8lRoA==
+"@babel/helpers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
+  integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/traverse" "^7.25.3"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.0"
 
-"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.0.tgz#cd0c583e01369ef51676bdb3d7b603e17d2b3f73"
-  integrity sha512-Bm4bH2qsX880b/3ziJ8KD711LT7z4u8CFudmjqle65AZj/HNUFhEf90dqYv6O86buWvSBmeQDjv0Tn2aF/bIBA==
+"@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
+  integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
+  dependencies:
+    "@babel/types" "^7.26.0"
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe"
+  integrity sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
+
+"@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz#af9e4fb63ccb8abcb92375b2fcfe36b60c774d30"
+  integrity sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.0.tgz#749bde80356b295390954643de7635e0dffabe73"
-  integrity sha512-lXwdNZtTmeVOOFtwM/WDe7yg1PL8sYhRk/XH0FzbR2HDQ0xC+EnQ/JHeoMYSavtU115tnUk0q9CDyq8si+LMAA==
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz#e8dc26fcd616e6c5bf2bd0d5a2c151d4f92a9137"
+  integrity sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.7.tgz#e4eabdd5109acc399b38d7999b2ef66fc2022f89"
-  integrity sha512-+izXIbke1T33mY4MSNnrqhPXDz01WYhEf3yF5NbnUtkiNnm+XBZJl3kNfoK6NKmYlz/D07+l2GWVK/QfDkNCuQ==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz#807a667f9158acac6f6164b4beb85ad9ebc9e1d1"
+  integrity sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
-    "@babel/plugin-transform-optional-chaining" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.0.tgz#3a82a70e7cb7294ad2559465ebcb871dfbf078fb"
-  integrity sha512-tggFrk1AIShG/RUQbEwt2Tr/E+ObkfwrPjR6BjbRvsx24+PSjK8zrq0GWPNCjo8qpRx4DuJzlcvWJqlm+0h3kw==
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz#de7093f1e7deaf68eadd7cc6b07f2ab82543269e"
+  integrity sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/traverse" "^7.25.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
 "@babel/plugin-external-helpers@^7.18.6":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.24.7.tgz#d19d29bbc2ce0c29f9a37e0cc732d4e9a46c5b00"
-  integrity sha512-IgK2yjWkxQhtc+UvSbUA8GfIDCQvs7FxqNtgLkmO5FAKos53sT2sl9bxeO4NxjcnZs27xnYIMyhjdXkNaZP4jA==
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.25.9.tgz#60c43843746fe3bccd7cb52d07c0b8699c21e6d4"
+  integrity sha512-Ro9pBweUvdxKyKKmWsqYaloZrxc2V+bseyPI7mV5DqBNvyNeGFFX+rPqicuEyOssiFYfoGyMjOF8n3ZAGBOPtg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-proposal-class-properties@^7.18.6":
   version "7.18.6"
@@ -354,678 +345,562 @@
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
   integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
 
-"@babel/plugin-syntax-async-generators@^7.8.4":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
-  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-class-properties@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
-  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
-
-"@babel/plugin-syntax-class-static-block@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
-  integrity sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/plugin-syntax-dynamic-import@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
-  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-export-namespace-from@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
-  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-syntax-import-assertions@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.7.tgz#2a0b406b5871a20a841240586b1300ce2088a778"
-  integrity sha512-Ec3NRUMoi8gskrkBe3fNmEQfxDvY8bgfQpz6jlk/41kX9eUjvpyqWU7PBP/pLAvMaSQjbMNKJmvX57jP+M6bPg==
+"@babel/plugin-syntax-import-assertions@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz#620412405058efa56e4a564903b79355020f445f"
+  integrity sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-import-attributes@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.7.tgz#b4f9ea95a79e6912480c4b626739f86a076624ca"
-  integrity sha512-hbX+lKKeUMGihnK8nvKqmXBInriT3GVjzXKFriV3YC6APGxMbP8RZNFwy91+hocLXq90Mta+HshoB31802bb8A==
+"@babel/plugin-syntax-import-attributes@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz#3b1412847699eea739b4f2602c74ce36f6b0b0f7"
+  integrity sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-import-meta@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
-  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+"@babel/plugin-syntax-jsx@^7.22.5", "@babel/plugin-syntax-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
+  integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-json-strings@^7.8.3":
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
   version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
-  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.22.5", "@babel/plugin-syntax-jsx@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz#39a1fa4a7e3d3d7f34e2acc6be585b718d30e02d"
-  integrity sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-
-"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
-  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+"@babel/plugin-syntax-typescript@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz#67dda2b74da43727cf21d46cf9afef23f4365399"
+  integrity sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
-  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-syntax-numeric-separator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
-  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+"@babel/plugin-transform-arrow-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845"
+  integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-object-rest-spread@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
-  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+"@babel/plugin-transform-async-generator-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz#1b18530b077d18a407c494eb3d1d72da505283a2"
+  integrity sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
-  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+"@babel/plugin-transform-async-to-generator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71"
+  integrity sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-remap-async-to-generator" "^7.25.9"
 
-"@babel/plugin-syntax-optional-chaining@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
-  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+"@babel/plugin-transform-block-scoped-functions@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz#5700691dbd7abb93de300ca7be94203764fce458"
+  integrity sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-private-property-in-object@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz#0dc6671ec0ea22b6e94a1114f857970cd39de1ad"
-  integrity sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==
+"@babel/plugin-transform-block-scoping@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1"
+  integrity sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-top-level-await@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
-  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+"@babel/plugin-transform-class-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f"
+  integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-typescript@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.7.tgz#58d458271b4d3b6bb27ee6ac9525acbb259bad1c"
-  integrity sha512-c/+fVeJBB0FeKsFvwytYiUD+LBvhHjGSI0g446PRGdSVGZLRNArBUno2PETbAly3tpiNAQR5XaZ+JslxkotsbA==
+"@babel/plugin-transform-class-static-block@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz#6c8da219f4eb15cae9834ec4348ff8e9e09664a0"
+  integrity sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
-  integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
+"@babel/plugin-transform-classes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52"
+  integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-transform-arrow-functions@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz#4f6886c11e423bd69f3ce51dbf42424a5f275514"
-  integrity sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-
-"@babel/plugin-transform-async-generator-functions@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.0.tgz#b785cf35d73437f6276b1e30439a57a50747bddf"
-  integrity sha512-uaIi2FdqzjpAMvVqvB51S42oC2JEVgh0LDsGfZVDysWE8LrJtQC2jvKmOqEYThKyB7bDEb7BP1GYWDm7tABA0Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/helper-remap-async-to-generator" "^7.25.0"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/traverse" "^7.25.0"
-
-"@babel/plugin-transform-async-to-generator@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.7.tgz#72a3af6c451d575842a7e9b5a02863414355bdcc"
-  integrity sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/helper-remap-async-to-generator" "^7.24.7"
-
-"@babel/plugin-transform-block-scoped-functions@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.7.tgz#a4251d98ea0c0f399dafe1a35801eaba455bbf1f"
-  integrity sha512-yO7RAz6EsVQDaBH18IDJcMB1HnrUn2FJ/Jslc/WtPPWcjhpUJXU/rjbwmluzp7v/ZzWcEhTMXELnnsz8djWDwQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-
-"@babel/plugin-transform-block-scoping@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.0.tgz#23a6ed92e6b006d26b1869b1c91d1b917c2ea2ac"
-  integrity sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
-
-"@babel/plugin-transform-class-properties@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.7.tgz#256879467b57b0b68c7ddfc5b76584f398cd6834"
-  integrity sha512-vKbfawVYayKcSeSR5YYzzyXvsDFWU2mD8U5TFeXtbCPLFUqe7GyCgvO6XDHzje862ODrOwy6WCPmKeWHbCFJ4w==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
-
-"@babel/plugin-transform-class-static-block@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.7.tgz#c82027ebb7010bc33c116d4b5044fbbf8c05484d"
-  integrity sha512-HMXK3WbBPpZQufbMG4B46A90PkuuhN9vBCb5T8+VAHqvAqvcLi+2cKoukcpmUYkszLhScU3l1iudhrks3DggRQ==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-
-"@babel/plugin-transform-classes@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.0.tgz#63122366527d88e0ef61b612554fe3f8c793991e"
-  integrity sha512-xyi6qjr/fYU304fiRwFbekzkqVJZ6A7hOjWZd+89FVcBqPV3S9Wuozz82xdpLspckeaafntbzglaW4pqpzvtSw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-compilation-targets" "^7.24.8"
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/helper-replace-supers" "^7.25.0"
-    "@babel/traverse" "^7.25.0"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.7.tgz#4cab3214e80bc71fae3853238d13d097b004c707"
-  integrity sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ==
+"@babel/plugin-transform-computed-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b"
+  integrity sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/template" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/template" "^7.25.9"
 
-"@babel/plugin-transform-destructuring@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.8.tgz#c828e814dbe42a2718a838c2a2e16a408e055550"
-  integrity sha512-36e87mfY8TnRxc7yc6M9g9gOB7rKgSahqkIKwLpz4Ppk2+zC2Cy1is0uwtuSG6AE4zlTOUa+7JGz9jCJGLqQFQ==
+"@babel/plugin-transform-destructuring@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1"
+  integrity sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-dotall-regex@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.7.tgz#5f8bf8a680f2116a7207e16288a5f974ad47a7a0"
-  integrity sha512-ZOA3W+1RRTSWvyqcMJDLqbchh7U4NRGqwRfFSVbOLS/ePIP4vHB5e8T8eXcuqyN1QkgKyj5wuW0lcS85v4CrSw==
+"@babel/plugin-transform-dotall-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz#bad7945dd07734ca52fe3ad4e872b40ed09bb09a"
+  integrity sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-duplicate-keys@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.7.tgz#dd20102897c9a2324e5adfffb67ff3610359a8ee"
-  integrity sha512-JdYfXyCRihAe46jUIliuL2/s0x0wObgwwiGxw/UbgJBr20gQBThrokO4nYKgWkD7uBaqM7+9x5TU7NkExZJyzw==
+"@babel/plugin-transform-duplicate-keys@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz#8850ddf57dce2aebb4394bb434a7598031059e6d"
+  integrity sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.0.tgz#809af7e3339466b49c034c683964ee8afb3e2604"
-  integrity sha512-YLpb4LlYSc3sCUa35un84poXoraOiQucUTTu8X1j18JV+gNa8E0nyUf/CjZ171IRGr4jEguF+vzJU66QZhn29g==
+"@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz#6f7259b4de127721a08f1e5165b852fcaa696d31"
+  integrity sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.25.0"
-    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-dynamic-import@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.7.tgz#4d8b95e3bae2b037673091aa09cd33fecd6419f4"
-  integrity sha512-sc3X26PhZQDb3JhORmakcbvkeInvxz+A8oda99lj7J60QRuPZvNAk9wQlTBS1ZynelDrDmTU4pw1tyc5d5ZMUg==
+"@babel/plugin-transform-dynamic-import@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz#23e917de63ed23c6600c5dd06d94669dce79f7b8"
+  integrity sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-exponentiation-operator@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.7.tgz#b629ee22645f412024297d5245bce425c31f9b0d"
-  integrity sha512-Rqe/vSc9OYgDajNIK35u7ot+KeCoetqQYFXM4Epf7M7ez3lWlOjrDjrwMei6caCVhfdw+mIKD4cgdGNy5JQotQ==
+"@babel/plugin-transform-exponentiation-operator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.9.tgz#ece47b70d236c1d99c263a1e22b62dc20a4c8b0f"
+  integrity sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-export-namespace-from@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.7.tgz#176d52d8d8ed516aeae7013ee9556d540c53f197"
-  integrity sha512-v0K9uNYsPL3oXZ/7F9NNIbAj2jv1whUEtyA6aujhekLs56R++JDQuzRcP2/z4WX5Vg/c5lE9uWZA0/iUoFhLTA==
+"@babel/plugin-transform-export-namespace-from@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz#90745fe55053394f554e40584cda81f2c8a402a2"
+  integrity sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-for-of@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.7.tgz#f25b33f72df1d8be76399e1b8f3f9d366eb5bc70"
-  integrity sha512-wo9ogrDG1ITTTBsy46oGiN1dS9A7MROBTcYsfS8DtsImMkHk9JXJ3EWQM6X2SUw4x80uGPlwj0o00Uoc6nEE3g==
+"@babel/plugin-transform-for-of@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz#4bdc7d42a213397905d89f02350c5267866d5755"
+  integrity sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
 
-"@babel/plugin-transform-function-name@^7.25.1":
-  version "7.25.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.1.tgz#b85e773097526c1a4fc4ba27322748643f26fc37"
-  integrity sha512-TVVJVdW9RKMNgJJlLtHsKDTydjZAbwIsn6ySBPQaEAUU5+gVvlJt/9nRmqVbsV/IBanRjzWoaAQKLoamWVOUuA==
+"@babel/plugin-transform-function-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97"
+  integrity sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.24.8"
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/traverse" "^7.25.1"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/plugin-transform-json-strings@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.7.tgz#f3e9c37c0a373fee86e36880d45b3664cedaf73a"
-  integrity sha512-2yFnBGDvRuxAaE/f0vfBKvtnvvqU8tGpMHqMNpTN2oWMKIR3NqFkjaAgGwawhqK/pIN2T3XdjGPdaG0vDhOBGw==
+"@babel/plugin-transform-json-strings@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz#c86db407cb827cded902a90c707d2781aaa89660"
+  integrity sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-literals@^7.25.2":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.2.tgz#deb1ad14fc5490b9a65ed830e025bca849d8b5f3"
-  integrity sha512-HQI+HcTbm9ur3Z2DkO+jgESMAMcYLuN/A7NRw9juzxAezN9AvqvUTnpKP/9kkYANz6u7dFlAyOu44ejuGySlfw==
+"@babel/plugin-transform-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de"
+  integrity sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-logical-assignment-operators@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.7.tgz#a58fb6eda16c9dc8f9ff1c7b1ba6deb7f4694cb0"
-  integrity sha512-4D2tpwlQ1odXmTEIFWy9ELJcZHqrStlzK/dAOWYyxX3zT0iXQB6banjgeOJQXzEc4S0E0a5A+hahxPaEFYftsw==
+"@babel/plugin-transform-logical-assignment-operators@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz#b19441a8c39a2fda0902900b306ea05ae1055db7"
+  integrity sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-member-expression-literals@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.7.tgz#3b4454fb0e302e18ba4945ba3246acb1248315df"
-  integrity sha512-T/hRC1uqrzXMKLQ6UCwMT85S3EvqaBXDGf0FaMf4446Qx9vKwlghvee0+uuZcDUCZU5RuNi4781UQ7R308zzBw==
+"@babel/plugin-transform-member-expression-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz#63dff19763ea64a31f5e6c20957e6a25e41ed5de"
+  integrity sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-modules-amd@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.7.tgz#65090ed493c4a834976a3ca1cde776e6ccff32d7"
-  integrity sha512-9+pB1qxV3vs/8Hdmz/CulFB8w2tuu6EB94JZFsjdqxQokwGa9Unap7Bo2gGBGIvPmDIVvQrom7r5m/TCDMURhg==
+"@babel/plugin-transform-modules-amd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz#49ba478f2295101544abd794486cd3088dddb6c5"
+  integrity sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-modules-commonjs@^7.24.7", "@babel/plugin-transform-modules-commonjs@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.8.tgz#ab6421e564b717cb475d6fff70ae7f103536ea3c"
-  integrity sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==
+"@babel/plugin-transform-modules-commonjs@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz#d165c8c569a080baf5467bda88df6425fc060686"
+  integrity sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==
   dependencies:
-    "@babel/helper-module-transforms" "^7.24.8"
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/helper-simple-access" "^7.24.7"
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-simple-access" "^7.25.9"
 
-"@babel/plugin-transform-modules-systemjs@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.0.tgz#8f46cdc5f9e5af74f3bd019485a6cbe59685ea33"
-  integrity sha512-YPJfjQPDXxyQWg/0+jHKj1llnY5f/R6a0p/vP4lPymxLu7Lvl4k2WMitqi08yxwQcCVUUdG9LCUj4TNEgAp3Jw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.25.0"
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/helper-validator-identifier" "^7.24.7"
-    "@babel/traverse" "^7.25.0"
+"@babel/plugin-transform-modules-systemjs@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz#8bd1b43836269e3d33307151a114bcf3ba6793f8"
+  integrity sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+    "@babel/traverse" "^7.25.9"
 
-"@babel/plugin-transform-modules-umd@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.7.tgz#edd9f43ec549099620df7df24e7ba13b5c76efc8"
-  integrity sha512-3aytQvqJ/h9z4g8AsKPLvD4Zqi2qT+L3j7XoFFu1XBlZWEl2/1kWnhmAbxpLgPrHSY0M6UA02jyTiwUVtiKR6A==
+"@babel/plugin-transform-modules-umd@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz#6710079cdd7c694db36529a1e8411e49fcbf14c9"
+  integrity sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-module-transforms" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.24.7.tgz#9042e9b856bc6b3688c0c2e4060e9e10b1460923"
-  integrity sha512-/jr7h/EWeJtk1U/uz2jlsCioHkZk1JJZVcc8oQsJ1dUlaJD83f4/6Zeh2aHt9BIFokHIsSeDfhUmju0+1GPd6g==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a"
+  integrity sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-new-target@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.7.tgz#31ff54c4e0555cc549d5816e4ab39241dfb6ab00"
-  integrity sha512-RNKwfRIXg4Ls/8mMTza5oPF5RkOW8Wy/WgMAp1/F1yZ8mMbtwXW+HDoJiOsagWrAhI5f57Vncrmr9XeT4CVapA==
+"@babel/plugin-transform-new-target@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz#42e61711294b105c248336dcb04b77054ea8becd"
+  integrity sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz#1de4534c590af9596f53d67f52a92f12db984120"
-  integrity sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.9.tgz#bcb1b0d9e948168102d5f7104375ca21c3266949"
+  integrity sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-numeric-separator@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.7.tgz#bea62b538c80605d8a0fac9b40f48e97efa7de63"
-  integrity sha512-e6q1TiVUzvH9KRvicuxdBTUj4AdKSRwzIyFFnfnezpCfP2/7Qmbb8qbU2j7GODbl4JMkblitCQjKYUaX/qkkwA==
+"@babel/plugin-transform-numeric-separator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz#bfed75866261a8b643468b0ccfd275f2033214a1"
+  integrity sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-object-rest-spread@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.7.tgz#d13a2b93435aeb8a197e115221cab266ba6e55d6"
-  integrity sha512-4QrHAr0aXQCEFni2q4DqKLD31n2DL+RxcwnNjDFkSG0eNQ/xCavnRkfCUjsyqGC2OviNJvZOF/mQqZBw7i2C5Q==
+"@babel/plugin-transform-object-rest-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz#0203725025074164808bcf1a2cfa90c652c99f18"
+  integrity sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.24.7"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
 
-"@babel/plugin-transform-object-super@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.7.tgz#66eeaff7830bba945dd8989b632a40c04ed625be"
-  integrity sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg==
+"@babel/plugin-transform-object-super@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz#385d5de135162933beb4a3d227a2b7e52bb4cf03"
+  integrity sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/helper-replace-supers" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-replace-supers" "^7.25.9"
 
-"@babel/plugin-transform-optional-catch-binding@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.7.tgz#00eabd883d0dd6a60c1c557548785919b6e717b4"
-  integrity sha512-uLEndKqP5BfBbC/5jTwPxLh9kqPWWgzN/f8w6UwAIirAEqiIVJWWY312X72Eub09g5KF9+Zn7+hT7sDxmhRuKA==
+"@babel/plugin-transform-optional-catch-binding@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz#10e70d96d52bb1f10c5caaac59ac545ea2ba7ff3"
+  integrity sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-optional-chaining@^7.24.7", "@babel/plugin-transform-optional-chaining@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.8.tgz#bb02a67b60ff0406085c13d104c99a835cdf365d"
-  integrity sha512-5cTOLSMs9eypEy8JUVvIKOu6NgvbJMnpG62VpIHrTmROdQ+L5mDAaI40g25k5vXti55JWNX5jCkq3HZxXBQANw==
+"@babel/plugin-transform-optional-chaining@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz#e142eb899d26ef715435f201ab6e139541eee7dd"
+  integrity sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
 
-"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.7.tgz#5881f0ae21018400e320fc7eb817e529d1254b68"
-  integrity sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==
+"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz#b856842205b3e77e18b7a7a1b94958069c7ba257"
+  integrity sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-private-methods@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.7.tgz#e6318746b2ae70a59d023d5cc1344a2ba7a75f5e"
-  integrity sha512-COTCOkG2hn4JKGEKBADkA8WNb35TGkkRbI5iT845dB+NyqgO8Hn+ajPbSnIQznneJTa3d30scb6iz/DhH8GsJQ==
+"@babel/plugin-transform-private-methods@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57"
+  integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-private-property-in-object@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.7.tgz#4eec6bc701288c1fab5f72e6a4bbc9d67faca061"
-  integrity sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA==
+"@babel/plugin-transform-private-property-in-object@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33"
+  integrity sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-create-class-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-property-literals@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.7.tgz#f0d2ed8380dfbed949c42d4d790266525d63bbdc"
-  integrity sha512-EMi4MLQSHfd2nrCqQEWxFdha2gBCqU4ZcCng4WBGZ5CJL4bBRW0ptdqqDdeirGZcpALazVVNJqRmsO8/+oNCBA==
+"@babel/plugin-transform-property-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz#d72d588bd88b0dec8b62e36f6fda91cedfe28e3f"
+  integrity sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-react-constant-elements@^7.18.12", "@babel/plugin-transform-react-constant-elements@^7.21.3":
-  version "7.25.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.1.tgz#71a665ed16ce618067d05f4a98130207349d82ae"
-  integrity sha512-SLV/giH/V4SmloZ6Dt40HjTGTAIkxn33TVIHxNGNvo8ezMhrxBkzisj4op1KZYPIOHFLqhv60OHvX+YRu4xbmQ==
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.9.tgz#08a1de35a301929b60fdf2788a54b46cd8ecd0ef"
+  integrity sha512-Ncw2JFsJVuvfRsa2lSHiC55kETQVLSnsYGQ1JDDwkUeWGTL/8Tom8aLTnlqgoeuopWrbbGndrc9AlLYrIosrow==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-react-display-name@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.7.tgz#9caff79836803bc666bcfe210aeb6626230c293b"
-  integrity sha512-H/Snz9PFxKsS1JLI4dJLtnJgCJRoo0AUm3chP6NYr+9En1JMKloheEiLIhlp5MDVznWo+H3AAC1Mc8lmUEpsgg==
+"@babel/plugin-transform-react-display-name@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz#4b79746b59efa1f38c8695065a92a9f5afb24f7d"
+  integrity sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-react-jsx-development@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.24.7.tgz#eaee12f15a93f6496d852509a850085e6361470b"
-  integrity sha512-QG9EnzoGn+Qar7rxuW+ZOsbWOt56FvvI93xInqsZDC5fsekx1AlIO4KIJ5M+D0p0SqSH156EpmZyXq630B8OlQ==
+"@babel/plugin-transform-react-jsx-development@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.25.9.tgz#8fd220a77dd139c07e25225a903b8be8c829e0d7"
+  integrity sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==
   dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.24.7"
+    "@babel/plugin-transform-react-jsx" "^7.25.9"
 
-"@babel/plugin-transform-react-jsx@^7.24.7":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.2.tgz#e37e8ebfa77e9f0b16ba07fadcb6adb47412227a"
-  integrity sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==
+"@babel/plugin-transform-react-jsx@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz#06367940d8325b36edff5e2b9cbe782947ca4166"
+  integrity sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-module-imports" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/plugin-syntax-jsx" "^7.24.7"
-    "@babel/types" "^7.25.2"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-module-imports" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/types" "^7.25.9"
 
-"@babel/plugin-transform-react-pure-annotations@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.24.7.tgz#bdd9d140d1c318b4f28b29a00fb94f97ecab1595"
-  integrity sha512-PLgBVk3fzbmEjBJ/u8kFzOqS9tUeDjiaWud/rRym/yjCo/M9cASPlnrd2ZmmZpQT40fOOrvR8jh+n8jikrOhNA==
+"@babel/plugin-transform-react-pure-annotations@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.25.9.tgz#ea1c11b2f9dbb8e2d97025f43a3b5bc47e18ae62"
+  integrity sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-regenerator@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz#021562de4534d8b4b1851759fd7af4e05d2c47f8"
-  integrity sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==
+"@babel/plugin-transform-regenerator@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz#03a8a4670d6cebae95305ac6defac81ece77740b"
+  integrity sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
     regenerator-transform "^0.15.2"
 
-"@babel/plugin-transform-reserved-words@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.7.tgz#80037fe4fbf031fc1125022178ff3938bb3743a4"
-  integrity sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==
+"@babel/plugin-transform-regexp-modifiers@^7.26.0":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz#2f5837a5b5cd3842a919d8147e9903cc7455b850"
+  integrity sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-shorthand-properties@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz#85448c6b996e122fa9e289746140aaa99da64e73"
-  integrity sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==
+"@babel/plugin-transform-reserved-words@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz#0398aed2f1f10ba3f78a93db219b27ef417fb9ce"
+  integrity sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-spread@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.7.tgz#e8a38c0fde7882e0fb8f160378f74bd885cc7bb3"
-  integrity sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng==
+"@babel/plugin-transform-shorthand-properties@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2"
+  integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-sticky-regex@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.7.tgz#96ae80d7a7e5251f657b5cf18f1ea6bf926f5feb"
-  integrity sha512-kHPSIJc9v24zEml5geKg9Mjx5ULpfncj0wRpYtxbvKyTtHCYDkVE3aHQ03FrpEo4gEe2vrJJS1Y9CJTaThA52g==
+"@babel/plugin-transform-spread@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9"
+  integrity sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
 
-"@babel/plugin-transform-template-literals@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz#a05debb4a9072ae8f985bcf77f3f215434c8f8c8"
-  integrity sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==
+"@babel/plugin-transform-sticky-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32"
+  integrity sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-typeof-symbol@^7.24.8":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.8.tgz#383dab37fb073f5bfe6e60c654caac309f92ba1c"
-  integrity sha512-adNTUpDCVnmAE58VEqKlAA6ZBlNkMnWD0ZcW76lyNFN3MJniyGFZfNwERVk8Ap56MCnXztmDr19T4mPTztcuaw==
+"@babel/plugin-transform-template-literals@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz#6dbd4a24e8fad024df76d1fac6a03cf413f60fe1"
+  integrity sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-typescript@^7.24.7":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.2.tgz#237c5d10de6d493be31637c6b9fa30b6c5461add"
-  integrity sha512-lBwRvjSmqiMYe/pS0+1gggjJleUJi7NzjvQ1Fkqtt69hBa/0t1YuW/MLQMAPixfwaQOHUXsd6jeU3Z+vdGv3+A==
+"@babel/plugin-transform-typeof-symbol@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz#224ba48a92869ddbf81f9b4a5f1204bbf5a2bc4b"
+  integrity sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.24.7"
-    "@babel/helper-create-class-features-plugin" "^7.25.0"
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
-    "@babel/plugin-syntax-typescript" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-unicode-escapes@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz#2023a82ced1fb4971630a2e079764502c4148e0e"
-  integrity sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw==
+"@babel/plugin-transform-typescript@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.9.tgz#69267905c2b33c2ac6d8fe765e9dc2ddc9df3849"
+  integrity sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-annotate-as-pure" "^7.25.9"
+    "@babel/helper-create-class-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
+    "@babel/plugin-syntax-typescript" "^7.25.9"
 
-"@babel/plugin-transform-unicode-property-regex@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.7.tgz#9073a4cd13b86ea71c3264659590ac086605bbcd"
-  integrity sha512-uH2O4OV5M9FZYQrwc7NdVmMxQJOCCzFeYudlZSzUAHRFeOujQefa92E74TQDVskNHCzOXoigEuoyzHDhaEaK5w==
+"@babel/plugin-transform-unicode-escapes@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz#a75ef3947ce15363fccaa38e2dd9bc70b2788b82"
+  integrity sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-unicode-regex@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.7.tgz#dfc3d4a51127108099b19817c0963be6a2adf19f"
-  integrity sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg==
+"@babel/plugin-transform-unicode-property-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz#a901e96f2c1d071b0d1bb5dc0d3c880ce8f53dd3"
+  integrity sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-unicode-sets-regex@^7.24.7":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.7.tgz#d40705d67523803a576e29c63cef6e516b858ed9"
-  integrity sha512-2G8aAvF4wy1w/AGZkemprdGMRg5o6zPNhbHVImRz3lss55TYCBd6xStN19rt8XJHq20sqV0JbyWjOWwQRwV/wg==
+"@babel/plugin-transform-unicode-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1"
+  integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.24.7"
-    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+
+"@babel/plugin-transform-unicode-sets-regex@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz#65114c17b4ffc20fa5b163c63c70c0d25621fabe"
+  integrity sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/preset-env@^7.19.4", "@babel/preset-env@^7.20.2":
-  version "7.25.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.25.3.tgz#0bf4769d84ac51d1073ab4a86f00f30a3a83c67c"
-  integrity sha512-QsYW7UeAaXvLPX9tdVliMJE7MD7M6MLYVTovRTIwhoYQVFHR1rM4wO8wqAezYi3/BpSD+NzVCZ69R6smWiIi8g==
-  dependencies:
-    "@babel/compat-data" "^7.25.2"
-    "@babel/helper-compilation-targets" "^7.25.2"
-    "@babel/helper-plugin-utils" "^7.24.8"
-    "@babel/helper-validator-option" "^7.24.8"
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.3"
-    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.0"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.0"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.24.7"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.0"
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.0.tgz#30e5c6bc1bcc54865bff0c5a30f6d4ccdc7fa8b1"
+  integrity sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==
+  dependencies:
+    "@babel/compat-data" "^7.26.0"
+    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.9"
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.9"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.25.9"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.25.9"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.25.9"
     "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.24.7"
-    "@babel/plugin-syntax-import-attributes" "^7.24.7"
-    "@babel/plugin-syntax-import-meta" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-syntax-import-assertions" "^7.26.0"
+    "@babel/plugin-syntax-import-attributes" "^7.26.0"
     "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
-    "@babel/plugin-transform-arrow-functions" "^7.24.7"
-    "@babel/plugin-transform-async-generator-functions" "^7.25.0"
-    "@babel/plugin-transform-async-to-generator" "^7.24.7"
-    "@babel/plugin-transform-block-scoped-functions" "^7.24.7"
-    "@babel/plugin-transform-block-scoping" "^7.25.0"
-    "@babel/plugin-transform-class-properties" "^7.24.7"
-    "@babel/plugin-transform-class-static-block" "^7.24.7"
-    "@babel/plugin-transform-classes" "^7.25.0"
-    "@babel/plugin-transform-computed-properties" "^7.24.7"
-    "@babel/plugin-transform-destructuring" "^7.24.8"
-    "@babel/plugin-transform-dotall-regex" "^7.24.7"
-    "@babel/plugin-transform-duplicate-keys" "^7.24.7"
-    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.0"
-    "@babel/plugin-transform-dynamic-import" "^7.24.7"
-    "@babel/plugin-transform-exponentiation-operator" "^7.24.7"
-    "@babel/plugin-transform-export-namespace-from" "^7.24.7"
-    "@babel/plugin-transform-for-of" "^7.24.7"
-    "@babel/plugin-transform-function-name" "^7.25.1"
-    "@babel/plugin-transform-json-strings" "^7.24.7"
-    "@babel/plugin-transform-literals" "^7.25.2"
-    "@babel/plugin-transform-logical-assignment-operators" "^7.24.7"
-    "@babel/plugin-transform-member-expression-literals" "^7.24.7"
-    "@babel/plugin-transform-modules-amd" "^7.24.7"
-    "@babel/plugin-transform-modules-commonjs" "^7.24.8"
-    "@babel/plugin-transform-modules-systemjs" "^7.25.0"
-    "@babel/plugin-transform-modules-umd" "^7.24.7"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.24.7"
-    "@babel/plugin-transform-new-target" "^7.24.7"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.24.7"
-    "@babel/plugin-transform-numeric-separator" "^7.24.7"
-    "@babel/plugin-transform-object-rest-spread" "^7.24.7"
-    "@babel/plugin-transform-object-super" "^7.24.7"
-    "@babel/plugin-transform-optional-catch-binding" "^7.24.7"
-    "@babel/plugin-transform-optional-chaining" "^7.24.8"
-    "@babel/plugin-transform-parameters" "^7.24.7"
-    "@babel/plugin-transform-private-methods" "^7.24.7"
-    "@babel/plugin-transform-private-property-in-object" "^7.24.7"
-    "@babel/plugin-transform-property-literals" "^7.24.7"
-    "@babel/plugin-transform-regenerator" "^7.24.7"
-    "@babel/plugin-transform-reserved-words" "^7.24.7"
-    "@babel/plugin-transform-shorthand-properties" "^7.24.7"
-    "@babel/plugin-transform-spread" "^7.24.7"
-    "@babel/plugin-transform-sticky-regex" "^7.24.7"
-    "@babel/plugin-transform-template-literals" "^7.24.7"
-    "@babel/plugin-transform-typeof-symbol" "^7.24.8"
-    "@babel/plugin-transform-unicode-escapes" "^7.24.7"
-    "@babel/plugin-transform-unicode-property-regex" "^7.24.7"
-    "@babel/plugin-transform-unicode-regex" "^7.24.7"
-    "@babel/plugin-transform-unicode-sets-regex" "^7.24.7"
+    "@babel/plugin-transform-arrow-functions" "^7.25.9"
+    "@babel/plugin-transform-async-generator-functions" "^7.25.9"
+    "@babel/plugin-transform-async-to-generator" "^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions" "^7.25.9"
+    "@babel/plugin-transform-block-scoping" "^7.25.9"
+    "@babel/plugin-transform-class-properties" "^7.25.9"
+    "@babel/plugin-transform-class-static-block" "^7.26.0"
+    "@babel/plugin-transform-classes" "^7.25.9"
+    "@babel/plugin-transform-computed-properties" "^7.25.9"
+    "@babel/plugin-transform-destructuring" "^7.25.9"
+    "@babel/plugin-transform-dotall-regex" "^7.25.9"
+    "@babel/plugin-transform-duplicate-keys" "^7.25.9"
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-dynamic-import" "^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.25.9"
+    "@babel/plugin-transform-export-namespace-from" "^7.25.9"
+    "@babel/plugin-transform-for-of" "^7.25.9"
+    "@babel/plugin-transform-function-name" "^7.25.9"
+    "@babel/plugin-transform-json-strings" "^7.25.9"
+    "@babel/plugin-transform-literals" "^7.25.9"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.25.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.25.9"
+    "@babel/plugin-transform-modules-amd" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-modules-systemjs" "^7.25.9"
+    "@babel/plugin-transform-modules-umd" "^7.25.9"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.9"
+    "@babel/plugin-transform-new-target" "^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.25.9"
+    "@babel/plugin-transform-numeric-separator" "^7.25.9"
+    "@babel/plugin-transform-object-rest-spread" "^7.25.9"
+    "@babel/plugin-transform-object-super" "^7.25.9"
+    "@babel/plugin-transform-optional-catch-binding" "^7.25.9"
+    "@babel/plugin-transform-optional-chaining" "^7.25.9"
+    "@babel/plugin-transform-parameters" "^7.25.9"
+    "@babel/plugin-transform-private-methods" "^7.25.9"
+    "@babel/plugin-transform-private-property-in-object" "^7.25.9"
+    "@babel/plugin-transform-property-literals" "^7.25.9"
+    "@babel/plugin-transform-regenerator" "^7.25.9"
+    "@babel/plugin-transform-regexp-modifiers" "^7.26.0"
+    "@babel/plugin-transform-reserved-words" "^7.25.9"
+    "@babel/plugin-transform-shorthand-properties" "^7.25.9"
+    "@babel/plugin-transform-spread" "^7.25.9"
+    "@babel/plugin-transform-sticky-regex" "^7.25.9"
+    "@babel/plugin-transform-template-literals" "^7.25.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.25.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.25.9"
+    "@babel/plugin-transform-unicode-property-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-regex" "^7.25.9"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.25.9"
     "@babel/preset-modules" "0.1.6-no-external-plugins"
     babel-plugin-polyfill-corejs2 "^0.4.10"
-    babel-plugin-polyfill-corejs3 "^0.10.4"
+    babel-plugin-polyfill-corejs3 "^0.10.6"
     babel-plugin-polyfill-regenerator "^0.6.1"
-    core-js-compat "^3.37.1"
+    core-js-compat "^3.38.1"
     semver "^6.3.1"
 
 "@babel/preset-modules@0.1.6-no-external-plugins":
@@ -1038,77 +913,64 @@
     esutils "^2.0.2"
 
 "@babel/preset-react@^7.18.6":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.24.7.tgz#480aeb389b2a798880bf1f889199e3641cbb22dc"
-  integrity sha512-AAH4lEkpmzFWrGVlHaxJB7RLH21uPQ9+He+eFLWHmF9IuFQVugz8eAsamaW0DXRrTfco5zj1wWtpdcXJUOfsag==
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.25.9.tgz#5f473035dc2094bcfdbc7392d0766bd42dce173e"
+  integrity sha512-D3to0uSPiWE7rBrdIICCd0tJSIGpLaaGptna2+w7Pft5xMqLpA1sz99DK5TZ1TjGbdQ/VI1eCSZ06dv3lT4JOw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/helper-validator-option" "^7.24.7"
-    "@babel/plugin-transform-react-display-name" "^7.24.7"
-    "@babel/plugin-transform-react-jsx" "^7.24.7"
-    "@babel/plugin-transform-react-jsx-development" "^7.24.7"
-    "@babel/plugin-transform-react-pure-annotations" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-transform-react-display-name" "^7.25.9"
+    "@babel/plugin-transform-react-jsx" "^7.25.9"
+    "@babel/plugin-transform-react-jsx-development" "^7.25.9"
+    "@babel/plugin-transform-react-pure-annotations" "^7.25.9"
 
 "@babel/preset-typescript@^7.18.6", "@babel/preset-typescript@^7.21.0":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.24.7.tgz#66cd86ea8f8c014855671d5ea9a737139cbbfef1"
-  integrity sha512-SyXRe3OdWwIwalxDg5UtJnJQO+YPcTfwiIY2B0Xlddh9o7jpWLvv8X1RthIeDOxQ+O1ML5BLPCONToObyVQVuQ==
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz#4a570f1b8d104a242d923957ffa1eaff142a106d"
+  integrity sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.24.7"
-    "@babel/helper-validator-option" "^7.24.7"
-    "@babel/plugin-syntax-jsx" "^7.24.7"
-    "@babel/plugin-transform-modules-commonjs" "^7.24.7"
-    "@babel/plugin-transform-typescript" "^7.24.7"
+    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-validator-option" "^7.25.9"
+    "@babel/plugin-syntax-jsx" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-typescript" "^7.25.9"
 
-"@babel/regjsgen@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
-  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
-
-"@babel/runtime@^7.18.9":
-  version "7.25.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
-  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
-"@babel/runtime@^7.8.4":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
-  integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
+"@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.24.7", "@babel/template@^7.25.0":
-  version "7.25.0"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
-  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
-  dependencies:
-    "@babel/code-frame" "^7.24.7"
-    "@babel/parser" "^7.25.0"
-    "@babel/types" "^7.25.0"
-
-"@babel/traverse@^7.21.2", "@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.25.0", "@babel/traverse@^7.25.1", "@babel/traverse@^7.25.2", "@babel/traverse@^7.25.3":
-  version "7.25.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490"
-  integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==
-  dependencies:
-    "@babel/code-frame" "^7.24.7"
-    "@babel/generator" "^7.25.0"
-    "@babel/parser" "^7.25.3"
-    "@babel/template" "^7.25.0"
-    "@babel/types" "^7.25.2"
+"@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/traverse@^7.21.2", "@babel/traverse@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.9.tgz#a50f8fe49e7f69f53de5bea7e413cd35c5e13c84"
+  integrity sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/generator" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.25.9"
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.20.0", "@babel/types@^7.21.3", "@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.25.0", "@babel/types@^7.25.2", "@babel/types@^7.4.4":
-  version "7.25.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
-  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+"@babel/types@^7.20.0", "@babel/types@^7.21.3", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.4.4":
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.0.tgz#deabd08d6b753bc8e0f198f8709fb575e31774ff"
+  integrity sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==
   dependencies:
-    "@babel/helper-string-parser" "^7.24.8"
-    "@babel/helper-validator-identifier" "^7.24.7"
-    to-fast-properties "^2.0.0"
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
 
 "@codemirror/autocomplete@^0.19.0":
   version "0.19.15"
@@ -1362,10 +1224,10 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
-"@cypress/request@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
-  integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==
+"@cypress/request@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.6.tgz#f5580add6acee0e183b4d4e07eff4f31327ae12b"
+  integrity sha512-fi0eVdCOtKu5Ed6+E8mYxUF6ZTFJDZvHogCBelM0xVXmrDEkyM22gRArQzq1YcHPm1V47Vf/iAD+WgVdUlJCGg==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -1373,16 +1235,16 @@
     combined-stream "~1.0.6"
     extend "~3.0.2"
     forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    http-signature "~1.3.6"
+    form-data "~4.0.0"
+    http-signature "~1.4.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
     performance-now "^2.1.0"
-    qs "6.10.4"
+    qs "6.13.0"
     safe-buffer "^5.1.2"
-    tough-cookie "^4.1.3"
+    tough-cookie "^5.0.0"
     tunnel-agent "^0.6.0"
     uuid "^8.3.2"
 
@@ -1402,9 +1264,9 @@
     "@emotion/memoize" "^0.8.1"
 
 "@emotion/is-prop-valid@^1.2.1":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz#bd84ba972195e8a2d42462387581560ef780e4e2"
-  integrity sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
   dependencies:
     "@emotion/memoize" "^0.9.0"
 
@@ -1424,16 +1286,16 @@
   integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
 "@eslint-community/eslint-utils@^4.2.0":
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
-  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
   dependencies:
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^3.4.3"
 
 "@eslint-community/regexpp@^4.4.0":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
-  integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
 
 "@eslint/eslintrc@^2.0.3":
   version "2.1.4"
@@ -1584,9 +1446,9 @@
     glob "7.1.7"
 
 "@next/font@^13.4.7":
-  version "13.5.6"
-  resolved "https://registry.yarnpkg.com/@next/font/-/font-13.5.6.tgz#2659cfbd9298e21c4ff734bb863d139ef6971cb8"
-  integrity sha512-urmUq05uCVJsBqAAJEV+xK5OTTodrSxdiG+351SOSjlWctywdBM6qX+K9pIe3K48RxjfnxlBbXjGyOJAji+pfw==
+  version "13.5.7"
+  resolved "https://registry.yarnpkg.com/@next/font/-/font-13.5.7.tgz#7574a756ea303bb50ff0d8d72c2a8c42ae679a07"
+  integrity sha512-uzYv8ZGvVA9Ju2TyzrQ6WWb+XU45whWFdkfSS7tQ+ShggiHWUKIW94wCYUodGwR8oNv11lTwvVFXtcIL7DhKpA==
 
 "@next/swc-darwin-arm64@13.4.13":
   version "13.4.13"
@@ -1704,6 +1566,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@nolyfill/is-core-module@1.0.39":
+  version "1.0.39"
+  resolved "https://registry.yarnpkg.com/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz#3dc35ba0f1e66b403c00b39344f870298ebb1c8e"
+  integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==
+
 "@reactflow/background@11.2.4":
   version "11.2.4"
   resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.2.4.tgz#06cd4c9f222dbeb2d3ffb2a530b6d88bf130dd9c"
@@ -1786,9 +1653,9 @@
     zustand "^4.3.1"
 
 "@reduxjs/toolkit@^2.2.1":
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.2.7.tgz#199e3d10ccb39267cb5aee92c0262fd9da7fdfb2"
-  integrity sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.3.0.tgz#d00134634d6c1678e8563ac50026e429e3b64420"
+  integrity sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==
   dependencies:
     immer "^10.0.3"
     redux "^5.0.1"
@@ -1803,6 +1670,11 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.10.4"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
@@ -2162,9 +2034,9 @@
     "@types/d3-time" "*"
 
 "@types/d3-selection@*", "@types/d3-selection@^3.0.10", "@types/d3-selection@^3.0.3":
-  version "3.0.10"
-  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.10.tgz#98cdcf986d0986de6912b5892e7c015a95ca27fe"
-  integrity sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.11.tgz#bd7a45fc0a8c3167a631675e61bc2ca2b058d4a3"
+  integrity sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==
 
 "@types/d3-shape@*":
   version "3.1.6"
@@ -2189,9 +2061,9 @@
   integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
 
 "@types/d3-transition@*", "@types/d3-transition@^3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.8.tgz#677707f5eed5b24c66a1918cde05963021351a8f"
-  integrity sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.9.tgz#1136bc57e9ddb3c390dccc9b5ff3b7d2b8d94706"
+  integrity sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==
   dependencies:
     "@types/d3-selection" "*"
 
@@ -2250,11 +2122,11 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/node@*":
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.1.0.tgz#6d6adc648b5e03f0e83c78dc788c2b037d0ad94b"
-  integrity sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==
+  version "22.9.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.0.tgz#b7f16e5c3384788542c72dc3d561a7ceae2c0365"
+  integrity sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==
   dependencies:
-    undici-types "~6.13.0"
+    undici-types "~6.19.8"
 
 "@types/node@20.4.8":
   version "20.4.8"
@@ -2274,9 +2146,9 @@
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
 "@types/prop-types@*":
-  version "15.7.12"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
-  integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
+  version "15.7.13"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
+  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
 
 "@types/react-dom@18.2.4":
   version "18.2.4"
@@ -2293,9 +2165,9 @@
     "@types/react" "*"
 
 "@types/react@*":
-  version "18.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
-  integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
+  version "18.3.12"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.12.tgz#99419f182ccd69151813b7ee24b792fe08774f60"
+  integrity sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
@@ -2333,9 +2205,9 @@
   integrity sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==
 
 "@types/sizzle@^2.3.2":
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.8.tgz#518609aefb797da19bf222feb199e8f653ff7627"
-  integrity sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.9.tgz#d4597dbd4618264c414d7429363e3f50acb66ea2"
+  integrity sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==
 
 "@types/stylis@4.2.5":
   version "4.2.5"
@@ -2434,18 +2306,18 @@
     tslib "^2.3.0"
 
 "@xyflow/react@^12.3.0":
-  version "12.3.0"
-  resolved "https://registry.yarnpkg.com/@xyflow/react/-/react-12.3.0.tgz#611bf68e0580ff2eab0a5cdf4b997d923a8cae85"
-  integrity sha512-dujEbjOn+5gMGg/wsojxtI7v2CfWm7ieRyiOHiZTPyw6p/VIdCoS3nLfSBP3TT+swoHSAXZ78iomHSKoUl4tMg==
+  version "12.3.5"
+  resolved "https://registry.yarnpkg.com/@xyflow/react/-/react-12.3.5.tgz#88ca2efe2ddf1300bc171a2ef797f7cb41386ca4"
+  integrity sha512-wAYqpicdrVo1rxCu0X3M9s3YIF45Agqfabw0IBryTGqjWvr2NyfciI8gIP4MB+NKpWWN5kxZ9tiZ9u8lwC7iAg==
   dependencies:
-    "@xyflow/system" "0.0.42"
+    "@xyflow/system" "0.0.46"
     classcat "^5.0.3"
     zustand "^4.4.0"
 
-"@xyflow/system@0.0.42":
-  version "0.0.42"
-  resolved "https://registry.yarnpkg.com/@xyflow/system/-/system-0.0.42.tgz#359b274fe072a28191ecfbc61bb7a3601de80e1e"
-  integrity sha512-kWYj+Y0GOct0jKYTdyRMNOLPxGNbb2TYvPg2gTmJnZ31DOOMkL5uRBLX825DR2gOACDu+i5FHLxPJUPf/eGOJw==
+"@xyflow/system@0.0.46":
+  version "0.0.46"
+  resolved "https://registry.yarnpkg.com/@xyflow/system/-/system-0.0.46.tgz#b0a5915d59c0ea5ca6d24e1eb90c5a0d7eda7864"
+  integrity sha512-bmFXvboVdiydIFZmDCjrbBCYgB0d5pYdkcZPWbAxGmhMRUZ+kW3CksYgYxWabrw51rwpWitLEadvLrivG0mVfA==
   dependencies:
     "@types/d3-drag" "^3.0.7"
     "@types/d3-selection" "^3.0.10"
@@ -2461,9 +2333,9 @@ acorn-jsx@^5.3.2:
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
 acorn@^8.9.0:
-  version "8.12.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
-  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
 
 aggregate-error@^3.0.0:
   version "3.1.0"
@@ -2500,13 +2372,6 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
 ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
@@ -2532,14 +2397,12 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@~5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
-  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
-  dependencies:
-    deep-equal "^2.0.5"
+aria-query@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
 
-array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
+array-buffer-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
   integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
@@ -2547,7 +2410,7 @@ array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
     call-bind "^1.0.5"
     is-array-buffer "^3.0.4"
 
-array-includes@^3.1.6, array-includes@^3.1.7, array-includes@^3.1.8:
+array-includes@^3.1.6, array-includes@^3.1.8:
   version "3.1.8"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
   integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
@@ -2576,7 +2439,7 @@ array.prototype.findlast@^1.2.5:
     es-object-atoms "^1.0.0"
     es-shim-unscopables "^1.0.2"
 
-array.prototype.findlastindex@^1.2.3:
+array.prototype.findlastindex@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
   integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
@@ -2656,9 +2519,9 @@ astral-regex@^2.0.0:
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
 async@^3.2.0:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
-  integrity sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
+  integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -2695,30 +2558,28 @@ aws-sign2@~0.7.0:
   integrity sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==
 
 aws4@^1.8.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.13.1.tgz#bb5f8b8a20739f6ae1caeaf7eea2c7913df8048e"
-  integrity sha512-u5w79Rd7SU4JaIlA/zFqG+gOiuq25q5VLyZ8E+ijJeILuTxVzZgp2CaGw/UTw6pXYN9XMO9yiqj/nEHmhTG5CA==
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.13.2.tgz#0aa167216965ac9474ccfa83892cfb6b3e1e52ef"
+  integrity sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==
 
-axe-core@^4.9.1:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.0.tgz#d9e56ab0147278272739a000880196cdfe113b59"
-  integrity sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==
+axe-core@^4.10.0:
+  version "4.10.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
+  integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
 
 axios@^1.4.0:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.3.tgz#a1125f2faf702bc8e8f2104ec3a76fab40257d85"
-  integrity sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.7.tgz#2f554296f9892a72ac8d8e4c5b79c14a91d0a47f"
+  integrity sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==
   dependencies:
     follow-redirects "^1.15.6"
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-axobject-query@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
-  integrity sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==
-  dependencies:
-    deep-equal "^2.0.5"
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
 
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.11"
@@ -2729,7 +2590,7 @@ babel-plugin-polyfill-corejs2@^0.4.10:
     "@babel/helper-define-polyfill-provider" "^0.6.2"
     semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.10.4:
+babel-plugin-polyfill-corejs3@^0.10.6:
   version "0.10.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz#2deda57caef50f59c525aeb4964d3b2f867710c7"
   integrity sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==
@@ -2807,15 +2668,15 @@ braces@^3.0.3, braces@~3.0.2:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.23.1, browserslist@^4.23.3:
-  version "4.23.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.3.tgz#debb029d3c93ebc97ffbc8d9cbb03403e227c800"
-  integrity sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==
+browserslist@^4.23.3, browserslist@^4.24.0, browserslist@^4.24.2:
+  version "4.24.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580"
+  integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==
   dependencies:
-    caniuse-lite "^1.0.30001646"
-    electron-to-chromium "^1.5.4"
+    caniuse-lite "^1.0.30001669"
+    electron-to-chromium "^1.5.41"
     node-releases "^2.0.18"
-    update-browserslist-db "^1.1.0"
+    update-browserslist-db "^1.1.1"
 
 buffer-crc32@~0.2.3:
   version "0.2.13"
@@ -2868,25 +2729,16 @@ camelize@^1.0.0:
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
   integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
 
-caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001646:
-  version "1.0.30001650"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001650.tgz#dd1eba0938e39536d184c3c99b2569a13788bc16"
-  integrity sha512-fgEc7hP/LB7iicdXHUI9VsBsMZmUmlVJeQP2qqQW+3lkqVhbmjEU8zp+h5stWeilX+G7uXuIUIIlWlDw9jdt8g==
+caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001669:
+  version "1.0.30001680"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz#5380ede637a33b9f9f1fc6045ea99bd142f3da5e"
+  integrity sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==
 
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
-chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -2900,7 +2752,7 @@ check-more-types@^2.24.0:
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
 
-chokidar@^3.4.0:
+chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -2915,10 +2767,10 @@ chokidar@^3.4.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-ci-info@^3.2.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
-  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
+ci-info@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.0.0.tgz#65466f8b280fc019b9f50a5388115d17a63a44f2"
+  integrity sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==
 
 classcat@^5.0.3, classcat@^5.0.4:
   version "5.0.5"
@@ -2959,13 +2811,6 @@ client-only@0.0.1, client-only@^0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -2973,11 +2818,6 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
@@ -2988,7 +2828,7 @@ colorette@^2.0.16:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
-combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
+combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -3020,12 +2860,12 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
-core-js-compat@^3.37.1, core-js-compat@^3.38.0:
-  version "3.38.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.38.0.tgz#d93393b1aa346b6ee683377b0c31172ccfe607aa"
-  integrity sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==
+core-js-compat@^3.38.0, core-js-compat@^3.38.1:
+  version "3.39.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.39.0.tgz#b12dccb495f2601dc860bdbe7b4e3ffa8ba63f61"
+  integrity sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==
   dependencies:
-    browserslist "^4.23.3"
+    browserslist "^4.24.2"
 
 core-util-is@1.0.2:
   version "1.0.2"
@@ -3059,9 +2899,9 @@ crelt@^1.0.5:
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
 cross-spawn@^7.0.0, cross-spawn@^7.0.2:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.5.tgz#910aac880ff5243da96b728bc6521a5f6c2f2f82"
+  integrity sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"
@@ -3152,11 +2992,11 @@ csstype@3.1.3, csstype@^3.0.2, csstype@^3.1.2:
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 cypress@^13.13.1:
-  version "13.13.2"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.13.2.tgz#c71f8d92056c430b1b879e5313f6de25ccce0eda"
-  integrity sha512-PvJQU33933NvS1StfzEb8/mu2kMy4dABwCF+yd5Bi7Qly1HOVf+Bufrygee/tlmty/6j5lX+KIi8j9Q3JUMbhA==
+  version "13.15.2"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.15.2.tgz#ef19554c274bc4ff23802aeb5c52951677fa67f1"
+  integrity sha512-ARbnUorjcCM3XiPwgHKuqsyr5W9Qn+pIIBPaoilnoBkLdSC2oLQjV1BUpnmc7KR+b7Avah3Ly2RMFnfxr96E/A==
   dependencies:
-    "@cypress/request" "^3.0.1"
+    "@cypress/request" "^3.0.6"
     "@cypress/xvfb" "^1.2.4"
     "@types/sinonjs__fake-timers" "8.1.1"
     "@types/sizzle" "^2.3.2"
@@ -3167,6 +3007,7 @@ cypress@^13.13.1:
     cachedir "^2.3.0"
     chalk "^4.1.0"
     check-more-types "^2.24.0"
+    ci-info "^4.0.0"
     cli-cursor "^3.1.0"
     cli-table3 "~0.6.1"
     commander "^6.2.1"
@@ -3181,7 +3022,6 @@ cypress@^13.13.1:
     figures "^3.2.0"
     fs-extra "^9.1.0"
     getos "^3.2.1"
-    is-ci "^3.0.1"
     is-installed-globally "~0.4.0"
     lazy-ass "^1.6.0"
     listr2 "^3.8.3"
@@ -3196,6 +3036,7 @@ cypress@^13.13.1:
     semver "^7.5.3"
     supports-color "^8.1.1"
     tmp "~0.2.3"
+    tree-kill "1.2.2"
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
@@ -3301,9 +3142,9 @@ data-view-byte-offset@^1.0.0:
     is-data-view "^1.0.1"
 
 dayjs@^1.10.4:
-  version "1.11.12"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.12.tgz#5245226cc7f40a15bf52e0b99fd2a04669ccac1d"
-  integrity sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
 
 debug@^3.1.0, debug@^3.2.7:
   version "3.2.7"
@@ -3312,36 +3153,12 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
-  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
-  dependencies:
-    ms "2.1.2"
-
-deep-equal@^2.0.5:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.3.tgz#af89dafb23a396c7da3e862abc0be27cf51d56e1"
-  integrity sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==
+debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
   dependencies:
-    array-buffer-byte-length "^1.0.0"
-    call-bind "^1.0.5"
-    es-get-iterator "^1.1.3"
-    get-intrinsic "^1.2.2"
-    is-arguments "^1.1.1"
-    is-array-buffer "^3.0.2"
-    is-date-object "^1.0.5"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
-    isarray "^2.0.5"
-    object-is "^1.1.5"
-    object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.1"
-    side-channel "^1.0.4"
-    which-boxed-primitive "^1.0.2"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.13"
+    ms "^2.1.3"
 
 deep-is@^0.1.3:
   version "0.1.4"
@@ -3468,10 +3285,10 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-electron-to-chromium@^1.5.4:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.5.tgz#03bfdf422bdd2c05ee2657efedde21264a1a566b"
-  integrity sha512-QR7/A7ZkMS8tZuoftC/jfqNkZLQO779SSW3YuZHP4eXpj3EffGLFcB/Xu9AAZQzLccTiCV+EmUo3ha4mQ9wnlA==
+electron-to-chromium@^1.5.41:
+  version "1.5.55"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz#73684752aa2e1aa49cafb355a41386c6637e76a9"
+  integrity sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -3490,7 +3307,7 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^5.12.0:
+enhanced-resolve@^5.15.0:
   version "5.17.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
   integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
@@ -3587,25 +3404,10 @@ es-errors@^1.2.1, es-errors@^1.3.0:
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-es-get-iterator@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
-  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
-  dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
-    has-symbols "^1.0.3"
-    is-arguments "^1.1.1"
-    is-map "^2.0.2"
-    is-set "^2.0.2"
-    is-string "^1.0.7"
-    isarray "^2.0.5"
-    stop-iteration-iterator "^1.0.0"
-
-es-iterator-helpers@^1.0.19:
-  version "1.0.19"
-  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz#117003d0e5fec237b4b5c08aded722e0c6d50ca8"
-  integrity sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==
+es-iterator-helpers@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz#2f1a3ab998b30cb2d10b195b587c6d9ebdebf152"
+  integrity sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==
   dependencies:
     call-bind "^1.0.7"
     define-properties "^1.2.1"
@@ -3614,12 +3416,13 @@ es-iterator-helpers@^1.0.19:
     es-set-tostringtag "^2.0.3"
     function-bind "^1.1.2"
     get-intrinsic "^1.2.4"
-    globalthis "^1.0.3"
+    globalthis "^1.0.4"
+    gopd "^1.0.1"
     has-property-descriptors "^1.0.2"
     has-proto "^1.0.3"
     has-symbols "^1.0.3"
     internal-slot "^1.0.7"
-    iterator.prototype "^1.1.2"
+    iterator.prototype "^1.1.3"
     safe-array-concat "^1.1.2"
 
 es-object-atoms@^1.0.0:
@@ -3654,10 +3457,10 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-escalade@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
-  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
@@ -3694,69 +3497,71 @@ eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
     resolve "^1.22.4"
 
 eslint-import-resolver-typescript@^3.5.2:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz#7b983680edd3f1c5bce1a5829ae0bc2d57fe9efa"
-  integrity sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==
-  dependencies:
-    debug "^4.3.4"
-    enhanced-resolve "^5.12.0"
-    eslint-module-utils "^2.7.4"
-    fast-glob "^3.3.1"
-    get-tsconfig "^4.5.0"
-    is-core-module "^2.11.0"
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.3.tgz#bb8e388f6afc0f940ce5d2c5fd4a3d147f038d9e"
+  integrity sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==
+  dependencies:
+    "@nolyfill/is-core-module" "1.0.39"
+    debug "^4.3.5"
+    enhanced-resolve "^5.15.0"
+    eslint-module-utils "^2.8.1"
+    fast-glob "^3.3.2"
+    get-tsconfig "^4.7.5"
+    is-bun-module "^1.0.2"
     is-glob "^4.0.3"
 
-eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
-  integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
+eslint-module-utils@^2.12.0, eslint-module-utils@^2.8.1:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
   dependencies:
     debug "^3.2.7"
 
 eslint-plugin-import@^2.26.0:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
-  integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
   dependencies:
-    array-includes "^3.1.7"
-    array.prototype.findlastindex "^1.2.3"
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.8"
+    array.prototype.findlastindex "^1.2.5"
     array.prototype.flat "^1.3.2"
     array.prototype.flatmap "^1.3.2"
     debug "^3.2.7"
     doctrine "^2.1.0"
     eslint-import-resolver-node "^0.3.9"
-    eslint-module-utils "^2.8.0"
-    hasown "^2.0.0"
-    is-core-module "^2.13.1"
+    eslint-module-utils "^2.12.0"
+    hasown "^2.0.2"
+    is-core-module "^2.15.1"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.fromentries "^2.0.7"
-    object.groupby "^1.0.1"
-    object.values "^1.1.7"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.0"
     semver "^6.3.1"
+    string.prototype.trimend "^1.0.8"
     tsconfig-paths "^3.15.0"
 
 eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.9.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.9.0.tgz#67ab8ff460d4d3d6a0b4a570e9c1670a0a8245c8"
-  integrity sha512-nOFOCaJG2pYqORjK19lqPqxMO/JpvdCZdPtNdxY3kvom3jTvkAbOvQvD8wuD0G8BYR0IGAGYDlzqWJOh/ybn2g==
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
+  integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
   dependencies:
-    aria-query "~5.1.3"
+    aria-query "^5.3.2"
     array-includes "^3.1.8"
     array.prototype.flatmap "^1.3.2"
     ast-types-flow "^0.0.8"
-    axe-core "^4.9.1"
-    axobject-query "~3.1.1"
+    axe-core "^4.10.0"
+    axobject-query "^4.1.0"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
-    es-iterator-helpers "^1.0.19"
     hasown "^2.0.2"
     jsx-ast-utils "^3.3.5"
     language-tags "^1.0.9"
     minimatch "^3.1.2"
     object.fromentries "^2.0.8"
     safe-regex-test "^1.0.3"
-    string.prototype.includes "^2.0.0"
+    string.prototype.includes "^2.0.1"
 
 eslint-plugin-react-hooks@^4.5.0:
   version "4.6.2"
@@ -3764,16 +3569,16 @@ eslint-plugin-react-hooks@^4.5.0:
   integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
 
 eslint-plugin-react@^7.31.7:
-  version "7.35.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz#00b1e4559896710e58af6358898f2ff917ea4c41"
-  integrity sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==
+  version "7.37.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz#cd0935987876ba2900df2f58339f6d92305acc7a"
+  integrity sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==
   dependencies:
     array-includes "^3.1.8"
     array.prototype.findlast "^1.2.5"
     array.prototype.flatmap "^1.3.2"
     array.prototype.tosorted "^1.1.4"
     doctrine "^2.1.0"
-    es-iterator-helpers "^1.0.19"
+    es-iterator-helpers "^1.1.0"
     estraverse "^5.3.0"
     hasown "^2.0.2"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
@@ -3795,7 +3600,7 @@ eslint-scope@^7.2.0:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
@@ -3941,7 +3746,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.9, fast-glob@^3.3.1:
+fast-glob@^3.2.9, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -4020,9 +3825,9 @@ flatted@^3.2.9:
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 follow-redirects@^1.15.6:
-  version "1.15.6"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
-  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -4036,24 +3841,15 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
 
-form-data@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
-  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+form-data@^4.0.0, form-data@~4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
+  integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-form-data@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
-  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.6"
-    mime-types "^2.1.12"
-
 fraction.js@^4.3.7:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
@@ -4109,7 +3905,7 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
   integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
@@ -4136,10 +3932,10 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
-get-tsconfig@^4.5.0:
-  version "4.7.6"
-  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.6.tgz#118fd5b7b9bae234cc7705a00cd771d7eb65d62a"
-  integrity sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==
+get-tsconfig@^4.7.5:
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.8.1.tgz#8995eb391ae6e1638d251118c7b56de7eb425471"
+  integrity sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
@@ -4219,7 +4015,7 @@ globals@^13.19.0:
   dependencies:
     type-fest "^0.20.2"
 
-globalthis@^1.0.3:
+globalthis@^1.0.3, globalthis@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
   integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
@@ -4273,11 +4069,6 @@ has-bigints@^1.0.1, has-bigints@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
-
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
@@ -4321,14 +4112,14 @@ hoist-non-react-statics@^3.3.2:
   dependencies:
     react-is "^16.7.0"
 
-http-signature@~1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
-  integrity sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==
+http-signature@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.4.0.tgz#dee5a9ba2bf49416abc544abd6d967f6a94c8c3f"
+  integrity sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==
   dependencies:
     assert-plus "^1.0.0"
     jsprim "^2.0.2"
-    sshpk "^1.14.1"
+    sshpk "^1.18.0"
 
 human-signals@^1.1.1:
   version "1.1.1"
@@ -4341,9 +4132,9 @@ ieee754@^1.1.13:
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
 ignore@^5.2.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
-  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
 immer@^10.0.3:
   version "10.1.1"
@@ -4386,7 +4177,7 @@ ini@2.0.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
   integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
 
-internal-slot@^1.0.4, internal-slot@^1.0.7:
+internal-slot@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
   integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
@@ -4395,15 +4186,7 @@ internal-slot@^1.0.4, internal-slot@^1.0.7:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
-is-arguments@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
-  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
-
-is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
+is-array-buffer@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
   integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
@@ -4445,22 +4228,22 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-bun-module@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-bun-module/-/is-bun-module-1.2.1.tgz#495e706f42e29f086fd5fe1ac3c51f106062b9fc"
+  integrity sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==
+  dependencies:
+    semver "^7.6.3"
+
 is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-ci@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
-  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
-  dependencies:
-    ci-info "^3.2.0"
-
-is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.13.1:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.0.tgz#71c72ec5442ace7e76b306e9d48db361f22699ea"
-  integrity sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==
+is-core-module@^2.13.0, is-core-module@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.1.tgz#a7363a25bee942fefab0de13bf6aa372c82dcc37"
+  integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==
   dependencies:
     hasown "^2.0.2"
 
@@ -4517,7 +4300,7 @@ is-installed-globally@~0.4.0:
     global-dirs "^3.0.0"
     is-path-inside "^3.0.2"
 
-is-map@^2.0.2, is-map@^2.0.3:
+is-map@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
   integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
@@ -4552,7 +4335,7 @@ is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-set@^2.0.2, is-set@^2.0.3:
+is-set@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
   integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
@@ -4635,10 +4418,10 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
 
-iterator.prototype@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
-  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+iterator.prototype@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.3.tgz#016c2abe0be3bbdb8319852884f60908ac62bf9c"
+  integrity sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==
   dependencies:
     define-properties "^1.2.1"
     get-intrinsic "^1.2.1"
@@ -4663,15 +4446,10 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
-jsesc@^2.5.1:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
-  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
-
-jsesc@~0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
+jsesc@^3.0.2, jsesc@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
 
 json-buffer@3.0.1:
   version "3.0.1"
@@ -4895,9 +4673,9 @@ merge2@^1.3.0, merge2@^1.4.1:
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 micromatch@^4.0.4:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
-  integrity sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
     braces "^3.0.3"
     picomatch "^2.3.1"
@@ -4931,12 +4709,7 @@ minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-ms@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
-  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
-
-ms@^2.1.1:
+ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -5041,17 +4814,9 @@ object-assign@^4.1.1:
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
 object-inspect@^1.13.1:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
-  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
-
-object-is@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
-  integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
+  integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
 
 object-keys@^1.1.1:
   version "1.1.1"
@@ -5077,7 +4842,7 @@ object.entries@^1.1.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-object.fromentries@^2.0.7, object.fromentries@^2.0.8:
+object.fromentries@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
   integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
@@ -5087,7 +4852,7 @@ object.fromentries@^2.0.7, object.fromentries@^2.0.8:
     es-abstract "^1.23.2"
     es-object-atoms "^1.0.0"
 
-object.groupby@^1.0.1:
+object.groupby@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
   integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
@@ -5096,7 +4861,7 @@ object.groupby@^1.0.1:
     define-properties "^1.2.1"
     es-abstract "^1.23.2"
 
-object.values@^1.1.6, object.values@^1.1.7, object.values@^1.2.0:
+object.values@^1.1.6, object.values@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
   integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
@@ -5219,10 +4984,10 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picocolors@^1.0.0, picocolors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
-  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   version "2.3.1"
@@ -5277,13 +5042,13 @@ postcss@8.4.38:
     source-map-js "^1.2.0"
 
 postcss@^8.4.23, postcss@^8.4.26:
-  version "8.4.41"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
-  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
+  version "8.4.48"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.48.tgz#765f3f8abaa2a2b065cdddbc57ad4cb5a76e515f"
+  integrity sha512-GCRK8F6+Dl7xYniR5a4FYbpBzU8XnZVeowqsQFYdcXuSbChgiks7qybSkbvnaeqv0G0B+dd9/jJgH8kkLDQeEA==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -5319,35 +5084,25 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
-psl@^1.1.33:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
-  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
-
 pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.2.tgz#836f3edd6bc2ee599256c924ffe0d88573ddcbf8"
+  integrity sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==
   dependencies:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-qs@6.10.4:
-  version "6.10.4"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7"
-  integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==
+qs@6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
   dependencies:
-    side-channel "^1.0.4"
-
-querystringify@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
-  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+    side-channel "^1.0.6"
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -5430,10 +5185,10 @@ reflect.getprototypeof@^1.0.4:
     globalthis "^1.0.3"
     which-builtin-type "^1.1.3"
 
-regenerate-unicode-properties@^10.1.0:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
-  integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==
+regenerate-unicode-properties@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0"
+  integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==
   dependencies:
     regenerate "^1.4.2"
 
@@ -5454,34 +5209,39 @@ regenerator-transform@^0.15.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
-  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+regexp.prototype.flags@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz#b3ae40b1d2499b8350ab2c3fe6ef3845d3a96f42"
+  integrity sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==
   dependencies:
-    call-bind "^1.0.6"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
     es-errors "^1.3.0"
-    set-function-name "^2.0.1"
+    set-function-name "^2.0.2"
 
-regexpu-core@^5.3.1:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
-  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
+regexpu-core@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.1.1.tgz#b469b245594cb2d088ceebc6369dceb8c00becac"
+  integrity sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==
   dependencies:
-    "@babel/regjsgen" "^0.8.0"
     regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.1.0"
-    regjsparser "^0.9.1"
+    regenerate-unicode-properties "^10.2.0"
+    regjsgen "^0.8.0"
+    regjsparser "^0.11.0"
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.1.0"
 
-regjsparser@^0.9.1:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
-  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
+regjsgen@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
+  integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
+
+regjsparser@^0.11.0:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.11.2.tgz#7404ad42be00226d72bcf1f003f1f441861913d8"
+  integrity sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA==
   dependencies:
-    jsesc "~0.5.0"
+    jsesc "~3.0.2"
 
 rehackt@^0.1.0:
   version "0.1.0"
@@ -5495,11 +5255,6 @@ request-progress@^3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
-requires-port@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
-  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
-
 reselect@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
@@ -5632,7 +5387,7 @@ semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.7, semver@^7.5.3:
+semver@^7.3.7, semver@^7.5.3, semver@^7.6.3:
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
@@ -5727,17 +5482,17 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
-source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-sshpk@^1.14.1:
+sshpk@^1.18.0:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
   integrity sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==
@@ -5757,13 +5512,6 @@ stable@^0.1.8:
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
-stop-iteration-iterator@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
-  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
-  dependencies:
-    internal-slot "^1.0.4"
-
 streamsearch@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
@@ -5778,13 +5526,14 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string.prototype.includes@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.0.tgz#8986d57aee66d5460c144620a6d873778ad7289f"
-  integrity sha512-E34CkBgyeqNDcrbU76cDjL5JLcVrtSdYq0MEh/B10r17pRP4ciHLwTgnuLV8Ay6cgEMLkcBkFCKyFZ43YldYzg==
+string.prototype.includes@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
+  integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
 
 string.prototype.matchall@^4.0.11:
   version "4.0.11"
@@ -5893,9 +5642,9 @@ styled-components@6.0.7:
     tslib "^2.5.0"
 
 styled-components@^6.0.2:
-  version "6.1.12"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.12.tgz#0d9d511aacfb9052936146dcc2856559e6fae4df"
-  integrity sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==
+  version "6.1.13"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.13.tgz#2d777750b773b31469bd79df754a32479e9f475e"
+  integrity sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==
   dependencies:
     "@emotion/is-prop-valid" "1.2.2"
     "@emotion/unitless" "0.8.1"
@@ -5914,17 +5663,15 @@ styled-jsx@5.1.1:
   dependencies:
     client-only "0.0.1"
 
-stylis@4.3.2, stylis@^4.3.0:
+stylis@4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444"
   integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
 
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
+stylis@^4.3.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.4.tgz#ca5c6c4a35c4784e4e93a2a24dc4e9fa075250a4"
+  integrity sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==
 
 supports-color@^7.1.0:
   version "7.2.0"
@@ -6009,16 +5756,23 @@ through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
+tldts-core@^6.1.60:
+  version "6.1.60"
+  resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-6.1.60.tgz#b3f0a2106e575e972bfca98880758c85c7557d02"
+  integrity sha512-XHjoxak8SFQnHnmYHb3PcnW5TZ+9ErLZemZei3azuIRhQLw4IExsVbL3VZJdHcLeNaXq6NqawgpDPpjBOg4B5g==
+
+tldts@^6.1.32:
+  version "6.1.60"
+  resolved "https://registry.yarnpkg.com/tldts/-/tldts-6.1.60.tgz#5011770e6946fd2edec582ab4686247c66c97e8a"
+  integrity sha512-TYVHm7G9NCnhgqOsFalbX6MG1Po5F4efF+tLfoeiOGQq48Oqgwcgz8upY2R1BHWa4aDrj28RYx0dkYJ63qCFMg==
+  dependencies:
+    tldts-core "^6.1.60"
+
 tmp@~0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
   integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
 
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
-
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -6026,15 +5780,17 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-tough-cookie@^4.1.3:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
-  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+tough-cookie@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-5.0.0.tgz#6b6518e2b5c070cf742d872ee0f4f92d69eac1af"
+  integrity sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==
   dependencies:
-    psl "^1.1.33"
-    punycode "^2.1.1"
-    universalify "^0.2.0"
-    url-parse "^1.5.3"
+    tldts "^6.1.32"
+
+tree-kill@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
 
 ts-invariant@^0.10.3:
   version "0.10.3"
@@ -6064,9 +5820,9 @@ tslib@^1.8.1:
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
-  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
 tsutils@^3.21.0:
   version "3.21.0"
@@ -6168,20 +5924,15 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-undici-types@~6.13.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.13.0.tgz#e3e79220ab8c81ed1496b5812471afd7cf075ea5"
-  integrity sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==
-
-undici-types@~6.19.2:
+undici-types@~6.19.2, undici-types@~6.19.8:
   version "6.19.8"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
   integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
-  integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz#cb3173fe47ca743e228216e4a3ddc4c84d628cc2"
+  integrity sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==
 
 unicode-match-property-ecmascript@^2.0.0:
   version "2.0.0"
@@ -6192,20 +5943,15 @@ unicode-match-property-ecmascript@^2.0.0:
     unicode-property-aliases-ecmascript "^2.0.0"
 
 unicode-match-property-value-ecmascript@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
-  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz#a0401aee72714598f739b68b104e4fe3a0cb3c71"
+  integrity sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==
 
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
   integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
-universalify@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
-  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
-
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
@@ -6216,13 +5962,13 @@ untildify@^4.0.0:
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
   integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
-update-browserslist-db@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz#7ca61c0d8650766090728046e416a8cde682859e"
-  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
   dependencies:
-    escalade "^3.1.2"
-    picocolors "^1.0.1"
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
 
 uri-js@^4.2.2:
   version "4.4.1"
@@ -6231,19 +5977,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-url-parse@^1.5.3:
-  version "1.5.10"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
-  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
-  dependencies:
-    querystringify "^2.1.1"
-    requires-port "^1.0.0"
-
-use-sync-external-store@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 use-sync-external-store@1.2.2, use-sync-external-store@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
@@ -6305,7 +6038,7 @@ which-builtin-type@^1.1.3:
     which-collection "^1.0.2"
     which-typed-array "^1.1.15"
 
-which-collection@^1.0.1, which-collection@^1.0.2:
+which-collection@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
   integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
@@ -6315,7 +6048,7 @@ which-collection@^1.0.1, which-collection@^1.0.2:
     is-weakmap "^2.0.2"
     is-weakset "^2.0.3"
 
-which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.15:
+which-typed-array@^1.1.14, which-typed-array@^1.1.15:
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
   integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
@@ -6406,14 +6139,7 @@ zustand@^3.7.2:
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"
   integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==
 
-zustand@^4.3.1, zustand@^4.4.1:
-  version "4.5.4"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.4.tgz#63abdd81edfb190bc61e0bbae045cc4d52158a05"
-  integrity sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==
-  dependencies:
-    use-sync-external-store "1.2.0"
-
-zustand@^4.4.0:
+zustand@^4.3.1, zustand@^4.4.0, zustand@^4.4.1:
   version "4.5.5"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.5.tgz#f8c713041543715ec81a2adda0610e1dc82d4ad1"
   integrity sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==
@@ -6421,6 +6147,6 @@ zustand@^4.4.0:
     use-sync-external-store "1.2.2"
 
 zustand@^5.0.0-rc.2:
-  version "5.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.0-rc.2.tgz#d28d95ffb6f0b20cadbaea39210f18446a5bf989"
-  integrity sha512-o2Nwuvnk8vQBX7CcHL8WfFkZNJdxB/VKeWw0tNglw8p4cypsZ3tRT7rTRTDNeUPFS0qaMBRSKe+fVwL5xpcE3A==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.1.tgz#2bdca5e4be172539558ce3974fe783174a48fdcf"
+  integrity sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==

From 3b81553ece89bb2241d8a2320957b42579fba1e4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 17:18:47 +0300
Subject: [PATCH 352/374] chore: remove cache

---
 frontend/Dockerfile | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 6bd07074c..d91af4dff 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,13 +1,12 @@
 FROM --platform=$BUILDPLATFORM node:20.2.0 AS deps
 WORKDIR /app
 COPY frontend/webapp/package.json frontend/webapp/yarn.lock ./
-RUN --mount=type=cache,target=/usr/local/share/.cache/yarn/v6 \
-    yarn install --frozen-lockfile
+RUN yarn install 
 
 FROM --platform=$BUILDPLATFORM node:20.2.0 AS builder
 WORKDIR /webapp
 COPY --from=deps /app/node_modules ./node_modules
-COPY frontend//webapp .
+COPY frontend/webapp .
 RUN yarn build
 
 

From a3ae102276a2cedc7ba90d57201ee7cc62c2caac Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 17:28:23 +0300
Subject: [PATCH 353/374] fix: chagne gql to base url

---
 frontend/webapp/lib/gql/apollo-wrapper.tsx | 22 +++++-----------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/frontend/webapp/lib/gql/apollo-wrapper.tsx b/frontend/webapp/lib/gql/apollo-wrapper.tsx
index debbe9ea4..b9e182009 100644
--- a/frontend/webapp/lib/gql/apollo-wrapper.tsx
+++ b/frontend/webapp/lib/gql/apollo-wrapper.tsx
@@ -1,26 +1,18 @@
 'use client';
 
 import { ApolloLink, HttpLink } from '@apollo/client';
-import {
-  ApolloNextAppProvider,
-  InMemoryCache,
-  ApolloClient,
-  SSRMultipartLink,
-} from '@apollo/experimental-nextjs-app-support';
+import { ApolloNextAppProvider, InMemoryCache, ApolloClient, SSRMultipartLink } from '@apollo/experimental-nextjs-app-support';
 import { onError } from '@apollo/client/link/error';
+import { BASE_URL } from '@/utils';
 
 function makeClient() {
   const httpLink = new HttpLink({
-    uri: 'http://localhost:8085/graphql',
+    uri: `http://${BASE_URL}:8085/graphql`,
   });
 
   const errorLink = onError(({ graphQLErrors, networkError }) => {
     if (graphQLErrors) {
-      graphQLErrors.forEach(({ message, locations, path }) =>
-        console.log(
-          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
-        )
-      );
+      graphQLErrors.forEach(({ message, locations, path }) => console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`));
     }
     if (networkError) console.log(`[Network error]: ${networkError}`);
   });
@@ -46,9 +38,5 @@ function makeClient() {
 }
 
 export function ApolloWrapper({ children }: React.PropsWithChildren<{}>) {
-  return (
-    <ApolloNextAppProvider makeClient={makeClient}>
-      {children}
-    </ApolloNextAppProvider>
-  );
+  return <ApolloNextAppProvider makeClient={makeClient}>{children}</ApolloNextAppProvider>;
 }

From 47c5ff681a9840b0d57f65262bf00271927a9490 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 17:38:18 +0300
Subject: [PATCH 354/374] chore: fixed url

---
 frontend/webapp/lib/gql/apollo-wrapper.tsx |  4 ++--
 frontend/webapp/utils/constants/urls.tsx   | 17 ++++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/webapp/lib/gql/apollo-wrapper.tsx b/frontend/webapp/lib/gql/apollo-wrapper.tsx
index b9e182009..d62aefb4b 100644
--- a/frontend/webapp/lib/gql/apollo-wrapper.tsx
+++ b/frontend/webapp/lib/gql/apollo-wrapper.tsx
@@ -3,11 +3,11 @@
 import { ApolloLink, HttpLink } from '@apollo/client';
 import { ApolloNextAppProvider, InMemoryCache, ApolloClient, SSRMultipartLink } from '@apollo/experimental-nextjs-app-support';
 import { onError } from '@apollo/client/link/error';
-import { BASE_URL } from '@/utils';
+import { API } from '@/utils';
 
 function makeClient() {
   const httpLink = new HttpLink({
-    uri: `http://${BASE_URL}:8085/graphql`,
+    uri: API.BASE_URL,
   });
 
   const errorLink = onError(({ graphQLErrors, networkError }) => {
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 1f16bfaef..0461bf330 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -1,12 +1,19 @@
-const env = process.env.NODE_ENV;
+const ENV = process.env.NODE_ENV;
+const IS_PRODUCTION = ENV === 'production';
 
-const LOCALHOST = 'http://localhost:8085/api';
-const BASE_URL = env === 'production' ? '/api' : LOCALHOST;
+// Define base URLs depending on the environment
+const LOCAL_API_BASE = 'http://localhost:8085';
+const PRODUCTION_API_BASE = '/api';
+const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_API_BASE : `${LOCAL_API_BASE}/graphql`;
 
+// Define endpoints based on the base URL
 const API = {
-  EVENTS: `${BASE_URL}/events`,
+  BASE_URL: API_BASE_URL,
+  EVENTS: `${IS_PRODUCTION ? PRODUCTION_API_BASE : LOCAL_API_BASE}/api/events`,
 };
 
+// Centralize external links
 export const DOCS_LINK = 'https://docs.odigos.io';
 
-export { API, BASE_URL };
+// Export modules
+export { API };

From a92901f77c9196a7efd7aa9711ad7f193dae3ebc Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 17:42:57 +0300
Subject: [PATCH 355/374] fix: base url

---
 frontend/webapp/utils/constants/urls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 0461bf330..77ee22000 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -3,7 +3,7 @@ const IS_PRODUCTION = ENV === 'production';
 
 // Define base URLs depending on the environment
 const LOCAL_API_BASE = 'http://localhost:8085';
-const PRODUCTION_API_BASE = '/api';
+const PRODUCTION_API_BASE = '/';
 const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_API_BASE : `${LOCAL_API_BASE}/graphql`;
 
 // Define endpoints based on the base URL

From 228c444c82bbc0e69a0b4f640039ca718ddb893c Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 17:52:52 +0300
Subject: [PATCH 356/374] fix: base url

---
 frontend/webapp/utils/constants/urls.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 77ee22000..1ba203710 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -3,8 +3,9 @@ const IS_PRODUCTION = ENV === 'production';
 
 // Define base URLs depending on the environment
 const LOCAL_API_BASE = 'http://localhost:8085';
+const PRODUCTION_GQL_API_BASE = '/graphql';
 const PRODUCTION_API_BASE = '/';
-const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_API_BASE : `${LOCAL_API_BASE}/graphql`;
+const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_GQL_API_BASE : `${LOCAL_API_BASE}/graphql`;
 
 // Define endpoints based on the base URL
 const API = {

From 124c8845e4cf6f32ec023a339368c5376c1482a9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 18:16:56 +0300
Subject: [PATCH 357/374] chore: fix base url for gql

---
 frontend/webapp/utils/constants/urls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 1ba203710..4b9c52f2b 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -3,7 +3,7 @@ const IS_PRODUCTION = ENV === 'production';
 
 // Define base URLs depending on the environment
 const LOCAL_API_BASE = 'http://localhost:8085';
-const PRODUCTION_GQL_API_BASE = '/graphql';
+const PRODUCTION_GQL_API_BASE = 'http://localhost:8085/graphql';
 const PRODUCTION_API_BASE = '/';
 const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_GQL_API_BASE : `${LOCAL_API_BASE}/graphql`;
 

From a8c1946ea1a1a13309b8d104dc4fca6e5ca8c0ed Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 18:32:31 +0300
Subject: [PATCH 358/374] chore: wip

---
 frontend/webapp/utils/constants/urls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 4b9c52f2b..1ba203710 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -3,7 +3,7 @@ const IS_PRODUCTION = ENV === 'production';
 
 // Define base URLs depending on the environment
 const LOCAL_API_BASE = 'http://localhost:8085';
-const PRODUCTION_GQL_API_BASE = 'http://localhost:8085/graphql';
+const PRODUCTION_GQL_API_BASE = '/graphql';
 const PRODUCTION_API_BASE = '/';
 const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_GQL_API_BASE : `${LOCAL_API_BASE}/graphql`;
 

From c6faa49b27e9419cbdc48fc1658e7f58ae4448d4 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 18:46:10 +0300
Subject: [PATCH 359/374] chore: defualt rout

---
 frontend/webapp/utils/constants/urls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 1ba203710..ad7dad9eb 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -3,7 +3,7 @@ const IS_PRODUCTION = ENV === 'production';
 
 // Define base URLs depending on the environment
 const LOCAL_API_BASE = 'http://localhost:8085';
-const PRODUCTION_GQL_API_BASE = '/graphql';
+const PRODUCTION_GQL_API_BASE = undefined;
 const PRODUCTION_API_BASE = '/';
 const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_GQL_API_BASE : `${LOCAL_API_BASE}/graphql`;
 

From 3e130ef300e40d3c8ea06d7d542ab18a7bdf572f Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 19:01:14 +0300
Subject: [PATCH 360/374] chore: change origin

---
 frontend/webapp/utils/constants/urls.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index ad7dad9eb..4d0a3adc8 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -1,9 +1,10 @@
+// "use client"
 const ENV = process.env.NODE_ENV;
 const IS_PRODUCTION = ENV === 'production';
 
 // Define base URLs depending on the environment
 const LOCAL_API_BASE = 'http://localhost:8085';
-const PRODUCTION_GQL_API_BASE = undefined;
+const PRODUCTION_GQL_API_BASE = `${window.location.origin}/graphql`;
 const PRODUCTION_API_BASE = '/';
 const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_GQL_API_BASE : `${LOCAL_API_BASE}/graphql`;
 

From 493eeb42a8143b622c298d4bb168da94c054b8d2 Mon Sep 17 00:00:00 2001
From: alonkeyval <alon@odigos.io>
Date: Mon, 11 Nov 2024 19:04:05 +0300
Subject: [PATCH 361/374] chore" use client

---
 frontend/webapp/utils/constants/urls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 4d0a3adc8..ec5b4ff07 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -1,4 +1,4 @@
-// "use client"
+'use client';
 const ENV = process.env.NODE_ENV;
 const IS_PRODUCTION = ENV === 'production';
 

From 17bd6f4fe9473590a64c41b0dfafe0f33763703f Mon Sep 17 00:00:00 2001
From: alonbraymok <alonbraymok007@gmail.com>
Date: Mon, 11 Nov 2024 20:57:19 +0300
Subject: [PATCH 362/374] chore: wip

---
 frontend/webapp/utils/constants/urls.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index ec5b4ff07..a10482190 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -19,3 +19,4 @@ export const DOCS_LINK = 'https://docs.odigos.io';
 
 // Export modules
 export { API };
+//

From 5220cca59f568a31abc0ff8e65569503fa691f52 Mon Sep 17 00:00:00 2001
From: alonbraymo <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 09:56:50 +0300
Subject: [PATCH 363/374] chore: wip

---
 frontend/webapp/utils/constants/urls.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index a10482190..ec5b4ff07 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -19,4 +19,3 @@ export const DOCS_LINK = 'https://docs.odigos.io';
 
 // Export modules
 export { API };
-//

From 0de537e9b7e1a20610b288046aadc3b2b7d617ff Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 11:00:59 +0300
Subject: [PATCH 364/374] chore: check if window is define

---
 frontend/webapp/utils/constants/urls.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index ec5b4ff07..a57e38289 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -2,16 +2,15 @@
 const ENV = process.env.NODE_ENV;
 const IS_PRODUCTION = ENV === 'production';
 
-// Define base URLs depending on the environment
+// Define base URLs depending on the environment and rendering context
 const LOCAL_API_BASE = 'http://localhost:8085';
-const PRODUCTION_GQL_API_BASE = `${window.location.origin}/graphql`;
-const PRODUCTION_API_BASE = '/';
+const PRODUCTION_GQL_API_BASE = IS_PRODUCTION && typeof window !== 'undefined' ? `${window.location.origin}/graphql` : '/graphql';
 const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_GQL_API_BASE : `${LOCAL_API_BASE}/graphql`;
 
 // Define endpoints based on the base URL
 const API = {
   BASE_URL: API_BASE_URL,
-  EVENTS: `${IS_PRODUCTION ? PRODUCTION_API_BASE : LOCAL_API_BASE}/api/events`,
+  EVENTS: `${IS_PRODUCTION ? '/' : LOCAL_API_BASE}/api/events`,
 };
 
 // Centralize external links

From 289a5869e578b526669dc0f2adf868e769292e40 Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 11:04:42 +0300
Subject: [PATCH 365/374] chore: change local gql

---
 frontend/webapp/utils/constants/urls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index a57e38289..8820dd6e8 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -4,7 +4,7 @@ const IS_PRODUCTION = ENV === 'production';
 
 // Define base URLs depending on the environment and rendering context
 const LOCAL_API_BASE = 'http://localhost:8085';
-const PRODUCTION_GQL_API_BASE = IS_PRODUCTION && typeof window !== 'undefined' ? `${window.location.origin}/graphql` : '/graphql';
+const PRODUCTION_GQL_API_BASE = IS_PRODUCTION && typeof window !== 'undefined' ? `${window.location.origin}/graphql` : `${LOCAL_API_BASE}/graphql`;
 const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_GQL_API_BASE : `${LOCAL_API_BASE}/graphql`;
 
 // Define endpoints based on the base URL

From 4e5b199d67f3366417b2b735d051a74e560aa7a5 Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 11:30:54 +0300
Subject: [PATCH 366/374] chore: wip

---
 frontend/webapp/app/(overview)/overview/page.tsx            | 6 +++++-
 .../containers/main/overview/overview-data-flow/index.tsx   | 2 +-
 frontend/webapp/hooks/config/useConfig.ts                   | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/webapp/app/(overview)/overview/page.tsx b/frontend/webapp/app/(overview)/overview/page.tsx
index a2227ccd0..678d41714 100644
--- a/frontend/webapp/app/(overview)/overview/page.tsx
+++ b/frontend/webapp/app/(overview)/overview/page.tsx
@@ -1,6 +1,10 @@
 'use client';
 import React from 'react';
-import { OverviewDataFlowContainer } from '@/containers';
+import dynamic from 'next/dynamic';
+
+const OverviewDataFlowContainer = dynamic(() => import('@/containers/main/overview/overview-data-flow'), {
+  ssr: false,
+});
 
 export default function MainPage() {
   return (
diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
index ef747659a..f39968694 100644
--- a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -24,7 +24,7 @@ export const OverviewDataFlowWrapper = styled.div`
 const NODE_WIDTH = 255;
 const NODE_HEIGHT = 80;
 
-export function OverviewDataFlowContainer() {
+export default function OverviewDataFlowContainer() {
   const { metrics } = useMetrics();
   const { sources } = useSourceCRUD();
   const { actions } = useActionCRUD();
diff --git a/frontend/webapp/hooks/config/useConfig.ts b/frontend/webapp/hooks/config/useConfig.ts
index 4f262c758..101014933 100644
--- a/frontend/webapp/hooks/config/useConfig.ts
+++ b/frontend/webapp/hooks/config/useConfig.ts
@@ -1,3 +1,4 @@
+'use client';
 import { useEffect } from 'react';
 import { Config } from '@/types';
 import { GET_CONFIG } from '@/graphql';

From 65cf1186f0a56d3148d7abe3456d70c9a6e40013 Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 11:35:05 +0300
Subject: [PATCH 367/374] chore: remove fetch from home path

---
 frontend/webapp/app/page.tsx | 42 ++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index 3ca9149f7..922127c95 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -1,37 +1,37 @@
 'use client';
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { useConfig, useNotify } from '@/hooks';
+import { useNotify } from '@/hooks';
 import { ROUTES, CONFIG, NOTIFICATION } from '@/utils';
 import { FadeLoader } from '@/reuseable-components';
 
 export default function App() {
   const router = useRouter();
   const notify = useNotify();
-  const { data, error } = useConfig();
+  // const { data, error } = useConfig();
 
   useEffect(() => {
-    if (error) {
-      notify({
-        type: NOTIFICATION.ERROR,
-        title: error.name,
-        message: error.message,
-      });
+    router.push(ROUTES.OVERVIEW);
+    // if (error) {
+    //   notify({
+    //     type: NOTIFICATION.ERROR,
+    //     title: error.name,
+    //     message: error.message,
+    //   });
 
-      router.push(ROUTES.OVERVIEW);
-    } else if (data) {
-      const { installation } = data;
+    // } else if (data) {
+    //   const { installation } = data;
 
-      switch (installation) {
-        case CONFIG.NEW:
-        case CONFIG.APPS_SELECTED:
-          router.push(ROUTES.CHOOSE_SOURCES);
-          break;
-        case CONFIG.FINISHED:
-          router.push(ROUTES.OVERVIEW);
-      }
-    }
-  }, [data, error]);
+    //   switch (installation) {
+    //     case CONFIG.NEW:
+    //     case CONFIG.APPS_SELECTED:
+    //       router.push(ROUTES.CHOOSE_SOURCES);
+    //       break;
+    //     case CONFIG.FINISHED:
+    //       router.push(ROUTES.OVERVIEW);
+    //   }
+    // }
+  }, []);
 
   return <FadeLoader />;
 }

From 0372219fefef808d9981c3af93bbcabcbd6bbef9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 13:19:33 +0300
Subject: [PATCH 368/374] chore: use client on config

---
 frontend/webapp/app/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index 922127c95..018221145 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -1,14 +1,14 @@
 'use client';
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { useNotify } from '@/hooks';
+import { useNotify, useConfig } from '@/hooks';
 import { ROUTES, CONFIG, NOTIFICATION } from '@/utils';
 import { FadeLoader } from '@/reuseable-components';
 
 export default function App() {
   const router = useRouter();
   const notify = useNotify();
-  // const { data, error } = useConfig();
+  const { data, error } = useConfig();
 
   useEffect(() => {
     router.push(ROUTES.OVERVIEW);

From e5e02902cedc381eb0f480d7678760f6158d892e Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 13:31:30 +0300
Subject: [PATCH 369/374] chore: wip

---
 frontend/webapp/hooks/config/useConfig.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/webapp/hooks/config/useConfig.ts b/frontend/webapp/hooks/config/useConfig.ts
index 101014933..b5f8a44e1 100644
--- a/frontend/webapp/hooks/config/useConfig.ts
+++ b/frontend/webapp/hooks/config/useConfig.ts
@@ -5,7 +5,10 @@ import { GET_CONFIG } from '@/graphql';
 import { useSuspenseQuery } from '@apollo/client';
 
 export const useConfig = () => {
-  const { data, error } = useSuspenseQuery<Config>(GET_CONFIG);
+  const isServer = typeof window === 'undefined';
+  const { data, error } = useSuspenseQuery<Config>(GET_CONFIG, {
+    skip: isServer,
+  });
 
   useEffect(() => {
     if (error) {

From f37d3e61f0e6521ab9841d79a4d33e277e8d38aa Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 13:41:43 +0300
Subject: [PATCH 370/374] chore: revert config

---
 frontend/webapp/app/page.tsx             | 40 +++++++++++-------------
 frontend/webapp/utils/constants/urls.tsx |  1 +
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/webapp/app/page.tsx b/frontend/webapp/app/page.tsx
index 018221145..cc0cd3989 100644
--- a/frontend/webapp/app/page.tsx
+++ b/frontend/webapp/app/page.tsx
@@ -2,8 +2,8 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useNotify, useConfig } from '@/hooks';
-import { ROUTES, CONFIG, NOTIFICATION } from '@/utils';
 import { FadeLoader } from '@/reuseable-components';
+import { ROUTES, CONFIG, NOTIFICATION } from '@/utils';
 
 export default function App() {
   const router = useRouter();
@@ -11,27 +11,25 @@ export default function App() {
   const { data, error } = useConfig();
 
   useEffect(() => {
-    router.push(ROUTES.OVERVIEW);
-    // if (error) {
-    //   notify({
-    //     type: NOTIFICATION.ERROR,
-    //     title: error.name,
-    //     message: error.message,
-    //   });
-
-    // } else if (data) {
-    //   const { installation } = data;
+    if (error) {
+      notify({
+        type: NOTIFICATION.ERROR,
+        title: error.name,
+        message: error.message,
+      });
+    } else if (data) {
+      const { installation } = data;
 
-    //   switch (installation) {
-    //     case CONFIG.NEW:
-    //     case CONFIG.APPS_SELECTED:
-    //       router.push(ROUTES.CHOOSE_SOURCES);
-    //       break;
-    //     case CONFIG.FINISHED:
-    //       router.push(ROUTES.OVERVIEW);
-    //   }
-    // }
-  }, []);
+      switch (installation) {
+        case CONFIG.NEW:
+        case CONFIG.APPS_SELECTED:
+          router.push(ROUTES.CHOOSE_SOURCES);
+          break;
+        case CONFIG.FINISHED:
+          router.push(ROUTES.OVERVIEW);
+      }
+    }
+  }, [data]);
 
   return <FadeLoader />;
 }
diff --git a/frontend/webapp/utils/constants/urls.tsx b/frontend/webapp/utils/constants/urls.tsx
index 8820dd6e8..0e1312af4 100644
--- a/frontend/webapp/utils/constants/urls.tsx
+++ b/frontend/webapp/utils/constants/urls.tsx
@@ -4,6 +4,7 @@ const IS_PRODUCTION = ENV === 'production';
 
 // Define base URLs depending on the environment and rendering context
 const LOCAL_API_BASE = 'http://localhost:8085';
+//we use localhost:8085 as the base URL for server environment
 const PRODUCTION_GQL_API_BASE = IS_PRODUCTION && typeof window !== 'undefined' ? `${window.location.origin}/graphql` : `${LOCAL_API_BASE}/graphql`;
 const API_BASE_URL = IS_PRODUCTION ? PRODUCTION_GQL_API_BASE : `${LOCAL_API_BASE}/graphql`;
 

From 5dcb27c4c4f83922ece0687b9d3134b5e9b07d9a Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 14:14:00 +0300
Subject: [PATCH 371/374] chore: revert endpoint to main

---
 frontend/endpoints/applications.go |  47 ++++++++-----
 frontend/endpoints/config.go       |  10 +--
 frontend/endpoints/destinations.go |   3 +-
 frontend/endpoints/namespaces.go   |  40 -----------
 frontend/endpoints/sources.go      |   8 ++-
 frontend/graph/schema.resolvers.go |   3 +-
 frontend/services/config.go        | 103 +++++++++++++++++++++++++++++
 7 files changed, 149 insertions(+), 65 deletions(-)
 create mode 100644 frontend/services/config.go

diff --git a/frontend/endpoints/applications.go b/frontend/endpoints/applications.go
index 0a71c5a39..a29346cf0 100644
--- a/frontend/endpoints/applications.go
+++ b/frontend/endpoints/applications.go
@@ -31,10 +31,12 @@ const (
 )
 
 type GetApplicationItemInNamespace struct {
-	Name            string       `json:"name"`
-	Kind            WorkloadKind `json:"kind"`
-	Instances       int          `json:"instances"`
-	WorkloadLabeled *bool        `json:"workload_labels"`
+	Name                      string       `json:"name"`
+	Kind                      WorkloadKind `json:"kind"`
+	Instances                 int          `json:"instances"`
+	AppInstrumentationLabeled *bool        `json:"app_instrumentation_labeled"`
+	NsInstrumentationLabeled  *bool        `json:"ns_instrumentation_labeled"`
+	InstrumentationEffective  bool         `json:"instrumentation_effective"`
 }
 
 type GetApplicationItem struct {
@@ -111,6 +113,19 @@ func getApplicationsInNamespace(ctx context.Context, nsName string, nsInstrument
 	copy(items[len(deps):], ss)
 	copy(items[len(deps)+len(ss):], dss)
 
+	for i := range items {
+		item := &items[i]
+		// check if the entire namespace is instrumented
+		// as it affects the applications in the namespace
+		// which use this label to determine if they should be instrumented
+		nsInstrumentationLabeled := nsInstrumentedMap[item.namespace]
+		item.nsItem.NsInstrumentationLabeled = nsInstrumentationLabeled
+		appInstrumented := (item.nsItem.AppInstrumentationLabeled != nil && *item.nsItem.AppInstrumentationLabeled)
+		appInstrumentationInherited := item.nsItem.AppInstrumentationLabeled == nil
+		nsInstrumented := (nsInstrumentationLabeled != nil && *nsInstrumentationLabeled)
+		item.nsItem.InstrumentationEffective = appInstrumented || (appInstrumentationInherited && nsInstrumented)
+	}
+
 	return items, nil
 }
 
@@ -122,10 +137,10 @@ func getDeployments(namespace string, ctx context.Context) ([]GetApplicationItem
 			response = append(response, GetApplicationItem{
 				namespace: dep.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:            dep.Name,
-					Kind:            WorkloadKindDeployment,
-					Instances:       int(dep.Status.AvailableReplicas),
-					WorkloadLabeled: appInstrumentationLabeled,
+					Name:                      dep.Name,
+					Kind:                      WorkloadKindDeployment,
+					Instances:                 int(dep.Status.AvailableReplicas),
+					AppInstrumentationLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
@@ -147,10 +162,10 @@ func getStatefulSets(namespace string, ctx context.Context) ([]GetApplicationIte
 			response = append(response, GetApplicationItem{
 				namespace: ss.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:            ss.Name,
-					Kind:            WorkloadKindStatefulSet,
-					Instances:       int(ss.Status.ReadyReplicas),
-					WorkloadLabeled: appInstrumentationLabeled,
+					Name:                      ss.Name,
+					Kind:                      WorkloadKindStatefulSet,
+					Instances:                 int(ss.Status.ReadyReplicas),
+					AppInstrumentationLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
@@ -172,10 +187,10 @@ func getDaemonSets(namespace string, ctx context.Context) ([]GetApplicationItem,
 			response = append(response, GetApplicationItem{
 				namespace: ds.Namespace,
 				nsItem: GetApplicationItemInNamespace{
-					Name:            ds.Name,
-					Kind:            WorkloadKindDaemonSet,
-					Instances:       int(ds.Status.NumberReady),
-					WorkloadLabeled: appInstrumentationLabeled,
+					Name:                      ds.Name,
+					Kind:                      WorkloadKindDaemonSet,
+					Instances:                 int(ds.Status.NumberReady),
+					AppInstrumentationLabeled: appInstrumentationLabeled,
 				},
 			})
 		}
diff --git a/frontend/endpoints/config.go b/frontend/endpoints/config.go
index f98dcc73b..f58e77131 100644
--- a/frontend/endpoints/config.go
+++ b/frontend/endpoints/config.go
@@ -4,7 +4,9 @@ import (
 	"context"
 	"fmt"
 	"log"
+	"net/http"
 
+	"github.com/gin-gonic/gin"
 	"github.com/odigos-io/odigos/common/consts"
 	"github.com/odigos-io/odigos/frontend/kube"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
@@ -22,17 +24,17 @@ type GetConfigResponse struct {
 	Installation InstallationStatus `json:"installation"`
 }
 
-func GetConfig(c context.Context) GetConfigResponse {
+func GetConfig(c *gin.Context) {
 	var response GetConfigResponse
-	if !isSomethingLabeled(c) {
+	if !isSomethingLabeled(c.Request.Context()) {
 		response.Installation = NewInstallation
-	} else if !isDestinationChosen(c) {
+	} else if !isDestinationChosen(c.Request.Context()) {
 		response.Installation = AppsSelected
 	} else {
 		response.Installation = Finished
 	}
 
-	return response
+	c.JSON(http.StatusOK, response)
 }
 
 func isDestinationChosen(ctx context.Context) bool {
diff --git a/frontend/endpoints/destinations.go b/frontend/endpoints/destinations.go
index 0be797fb8..6eb900f2b 100644
--- a/frontend/endpoints/destinations.go
+++ b/frontend/endpoints/destinations.go
@@ -4,10 +4,9 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
-	"net/http"
-
 	"github.com/odigos-io/odigos/frontend/endpoints/destination_recognition"
 	"github.com/odigos-io/odigos/k8sutils/pkg/env"
+	"net/http"
 
 	"github.com/gin-gonic/gin"
 	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
diff --git a/frontend/endpoints/namespaces.go b/frontend/endpoints/namespaces.go
index 55184c9f7..9c88632b9 100644
--- a/frontend/endpoints/namespaces.go
+++ b/frontend/endpoints/namespaces.go
@@ -74,46 +74,6 @@ func GetNamespaces(c *gin.Context, odigosns string) {
 	c.JSON(http.StatusOK, response)
 }
 
-func GetK8SNamespaces(ctx context.Context, odigosns string) GetNamespacesResponse {
-
-	var (
-		relevantNameSpaces []v1.Namespace
-		appsPerNamespace   map[string]int
-	)
-
-	g, ctx := errgroup.WithContext(ctx)
-	g.Go(func() error {
-		var err error
-		relevantNameSpaces, err = getRelevantNameSpaces(ctx, odigosns)
-		return err
-	})
-
-	g.Go(func() error {
-		var err error
-		appsPerNamespace, err = CountAppsPerNamespace(ctx)
-		return err
-	})
-
-	if err := g.Wait(); err != nil {
-
-		return GetNamespacesResponse{}
-	}
-
-	var response GetNamespacesResponse
-	for _, namespace := range relevantNameSpaces {
-		// check if entire namespace is instrumented
-		selected := namespace.Labels[consts.OdigosInstrumentationLabel] == consts.InstrumentationEnabled
-
-		response.Namespaces = append(response.Namespaces, GetNamespaceItem{
-			Name:      namespace.Name,
-			Selected:  selected,
-			TotalApps: appsPerNamespace[namespace.Name],
-		})
-	}
-
-	return response
-}
-
 // getRelevantNameSpaces returns a list of namespaces that are relevant for instrumentation.
 // Taking into account the ignored namespaces from the OdigosConfiguration.
 func getRelevantNameSpaces(ctx context.Context, odigosns string) ([]v1.Namespace, error) {
diff --git a/frontend/endpoints/sources.go b/frontend/endpoints/sources.go
index e9f1d7fe3..3e2fc69bb 100644
--- a/frontend/endpoints/sources.go
+++ b/frontend/endpoints/sources.go
@@ -86,7 +86,13 @@ func GetSources(c *gin.Context, odigosns string) {
 	}
 
 	for _, item := range items {
-		println(item.nsItem.Name)
+		if item.nsItem.InstrumentationEffective {
+			id := common.SourceID{Namespace: item.namespace, Kind: workload.WorkloadKind(item.nsItem.Kind), Name: item.nsItem.Name}
+			effectiveInstrumentedSources[id] = ThinSource{
+				NumberOfRunningInstances: item.nsItem.Instances,
+				SourceID:                 id,
+			}
+		}
 	}
 
 	sourcesResult := []ThinSource{}
diff --git a/frontend/graph/schema.resolvers.go b/frontend/graph/schema.resolvers.go
index dbc465749..edcf25b4d 100644
--- a/frontend/graph/schema.resolvers.go
+++ b/frontend/graph/schema.resolvers.go
@@ -13,7 +13,6 @@ import (
 	"github.com/odigos-io/odigos/api/odigos/v1alpha1"
 	"github.com/odigos-io/odigos/common"
 	"github.com/odigos-io/odigos/common/consts"
-	"github.com/odigos-io/odigos/frontend/endpoints"
 	"github.com/odigos-io/odigos/frontend/graph/model"
 	"github.com/odigos-io/odigos/frontend/kube"
 	"github.com/odigos-io/odigos/frontend/services"
@@ -711,7 +710,7 @@ func (r *queryResolver) ComputePlatform(ctx context.Context) (*model.ComputePlat
 
 // Config is the resolver for the config field.
 func (r *queryResolver) Config(ctx context.Context) (*model.GetConfigResponse, error) {
-	response := endpoints.GetConfig(ctx)
+	response := services.GetConfig(ctx)
 
 	gqlResponse := &model.GetConfigResponse{
 		Installation: model.InstallationStatus(response.Installation),
diff --git a/frontend/services/config.go b/frontend/services/config.go
new file mode 100644
index 000000000..4a4bca6b2
--- /dev/null
+++ b/frontend/services/config.go
@@ -0,0 +1,103 @@
+package services
+
+import (
+	"context"
+	"fmt"
+	"log"
+
+	"github.com/odigos-io/odigos/common/consts"
+	"github.com/odigos-io/odigos/frontend/kube"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+)
+
+type InstallationStatus string
+
+const (
+	NewInstallation InstallationStatus = "NEW"
+	AppsSelected    InstallationStatus = "APPS_SELECTED"
+	Finished        InstallationStatus = "FINISHED"
+)
+
+type GetConfigResponse struct {
+	Installation InstallationStatus `json:"installation"`
+}
+
+func GetConfig(c context.Context) GetConfigResponse {
+	var response GetConfigResponse
+	if !isSomethingLabeled(c) {
+		response.Installation = NewInstallation
+	} else if !isDestinationChosen(c) {
+		response.Installation = AppsSelected
+	} else {
+		response.Installation = Finished
+	}
+	return response
+
+}
+
+func isDestinationChosen(ctx context.Context) bool {
+	dests, err := kube.DefaultClient.OdigosClient.Destinations("").List(ctx, metav1.ListOptions{})
+	if err != nil {
+		log.Printf("Error listing destinations: %v\n", err)
+		return false
+	}
+
+	return len(dests.Items) > 0
+}
+
+func isSomethingLabeled(ctx context.Context) bool {
+	labelSelector := fmt.Sprintf("%s=%s", consts.OdigosInstrumentationLabel, consts.InstrumentationEnabled)
+	ns, err := kube.DefaultClient.CoreV1().Namespaces().List(ctx, metav1.ListOptions{
+		LabelSelector: labelSelector,
+	})
+
+	if err != nil {
+		log.Printf("Error listing namespaces: %v\n", err)
+		return false
+	}
+
+	if len(ns.Items) > 0 {
+		return true
+	}
+
+	deps, err := kube.DefaultClient.AppsV1().Deployments("").List(ctx, metav1.ListOptions{
+		LabelSelector: labelSelector,
+	})
+
+	if err != nil {
+		log.Printf("Error listing deployments: %v\n", err)
+		return false
+	}
+
+	if len(deps.Items) > 0 {
+		return true
+	}
+
+	ss, err := kube.DefaultClient.AppsV1().StatefulSets("").List(ctx, metav1.ListOptions{
+		LabelSelector: labelSelector,
+	})
+
+	if err != nil {
+		log.Printf("Error listing statefulsets: %v\n", err)
+		return false
+	}
+
+	if len(ss.Items) > 0 {
+		return true
+	}
+
+	ds, err := kube.DefaultClient.AppsV1().DaemonSets("").List(ctx, metav1.ListOptions{
+		LabelSelector: labelSelector,
+	})
+
+	if err != nil {
+		log.Printf("Error listing daemonsets: %v\n", err)
+		return false
+	}
+
+	if len(ds.Items) > 0 {
+		return true
+	}
+
+	return false
+}

From cfb80a40d883fbd1ba7948de553b711049fc7237 Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 16:14:13 +0300
Subject: [PATCH 372/374] chore: delete frontend tests

---
 .../webapp/cypress/e2e/action-testing.cy.ts   | 22 ------------
 .../webapp/cypress/e2e/onboarding-flow.cy.ts  | 36 -------------------
 .../webapp/cypress/e2e/test-overview.cy.ts    | 19 ----------
 frontend/webapp/cypress/fixtures/example.json |  5 ---
 frontend/webapp/cypress/support/commands.ts   | 17 ---------
 frontend/webapp/cypress/support/e2e.ts        | 20 -----------
 6 files changed, 119 deletions(-)
 delete mode 100644 frontend/webapp/cypress/e2e/action-testing.cy.ts
 delete mode 100644 frontend/webapp/cypress/e2e/onboarding-flow.cy.ts
 delete mode 100644 frontend/webapp/cypress/e2e/test-overview.cy.ts
 delete mode 100644 frontend/webapp/cypress/fixtures/example.json
 delete mode 100644 frontend/webapp/cypress/support/commands.ts
 delete mode 100644 frontend/webapp/cypress/support/e2e.ts

diff --git a/frontend/webapp/cypress/e2e/action-testing.cy.ts b/frontend/webapp/cypress/e2e/action-testing.cy.ts
deleted file mode 100644
index e79b5d6a0..000000000
--- a/frontend/webapp/cypress/e2e/action-testing.cy.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-describe('Action Addition Testing', () => {
-    it('Add an Action', () => {
-        const baseUrl = Cypress.config('baseUrl');
-
-        cy.visit('/')
-        cy.get('[data-cy="menu-Actions"]').should('exist').click()
-        cy.url().should('eq', `${baseUrl}/actions`);
-
-        cy.get('[data-cy="add-action-button"]').should('exist').click()
-
-        cy.url().should('eq', `${baseUrl}/choose-action`);
-        cy.get('[data-cy="choose-action-ProbabilisticSampler"]').should('exist').click()
-
-        cy.url().should('eq', `${baseUrl}/create-action?type=ProbabilisticSampler`);
-        cy.get('[data-cy="create-action-input-name"]').type('action-test');
-        cy.get('[data-cy="create-action-sampling-percentage"]').type('0.5');
-        cy.get('[data-cy="create-action-onclick"]').click()
-
-        cy.url().should('eq', `${baseUrl}/actions`);
-        cy.get('[data-cy="actions-action-name"]').should('have.text', 'action-test ')
-    });
-});
\ No newline at end of file
diff --git a/frontend/webapp/cypress/e2e/onboarding-flow.cy.ts b/frontend/webapp/cypress/e2e/onboarding-flow.cy.ts
deleted file mode 100644
index bd04aa262..000000000
--- a/frontend/webapp/cypress/e2e/onboarding-flow.cy.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-describe('On Boarding Flow Tests', () => {
-
-        beforeEach(() => {
-            cy.visit('/')
-        });
-
-        it('Source page redirects correctly', () => {
-            cy.url().should('eq', `${Cypress.config('baseUrl')}/choose-sources`);
-        })
-
-        it('Run on the onboarding flow', () => {
-            // Select All Apps
-            cy.get('[data-cy="choose-source-coupon"]').should('exist').click()
-            cy.get('[data-cy="choose-source-frontend"]').should('exist').click()
-            cy.get('[data-cy="choose-source-inventory"]').should('exist').click()
-            cy.get('[data-cy="choose-source-membership"]').should('exist').click()
-            cy.get('[data-cy="choose-source-pricing"]').should('exist').click()
-
-            // Click Next Page
-            cy.get('[data-cy="choose-source-next-click"]').should('exist').click()
-
-            // Select Tempo
-            cy.url().should('eq', `${Cypress.config('baseUrl')}/choose-destination`);
-            cy.get('[data-cy="choose-destination-Tempo"]').should('exist').click()
-
-            // Fill Destination Form
-            cy.url().should('eq', `${Cypress.config('baseUrl')}/connect-destination?type=tempo`);
-            cy.get('[data-cy=create-destination-input-name]').type('e2e-tests');
-            cy.get('[data-cy=create-destination-input-TEMPO_URL]').type('e2e-tests-tempo.traces:4317');
-            cy.get('[data-cy="create-destination-create-click"]').should('exist').click()
-
-            cy.url().should('contain', `${Cypress.config('baseUrl')}/overview`);
-
-        });
-    }
-);
diff --git a/frontend/webapp/cypress/e2e/test-overview.cy.ts b/frontend/webapp/cypress/e2e/test-overview.cy.ts
deleted file mode 100644
index b8b738d6b..000000000
--- a/frontend/webapp/cypress/e2e/test-overview.cy.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-describe('Overview Page Tests', () => {
-
-    beforeEach(() => {
-        cy.visit('localhost:3000')
-    });
-
-    it('should overview page redirect correctly', () => {
-        cy.url().should('contain', `${Cypress.config('baseUrl')}/overview`);
-    })
-
-    it('should Sources exists', () => {
-        cy.assertDemoAppsExistOverviewPage()
-    })
-
-    it('should Destinations exists', () => {
-        cy.get('[data-id="destination-0"]').should('have.text', 'e2e-testsTempo')
-    })
-
-})
diff --git a/frontend/webapp/cypress/fixtures/example.json b/frontend/webapp/cypress/fixtures/example.json
deleted file mode 100644
index 02e425437..000000000
--- a/frontend/webapp/cypress/fixtures/example.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
diff --git a/frontend/webapp/cypress/support/commands.ts b/frontend/webapp/cypress/support/commands.ts
deleted file mode 100644
index 69173a209..000000000
--- a/frontend/webapp/cypress/support/commands.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export {};
-
-declare global {
-    namespace Cypress {
-        interface Chainable<Subject = any> {
-            assertDemoAppsExistOverviewPage(): Chainable<any>;
-        }
-    }
-}
-
-Cypress.Commands.add('assertDemoAppsExistOverviewPage', () => {
-    cy.get('[data-id="namespace-0"]').should('have.text', 'defaultcoupon')
-    cy.get('[data-id="namespace-1"]').should('have.text', 'defaultfrontend')
-    cy.get('[data-id="namespace-2"]').should('have.text', 'defaultinventory')
-    cy.get('[data-id="namespace-3"]').should('have.text', 'defaultmembership')
-    cy.get('[data-id="namespace-4"]').should('have.text', 'defaultpricing')
-});
\ No newline at end of file
diff --git a/frontend/webapp/cypress/support/e2e.ts b/frontend/webapp/cypress/support/e2e.ts
deleted file mode 100644
index f80f74f8e..000000000
--- a/frontend/webapp/cypress/support/e2e.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/e2e.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
\ No newline at end of file

From 0baabe00a27a0466c64b40805f00e650da904562 Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 16:32:55 +0300
Subject: [PATCH 373/374] wip: fixed conflit

---
 .../components/overview/filters/index.tsx     | 72 -------------------
 frontend/webapp/components/overview/index.tsx |  1 -
 .../choose-destination-menu/index.tsx         |  2 +-
 .../overview/overview-actions-menu/index.tsx  |  3 +-
 .../reuseable-components/dropdown/index.tsx   |  2 +-
 tests/common/ui-tests/run_cypress_tests.sh    | 32 ---------
 tests/common/ui-tests/start_odigos_ui.sh      | 21 ------
 tests/common/ui-tests/stop_ui_and_clean.sh    |  9 ---
 8 files changed, 4 insertions(+), 138 deletions(-)
 delete mode 100644 frontend/webapp/components/overview/filters/index.tsx
 delete mode 100755 tests/common/ui-tests/run_cypress_tests.sh
 delete mode 100755 tests/common/ui-tests/start_odigos_ui.sh
 delete mode 100755 tests/common/ui-tests/stop_ui_and_clean.sh

diff --git a/frontend/webapp/components/overview/filters/index.tsx b/frontend/webapp/components/overview/filters/index.tsx
deleted file mode 100644
index 87ee67674..000000000
--- a/frontend/webapp/components/overview/filters/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useRef, useState } from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import { DropdownOption } from '@/types';
-import { useOnClickOutside } from '@/hooks';
-import { Badge, Button, Dropdown, Text } from '@/reuseable-components';
-
-const RelativeContainer = styled.div`
-  position: relative;
-`;
-
-const ButtonText = styled(Text)`
-  font-family: ${({ theme }) => theme.font_family.primary};
-  font-size: 14px;
-  text-transform: none;
-  margin: 0 6px;
-`;
-
-const CardWrapper = styled.div`
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  z-index: 10;
-  background-color: ${({ theme }) => theme.colors.dropdown_bg};
-  border: ${({ theme }) => `1px solid ${theme.colors.border}`};
-  border-radius: 24px;
-  width: 360px;
-`;
-
-const CardContent = styled.div`
-  padding: 16px;
-  gap: 12px;
-  display: flex;
-  flex-direction: column;
-`;
-
-const Filters = () => {
-  const [focused, setFocused] = useState(false);
-  const toggleFocused = () => setFocused((prev) => !prev);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useOnClickOutside(ref, () => setFocused(false));
-
-  const [namespace, setNamespace] = useState<DropdownOption | undefined>(undefined);
-  const [filters, setFilters] = useState<DropdownOption[]>([]);
-  const [metrics, setMetrics] = useState<DropdownOption[]>([]);
-
-  return (
-    <RelativeContainer ref={ref}>
-      <Button variant='secondary' style={{ textDecoration: 'none' }} onClick={toggleFocused}>
-        <Image src='/icons/common/filter.svg' alt='filter' width={14} height={14} />
-        <ButtonText>Filters</ButtonText>
-        <Badge label={filters.length} filled />
-      </Button>
-
-      {focused && (
-        <CardWrapper>
-          <CardContent>
-            <Dropdown title='Namespace' placeholder='Select namespace' options={[]} value={namespace} onSelect={(val) => setNamespace(val)} required />
-
-            {/* TODO: make this a multi-select dropwdown (with internal checkboxes) */}
-            <Dropdown title='Type' placeholder='All' options={[]} value={filters[0]} onSelect={(val) => setFilters((prev) => prev)} required />
-            {/* TODO: make this a multi-select dropwdown (with internal checkboxes) */}
-            <Dropdown title='Metric' placeholder='All' options={[]} value={metrics[0]} onSelect={(val) => setMetrics((prev) => prev)} required />
-          </CardContent>
-        </CardWrapper>
-      )}
-    </RelativeContainer>
-  );
-};
-
-export { Filters };
diff --git a/frontend/webapp/components/overview/index.tsx b/frontend/webapp/components/overview/index.tsx
index 3e588e2c3..a84120e29 100644
--- a/frontend/webapp/components/overview/index.tsx
+++ b/frontend/webapp/components/overview/index.tsx
@@ -1,3 +1,2 @@
 export * from './add-entity';
-export * from './filters';
 export * from './monitors-legend';
diff --git a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
index 7a50d5e01..87d91e948 100644
--- a/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
+++ b/frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx
@@ -51,7 +51,7 @@ const DestinationFilterComponent: React.FC<FilterComponentProps> = ({ selectedTa
         <div>
           <Input placeholder='Search...' icon='/icons/common/search.svg' value={searchTerm} onChange={handleSearchChange} />
         </div>
-        <Dropdown options={DROPDOWN_OPTIONS} value={selectedTag} onSelect={onTagSelect} />
+        <Dropdown options={DROPDOWN_OPTIONS} value={selectedTag} onSelect={onTagSelect} onDeselect={function (option: DropdownOption): void {}} />
       </InputAndDropdownContainer>
 
       <MonitorButtonsContainer>
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
index 750e74ca2..80aa83e14 100644
--- a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Search } from './search';
+import { Filters } from './filters';
 import styled from 'styled-components';
 import { Divider, TabList } from '@/reuseable-components';
-import { AddEntity, Filters, MonitorsLegend } from '@/components';
+import { AddEntity, MonitorsLegend } from '@/components';
 
 const MenuContainer = styled.div`
   display: flex;
diff --git a/frontend/webapp/reuseable-components/dropdown/index.tsx b/frontend/webapp/reuseable-components/dropdown/index.tsx
index 76a1d9da7..54803800c 100644
--- a/frontend/webapp/reuseable-components/dropdown/index.tsx
+++ b/frontend/webapp/reuseable-components/dropdown/index.tsx
@@ -17,7 +17,7 @@ interface DropdownProps {
   tooltip?: string;
   placeholder?: string;
   options: DropdownOption[];
-  value: DropdownOption | undefined;
+  value: DropdownOption | DropdownOption[] | undefined;
   onSelect: (option: DropdownOption) => void;
   onDeselect: (option: DropdownOption) => void;
   isMulti?: boolean;
diff --git a/tests/common/ui-tests/run_cypress_tests.sh b/tests/common/ui-tests/run_cypress_tests.sh
deleted file mode 100755
index 2a3b02d21..000000000
--- a/tests/common/ui-tests/run_cypress_tests.sh
+++ /dev/null
@@ -1,32 +0,0 @@
-#!/bin/bash
-
-run_cypress_test() {
-  local spec=$1
-  npx cypress run --spec "$spec"
-  local status=$?
-
-  if [ $status -ne 0 ]; then
-    echo "Cypress tests failed"
-    # Stop the background process
-    cd ../../tests/e2e/fe-synthetic || exit
-    kill "$(cat odigos-ui.pid)"
-    rm odigos-ui.pid
-    rm ../../odigos-ui.log
-    exit $status
-  fi
-}
-
-echo "Running Cypress tests"
-cd ../../../frontend/webapp || exit
-
-if [ "$1" = "include-onboarding-flow" ]; then
-  run_cypress_test "cypress/e2e/onboarding-flow.cy.ts"
-fi
-
-run_cypress_test "cypress/e2e/test-overview.cy.ts"
-
-if [ "$2" = "action-addition" ]; then
-  run_cypress_test "cypress/e2e/action-testing.cy.ts"
-fi
-
-echo "Cypress tests passed"
diff --git a/tests/common/ui-tests/start_odigos_ui.sh b/tests/common/ui-tests/start_odigos_ui.sh
deleted file mode 100755
index e0767cba3..000000000
--- a/tests/common/ui-tests/start_odigos_ui.sh
+++ /dev/null
@@ -1,21 +0,0 @@
-#!/bin/bash
-
-# Ensure the script fails if any command fails
-set -e
-
-echo "Running odigos UI setup"
-../../../cli/odigos ui > ../../odigos-ui.log 2>&1 &
-
-# Capture the process ID
-echo $! > odigos-ui.pid
-
-# Check the status of the process
-sleep 5
-if ps -p $(cat odigos-ui.pid) > /dev/null
-then
-  echo "Odigos UI started successfully"
-else
-  echo "Failed to start Odigos UI"
-  cat ../../odigos-ui.log
-  exit 1
-fi
\ No newline at end of file
diff --git a/tests/common/ui-tests/stop_ui_and_clean.sh b/tests/common/ui-tests/stop_ui_and_clean.sh
deleted file mode 100755
index c848a3e14..000000000
--- a/tests/common/ui-tests/stop_ui_and_clean.sh
+++ /dev/null
@@ -1,9 +0,0 @@
-#!/bin/bash
-
-# Ensure the script fails if any command fails
-set -e
-
-echo "Killing Odigos UI process"
-kill "$(cat odigos-ui.pid)"
-rm odigos-ui.pid
-rm ../../odigos-ui.log
\ No newline at end of file

From 4a3283c97a720dfa0000ab88df82b7da7ddc48e9 Mon Sep 17 00:00:00 2001
From: alonkeyval <alonbraymok007@gmail.com>
Date: Tue, 12 Nov 2024 17:00:05 +0300
Subject: [PATCH 374/374] chore: push pr

---
 .../containers/main/overview/overview-actions-menu/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
index 80aa83e14..82b50f53a 100644
--- a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
+++ b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -12,7 +12,7 @@ const MenuContainer = styled.div`
   gap: 16px;
 `;
 
-// Aligns the "AddEntity" button to the right
+// Aligns the "AddEntity" button to the right.
 const PushToEnd = styled.div`
   margin-left: auto;
 `;