Merge branch '51569-performance-bar' into 'master'

Fixes performance bar looking for a key in a undefined prop

Closes #51569

See merge request gitlab-org/gitlab-ce!21887

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

@@ -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>

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