diff options
author | Adriel Santiago <asantiago@gitlab.com> | 2019-05-07 17:47:09 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2019-05-07 17:47:09 +0300 |
commit | 3565ee2ed66bd064ab6bef96ab43c0be43f75e49 (patch) | |
tree | 8a636b3d3eea34911e84979f93bc111ee1a7d984 /app/assets/javascripts | |
parent | 4ebfcd3b8fa69d7b0ccd2b826a517a18fad07eea (diff) |
Add external dashboard link
Add settings for linking to external dashboard from
metrics dashboard
Diffstat (limited to 'app/assets/javascripts')
4 files changed, 101 insertions, 1 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 33f6afc9c2d..a2bf58d007c 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -1,5 +1,5 @@ <script> -import { GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui'; +import { GlButton, GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui'; import _ from 'underscore'; import { s__ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; @@ -23,12 +23,18 @@ export default { GraphGroup, EmptyState, Icon, + GlButton, GlDropdown, GlDropdownItem, GlLink, }, props: { + externalDashboardPath: { + type: String, + required: false, + default: '', + }, hasMetrics: { type: Boolean, required: false, @@ -241,6 +247,15 @@ export default { > </gl-dropdown> </div> + <gl-button + v-if="externalDashboardPath.length" + class="js-external-dashboard-link" + variant="primary" + :href="externalDashboardPath" + > + {{ __('View full dashboard') }} + <icon name="external-link" /> + </gl-button> </div> <graph-group v-for="(groupData, index) in store.groups" diff --git a/app/assets/javascripts/operation_settings/components/external_dashboard.vue b/app/assets/javascripts/operation_settings/components/external_dashboard.vue new file mode 100644 index 00000000000..0a87d193b72 --- /dev/null +++ b/app/assets/javascripts/operation_settings/components/external_dashboard.vue @@ -0,0 +1,57 @@ +<script> +import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui'; + +export default { + components: { + GlButton, + GlFormGroup, + GlFormInput, + GlLink, + }, + props: { + externalDashboardPath: { + type: String, + required: false, + default: '', + }, + externalDashboardHelpPagePath: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <section class="settings expanded"> + <div class="settings-header"> + <h4 class="js-section-header"> + {{ s__('ExternalMetrics|External Dashboard') }} + </h4> + <p class="js-section-sub-header"> + {{ + s__( + 'ExternalMetrics|Add a button to the metrics dashboard linking directly to your existing external dashboards.', + ) + }} + <gl-link :href="externalDashboardHelpPagePath">{{ __('Learn more') }}</gl-link> + </p> + </div> + <div class="settings-content"> + <form> + <gl-form-group + :label="s__('ExternalMetrics|Full dashboard URL')" + :description="s__('ExternalMetrics|Enter the URL of the dashboard you want to link to')" + > + <gl-form-input + :value="externalDashboardPath" + placeholder="https://my-org.gitlab.io/my-dashboards" + /> + </gl-form-group> + <gl-button variant="success"> + {{ __('Save Changes') }} + </gl-button> + </form> + </div> + </section> +</template> diff --git a/app/assets/javascripts/operation_settings/index.js b/app/assets/javascripts/operation_settings/index.js new file mode 100644 index 00000000000..1171f3ece9f --- /dev/null +++ b/app/assets/javascripts/operation_settings/index.js @@ -0,0 +1,26 @@ +import Vue from 'vue'; +import ExternalDashboardForm from './components/external_dashboard.vue'; + +export default () => { + /** + * This check can be removed when we remove + * the :grafana_dashboard_link feature flag + */ + if (!gon.features.grafanaDashboardLink) { + return null; + } + + const el = document.querySelector('.js-operation-settings'); + + return new Vue({ + el, + render(createElement) { + return createElement(ExternalDashboardForm, { + props: { + ...el.dataset, + expanded: false, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/pages/projects/settings/operations/show/index.js b/app/assets/javascripts/pages/projects/settings/operations/show/index.js index 73c745179be..5270a7924ec 100644 --- a/app/assets/javascripts/pages/projects/settings/operations/show/index.js +++ b/app/assets/javascripts/pages/projects/settings/operations/show/index.js @@ -1,5 +1,7 @@ import mountErrorTrackingForm from '~/error_tracking_settings'; +import mountOperationSettings from '~/operation_settings'; document.addEventListener('DOMContentLoaded', () => { mountErrorTrackingForm(); + mountOperationSettings(); }); |