[GEN-1700] Add other agent detection (#1727)

This pull request includes updates to the `DetectedContainers` component
in the `frontend/webapp` directory. The changes enhance the user
interface and improve the handling of detected languages and agents.

UI Enhancements:

*
[`frontend/webapp/components/overview/sources/detected-containers/index.tsx`](diffhunk://#diff-37ab49243eec9831d4ec80b017423789fb6db91dc1cd32bc4a5f591b7961b8ddR25-R27):
Added a border, border-radius, and padding to the `Container` styled
component.

Functionality Improvements:

*
[`frontend/webapp/components/overview/sources/detected-containers/index.tsx`](diffhunk://#diff-37ab49243eec9831d4ec80b017423789fb6db91dc1cd32bc4a5f591b7961b8ddR13):
Updated the `DetectedContainers` component to handle a new optional
`other_agent` property in the `Language` interface, and display a
warning message if another agent is detected.
[[1]](diffhunk://#diff-37ab49243eec9831d4ec80b017423789fb6db91dc1cd32bc4a5f591b7961b8ddR13)
[[2]](diffhunk://#diff-37ab49243eec9831d4ec80b017423789fb6db91dc1cd32bc4a5f591b7961b8ddL48-R80)

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

@@ -10,6 +10,7 @@ interface Language {
   container_name: string;
   language: string;
   runtime_version?: string;
+  other_agent?: { [name: string]: string };
 }
 
 interface DetectedContainersProps {
@@ -21,6 +22,9 @@ const Container = styled.div`
   margin-top: 16px;
   max-width: 36vw;
   margin-bottom: 24px;
+  border: 1px solid #374a5b;
+  border-radius: 8px;
+  padding: 24px;
 `;
 
 const List = styled.ul`
@@ -45,27 +49,35 @@ const DetectedContainers: React.FC<DetectedContainersProps> = ({
         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>
-        ))}
+        {languages.map((lang) => {
+          const isInstrumented =
+            lang.language !== 'ignore' &&
+            lang.language !== 'unknown' &&
+            !lang?.other_agent;
+          return (
+            <ListItem key={lang.container_name}>
+              <KeyvalText
+                color={!isInstrumented ? '#4caf50' : theme.text.light_grey}
+              >
+                {lang.container_name} (Language: {lang.language}
+                {lang?.runtime_version
+                  ? `, Runtime: ${lang.runtime_version}`
+                  : ''}
+                ){isInstrumented && !hasError && ' - Instrumented'}
+              </KeyvalText>
+              {lang.other_agent && lang.other_agent.name && (
+                <KeyvalText
+                  color={theme.colors.orange_brown}
+                  size={12}
+                  style={{ marginTop: 6 }}
+                >
+                  {`We detected another agent of ${lang.other_agent.name} that running in the container. Disable it
+                  to instrument this source.`}
+                </KeyvalText>
+              )}
+            </ListItem>
+          );
+        })}
       </List>
       <KeyvalText size={14} color={theme.text.light_grey}>
         Note: The system automatically instruments the containers it detects