diff options
author | kushalpandya <kushal@gitlab.com> | 2017-06-01 21:24:56 +0530 |
---|---|---|
committer | kushalpandya <kushal@gitlab.com> | 2017-06-01 21:25:45 +0530 |
commit | 3f0eff82592f4a30abb6ffd15ac248a5f773c994 (patch) | |
tree | 5de7d573720215becb0bc82e038f97e0fa1a772a /app/assets | |
parent | 4c58fd82df71e1a8a4389cbbb8a5ea3b0186291c (diff) | |
download | gitlab-ce-3f0eff82592f4a30abb6ffd15ac248a5f773c994.tar.gz |
Update as per review feedback
Diffstat (limited to 'app/assets')
4 files changed, 46 insertions, 35 deletions
diff --git a/app/assets/javascripts/prometheus_metrics/constants.js b/app/assets/javascripts/prometheus_metrics/constants.js new file mode 100644 index 00000000000..50f1248456e --- /dev/null +++ b/app/assets/javascripts/prometheus_metrics/constants.js @@ -0,0 +1,5 @@ +export default { + EMPTY: 'empty', + LOADING: 'loading', + LIST: 'list', +}; diff --git a/app/assets/javascripts/prometheus_metrics/index.js b/app/assets/javascripts/prometheus_metrics/index.js index 9f20161783b..a0c43c5abe1 100644 --- a/app/assets/javascripts/prometheus_metrics/index.js +++ b/app/assets/javascripts/prometheus_metrics/index.js @@ -2,6 +2,5 @@ import PrometheusMetrics from './prometheus_metrics'; $(() => { const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); - prometheusMetrics.init(); prometheusMetrics.loadActiveMetrics(); }); diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js index d83e85b2026..ef4d6df5138 100644 --- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js +++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js @@ -1,3 +1,5 @@ +import PANEL_STATE from './constants'; + export default class PrometheusMetrics { constructor(wrapperSelector) { this.backOffRequestCounter = 0; @@ -16,31 +18,48 @@ export default class PrometheusMetrics { this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list'); this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('active-metrics'); - } - init() { this.$panelToggle.on('click', e => this.handlePanelToggle(e)); } /* eslint-disable class-methods-use-this */ handlePanelToggle(e) { const $toggleBtn = $(e.currentTarget); - const $currentPanelBody = $toggleBtn.parents('.panel').find('.panel-body'); - if ($currentPanelBody.is(':visible')) { - $currentPanelBody.addClass('hidden'); + const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body'); + $currentPanelBody.toggleClass('hidden'); + if ($toggleBtn.hasClass('fa-caret-down')) { $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right'); } else { - $currentPanelBody.removeClass('hidden'); $toggleBtn.removeClass('fa-caret-right').addClass('fa-caret-down'); } } + showMonitoringMetricsPanelState(stateName) { + switch (stateName) { + case PANEL_STATE.LOADING: + this.$monitoredMetricsLoading.removeClass('hidden'); + this.$monitoredMetricsEmpty.addClass('hidden'); + this.$monitoredMetricsList.addClass('hidden'); + break; + case PANEL_STATE.LIST: + this.$monitoredMetricsLoading.addClass('hidden'); + this.$monitoredMetricsEmpty.addClass('hidden'); + this.$monitoredMetricsList.removeClass('hidden'); + break; + default: + this.$monitoredMetricsLoading.addClass('hidden'); + this.$monitoredMetricsEmpty.removeClass('hidden'); + this.$monitoredMetricsList.addClass('hidden'); + break; + } + } + populateActiveMetrics(metrics) { let totalMonitoredMetrics = 0; let totalMissingEnvVarMetrics = 0; metrics.forEach((metric) => { - this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge-count">${metric.active_metrics}</span></li>`); + this.$monitoredMetricsList.append(`<li>${metric.group}<span class="badge">${metric.active_metrics}</span></li>`); totalMonitoredMetrics += metric.active_metrics; if (metric.metrics_missing_requirements > 0) { this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`); @@ -49,17 +68,17 @@ export default class PrometheusMetrics { }); this.$monitoredMetricsCount.text(totalMonitoredMetrics); - this.$monitoredMetricsLoading.addClass('hidden'); - this.$monitoredMetricsList.removeClass('hidden'); + this.showMonitoringMetricsPanelState(PANEL_STATE.LIST); if (totalMissingEnvVarMetrics > 0) { this.$missingEnvVarPanel.removeClass('hidden'); + this.$missingEnvVarPanel.find('.flash-container').off('click'); this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics); } } loadActiveMetrics() { - this.$monitoredMetricsLoading.removeClass('hidden'); + this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING); gl.utils.backOff((next, stop) => { $.getJSON(this.activeMetricsEndpoint) .done((res) => { @@ -80,13 +99,11 @@ export default class PrometheusMetrics { if (res && res.data && res.data.length) { this.populateActiveMetrics(res.data); } else { - this.$monitoredMetricsLoading.addClass('hidden'); - this.$monitoredMetricsEmpty.removeClass('hidden'); + this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); } }) .catch(() => { - this.$monitoredMetricsLoading.addClass('hidden'); - this.$monitoredMetricsEmpty.removeClass('hidden'); + this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY); }); } } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index deed4501399..e2ed1239541 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -39,11 +39,11 @@ .prometheus-metrics-monitoring { .panel { .panel-toggle { - width: 12px; + width: 14px; + } - &.fa-caret-right { - padding-left: 4px; - } + .badge { + font-size: inherit; } .panel-heading .badge-count { @@ -55,14 +55,9 @@ padding: 0; } - .badge-count { - margin-left: 3px; - padding: 3px 8px; - border-radius: 40%; - } - .flash-container { margin-bottom: 0; + cursor: default; .flash-notice { border-radius: 0; @@ -80,25 +75,20 @@ margin-top: 10px; margin-bottom: 0; } - - p { - color: $gl-gray-light; - } } - .loading-metrics .fa-spin { + .loading-metrics .metrics-load-spinner { color: $loading-color; } .metrics-list { - list-style-type: none; - margin: 0; - padding: 0; + margin-bottom: 0; li { - padding: 16px; + padding: $gl-padding; - .badge-count { + .badge { + margin-left: 5px; background: $badge-bg; } } |