From 50106474e8ebd4272be67a8eee5a6332c94f1d9d Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 21 Feb 2018 16:41:28 -0600
Subject: add prometheus cluster health monitoring empty state

---
 app/assets/javascripts/clusters/components/applications.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index 1325a268214..27136c7289f 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -117,7 +117,10 @@
 </script>
 
 <template>
-  <section class="settings no-animate expanded">
+  <section
+    id="cluster-applications"
+    class="settings no-animate expanded"
+  >
     <div class="settings-header">
       <h4>
         {{ s__('ClusterIntegration|Applications') }}
-- 
cgit v1.2.1


From 711d9c0b541f120612dac4317b78e54272a80429 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 21 Feb 2018 23:55:40 -0600
Subject: make deployments endpoint optional

---
 app/assets/javascripts/monitoring/services/monitoring_service.js | 3 +++
 1 file changed, 3 insertions(+)

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) => {
-- 
cgit v1.2.1


From 76b65bb2cd9d9fe082df448eea669f9cf0cbe066 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 22 Feb 2018 00:07:58 -0600
Subject: use proper dependency injection for monitoring dashboard component

---
 .../monitoring/components/dashboard.vue            | 68 ++++++++++++++++------
 .../javascripts/monitoring/monitoring_bundle.js    | 19 ++++--
 app/views/projects/environments/metrics.html.haml  |  5 +-
 3 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 031badc7026..3b94b3e8769 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -10,31 +10,64 @@
   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: String,
+        required: true,
+      },
+      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,
@@ -60,13 +93,14 @@
 
     mounted() {
       this.resizeThrottled = _.throttle(this.resize, 600);
-      if (!this.hasMetrics) {
+      if (!convertPermissionToBoolean(this.hasMetrics)) {
         this.state = 'gettingStarted';
       } else {
         this.getGraphsData();
         window.addEventListener('resize', this.resizeThrottled, false);
       }
     },
+
     methods: {
       getGraphsData() {
         this.state = 'loading';
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index c3b0ef7e9ca..a9b608e4433 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,7 +1,18 @@
 import Vue from 'vue';
 import Dashboard from './components/dashboard.vue';
 
-export default () => new Vue({
-  el: '#prometheus-graphs',
-  render: createElement => createElement(Dashboard),
-});
+export default () => {
+  const el = document.querySelector('#prometheus-graphs');
+
+  if (el && el.dataset) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el,
+      render(createElement) {
+        return createElement(Dashboard, {
+          props: el.dataset,
+        });
+      },
+    });
+  }
+};
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index 9d9759ebc5f..c151b5acdf7 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/app/views/projects/environments/metrics.html.haml
@@ -15,7 +15,8 @@
     "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started.svg'),
     "empty-loading-svg-path": image_path('illustrations/monitoring/loading.svg'),
     "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect.svg'),
-    "additional-metrics": additional_metrics_project_environment_path(@project, @environment, format: :json),
+    "metrics-endpoint": additional_metrics_project_environment_path(@project, @environment, format: :json),
+    "deployment-endpoint": project_environment_deployments_path(@project, @environment, format: :json),
     "project-path": project_path(@project),
     "tags-path": project_tags_path(@project),
-    "has-metrics": "#{@environment.has_metrics?}", deployment_endpoint: project_environment_deployments_path(@project, @environment, format: :json) } }
+    "has-metrics": "#{@environment.has_metrics?}" } }
-- 
cgit v1.2.1


From 2e66da48c5c802d9eed9921a951f56c719273dc9 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 22 Feb 2018 00:25:13 -0600
Subject: add option to hide the graph legend

---
 app/assets/javascripts/monitoring/components/dashboard.vue |  6 ++++++
 app/assets/javascripts/monitoring/components/graph.vue     | 10 +++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 3b94b3e8769..3544dd96e3e 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -21,6 +21,11 @@
         type: String,
         required: true,
       },
+      showLegend: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
       documentationPath: {
         type: String,
         required: true,
@@ -159,6 +164,7 @@
         :deployment-data="store.deploymentData"
         :project-path="projectPath"
         :tags-path="tagsPath"
+        :show-legend="showLegend"
       />
     </graph-group>
   </div>
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index ea5c24efaf9..2aab8e0afe7 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -52,6 +52,11 @@
         type: String,
         required: true,
       },
