Deployment detail page hangs indefinitely when API call fails

[horze]

Description

When visiting a deployment detail page (e.g., /dashboard/deployments/detail/:namespace/:name?cluster=:cluster), if the underlying Kubernetes proxy API call fails for any reason (cluster not found, network timeout, auth error, etc.), the page shows a perpetual loading spinner and never renders content.

This affects ALL workload detail pages (deployments, statefulsets, daemonsets, pods, cronjobs, jobs).

Steps to Reproduce

1. Deploy KubePi v2.0.0 (Docker or K8s)
2. Login and navigate to: /kubepi/dashboard/deployments/detail/any-ns/any-deploy?cluster=non-existent-cluster
3. Observe the page shows a loading spinner forever

Root Cause

The getDetail() method in web/dashboard/src/business/workloads/deployments/detail/index.vue calls getWorkLoadByName() without a .catch() handler:

getDetail() {
  this.clusterName = this.$route.query.cluster
  this.loading = true
  getWorkLoadByName(this.clusterName, "deployments", this.namespace, this.name).then((res) => {
    this.form = res
    // ...
    this.loading = false  // ← only set on success
  })
  // ❌ Missing .catch() → when promise rejects, loading stays true forever
},

When the API call fails:

1. getWorkLoadByName() returns a rejected Promise
2. The .then() callback never executes
3. this.loading remains true indefinitely
4. v-loading="loading" on <layout-content> shows an infinite loading mask
5. Page appears to "hang"

Affected Files

The same pattern likely exists in all workload detail components:

• web/dashboard/src/business/workloads/deployments/detail/index.vue
• web/dashboard/src/business/workloads/statefulsets/detail/index.vue
• web/dashboard/src/business/workloads/daemonsets/detail/index.vue
• web/dashboard/src/business/workloads/pods/detail/index.vue
• web/dashboard/src/business/workloads/cronjobs/detail/index.vue

Suggested Fix

Add .catch() handler to reset loading state on error:

getWorkLoadByName(this.clusterName, "deployments", this.namespace, this.name).then((res) => {
  this.form = res
  // ... existing selector building logic ...
  this.loading = false
}).catch(() => {
  this.loading = false
})

Optionally, show an error message to the user (e.g., via this.$message.error()).

Environment

• KubePi version: v2.0.0 (Docker image: 1panel/kubepi:latest)
• Browser: Any
• Deployment: Docker / Kubernetes

[wanghe-fit2cloud]

感谢反馈，我们会在后续版本中优化上述功能，进一步提升使用体验。