Improve request selector warning display

Show `(!)` as the warning glyph in the dropdown, rather than an
emoji. Add a popover to show the number of requests with warnings to the
warning emoji deside the selector.

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

 <script>
 import { glEmojiTag } from '~/emoji';
+import { n__ } from '~/locale';
+import { GlPopover } from '@gitlab/ui';
 
 export default {
+  components: {
+    GlPopover,
+  },
   props: {
     currentRequest: {
       type: Object,
@@ -18,8 +23,15 @@ export default {
     };
   },
   computed: {
-    anyRequestsWithWarnings() {
-      return this.requests.some(request => request.hasWarnings);
+    requestsWithWarnings() {
+      return this.requests.filter(request => request.hasWarnings);
+    },
+    warningMessage() {
+      return n__(
+        '%d request with warnings',
+        '%d requests with warnings',
+        this.requestsWithWarnings.length,
+      );
     },
   },
   watch: {
@@ -52,9 +64,16 @@ export default {
         class="qa-performance-bar-request"
       >
         {{ truncatedUrl(request.url) }}
-        <span v-if="request.hasWarnings" v-html="glEmojiTag('warning')"></span>
+        <span v-if="request.hasWarnings">(!)</span>
       </option>
     </select>
-    <span v-if="anyRequestsWithWarnings" v-html="glEmojiTag('warning')"></span>
+    <span v-if="requestsWithWarnings.length">
+      <span id="performance-bar-request-selector-warning" v-html="glEmojiTag('warning')"></span>
+      <gl-popover
+        target="performance-bar-request-selector-warning"
+        :content="warningMessage"
+        triggers="hover focus"
+      />
+    </span>
   </div>
 </template>

locale/gitlab.pot

@@ -150,6 +150,11 @@ msgid_plural "%d more comments"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%d request with warnings"
+msgid_plural "%d requests with warnings"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d second"
 msgid_plural "%d seconds"
 msgstr[0] ""

spec/frontend/performance_bar/components/request_selector_spec.js

@@ -55,10 +55,10 @@ describe('request selector', () => {
     expect(wrapper.find('span > gl-emoji').element.dataset.name).toEqual('warning');
   });
 
-  it('adds a warning icon to requests with warnings', () => {
-    const option = wrapper.find('[value="abc"]');
+  it('adds a warning glyph to requests with warnings', () => {
+    const requestValue = wrapper.find('[value="abc"]').text();
 
-    expect(option.find('gl-emoji').element.dataset.name).toEqual('warning');
-    expect(option.text()).toContain('discussions.json');
+    expect(requestValue).toContain('discussions.json');
+    expect(requestValue).toContain('(!)');
   });
 });