[GEN-1445 ] feat: main container bug (#1540)

fixed the main container bug and added a visual display about containers
detected by Odigos and instrumentation details

frontend/webapp/components/overview/sources/detected-containers/index.tsx

@@ -0,0 +1,77 @@
+// DetectedContainers.tsx
+import { KeyvalText } from '@/design.system';
+import theme from '@/styles/palette';
+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[];
+}
+
+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,
+}) => {
+  // Find the first language that is not ignored
+
+  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}`
+                : ''}
+              )
+              <b>
+                {lang.language !== 'ignore' &&
+                  lang.language !== 'unknown' &&
+                  ' - Instrumented'}
+              </b>
+            </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 };

frontend/webapp/components/overview/sources/index.ts

@@ -1 +1,2 @@
 export * from './managed.sources.table';
+export * from './detected-containers';

frontend/webapp/components/overview/sources/managed.sources.table/sources.table.row.tsx

@@ -91,6 +91,21 @@ const LOGO_STYLE: React.CSSProperties = {
   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,
@@ -108,8 +123,7 @@ export function SourcesTableRow({
 }) {
   const workloadProgrammingLanguage = getMainContainerLanguage(item);
 
-  const containerName =
-    item?.instrumented_application_details?.languages?.[0].container_name || '';
+  const containerName = getFirstNonIgnoredContainerName(item) || '';
 
   function getLanguageStatus() {
     if (workloadProgrammingLanguage === 'processing') {

frontend/webapp/containers/main/sources/edit.source/index.tsx

@@ -4,7 +4,7 @@ import theme from '@/styles/palette';
 import { useKeyDown } from '@/hooks';
 import { ManagedSource } from '@/types';
 import { useMutation } from 'react-query';
-import { DeleteSource } from '@/components/overview';
+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';
@@ -109,6 +109,11 @@ export function EditSourceForm() {
       {currentSource && <ManageSourceHeader source={currentSource} />}
       <div style={{ display: 'flex', gap: 60 }}>
         <div>
+          <DetectedContainers
+            languages={
+              currentSource.instrumented_application_details.languages || []
+            }
+          />
           <FieldWrapper>
             <KeyvalInput
               label={OVERVIEW.REPORTED_NAME}

frontend/webapp/types/sources.ts

@@ -26,6 +26,7 @@ export interface ManagedSource {
     languages: Array<{
       container_name: string;
       language: string;
+      runtime_version?: string;
     }> | null;
   };
 }