Merge branch 'add-monitoring-widgets' into 'master'

Adjust monitoring graphs to support widgets in EE

See merge request gitlab-org/gitlab-ce!18062

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

@@ -174,7 +174,10 @@ export default {
         :tags-path="tagsPath"
         :show-legend="showLegend"
         :small-graph="forceSmallGraph"
-      />
+      >
+        <!-- EE content -->
+        {{ null }}
+      </graph>
     </graph-group>
   </div>
   <empty-state

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

@@ -232,9 +232,14 @@ export default {
     @mouseover="showFlagContent = true"
     @mouseleave="showFlagContent = false"
   >
-    <h5 class="text-center graph-title">
-      {{ graphData.title }}
-    </h5>
+    <div class="prometheus-graph-header">
+      <h5 class="prometheus-graph-title">
+        {{ graphData.title }}
+      </h5>
+      <div class="prometheus-graph-widgets">
+        <slot></slot>
+      </div>
+    </div>
     <div
       class="prometheus-svg-container"
       :style="paddingBottomRootSvg"

app/assets/stylesheets/pages/environments.scss

@@ -23,7 +23,6 @@
     }
 
     .btn-group {
-
       > a {
         color: $gl-text-color-secondary;
       }
@@ -245,6 +244,7 @@
 .prometheus-graph {
   flex: 1 0 auto;
   min-width: 450px;
+  max-width: 100%;
   padding: $gl-padding / 2;
 
   h5 {
@@ -256,6 +256,17 @@
   }
 }
 
+.prometheus-graph-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: $gl-padding-8;
+
+  h5 {
+    margin: 0;
+  }
+}
+
 .prometheus-graph-cursor {
   position: absolute;
   background: $theme-gray-600;

spec/javascripts/monitoring/graph_spec.js

@@ -18,9 +18,7 @@ const createComponent = propsData => {
   }).$mount();
 };
 
-const convertedMetrics = convertDatesMultipleSeries(
-  singleRowMetricsMultipleSeries,
-);
+const convertedMetrics = convertDatesMultipleSeries(singleRowMetricsMultipleSeries);
 
 describe('Graph', () => {
   beforeEach(() => {
@@ -36,7 +34,7 @@ describe('Graph', () => {
       projectPath,
     });
 
-    expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(
+    expect(component.$el.querySelector('.prometheus-graph-title').innerText.trim()).toBe(
       component.graphData.title,
     );
   });
@@ -52,9 +50,7 @@ describe('Graph', () => {
       });
 
       const transformedHeight = `${component.graphHeight - 100}`;
-      expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(
-        -1,
-      );
+      expect(component.axisTransform.indexOf(transformedHeight)).not.toEqual(-1);
     });
 
     it('outerViewBox gets a width and height property based on the DOM size of the element', () => {