Merge remote-tracking branch 'upstream/master' into 42572-release-controller

* upstream/master: (889 commits)
  SlackService - respect `notify_only_default_branch` for push events
  Clarify usage ping wording in admin area
  Update incoming emails documents
  Allow to include also descendant group labels
  Update docs on grouping CI jobs
  Support additional LabelsFinder parameters for group labels
  Extend Cluster Applications to install GitLab Runner to Kubernetes cluster
  Remove registry list webpack entry point
  Remove trailing newline that was causing an EE conflict
  Small fixes in Vuex docs
  Remove u2f webpack bundle
  Update documentation WRT to request parameters
  remove common_vue CommonsChunk config
  Fetch commit signatures from Gitaly in batches
  migrate stl_viewer to dynamic import
  migrate sketch_viewer to dynamic import
  migrate pdf_viewer to dynamic import
  migrate notebook_viewer to dynamic import
  migrate balsamiq_viewer to dynamic import
  Add some strings that were missing in gitlab.pot
  ...

1 files changed, 23 insertions, 9 deletions

diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index 56cd60c583b..9517b8ccb67 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -10,6 +10,11 @@
         required: false,
         default: '',
       },
+      clustersPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
       selectedState: {
         type: String,
         required: true,
@@ -35,7 +40,10 @@
             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: 'Configure Prometheus',
+            buttonText: 'Install Prometheus on clusters',
+            buttonPath: this.clustersPath,
+            secondaryButtonText: 'Configure existing Prometheus',
+            secondaryButtonPath: this.settingsPath,
           },
           loading: {
             svgUrl: this.emptyLoadingSvgPath,
@@ -43,6 +51,7 @@
             description: `Creating graphs uses the data from the Prometheus server.
               If this takes a long time, ensure that data is available.`,
             buttonText: 'View documentation',
+            buttonPath: this.documentationPath,
           },
           noData: {
             svgUrl: this.emptyUnableToConnectSvgPath,
@@ -50,12 +59,14 @@
             description: `You are connected to the Prometheus server, but there is currently
               no data to display.`,
             buttonText: 'Configure Prometheus',
+            buttonPath: this.settingsPath,
           },
           unableToConnect: {
             svgUrl: this.emptyUnableToConnectSvgPath,
             title: 'Unable to connect to Prometheus server',
             description: 'Ensure connectivity is available from the GitLab server to the ',
             buttonText: 'View documentation',
+            buttonPath: this.documentationPath,
           },
         },
       };
@@ -65,13 +76,6 @@
         return this.states[this.selectedState];
       },
 
-      buttonPath() {
-        if (this.selectedState === 'gettingStarted') {
-          return this.settingsPath;
-        }
-        return this.documentationPath;
-      },
-
       showButtonDescription() {
         if (this.selectedState === 'unableToConnect') return true;
         return false;
@@ -99,11 +103,21 @@
     </p>
     <div class="state-button">
       <a
+        v-if="currentState.buttonPath"
         class="btn btn-success"
-        :href="buttonPath"
+        :href="currentState.buttonPath"
       >
         {{ currentState.buttonText }}
       </a>
     </div>
+    <div class="state-button">
+      <a
+        v-if="currentState.secondaryButtonPath"
+        class="btn"
+        :href="currentState.secondaryButtonPath"
+      >
+        {{ currentState.secondaryButtonText }}
+      </a>
+    </div>
   </div>
 </template>