[GEN-1133] feat: configured destinations list"

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"`
-}

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
 }

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 {

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 />
     </>
   );

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 />
     </>
   );

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>
   );

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';

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' && (