diff options
Diffstat (limited to 'app/assets/javascripts/operation_settings/components')
4 files changed, 161 insertions, 72 deletions
diff --git a/app/assets/javascripts/operation_settings/components/external_dashboard.vue b/app/assets/javascripts/operation_settings/components/external_dashboard.vue deleted file mode 100644 index e9c7d7c5d56..00000000000 --- a/app/assets/javascripts/operation_settings/components/external_dashboard.vue +++ /dev/null @@ -1,72 +0,0 @@ -<script> -import { mapState, mapActions } from 'vuex'; -import { GlDeprecatedButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui'; - -export default { - components: { - GlDeprecatedButton, - GlFormGroup, - GlFormInput, - GlLink, - }, - computed: { - ...mapState([ - 'externalDashboardHelpPagePath', - 'externalDashboardUrl', - 'operationsSettingsEndpoint', - ]), - userDashboardUrl: { - get() { - return this.externalDashboardUrl; - }, - set(url) { - this.setExternalDashboardUrl(url); - }, - }, - }, - methods: { - ...mapActions(['setExternalDashboardUrl', 'updateExternalDashboardUrl']), - }, -}; -</script> - -<template> - <section class="settings no-animate"> - <div class="settings-header"> - <h3 class="js-section-header h4"> - {{ s__('ExternalMetrics|External Dashboard') }} - </h3> - <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button> - <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')" - label-for="full-dashboard-url" - :description="s__('ExternalMetrics|Enter the URL of the dashboard you want to link to')" - > - <!-- placeholder with a url is a false positive --> - <!-- eslint-disable @gitlab/vue-require-i18n-attribute-strings --> - <gl-form-input - id="full-dashboard-url" - v-model="userDashboardUrl" - placeholder="https://my-org.gitlab.io/my-dashboards" - @keydown.enter.native.prevent="updateExternalDashboardUrl" - /> - <!-- eslint-enable @gitlab/vue-require-i18n-attribute-strings --> - </gl-form-group> - <gl-deprecated-button variant="success" @click="updateExternalDashboardUrl"> - {{ __('Save Changes') }} - </gl-deprecated-button> - </form> - </div> - </section> -</template> diff --git a/app/assets/javascripts/operation_settings/components/form_group/dashboard_timezone.vue b/app/assets/javascripts/operation_settings/components/form_group/dashboard_timezone.vue new file mode 100644 index 00000000000..42c9d876595 --- /dev/null +++ b/app/assets/javascripts/operation_settings/components/form_group/dashboard_timezone.vue @@ -0,0 +1,60 @@ +<script> +import { s__ } from '~/locale'; +import { mapState, mapActions } from 'vuex'; +import { GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { timezones } from '~/monitoring/format_date'; + +export default { + components: { + GlFormGroup, + GlFormSelect, + }, + computed: { + ...mapState(['dashboardTimezone']), + dashboardTimezoneModel: { + get() { + return this.dashboardTimezone.selected; + }, + set(selected) { + this.setDashboardTimezone(selected); + }, + }, + options() { + return [ + { + value: timezones.LOCAL, + text: s__("MetricsSettings|User's local timezone"), + }, + { + value: timezones.UTC, + text: s__('MetricsSettings|UTC (Coordinated Universal Time)'), + }, + ]; + }, + }, + methods: { + ...mapActions(['setDashboardTimezone']), + }, +}; +</script> + +<template> + <gl-form-group + :label="s__('MetricsSettings|Dashboard timezone')" + label-for="dashboard-timezone-setting" + > + <template #description> + {{ + s__( + "MetricsSettings|Choose whether to display dashboard metrics in UTC or the user's local timezone.", + ) + }} + </template> + + <gl-form-select + id="dashboard-timezone-setting" + v-model="dashboardTimezoneModel" + :options="options" + /> + </gl-form-group> +</template> diff --git a/app/assets/javascripts/operation_settings/components/form_group/external_dashboard.vue b/app/assets/javascripts/operation_settings/components/form_group/external_dashboard.vue new file mode 100644 index 00000000000..812c5a3fe9a --- /dev/null +++ b/app/assets/javascripts/operation_settings/components/form_group/external_dashboard.vue @@ -0,0 +1,48 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { GlFormGroup, GlFormInput } from '@gitlab/ui'; + +export default { + components: { + GlFormGroup, + GlFormInput, + }, + computed: { + ...mapState(['externalDashboard']), + userDashboardUrl: { + get() { + return this.externalDashboard.url; + }, + set(url) { + this.setExternalDashboardUrl(url); + }, + }, + }, + methods: { + ...mapActions(['setExternalDashboardUrl']), + }, +}; +</script> + +<template> + <gl-form-group + :label="s__('MetricsSettings|External dashboard URL')" + label-for="external-dashboard-url" + > + <template #description> + {{ + s__( + 'MetricsSettings|Add a button to the metrics dashboard linking directly to your existing external dashboard.', + ) + }} + </template> + <!-- placeholder with a url is a false positive --> + <!-- eslint-disable @gitlab/vue-require-i18n-attribute-strings --> + <gl-form-input + id="external-dashboard-url" + v-model="userDashboardUrl" + placeholder="https://my-org.gitlab.io/my-dashboards" + /> + <!-- eslint-enable @gitlab/vue-require-i18n-attribute-strings --> + </gl-form-group> +</template> diff --git a/app/assets/javascripts/operation_settings/components/metrics_settings.vue b/app/assets/javascripts/operation_settings/components/metrics_settings.vue new file mode 100644 index 00000000000..77c356e5a7f --- /dev/null +++ b/app/assets/javascripts/operation_settings/components/metrics_settings.vue @@ -0,0 +1,53 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { GlDeprecatedButton, GlLink } from '@gitlab/ui'; +import ExternalDashboard from './form_group/external_dashboard.vue'; +import DashboardTimezone from './form_group/dashboard_timezone.vue'; + +export default { + components: { + GlDeprecatedButton, + GlLink, + ExternalDashboard, + DashboardTimezone, + }, + computed: { + ...mapState(['helpPage']), + userDashboardUrl: { + get() { + return this.externalDashboard.url; + }, + set(url) { + this.setExternalDashboardUrl(url); + }, + }, + }, + methods: { + ...mapActions(['saveChanges']), + }, +}; +</script> + +<template> + <section class="settings no-animate"> + <div class="settings-header"> + <h3 class="js-section-header h4"> + {{ s__('MetricsSettings|Metrics Dashboard') }} + </h3> + <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button> + <p class="js-section-sub-header"> + {{ s__('MetricsSettings|Manage Metrics Dashboard settings.') }} + <gl-link :href="helpPage">{{ __('Learn more') }}</gl-link> + </p> + </div> + <div class="settings-content"> + <form> + <dashboard-timezone /> + <external-dashboard /> + <gl-deprecated-button variant="success" @click="saveChanges"> + {{ __('Save Changes') }} + </gl-deprecated-button> + </form> + </div> + </section> +</template> |