Commit 3f0eff82 authored by kushalpandya's avatar kushalpandya

Update as per review feedback

parent 4c58fd82
export default {
EMPTY: 'empty',
LOADING: 'loading',
LIST: 'list',
};
...@@ -2,6 +2,5 @@ import PrometheusMetrics from './prometheus_metrics'; ...@@ -2,6 +2,5 @@ import PrometheusMetrics from './prometheus_metrics';
$(() => { $(() => {
const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring'); const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
prometheusMetrics.init();
prometheusMetrics.loadActiveMetrics(); prometheusMetrics.loadActiveMetrics();
}); });
import PANEL_STATE from './constants';
export default class PrometheusMetrics { export default class PrometheusMetrics {
constructor(wrapperSelector) { constructor(wrapperSelector) {
this.backOffRequestCounter = 0; this.backOffRequestCounter = 0;
...@@ -16,31 +18,48 @@ export default class PrometheusMetrics { ...@@ -16,31 +18,48 @@ export default class PrometheusMetrics {
this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list'); this.$missingEnvVarMetricsList = this.$missingEnvVarPanel.find('.js-missing-var-metrics-list');
this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('active-metrics'); this.activeMetricsEndpoint = this.$monitoredMetricsPanel.data('active-metrics');
}
init() {
this.$panelToggle.on('click', e => this.handlePanelToggle(e)); this.$panelToggle.on('click', e => this.handlePanelToggle(e));
} }
/* eslint-disable class-methods-use-this */ /* eslint-disable class-methods-use-this */
handlePanelToggle(e) { handlePanelToggle(e) {
const $toggleBtn = $(e.currentTarget); const $toggleBtn = $(e.currentTarget);
const $currentPanelBody = $toggleBtn.parents('.panel').find('.panel-body'); const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
if ($currentPanelBody.is(':visible')) { $currentPanelBody.toggleClass('hidden');
$currentPanelBody.addClass('hidden'); if ($toggleBtn.hasClass('fa-caret-down')) {
$toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right'); $toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');
} else { } else {
$currentPanelBody.removeClass('hidden');
$toggleBtn.removeClass('fa-caret-right').addClass('fa-caret-down'); $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) { populateActiveMetrics(metrics) {
let totalMonitoredMetrics = 0; let totalMonitoredMetrics = 0;
let totalMissingEnvVarMetrics = 0; let totalMissingEnvVarMetrics = 0;
metrics.forEach((metric) => { 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; totalMonitoredMetrics += metric.active_metrics;
if (metric.metrics_missing_requirements > 0) { if (metric.metrics_missing_requirements > 0) {
this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`); this.$missingEnvVarMetricsList.append(`<li>${metric.group}</li>`);
...@@ -49,17 +68,17 @@ export default class PrometheusMetrics { ...@@ -49,17 +68,17 @@ export default class PrometheusMetrics {
}); });
this.$monitoredMetricsCount.text(totalMonitoredMetrics); this.$monitoredMetricsCount.text(totalMonitoredMetrics);
this.$monitoredMetricsLoading.addClass('hidden'); this.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
this.$monitoredMetricsList.removeClass('hidden');
if (totalMissingEnvVarMetrics > 0) { if (totalMissingEnvVarMetrics > 0) {
this.$missingEnvVarPanel.removeClass('hidden'); this.$missingEnvVarPanel.removeClass('hidden');
this.$missingEnvVarPanel.find('.flash-container').off('click');
this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics); this.$missingEnvVarMetricCount.text(totalMissingEnvVarMetrics);
} }
} }
loadActiveMetrics() { loadActiveMetrics() {
this.$monitoredMetricsLoading.removeClass('hidden'); this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
gl.utils.backOff((next, stop) => { gl.utils.backOff((next, stop) => {
$.getJSON(this.activeMetricsEndpoint) $.getJSON(this.activeMetricsEndpoint)
.done((res) => { .done((res) => {
...@@ -80,13 +99,11 @@ export default class PrometheusMetrics { ...@@ -80,13 +99,11 @@ export default class PrometheusMetrics {
if (res && res.data && res.data.length) { if (res && res.data && res.data.length) {
this.populateActiveMetrics(res.data); this.populateActiveMetrics(res.data);
} else { } else {
this.$monitoredMetricsLoading.addClass('hidden'); this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
this.$monitoredMetricsEmpty.removeClass('hidden');
} }
}) })
.catch(() => { .catch(() => {
this.$monitoredMetricsLoading.addClass('hidden'); this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
this.$monitoredMetricsEmpty.removeClass('hidden');
}); });
} }
} }
...@@ -39,11 +39,11 @@ ...@@ -39,11 +39,11 @@
.prometheus-metrics-monitoring { .prometheus-metrics-monitoring {
.panel { .panel {
.panel-toggle { .panel-toggle {
width: 12px; width: 14px;
&.fa-caret-right {
padding-left: 4px;
} }
.badge {
font-size: inherit;
} }
.panel-heading .badge-count { .panel-heading .badge-count {
...@@ -55,14 +55,9 @@ ...@@ -55,14 +55,9 @@
padding: 0; padding: 0;
} }
.badge-count {
margin-left: 3px;
padding: 3px 8px;
border-radius: 40%;
}
.flash-container { .flash-container {
margin-bottom: 0; margin-bottom: 0;
cursor: default;
.flash-notice { .flash-notice {
border-radius: 0; border-radius: 0;
...@@ -80,25 +75,20 @@ ...@@ -80,25 +75,20 @@
margin-top: 10px; margin-top: 10px;
margin-bottom: 0; margin-bottom: 0;
} }
p {
color: $gl-gray-light;
}
} }
.loading-metrics .fa-spin { .loading-metrics .metrics-load-spinner {
color: $loading-color; color: $loading-color;
} }
.metrics-list { .metrics-list {
list-style-type: none; margin-bottom: 0;
margin: 0;
padding: 0;
li { li {
padding: 16px; padding: $gl-padding;
.badge-count { .badge {
margin-left: 5px;
background: $badge-bg; background: $badge-bg;
} }
} }
......
...@@ -11,28 +11,28 @@ ...@@ -11,28 +11,28 @@
= link_to 'More information', '#' = link_to 'More information', '#'
.col-lg-9 .col-lg-9
.panel.panel-default.js-panel-monitored-metrics{ data: { "active-metrics" => "#{namespace_project_prometheus_active_metrics_path(@project.namespace, @project)}.json" } } .panel.panel-default.js-panel-monitored-metrics{ data: { "active-metrics" => "#{namespace_project_prometheus_active_metrics_path(@project.namespace, @project, :json)}" } }
.panel-heading .panel-heading
%h3.panel-title %h3.panel-title
Monitored Monitored
%span.badge-count.js-monitored-count 0 %span.badge.js-monitored-count 0
.panel-body .panel-body
.loading-metrics.js-loading-metrics .loading-metrics.js-loading-metrics
= icon('spinner spin 3x') = icon('spinner spin 3x', class: 'metrics-load-spinner')
%p Finding and configuring metrics... %p Finding and configuring metrics...
.empty-metrics.hidden.js-empty-metrics .empty-metrics.hidden.js-empty-metrics
= custom_icon('icon_empty_metrics') = custom_icon('icon_empty_metrics')
%p No metrics are being monitored. To start monitoring, deploy to an environment. %p No metrics are being monitored. To start monitoring, deploy to an environment.
= link_to project_environments_path(@project), title: 'View environments', class: 'btn btn-success' do = link_to project_environments_path(@project), title: 'View environments', class: 'btn btn-success' do
View environments View environments
%ul.metrics-list.hidden.js-metrics-list %ul.list-unstyled.metrics-list.hidden.js-metrics-list
.panel.panel-default.hidden.js-panel-missing-env-vars .panel.panel-default.hidden.js-panel-missing-env-vars
.panel-heading .panel-heading
%h3.panel-title %h3.panel-title
= icon('caret-right lg', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel') = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
Missing environment variable Missing environment variable
%span.badge-count.js-env-var-count 0 %span.badge.js-env-var-count 0
.panel-body.hidden .panel-body.hidden
.flash-container .flash-container
.flash-notice .flash-notice
...@@ -42,4 +42,4 @@ ...@@ -42,4 +42,4 @@
$CI_ENVIRONMENT_SLUG $CI_ENVIRONMENT_SLUG
to exporter&rsquo;s queries. to exporter&rsquo;s queries.
= link_to 'More information', '#' = link_to 'More information', '#'
%ul.metrics-list.js-missing-var-metrics-list %ul.list-unstyled.metrics-list.js-missing-var-metrics-list
import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics'; import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
import PANEL_STATE from '~/prometheus_metrics/constants';
import { metrics, missingVarMetrics } from './mock_data'; import { metrics, missingVarMetrics } from './mock_data';
describe('PrometheusMetrics', () => { describe('PrometheusMetrics', () => {
...@@ -35,6 +36,38 @@ describe('PrometheusMetrics', () => { ...@@ -35,6 +36,38 @@ describe('PrometheusMetrics', () => {
}); });
}); });
describe('showMonitoringMetricsPanelState', () => {
let prometheusMetrics;
beforeEach(() => {
prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
});
it('should show loading state when called with `loading`', () => {
prometheusMetrics.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeFalsy();
expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeTruthy();
});
it('should show metrics list when called with `list`', () => {
prometheusMetrics.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeFalsy();
});
it('should show empty state when called with `empty`', () => {
prometheusMetrics.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeFalsy();
expect(prometheusMetrics.$monitoredMetricsList.hasClass('hidden')).toBeTruthy();
});
});
describe('populateActiveMetrics', () => { describe('populateActiveMetrics', () => {
let prometheusMetrics; let prometheusMetrics;
...@@ -52,7 +85,7 @@ describe('PrometheusMetrics', () => { ...@@ -52,7 +85,7 @@ describe('PrometheusMetrics', () => {
expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('12'); expect(prometheusMetrics.$monitoredMetricsCount.text()).toEqual('12');
expect($metricsListLi.length).toEqual(metrics.length); expect($metricsListLi.length).toEqual(metrics.length);
expect($metricsListLi.first().find('.badge-count').text()).toEqual(`${metrics[0].active_metrics}`); expect($metricsListLi.first().find('.badge').text()).toEqual(`${metrics[0].active_metrics}`);
}); });
it('should show missing environment variables list', () => { it('should show missing environment variables list', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment