Skip to content

G
gitlab-ce
Commit 4c600fe7 authored by Fatih Acet's avatar Fatih Acet
Browse files
Options

Merge branch 'refactor-prometheus-graph-layout' into 'master' 

Rename prometheus Vue components

See merge request !13938
parents b9125eb6 4b892a5f
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 131 deletions
app/assets/javascripts/monitoring/components/monitoring.vue → app/assets/javascripts/monitoring/components/dashboard.vue
View file @ 4c600fe7
......@@ -3,8 +3,9 @@
import _ from 'underscore';
import statusCodes from '../../lib/utils/http_status';
import MonitoringService from '../services/monitoring_service';
import monitoringRow from './monitoring_row.vue';
import monitoringState from './monitoring_state.vue';
import GraphGroup from './graph_group.vue';
import GraphRow from './graph_row.vue';
import EmptyState from './empty_state.vue';
import MonitoringStore from '../stores/monitoring_store';
import eventHub from '../event_hub';
......@@ -31,8 +32,9 @@
},
components: {
monitoringRow,
monitoringState,
GraphGroup,
GraphRow,
EmptyState,
},
methods: {
......@@ -94,7 +96,6 @@
this.updatedAspectRatios = 0;
}
},
},
created() {
......@@ -118,40 +119,27 @@
},
};
</script>
<template>
<div
class="prometheus-graphs"
v-if="!showEmptyState">
<div
class="row"
<div v-if="!showEmptyState" class="prometheus-graphs">
<graph-group
v-for="(groupData, index) in store.groups"
:key="index">
<div
class="col-md-12">
<div
class="panel panel-default prometheus-panel">
<div
class="panel-heading">
<h4>{{groupData.group}}</h4>
</div>
<div
class="panel-body">
<monitoring-row
v-for="(row, index) in groupData.metrics"
:key="index"
:row-data="row"
:update-aspect-ratio="updateAspectRatio"
:deployment-data="store.deploymentData"
/>
</div>
</div>
</div>
</div>
:key="index"
:name="groupData.group"
>
<graph-row
v-for="(row, index) in groupData.metrics"
:key="index"
:row-data="row"
:update-aspect-ratio="updateAspectRatio"
:deployment-data="store.deploymentData"
/>
</graph-group>
</div>
<monitoring-state
<empty-state
v-else
:selected-state="state"
:documentation-path="documentationPath"
:settings-path="settingsPath"
v-else
/>
</template>
app/assets/javascripts/monitoring/components/monitoring_state.vue → app/assets/javascripts/monitoring/components/empty_state.vue
View file @ 4c600fe7
......@@ -62,49 +62,33 @@
},
};
</script>
<template>
<div
class="prometheus-state">
<div
class="row">
<div
class="col-md-4 col-md-offset-4 state-svg"
v-html="currentState.svg">
</div>
<div class="prometheus-state">
<div class="row">
<div class="col-md-4 col-md-offset-4 state-svg" v-html="currentState.svg"></div>
</div>
<div
class="row">
<div
class="col-md-6 col-md-offset-3">
<h4
class="text-center state-title">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h4 class="text-center state-title">
{{currentState.title}}
</h4>
</div>
</div>
<div
class="row">
<div
class="col-md-6 col-md-offset-3">
<div
class="description-text text-center state-description">
{{currentState.description}}
<a
:href="settingsPath"
v-if="showButtonDescription">
Prometheus server
</a>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="description-text text-center state-description">
{{currentState.description}}
<a v-if="showButtonDescription" :href="settingsPath">
Prometheus server
</a>
</div>
</div>
</div>
<div
class="row state-button-section">
<div
class="col-md-4 col-md-offset-4 text-center state-button">
<a
class="btn btn-success"
:href="buttonPath">
{{currentState.buttonText}}
<div class="row state-button-section">
<div class="col-md-4 col-md-offset-4 text-center state-button">
<a class="btn btn-success" :href="buttonPath">
{{currentState.buttonText}}
</a>
</div>
</div>
......
app/assets/javascripts/monitoring/components/monitoring_column.vue → app/assets/javascripts/monitoring/components/graph.vue
View file @ 4c600fe7
<script>
import d3 from 'd3';
import monitoringLegends from './monitoring_legends.vue';
import monitoringFlag from './monitoring_flag.vue';
import monitoringDeployment from './monitoring_deployment.vue';
import GraphLegend from './graph/legend.vue';
import GraphFlag from './graph/flag.vue';
import GraphDeployment from './graph/deployment.vue';
import MonitoringMixin from '../mixins/monitoring_mixins';
import eventHub from '../event_hub';
import measurements from '../utils/measurements';
......@@ -14,7 +14,7 @@
export default {
props: {
columnData: {
graphData: {
type: Object,
required: true,
},
......@@ -66,9 +66,9 @@
},
components: {
monitoringLegends,
monitoringFlag,
monitoringDeployment,
GraphLegend,
GraphFlag,
GraphDeployment,
},
computed: {
......@@ -97,7 +97,7 @@
methods: {
draw() {
const breakpointSize = bp.getBreakpointSize();
const query = this.columnData.queries[0];
const query = this.graphData.queries[0];
this.margin = measurements.large.margin;
if (breakpointSize === 'xs' || breakpointSize === 'sm') {
this.graphHeight = 300;
......@@ -106,7 +106,7 @@
}
this.data = query.result[0].values;
this.unitOfDisplay = query.unit || '';
this.yAxisLabel = this.columnData.y_label || 'Values';
this.yAxisLabel = this.graphData.y_label || 'Values';
this.legendTitle = query.label || 'Average';
this.graphWidth = this.$refs.baseSvg.clientWidth -
this.margin.left - this.margin.right;
......@@ -224,7 +224,7 @@
:class="classType">
<h5
class="text-center graph-title">
{{columnData.title}}
{{graphData.title}}
</h5>
<div
class="prometheus-svg-container"
......@@ -240,7 +240,7 @@
class="y-axis"
transform="translate(70, 20)">
</g>
<monitoring-legends
<graph-legend
:graph-width="graphWidth"
:graph-height="graphHeight"
:margin="margin"
......@@ -268,13 +268,13 @@
stroke-width="2"
transform="translate(-5, 20)">
</path>
<monitoring-deployment
<graph-deployment
:show-deploy-info="showDeployInfo"
:deployment-data="reducedDeploymentData"
:graph-height="graphHeight"
:graph-height-offset="graphHeightOffset"
/>
<monitoring-flag
<graph-flag
v-if="showFlag"
:current-x-coordinate="currentXCoordinate"
:current-y-coordinate="currentYCoordinate"
......
app/assets/javascripts/monitoring/components/monitoring_deployment.vue → app/assets/javascripts/monitoring/components/graph/deployment.vue
View file @ 4c600fe7
<script>
import { dateFormat, timeFormat } from '../utils/date_time_formatters';
import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
export default {
props: {
......
app/assets/javascripts/monitoring/components/monitoring_flag.vue → app/assets/javascripts/monitoring/components/graph/flag.vue
View file @ 4c600fe7
<script>
import { dateFormat, timeFormat } from '../utils/date_time_formatters';
import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
export default {
props: {
......
app/assets/javascripts/monitoring/components/monitoring_legends.vue → app/assets/javascripts/monitoring/components/graph/legend.vue
View file @ 4c600fe7
......@@ -74,7 +74,7 @@
};
</script>
<template>
<g
<g
class="axis-label-container">
<line
class="label-x-axis-line"
......@@ -100,7 +100,7 @@
:width="yLabelWidth"
:height="yLabelHeight">
</rect>
<text
<text
class="label-axis-text y-label-text"
text-anchor="middle"
:transform="textTransform"
......
app/assets/javascripts/monitoring/components/graph_group.vue 0 → 100644
View file @ 4c600fe7
<script>
export default {
props: {
name: {
type: String,
required: true,
},
},
};
</script>
<template>
<div class="panel panel-default prometheus-panel">
<div class="panel-heading">
<h4>{{name}}</h4>
</div>
<div class="panel-body">
<slot />
</div>
</div>
</template>
app/assets/javascripts/monitoring/components/monitoring_row.vue → app/assets/javascripts/monitoring/components/graph_row.vue
View file @ 4c600fe7
<script>
import monitoringColumn from './monitoring_column.vue';
import Graph from './graph.vue';
export default {
props: {
......@@ -17,7 +17,7 @@
},
},
components: {
monitoringColumn,
Graph,
},
computed: {
bootstrapClass() {
......@@ -26,12 +26,12 @@
},
};
</script>
<template>
<div
class="prometheus-row row">
<monitoring-column
v-for="(column, index) in rowData"
:column-data="column"
<div class="prometheus-row row">
<graph
v-for="(graphData, index) in rowData"
:graph-data="graphData"
:class-type="bootstrapClass"
:key="index"
:update-aspect-ratio="updateAspectRatio"
......
app/assets/javascripts/monitoring/monitoring_bundle.js
View file @ 4c600fe7
import Vue from 'vue';
import Monitoring from './components/monitoring.vue';
import Dashboard from './components/dashboard.vue';
document.addEventListener('DOMContentLoaded', () => new Vue({
el: '#prometheus-graphs',
components: {
'monitoring-dashboard': Monitoring,
Dashboard,
},
render: createElement => createElement('monitoring-dashboard'),
render: createElement => createElement('dashboard'),
}));
spec/javascripts/monitoring/monitoring_spec.js → spec/javascripts/monitoring/dashboard_spec.js
View file @ 4c600fe7
import Vue from 'vue';
import Monitoring from '~/monitoring/components/monitoring.vue';
import Dashboard from '~/monitoring/components/dashboard.vue';
import { MonitorMockInterceptor } from './mock_data';
describe('Monitoring', () => {
describe('Dashboard', () => {
const fixtureName = 'environments/metrics/metrics.html.raw';
let MonitoringComponent;
let DashboardComponent;
let component;
preloadFixtures(fixtureName);
beforeEach(() => {
loadFixtures(fixtureName);
MonitoringComponent = Vue.extend(Monitoring);
DashboardComponent = Vue.extend(Dashboard);
});
describe('no metrics are available yet', () => {
it('shows a getting started empty state when no metrics are present', () => {
component = new MonitoringComponent({
component = new DashboardComponent({
el: document.querySelector('#prometheus-graphs'),
});
......@@ -36,7 +36,7 @@ describe('Monitoring', () => {
});
it('shows up a loading state', (done) => {
component = new MonitoringComponent({
component = new DashboardComponent({
el: document.querySelector('#prometheus-graphs'),
});
component.$mount();
......
spec/javascripts/monitoring/monitoring_state_spec.js → spec/javascripts/monitoring/dashboard_state_spec.js
View file @ 4c600fe7
import Vue from 'vue';
import MonitoringState from '~/monitoring/components/monitoring_state.vue';
import EmptyState from '~/monitoring/components/empty_state.vue';
import { statePaths } from './mock_data';
const createComponent = (propsData) => {
const Component = Vue.extend(MonitoringState);
const Component = Vue.extend(EmptyState);
return new Component({
propsData,
......@@ -14,7 +14,7 @@ function getTextFromNode(component, selector) {
return component.$el.querySelector(selector).firstChild.nodeValue.trim();
}
describe('MonitoringState', () => {
describe('EmptyState', () => {
describe('Computed props', () => {
it('currentState', () => {
const component = createComponent({
......
spec/javascripts/monitoring/monitoring_deployment_spec.js → spec/javascripts/monitoring/graph/deployment_spec.js
View file @ 4c600fe7
import Vue from 'vue';
import MonitoringState from '~/monitoring/components/monitoring_deployment.vue';
import { deploymentData } from './mock_data';
import GraphDeployment from '~/monitoring/components/graph/deployment.vue';
import { deploymentData } from '../mock_data';
const createComponent = (propsData) => {
const Component = Vue.extend(MonitoringState);
const Component = Vue.extend(GraphDeployment);
return new Component({
propsData,
......
spec/javascripts/monitoring/monitoring_flag_spec.js → spec/javascripts/monitoring/graph/flag_spec.js
View file @ 4c600fe7
import Vue from 'vue';
import MonitoringFlag from '~/monitoring/components/monitoring_flag.vue';
import GraphFlag from '~/monitoring/components/graph/flag.vue';
const createComponent = (propsData) => {
const Component = Vue.extend(MonitoringFlag);
const Component = Vue.extend(GraphFlag);
return new Component({
propsData,
......@@ -14,7 +14,7 @@ function getCoordinate(component, selector, coordinate) {
return parseInt(coordinateVal, 10);
}
describe('MonitoringFlag', () => {
describe('GraphFlag', () => {
it('has a line and a circle located at the currentXCoordinate and currentYCoordinate', () => {
const component = createComponent({
currentXCoordinate: 200,
......
spec/javascripts/monitoring/monitoring_legends_spec.js → spec/javascripts/monitoring/graph/legend_spec.js
View file @ 4c600fe7
import Vue from 'vue';
import MonitoringLegends from '~/monitoring/components/monitoring_legends.vue';
import GraphLegend from '~/monitoring/components/graph/legend.vue';
import measurements from '~/monitoring/utils/measurements';
const createComponent = (propsData) => {
const Component = Vue.extend(MonitoringLegends);
const Component = Vue.extend(GraphLegend);
return new Component({
propsData,
......@@ -14,7 +14,7 @@ function getTextFromNode(component, selector) {
return component.$el.querySelector(selector).firstChild.nodeValue.trim();
}
describe('MonitoringLegends', () => {
describe('GraphLegend', () => {
describe('Computed props', () => {
it('textTransform', () => {
const component = createComponent({
......
spec/javascripts/monitoring/monitoring_row_spec.js → spec/javascripts/monitoring/graph_row_spec.js
View file @ 4c600fe7
import Vue from 'vue';
import MonitoringRow from '~/monitoring/components/monitoring_row.vue';
import GraphRow from '~/monitoring/components/graph_row.vue';
import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
import { deploymentData, singleRowMetrics } from './mock_data';
const createComponent = (propsData) => {
const Component = Vue.extend(MonitoringRow);
const Component = Vue.extend(GraphRow);
return new Component({
propsData,
}).$mount();
};
describe('MonitoringRow', () => {
describe('GraphRow', () => {
beforeEach(() => {
spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
});
describe('Computed props', () => {
it('bootstrapClass is set to col-md-6 when rowData is higher/equal to 2', () => {
const component = createComponent({
......
spec/javascripts/monitoring/monitoring_column_spec.js → spec/javascripts/monitoring/graph_spec.js
View file @ 4c600fe7
import Vue from 'vue';
import _ from 'underscore';
import MonitoringColumn from '~/monitoring/components/monitoring_column.vue';
import Graph from '~/monitoring/components/graph.vue';
import MonitoringMixins from '~/monitoring/mixins/monitoring_mixins';
import eventHub from '~/monitoring/event_hub';
import { deploymentData, singleRowMetrics } from './mock_data';
const createComponent = (propsData) => {
const Component = Vue.extend(MonitoringColumn);
const Component = Vue.extend(Graph);
return new Component({
propsData,
}).$mount();
};
describe('MonitoringColumn', () => {
describe('Graph', () => {
beforeEach(() => {
spyOn(MonitoringMixins.methods, 'formatDeployments').and.callFake(function fakeFormat() {
return {};
});
spyOn(MonitoringMixins.methods, 'formatDeployments').and.returnValue({});
});
it('has a title', () => {
const component = createComponent({
columnData: singleRowMetrics[0],
graphData: singleRowMetrics[0],
classType: 'col-md-6',
updateAspectRatio: false,
deploymentData,
});
expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.columnData.title);
expect(component.$el.querySelector('.text-center').innerText.trim()).toBe(component.graphData.title);
});
it('creates a path for the line and area of the graph', (done) => {
const component = createComponent({
columnData: singleRowMetrics[0],
graphData: singleRowMetrics[0],
classType: 'col-md-6',
updateAspectRatio: false,
deploymentData,
......@@ -53,7 +51,7 @@ describe('MonitoringColumn', () => {
describe('Computed props', () => {
it('axisTransform translates an element Y position depending of its height', () => {
const component = createComponent({
columnData: singleRowMetrics[0],
graphData: singleRowMetrics[0],
classType: 'col-md-6',
updateAspectRatio: false,
deploymentData,
......@@ -66,7 +64,7 @@ describe('MonitoringColumn', () => {
it('outterViewBox gets a width and height property based on the DOM size of the element', () => {
const component = createComponent({
columnData: singleRowMetrics[0],
graphData: singleRowMetrics[0],
classType: 'col-md-6',
updateAspectRatio: false,
deploymentData,
......@@ -81,7 +79,7 @@ describe('MonitoringColumn', () => {
it('sends an event to the eventhub when it has finished resizing', (done) => {
const component = createComponent({
columnData: singleRowMetrics[0],
graphData: singleRowMetrics[0],
classType: 'col-md-6',
updateAspectRatio: false,
deploymentData,
......@@ -97,13 +95,13 @@ describe('MonitoringColumn', () => {
it('has a title for the y-axis and the chart legend that comes from the backend', () => {
const component = createComponent({
columnData: singleRowMetrics[0],
graphData: singleRowMetrics[0],
classType: 'col-md-6',
updateAspectRatio: false,
deploymentData,
});
expect(component.yAxisLabel).toEqual(component.columnData.y_label);
expect(component.legendTitle).toEqual(component.columnData.queries[0].label);
expect(component.yAxisLabel).toEqual(component.graphData.y_label);
expect(component.legendTitle).toEqual(component.graphData.queries[0].label);
});
});
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7