fix: prevent workload detail loading loop

web/dashboard/src/components/detail/detail-basic.vue

@@ -20,7 +20,7 @@
           </div>
         </td>
       </tr>
-      <tr v-if="hasPodContainers()">
+      <tr v-if="containers.length > 0">
         <td>{{ $t("business.pod.image") }}</td>
         <td colspan="4">
           <div v-for="(item,index) in containers" v-bind:key="index" class="myTag">
@@ -83,10 +83,23 @@ export default {
     item: Object,
     yamlShow: Boolean,
   },
+  computed: {
+    containers() {
+      let podSpec
+      if (this.item.spec?.template?.spec) {
+        podSpec = this.item.spec.template.spec
+      } else if (this.item.spec?.jobTemplate?.spec?.template?.spec) {
+        podSpec = this.item.spec.jobTemplate.spec.template.spec
+      }
+      if (!podSpec?.containers) {
+        return []
+      }
+      return [...(podSpec.initContainers || []), ...podSpec.containers]
+    },
+  },
   data() {
     return {
       show: false,
-      containers: [],
       limitRanges: [],
       resourceQuotas: [],
       cluster: ""
@@ -97,23 +110,6 @@ export default {
       this.show = !this.show
       this.$emit("update:yamlShow", this.show)
     },
-    hasPodContainers() {
-      let podSpec
-      if (this.item.spec?.template?.spec) {
-        podSpec = this.item.spec.template.spec
-      } else if (this.item.spec?.jobTemplate?.spec?.template?.spec) {
-        podSpec = this.item.spec.jobTemplate.spec.template.spec
-      }
-      if (!podSpec || !podSpec.containers) {
-        return false
-      }
-      this.containers = []
-      if (podSpec.initContainers) {
-        this.containers = this.containers.concat(podSpec.initContainers)
-      }
-      this.containers = this.containers.concat(podSpec.containers)
-      return true
-    },
     listResources() {
       listResourceQuotaByNamespace(this.cluster,this.item.metadata.name).then(res => {
         this.resourceQuotas = res.items

web/dashboard/src/components/detail/detail-pods.vue

@@ -114,14 +114,16 @@ export default {
         this.paginationConfig.currentPage = 1
       }
       if (!checkPermissions({ scope: "namespace", apiGroup: "", resource: "pods", verb: "list" })) {
+        this.loading = false
         return
       }
       listPodsWithNsSelector(this.cluster, this.namespace, this.selector, this.fieldSelector).then((res) => {
         this.pods = res.items
-        this.loading = false
         listPodMetrics(this.cluster, this.namespace, this.selector).then(res => {
           this.podUsage = res.items
         })
+      }).finally(() => {
+        this.loading = false
       })
     },
     openDetail (row) {

web/dashboard/src/components/detail/detail-replicasets.vue

@@ -100,15 +100,15 @@ export default {
       if (resetPage) {
         this.paginationConfig.currentPage = 1
       }
-      if (!checkPermissions({ scope: "namespace", apiGroup: "", resource: "pods", verb: "list" })) {
+      if (!checkPermissions({ scope: "namespace", apiGroup: "apps", resource: "replicasets", verb: "list" })) {
+        this.loading = false
         return
       }
       listNsReplicaSetsWorkload(this.cluster, this.namespace, this.selector, this.fieldSelector).then((res) => {
-        this.loading = false
         res.items.sort((a, b) => b.metadata.annotations["deployment.kubernetes.io/revision"] - a.metadata.annotations["deployment.kubernetes.io/revision"])
-        for (var i = 0; i < res.items.length; i++) {
-          this.pods.push(res.items[i])
-        }
+        this.pods = res.items
+      }).finally(() => {
+        this.loading = false
       })
     },
     OptionRollback(row) {
@@ -147,4 +147,4 @@ export default {
   width: 28px;
   height: 28px;
 }
-</style>
+</style>