Fixes performance bar looking for a key in a undefined prop

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: '' };
   },

app/assets/javascripts/performance_bar/components/simple_metric.vue

 <script>
-export default {
+  export default {
     props: {
       currentRequest: {
         type: Object,
@@ -10,7 +10,20 @@ export default {
         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>

changelogs/unreleased/51569-performance-bar.yml

+---
+title: Fixes performance bar looking for a key in a undefined prop
+merge_request:
+author:
+type: fixed