Generate fixutre for metrics page

app/serializers/environment_entity.rb

@@ -6,7 +6,7 @@ class EnvironmentEntity < Grape::Entity
   expose :state
   expose :external_url
   expose :environment_type
-  expose :last_deployment, using: DeploymentEntityDetailed
+  expose :last_deployment, using: DeploymentEntity
   expose :stop_action?
 
   expose :metrics_path, if: -> (environment, _) { environment.has_metrics? } do |environment|

spec/javascripts/fixtures/environments.rb

@@ -0,0 +1,30 @@
+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(:each) 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

spec/javascripts/fixtures/environments/metrics.html.haml

@@ -1,62 +0,0 @@
-#js-metrics.prometheus-container{ 'data-has-metrics': "false", 'data-doc-link': '/help/administration/monitoring/prometheus/index.md', 'data-prometheus-integration': '/root/hello-prometheus/services/prometheus/edit', 'data-endpoint': '/test' }
-  .top-area
-    .row
-      .col-sm-6
-        %h3.page-title
-          Metrics for environment
-  .prometheus-state
-    .js-getting-started.hidden
-      .row
-        .col-md-4.col-md-offset-4.state-svg
-          %svg
-      .row
-        .col-md-6.col-md-offset-3
-          %h4.text-center.state-title
-            Get started with performance monitoring
-      .row
-        .col-md-6.col-md-offset-3
-          .description-text.text-center.state-description
-            Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments. Learn more about performance monitoring
-      .row.state-button-section
-        .col-md-4.col-md-offset-4.text-center.state-button
-          %a.btn.btn-success
-            Configure Prometheus
-    .js-loading.hidden
-      .row
-        .col-md-4.col-md-offset-4.state-svg
-          %svg
-      .row
-        .col-md-6.col-md-offset-3
-          %h4.text-center.state-title
-            Waiting for performance data
-      .row
-        .col-md-6.col-md-offset-3
-          .description-text.text-center.state-description
-            Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.
-      .row.state-button-section
-        .col-md-4.col-md-offset-4.text-center.state-button
-          %a.btn.btn-success
-            View documentation
-    .js-unable-to-connect.hidden
-      .row
-        .col-md-4.col-md-offset-4.state-svg
-          %svg
-      .row
-        .col-md-6.col-md-offset-3
-          %h4.text-center.state-title
-            Unable to connect to Prometheus server
-      .row
-        .col-md-6.col-md-offset-3
-          .description-text.text-center.state-description
-            Ensure connectivity is available from the GitLab server to the Prometheus server
-      .row.state-button-section
-        .col-md-4.col-md-offset-4.text-center.state-button
-          %a.btn.btn-success
-            View documentation
-  .prometheus-graphs
-    .row
-      .col-sm-12
-        %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
-    .row
-      .col-sm-12
-        %svg.prometheus-graph{ 'graph-type' => 'memory_values' }

spec/javascripts/monitoring/deployments_spec.js

@@ -4,7 +4,7 @@ import Deployments from '~/monitoring/deployments';
 import { prometheusMockData } from './prometheus_mock_data';
 
 describe('Metrics deployments', () => {
-  const fixtureName = 'static/environments/metrics.html.raw';
+  const fixtureName = 'environments/metrics/metrics.html.raw';
   let deployment;
   let prometheusGraph;
 

spec/javascripts/monitoring/prometheus_graph_spec.js

@@ -3,7 +3,7 @@ import PrometheusGraph from '~/monitoring/prometheus_graph';
 import { prometheusMockData } from './prometheus_mock_data';
 
 describe('PrometheusGraph', () => {
-  const fixtureName = 'static/environments/metrics.html.raw';
+  const fixtureName = 'environments/metrics/metrics.html.raw';
   const prometheusGraphContainer = '.prometheus-graph';
   const prometheusGraphContents = `${prometheusGraphContainer}[graph-type=cpu_values]`;