add manage button to application rows in cluster integration

2 files changed, 28 insertions, 5 deletions

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index c13bbcee863..0aa3aead30d 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -32,6 +32,10 @@
         type: String,
         required: false,
       },
+      manageLink: {
+        type: String,
+        required: false,
+      },
       description: {
         type: String,
         required: true,
@@ -141,9 +145,21 @@
         <div v-html="description"></div>
       </div>
       <div
-        class="table-section table-button-footer section-15 section-align-top"
+        class="table-section table-button-footer section-align-top"
+        :class="{ 'section-20': manageLink, 'section-15': !manageLink }"
         role="gridcell"
       >
+        <div
+          v-if="manageLink"
+          class="btn-group table-action-buttons"
+        >
+          <a
+            class="btn"
+            :href="manageLink"
+          >
+            Manage
+          </a>
+        </div>
         <div class="btn-group table-action-buttons">
           <loading-button
             class="js-cluster-application-install-button"
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index ff2e0768a87..56c038aabd7 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -18,6 +18,11 @@
         required: false,
         default: '',
       },
+      managePrometheusPath: {
+        type: String,
+        required: false,
+        default: '',
+      }
     },
     computed: {
       generalApplicationDescription() {
@@ -76,11 +81,12 @@
       },
       prometheusDescription() {
         return sprintf(
-          _.escape(s__(`ClusterIntegration|Prometheus is an open-source monitoring system
-  with %{gitlabIntegrationLink} to monitor deployed applications.`)),
-          {
+          _.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">
+              target="_blank" rel="noopener noreferrer">
               ${_.escape(s__('ClusterIntegration|GitLab Integration'))}</a>`,
           },
           false,
@@ -129,6 +135,7 @@ target="_blank" rel="noopener noreferrer">
           id="prometheus"
           :title="applications.prometheus.title"
           title-link="https://prometheus.io/docs/introduction/overview/"
+          :manage-link="managePrometheusPath"
           :description="prometheusDescription"
           :status="applications.prometheus.status"
           :status-reason="applications.prometheus.statusReason"