Merge branch 'cluster-monitoring-changes-ce-backport' into 'master'

Cluster monitoring changes CE backport

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

6 files changed, 164 insertions, 59 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 031badc7026..8ca94ef3e2a 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -7,34 +7,82 @@
   import EmptyState from './empty_state.vue';
   import MonitoringStore from '../stores/monitoring_store';
   import eventHub from '../event_hub';
-  import { convertPermissionToBoolean } from '../../lib/utils/common_utils';
 
   export default {
-
     components: {
       Graph,
       GraphGroup,
       EmptyState,
     },
 
-    data() {
-      const metricsData = document.querySelector('#prometheus-graphs').dataset;
-      const store = new MonitoringStore();
+    props: {
+      hasMetrics: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      showLegend: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      showPanels: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      forceSmallGraph: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      documentationPath: {
+        type: String,
+        required: true,
+      },
+      settingsPath: {
+        type: String,
+        required: true,
+      },
+      clustersPath: {
+        type: String,
+        required: true,
+      },
+      tagsPath: {
+        type: String,
+        required: true,
+      },
+      projectPath: {
+        type: String,
+        required: true,
+      },
+      metricsEndpoint: {
+        type: String,
+        required: true,
+      },
+      deploymentEndpoint: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      emptyGettingStartedSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyLoadingSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyUnableToConnectSvgPath: {
+        type: String,
+        required: true,
+      },
+    },
 
+    data() {
       return {
-        store,
+        store: new MonitoringStore(),
         state: 'gettingStarted',
-        hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics),
-        documentationPath: metricsData.documentationPath,
-        settingsPath: metricsData.settingsPath,
-        clustersPath: metricsData.clustersPath,
-        tagsPath: metricsData.tagsPath,
-        projectPath: metricsData.projectPath,
-        metricsEndpoint: metricsData.additionalMetrics,
-        deploymentEndpoint: metricsData.deploymentEndpoint,
-        emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath,
-        emptyLoadingSvgPath: metricsData.emptyLoadingSvgPath,
-        emptyUnableToConnectSvgPath: metricsData.emptyUnableToConnectSvgPath,
         showEmptyState: true,
         updateAspectRatio: false,
         updatedAspectRatios: 0,
@@ -67,6 +115,7 @@
         window.addEventListener('resize', this.resizeThrottled, false);
       }
     },
+
     methods: {
       getGraphsData() {
         this.state = 'loading';
@@ -115,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"
@@ -125,6 +175,8 @@
         :deployment-data="store.deploymentData"
         :project-path="projectPath"
         :tags-path="tagsPath"
+        :show-legend="showLegend"
+        :small-graph="forceSmallGraph"
       />
     </graph-group>
   </div>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index ea5c24efaf9..9e67a6f2146 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -52,6 +52,16 @@
         type: String,
         required: true,
       },
+      showLegend: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      smallGraph: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {
@@ -130,7 +140,7 @@
         const breakpointSize = bp.getBreakpointSize();
         const query = this.graphData.queries[0];
         this.margin = measurements.large.margin;
-        if (breakpointSize === 'xs' || breakpointSize === 'sm') {
+        if (this.smallGraph || breakpointSize === 'xs' || breakpointSize === 'sm') {
           this.graphHeight = 300;
           this.margin = measurements.small.margin;
           this.measurements = measurements.small;
@@ -182,7 +192,9 @@
           this.graphHeightOffset,
         );
 
-        if (this.timeSeries.length > 3) {
+        if (!this.showLegend) {
+          this.baseGraphHeight -= 50;
+        } else if (this.timeSeries.length > 3) {
           this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
         }
 
@@ -255,6 +267,7 @@
           :time-series="timeSeries"
           :unit-of-display="unitOfDisplay"
           :current-data-index="currentDataIndex"
+          :show-legend-group="showLegend"
         />
         <svg
           class="graph-data"
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index c6e8d726ffc..3149397b61f 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -39,6 +39,11 @@
         type: Number,
         required: true,
       },
+      showLegendGroup: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     data() {
       return {
@@ -57,8 +62,9 @@
       },
 
       rectTransform() {
-        const yCoordinate = ((this.graphHeight - this.margin.top) / 2)
-                            + (this.yLabelWidth / 2) + 10 || 0;
+        const yCoordinate = (((this.graphHeight - this.margin.top)
+                            + this.measurements.axisLabelLineOffset) / 2)
+                            + (this.yLabelWidth / 2) || 0;
 
         return `translate(0, ${yCoordinate}) rotate(-90)`;
       },
@@ -166,39 +172,41 @@
     >
       Time
     </text>
-    <g
-      class="legend-group"
-      v-for="(series, index) in timeSeries"
-      :key="index"
-      :transform="translateLegendGroup(index)"
-    >
-      <line
-        :stroke="series.lineColor"
-        :stroke-width="measurements.legends.height"
-        :stroke-dasharray="strokeDashArray(series.lineStyle)"
-        :x1="measurements.legends.offsetX"
-        :x2="measurements.legends.offsetX + measurements.legends.width"
-        :y1="graphHeight - measurements.legends.offsetY"
-        :y2="graphHeight - measurements.legends.offsetY"
-      />
-      <text
-        v-if="timeSeries.length > 1"
-        class="legend-metric-title"
-        ref="legendTitleSvg"
-        x="38"
-        :y="graphHeight - 30"
-      >
-        {{ createSeriesString(index, series) }}
-      </text>
-      <text
-        v-else
-        class="legend-metric-title"
-        ref="legendTitleSvg"
-        x="38"
-        :y="graphHeight - 30"
+    <template v-if="showLegendGroup">
+      <g
+        class="legend-group"
+        v-for="(series, index) in timeSeries"
+        :key="index"
+        :transform="translateLegendGroup(index)"
       >
-        {{ legendTitle }} {{ formatMetricUsage(series) }}
-      </text>
-    </g>
+        <line
+          :stroke="series.lineColor"
+          :stroke-width="measurements.legends.height"
+          :stroke-dasharray="strokeDashArray(series.lineStyle)"
+          :x1="measurements.legends.offsetX"
+          :x2="measurements.legends.offsetX + measurements.legends.width"
+          :y1="graphHeight - measurements.legends.offsetY"
+          :y2="graphHeight - measurements.legends.offsetY"
+        />
+        <text
+          v-if="timeSeries.length > 1"
+          class="legend-metric-title"
+          ref="legendTitleSvg"
+          x="38"
+          :y="graphHeight - 30"
+        >
+          {{ createSeriesString(index, series) }}
+        </text>
+        <text
+          v-else
+          class="legend-metric-title"
+          ref="legendTitleSvg"
+          x="38"
+          :y="graphHeight - 30"
+        >
+          {{ legendTitle }} {{ formatMetricUsage(series) }}
+        </text>
+      </g>
+    </template>
   </g>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue
index 079351a69af..f71cf614552 100644
--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/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>
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index c3b0ef7e9ca..41270e015d4 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,7 +1,22 @@
 import Vue from 'vue';
+import { convertPermissionToBoolean } from '~/lib/utils/common_utils';
 import Dashboard from './components/dashboard.vue';
 
-export default () => new Vue({
-  el: '#prometheus-graphs',
-  render: createElement => createElement(Dashboard),
-});
+export default () => {
+  const el = document.getElementById('prometheus-graphs');
+
+  if (el && el.dataset) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      render(createElement) {
+        return createElement(Dashboard, {
+          props: {
+            ...el.dataset,
+            hasMetrics: convertPermissionToBoolean(el.dataset.hasMetrics),
+          },
+        });
+      },
+    });
+  }
+};
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index e230a06cd8c..6fcca36d2fa 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -40,6 +40,9 @@ export default class MonitoringService {
   }
 
   getDeploymentData() {
+    if (!this.deploymentEndpoint) {
+      return Promise.resolve([]);
+    }
     return backOffRequest(() => axios.get(this.deploymentEndpoint))
       .then(resp => resp.data)
       .then((response) => {