diff options
Diffstat (limited to 'app/assets/javascripts')
5 files changed, 262 insertions, 2 deletions
diff --git a/app/assets/javascripts/jira_import/components/jira_import_app.vue b/app/assets/javascripts/jira_import/components/jira_import_app.vue index 6efac949979..437239ce0be 100644 --- a/app/assets/javascripts/jira_import/components/jira_import_app.vue +++ b/app/assets/javascripts/jira_import/components/jira_import_app.vue @@ -1,10 +1,12 @@ <script> import getJiraProjects from '../queries/getJiraProjects.query.graphql'; +import JiraImportForm from './jira_import_form.vue'; import JiraImportSetup from './jira_import_setup.vue'; export default { name: 'JiraImportApp', components: { + JiraImportForm, JiraImportSetup, }, props: { @@ -41,6 +43,6 @@ export default { <template> <div> <jira-import-setup v-if="!isJiraConfigured" :illustration="setupIllustration" /> - <div v-else></div> + <jira-import-form v-else /> </div> </template> diff --git a/app/assets/javascripts/jira_import/components/jira_import_form.vue b/app/assets/javascripts/jira_import/components/jira_import_form.vue new file mode 100644 index 00000000000..4de04efe1b0 --- /dev/null +++ b/app/assets/javascripts/jira_import/components/jira_import_form.vue @@ -0,0 +1,94 @@ +<script> +import { GlAvatar, GlNewButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui'; + +export default { + name: 'JiraImportForm', + components: { + GlAvatar, + GlNewButton, + GlFormGroup, + GlFormSelect, + GlLabel, + }, + currentUserAvatarUrl: gon.current_user_avatar_url, + currentUsername: gon.current_username, +}; +</script> + +<template> + <div> + <h3 class="page-title">{{ __('New Jira import') }}</h3> + <hr /> + <form> + <gl-form-group + class="row align-items-center" + :label="__('Import from')" + label-cols-sm="2" + label-for="jira-project-select" + > + <gl-form-select id="jira-project-select" class="mb-2" /> + </gl-form-group> + + <gl-form-group + class="row align-items-center" + :label="__('Issue label')" + label-cols-sm="2" + label-for="jira-project-label" + > + <gl-label + id="jira-project-label" + class="mb-2" + background-color="#428BCA" + title="jira-import::KEY-1" + scoped + /> + </gl-form-group> + + <hr /> + + <p class="offset-md-1"> + {{ + __( + "For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:", + ) + }} + </p> + + <gl-form-group + class="row align-items-center mb-1" + :label="__('Title')" + label-cols-sm="2" + label-for="jira-project-title" + > + <p id="jira-project-title" class="mb-2">{{ __('jira.issue.summary') }}</p> + </gl-form-group> + <gl-form-group + class="row align-items-center mb-1" + :label="__('Reporter')" + label-cols-sm="2" + label-for="jira-project-reporter" + > + <gl-avatar + id="jira-project-reporter" + class="mb-2" + :src="$options.currentUserAvatarUrl" + :size="24" + :aria-label="$options.currentUsername" + /> + </gl-form-group> + <gl-form-group + class="row align-items-center mb-1" + :label="__('Description')" + label-cols-sm="2" + label-for="jira-project-description" + > + <p id="jira-project-description" class="mb-2">{{ __('jira.issue.description.content') }}</p> + </gl-form-group> + + <div class="footer-block row-content-block d-flex justify-content-between"> + <gl-new-button category="primary" variant="success">{{ __('Next') }}</gl-new-button> + <gl-new-button>{{ __('Cancel') }}</gl-new-button> + </div> + </form> + </div> +</template> diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js index 49862b64c27..5249709a2a3 100644 --- a/app/assets/javascripts/pages/projects/services/edit/index.js +++ b/app/assets/javascripts/pages/projects/services/edit/index.js @@ -1,5 +1,5 @@ import IntegrationSettingsForm from '~/integrations/integration_settings_form'; -import PrometheusMetrics from 'ee_else_ce/prometheus_metrics/prometheus_metrics'; +import PrometheusMetrics from '~/prometheus_metrics/custom_metrics'; import PrometheusAlerts from '~/prometheus_alerts'; import initAlertsSettings from '~/alerts_service_settings'; diff --git a/app/assets/javascripts/prometheus_metrics/constants.js b/app/assets/javascripts/prometheus_metrics/constants.js index 50f1248456e..0ffd977f04c 100644 --- a/app/assets/javascripts/prometheus_metrics/constants.js +++ b/app/assets/javascripts/prometheus_metrics/constants.js @@ -2,4 +2,5 @@ export default { EMPTY: 'empty', LOADING: 'loading', LIST: 'list', + NO_INTEGRATION: 'no-integration', }; diff --git a/app/assets/javascripts/prometheus_metrics/custom_metrics.js b/app/assets/javascripts/prometheus_metrics/custom_metrics.js new file mode 100644 index 00000000000..36df7837785 --- /dev/null +++ b/app/assets/javascripts/prometheus_metrics/custom_metrics.js @@ -0,0 +1,163 @@ +import $ from 'jquery'; +import { escape, sortBy } from 'lodash'; +import PrometheusMetrics from './prometheus_metrics'; +import PANEL_STATE from './constants'; +import axios from '~/lib/utils/axios_utils'; +import { s__ } from '~/locale'; +import { capitalizeFirstCharacter } from '~/lib/utils/text_utility'; + +export default class CustomMetrics extends PrometheusMetrics { + constructor(wrapperSelector) { + super(wrapperSelector); + this.customMetrics = []; + this.environmentsData = []; + this.$els = []; + + this.$wrapperCustomMetrics = $(wrapperSelector); + + this.$monitoredCustomMetricsPanel = this.$wrapperCustomMetrics.find( + '.js-panel-custom-monitored-metrics', + ); + this.$monitoredCustomMetricsCount = this.$monitoredCustomMetricsPanel.find( + '.js-custom-monitored-count', + ); + this.$monitoredCustomMetricsLoading = this.$monitoredCustomMetricsPanel.find( + '.js-loading-custom-metrics', + ); + this.$monitoredCustomMetricsEmpty = this.$monitoredCustomMetricsPanel.find( + '.js-empty-custom-metrics', + ); + this.$monitoredCustomMetricsList = this.$monitoredCustomMetricsPanel.find( + '.js-custom-metrics-list', + ); + this.$monitoredCustomMetricsNoIntegrationText = this.$monitoredCustomMetricsPanel.find( + '.js-no-active-integration-text', + ); + this.$newCustomMetricButton = this.$monitoredCustomMetricsPanel.find('.js-new-metric-button'); + this.$newCustomMetricText = this.$monitoredCustomMetricsPanel.find('.js-new-metric-text'); + this.$flashCustomMetricsContainer = this.$wrapperCustomMetrics.find('.flash-container'); + + this.$els = [ + this.$monitoredCustomMetricsLoading, + this.$monitoredCustomMetricsList, + this.$newCustomMetricButton, + this.$newCustomMetricText, + this.$monitoredCustomMetricsNoIntegrationText, + this.$monitoredCustomMetricsEmpty, + ]; + + this.activeCustomMetricsEndpoint = this.$monitoredCustomMetricsPanel.data( + 'active-custom-metrics', + ); + this.environmentsDataEndpoint = this.$monitoredCustomMetricsPanel.data( + 'environments-data-endpoint', + ); + this.isServiceActive = this.$monitoredCustomMetricsPanel.data('service-active'); + } + + init() { + if (this.isServiceActive) { + this.loadActiveCustomMetrics(); + } else { + this.setNoIntegrationActiveState(); + } + } + + // eslint-disable-next-line class-methods-use-this + setHidden(els) { + els.forEach(el => el.addClass('hidden')); + } + + setVisible(...els) { + this.setHidden(this.$els.filter(el => !els.includes(el))); + els.forEach(el => el.removeClass('hidden')); + } + + showMonitoringCustomMetricsPanelState(stateName) { + switch (stateName) { + case PANEL_STATE.LOADING: + this.setVisible(this.$monitoredCustomMetricsLoading); + break; + case PANEL_STATE.LIST: + this.setVisible(this.$newCustomMetricButton, this.$monitoredCustomMetricsList); + break; + case PANEL_STATE.NO_INTEGRATION: + this.setVisible( + this.$monitoredCustomMetricsNoIntegrationText, + this.$monitoredCustomMetricsEmpty, + ); + break; + default: + this.setVisible( + this.$monitoredCustomMetricsEmpty, + this.$newCustomMetricButton, + this.$newCustomMetricText, + ); + break; + } + } + + populateCustomMetrics() { + const capitalizeGroup = metric => ({ + ...metric, + group: capitalizeFirstCharacter(metric.group), + }); + + const sortedMetrics = sortBy(this.customMetrics.map(capitalizeGroup), ['group', 'title']); + + sortedMetrics.forEach(metric => { + this.$monitoredCustomMetricsList.append(CustomMetrics.customMetricTemplate(metric)); + }); + + this.$monitoredCustomMetricsCount.text(this.customMetrics.length); + this.showMonitoringCustomMetricsPanelState(PANEL_STATE.LIST); + if (!this.environmentsData) { + this.showFlashMessage( + s__( + 'PrometheusService|These metrics will only be monitored after your first deployment to an environment', + ), + ); + } + } + + showFlashMessage(message) { + this.$flashCustomMetricsContainer.removeClass('hidden'); + this.$flashCustomMetricsContainer.find('.flash-text').text(message); + } + + setNoIntegrationActiveState() { + this.showMonitoringCustomMetricsPanelState(PANEL_STATE.NO_INTEGRATION); + this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); + } + + loadActiveCustomMetrics() { + super.loadActiveMetrics(); + Promise.all([ + axios.get(this.activeCustomMetricsEndpoint), + axios.get(this.environmentsDataEndpoint), + ]) + .then(([customMetrics, environmentsData]) => { + this.environmentsData = environmentsData.data.environments; + if (!customMetrics.data || !customMetrics.data.metrics) { + this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY); + } else { + this.customMetrics = customMetrics.data.metrics; + this.populateCustomMetrics(customMetrics.data.metrics); + } + }) + .catch(customMetricError => { + this.showFlashMessage(customMetricError); + this.showMonitoringCustomMetricsPanelState(PANEL_STATE.EMPTY); + }); + } + + static customMetricTemplate(metric) { + return ` + <li class="custom-metric"> + <a href="${escape(metric.edit_path)}" class="custom-metric-link-bold"> + ${escape(metric.group)} / ${escape(metric.title)} (${escape(metric.unit)}) + </a> + </li> + `; + } +} |