Update environments metrics empty state

app/assets/javascripts/monitoring/components/empty_state.vue

@@ -44,9 +44,9 @@ export default {
           title: 'Get started with performance monitoring',
           description: `Stay updated about the performance and health
               of your environment by configuring Prometheus to monitor your deployments.`,
-          buttonText: 'Install Prometheus on clusters',
+          buttonText: 'Install on clusters',
           buttonPath: this.clustersPath,
-          secondaryButtonText: 'Configure existing Prometheus',
+          secondaryButtonText: 'Configure existing installation',
           secondaryButtonPath: this.settingsPath,
         },
         loading: {
@@ -88,19 +88,23 @@ export default {
 </script>
 
 <template>
-  <div class="prometheus-state">
+  <div class="row empty-state js-empty-state">
+    <div class="col-12">
       <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div>
-    <h4 class="state-title">{{ currentState.title }}</h4>
+    </div>
+
+    <div class="col-12">
+      <div class="text-content">
+        <h4 class="state-title text-center">{{ currentState.title }}</h4>
         <p class="state-description">
           {{ currentState.description }}
           <a v-if="showButtonDescription" :href="settingsPath"> Prometheus server </a>
         </p>
-    <div class="state-button">
+
+        <div class="text-center">
           <a v-if="currentState.buttonPath" :href="currentState.buttonPath" class="btn btn-success">
             {{ currentState.buttonText }}
           </a>
-    </div>
-    <div class="state-button">
           <a
             v-if="currentState.secondaryButtonPath"
             :href="currentState.secondaryButtonPath"
@@ -110,4 +114,6 @@ export default {
           </a>
         </div>
       </div>
+    </div>
+  </div>
 </template>

app/assets/stylesheets/pages/environments.scss

@@ -203,21 +203,6 @@
   stroke: $gray-darkest;
 }
 
-.prometheus-state {
-  max-width: 460px;
-  margin: 10px auto;
-  text-align: center;
-
-  .state-svg {
-    max-width: 80vw;
-    margin: 0 auto;
-  }
-
-  .state-button {
-    padding: $gl-padding / 2;
-  }
-}
-
 .prometheus-graphs {
   .environments {
     .dropdown-menu-toggle {

changelogs/unreleased/gt-update-env-metrics-empty-state.yml

+---
+title: Update environments metrics empty state
+merge_request: 23074
+author: George Tsiolis
+type: changed