From 147d55d24f602411fd3db5fa6aacbf12046efbc8 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 30 Aug 2017 00:16:23 -0500
Subject: extract prometheus graph group elements into their own component

---
 .../monitoring/components/dashboard.vue            | 29 ++++++++++------------
 1 file changed, 13 insertions(+), 16 deletions(-)

(limited to 'app/assets/javascripts/monitoring/components/dashboard.vue')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 04f86d0fd40..74244faa5d9 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/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,29 +122,24 @@
 
 <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"
-          :row-data="row"
-          :update-aspect-ratio="updateAspectRatio"
-          :deployment-data="store.deploymentData"
-        />
-      </div>
-    </div>
+      <graph-row
+        v-for="(row, index) in groupData.metrics"
+        :key="index"
+        :row-data="row"
+        :update-aspect-ratio="updateAspectRatio"
+        :deployment-data="store.deploymentData"
+      />
+    </graph-group>
   </div>
   <empty-state
+    v-else
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"
-    v-else
   />
 </template>
-- 
cgit v1.2.1