add link to cluster configuration from prometheus "getting started" state

4 files changed, 31 insertions, 10 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 5afae93724b..031badc7026 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -27,6 +27,7 @@
         hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics),
         documentationPath: metricsData.documentationPath,
         settingsPath: metricsData.settingsPath,
+        clustersPath: metricsData.clustersPath,
         tagsPath: metricsData.tagsPath,
         projectPath: metricsData.projectPath,
         metricsEndpoint: metricsData.additionalMetrics,
@@ -132,6 +133,7 @@
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"
+    :clusters-path="clustersPath"
     :empty-getting-started-svg-path="emptyGettingStartedSvgPath"
     :empty-loading-svg-path="emptyLoadingSvgPath"
     :empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
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>
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 794bc668562..4eba05a492d 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -205,7 +205,7 @@
 }
 
 .prometheus-state {
-  max-width: 430px;
+  max-width: 460px;
   margin: 10px auto;
   text-align: center;
 
@@ -213,6 +213,10 @@
     max-width: 80vw;
     margin: 0 auto;
   }
+
+  .state-button {
+    padding: $gl-padding / 2;
+  }
 }
 
 .environments-actions {
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index 5257b42548e..10812f67cbe 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/app/views/projects/environments/metrics.html.haml
@@ -13,6 +13,7 @@
           = link_to @environment.name, environment_path(@environment)
 
   #prometheus-graphs{ data: { "settings-path": edit_project_service_path(@project, 'prometheus'),
+    "clusters-path": project_clusters_path(@project),
     "documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),
     "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started.svg'),
     "empty-loading-svg-path": image_path('illustrations/monitoring/loading.svg'),