.prometheus-container{ 'data-has-metrics': "false", 'data-doc-link': '/help/administration/monitoring/prometheus/index.md', 'data-prometheus-integration': '/root/hello-prometheus/services/prometheus/edit' }
  .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' }