feat: add Status of Pod in summary

go.mod

@@ -63,7 +63,6 @@ require (
 	sigs.k8s.io/yaml v1.3.0
 )
 
-
 require (
 	github.com/KyleBanks/depth v1.2.1 // indirect
 	github.com/Masterminds/goutils v1.1.1 // indirect

pkg/core/entity/resource_group.go

@@ -49,6 +49,7 @@ type ResourceGroup struct {
 	Name        string            `json:"name,omitempty"        yaml:"name,omitempty"`
 	Labels      map[string]string `json:"labels,omitempty"      yaml:"labels,omitempty"`
 	Annotations map[string]string `json:"annotations,omitempty" yaml:"annotations,omitempty"`
+	Status      string            `json:"status,omitempty"      yaml:"status,omitempty"`
 }
 
 // Hash returns a unique string representation of the ResourceGroup that can be

pkg/core/manager/insight/summary.go

@@ -23,9 +23,17 @@ import (
 	"github.com/KusionStack/karpor/pkg/infra/multicluster"
 	corev1 "k8s.io/api/core/v1"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/apis/meta/v1/unstructured"
 	"k8s.io/apimachinery/pkg/runtime/schema"
 )
 
+const (
+	PodStatusRunning    = "Running"
+	PodStatusTerminated = "Terminated"
+	PodStatusUnknown    = "Unknown"
+	PodStatusWaiting    = "Waiting"
+)
+
 // GetDetailsForCluster returns ClusterDetail object for a given cluster
 func (i *InsightManager) GetDetailsForCluster(ctx context.Context, client *multicluster.MultiClusterClient, name string) (*ClusterDetail, error) {
 	serverVersion, err := client.ClientSet.DiscoveryClient.ServerVersion()
@@ -146,13 +154,19 @@ func (i *InsightManager) GetResourceSummary(ctx context.Context, client *multicl
 		return nil, err
 	}
 
+	Status := ""
+	if obj.GetKind() == "Pod" {
+		Status = GetPodStatus(obj.Object)
+	}
+
 	return &ResourceSummary{
 		Resource: entity.ResourceGroup{
 			Name:       obj.GetName(),
 			Namespace:  obj.GetNamespace(),
 			APIVersion: obj.GetAPIVersion(),
 			Cluster:    resourceGroup.Cluster,
 			Kind:       obj.GetKind(),
+			Status:     Status,
 		},
 		CreationTimestamp: obj.GetCreationTimestamp(),
 		ResourceVersion:   obj.GetResourceVersion(),
@@ -205,3 +219,40 @@ func (i *InsightManager) GetResourceGroupSummary(ctx context.Context, client *mu
 		CountByGVK:    topFiveCount,
 	}, nil
 }
+
+// GetPodStatus returns the status of a pod
+func GetPodStatus(obj map[string]any) string {
+	containerStatuses, found, err := unstructured.NestedSlice(obj, "status", "containerStatuses")
+	if err != nil || !found || len(containerStatuses) == 0 {
+		return PodStatusUnknown
+	}
+	firstContainer, ok := containerStatuses[0].(map[string]any)
+	if !ok {
+		return PodStatusUnknown
+	}
+	state, found := firstContainer["state"]
+	if !found {
+		return PodStatusUnknown
+	}
+	stateMap, ok := state.(map[string]interface{})
+	if !ok {
+		return PodStatusUnknown
+	}
+	if stateMap["running"] != nil {
+		return PodStatusRunning
+	}
+	if stateMap["waiting"] != nil {
+		waitMap, ok := stateMap["waiting"].(map[string]any)
+		if !ok {
+			return PodStatusWaiting
+		}
+		if reason, ok := waitMap["reason"].(string); ok && reason != "" {
+			return reason
+		}
+		return PodStatusWaiting
+	}
+	if stateMap["terminated"] != nil {
+		return PodStatusTerminated
+	}
+	return PodStatusUnknown
+}

ui/src/pages/insightDetail/components/summaryCard/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Progress, message, Tooltip } from 'antd'
+import { Progress, message, Tooltip, Tag } from 'antd'
 import { useLocation } from 'react-router-dom'
 import queryString from 'query-string'
 import { useTranslation } from 'react-i18next'
 import { getDataType } from '@/utils/tools'
 import dayjs from 'dayjs'
+import classNames from 'classnames'
 
 import styles from './styles.module.less'
 
@@ -201,7 +202,13 @@ const copyToClipboard = (text: string, t: any) => {
   })
 }
 
-const PopoverCard = ({ data }: any) => {
+const PopoverCard = ({
+  data,
+  style,
+}: {
+  data: any
+  style?: React.CSSProperties
+}) => {
   const { t } = useTranslation()
 
   if (!data) {
@@ -217,7 +224,17 @@ const PopoverCard = ({ data }: any) => {
   }
 
   return (
-    <div className={styles.value} onClick={handleClick}>
+    <div
+      onClick={handleClick}
+      style={{
+        ...style,
+        backgroundColor: style?.color || 'transparent',
+        color: style?.color ? 'white' : 'black',
+        padding: '2px 6px',
+        borderRadius: '4px',
+        display: 'inline-block',
+      }}
+    >
       {displayText}
     </div>
   )
@@ -322,6 +339,28 @@ const SummaryCard = ({ auditStat, summary }: SummaryCardProps) => {
               <div className={styles.label}>Name </div>
               <PopoverCard data={summary?.resource?.name} />
             </div>
+            {summary?.resource?.status && (
+              <div className={styles.item}>
+                <div className={styles.label}>Status </div>
+                <Tag
+                  className={classNames(styles.status, {
+                    [styles['status-running']]:
+                      summary?.resource?.status === 'Running',
+                    [styles['status-terminated']]:
+                      summary?.resource?.status === 'Terminated',
+                    [styles['status-unknown']]:
+                      summary?.resource?.status === 'Unknown',
+                    [styles['status-default']]: ![
+                      'Running',
+                      'Terminated',
+                      'Unknown',
+                    ].includes(summary?.resource?.status),
+                  })}
+                >
+                  {summary?.resource?.status}
+                </Tag>
+              </div>
+            )}
           </div>
         )}
         {type === 'kind' && (

ui/src/pages/insightDetail/components/summaryCard/styles.module.less

@@ -22,6 +22,60 @@
   }
 }
 
+
+.status {
+  min-width: 54px;
+  position: relative;
+  overflow: hidden;
+
+  &-running {
+    color: #52c41a;
+    background: #f6ffed;
+    border-color: #b7eb8f;
+
+    &:hover {
+      background: #f6ffed;
+    }
+  }
+
+  &-unknown {
+    background: #fff2e8;
+    border-color: #ffbb96;
+    color: #fa541c;
+
+    &:hover {
+      background: #fff7e6;
+    }
+  }
+  &-terminated {
+    background: #989897;
+    border-color: #353434;
+    color:  #353434;
+    &:hover {
+      background: #fff7e6;
+    }
+  }
+  &-unknown {
+    color: #ff4d4f;
+    background: #fff2f0;
+    border-color: #ffccc7;
+
+    &:hover {
+      background: #fff7e6;
+    }
+  }
+  &-default {
+    color: #faad14;
+    background: #fffbe6;
+    border-color: #ffe58f;
+
+    &:hover {
+      background: #fff7e6;
+    }
+  }
+}
+
+
 .summary {
   display: flex;
   padding: 0 20px;