Extend Cluster Applications to allow installation of Prometheus

5 files changed, 31 insertions, 1 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 2cfd6179a25..637d0dbde23 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -30,6 +30,7 @@ export default class Clusters {
       installHelmPath,
       installIngressPath,
       installRunnerPath,
+      installPrometheusPath,
       clusterStatus,
       clusterStatusReason,
       helpPath,
@@ -44,6 +45,7 @@ export default class Clusters {
       installHelmEndpoint: installHelmPath,
       installIngressEndpoint: installIngressPath,
       installRunnerEndpoint: installRunnerPath,
+      installPrometheusEndpoint: installPrometheusPath,
     });
 
     this.toggle = this.toggle.bind(this);
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index e5ae439d26e..cd58b88db69 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -67,6 +67,16 @@ export default {
         and send the results back to GitLab.`,
       ));
     },
+    prometheusDescription() {
+      return sprintf(
+        _.escape(s__('ClusterIntegration|Prometheus is an open-source monitoring system with %{gitlabIntegrationLink} to monitor deployed applications.')), {
+          gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html", target="_blank" rel="noopener noreferrer">
+            ${_.escape(s__('ClusterIntegration|Gitlab Integration'))}
+          </a>`,
+        },
+        false,
+      );
+    },
   },
 };
 </script>
@@ -106,6 +116,16 @@ export default {
          :request-status="applications.ingress.requestStatus"
          :request-reason="applications.ingress.requestReason"
        />
+       <application-row
+         id="prometheus"
+         :title="applications.prometheus.title"
+         title-link="https://prometheus.io/docs/introduction/overview/"
+         :description="prometheusDescription"
+         :status="applications.prometheus.status"
+         :status-reason="applications.prometheus.statusReason"
+         :request-status="applications.prometheus.requestStatus"
+         :request-reason="applications.prometheus.requestReason"
+       />
         <!-- NOTE: Don't forget to update `clusters.scss` min-height for this block and uncomment `application_spec` tests -->
         <!-- Add GitLab Runner row, all other plumbing is complete -->
       </div>
diff --git a/app/assets/javascripts/clusters/services/clusters_service.js b/app/assets/javascripts/clusters/services/clusters_service.js
index 755c2981c2e..13468578f4f 100644
--- a/app/assets/javascripts/clusters/services/clusters_service.js
+++ b/app/assets/javascripts/clusters/services/clusters_service.js
@@ -7,6 +7,7 @@ export default class ClusterService {
       helm: this.options.installHelmEndpoint,
       ingress: this.options.installIngressEndpoint,
       runner: this.options.installRunnerEndpoint,
+      prometheus: this.options.installPrometheusEndpoint,
     };
   }
 
diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js
index e731cdc3042..bd4a1fb37f9 100644
--- a/app/assets/javascripts/clusters/stores/clusters_store.js
+++ b/app/assets/javascripts/clusters/stores/clusters_store.js
@@ -28,6 +28,13 @@ export default class ClusterStore {
           requestStatus: null,
           requestReason: null,
         },
+        prometheus: {
+          title: s__('ClusterIntegration|Prometheus'),
+          status: null,
+          statusReason: null,
+          requestStatus: null,
+          requestReason: null,
+        },
       },
     };
   }
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 88d44131d5b..7b8ee026357 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -6,7 +6,7 @@
 
 .cluster-applications-table {
   // Wait for the Vue to kick-in and render the applications block
-  min-height: 302px;
+  min-height: 400px;
 }
 
 .clusters-dropdown-menu {