diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-13 12:09:23 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-13 12:09:23 +0300 |
commit | 4cb5e5011abfe8d50ac3a7ebd0018c563c6d7af4 (patch) | |
tree | 82591df15758864325897043f855b4e4dfcb6a56 /app/assets/javascripts | |
parent | 0301a0cad0063d76b1607358dc6c711ea043fdda (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts')
12 files changed, 120 insertions, 45 deletions
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index dc1328a2236..e20c87ed8a0 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -256,6 +256,7 @@ export default class Clusters { eventHub.$on('uninstallApplication', data => this.uninstallApplication(data)); eventHub.$on('setCrossplaneProviderStack', data => this.setCrossplaneProviderStack(data)); eventHub.$on('setIngressModSecurityEnabled', data => this.setIngressModSecurityEnabled(data)); + eventHub.$on('resetIngressModSecurityEnabled', id => this.resetIngressModSecurityEnabled(id)); // Add event listener to all the banner close buttons this.addBannerCloseHandler(this.unreachableContainer, 'unreachable'); this.addBannerCloseHandler(this.authenticationFailureContainer, 'authentication_failure'); @@ -270,6 +271,7 @@ export default class Clusters { eventHub.$off('setCrossplaneProviderStack'); eventHub.$off('uninstallApplication'); eventHub.$off('setIngressModSecurityEnabled'); + eventHub.$off('resetIngressModSecurityEnabled'); } initPolling(method, successCallback, errorCallback) { @@ -523,6 +525,10 @@ export default class Clusters { this.store.updateAppProperty(id, 'modsecurity_enabled', modSecurityEnabled); } + resetIngressModSecurityEnabled(id) { + this.store.updateAppProperty(id, 'isEditingModSecurityEnabled', false); + } + destroy() { this.destroyed = true; diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue index 9058f1c0141..442c52110f2 100644 --- a/app/assets/javascripts/clusters/components/applications.vue +++ b/app/assets/javascripts/clusters/components/applications.vue @@ -119,9 +119,6 @@ export default { ingressInstalled() { return this.applications.ingress.status === APPLICATION_STATUS.INSTALLED; }, - ingressEnableModsecurity() { - return this.applications.ingress.modsecurity_enabled; - }, ingressExternalEndpoint() { return this.applications.ingress.externalIp || this.applications.ingress.externalHostname; }, diff --git a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue index c30015f31de..98a783aab6e 100644 --- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue +++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue @@ -1,19 +1,22 @@ <script> import _ from 'lodash'; import { __ } from '../../locale'; -import LoadingButton from '~/vue_shared/components/loading_button.vue'; import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants'; -import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; +import { GlAlert, GlSprintf, GlLink, GlToggle, GlButton } from '@gitlab/ui'; import eventHub from '~/clusters/event_hub'; +import modSecurityLogo from 'images/cluster_app_logos/modsecurity.png'; -const { UPDATING, UNINSTALLING } = APPLICATION_STATUS; +const { UPDATING, UNINSTALLING, INSTALLING, INSTALLED, UPDATED } = APPLICATION_STATUS; export default { + title: 'ModSecurity Web Application Firewall', + modsecurityUrl: 'https://modsecurity.org/about.html', components: { - LoadingButton, GlAlert, GlSprintf, GlLink, + GlToggle, + GlButton, }, props: { ingress: { @@ -26,6 +29,10 @@ export default { default: '', }, }, + data: () => ({ + modSecurityLogo, + hasValueChanged: false, + }), computed: { modSecurityEnabled: { get() { @@ -36,6 +43,11 @@ export default { id: INGRESS, modSecurityEnabled: isEnabled, }); + if (this.hasValueChanged) { + this.resetStatus(); + } else { + this.hasValueChanged = true; + } }, }, ingressModSecurityDescription() { @@ -45,13 +57,21 @@ export default { return [UPDATING].includes(this.ingress.status); }, saveButtonDisabled() { - return [UNINSTALLING, UPDATING].includes(this.ingress.status); + return [UNINSTALLING, UPDATING, INSTALLING].includes(this.ingress.status); }, saveButtonLabel() { return this.saving ? __('Saving') : __('Save changes'); }, - ingressInstalled() { - return this.ingress.installed; + /** + * Returns true either when: + * - The application is getting updated. + * - The user has changed some of the settings for an application which is + * neither getting installed nor updated. + */ + showButtons() { + return ( + this.saving || (this.hasValueChanged && [INSTALLED, UPDATED].includes(this.ingress.status)) + ); }, }, methods: { @@ -60,6 +80,11 @@ export default { id: INGRESS, params: { modsecurity_enabled: this.ingress.modsecurity_enabled }, }); + this.resetStatus(); + }, + resetStatus() { + eventHub.$emit('resetIngressModSecurityEnabled', INGRESS); + this.hasValueChanged = false; }, }, }; @@ -75,42 +100,65 @@ export default { @dismiss="alert = null" > {{ - s__('ClusterIntegration|Something went wrong while updating the Web Application Firewall.') + s__( + 'ClusterIntegration|Something went wrong while trying to save your settings. Please try again.', + ) }} </gl-alert> - <div class="form-group"> - <div class="form-check form-check-inline"> - <input - v-model="modSecurityEnabled" - type="checkbox" - autocomplete="off" - class="form-check-input" + <div class="gl-responsive-table-row-layout" role="row"> + <div class="table-section append-right-8 section-align-top" role="gridcell"> + <img + :src="modSecurityLogo" + :alt="`${$options.title} logo`" + class="cluster-application-logo avatar s40" /> - <label class="form-check-label label-bold" for="ingress-enable-modsecurity"> - {{ s__('ClusterIntegration|Enable Web Application Firewall') }} - </label> </div> - <p class="form-text text-muted"> + <div class="table-section section-wrap" role="gridcell"> <strong> - <gl-sprintf - :message="s__('ClusterIntegration|Learn more about %{linkStart}ModSecurity%{linkEnd}')" - > - <template #link="{ content }"> - <gl-link :href="ingressModSecurityDescription" target="_blank" - >{{ content }} - </gl-link> - </template> - </gl-sprintf> + <gl-link :href="$options.modsecurityUrl" target="_blank">{{ $options.title }} </gl-link> </strong> - </p> - <loading-button - v-if="ingressInstalled" - class="btn-success mt-1" - :loading="saving" - :disabled="saveButtonDisabled" - :label="saveButtonLabel" - @click="updateApplication" - /> + <div class="form-group"> + <p class="form-text text-muted"> + <strong> + <gl-sprintf + :message=" + s__( + 'ClusterIntegration|Real-time web application monitoring, logging and access control. %{linkStart}More information%{linkEnd}', + ) + " + > + <template #link="{ content }"> + <gl-link :href="ingressModSecurityDescription" target="_blank" + >{{ content }} + </gl-link> + </template> + </gl-sprintf> + </strong> + </p> + <div class="form-check form-check-inline mt-3"> + <gl-toggle + v-model="modSecurityEnabled" + :label-on="__('Enabled')" + :label-off="__('Disabled')" + :disabled="saveButtonDisabled" + label-position="right" + /> + </div> + <div v-if="showButtons"> + <gl-button + class="btn-success inline mr-1" + :loading="saving" + :disabled="saveButtonDisabled" + @click="updateApplication" + > + {{ saveButtonLabel }} + </gl-button> + <gl-button :disabled="saveButtonDisabled" @click="resetStatus"> + {{ __('Cancel') }} + </gl-button> + </div> + </div> + </div> </div> </div> </template> diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js index ffe71455b2d..1d17170cea1 100644 --- a/app/assets/javascripts/clusters/stores/clusters_store.js +++ b/app/assets/javascripts/clusters/stores/clusters_store.js @@ -211,9 +211,7 @@ export default class ClusterStore { this.state.applications.ingress.externalIp = serverAppEntry.external_ip; this.state.applications.ingress.externalHostname = serverAppEntry.external_hostname; if (!this.state.applications.ingress.isEditingModSecurityEnabled) { - this.state.applications.ingress.modsecurity_enabled = - serverAppEntry.modsecurity_enabled || - this.state.applications.ingress.modsecurity_enabled; + this.state.applications.ingress.modsecurity_enabled = serverAppEntry.modsecurity_enabled; } } else if (appId === CERT_MANAGER) { this.state.applications.cert_manager.email = diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue index 515d513e3ee..577612de06a 100644 --- a/app/assets/javascripts/notes/components/discussion_counter.vue +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -77,6 +77,9 @@ export default { v-gl-tooltip title="Jump to next unresolved thread" class="btn btn-default discussion-next-btn" + data-track-event="click_button" + data-track-label="mr_next_unresolved_thread" + data-track-property="click_next_unresolved_thread_top" @click="jumpToNextDiscussion" > <icon name="comment-next" /> diff --git a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue index e66abcfddbb..b71ce1b6a0a 100644 --- a/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue +++ b/app/assets/javascripts/notes/components/discussion_jump_to_next_button.vue @@ -28,6 +28,9 @@ export default { v-gl-tooltip class="btn btn-default discussion-next-btn" :title="s__('MergeRequests|Jump to next unresolved thread')" + data-track-event="click_button" + data-track-label="mr_next_unresolved_thread" + data-track-property="click_next_unresolved_thread" @click="jumpToNextRelativeDiscussion(fromDiscussionId)" > <icon name="comment-next" /> diff --git a/app/assets/javascripts/pages/admin/integrations/edit/index.js b/app/assets/javascripts/pages/admin/integrations/edit/index.js new file mode 100644 index 00000000000..2d77f2686f7 --- /dev/null +++ b/app/assets/javascripts/pages/admin/integrations/edit/index.js @@ -0,0 +1,16 @@ +import IntegrationSettingsForm from '~/integrations/integration_settings_form'; +import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics'; +import initAlertsSettings from '~/alerts_service_settings'; + +document.addEventListener('DOMContentLoaded', () => { + const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring'); + const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form'); + integrationSettingsForm.init(); + + if (prometheusSettingsWrapper) { + const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); + prometheusMetrics.loadActiveMetrics(); + } + + initAlertsSettings(document.querySelector('.js-alerts-service-settings')); +}); diff --git a/app/assets/javascripts/pages/projects/snippets/show/index.js b/app/assets/javascripts/pages/projects/snippets/show/index.js index 738bf08f1bf..d8fbb851ffb 100644 --- a/app/assets/javascripts/pages/projects/snippets/show/index.js +++ b/app/assets/javascripts/pages/projects/snippets/show/index.js @@ -14,5 +14,6 @@ document.addEventListener('DOMContentLoaded', () => { snippetEmbed(); } else { initSnippetsApp(); + initNotes(); } }); diff --git a/app/assets/javascripts/pages/snippets/show/index.js b/app/assets/javascripts/pages/snippets/show/index.js index 6e00c14f43e..3bc9d4f957f 100644 --- a/app/assets/javascripts/pages/snippets/show/index.js +++ b/app/assets/javascripts/pages/snippets/show/index.js @@ -14,5 +14,6 @@ document.addEventListener('DOMContentLoaded', () => { snippetEmbed(); } else { initSnippetsApp(); + initNotes(); } }); diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue index 6f77d2fa779..9c476d5b2e0 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue @@ -64,7 +64,7 @@ export default { :deployment="deployment" :computed-deployment-status="computedDeploymentStatus" :show-visual-review-app="showVisualReviewApp" - :visual-review-app-metadata="visualReviewAppMeta" + :visual-review-app-meta="visualReviewAppMeta" /> </div> </div> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue index a11e62b048a..573fc388cca 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_actions.vue @@ -173,7 +173,7 @@ export default { :app-button-text="appButtonText" :deployment="deployment" :show-visual-review-app="showVisualReviewApp" - :visual-review-app-metadata="visualReviewAppMeta" + :visual-review-app-meta="visualReviewAppMeta" /> <deployment-action-button v-if="stopUrl" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue index e1a1b1022e3..5dabd9fe5fe 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue @@ -93,8 +93,10 @@ export default { /> <visual-review-app-link v-if="showVisualReviewApp" + :view-app-display="appButtonText" :link="deploymentExternalUrl" :app-metadata="visualReviewAppMeta" + :changes="deployment.changes" /> </span> </template> |