extract prometheus graph group elements into their own component

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -3,6 +3,7 @@
   import _ from 'underscore';
   import statusCodes from '../../lib/utils/http_status';
   import MonitoringService from '../services/monitoring_service';
+  import GraphGroup from './graph_group.vue';
   import GraphRow from './graph_row.vue';
   import EmptyState from './empty_state.vue';
   import MonitoringStore from '../stores/monitoring_store';
@@ -31,6 +32,7 @@
     },
 
     components: {
+      GraphGroup,
       GraphRow,
       EmptyState,
     },
@@ -120,15 +122,11 @@
 
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs">
-    <div
+    <graph-group
       v-for="(groupData, index) in store.groups"
       :key="index"
-      class="panel panel-default prometheus-panel"
+      :name="groupData.group"
     >
-      <div class="panel-heading">
-        <h4>{{groupData.group}}</h4>
-      </div>
-      <div class="panel-body">
       <graph-row
         v-for="(row, index) in groupData.metrics"
         :key="index"
@@ -136,13 +134,12 @@
         :update-aspect-ratio="updateAspectRatio"
         :deployment-data="store.deploymentData"
       />
-      </div>
-    </div>
+    </graph-group>
   </div>
   <empty-state
+    v-else
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"
-    v-else
   />
 </template>

app/assets/javascripts/monitoring/components/graph_group.vue

+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="panel panel-default prometheus-panel">
+    <div class="panel-heading">
+      <h4>{{name}}</h4>
+    </div>
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>