+      showLegend: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
 
     data() {
@@ -182,7 +187,9 @@
           this.graphHeightOffset,
         );
 
-        if (this.timeSeries.length > 3) {
+        if (!this.showLegend) {
+          this.baseGraphHeight -= 60;
+        } else if (this.timeSeries.length > 3) {
           this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
         }
 
@@ -246,6 +253,7 @@
           transform="translate(70, 20)"
         />
         <graph-legend
+          v-if="showLegend"
           :graph-width="graphWidth"
           :graph-height="graphHeight"
           :margin="margin"
-- 
cgit v1.2.1


From 1e2830446f5da4a55db0b8493b3d7c20575d5bff Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 22 Feb 2018 01:26:13 -0600
Subject: hide legend without hiding the axis labels

---
 .../javascripts/monitoring/components/graph.vue    |  4 +-
 .../monitoring/components/graph/legend.vue         | 73 ++++++++++++----------
 2 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 2aab8e0afe7..30236d51d30 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -188,7 +188,7 @@
         );
 
         if (!this.showLegend) {
-          this.baseGraphHeight -= 60;
+          this.baseGraphHeight -= 50;
         } else if (this.timeSeries.length > 3) {
           this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
         }
@@ -253,7 +253,6 @@
           transform="translate(70, 20)"
         />
         <graph-legend
-          v-if="showLegend"
           :graph-width="graphWidth"
           :graph-height="graphHeight"
           :margin="margin"
