[TASK-922] feat: sources condition

frontend/endpoints/sources.go

@@ -17,7 +17,8 @@ type SourceLanguage struct {
 }
 
 type InstrumentedApplicationDetails struct {
-	Languages []SourceLanguage `json:"languages,omitempty"`
+	Languages  []SourceLanguage   `json:"languages,omitempty"`
+	Conditions []metav1.Condition `json:"conditions,omitempty"`
 }
 
 // this object contains only part of the source fields. It is used to display the sources in the frontend
@@ -244,8 +245,18 @@ func k8sInstrumentedAppToThinSource(app *v1alpha1.InstrumentedApplication) ThinS
 	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{},
+		Languages:  []SourceLanguage{},
+		Conditions: conditions,
 	}
 	for _, language := range app.Spec.RuntimeDetails {
 		source.IaDetails.Languages = append(source.IaDetails.Languages, SourceLanguage{

frontend/webapp/assets/icons/app/index.tsx

@@ -9,6 +9,10 @@ import Check from './check.svg';
 import Copy from './copy.svg';
 import Copied from './copied.svg';
 import YamlIcon from './yaml.svg';
+
+import GreenCheck from './green-check.svg';
+import RedError from './red-error.svg';
+
 export {
   RightArrow,
   Charge,
@@ -21,4 +25,6 @@ export {
   Copy,
   Copied,
   YamlIcon,
+  GreenCheck,
+  RedError,
 };

frontend/webapp/components/common/conditions.check.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { GreenCheck, RedError } from '@/assets/icons/app';
+import styled from 'styled-components';
+import { KeyvalText } from '@/design.system';
+
+const Container = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
+const StatusIcon = styled.div`
+  font-size: 24px;
+  cursor: pointer;
+`;
+
+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 (
+    <Container>
+      <StatusIcon>{allHealthy ? <GreenCheck /> : <RedError />}</StatusIcon>
+      <Tooltip>
+        <KeyvalText
+          size={12}
+        >{`${healthyCount}/${totalCount} checks OK`}</KeyvalText>
+      </Tooltip>
+    </Container>
+  );
+};

frontend/webapp/components/common/index.ts

@@ -1 +1,2 @@
 export * from './multi.checkbox';
+export * from './conditions.check';

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

@@ -13,9 +13,9 @@ import { KIND_COLORS } from '@/styles/global';
 import {
   LANGUAGES_COLORS,
   LANGUAGES_LOGOS,
-  WORKLOAD_PROGRAMMING_LANGUAGES,
   getMainContainerLanguage,
 } from '@/utils';
+import { ConditionCheck } from '@/components/common';
 
 const StyledTr = styled.tr`
   &:hover {
@@ -109,6 +109,7 @@ export function SourcesTableRow({
 
   const containerName =
     item?.instrumented_application_details.languages?.[0].container_name || '';
+
   return (
     <StyledTr key={item.kind}>
       <StyledMainTd isFirstRow={index === 0}>
@@ -131,8 +132,12 @@ export function SourcesTableRow({
               <KeyvalText weight={600}>
                 {`${item.name || 'Source'} `}
               </KeyvalText>
-              <KeyvalText weight={600}>
-                {`${item.reported_name || ''} `}
+              <KeyvalText color={theme.text.light_grey} size={14}>
+                <ConditionCheck
+                  conditions={
+                    item?.instrumented_application_details?.conditions || []
+                  }
+                />
               </KeyvalText>
             </NameContainer>
             <FooterContainer>

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

@@ -1,35 +1,36 @@
 'use client';
+import React, { useEffect, useState } from 'react';
+import theme from '@/styles/palette';
+import { ManagedSource } from '@/types';
+import { useMutation } from 'react-query';
+import { Back } from '@/assets/icons/overview';
+import { DeleteSource } from '@/components/overview';
+import { useKeyDown, useNotification } from '@/hooks';
+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,
-  LANGUAGES_LOGOS,
-  NOTIFICATION,
-  OVERVIEW,
   ROUTES,
-  SETUP,
+  OVERVIEW,
+  NOTIFICATION,
+  LANGUAGES_LOGOS,
   getMainContainerLanguage,
 } from '@/utils';
-import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
-import { useMutation } from 'react-query';
 import {
-  ManageSourcePageContainer,
-  BackButtonWrapper,
   FieldWrapper,
+  BackButtonWrapper,
+  ManageSourcePageContainer,
   SaveSourceButtonWrapper,
 } from './styled';
-import { Back } from '@/assets/icons/overview';
 import {
   KeyvalButton,
   KeyvalInput,
   KeyvalLoader,
   KeyvalText,
+  Conditions,
 } from '@/design.system';
-import { DeleteSource } from '@/components/overview';
-import { deleteSource, getSource, patchSources } from '@/services/sources';
-import { useKeyDown, useNotification } from '@/hooks';
-import theme from '@/styles/palette';
-import { ManagedSource } from '@/types/sources';
 
 const NAME = 'name';
 const KIND = 'kind';
@@ -114,32 +115,42 @@ export function EditSourceForm() {
         <KeyvalText size={14}>{SETUP.BACK}</KeyvalText>
       </BackButtonWrapper>
       {currentSource && <ManageSourceHeader source={currentSource} />}
-      <FieldWrapper>
-        <KeyvalInput
-          label={OVERVIEW.REPORTED_NAME}
-          value={inputValue}
-          onChange={(e) => setInputValue(e)}
+      <div style={{ display: 'flex', gap: 60 }}>
+        <div>
+          <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?.instrumented_application_details.languages ||
+                    undefined
+                )
+              ]
+            }
+          />
+        </div>
+        <Conditions
+          conditions={
+            currentSource.instrumented_application_details?.conditions
+          }
         />
-      </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?.instrumented_application_details.languages ||
-                undefined
-            )
-          ]
-        }
-      />
+      </div>
+
       <Notification />
     </ManageSourcePageContainer>
   );

frontend/webapp/design.system/condition.alert/index.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import styled from 'styled-components';
+import theme from '@/styles/palette';
+import { Condition } from '@/types';
+import { KeyvalText } from '../text/text';
+import { GreenCheck, RedError } from '@/assets/icons/app';
+
+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">
+        <GreenCheck style={{ width: 10, height: 10 }} />
+      </InnerIconWrapper>
+    </IconWrapper>
+  );
+
+  const getErrorIcon = () => (
+    <IconWrapper bgColor="#f8524952">
+      <InnerIconWrapper borderColor="#f85249">
+        <RedError
+          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}>
+                    {condition.last_transition_time}
+                  </KeyvalText>
+                </ConditionDetails>
+              </div>
+            </div>
+            {index !== conditions.length - 1 && <ConditionSeparator />}
+          </ConditionItem>
+        ))}
+      </ConditionAlertContainer>
+    </div>
+  ) : null;
+};

frontend/webapp/design.system/index.tsx

@@ -33,3 +33,4 @@ 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';