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

Cluster monitoring changes CE backport

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

2 files changed, 52 insertions, 45 deletions

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 eb8f6bbe50d..29b355307ef 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -5,24 +5,35 @@ import axios from '~/lib/utils/axios_utils';
 import { metricsGroupsAPIResponse, mockApiEndpoint } from './mock_data';
 
 describe('Dashboard', () => {
-  const fixtureName = 'environments/metrics/metrics.html.raw';
   let DashboardComponent;
-  let component;
-  preloadFixtures(fixtureName);
+
+  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: null,
+    emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
+    emptyLoadingSvgPath: '/path/to/loading.svg',
+    emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
+  };
 
   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', () => {
-      component = new DashboardComponent({
-        el: document.querySelector('#prometheus-graphs'),
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData,
       });
 
-      component.$mount();
-      expect(component.$el.querySelector('#prometheus-graphs')).toBe(null);
+      expect(component.$el.querySelector('.prometheus-graphs')).toBe(null);
       expect(component.state).toEqual('gettingStarted');
     });
   });
@@ -30,11 +41,8 @@ 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,
-      });
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
     });
 
     afterEach(() => {
@@ -42,14 +50,43 @@ describe('Dashboard', () => {
     });
 
     it('shows up a loading state', (done) => {
-      component = new DashboardComponent({
-        el: document.querySelector('#prometheus-graphs'),
+      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')).toEqual(null);
+        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')).toEqual(null);
+        expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy();
+        done();
+      });
+    });
   });
 });