From 5a83d4581548ada64f983ea031c1ef1779f61b06 Mon Sep 17 00:00:00 2001
From: alanwzliang <alanwzliang@tencent.com>
Date: Wed, 12 Aug 2026 16:46:14 +0800
Subject: [PATCH] fix(ui): harden AppCard against missing ingress and mixed
 metrics

Prevent pipeline page crashes when an app CR lacks addons or ingress.hosts,
and prefer usage tables when some pods (e.g. addons) lack resource percentages.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/components/apps/appstats.vue     |  2 +-
 client/src/components/apps/detail.vue       |  4 +--
 client/src/components/pipelines/appcard.vue | 34 ++++++++++++---------
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/client/src/components/apps/appstats.vue b/client/src/components/apps/appstats.vue
index 2bee4fdaa..116770c0e 100644
--- a/client/src/components/apps/appstats.vue
+++ b/client/src/components/apps/appstats.vue
@@ -14,7 +14,7 @@
                             <th>{{ $t('app.domains') }}</th>
                             <td>
                                 <ul style="list-style-type: none; padding: 0;">
-                                    <li v-for="host in appData.spec.ingress.hosts" :key="host.host">
+                                    <li v-for="host in appData.spec.ingress?.hosts" :key="host.host">
                                         <a :href="'https://' + host.host" target="_blank">{{ host.host }}</a> 
                                         <v-icon size="x-small" style="color: rgba(var(--v-theme-kubero), var(--v-high-emphasis-opacity));">mdi-open-in-new</v-icon>
                                     </li>
diff --git a/client/src/components/apps/detail.vue b/client/src/components/apps/detail.vue
index bbb3da7f6..535e3aa81 100644
--- a/client/src/components/apps/detail.vue
+++ b/client/src/components/apps/detail.vue
@@ -74,7 +74,7 @@
                 <Builds :pipeline="pipeline" :phase="phase" :app="app" :appData="appData" :pipelineData="pipelineData"/>
             </v-window-item>
             <v-window-item transition="false" reverse-transition="false" class="background">
-                <Metrics :pipeline="pipeline" :phase="phase" :app="app" :host="appData.spec.ingress.hosts[0].host"/>
+                <Metrics :pipeline="pipeline" :phase="phase" :app="app" :host="appData.spec.ingress?.hosts?.[0]?.host"/>
             </v-window-item>
             <v-window-item transition="false" reverse-transition="false" class="background">
                 <LogsTab :pipeline="pipeline" :phase="phase" :app="app" :deploymentstrategy="appData.spec.deploymentstrategy" :buildstrategy="appData.spec.buildstrategy"/>
@@ -177,7 +177,7 @@ export default defineComponent({
             });
         },
         ActionOpenApp() {
-            window.open(`https://${this.appData.spec.ingress.hosts[0].host}`, '_blank');
+            window.open(`https://${this.appData.spec.ingress?.hosts?.[0]?.host}`, '_blank');
         },
         ActionEditApp() {
             this.$router.push(`/pipeline/${this.pipeline}/${this.phase}/apps/${this.app}`);
diff --git a/client/src/components/pipelines/appcard.vue b/client/src/components/pipelines/appcard.vue
index 4c416947a..ba0e5ed4d 100644
--- a/client/src/components/pipelines/appcard.vue
+++ b/client/src/components/pipelines/appcard.vue
@@ -89,7 +89,7 @@
     </v-card-text>
     <v-divider></v-divider>
 
-    <span v-if="app.addons.length > 0">
+    <span v-if="app.addons?.length > 0">
     <v-card-text>
       <v-avatar
         rounded
@@ -134,7 +134,7 @@
         </v-btn>
         <v-btn
             title="Open App"
-            v-if="app.ingress.hosts.length > 0"
+            v-if="app.ingress?.hosts?.length > 0"
             color="deep-purple lighten-2"
             variant="text"
             :href="'//'+app.ingress?.hosts[0].host" target="_blank"
@@ -296,18 +296,24 @@ export default defineComponent({
         loadMetrics() {
             axios.get(`/api/metrics/resources/${this.pipeline}/${this.phase}/${this.app.name}`)
             .then(response => {
-                for (var i = 0; i < response.data.length; i++) {
-                    if (response.data[i].cpu.percentage != null && response.data[i].memory.percentage != null) {
-                        this.metricsDisplay = "bars";
-                    }
-                    if (
-                      (response.data[i].cpu.percentage == null && response.data[i].memory.percentage == null) &&
-                      (response.data[i].cpu.usage != null && response.data[i].memory.usage != null)
-                     ){
-                        this.metricsDisplay = "table";
-                    }
-                }
-                this.metrics = response.data;
+                const metrics = Array.isArray(response.data) ? response.data : [];
+                const allMetricsHavePercentages = metrics.length > 0 && metrics.every(
+                  (metric: Metric) =>
+                    metric.cpu.percentage != null &&
+                    metric.memory.percentage != null
+                );
+                const hasUsageMetrics = metrics.some(
+                  (metric: Metric) =>
+                    metric.cpu.usage != null &&
+                    metric.memory.usage != null
+                );
+
+                this.metricsDisplay = allMetricsHavePercentages
+                  ? "bars"
+                  : hasUsageMetrics
+                    ? "table"
+                    : "dots";
+                this.metrics = metrics;
             })
             .catch(error => {
                 console.log(error);