Update EnvironmentCard to handle deployment errors and improve DonutIcon's percent safety checks

Author: rasika2012

console/workspaces/libs/api-client/src/hooks/traces.ts

@@ -380,7 +380,8 @@ export function useTraceList(
   // replacing the whole list. Falls back to a full refetch when the list is
   // empty (e.g. on initial load or after the user clears filters).
   useEffect(() => {
-    if (hasCustomRange || !scopeParams) return;
+    if (hasCustomRange || !scopeParams || options?.enabled === false
+      || !options?.enableAutoRefresh) return;
     const timer = setInterval(() => {
       if (traceListRef.current?.traces?.length) {
         loadNewerRef.current();
@@ -389,7 +390,7 @@ export function useTraceList(
       }
     }, 30000);
     return () => clearInterval(timer);
-  }, [hasCustomRange, scopeParams]);
+  }, [hasCustomRange, scopeParams, options?.enabled, options?.enableAutoRefresh]);
 
   return {
     ...queryResult,

console/workspaces/libs/shared-component/src/components/EnvironmentCard/EnvironmentCard.tsx

@@ -42,7 +42,6 @@ import {
   CheckCircle as CheckCircleRounded,
   Circle as CircleOutlined,
   Clock,
-  XCircle as ErrorOutlineRounded,
   Rocket as RocketLaunchOutlined,
   FlaskConical as TryOutlined,
   Workflow,
@@ -351,17 +350,28 @@ export const EnvironmentCard = (props: EnvironmentCardProps) => {
               icon={<CircularProgress size={32} />}
             />
           )}
-          {currentDiployment.status === DeploymentStatus.ERROR && (
-            <NoDataFound
-              disableBackground
-              message="Deployment Failed"
-              icon={
-                <ErrorOutlineRounded
-                  color={theme.vars?.palette?.error?.main}
-                  size={32}
-                />
+          {(currentDiployment.status === DeploymentStatus.ERROR ||
+            currentDiployment.status === DeploymentStatus.FAILED) && (
+            <Alert
+              severity="error"
+              sx={{ width: "100%" }}
+              action={
+                <Button
+                  component={Link}
+                  to={generatePath(
+                    absoluteRouteMap.children.org.children.projects.children
+                      .agents.children.deployment.path,
+                    { orgId, projectId, agentId }
+                  )}
+                  color="inherit"
+                  size="small"
+                >
+                  View Deployment
+                </Button>
               }
-            />
+            >
+              Deployment failed. Check the deployment page for more details.
+            </Alert>
           )}
           {currentDiployment.status === DeploymentStatus.ACTIVE && (
             <Box

console/workspaces/pages/metrics/src/Metrics.Component.tsx

@@ -65,7 +65,7 @@ export const MetricsComponent: React.FC = () => {
   const { data: deployments } = useListAgentDeployments(
     { orgName: orgId, projName: projectId, agentName: agentId },
   );
-  const isSuspended = deployments?.[envId ?? ""]?.status === "suspended";
+  const isSuspended = deployments === undefined ? undefined : deployments[envId ?? ""]?.status === "suspended";
 
   const metricsFilterRequest = useMemo(
     () => ({
@@ -85,7 +85,7 @@ export const MetricsComponent: React.FC = () => {
     { agentName: agentId, orgName: orgId, projName: projectId },
     metricsFilterRequest,
     {
-      enabled: !isSuspended && !!agentId && !!orgId && !!projectId && !!envId && (hasCustomRange || !!timeRange),
+      enabled: isSuspended === false && !!agentId && !!orgId && !!projectId && !!envId && (hasCustomRange || !!timeRange),
       enableAutoRefresh: !hasCustomRange,
       timeRange: hasCustomRange ? undefined : timeRange,
     }

console/workspaces/pages/overview/src/AgentOverview/DonutIcon.tsx

@@ -33,7 +33,8 @@ export const DonutIcon: React.FC<DonutIconProps> = ({ percent, color, size = 30
     const r = size * 0.43;
     const sw = size * 0.117;
     const circumference = 2 * Math.PI * r;
-    const offset = circumference * (1 - Math.min(percent, 100) / 100);
+    const safePercent = Number.isFinite(percent) ? Math.min(Math.max(percent, 0), 100) : 0;
+    const offset = circumference * (1 - safePercent / 100);
     return (
         <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: "block" }}>
             <circle cx={cx} cy={cx} r={r} fill="none"

console/workspaces/pages/overview/src/AgentOverview/ExternalAgentOverview.tsx

@@ -128,7 +128,6 @@ export const ExternalAgentOverview = () => {
           sortedEnvironmentList?.find((env: Environment) => env.id === selectedEnvironmentId)?.name
         }
         instrumentationUrl={agentInstrumentationUrl}
-        apiKey="ey***"
         componentUid={agent?.uuid}
         environmentUid={selectedEnvironmentId}
       />

console/workspaces/pages/overview/src/AgentOverview/InstrumentationDrawer.tsx

@@ -38,7 +38,7 @@ interface InstrumentationDrawerProps {
   agentName: string;
   environment?: string;
   instrumentationUrl: string;
-  apiKey: string;
+  apiKey?: string;
   componentUid?: string;
   environmentUid?: string;
 }