[GEN-1724]: create a component for source containers info (display in…

… drawer) (#1893)

This pull request includes significant updates to the frontend codebase,
focusing on improving the handling of programming language icons and
adding a new component for container details. The key changes involve
refactoring utility functions, updating component imports, and
introducing new styled components.

### Improvements to programming language handling:
*
[`frontend/webapp/containers/main/sources/source-drawer-container/index.tsx`](diffhunk://#diff-d4745da2f63be90cb1f7af8ea29fb2f37cf0a80f0f04a207b6fc9149855ca6d5L9-R12):
Replaced `getMainContainerLanguageLogo` with
`getProgrammingLanguageIcon` for better icon handling and added
`ContainerDetails` component to display detected containers.
[[1]](diffhunk://#diff-d4745da2f63be90cb1f7af8ea29fb2f37cf0a80f0f04a207b6fc9149855ca6d5L9-R12)
[[2]](diffhunk://#diff-d4745da2f63be90cb1f7af8ea29fb2f37cf0a80f0f04a207b6fc9149855ca6d5L105-R105)
[[3]](diffhunk://#diff-d4745da2f63be90cb1f7af8ea29fb2f37cf0a80f0f04a207b6fc9149855ca6d5R127)
*
[`frontend/webapp/utils/functions/icons.ts`](diffhunk://#diff-869883e9c9018f4ea6797d1fd860989852023765e868dcdee9fc50d72ad667c2R48-R68):
Added `getProgrammingLanguageIcon` function to fetch programming
language icons based on the language.

### New component for container details:
*
[`frontend/webapp/reuseable-components/container-details/index.tsx`](diffhunk://#diff-efc30c3f1c39f706aa0796927eac89e9cee190ea773e9e30d8d611cd30e81b4aR1-R123):
Introduced `ContainerDetails` component to display details of detected
containers, including their names, languages, and instrumentation
status.
*
[`frontend/webapp/reuseable-components/index.ts`](diffhunk://#diff-ab2c0f4825fb371714af6d7da808d6a9ed85b1b0d55135316364fb5500c1f1f8R36):
Exported `ContainerDetails` from reusable components.

### Refactoring and cleanup:
*
[`frontend/webapp/utils/constants/programming-languages.ts`](diffhunk://#diff-214a28f6c56d77642ca8d1a14cbb3bf89b14a33da8fdb4506c76a6533bfea0a4L3-L4):
Removed `LANGUAGES_LOGOS` and `LANGUAGES_COLORS` constants and the
`getMainContainerLanguageLogo` function, consolidating icon handling
into `getProgrammingLanguageIcon`.
[[1]](diffhunk://#diff-214a28f6c56d77642ca8d1a14cbb3bf89b14a33da8fdb4506c76a6533bfea0a4L3-L4)
[[2]](diffhunk://#diff-214a28f6c56d77642ca8d1a14cbb3bf89b14a33da8fdb4506c76a6533bfea0a4L22-R20)
[[3]](diffhunk://#diff-214a28f6c56d77642ca8d1a14cbb3bf89b14a33da8fdb4506c76a6533bfea0a4L70-L92)
*
[`frontend/webapp/types/sources.ts`](diffhunk://#diff-2e094683c1e156a4d3b841453d12f98342db28ae37230264200cf979063268b9L1-R6):
Updated `SourceContainer` type to use `WORKLOAD_PROGRAMMING_LANGUAGES`
enum.

These changes collectively enhance the frontend's ability to handle and
display programming language information more efficiently and add new
functionality for container details visualization.

frontend/graph/conversions.go

@@ -96,9 +96,16 @@ func instrumentedApplicationToActualSource(instrumentedApp v1alpha1.Instrumented
 	// Map the container runtime details
 	var containers []*gqlmodel.SourceContainerRuntimeDetails
 	for _, container := range instrumentedApp.Spec.RuntimeDetails {
+		var otherAgentName *string
+		if container.OtherAgent != nil {
+			otherAgentName = &container.OtherAgent.Name
+		}
+
 		containers = append(containers, &gqlmodel.SourceContainerRuntimeDetails{
-			ContainerName: container.ContainerName,
-			Language:      string(container.Language),
+			ContainerName:  container.ContainerName,
+			Language:       string(container.Language),
+			RuntimeVersion: container.RuntimeVersion,
+			OtherAgent:     otherAgentName,
 		})
 	}
 

frontend/graph/schema.graphqls

@@ -47,6 +47,8 @@ enum InstallationStatus {
 type SourceContainerRuntimeDetails {
   containerName: String!
   language: String!
+  runtimeVersion: String!
+  otherAgent: String
 }
 
 type InstrumentationOption {
@@ -203,11 +205,7 @@ type ComputePlatform {
   computePlatformType: ComputePlatformType!
   k8sActualNamespace(name: String!): K8sActualNamespace
   k8sActualNamespaces: [K8sActualNamespace]!
-  k8sActualSource(
-    name: String
-    namespace: String
-    kind: String
-  ): K8sActualSource
+  k8sActualSource(name: String, namespace: String, kind: String): K8sActualSource
   k8sActualSources: [K8sActualSource]!
   destinations: [Destination!]!
   actions: [IcaInstanceResponse!]!
@@ -456,29 +454,16 @@ type Query {
 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!
+  persistK8sSources(namespace: String!, sources: [PersistNamespaceSourceInput!]!): Boolean!
+  testConnectionForDestination(destination: DestinationInput!): TestConnectionResponse!
+  updateK8sActualSource(sourceId: K8sSourceId!, 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!
 
-  createInstrumentationRule(
-    instrumentationRule: InstrumentationRuleInput!
-  ): InstrumentationRule!
-  updateInstrumentationRule(
-    ruleId: ID!
-    instrumentationRule: InstrumentationRuleInput!
-  ): InstrumentationRule!
+  createInstrumentationRule(instrumentationRule: InstrumentationRuleInput!): InstrumentationRule!
+  updateInstrumentationRule(ruleId: ID!, instrumentationRule: InstrumentationRuleInput!): InstrumentationRule!
   deleteInstrumentationRule(ruleId: ID!): Boolean!
 }

frontend/webapp/containers/main/sources/source-drawer-container/index.tsx

@@ -6,10 +6,10 @@ import { useDrawerStore } from '@/store';
 import { CardDetails } from '@/components';
 import buildDrawerItem from './build-drawer-item';
 import { UpdateSourceBody } from '../update-source-body';
-import { ConditionDetails } from '@/reuseable-components';
 import OverviewDrawer from '../../overview/overview-drawer';
-import { ACTION, getMainContainerLanguageLogo } from '@/utils';
-import { OVERVIEW_ENTITY_TYPES, WorkloadId, type K8sActualSource } from '@/types';
+import { ConditionDetails, ContainerDetails } from '@/reuseable-components';
+import { ACTION, getMainContainerLanguage, getProgrammingLanguageIcon } from '@/utils';
+import { OVERVIEW_ENTITY_TYPES, type WorkloadId, type K8sActualSource } from '@/types';
 
 interface Props {}
 
@@ -102,7 +102,7 @@ export const SourceDrawer: React.FC<Props> = () => {
     <OverviewDrawer
       title={item.reportedName || item.name}
       titleTooltip='This attribute is used to identify the name of the service (service.name) that is generating telemetry data.'
-      imageUri={getMainContainerLanguageLogo(item)}
+      imageUri={getProgrammingLanguageIcon(getMainContainerLanguage(item))}
       isEdit={isEditing}
       isFormDirty={isFormDirty}
       onEdit={handleEdit}
@@ -124,6 +124,7 @@ export const SourceDrawer: React.FC<Props> = () => {
         <DataContainer>
           <ConditionDetails conditions={item.instrumentedApplicationDetails.conditions} />
           <CardDetails title='Source Details' data={cardData} />
+          <ContainerDetails containers={item.instrumentedApplicationDetails.containers} />
         </DataContainer>
       )}
     </OverviewDrawer>

frontend/webapp/graphql/queries/compute-platform.ts

@@ -13,6 +13,8 @@ export const GET_COMPUTE_PLATFORM = gql`
           containers {
             containerName
             language
+            runtimeVersion
+            otherAgent
           }
           conditions {
             type