Only pass warnings to RequestWarning

It doesn't need the whole of the request details as it only uses the
warnings.

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

@@ -42,6 +42,9 @@ export default {
     detailsList() {
       return this.metricDetails.details;
     },
+    warnings() {
+      return this.metricDetails.warnings || [];
+    },
     htmlId() {
       if (this.currentRequest) {
         return `performance-bar-warning-${this.currentRequest.id}-${this.metric}`;
@@ -115,6 +118,6 @@ export default {
       <div slot="footer"></div>
     </gl-modal>
     {{ title }}
-    <request-warning :html-id="htmlId" :details="metricDetails" />
+    <request-warning :html-id="htmlId" :warnings="warnings" />
   </div>
 </template>

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

@@ -11,21 +11,17 @@ export default {
       type: String,
       required: true,
     },
-    details: {
-      type: Object,
+    warnings: {
+      type: Array,
       required: true,
     },
   },
   computed: {
-    warnings() {
-      const {
-        details: { warnings },
-      } = this;
-
-      return warnings && warnings.length ? warnings : null;
+    hasWarnings() {
+      return this.warnings && this.warnings.length;
     },
     warningMessage() {
-      if (!this.warnings) {
+      if (!this.hasWarnings) {
         return '';
       }
 
@@ -38,7 +34,7 @@ export default {
 };
 </script>
 <template>
-  <span v-if="warnings">
+  <span v-if="hasWarnings">
     <span :id="htmlId" v-html="glEmojiTag('warning')"></span>
     <gl-popover :target="htmlId" :content="warningMessage" triggers="hover focus" />
   </span>

spec/frontend/performance_bar/components/request_warning_spec.js

@@ -8,9 +8,7 @@ describe('request warning', () => {
     const wrapper = shallowMount(RequestWarning, {
       propsData: {
         htmlId,
-        details: {
-          warnings: ['gitaly calls: 30 over 10', 'gitaly duration: 1500 over 1000'],
-        },
+        warnings: ['gitaly calls: 30 over 10', 'gitaly duration: 1500 over 1000'],
       },
     });
 
@@ -24,9 +22,7 @@ describe('request warning', () => {
     const wrapper = shallowMount(RequestWarning, {
       propsData: {
         htmlId,
-        details: {
-          warnings: [],
-        },
+        warnings: [],
       },
     });