Add latest changes from gitlab-org/gitlab@master

2 files changed, 38 insertions, 2 deletions

diff --git a/app/assets/javascripts/monitoring/components/alert_widget_form.vue b/app/assets/javascripts/monitoring/components/alert_widget_form.vue
index ef9dfce4aa9..f961e21984b 100644
--- a/app/assets/javascripts/monitoring/components/alert_widget_form.vue
+++ b/app/assets/javascripts/monitoring/components/alert_widget_form.vue
@@ -302,7 +302,6 @@ export default {
         />
       </gl-form-group>
       <gl-form-group
-        v-if="glFeatures.alertRunbooks"
         :label="s__('PrometheusAlerts|Runbook URL (optional)')"
         label-for="alert-runbook"
       >
@@ -312,6 +311,7 @@ export default {
           :disabled="formDisabled"
           data-testid="alertRunbookField"
           type="text"
+          :placeholder="s__('PrometheusAlerts|https://gitlab.com/gitlab-com/runbooks')"
         />
       </gl-form-group>
     </div>
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
index f57ea49626e..ad320b004bc 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
@@ -1,18 +1,20 @@
 <script>
 import { mapState } from 'vuex';
-import { pickBy } from 'lodash';
+import { mapValues, pickBy } from 'lodash';
 import invalidUrl from '~/lib/utils/invalid_url';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import { relativePathToAbsolute, getBaseURL, visitUrl, isSafeURL } from '~/lib/utils/url_utility';
 import {
   GlResizeObserverDirective,
   GlIcon,
+  GlLink,
   GlLoadingIcon,
   GlNewDropdown as GlDropdown,
   GlNewDropdownItem as GlDropdownItem,
   GlNewDropdownDivider as GlDropdownDivider,
   GlModal,
   GlModalDirective,
+  GlSprintf,
   GlTooltip,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -44,12 +46,14 @@ export default {
     MonitorEmptyChart,
     AlertWidget,
     GlIcon,
+    GlLink,
     GlLoadingIcon,
     GlTooltip,
     GlDropdown,
     GlDropdownItem,
     GlDropdownDivider,
     GlModal,
+    GlSprintf,
   },
   directives: {
     GlResizeObserver: GlResizeObserverDirective,
@@ -341,6 +345,19 @@ export default {
         this.$refs.copyChartLink.$el.firstChild.click();
       }
     },
+    getAlertRunbooks(queries) {
+      const hasRunbook = alert => Boolean(alert.runbookUrl);
+      const graphAlertsWithRunbooks = pickBy(this.getGraphAlerts(queries), hasRunbook);
+      const alertToRunbookTransform = alert => {
+        const alertQuery = queries.find(query => query.metricId === alert.metricId);
+        return {
+          key: alert.metricId,
+          href: alert.runbookUrl,
+          label: alertQuery.label,
+        };
+      };
+      return mapValues(graphAlertsWithRunbooks, alertToRunbookTransform);
+    },
   },
   panelTypes,
 };
@@ -436,6 +453,25 @@ export default {
             >
               {{ __('Alerts') }}
             </gl-dropdown-item>
+            <gl-dropdown-item
+              v-for="runbook in getAlertRunbooks(graphData.metrics)"
+              :key="runbook.key"
+              :href="safeUrl(runbook.href)"
+              data-testid="runbookLink"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+                <span>
+                  <gl-sprintf :message="s__('Metrics|View runbook - %{label}')">
+                    <template #label>
+                      {{ runbook.label }}
+                    </template>
+                  </gl-sprintf>
+                </span>
+                <gl-icon name="external-link" />
+              </span>
+            </gl-dropdown-item>
 
             <template v-if="graphData.links && graphData.links.length">
               <gl-dropdown-divider />