Merge branch 'jivl-utilize-gl-form-radio' into 'master'

Use gitlab-ui's GlFormRadioGroup component

Closes #9656

See merge request gitlab-org/gitlab-ee!9526

ee/app/assets/javascripts/custom_metrics/components/custom_metrics_form.vue

 <script>
-import { GlFormInput, GlButton, GlLink, GlFormGroup } from '@gitlab/ui';
+import { GlFormInput, GlButton, GlLink, GlFormGroup, GlFormRadioGroup } from '@gitlab/ui';
 import _ from 'underscore';
 import { __, s__ } from '~/locale';
 import csrf from '~/lib/utils/csrf';
@@ -15,6 +15,7 @@ export default {
     GlButton,
     GlLink,
     GlFormGroup,
+    GlFormRadioGroup,
     Icon,
   },
   props: {
@@ -50,6 +51,11 @@ export default {
     return {
       validCustomQuery: null,
       errorMessage: '',
+      formGroupOptions: [
+        { text: __('Business'), value: QueryTypes.business },
+        { text: __('Response'), value: QueryTypes.response },
+        { text: __('System'), value: QueryTypes.system },
+      ],
     };
   },
   computed: {
@@ -139,30 +145,13 @@ export default {
         label-for="prometheus_metric_group"
         label-class="label-bold"
       >
-        <input
-          id="group-business"
+        <gl-form-radio-group
+          id="metric-group"
           v-model="formData.group"
-          type="radio"
+          :options="formGroupOptions"
+          :checked="formData.group"
           name="prometheus_metric[group]"
-          :value="$options.QueryTypes.business"
         />
-        <label class="label-bold append-right-10" for="group-business">{{ __('Business') }}</label>
-        <input
-          id="group-response"
-          v-model="formData.group"
-          type="radio"
-          name="prometheus_metric[group]"
-          :value="$options.QueryTypes.response"
-        />
-        <label class="label-bold append-right-10" for="group-response">{{ __('Response') }}</label>
-        <input
-          id="group-system"
-          v-model="formData.group"
-          type="radio"
-          name="prometheus_metric[group]"
-          :value="$options.QueryTypes.system"
-        />
-        <label class="label-bold" for="group-system">{{ s__('Metrics|System') }}</label>
         <span class="form-text text-muted">{{ s__('Metrics|For grouping similar metrics') }}</span>
       </gl-form-group>
       <gl-form-group

locale/gitlab.pot

@@ -6184,9 +6184,6 @@ msgstr ""
 msgid "Metrics|Prometheus Query Documentation"
 msgstr ""
 
-msgid "Metrics|System"
-msgstr ""
-
 msgid "Metrics|There was an error fetching the environments data, please try again"
 msgstr ""
 
@@ -9399,6 +9396,9 @@ msgstr ""
 msgid "Sync information"
 msgstr ""
 
+msgid "System"
+msgstr ""
+
 msgid "System Hooks"
 msgstr ""