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,26 +88,32 @@ export default {
 </script>
 
 <template>
-  <div class="prometheus-state">
-    <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div>
-    <h4 class="state-title">{{ currentState.title }}</h4>
-    <p class="state-description">
-      {{ currentState.description }}
-      <a v-if="showButtonDescription" :href="settingsPath"> Prometheus server </a>
-    </p>
-    <div class="state-button">
-      <a v-if="currentState.buttonPath" :href="currentState.buttonPath" class="btn btn-success">
-        {{ currentState.buttonText }}
-      </a>
+  <div class="row empty-state js-empty-state">
+    <div class="col-12">
+      <div class="state-svg svg-content"><img :src="currentState.svgUrl" /></div>
     </div>
-    <div class="state-button">
-      <a
-        v-if="currentState.secondaryButtonPath"
-        :href="currentState.secondaryButtonPath"
-        class="btn"
-      >
-        {{ currentState.secondaryButtonText }}
-      </a>
+
+    <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="text-center">
+          <a v-if="currentState.buttonPath" :href="currentState.buttonPath" class="btn btn-success">
+            {{ currentState.buttonText }}
+          </a>
+          <a
+            v-if="currentState.secondaryButtonPath"
+            :href="currentState.secondaryButtonPath"
+            class="btn"
+          >
+            {{ currentState.secondaryButtonText }}
+          </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