Commit d048d926 authored by Douwe Maan's avatar Douwe Maan

Merge branch 'metrics-deployment-history' into 'master'

Metrics deployment history

Closes #26914

See merge request !10649
parents 9fce7c8e 7f22256a
import d3 from 'd3';
export const dateFormat = d3.time.format('%b %d, %Y');
export const timeFormat = d3.time.format('%H:%M%p');
/* global Flash */
import d3 from 'd3';
import {
dateFormat,
timeFormat,
} from './constants';
export default class Deployments {
constructor(width, height) {
this.width = width;
this.height = height;
this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
this.createGradientDef();
}
init(chartData) {
this.chartData = chartData;
this.x = d3.time.scale().range([0, this.width]);
this.x.domain(d3.extent(this.chartData, d => d.time));
this.charts = d3.selectAll('.prometheus-graph');
this.getData();
}
getData() {
$.ajax({
url: this.endpoint,
dataType: 'JSON',
})
.fail(() => new Flash('Error getting deployment information.'))
.done((data) => {
this.data = data.deployments.reduce((deploymentDataArray, deployment) => {
const time = new Date(deployment.created_at);
const xPos = Math.floor(this.x(time));
time.setSeconds(this.chartData[0].time.getSeconds());
if (xPos >= 0) {
deploymentDataArray.push({
id: deployment.id,
time,
sha: deployment.sha,
tag: deployment.tag,
ref: deployment.ref.name,
xPos,
});
}
return deploymentDataArray;
}, []);
this.plotData();
});
}
plotData() {
this.charts.each((d, i) => {
const svg = d3.select(this.charts[0][i]);
const chart = svg.select('.graph-container');
const key = svg.node().getAttribute('graph-type');
this.createLine(chart, key);
this.createDeployInfoBox(chart, key);
});
}
createGradientDef() {
const defs = d3.select('body')
.append('svg')
.attr({
height: 0,
width: 0,
})
.append('defs');
defs.append('linearGradient')
.attr({
id: 'shadow-gradient',
})
.append('stop')
.attr({
offset: '0%',
'stop-color': '#000',
'stop-opacity': 0.4,
})
.select(this.selectParentNode)
.append('stop')
.attr({
offset: '100%',
'stop-color': '#000',
'stop-opacity': 0,
});
}
createLine(chart, key) {
chart.append('g')
.attr({
class: 'deploy-info',
})
.selectAll('.deploy-info')
.data(this.data)
.enter()
.append('g')
.attr({
class: d => `deploy-info-${d.id}-${key}`,
transform: d => `translate(${Math.floor(d.xPos) + 1}, 0)`,
})
.append('rect')
.attr({
x: 1,
y: 0,
height: this.height + 1,
width: 3,
fill: 'url(#shadow-gradient)',
})
.select(this.selectParentNode)
.append('line')
.attr({
class: 'deployment-line',
x1: 0,
x2: 0,
y1: 0,
y2: this.height + 1,
});
}
createDeployInfoBox(chart, key) {
chart.selectAll('.deploy-info')
.selectAll('.js-deploy-info-box')
.data(this.data)
.enter()
.select(d => document.querySelector(`.deploy-info-${d.id}-${key}`))
.append('svg')
.attr({
class: 'js-deploy-info-box hidden',
x: 3,
y: 0,
width: 92,
height: 60,
})
.append('rect')
.attr({
class: 'rect-text-metric deploy-info-rect rect-metric',
x: 1,
y: 1,
rx: 2,
width: 90,
height: 58,
})
.select(this.selectParentNode)
.append('g')
.attr({
transform: 'translate(5, 2)',
})
.append('text')
.attr({
class: 'deploy-info-text text-metric-bold',
})
.text(Deployments.refText)
.select(this.selectParentNode)
.append('text')
.attr({
class: 'deploy-info-text',
y: 18,
})
.text(d => dateFormat(d.time))
.select(this.selectParentNode)
.append('text')
.attr({
class: 'deploy-info-text text-metric-bold',
y: 38,
})
.text(d => timeFormat(d.time));
}
static toggleDeployTextbox(deploy, key, showInfoBox) {
d3.selectAll(`.deploy-info-${deploy.id}-${key} .js-deploy-info-box`)
.classed('hidden', !showInfoBox);
}
mouseOverDeployInfo(mouseXPos, key) {
if (!this.data) return false;
let dataFound = false;
this.data.forEach((d) => {
if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
dataFound = d.xPos + 1;
Deployments.toggleDeployTextbox(d, key, true);
} else {
Deployments.toggleDeployTextbox(d, key, false);
}
});
return dataFound;
}
/* `this` is bound to the D3 node */
selectParentNode() {
return this.parentNode;
}
static refText(d) {
return d.tag ? d.ref : d.sha.slice(0, 6);
}
}
...@@ -3,16 +3,20 @@ ...@@ -3,16 +3,20 @@
import d3 from 'd3'; import d3 from 'd3';
import statusCodes from '~/lib/utils/http_status'; import statusCodes from '~/lib/utils/http_status';
import { formatRelevantDigits } from '~/lib/utils/number_utils'; import Deployments from './deployments';
import '../lib/utils/common_utils';
import { formatRelevantDigits } from '../lib/utils/number_utils';
import '../flash'; import '../flash';
import {
dateFormat,
timeFormat,
} from './constants';
const prometheusContainer = '.prometheus-container'; const prometheusContainer = '.prometheus-container';
const prometheusParentGraphContainer = '.prometheus-graphs'; const prometheusParentGraphContainer = '.prometheus-graphs';
const prometheusGraphsContainer = '.prometheus-graph'; const prometheusGraphsContainer = '.prometheus-graph';
const prometheusStatesContainer = '.prometheus-state'; const prometheusStatesContainer = '.prometheus-state';
const metricsEndpoint = 'metrics.json'; const metricsEndpoint = 'metrics.json';
const timeFormat = d3.time.format('%H:%M');
const dayFormat = d3.time.format('%b %e, %a');
const bisectDate = d3.bisector(d => d.time).left; const bisectDate = d3.bisector(d => d.time).left;
const extraAddedWidthParent = 100; const extraAddedWidthParent = 100;
...@@ -36,6 +40,7 @@ class PrometheusGraph { ...@@ -36,6 +40,7 @@ class PrometheusGraph {
this.width = parentContainerWidth - this.margin.left - this.margin.right; this.width = parentContainerWidth - this.margin.left - this.margin.right;
this.height = this.originalHeight - this.margin.top - this.margin.bottom; this.height = this.originalHeight - this.margin.top - this.margin.bottom;
this.backOffRequestCounter = 0; this.backOffRequestCounter = 0;
this.deployments = new Deployments(this.width, this.height);
this.configureGraph(); this.configureGraph();
this.init(); this.init();
} else { } else {
...@@ -74,6 +79,12 @@ class PrometheusGraph { ...@@ -74,6 +79,12 @@ class PrometheusGraph {
$(prometheusParentGraphContainer).show(); $(prometheusParentGraphContainer).show();
this.transformData(metricsResponse); this.transformData(metricsResponse);
this.createGraph(); this.createGraph();
const firstMetricData = this.graphSpecificProperties[
Object.keys(this.graphSpecificProperties)[0]
].data;
this.deployments.init(firstMetricData);
} }
}); });
} }
...@@ -96,6 +107,7 @@ class PrometheusGraph { ...@@ -96,6 +107,7 @@ class PrometheusGraph {
.attr('width', this.width + this.margin.left + this.margin.right) .attr('width', this.width + this.margin.left + this.margin.right)
.attr('height', this.height + this.margin.bottom + this.margin.top) .attr('height', this.height + this.margin.bottom + this.margin.top)
.append('g') .append('g')
.attr('class', 'graph-container')
.attr('transform', `translate(${this.margin.left},${this.margin.top})`); .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
const axisLabelContainer = d3.select(prometheusGraphContainer) const axisLabelContainer = d3.select(prometheusGraphContainer)
...@@ -116,6 +128,7 @@ class PrometheusGraph { ...@@ -116,6 +128,7 @@ class PrometheusGraph {
.scale(y) .scale(y)
.ticks(this.commonGraphProperties.axis_no_ticks) .ticks(this.commonGraphProperties.axis_no_ticks)
.tickSize(-this.width) .tickSize(-this.width)
.outerTickSize(0)
.orient('left'); .orient('left');
this.createAxisLabelContainers(axisLabelContainer, key); this.createAxisLabelContainers(axisLabelContainer, key);
...@@ -248,7 +261,8 @@ class PrometheusGraph { ...@@ -248,7 +261,8 @@ class PrometheusGraph {
const d1 = currentGraphProps.data[overlayIndex]; const d1 = currentGraphProps.data[overlayIndex];
const evalTime = timeValueOverlay - d0.time > d1.time - timeValueOverlay; const evalTime = timeValueOverlay - d0.time > d1.time - timeValueOverlay;
const currentData = evalTime ? d1 : d0; const currentData = evalTime ? d1 : d0;
const currentTimeCoordinate = currentGraphProps.xScale(currentData.time); const currentTimeCoordinate = Math.floor(currentGraphProps.xScale(currentData.time));
const currentDeployXPos = this.deployments.mouseOverDeployInfo(currentXCoordinate, key);
const currentPrometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`; const currentPrometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`;
const maxValueFromData = d3.max(currentGraphProps.data.map(metricValue => metricValue.value)); const maxValueFromData = d3.max(currentGraphProps.data.map(metricValue => metricValue.value));
const maxMetricValue = currentGraphProps.yScale(maxValueFromData); const maxMetricValue = currentGraphProps.yScale(maxValueFromData);
...@@ -256,13 +270,12 @@ class PrometheusGraph { ...@@ -256,13 +270,12 @@ class PrometheusGraph {
// Clear up all the pieces of the flag // Clear up all the pieces of the flag
d3.selectAll(`${currentPrometheusGraphContainer} .selected-metric-line`).remove(); d3.selectAll(`${currentPrometheusGraphContainer} .selected-metric-line`).remove();
d3.selectAll(`${currentPrometheusGraphContainer} .circle-metric`).remove(); d3.selectAll(`${currentPrometheusGraphContainer} .circle-metric`).remove();
d3.selectAll(`${currentPrometheusGraphContainer} .rect-text-metric`).remove(); d3.selectAll(`${currentPrometheusGraphContainer} .rect-text-metric:not(.deploy-info-rect)`).remove();
d3.selectAll(`${currentPrometheusGraphContainer} .text-metric`).remove();
const currentChart = d3.select(currentPrometheusGraphContainer).select('g'); const currentChart = d3.select(currentPrometheusGraphContainer).select('g');
currentChart.append('line') currentChart.append('line')
.attr('class', 'selected-metric-line')
.attr({ .attr({
class: `${currentDeployXPos ? 'hidden' : ''} selected-metric-line`,
x1: currentTimeCoordinate, x1: currentTimeCoordinate,
y1: currentGraphProps.yScale(0), y1: currentGraphProps.yScale(0),
x2: currentTimeCoordinate, x2: currentTimeCoordinate,
...@@ -272,33 +285,45 @@ class PrometheusGraph { ...@@ -272,33 +285,45 @@ class PrometheusGraph {
currentChart.append('circle') currentChart.append('circle')
.attr('class', 'circle-metric') .attr('class', 'circle-metric')
.attr('fill', currentGraphProps.line_color) .attr('fill', currentGraphProps.line_color)
.attr('cx', currentTimeCoordinate) .attr('cx', currentDeployXPos || currentTimeCoordinate)
.attr('cy', currentGraphProps.yScale(currentData.value)) .attr('cy', currentGraphProps.yScale(currentData.value))
.attr('r', this.commonGraphProperties.circle_radius_metric); .attr('r', this.commonGraphProperties.circle_radius_metric);
if (currentDeployXPos) return;
// The little box with text // The little box with text
const rectTextMetric = currentChart.append('g') const rectTextMetric = currentChart.append('svg')
.attr('class', 'rect-text-metric') .attr({
.attr('translate', `(${currentTimeCoordinate}, ${currentGraphProps.yScale(currentData.value)})`); class: 'rect-text-metric',
x: currentTimeCoordinate,
y: 0,
});
rectTextMetric.append('rect') rectTextMetric.append('rect')
.attr('class', 'rect-metric') .attr({
.attr('x', currentTimeCoordinate + 10) class: 'rect-metric',
.attr('y', maxMetricValue) x: 4,
.attr('width', this.commonGraphProperties.rect_text_width) y: 1,
.attr('height', this.commonGraphProperties.rect_text_height); rx: 2,
width: this.commonGraphProperties.rect_text_width,
height: this.commonGraphProperties.rect_text_height,
});
rectTextMetric.append('text') rectTextMetric.append('text')
.attr('class', 'text-metric') .attr({
.attr('x', currentTimeCoordinate + 35) class: 'text-metric text-metric-bold',
.attr('y', maxMetricValue + 35) x: 8,
y: 35,
})
.text(timeFormat(currentData.time)); .text(timeFormat(currentData.time));
rectTextMetric.append('text') rectTextMetric.append('text')
.attr('class', 'text-metric-date') .attr({
.attr('x', currentTimeCoordinate + 15) class: 'text-metric-date',
.attr('y', maxMetricValue + 15) x: 8,
.text(dayFormat(currentData.time)); y: 15,
})
.text(dateFormat(currentData.time));
let currentMetricValue = formatRelevantDigits(currentData.value); let currentMetricValue = formatRelevantDigits(currentData.value);
if (key === 'cpu_values') { if (key === 'cpu_values') {
......
...@@ -157,7 +157,8 @@ ...@@ -157,7 +157,8 @@
.prometheus-graph { .prometheus-graph {
text { text {
fill: $stat-graph-axis-fill; fill: $gl-text-color;
stroke-width: 0;
} }
.label-axis-text, .label-axis-text,
...@@ -210,27 +211,33 @@ ...@@ -210,27 +211,33 @@
.rect-text-metric { .rect-text-metric {
fill: $white-light; fill: $white-light;
stroke-width: 1; stroke-width: 1;
stroke: $black; stroke: $gray-darkest;
} }
.rect-axis-text { .rect-axis-text {
fill: $white-light; fill: $white-light;
} }
.text-metric, .text-metric {
.text-median-metric, font-weight: 600;
.text-metric-usage,
.text-metric-date {
fill: $black;
} }
.text-metric-date { .selected-metric-line {
font-weight: 200; stroke: $gl-gray-dark;
stroke-width: 1;
} }
.selected-metric-line { .deployment-line {
stroke: $black; stroke: $black;
stroke-width: 1; stroke-width: 2;
}
.deploy-info-text {
dominant-baseline: text-before-edge;
}
.text-metric-bold {
font-weight: 600;
} }
.prometheus-state { .prometheus-state {
......
class Projects::DeploymentsController < Projects::ApplicationController
before_action :authorize_read_environment!
before_action :authorize_read_deployment!
def index
deployments = environment.deployments.reorder(created_at: :desc)
deployments = deployments.where('created_at > ?', params[:after].to_time) if params[:after]&.to_time
render json: { deployments: DeploymentSerializer.new(user: @current_user, project: project)
.represent_concise(deployments) }
end
private
def environment
@environment ||= project.environments.find(params[:environment_id])
end
end
...@@ -18,8 +18,10 @@ class DeploymentEntity < Grape::Entity ...@@ -18,8 +18,10 @@ class DeploymentEntity < Grape::Entity
end end
end end
expose :created_at
expose :tag expose :tag
expose :last? expose :last?
expose :user, using: UserEntity expose :user, using: UserEntity
expose :commit, using: CommitEntity expose :commit, using: CommitEntity
expose :deployable, using: BuildEntity expose :deployable, using: BuildEntity
......
class DeploymentSerializer < BaseSerializer
entity DeploymentEntity
def represent_concise(resource, opts = {})
opts[:only] = [:iid, :id, :sha, :created_at, :tag, :last?, :id, ref: [:name]]
represent(resource, opts)
end
end
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
= page_specific_javascript_bundle_tag('monitoring') = page_specific_javascript_bundle_tag('monitoring')
= render "projects/pipelines/head" = render "projects/pipelines/head"
.prometheus-container{ class: container_class, 'data-has-metrics': "#{@environment.has_metrics?}" } #js-metrics.prometheus-container{ class: container_class, data: { has_metrics: "#{@environment.has_metrics?}", deployment_endpoint: namespace_project_environment_deployments_path(@project.namespace, @project, @environment, format: :json) } }
.top-area .top-area
.row .row
.col-sm-6 .col-sm-6
......
...@@ -138,6 +138,8 @@ constraints(ProjectUrlConstrainer.new) do ...@@ -138,6 +138,8 @@ constraints(ProjectUrlConstrainer.new) do
collection do collection do
get :folder, path: 'folders/*id', constraints: { format: /(html|json)/ } get :folder, path: 'folders/*id', constraints: { format: /(html|json)/ }
end end
resources :deployments, only: [:index]
end end
resource :cycle_analytics, only: [:show] resource :cycle_analytics, only: [:show]
......
class AddCreatedAtIndexToDeployments < ActiveRecord::Migration
include Gitlab::Database::MigrationHelpers
DOWNTIME = false
disable_ddl_transaction!
def up
add_concurrent_index :deployments, :created_at
end
def down
remove_concurrent_index :deployments, :created_at
end
end
...@@ -386,6 +386,7 @@ ActiveRecord::Schema.define(version: 20170426181740) do ...@@ -386,6 +386,7 @@ ActiveRecord::Schema.define(version: 20170426181740) do
t.string "on_stop" t.string "on_stop"
end end
add_index "deployments", ["created_at"], name: "index_deployments_on_created_at", using: :btree
add_index "deployments", ["project_id", "environment_id", "iid"], name: "index_deployments_on_project_id_and_environment_id_and_iid", using: :btree add_index "deployments", ["project_id", "environment_id", "iid"], name: "index_deployments_on_project_id_and_environment_id_and_iid", using: :btree
add_index "deployments", ["project_id", "iid"], name: "index_deployments_on_project_id_and_iid", unique: true, using: :btree add_index "deployments", ["project_id", "iid"], name: "index_deployments_on_project_id_and_iid", unique: true, using: :btree
......
require 'spec_helper'
describe Projects::DeploymentsController do
include ApiHelpers
let(:user) { create(:user) }
let(:project) { create(:empty_project) }
let(:environment) { create(:environment, name: 'production', project: project) }
before do
project.add_master(user)
sign_in(user)
end
describe 'GET #index' do
it 'returns list of deployments from last 8 hours' do
create(:deployment, environment: environment, created_at: 9.hours.ago)
create(:deployment, environment: environment, created_at: 7.hours.ago)
create(:deployment, environment: environment)
get :index, environment_params(after: 8.hours.ago)
expect(response).to be_ok
expect(json_response['deployments'].count).to eq(2)
end
it 'returns a list with deployments information' do
create(:deployment, environment: environment)
get :index, environment_params
expect(response).to be_ok
expect(response).to match_response_schema('deployments')
end
end
def environment_params(opts = {})
opts.reverse_merge(namespace_id: project.namespace, project_id: project, environment_id: environment.id)
end
end
...@@ -466,6 +466,21 @@ describe "Internal Project Access", feature: true do ...@@ -466,6 +466,21 @@ describe "Internal Project Access", feature: true do
it { is_expected.to be_denied_for(:visitor) } it { is_expected.to be_denied_for(:visitor) }
end end
describe "GET /:project_path/environments/:id/deployments" do
let(:environment) { create(:environment, project: project) }
subject { namespace_project_environment_deployments_path(project.namespace, project, environment) }
it { is_expected.to be_allowed_for(:admin) }
it { is_expected.to be_allowed_for(:owner).of(project) }
it { is_expected.to be_allowed_for(:master).of(project) }
it { is_expected.to be_allowed_for(:developer).of(project) }
it { is_expected.to be_allowed_for(:reporter).of(project) }
it { is_expected.to be_denied_for(:guest).of(project) }
it { is_expected.to be_denied_for(:user) }
it { is_expected.to be_denied_for(:external) }
it { is_expected.to be_denied_for(:visitor) }
end
describe "GET /:project_path/environments/new" do describe "GET /:project_path/environments/new" do
subject { new_namespace_project_environment_path(project.namespace, project) } subject { new_namespace_project_environment_path(project.namespace, project) }
......
...@@ -449,6 +449,21 @@ describe "Private Project Access", feature: true do ...@@ -449,6 +449,21 @@ describe "Private Project Access", feature: true do
it { is_expected.to be_denied_for(:visitor) } it { is_expected.to be_denied_for(:visitor) }
end end
describe "GET /:project_path/environments/:id/deployments" do
let(:environment) { create(:environment, project: project) }
subject { namespace_project_environment_deployments_path(project.namespace, project, environment) }
it { is_expected.to be_allowed_for(:admin) }
it { is_expected.to be_allowed_for(:owner).of(project) }
it { is_expected.to be_allowed_for(:master).of(project) }
it { is_expected.to be_allowed_for(:developer).of(project) }
it { is_expected.to be_allowed_for(:reporter).of(project) }
it { is_expected.to be_denied_for(:guest).of(project) }
it { is_expected.to be_denied_for(:user) }
it { is_expected.to be_denied_for(:external) }
it { is_expected.to be_denied_for(:visitor) }
end
describe "GET /:project_path/environments/new" do describe "GET /:project_path/environments/new" do
subject { new_namespace_project_environment_path(project.namespace, project) } subject { new_namespace_project_environment_path(project.namespace, project) }
......
...@@ -286,6 +286,21 @@ describe "Public Project Access", feature: true do ...@@ -286,6 +286,21 @@ describe "Public Project Access", feature: true do
it { is_expected.to be_denied_for(:visitor) } it { is_expected.to be_denied_for(:visitor) }
end end
describe "GET /:project_path/environments/:id/deployments" do
let(:environment) { create(:environment, project: project) }
subject { namespace_project_environment_deployments_path(project.namespace, project, environment) }
it { is_expected.to be_allowed_for(:admin) }
it { is_expected.to be_allowed_for(:owner).of(project) }
it { is_expected.to be_allowed_for(:master).of(project) }
it { is_expected.to be_allowed_for(:developer).of(project) }
it { is_expected.to be_allowed_for(:reporter).of(project) }
it { is_expected.to be_denied_for(:guest).of(project) }
it { is_expected.to be_denied_for(:user) }
it { is_expected.to be_denied_for(:external) }
it { is_expected.to be_denied_for(:visitor) }
end
describe "GET /:project_path/environments/new" do describe "GET /:project_path/environments/new" do
subject { new_namespace_project_environment_path(project.namespace, project) } subject { new_namespace_project_environment_path(project.namespace, project) }
......
{
"additionalProperties": false,
"properties": {
"deployments": {
"items": {
"additionalProperties": false,
"properties": {
"created_at": {
"type": "string"
},
"id": {
"type": "integer"
},
"iid": {
"type": "integer"
},
"last?": {
"type": "boolean"
},
"ref": {
"additionalProperties": false,
"properties": {
"name": {
"type": "string"
}
},
"required": [
"name"
],
"type": "object"
},
"sha": {
"type": "string"
},
"tag": {
"type": "boolean"
}
},
"required": [
"sha",
"created_at",
"iid",
"tag",
"last?",
"ref",
"id"
],
"type": "object"
},
"minItems": 1,
"type": "array"
}
},
"required": [
"deployments"
],
"type": "object"
}
require 'spec_helper'
describe Projects::EnvironmentsController, '(JavaScript fixtures)', type: :controller do
include JavaScriptFixturesHelpers
let(:admin) { create(:admin) }
let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
let(:project) { create(:project_empty_repo, namespace: namespace, path: 'environments-project') }
let(:environment) { create(:environment, name: 'production', project: project) }
render_views
before(:all) do
clean_frontend_fixtures('environments/metrics')
end
before(:each) do
sign_in(admin)
end
it 'environments/metrics/metrics.html.raw' do |example|
get :metrics,
namespace_id: project.namespace,
project_id: project,
id: environment.id
expect(response).to be_success
store_frontend_fixture(response, example.description)
end
end
.prometheus-container{ 'data-has-metrics': "false", 'data-doc-link': '/help/administration/monitoring/prometheus/index.md', 'data-prometheus-integration': '/root/hello-prometheus/services/prometheus/edit' }
.top-area
.row
.col-sm-6
%h3.page-title
Metrics for environment
.prometheus-state
.js-getting-started.hidden
.row
.col-md-4.col-md-offset-4.state-svg
%svg
.row
.col-md-6.col-md-offset-3
%h4.text-center.state-title
Get started with performance monitoring
.row
.col-md-6.col-md-offset-3
.description-text.text-center.state-description
Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments. Learn more about performance monitoring
.row.state-button-section
.col-md-4.col-md-offset-4.text-center.state-button
%a.btn.btn-success
Configure Prometheus
.js-loading.hidden
.row
.col-md-4.col-md-offset-4.state-svg
%svg
.row
.col-md-6.col-md-offset-3
%h4.text-center.state-title
Waiting for performance data
.row
.col-md-6.col-md-offset-3
.description-text.text-center.state-description
Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.
.row.state-button-section
.col-md-4.col-md-offset-4.text-center.state-button
%a.btn.btn-success
View documentation
.js-unable-to-connect.hidden
.row
.col-md-4.col-md-offset-4.state-svg
%svg
.row
.col-md-6.col-md-offset-3
%h4.text-center.state-title
Unable to connect to Prometheus server
.row
.col-md-6.col-md-offset-3
.description-text.text-center.state-description
Ensure connectivity is available from the GitLab server to the Prometheus server
.row.state-button-section
.col-md-4.col-md-offset-4.text-center.state-button
%a.btn.btn-success
View documentation
.prometheus-graphs
.row
.col-sm-12
%svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
.row
.col-sm-12
%svg.prometheus-graph{ 'graph-type' => 'memory_values' }
import d3 from 'd3';
import PrometheusGraph from '~/monitoring/prometheus_graph';
import Deployments from '~/monitoring/deployments';
import { prometheusMockData } from './prometheus_mock_data';
describe('Metrics deployments', () => {
const fixtureName = 'environments/metrics/metrics.html.raw';
let deployment;
let prometheusGraph;
const graphElement = () => document.querySelector('.prometheus-graph');
preloadFixtures(fixtureName);
beforeEach((done) => {
// Setup the view
loadFixtures(fixtureName);
d3.selectAll('.prometheus-graph')
.append('g')
.attr('class', 'graph-container');
prometheusGraph = new PrometheusGraph();
deployment = new Deployments(1000, 500);
spyOn(prometheusGraph, 'init');
spyOn($, 'ajax').and.callFake(() => {
const d = $.Deferred();
d.resolve({
deployments: [{
id: 1,
created_at: deployment.chartData[10].time,
sha: 'testing',
tag: false,
ref: {
name: 'testing',
},
}, {
id: 2,
created_at: deployment.chartData[15].time,
sha: '',
tag: true,
ref: {
name: 'tag',
},
}],
});
setTimeout(done);
return d.promise();
});
prometheusGraph.configureGraph();
prometheusGraph.transformData(prometheusMockData.metrics);
deployment.init(prometheusGraph.graphSpecificProperties.memory_values.data);
});
it('creates line on graph for deploment', () => {
expect(
graphElement().querySelectorAll('.deployment-line').length,
).toBe(2);
});
it('creates hidden deploy boxes', () => {
expect(
graphElement().querySelectorAll('.prometheus-graph .js-deploy-info-box').length,
).toBe(2);
});
it('hides the info boxes by default', () => {
expect(
graphElement().querySelectorAll('.prometheus-graph .js-deploy-info-box.hidden').length,
).toBe(2);
});
it('shows sha short code when tag is false', () => {
expect(
graphElement().querySelector('.deploy-info-1-cpu_values .js-deploy-info-box').textContent.trim(),
).toContain('testin');
});
it('shows ref name when tag is true', () => {
expect(
graphElement().querySelector('.deploy-info-2-cpu_values .js-deploy-info-box').textContent.trim(),
).toContain('tag');
});
it('shows info box when moving mouse over line', () => {
deployment.mouseOverDeployInfo(deployment.data[0].xPos, 'cpu_values');
expect(
graphElement().querySelectorAll('.prometheus-graph .js-deploy-info-box.hidden').length,
).toBe(1);
expect(
graphElement().querySelector('.deploy-info-1-cpu_values .js-deploy-info-box.hidden'),
).toBeNull();
});
it('hides previously visible info box when moving mouse away', () => {
deployment.mouseOverDeployInfo(500, 'cpu_values');
expect(
graphElement().querySelectorAll('.prometheus-graph .js-deploy-info-box.hidden').length,
).toBe(2);
expect(
graphElement().querySelector('.deploy-info-1-cpu_values .js-deploy-info-box.hidden'),
).not.toBeNull();
});
describe('refText', () => {
it('returns shortened SHA', () => {
expect(
Deployments.refText({
tag: false,
sha: '123456789',
}),
).toBe('123456');
});
it('returns tag name', () => {
expect(
Deployments.refText({
tag: true,
ref: 'v1.0',
}),
).toBe('v1.0');
});
});
});
...@@ -3,7 +3,7 @@ import PrometheusGraph from '~/monitoring/prometheus_graph'; ...@@ -3,7 +3,7 @@ import PrometheusGraph from '~/monitoring/prometheus_graph';
import { prometheusMockData } from './prometheus_mock_data'; import { prometheusMockData } from './prometheus_mock_data';
describe('PrometheusGraph', () => { describe('PrometheusGraph', () => {
const fixtureName = 'static/environments/metrics.html.raw'; const fixtureName = 'environments/metrics/metrics.html.raw';
const prometheusGraphContainer = '.prometheus-graph'; const prometheusGraphContainer = '.prometheus-graph';
const prometheusGraphContents = `${prometheusGraphContainer}[graph-type=cpu_values]`; const prometheusGraphContents = `${prometheusGraphContainer}[graph-type=cpu_values]`;
...@@ -77,7 +77,7 @@ describe('PrometheusGraph', () => { ...@@ -77,7 +77,7 @@ describe('PrometheusGraph', () => {
}); });
describe('PrometheusGraphs UX states', () => { describe('PrometheusGraphs UX states', () => {
const fixtureName = 'static/environments/metrics.html.raw'; const fixtureName = 'environments/metrics/metrics.html.raw';
preloadFixtures(fixtureName); preloadFixtures(fixtureName);
beforeEach(() => { beforeEach(() => {
......
...@@ -3,25 +3,23 @@ require 'spec_helper' ...@@ -3,25 +3,23 @@ require 'spec_helper'
describe DeploymentEntity do describe DeploymentEntity do
let(:user) { create(:user) } let(:user) { create(:user) }
let(:request) { double('request') } let(:request) { double('request') }
let(:deployment) { create(:deployment) }
let(:entity) { described_class.new(deployment, request: request) }
subject { entity.as_json }
before do before do
allow(request).to receive(:user).and_return(user) allow(request).to receive(:user).and_return(user)
end end
let(:entity) do
described_class.new(deployment, request: request)
end
let(:deployment) { create(:deployment) }
subject { entity.as_json }
it 'exposes internal deployment id' do it 'exposes internal deployment id' do
expect(subject).to include(:iid) expect(subject).to include(:iid)
end end
it 'exposes nested information about branch' do it 'exposes nested information about branch' do
expect(subject[:ref][:name]).to eq 'master' expect(subject[:ref][:name]).to eq 'master'
expect(subject[:ref][:ref_path]).not_to be_empty end
it 'exposes creation date' do
expect(subject).to include(:created_at)
end end
end end
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