remove prometheus panel styling on cluster monitoring page

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

@@ -26,6 +26,11 @@
         required: false,
         default: true,
       },
+      showPanels: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
       forceSmallGraph: {
         type: Boolean,
         required: false,
@@ -159,6 +164,7 @@
       v-for="(groupData, index) in store.groups"
       :key="index"
       :name="groupData.group"
+      :show-panels="showPanels"
     >
       <graph
         v-for="(graphData, index) in groupData.metrics"

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

@@ -5,12 +5,20 @@
         type: String,
         required: true,
       },
+      showPanels: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
   };
 </script>
 
 <template>
-  <div class="panel panel-default prometheus-panel">
+  <div
+    v-if="showPanels"
+    class="panel panel-default prometheus-panel"
+  >
     <div class="panel-heading">
       <h4>{{ name }}</h4>
     </div>
@@ -18,4 +26,10 @@
       <slot></slot>
     </div>
   </div>
+  <div
+    v-else
+    class="prometheus-graph-group"
+  >
+    <slot></slot>
+  </div>
 </template>

app/assets/javascripts/pages/projects/clusters/show/cluster_health.js

@@ -10,7 +10,12 @@ export default () => {
       el,
       render(createElement) {
         return createElement(Dashboard, {
-          props: { ...el.dataset, showLegend: false, forceSmallGraph: true },
+          props: {
+            ...el.dataset,
+            showLegend: false,
+            showPanels: false,
+            forceSmallGraph: true,
+          },
         });
       },
     });

app/assets/stylesheets/pages/environments.scss

@@ -383,13 +383,16 @@
   }
 }
 
-#cluster-health .prometheus-state {
-  .state-svg img {
-    max-height: 120px;
-  }
-  .state-description,
-  .state-button {
-    display: none;
+#cluster-health {
+  .prometheus-state {
+    .state-svg img {
+      max-height: 120px;
+    }
+
+    .state-description,
+    .state-button {
+      display: none;
+    }
   }
 }