@@ -263,6 +262,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..bdd00a61d85 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 {
@@ -166,39 +171,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>
-- 
cgit v1.2.1


From ab9ad2db4fbc40a81bb927de10a10aa7f32bba2a Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 22 Feb 2018 01:57:18 -0600
Subject: fix spacing around axis label text in small breakpoints

---
 app/assets/javascripts/monitoring/components/graph/legend.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index bdd00a61d85..3149397b61f 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -62,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)`;
       },
-- 
cgit v1.2.1


From 44b8348d58247897467603ea7adb5c83cdd937be Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 22 Feb 2018 01:57:50 -0600
Subject: add ability to override graph size measurements

---
 app/assets/javascripts/monitoring/components/dashboard.vue | 6 ++++++
 app/assets/javascripts/monitoring/components/graph.vue     | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 3544dd96e3e..f1d61a1c360 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -26,6 +26,11 @@
         required: false,
         default: true,
       },
+      forceSmallGraph: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       documentationPath: {
         type: String,
         required: true,
@@ -165,6 +170,7 @@
         :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 30236d51d30..9e67a6f2146 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -57,6 +57,11 @@
         required: false,
         default: true,
       },
+      smallGraph: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {
@@ -135,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;
-- 
cgit v1.2.1


From 999ea368b7fe8dbec16bea7ff8fee3e7c6d93332 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 22 Feb 2018 02:06:35 -0600
Subject: lighten axis tick text

---
 app/assets/stylesheets/pages/environments.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 884665d35c7..58700661142 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -369,7 +369,8 @@
       }
 
       > text {
-        font-size: 12px;
+        fill: $theme-gray-600;
+        font-size: 10px;
       }
     }
 
-- 
cgit v1.2.1


From 283183d8881e41508c8d70c18e275e2890fe8ec3 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 22 Feb 2018 02:55:29 -0600
Subject: remove prometheus panel styling on cluster monitoring page

---
 .../javascripts/monitoring/components/dashboard.vue      |  6 ++++++
 .../javascripts/monitoring/components/graph_group.vue    | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index f1d61a1c360..04374d2e1db 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/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"
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>
-- 
cgit v1.2.1


From ad51ab319722ed78fc7f73fe841998af52027a0d Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Mon, 5 Mar 2018 17:39:56 -0600
Subject: fix karma tests

---
 spec/javascripts/monitoring/dashboard_spec.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index eb8f6bbe50d..79924a5f3a8 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -8,6 +8,20 @@ describe('Dashboard', () => {
   const fixtureName = 'environments/metrics/metrics.html.raw';
   let DashboardComponent;
   let component;
+  const propsData = {
+    hasMetrics: 'false',
+    documentationPath: '/path/to/docs',
+    settingsPath: '/path/to/settings',
+    clustersPath: '/path/to/clusters',
+    tagsPath: '/path/to/tags',
+    projectPath: '/path/to/project',
+    metricsEndpoint: mockApiEndpoint,
+    deploymentEndpoint: '/endpoint/deployments',
+    emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
+    emptyLoadingSvgPath: '/path/to/loading.svg',
+    emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
+  };
+
   preloadFixtures(fixtureName);
 
   beforeEach(() => {
@@ -19,6 +33,7 @@ describe('Dashboard', () => {
     it('shows a getting started empty state when no metrics are present', () => {
       component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
+        propsData,
       });
 
       component.$mount();
@@ -30,7 +45,6 @@ describe('Dashboard', () => {
   describe('requests information to the server', () => {
     let mock;
     beforeEach(() => {
-      document.querySelector('#prometheus-graphs').setAttribute('data-has-metrics', 'true');
       mock = new MockAdapter(axios);
       mock.onGet(mockApiEndpoint).reply(200, {
         metricsGroupsAPIResponse,
@@ -44,6 +58,7 @@ describe('Dashboard', () => {
     it('shows up a loading state', (done) => {
       component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: 'true' },
       });
       component.$mount();
       Vue.nextTick(() => {
-- 
cgit v1.2.1


From de382f5c01866cdeedff21048cbca4b3043a3057 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 6 Mar 2018 01:25:19 -0600
Subject: prefer getElementById

---
 app/assets/javascripts/monitoring/monitoring_bundle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index a9b608e4433..f881a3954b9 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Dashboard from './components/dashboard.vue';
 
 export default () => {
-  const el = document.querySelector('#prometheus-graphs');
+  const el = document.getElementById('prometheus-graphs');
 
   if (el && el.dataset) {
     // eslint-disable-next-line no-new
-- 
cgit v1.2.1


From 2859ddde48709afe32c66726ac811b8b717f3798 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 6 Mar 2018 03:38:42 -0600
Subject: coerce hasMetrics to a boolean value before instantiating the Vue
 component

---
 app/assets/javascripts/monitoring/components/dashboard.vue | 8 ++++----
 app/assets/javascripts/monitoring/monitoring_bundle.js     | 6 +++++-
 spec/javascripts/monitoring/dashboard_spec.js              | 4 ++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 04374d2e1db..8ca94ef3e2a 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -7,7 +7,6 @@
   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: {
@@ -18,8 +17,9 @@
 
     props: {
       hasMetrics: {
-        type: String,
-        required: true,
+        type: Boolean,
+        required: false,
+        default: true,
       },
       showLegend: {
         type: Boolean,
@@ -108,7 +108,7 @@
 
     mounted() {
       this.resizeThrottled = _.throttle(this.resize, 600);
-      if (!convertPermissionToBoolean(this.hasMetrics)) {
+      if (!this.hasMetrics) {
         this.state = 'gettingStarted';
       } else {
         this.getGraphsData();
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index f881a3954b9..41270e015d4 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { convertPermissionToBoolean } from '~/lib/utils/common_utils';
 import Dashboard from './components/dashboard.vue';
 
 export default () => {
@@ -10,7 +11,10 @@ export default () => {
       el,
       render(createElement) {
         return createElement(Dashboard, {
-          props: el.dataset,
+          props: {
+            ...el.dataset,
+            hasMetrics: convertPermissionToBoolean(el.dataset.hasMetrics),
+          },
         });
       },
     });
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 79924a5f3a8..c5733ef95cf 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -9,7 +9,7 @@ describe('Dashboard', () => {
   let DashboardComponent;
   let component;
   const propsData = {
-    hasMetrics: 'false',
+    hasMetrics: false,
     documentationPath: '/path/to/docs',
     settingsPath: '/path/to/settings',
     clustersPath: '/path/to/clusters',
@@ -58,7 +58,7 @@ describe('Dashboard', () => {
     it('shows up a loading state', (done) => {
       component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
-        propsData: { ...propsData, hasMetrics: 'true' },
+        propsData: { ...propsData, hasMetrics: true },
       });
       component.$mount();
       Vue.nextTick(() => {
-- 
cgit v1.2.1


From ed993603de2535f144b37c637b50e8925db075ce Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 6 Mar 2018 09:19:33 -0600
Subject: move misplaced entry point

---
 app/assets/javascripts/pages/projects/environments/index.js       | 3 ---
 app/assets/javascripts/pages/projects/environments/index/index.js | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)
 delete mode 100644 app/assets/javascripts/pages/projects/environments/index.js
 create mode 100644 app/assets/javascripts/pages/projects/environments/index/index.js

diff --git a/app/assets/javascripts/pages/projects/environments/index.js b/app/assets/javascripts/pages/projects/environments/index.js
deleted file mode 100644
index ace8af00ece..00000000000
--- a/app/assets/javascripts/pages/projects/environments/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import initEnviroments from '~/environments/';
-
-document.addEventListener('DOMContentLoaded', initEnviroments);
diff --git a/app/assets/javascripts/pages/projects/environments/index/index.js b/app/assets/javascripts/pages/projects/environments/index/index.js
new file mode 100644
index 00000000000..ace8af00ece
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/environments/index/index.js
@@ -0,0 +1,3 @@
+import initEnviroments from '~/environments/';
+
+document.addEventListener('DOMContentLoaded', initEnviroments);
-- 
cgit v1.2.1


From bae88da83c584046ed59e8c7ac4cb209cfd4b15f Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 6 Mar 2018 11:05:48 -0600
Subject: add new tests for metrics dashboard changes

---
 spec/javascripts/monitoring/dashboard_spec.js | 43 +++++++++++++++++++++------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index c5733ef95cf..4c5a10393c6 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -7,7 +7,7 @@ import { metricsGroupsAPIResponse, mockApiEndpoint } from './mock_data';
 describe('Dashboard', () => {
   const fixtureName = 'environments/metrics/metrics.html.raw';
   let DashboardComponent;
-  let component;
+
   const propsData = {
     hasMetrics: false,
     documentationPath: '/path/to/docs',
@@ -16,7 +16,7 @@ describe('Dashboard', () => {
     tagsPath: '/path/to/tags',
     projectPath: '/path/to/project',
     metricsEndpoint: mockApiEndpoint,
-    deploymentEndpoint: '/endpoint/deployments',
+    deploymentEndpoint: null,
     emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
     emptyLoadingSvgPath: '/path/to/loading.svg',
     emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
@@ -31,12 +31,11 @@ describe('Dashboard', () => {
 
   describe('no metrics are available yet', () => {
     it('shows a getting started empty state when no metrics are present', () => {
-      component = new DashboardComponent({
+      const component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
         propsData,
       });
 
-      component.$mount();
       expect(component.$el.querySelector('#prometheus-graphs')).toBe(null);
       expect(component.state).toEqual('gettingStarted');
     });
@@ -46,9 +45,7 @@ describe('Dashboard', () => {
     let mock;
     beforeEach(() => {
       mock = new MockAdapter(axios);
-      mock.onGet(mockApiEndpoint).reply(200, {
-        metricsGroupsAPIResponse,
-      });
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
     });
 
     afterEach(() => {
@@ -56,15 +53,43 @@ describe('Dashboard', () => {
     });
 
     it('shows up a loading state', (done) => {
-      component = new DashboardComponent({
+      const component = new DashboardComponent({
         el: document.querySelector('#prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true },
       });
-      component.$mount();
+
       Vue.nextTick(() => {
         expect(component.state).toEqual('loading');
         done();
       });
     });
+
+    it('hides the legend when showLegend is false', (done) => {
+      const component = new DashboardComponent({
+        el: document.querySelector('#prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showLegend: false },
+      });
+
+      setTimeout(() => {
+        expect(component.showEmptyState).toEqual(false);
+        expect(component.$el.querySelector('.legend-group')).toBeFalsy();
+        expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy();
+        done();
+      });
+    });
+
+    it('hides the group panels when showPanels is false', (done) => {
+      const component = new DashboardComponent({
+        el: document.querySelector('#prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+
+      setTimeout(() => {
+        expect(component.showEmptyState).toEqual(false);
+        expect(component.$el.querySelector('.prometheus-panel')).toBeFalsy();
+        expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy();
+        done();
+      });
+    });
   });
 });
-- 
cgit v1.2.1


From 57d1ddff0ec39721f49d632ecebfd7be66465e98 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 6 Mar 2018 11:09:16 -0600
Subject: replace fixture with simple mount point

---
 spec/javascripts/fixtures/environments.rb     | 30 ---------------------------
 spec/javascripts/monitoring/dashboard_spec.js | 15 ++++++--------
 2 files changed, 6 insertions(+), 39 deletions(-)
 delete mode 100644 spec/javascripts/fixtures/environments.rb

diff --git a/spec/javascripts/fixtures/environments.rb b/spec/javascripts/fixtures/environments.rb
deleted file mode 100644
index d2457d75419..00000000000
--- a/spec/javascripts/fixtures/environments.rb
+++ /dev/null
@@ -1,30 +0,0 @@
-require 'spec_helper'
-
-describe Projects::EnvironmentsController, '(JavaScript fixtures)', type: :controller do
-  include JavaScriptFixturesHelpers
-
-  let(:admin) { create(:admin) }
-  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
-  let(:project) { create(:project_empty_repo, namespace: namespace, path: 'environments-project') }
-  let(:environment) { create(:environment, name: 'production', project: project) }
-
-  render_views
-
-  before(:all) do
-    clean_frontend_fixtures('environments/metrics')
-  end
-
-  before do
-    sign_in(admin)
-  end
-
-  it 'environments/metrics/metrics.html.raw' do |example|
-    get :metrics,
-      namespace_id: project.namespace,
-      project_id: project,
-      id: environment.id
-
-    expect(response).to be_success
-    store_frontend_fixture(response, example.description)
-  end
-end
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 4c5a10393c6..39de6f1bba6 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -5,7 +5,6 @@ import axios from '~/lib/utils/axios_utils';
 import { metricsGroupsAPIResponse, mockApiEndpoint } from './mock_data';
 
 describe('Dashboard', () => {
-  const fixtureName = 'environments/metrics/metrics.html.raw';
   let DashboardComponent;
 
   const propsData = {
@@ -22,21 +21,19 @@ describe('Dashboard', () => {
     emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
   };
 
-  preloadFixtures(fixtureName);
-
   beforeEach(() => {
-    loadFixtures(fixtureName);
+    setFixtures('<div class="prometheus-graphs"></div>');
     DashboardComponent = Vue.extend(Dashboard);
   });
 
   describe('no metrics are available yet', () => {
     it('shows a getting started empty state when no metrics are present', () => {
       const component = new DashboardComponent({
-        el: document.querySelector('#prometheus-graphs'),
+        el: document.querySelector('.prometheus-graphs'),
         propsData,
       });
 
-      expect(component.$el.querySelector('#prometheus-graphs')).toBe(null);
+      expect(component.$el.querySelector('.prometheus-graphs')).toBe(null);
       expect(component.state).toEqual('gettingStarted');
     });
   });
@@ -54,7 +51,7 @@ describe('Dashboard', () => {
 
     it('shows up a loading state', (done) => {
       const component = new DashboardComponent({
-        el: document.querySelector('#prometheus-graphs'),
+        el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true },
       });
 
@@ -66,7 +63,7 @@ describe('Dashboard', () => {
 
     it('hides the legend when showLegend is false', (done) => {
       const component = new DashboardComponent({
-        el: document.querySelector('#prometheus-graphs'),
+        el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showLegend: false },
       });
 
@@ -80,7 +77,7 @@ describe('Dashboard', () => {
 
     it('hides the group panels when showPanels is false', (done) => {
       const component = new DashboardComponent({
-        el: document.querySelector('#prometheus-graphs'),
+        el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showPanels: false },
       });
 
-- 
cgit v1.2.1


From 226d43b31733f4c61b2f2c54cf7a5c4374c801a6 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 6 Mar 2018 11:23:09 -0600
Subject: prefer checking explicitly for null

---
 spec/javascripts/monitoring/dashboard_spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 39de6f1bba6..29b355307ef 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -69,7 +69,7 @@ describe('Dashboard', () => {
 
       setTimeout(() => {
         expect(component.showEmptyState).toEqual(false);
-        expect(component.$el.querySelector('.legend-group')).toBeFalsy();
+        expect(component.$el.querySelector('.legend-group')).toEqual(null);
         expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy();
         done();
       });
@@ -83,7 +83,7 @@ describe('Dashboard', () => {
 
       setTimeout(() => {
         expect(component.showEmptyState).toEqual(false);
-        expect(component.$el.querySelector('.prometheus-panel')).toBeFalsy();
+        expect(component.$el.querySelector('.prometheus-panel')).toEqual(null);
         expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy();
         done();
       });
-- 
cgit v1.2.1