Commit 4c600fe7 authored by Fatih Acet's avatar Fatih Acet

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

Rename prometheus Vue components

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