Fixes performance bar looking for a key in a undefined prop

3 files changed, 31 insertions, 13 deletions

diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 7836d4f3b09..1522e2227e4 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -42,7 +42,7 @@ export default {
       keys: ['feature', 'request'],
     },
   ],
-  simpleMetrics: ['redis', 'sidekiq'],
+  simpleMetrics: ['redis'],
   data() {
     return { currentRequestId: '' };
   },
diff --git a/app/assets/javascripts/performance_bar/components/simple_metric.vue b/app/assets/javascripts/performance_bar/components/simple_metric.vue
index b654bc66249..760ea8fe1e6 100644
--- a/app/assets/javascripts/performance_bar/components/simple_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/simple_metric.vue
@@ -1,16 +1,29 @@
 <script>
-export default {
-  props: {
-    currentRequest: {
-      type: Object,
-      required: true,
+  export default {
+    props: {
+      currentRequest: {
+        type: Object,
+        required: true,
+      },
+      metric: {
+        type: String,
+        required: true,
+      },
     },
-    metric: {
-      type: String,
-      required: true,
+    computed: {
+      duration() {
+        return (
+          this.currentRequest.details[this.metric] &&
+          this.currentRequest.details[this.metric].duration
+        );
+      },
+      calls() {
+        return (
+          this.currentRequest.details[this.metric] && this.currentRequest.details[this.metric].calls
+        );
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <div
@@ -21,9 +34,9 @@ export default {
       v-if="currentRequest.details"
       class="bold"
     >
-      {{ currentRequest.details[metric].duration }}
+      {{ duration }}
       /
-      {{ currentRequest.details[metric].calls }}
+      {{ calls }}
     </span>
     {{ metric }}
   </div>
diff --git a/changelogs/unreleased/51569-performance-bar.yml b/changelogs/unreleased/51569-performance-bar.yml
new file mode 100644
index 00000000000..ab62e7d3b3e
--- /dev/null
+++ b/changelogs/unreleased/51569-performance-bar.yml
@@ -0,0 +1,5 @@
+---
+title: Fixes performance bar looking for a key in a undefined prop
+merge_request:
+author:
+type: fixed