diff options
Diffstat (limited to 'app/assets/javascripts/operation_settings')
9 files changed, 186 insertions, 86 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> diff --git a/app/assets/javascripts/operation_settings/index.js b/app/assets/javascripts/operation_settings/index.js index f075291ce98..426a060949e 100644 --- a/app/assets/javascripts/operation_settings/index.js +++ b/app/assets/javascripts/operation_settings/index.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import store from './store'; -import ExternalDashboardForm from './components/external_dashboard.vue'; +import MetricsSettingsForm from './components/metrics_settings.vue'; export default () => { const el = document.querySelector('.js-operation-settings'); @@ -9,7 +9,7 @@ export default () => { el, store: store(el.dataset), render(createElement) { - return createElement(ExternalDashboardForm); + return createElement(MetricsSettingsForm); }, }); }; diff --git a/app/assets/javascripts/operation_settings/store/actions.js b/app/assets/javascripts/operation_settings/store/actions.js index ec05b0c76cf..122acb6bdcf 100644 --- a/app/assets/javascripts/operation_settings/store/actions.js +++ b/app/assets/javascripts/operation_settings/store/actions.js @@ -7,19 +7,23 @@ import * as mutationTypes from './mutation_types'; export const setExternalDashboardUrl = ({ commit }, url) => commit(mutationTypes.SET_EXTERNAL_DASHBOARD_URL, url); -export const updateExternalDashboardUrl = ({ state, dispatch }) => +export const setDashboardTimezone = ({ commit }, selected) => + commit(mutationTypes.SET_DASHBOARD_TIMEZONE, selected); + +export const saveChanges = ({ state, dispatch }) => axios .patch(state.operationsSettingsEndpoint, { project: { metrics_setting_attributes: { - external_dashboard_url: state.externalDashboardUrl, + dashboard_timezone: state.dashboardTimezone.selected, + external_dashboard_url: state.externalDashboard.url, }, }, }) - .then(() => dispatch('receiveExternalDashboardUpdateSuccess')) - .catch(error => dispatch('receiveExternalDashboardUpdateError', error)); + .then(() => dispatch('receiveSaveChangesSuccess')) + .catch(error => dispatch('receiveSaveChangesError', error)); -export const receiveExternalDashboardUpdateSuccess = () => { +export const receiveSaveChangesSuccess = () => { /** * The operations_controller currently handles successful requests * by creating a flash banner messsage to notify the user. @@ -27,8 +31,8 @@ export const receiveExternalDashboardUpdateSuccess = () => { refreshCurrentPage(); }; -export const receiveExternalDashboardUpdateError = (_, error) => { - const { response } = error; +export const receiveSaveChangesError = (_, error) => { + const { response = {} } = error; const message = response.data && response.data.message ? response.data.message : ''; createFlash(`${__('There was an error saving your changes.')} ${message}`, 'alert'); diff --git a/app/assets/javascripts/operation_settings/store/mutation_types.js b/app/assets/javascripts/operation_settings/store/mutation_types.js index 237d2b6122f..92543fd7f03 100644 --- a/app/assets/javascripts/operation_settings/store/mutation_types.js +++ b/app/assets/javascripts/operation_settings/store/mutation_types.js @@ -1,3 +1,2 @@ -/* eslint-disable import/prefer-default-export */ - export const SET_EXTERNAL_DASHBOARD_URL = 'SET_EXTERNAL_DASHBOARD_URL'; +export const SET_DASHBOARD_TIMEZONE = 'SET_DASHBOARD_TIMEZONE'; diff --git a/app/assets/javascripts/operation_settings/store/mutations.js b/app/assets/javascripts/operation_settings/store/mutations.js index 64bb33bb89f..f55717f6c98 100644 --- a/app/assets/javascripts/operation_settings/store/mutations.js +++ b/app/assets/javascripts/operation_settings/store/mutations.js @@ -2,6 +2,9 @@ import * as types from './mutation_types'; export default { [types.SET_EXTERNAL_DASHBOARD_URL](state, url) { - state.externalDashboardUrl = url; + state.externalDashboard.url = url; + }, + [types.SET_DASHBOARD_TIMEZONE](state, selected) { + state.dashboardTimezone.selected = selected; }, }; diff --git a/app/assets/javascripts/operation_settings/store/state.js b/app/assets/javascripts/operation_settings/store/state.js index 72167141c48..c0eca580848 100644 --- a/app/assets/javascripts/operation_settings/store/state.js +++ b/app/assets/javascripts/operation_settings/store/state.js @@ -1,5 +1,10 @@ export default (initialState = {}) => ({ - externalDashboardUrl: initialState.externalDashboardUrl || '', operationsSettingsEndpoint: initialState.operationsSettingsEndpoint, - externalDashboardHelpPagePath: initialState.externalDashboardHelpPagePath, + helpPage: initialState.helpPage, + externalDashboard: { + url: initialState.externalDashboardUrl, + }, + dashboardTimezone: { + selected: initialState.dashboardTimezoneSetting, + }, }); |