1 files changed, 20 insertions, 0 deletions
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>